claude-artifact-framework 0.7.0 → 0.7.2

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.7.0/dist/index.global.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.7.2/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.7.0/dist/index.esm.js";
+  } from "https://cdn.jsdelivr.net/npm/claude-artifact-framework@0.7.2/dist/index.esm.js";
 </script>
 ```
 
-Pin a version (`@0.7.0`) for reproducible artifacts, or drop the version
+Pin a version (`@0.7.2`) for reproducible artifacts, or drop the version
 (`claude-artifact-framework/dist/...`) to always get the latest release.
 
 ### Inside a React artifact
@@ -315,6 +315,65 @@ 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.
+
+### Tabs, conditional blocks, and accordions
+
+Three in-screen navigation primitives, usable in `panel`, `workspace`, and
+below a `records` list alike:
+
+```js
+blocks: [
+  { tabs: [
+    { label: "Registrar", blocks: [{ fields: [...] }] },
+    { label: "Resumen",   blocks: [{ output: (d) => [...] }, { chart: (d) => ({...}) }] },
+  ], wide: true },
+
+  // `when` hides any block until the condition holds
+  { output: (d) => [...], when: (d) => d.records.length > 0 },
+
+  // `collapsible` needs a title; `"collapsed"` starts closed
+  { text: "Instrucciones…", title: "Ayuda", collapsible: "collapsed" },
+]
+```
+
+The active tab and each accordion's open/closed state are framework-owned
+view state — they survive reload, per viewer. Tabs cannot nest inside tabs;
+`when` must be a function; both throw otherwise.
+
 ## API reference
 
 Everything an app can declare, in one place.
@@ -323,11 +382,14 @@ 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`).
-
-**Block types** (entries of `blocks`): `fields`, `output`, `text`, `list`,
-`chart`, `timer`, `actions`, `custom`. One type per entry, plus optional `title`, `empty`,
+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`, `main`, or `sidebar`): `fields`,
+`output`, `text`, `list`, `chart`, `timer`, `actions`, `chat`, `tabs`,
+`custom`. Any block also accepts `when: (d) => bool` (conditional
+visibility) and `collapsible: true | "collapsed"` (accordion; needs `title`). 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`.