amorphous-cli 0.1.11 → 0.1.13

package/README.md

@@ -5,3 +5,5 @@ Make whatever you want, yourself, with your own agent, or with others. And whate
 ```bash
 npx amorphous-cli@latest setup
 ```
+
+Create a purpose-built starter with `amorphous-cli create --template list|board|landing` (or omit the flag for a blank page). Collaborators can run `amorphous-cli recommend --note "…"` to send local source to the owner for review. The owner can publish a recommendation live or decline it in the abstract.

package/lib/agent-contract.mjs

@@ -53,12 +53,16 @@ export function syncProjectContract(cwd) {
   return 'refreshed'
 }
 
-export function writeStarter(cwd) {
+export function writeStarter(cwd, template = 'blank') {
   const assets = join(skillRoot, 'assets')
+  const templates = JSON.parse(readFileSync(join(dirname(skillRoot), '../templates.json'), 'utf8'))
+  const selected = templates[template]
+  if (!selected) throw new Error(`Unknown template “${template}”. Choose blank, list, board, or landing.`)
+  const starterFiles = { 'index.html': selected.html, 'styles.css': selected.css, 'app.js': selected.js }
   for (const name of ['index.html', 'styles.css', 'app.js']) {
     const dest = join(cwd, name)
     if (!existsSync(dest)) {
-      writeFileSync(dest, readFileSync(join(assets, name)))
+      writeFileSync(dest, starterFiles[name] ?? readFileSync(join(assets, name)))
     }
   }
   for (const name of ['data.ndjson', 'private.ndjson']) {

package/lib/agent-contract.test.mjs

@@ -31,7 +31,18 @@ test('setup copies the skill, and an edited contract is left alone', () => {
   const project = mkdtempSync(join(tmpdir(), 'amorphous-page-'))
   assert.equal(syncProjectContract(project), 'wrote')
   writeStarter(project)
-  assert.match(readFileSync(join(project, 'index.html'), 'utf8'), /id="who"/)
+  assert.match(readFileSync(join(project, 'index.html'), 'utf8'), /Make this abstract your own/)
+  assert.equal(readFileSync(join(project, 'styles.css'), 'utf8').length > 0, true)
+  const board = mkdtempSync(join(tmpdir(), 'amorphous-board-'))
+  writeStarter(board, 'board')
+  assert.match(readFileSync(join(board, 'index.html'), 'utf8'), /Project board/)
+  assert.match(readFileSync(join(board, 'app.js'), 'utf8'), /board-card/)
+  for (const [template, expected] of [['list', 'SHARED LIST'], ['landing', 'A CLEAR, HUMAN INTRODUCTION']]) {
+    const dir = mkdtempSync(join(tmpdir(), `amorphous-${template}-`))
+    writeStarter(dir, template)
+    assert.match(readFileSync(join(dir, 'index.html'), 'utf8'), new RegExp(expected))
+  }
+  assert.throws(() => writeStarter(project, 'unknown'), /Unknown template/)
   assert.match(readFileSync(join(project, 'AGENTS.md'), 'utf8'), new RegExp(`amorphous-contract: ${CONTRACT_VERSION}`))
 
   const edited = readFileSync(join(project, 'AGENTS.md'), 'utf8') + '\nEdited.\n'

package/lib/api.mjs

@@ -2,7 +2,6 @@ import { cliAppFetchOrigin, cliAppHostHeader } from './config.mjs'
 import { ensureFreshSession } from './session.mjs'
 
 const FRIENDLY = {
-  'This abstract already has 8 people': 'This abstract already has 8 people. Run: amorphous-cli people',
   'User not found': 'No account with that email yet.',
   'Grant failed': 'Could not invite. Run: amorphous-cli people',
   'Cannot revoke owner': "You can't remove the owner. Run: amorphous-cli people",
@@ -29,6 +28,9 @@ export function friendlyMessage(raw) {
   if (/^You already own \d+ abstracts$/.test(stripped)) {
     return `${stripped}. Run: amorphous-cli list`
   }
+  if (/^This abstract already has \d+ people$/.test(stripped)) {
+    return `${stripped}. Run: amorphous-cli people`
+  }
   return stripped || text || 'Request failed.'
 }
 

package/lib/commands.mjs

@@ -64,6 +64,12 @@ function printJson(data) {
   console.log(JSON.stringify(data, null, 2))
 }
 
+function warnIfRemoteChanged(detail) {
+  if (detail?.remoteChangedSincePush) {
+    console.error('This abstract has changed since you last pushed.')
+  }
+}
+
 function readMeta(cwd) {
   const path = projectMetaPath(cwd)
   if (!existsSync(path)) return null
@@ -209,7 +215,8 @@ They tell you when to push, preview, publish, or invite.`)
 async function cmdCreate(cwd, rest) {
   const { flags } = parseFlags(rest)
   if (flags.help) return printHelp('create')
-  const data = await apiFetch('/api/abstracts', { method: 'POST' })
+  const template = typeof flags.template === 'string' ? flags.template : 'blank'
+  const data = await apiFetch('/api/abstracts', { method: 'POST', body: JSON.stringify({ template }) })
   const id = data.id
   writeMeta(cwd, id)
   const name = typeof flags.name === 'string' ? flags.name.trim() : ''
@@ -227,7 +234,7 @@ async function cmdCreate(cwd, rest) {
       body: JSON.stringify({ collection_id: folder.id }),
     })
   }
-  writeStarter(cwd)
+  writeStarter(cwd, template)
   syncProjectContract(cwd)
   if (jsonMode(flags)) printJson({ id, name: name || 'Untitled' })
   else {
@@ -274,8 +281,26 @@ async function cmdInvite(cwd, rest) {
   })
   const url = String(result.url || '')
   if (!url) throw new Error('Could not invite.')
-  if (jsonMode(flags)) printJson({ email, access: role === 'user' ? 'view' : role === 'editor' ? 'edit' : role, url })
-  else console.log(url)
+  const accessLabel = role === 'user' ? 'view' : role === 'editor' ? 'edit' : role
+  if (jsonMode(flags)) {
+    printJson({ email, access: accessLabel, url, mailed: Boolean(result.mailed) })
+    return
+  }
+  console.log(url)
+  if (result.notified === 'role') console.log('Updated their access.')
+  else if (result.mailed) console.log('Emailed the invite.')
+  else console.log('The invite is saved. The email did not send.')
+}
+
+async function cmdNotify(cwd, rest) {
+  const { flags, positional } = parseFlags(rest)
+  if (flags.help) return printHelp('notify')
+  const id = await resolveAbstractId(cwd, flags, positional)
+  const result = await apiFetch(`/api/abstracts/${id}/notify`, { method: 'POST' })
+  const sent = Number(result.sent || 0)
+  if (jsonMode(flags)) printJson({ sent })
+  else if (sent === 0) console.log('No one else to email.')
+  else console.log(sent === 1 ? 'Emailed 1 member.' : `Emailed ${sent} members.`)
 }
 
 async function cmdRemove(cwd, rest) {
@@ -321,6 +346,7 @@ async function cmdPull(cwd, rest) {
   if (flags.help) return printHelp('pull')
   const id = requireMeta(cwd)
   const detail = await apiFetch(`/api/abstracts/${id}`)
+  warnIfRemoteChanged(detail)
   const records = await apiFetch(`/api/abstracts/${id}/records`)
   const rows = records.records || []
   const shared = rows.filter((r) => r.visibility !== 'private')
@@ -341,6 +367,7 @@ async function cmdPush(cwd, rest) {
   const { flags } = parseFlags(rest)
   if (flags.help) return printHelp('push')
   const id = requireMeta(cwd)
+  warnIfRemoteChanged(await apiFetch(`/api/abstracts/${id}`))
   if (flags.data) {
     const localRecords = recordsFromLocal(cwd)
     const { refused } = await apiFetch(`/api/abstracts/${id}/records`, {
@@ -373,8 +400,27 @@ async function cmdServe(cwd, rest) {
     port,
     json: jsonMode(flags),
   })
+  let warnedRemote = false
+  async function watchRemote() {
+    try {
+      const detail = await apiFetch(`/api/abstracts/${id}`)
+      if (detail.remoteChangedSincePush && !warnedRemote) {
+        warnedRemote = true
+        console.error('This abstract has changed since you last pushed.')
+      } else if (!detail.remoteChangedSincePush) {
+        warnedRemote = false
+      }
+    } catch {
+      /* leave the dev server up if the check cannot reach the abstract */
+    }
+  }
+  void watchRemote()
+  const remoteTimer = setInterval(() => {
+    void watchRemote()
+  }, 20000)
   await new Promise((resolve) => {
     const stop = () => {
+      clearInterval(remoteTimer)
       running.close().then(resolve, resolve)
     }
     process.once('SIGINT', stop)
@@ -403,8 +449,10 @@ async function cmdPreview(cwd, rest) {
   const { flags, positional } = parseFlags(rest)
   if (flags.help) return printHelp('preview')
   const id = await resolveAbstractId(cwd, flags, positional)
+  const detail = await apiFetch(`/api/abstracts/${id}`)
+  warnIfRemoteChanged(detail)
   const urls = urlsFor(id)
-  if (jsonMode(flags)) printJson({ preview: urls.preview })
+  if (jsonMode(flags)) printJson({ preview: urls.preview, remoteChangedSincePush: Boolean(detail.remoteChangedSincePush) })
   else console.log(urls.preview)
 }
 
@@ -412,6 +460,7 @@ async function cmdPublish(cwd, rest) {
   const { flags, positional } = parseFlags(rest)
   if (flags.help) return printHelp('publish')
   const id = await resolveAbstractId(cwd, flags, positional)
+  warnIfRemoteChanged(await apiFetch(`/api/abstracts/${id}`))
   const live = Boolean(flags.live)
   const version = await apiFetch(`/api/abstracts/${id}/publish`, {
     method: 'POST',
@@ -421,6 +470,18 @@ async function cmdPublish(cwd, rest) {
   else console.log(live ? 'It’s live.' : 'Published.')
 }
 
+async function cmdRecommend(cwd, rest) {
+  const { flags } = parseFlags(rest)
+  if (flags.help) return printHelp('recommend')
+  const id = requireMeta(cwd)
+  const { html, css, js } = readProjectFiles(cwd)
+  const result = await apiFetch(`/api/abstracts/${id}/recommendations`, {
+    method: 'POST', body: JSON.stringify({ html, css, js, note: typeof flags.note === 'string' ? flags.note : '' }),
+  })
+  if (jsonMode(flags)) printJson(result)
+  else console.log('Recommendation sent to the abstract owner.')
+}
+
 async function cmdLive(cwd, rest) {
   const { flags, positional } = parseFlags(rest)
   if (flags.help) return printHelp('live')
@@ -472,7 +533,6 @@ async function cmdList(rest) {
   if (folder) params.set('collection', String(folder))
   if (flags.tag) params.set('tag', String(flags.tag))
   if (flags.search) params.set('search', String(flags.search))
-  if (flags.space) params.set('space', String(flags.space))
   for (const key of ['starred', 'archived', 'owned', 'member', 'open', 'closed']) {
     if (flags[key]) params.set(key, 'true')
   }
@@ -655,58 +715,6 @@ async function cmdFolderMove(rest) {
   console.log('Moved folder.')
 }
 
-async function cmdFolderInvite(rest) {
-  const { flags, positional } = parseFlags(rest)
-  const token = positional[0]
-  const email = flags.email || positional[1]
-  if (!token || !email) throw new Error('Pass a folder and --email <email>.')
-  const folder = await resolveFolder(token)
-  await apiFetch(`/api/organise/collections/${folder.id}/invite`, {
-    method: 'POST',
-    body: JSON.stringify({ email }),
-  })
-  console.log('Added.')
-}
-
-async function cmdFolderRemove(rest) {
-  const { flags, positional } = parseFlags(rest)
-  const token = positional[0]
-  const who = flags.email || positional[1]
-  if (!token || !who) throw new Error('Pass a folder and an email or id.')
-  const folder = await resolveFolder(token)
-  const body = /@/.test(who) ? { email: who } : { userId: who }
-  await apiFetch(`/api/organise/collections/${folder.id}/revoke`, {
-    method: 'POST',
-    body: JSON.stringify(body),
-  })
-  console.log('Removed.')
-}
-
-async function cmdFolderPeople(rest) {
-  const { flags, positional } = parseFlags(rest)
-  const token = positional[0]
-  if (!token) throw new Error('Pass a folder.')
-  const folder = await resolveFolder(token)
-  const share = await apiFetch(`/api/organise/collections/${folder.id}`)
-  const people = (share.people || []).map((m) => ({
-    id: m.user_id,
-    name: m.name,
-    access: accessLabel(m.role),
-    role: m.role,
-  }))
-  if (jsonMode(flags)) {
-    printJson({ folder: folder.path, people })
-    return
-  }
-  if (!people.length) {
-    console.log('No people yet.')
-    return
-  }
-  for (const p of people) {
-    console.log(`${p.name} · ${p.access} · ${p.id}`)
-  }
-}
-
 async function cmdFolder(rest) {
   const { flags } = parseFlags(rest)
   if (flags.help || !rest[0]) return printHelp('folder')
@@ -714,33 +722,7 @@ async function cmdFolder(rest) {
   if (sub === 'new') return cmdFolderNew(tail)
   if (sub === 'list') return cmdFolderList(tail)
   if (sub === 'move') return cmdFolderMove(tail)
-  if (sub === 'invite') return cmdFolderInvite(tail)
-  if (sub === 'remove') return cmdFolderRemove(tail)
-  if (sub === 'people') return cmdFolderPeople(tail)
-  throw new Error('folder needs new, list, move, invite, remove, or people.')
-}
-
-async function cmdSpaceNew(rest) {
-  const { flags } = parseFlags(rest)
-  const name = flags.name || rest.find((a) => !a.startsWith('--'))
-  if (!name) throw new Error('Use folder new instead.')
-  const data = await apiFetch('/api/spaces', {
-    method: 'POST',
-    body: JSON.stringify({ name }),
-  })
-  console.log(data.id, data.name)
-}
-
-async function cmdSpaceMember(rest) {
-  const { flags, positional } = parseFlags(rest)
-  const spaceId = flags.space || positional[0]
-  const email = flags.email || positional[1]
-  if (!spaceId || !email) throw new Error('Use folder invite instead.')
-  await apiFetch(`/api/spaces/${spaceId}/members`, {
-    method: 'POST',
-    body: JSON.stringify({ email, role: flags.role || 'member' }),
-  })
-  console.log('Added.')
+  throw new Error('folder needs new, list, or move.')
 }
 
 export async function runCommand(argv, cwd = process.cwd()) {
@@ -761,6 +743,8 @@ export async function runCommand(argv, cwd = process.cwd()) {
       return cmdCreate(cwd, rest)
     case 'invite':
       return cmdInvite(cwd, rest)
+    case 'notify':
+      return cmdNotify(cwd, rest)
     case 'remove':
       return cmdRemove(cwd, rest)
     case 'people':
@@ -777,6 +761,8 @@ export async function runCommand(argv, cwd = process.cwd()) {
       return cmdServe(cwd, rest)
     case 'publish':
       return cmdPublish(cwd, rest)
+    case 'recommend':
+      return cmdRecommend(cwd, rest)
     case 'live':
       return cmdLive(cwd, rest)
     case 'visibility':
@@ -803,10 +789,6 @@ export async function runCommand(argv, cwd = process.cwd()) {
       return cmdFolder(rest)
     case 'rename':
       return cmdRename(cwd, rest)
-    case 'space':
-      if (rest[0] === 'new') return cmdSpaceNew(rest.slice(1))
-      if (rest[0] === 'member') return cmdSpaceMember(rest.slice(1))
-      throw new Error('Use folder instead.')
     default:
       throw new Error(`Unknown command “${raw}”. Run amorphous-cli --help.`)
   }

package/lib/help.mjs

@@ -11,9 +11,11 @@ export const ROOT_HELP = `Amorphous
   pull                          Pull draft and records to this folder
   push                          Push local files
   publish [--live]              Publish a version; --live is Go live
+  recommend [--note <text>]     Send this draft to the owner for review
   live [abstract]               Make a version live
   visibility anyone|members     Anyone can view / Members only
-  invite <email>                Print the link to give them
+  invite <email>                Email an invite and print the link
+  notify                        Email members about the published version
   remove <email|id>             Remove
   people [abstract]             People
   tag / untag                   Tag
@@ -24,9 +26,6 @@ export const ROOT_HELP = `Amorphous
   folder new                    New folder
   folder list                   Folders
   folder move                   Move folder
-  folder invite                 Invite to a folder
-  folder remove                 Remove from a folder
-  folder people                 People on a folder
   rename --name                 Rename
 
 Run amorphous-cli <command> --help for flags. Pass --json where you need machine output.
@@ -53,7 +52,7 @@ Start the local MCP server on stdio.`,
 List abstracts. Default view is all (All Abstracts).
 --folder filters to a folder. --tag filters to a tag.`,
 
-  create: `create [--name <name>] [--folder <name>] [--json]
+  create: `create [--name <name>] [--folder <name>] [--template blank|list|board|landing] [--json]
 
 New abstract. Writes .amorphous.json in this directory.`,
 
@@ -83,6 +82,10 @@ Push local index.html, styles.css, and app.js.
 
 Publish a new version. --live also makes it the live version (Go live).`,
 
+  recommend: `recommend [--note <text>] [--json]
+
+Send this folder's HTML, CSS, and JavaScript to the owner as a proposal. It does not change the live version.`,
+
   live: `live [abstract] [--version <id>]
 
 Make this the live version. Uses the latest published version if you omit --version.`,
@@ -93,7 +96,11 @@ Anyone can view, or Members only. Uses the live version if you omit --version.`,
 
   invite: `invite <email> [view|use|edit] [--abstract <id|name>] [--json]
 
-Save an invite for this email and print the link to give them. Access: view, use, or edit. Default: view.`,
+Email an invite and print the link. Access: view, use, or edit. Default: view.`,
+
+  notify: `notify [abstract] [--json]
+
+Email members that the published version changed. Does not publish. You are not emailed.`,
 
   remove: `remove <email|id> [--abstract <id|name>]
 
@@ -135,16 +142,12 @@ Unstar.`,
 
 Suggest folder from the name. Default is a suggestion only. --apply uses it.`,
 
-  folder: `folder <new|list|move|invite|remove|people> …
+  folder: `folder <new|list|move> …
 
   folder new --name <name> [--parent <id>]
   folder list [--json]
   folder move <folder> --parent <id|none>
-  folder invite <folder> --email <email>
-  folder remove <folder> <email|id>
-  folder people <folder> [--json]
-
-New folder, or move a folder. folder invite adds someone who already has an account. It does not send an email.`,
+New folder, or move a folder. Folders organize your library and do not grant access.`,
 
   rename: `rename [abstract] --name <name>
 

package/mcp.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * Local MCP. Six tools for abstracts.
+ * Local MCP. Tools for abstracts.
  * Stdout is the protocol. The CLI runs as a child so its output stays off this stream.
  */
 import { spawn } from 'node:child_process'
@@ -117,12 +117,23 @@ await serveStdio(() => {
     async ({ live }) => call(live ? ['publish', '--live', '--json'] : ['publish', '--json']),
   )
 
+  server.registerTool(
+    'recommend',
+    {
+      title: 'Recommend a version to the owner',
+      description: 'Submit the local HTML, CSS, and JavaScript as a proposal. It stays out of the live version until the owner publishes it.',
+      inputSchema: z.object({ note: z.string().max(1000).optional().describe('Context for the owner') }),
+      annotations: { readOnlyHint: false, destructiveHint: false, openWorldHint: true },
+    },
+    async ({ note }) => call(note ? ['recommend', '--note', note] : ['recommend']),
+  )
+
   server.registerTool(
     'invite',
     {
       title: 'Invite someone',
       description:
-        'Save an invite for this email and return the link to give them. This does not send an email. access is view (can open), use (can write shared records), or edit (can change the abstract).',
+        'Email an invite and return the link. access is view (can open), use (can write shared records), or edit (can change the abstract).',
       inputSchema: z.object({
         email: z.string().describe('Email address'),
         access: z.enum(['view', 'use', 'edit']).describe('view, use, or edit'),
@@ -132,5 +143,17 @@ await serveStdio(() => {
     async ({ email, access }) => call(['invite', email, access, '--json']),
   )
 
+  server.registerTool(
+    'notify',
+    {
+      title: 'Email members about the published version',
+      description:
+        'Email members that the published version changed. On demand. This does not publish. The person running it is not emailed.',
+      inputSchema: z.object({}),
+      annotations: { readOnlyHint: false, destructiveHint: false, openWorldHint: true },
+    },
+    async () => call(['notify', '--json']),
+  )
+
   return server
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amorphous-cli",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "mcpName": "io.github.amorphous-one/amorphous",
   "description": "Make whatever you want, yourself, with your own agent, or with others.",
   "type": "module",
@@ -15,6 +15,7 @@
     "lib",
     "hooks",
     "skill",
+    "templates.json",
     "README.md"
   ],
   "engines": {

package/skill/amorphous/SKILL.md

@@ -43,7 +43,7 @@ They tell you when to push, preview, publish, or invite. Do those when they ask.
 Install the CLI once with `npm install -g amorphous-cli@latest`, then call it as `amorphous-cli <command>`. If a command prints `Run: npm install -g amorphous-cli@latest && amorphous-cli setup`, run that line, then repeat the command.
 
 1. If you are not signed in, run `amorphous-cli login`. Show the person the link it prints and ask them to finish in the browser. Do not ask for an email or a code.
-2. `amorphous-cli create --name "..."` in a folder, or `amorphous-cli pull` when `.amorphous.json` is already there.
+2. `amorphous-cli create --name "..." [--template blank|list|board|landing]` in a folder, or `amorphous-cli pull` when `.amorphous.json` is already there. The list, board, and landing starters are working examples, not just mockups.
 3. Edit the files to match what they asked for. `me` and `names` are how the abstract knows who is here.
 4. Prefer `amorphous-cli serve` while you edit. Open that URL and leave it running. It reloads when the files change, and it is the easiest way to check the work. Records on that page start in this folder. Switch the page to prod to read and write the abstract's records. You can push and preview without it.
 
@@ -52,7 +52,9 @@ When they ask:
 - `amorphous-cli push` sends the source. `amorphous-cli push --data` also sends the records in this folder.
 - `amorphous-cli preview` and open that URL.
 - `amorphous-cli publish --live`
-- `amorphous-cli invite <email> use` or `edit` or `view`. It prints a link and does not send an email. Give them that link. They open it and sign in with that email.
+- Collaborators who should propose source for the owner to review can use `amorphous-cli recommend --note "..."`. It does not change the live abstract; the owner reviews and chooses Publish live or Decline.
+- `amorphous-cli invite <email> use` or `edit` or `view`. It emails them a link and prints that link. They open it and sign in with that email.
+- `amorphous-cli notify` emails members that the published version changed. It does not publish. Do that only when they ask.
 
 `amorphous-cli visibility anyone` lets anyone view and write shared records. `amorphous-cli visibility members` keeps the abstract to invited people.
 

package/templates.json

@@ -0,0 +1,30 @@
+{
+  "blank": {
+    "label": "Blank",
+    "description": "A clean starting point",
+    "html": "<main>\n  <h1>Untitled</h1>\n  <p>Make this abstract your own.</p>\n</main>",
+    "css": "body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: #18181b; background: #fafafa; }\nmain { max-width: 720px; margin: 12vh auto; padding: 24px; }\nh1 { letter-spacing: -0.04em; }",
+    "js": ""
+  },
+  "list": {
+    "label": "List",
+    "description": "A shared checklist everyone can update",
+    "html": "<main class=\"shell\">\n  <header><p class=\"eyebrow\">SHARED LIST</p><h1>Things to do</h1><p class=\"muted\">Add an item or check one off. Everyone sees the same list.</p></header>\n  <form id=\"add-form\"><input id=\"new-item\" aria-label=\"New item\" placeholder=\"Add something…\" maxlength=\"180\" required><button>Add</button></form>\n  <p id=\"empty\" class=\"muted\">Your list is empty.</p><ul id=\"items\"></ul>\n</main>",
+    "css": "* { box-sizing: border-box; } body { margin: 0; background: #f5f4f0; color: #20201e; font: 16px/1.5 system-ui, sans-serif; } .shell { max-width: 680px; margin: 8vh auto; padding: 32px; background: #fff; border: 1px solid #e8e6e0; border-radius: 18px; } .eyebrow { color: #77746c; font-size: 11px; font-weight: 700; letter-spacing: .14em; } h1 { margin: 4px 0; font-size: clamp(32px, 8vw, 52px); letter-spacing: -.055em; } .muted { color: #77746c; } form { display: flex; gap: 8px; margin: 28px 0 18px; } input { min-width: 0; flex: 1; padding: 12px 14px; border: 1px solid #d8d5cd; border-radius: 9px; font: inherit; } button { padding: 10px 18px; border: 0; border-radius: 9px; background: #242421; color: white; font: inherit; cursor: pointer; } ul { display: grid; gap: 8px; padding: 0; list-style: none; } li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #eeece7; border-radius: 9px; } li.done span { color: #929087; text-decoration: line-through; } li span { flex: 1; overflow-wrap: anywhere; } li button { padding: 5px 8px; color: #66635d; background: transparent; }",
+    "js": "const form = document.querySelector('#add-form')\nconst input = document.querySelector('#new-item')\nconst list = document.querySelector('#items')\nconst empty = document.querySelector('#empty')\n\nfunction render(rows) {\n  list.replaceChildren()\n  empty.hidden = rows.length > 0\n  for (const row of rows.filter(item => item.kind === 'list-item')) {\n    const li = document.createElement('li')\n    if (row.done) li.classList.add('done')\n    const check = document.createElement('input')\n    check.type = 'checkbox'\n    check.checked = Boolean(row.done)\n    check.setAttribute('aria-label', `Mark ${row.text} complete`)\n    check.addEventListener('change', async () => {\n      await amorphous.data.replace(row.id, { ...row, done: check.checked })\n      render(await amorphous.data.find())\n    })\n    const text = document.createElement('span')\n    text.textContent = row.text\n    const remove = document.createElement('button')\n    remove.type = 'button'\n    remove.textContent = 'Remove'\n    remove.addEventListener('click', async () => {\n      // The bridge intentionally has no delete method; mark removed items instead.\n      await amorphous.data.replace(row.id, { ...row, removed: true })\n      render(await amorphous.data.find())\n    })\n    if (row.removed) continue\n    li.append(check, text, remove)\n    list.append(li)\n  }\n}\n\nform.addEventListener('submit', async event => {\n  event.preventDefault()\n  const text = input.value.trim()\n  if (!text) return\n  await amorphous.data.insert({ kind: 'list-item', text, done: false })\n  input.value = ''\n  render(await amorphous.data.find())\n})\n\nrender(await amorphous.data.find())"
+  },
+  "board": {
+    "label": "Board",
+    "description": "A small kanban board with shared cards",
+    "html": "<main class=\"shell\">\n  <header><p class=\"eyebrow\">TEAM BOARD</p><h1>Project board</h1><p class=\"muted\">Move cards across the columns as work progresses.</p></header>\n  <form id=\"add-form\"><input id=\"new-card\" aria-label=\"New card\" placeholder=\"Add a card…\" maxlength=\"180\" required><button>Add card</button></form>\n  <section id=\"columns\" class=\"columns\"></section>\n</main>",
+    "css": "* { box-sizing: border-box; } body { margin: 0; background: #f4f5f7; color: #20242b; font: 15px/1.5 system-ui, sans-serif; } .shell { max-width: 1120px; margin: 7vh auto; padding: 28px; } .eyebrow { color: #727985; font-size: 11px; font-weight: 700; letter-spacing: .14em; } h1 { margin: 4px 0; font-size: clamp(32px, 7vw, 48px); letter-spacing: -.05em; } .muted { color: #727985; } form { display: flex; gap: 8px; max-width: 580px; margin: 24px 0; } input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid #d7dbe2; border-radius: 8px; font: inherit; } button { padding: 9px 14px; border: 0; border-radius: 8px; background: #29313d; color: #fff; font: inherit; cursor: pointer; } .columns { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; } .column { min-height: 190px; padding: 12px; border: 1px solid #e0e3e9; border-radius: 12px; background: #e9ecf1; } .column h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } .card { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 11px; border: 1px solid #e2e4e9; border-radius: 9px; background: white; } .card span { flex: 1; overflow-wrap: anywhere; } .card select { max-width: 105px; padding: 5px; border: 1px solid #d7dbe2; border-radius: 6px; background: white; font: inherit; font-size: 12px; } @media (max-width: 760px) { .columns { grid-template-columns: repeat(3, minmax(250px, 1fr)); } }",
+    "js": "const stages = ['To do', 'In progress', 'Done']\nconst form = document.querySelector('#add-form')\nconst input = document.querySelector('#new-card')\nconst columns = document.querySelector('#columns')\n\nasync function render() {\n  const rows = (await amorphous.data.find()).filter(row => row.kind === 'board-card')\n  columns.replaceChildren()\n  for (const stage of stages) {\n    const column = document.createElement('section')\n    column.className = 'column'\n    const heading = document.createElement('h2')\n    heading.textContent = `${stage} · ${rows.filter(row => (row.stage || stages[0]) === stage).length}`\n    column.append(heading)\n    for (const row of rows.filter(item => (item.stage || stages[0]) === stage)) {\n      const card = document.createElement('article')\n      card.className = 'card'\n      const text = document.createElement('span')\n      text.textContent = row.text\n      const select = document.createElement('select')\n      select.setAttribute('aria-label', `Move ${row.text}`)\n      for (const optionText of stages) {\n        const option = document.createElement('option')\n        option.value = optionText\n        option.textContent = optionText\n        option.selected = optionText === (row.stage || stages[0])\n        select.append(option)\n      }\n      select.addEventListener('change', async () => {\n        await amorphous.data.replace(row.id, { ...row, stage: select.value })\n        await render()\n      })\n      card.append(text, select)\n      column.append(card)\n    }\n    columns.append(column)\n  }\n}\n\nform.addEventListener('submit', async event => {\n  event.preventDefault()\n  const text = input.value.trim()\n  if (!text) return\n  await amorphous.data.insert({ kind: 'board-card', text, stage: stages[0] })\n  input.value = ''\n  await render()\n})\n\nrender()"
+  },
+  "landing": {
+    "label": "Landing page",
+    "description": "A polished one-page introduction for an idea or project",
+    "html": "<main>\n  <nav><a class=\"brand\" href=\"#top\">Your project</a><a href=\"#about\">About</a><a class=\"nav-cta\" href=\"#contact\">Get in touch</a></nav>\n  <section id=\"top\" class=\"hero\"><p class=\"eyebrow\">A CLEAR, HUMAN INTRODUCTION</p><h1>Make your next good idea easier to find.</h1><p class=\"lead\">Describe what you are building, who it helps, and why it matters. Replace this copy with your own.</p><a class=\"cta\" href=\"#contact\">Start a conversation <span>↗</span></a><div class=\"orb\" aria-hidden=\"true\"></div></section>\n  <section id=\"about\" class=\"about\"><p class=\"eyebrow\">WHAT IT IS</p><h2>A simple page for a specific purpose.</h2><div class=\"cards\"><article><b>01</b><h3>Who it is for</h3><p>Name the people you want to reach.</p></article><article><b>02</b><h3>What it does</h3><p>Explain the useful thing you make possible.</p></article><article><b>03</b><h3>Why now</h3><p>Give visitors a reason to care today.</p></article></div></section>\n  <footer id=\"contact\"><div><p class=\"eyebrow\">NEXT STEP</p><h2>Have a question?</h2><p>Replace this with your preferred contact link.</p></div><a class=\"cta\" href=\"mailto:hello@example.com\">Say hello <span>↗</span></a></footer>\n</main>",
+    "css": "* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: #f8f7f4; color: #20211f; font: 16px/1.55 system-ui, sans-serif; } main { max-width: 1180px; margin: auto; padding: 0 28px; } nav { display: flex; align-items: center; gap: 26px; min-height: 76px; border-bottom: 1px solid #e5e3dc; } nav a { color: inherit; text-decoration: none; font-size: 14px; } nav .brand { margin-right: auto; font-weight: 700; } .nav-cta { padding: 9px 13px; border: 1px solid #d6d3ca; border-radius: 99px; } .hero { position: relative; min-height: 570px; padding: 110px 0 95px; overflow: hidden; } .eyebrow { color: #77786d; font-size: 11px; font-weight: 700; letter-spacing: .15em; } h1 { position: relative; z-index: 1; max-width: 760px; margin: 18px 0; font-size: clamp(48px, 9vw, 88px); line-height: .98; letter-spacing: -.07em; } .lead { position: relative; z-index: 1; max-width: 490px; color: #696a62; font-size: 18px; } .cta { position: relative; z-index: 1; display: inline-flex; gap: 22px; align-items: center; margin-top: 22px; padding: 13px 17px; border-radius: 99px; background: #242622; color: white; text-decoration: none; font-size: 14px; } .orb { position: absolute; right: 4%; bottom: 4%; width: 270px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e9c7a6, #c89f7e 48%, #756c61 75%); filter: saturate(.7); opacity: .72; } .about { padding: 65px 0 95px; border-top: 1px solid #e5e3dc; } h2 { max-width: 600px; font-size: clamp(32px, 5vw, 48px); line-height: 1.05; letter-spacing: -.055em; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 42px; } .cards article { padding: 22px; border: 1px solid #e5e3dc; border-radius: 12px; background: #fffefa; } .cards b { color: #9d795c; font-size: 12px; } h3 { margin: 18px 0 4px; } .cards p, footer p:not(.eyebrow) { color: #696a62; } footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 0 55px; border-top: 1px solid #e5e3dc; } footer h2 { margin: 6px 0; } @media (max-width: 650px) { main { padding: 0 18px; } nav { gap: 14px; } .hero { min-height: 520px; padding-top: 84px; } .orb { right: -40px; width: 210px; } .cards { grid-template-columns: 1fr; } footer { align-items: flex-start; flex-direction: column; } }",
+    "js": "// This starter is a static landing page. Replace the copy, links, and sections in index.html.\n"
+  }
+}