claude-artifact-framework 0.6.0 → 0.7.1

package/README.md

@@ -12,7 +12,7 @@ mirrors npm packages automatically.
 ### As a global script (`<script>` tag)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.6.0/dist/index.global.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.7.1/dist/index.global.js"></script>
 <script>
   const { storage, createStore, createPersistedStore, createSharedStore } = ArtifactKit;
 </script>
@@ -27,11 +27,11 @@ mirrors npm packages automatically.
     createStore,
     createPersistedStore,
     createSharedStore,
-  } from "https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.6.0/dist/index.esm.js";
+  } from "https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.7.1/dist/index.esm.js";
 </script>
 ```
 
-Pin a version (`@0.6.0`) for reproducible artifacts, or drop the version
+Pin a version (`@0.7.1`) for reproducible artifacts, or drop the version
 (`claude-artifact-framework/dist/...`) to always get the latest release.
 
 ### Inside a React artifact
@@ -315,6 +315,41 @@ Chat bubbles render the assistant's **markdown** (bold, code, lists,
 headings) automatically — HTML is escaped first, so model output can't
 inject markup.
 
+### The `workspace` layout — content + copilot
+
+A full-width main column and a sidebar, for apps where content and an
+assistant live side by side: an editor with a writing copilot, a dashboard
+with an analyst, a viewer with an annotator. `chat` is available as a block,
+so the copilot's tools can drive the main content:
+
+```js
+ArtifactKit.createApp({
+  title: "Editor con copiloto",
+  layout: "workspace",
+  main: [
+    { fields: [{ key: "nota", type: "textarea", rows: 8 }], title: "Documento" },
+    { output: (d) => [{ label: "Palabras", value: countWords(d.nota), big: true }] },
+  ],
+  sidebar: [
+    { chat: {
+        system: (d) => "Sos un copiloto de escritura. Nota actual: " + (d.nota || ""),
+        tools: {
+          reescribir_nota: {
+            description: "Reemplaza el texto de la nota",
+            input: { texto: "string" },
+            run: (input, ctx) => { ctx.update((d) => { d.nota = input.texto; }); },
+          },
+        },
+    }},
+  ],
+})
+```
+
+`main` is required; `sidebar` is optional. Both take the same blocks as
+`panel`. The panes sit side by side and stack on narrow screens. One chat
+block per app — the conversation persists under `data.chat` and there is
+exactly one.
+
 ## API reference
 
 Everything an app can declare, in one place.
@@ -323,18 +358,20 @@ Everything an app can declare, in one place.
 `records`, `steps`, `chat`, `data`, `shared`. Anything else throws.
 
 **Layouts** (`layout:`): `panel` (default — grid of blocks), `records` (CRUD
-list), `steps` (wizard), `chat` (conversation with Claude). Each requires its
-matching key (`blocks` / `records` / `steps` / `chat`).
+list), `steps` (wizard), `chat` (conversation with Claude), `workspace`
+(main column + sidebar). Each requires its matching key (`blocks` /
+`records` / `steps` / `chat` / `main`+`sidebar`).
 
-**Block types** (entries of `blocks`): `fields`, `output`, `text`, `list`,
-`chart`, `timer`, `actions`, `custom`. One type per entry, plus optional `title`, `empty`,
+**Block types** (entries of `blocks`, `main`, or `sidebar`): `fields`,
+`output`, `text`, `list`, `chart`, `timer`, `actions`, `chat`, `custom`. One type per entry, plus optional `title`, `empty`,
 `wide`. In the `records` layout, `blocks` render below the list (never on the
 detail screen); their functions receive the same `data` object as everywhere
 else — the collection lives at `d.records`.
 
 **Field types** (`type:` on any field): `text` (default), `textarea`,
 `number`, `money`, `percent`, `check` (checkbox), `date`, `select` (needs
-`options`). Other field keys: `key` (required), `label`, `value` (initial),
+`options` — an array, or `(d) => [...]` for choices that come from the
+app's data, e.g. a "who paid" select fed by a user-entered group). Other field keys: `key` (required), `label`, `value` (initial),
 `required`, `min`, `max`, `step`, `placeholder`, `hint`, `rows`, `options`.
 An unknown `type` throws naming the valid ones.
 
@@ -350,7 +387,21 @@ keys must be unique across steps.
 `{ description, input, run(input, ctx) }`.
 
 **Formats** (`format:` on output/chart/compute items): `money`, `percent`,
-`number`, `date`.
+`number`, `date`. `percent` expects 0–100 (pass `ratio * 100`, not the raw
+ratio).
+
+**Quick-add pattern** — a lightweight alternative to `records` when you just
+need "type something, press a button, it lands in a list":
+
+```js
+blocks: [
+  { fields: [{ key: "nueva", label: "Persona", type: "text" }] },
+  { actions: [{ label: "Agregar", kind: "primary", run: (d) => {
+      if (d.nueva && d.nueva.trim()) { d.personas = [...(d.personas || []), d.nueva.trim()]; d.nueva = ""; }
+  }}]},
+  { text: (d) => (d.personas || []).join(", ") || "Sin personas todavía" },
+]
+```
 
 ## `storage`