{ "schemaVersion": 1, "name": "resources", "title": "Resource library", "tier": "Free", "price": 0, "license": "MIT", "framework": "React 19", "dependencies": [ "@bld8/ui" ], "description": "File selection, searchable metadata, CSV export and reversible archiving.", "notes": "Pass initialRecords, onImport and onRecordsChange for your integration. Without onImport, only metadata is added in memory; files are not hosted or uploaded. CSV exports chosen metadata with formula escaping. Archive has one-step undo. Server-side storage and validation are application concerns.", "files": [ { "path": "packages/blocks/src/account-settings.tsx", "content": "'use client';\nimport { useState, type FormEvent } from 'react';\nimport { Avatar, Button, Field, Input, Switch } from '@bld8/ui';\n\nexport interface AccountValues { name: string; email: string; digest: boolean }\nexport function AccountSettings({ initialValues = { name: 'Alex Morgan', email: 'alex@example.com', digest: true }, onSave }: { initialValues?: AccountValues; onSave?: (values: AccountValues) => Promise }) {\n const [values, setValues] = useState(initialValues);\n const [errors, setErrors] = useState<{ name?: string; email?: string }>({});\n const [saving, setSaving] = useState(false);\n const [message, setMessage] = useState('');\n function update(patch: Partial) { setValues(current => ({ ...current, ...patch })); setMessage(''); }\n async function save(event: FormEvent) {\n event.preventDefault();\n const next = { name: values.name.trim() ? undefined : 'Enter your name.', email: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(values.email.trim()) ? undefined : 'Enter a valid email address.' };\n setErrors(next); if (next.name || next.email) return;\n setSaving(true);\n try { if (onSave) await onSave({ ...values, name: values.name.trim(), email: values.email.trim() }); setMessage(onSave ? 'Changes saved.' : 'Saved for this session.'); }\n catch { setMessage('Changes could not be saved. Please try again.'); }\n finally { setSaving(false); }\n }\n return
\n

PERSONAL SPACE

Your profile.

The details that make it yours.

\n
\n
update({name:e.target.value})} /> update({email:e.target.value})} />
\n
update({digest:e.target.checked})} />
\n

{onSave ? 'Save your profile changes.' : 'Sample profile. Changes stay in this session.'}

\n

{message}

\n
;\n}\n" }, { "path": "packages/blocks/src/index.ts", "content": "'use client';\nexport * from './sign-in.js';\nexport * from './account-settings.js';\nexport * from './metrics.js';\nexport * from './workspace.js';\nexport * from './team.js';\nexport * from './project-board.js';\nexport * from './templates.js';\nexport * from './project-planner.js';\nexport * from './resource-manager.js';\nexport * from './operations-template.js';\nexport * from './outline-projects.js';\nexport * from './outline-repository.js';\n" }, { "path": "packages/blocks/src/metrics.tsx", "content": "'use client';\nimport { useState } from 'react';\nimport { Badge, Button } from '@bld8/ui';\n\nconst periods = {\n week: { label:'This week', visits:'8,420', projects:'24', completion:'86%', bars:[42,58,48,76,65,92,80], labels:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] },\n month: { label:'This month', visits:'32,680', projects:'91', completion:'89%', bars:[35,54,61,48,78,88,96], labels:['01','05','09','13','17','21','25'] },\n};\nexport function MetricsOverview() {\n const [period, setPeriod] = useState('week');\n const current = periods[period];\n return
\n

THE BIG PICTURE

A good rhythm.

{(Object.keys(periods) as (keyof typeof periods)[]).map(key => )}
\n
{[['Visits',current.visits,'+12%'],['Active projects',current.projects,'+4'],['Completion',current.completion,'+3%']].map(([label,value,change]) =>
{label}{value}{change}
)}
\n
Workspace activity{current.label} · sample data
`${current.labels[i]} ${value}`).join(', ')}`}>{current.bars.map((height,index) =>
{current.labels[index]}
)}
\n
;\n}\n" }, { "path": "packages/blocks/src/operations-template.tsx", "content": "'use client';\nimport { useEffect, useRef, useState } from 'react';\nimport { CalendarDays, FolderOpen, Search, Settings2, Sparkle } from 'lucide-react';\nimport { Alert, Badge, Button, CommandPalette, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, SidebarProvider, Sidebar, SidebarHeader, SidebarGroup, SidebarMenuButton, SidebarFooter, SidebarInset, SidebarTrigger } from '@bld8/ui';\nimport { OutlineProjects } from './outline-projects.js';\nimport { createOutlineRepository, type OutlineRepository } from './outline-repository.js';\nimport type { ResourceRecord } from './resource-manager.js';\nimport type { AccountValues } from './account-settings.js';\nimport { ResourceManager } from './resource-manager.js';\nimport { AccountSettings } from './account-settings.js';\n\nconst views=[{id:'Planning',icon:CalendarDays},{id:'Resources',icon:FolderOpen},{id:'Settings',icon:Settings2}] as const;\nexport function OperationsTemplate({repository:provided}:{repository?:OutlineRepository}={}) {\n const [repository,setRepository]=useState(provided ?? null);\n const [storageError,setStorageError]=useState('');\n const [preferences,setPreferences]=useState<{resources?:ResourceRecord[];profile?:AccountValues}|null>(null);\n useEffect(()=>{try{setRepository(provided ?? createOutlineRepository(window.localStorage));const raw=window.localStorage.getItem('bld8-outline-preferences-v1');const value=raw?JSON.parse(raw):{};setPreferences({resources:Array.isArray(value.resources)?value.resources:undefined,profile:value.profile && typeof value.profile.name==='string' && typeof value.profile.email==='string' && typeof value.profile.digest==='boolean'?value.profile:undefined});}catch{setStorageError('Browser storage is unavailable. Enable storage for this site and reload to use the saved workspace.');setPreferences({});}},[provided]);\n const preferenceRef=useRef(preferences);preferenceRef.current=preferences;\n function savePreferences(patch:Partial>){const next={...preferenceRef.current,...patch};window.localStorage.setItem('bld8-outline-preferences-v1',JSON.stringify(next));preferenceRef.current=next;setPreferences(next);}\n\n const [view,setView]=useState('Planning');const heading=useRef(null);\n function navigate(next:string) {setView(next);requestAnimationFrame(()=>heading.current?.focus());}\n return
\n
✳ OutlineExample applicationFind a view} items={views.map(item=>({id:item.id,label:'Open '+item.id.toLowerCase(),category:'Navigate',icon:item.icon,onSelect:()=>navigate(item.id)}))} />
\n \n \n Your workspace\n {views.map(item=>setView(item.id)} />)}\n Small steps. Room to think.\n \n \n
{view}
\n \n

SMALL PLANS. USEFUL DETAILS.

{view==='Planning' ? 'Make room for the next idea.' : view==='Resources' ? 'Keep the references close.' : 'A few details, made yours.'}

Projects, references and preferences. Saved in this browser; no account required.

\n {views.map(item=>navigate(item.id)}>Open {item.id.toLowerCase()})}\n {storageError && {storageError}}\n \n \n \n \n \n
Outline / BLD8 UI · MIT · Both collections free. Local browser storage · File metadata only · Connect the repository adapter to your own API.
\n
;\n}\n" }, { "path": "packages/blocks/src/outline-projects.tsx", "content": "'use client';\nimport { useEffect, useRef, useState } from 'react';\nimport { Archive, Check, Download, Pencil, Plus, Trash2 } from 'lucide-react';\nimport { Alert, Badge, Button, DataTable, Dialog, Field, Form, FormErrorSummary, Input, Textarea, createTableCSV, defaultTableQuery, useForm, useUnsavedChanges, type Column, type TableQuery } from '@bld8/ui';\nimport { OutlineValidationError, validateOutline, type OutlineProject, type OutlineRepository, type OutlineValues } from './outline-repository.js';\n\nconst empty:OutlineValues={name:'',due:'',notes:'',status:'Planned'};\nfunction ProjectEditor({project,repository,onSaved,onClose}:{project:OutlineProject|null;repository:OutlineRepository;onSaved:()=>void;onClose:()=>void}) {\n const [discard,setDiscard]=useState(false);\n const form=useForm({\n initialValues:project?{name:project.name,due:project.due,notes:project.notes,status:project.status}:empty,\n validate:validateOutline,\n onSubmit:async(values,{signal})=>{try{const saved=await repository.save(values,project,signal);return {values:saved};}catch(error){if(error instanceof OutlineValidationError)return {fieldErrors:error.fields};throw error;}},\n onSuccess:onSaved,\n });\n useUnsavedChanges(form.dirty);\n const close=()=>{if(form.pending)return;if(form.dirty)setDiscard(true);else onClose();};\n return {if(!open)close();}}>\n
\n \n form.setField('name',event.target.value)} disabled={form.pending} autoComplete=\"off\" maxLength={80} />\n
form.setField('due',event.target.value)} disabled={form.pending} />
\n