claude-artifact-framework 0.8.1 → 0.9.1

package/README.md

@@ -323,7 +323,9 @@ blocks: [
 
 Action keys: `label`, `run`, optional `when` (hides the button when false)
 and `kind` (`"primary"` / `"danger"`). Row actions receive the record;
-block actions receive data. Changes persist like any other update.
+block actions receive data. Changes persist like any other update. Give the
+constructive action `kind: "primary"` — a "Vote"/"Add"/"Done" left as the
+neutral default reads weaker than a `"danger"` next to it.
 
 Chat bubbles render the assistant's **markdown** (bold, code, lists,
 headings) automatically — HTML is escaped first, so model output can't
@@ -345,7 +347,8 @@ ArtifactKit.createApp({
     { output: (d) => [{ label: "Palabras", value: countWords(d.nota), big: true }] },
   ],
   sidebar: [
-    { chat: {
+    { title: "Asistente",
+      chat: {
         system: (d) => "Sos un copiloto de escritura. Nota actual: " + (d.nota || ""),
         tools: {
           reescribir_nota: {
@@ -359,6 +362,9 @@ ArtifactKit.createApp({
 })
 ```
 
+Give the chat block a `title` (like every other block) — a chat card that
+opens straight into a bubble is the one block on screen without a heading.
+
 `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
@@ -409,6 +415,19 @@ ArtifactKit.createApp({
 - **`libs: ["https://..."]`** loads external scripts before the app mounts,
   deduped by URL, with a "Loading libraries…" state and a named error block
   if one fails. No hand-written `loadScript` in custom code.
+- **Call the library's method, not its global.** Modern CDN builds expose a
+  *namespace object*, and APIs you remember may have moved: `marked` v5+ is
+  an object (`marked.parse(text)` works, `marked(text)` throws "marked is
+  not a function"). When unsure, prefer the method form — `marked.parse(md)`,
+  `Papa.parse(csv)`, `QRCode.toCanvas(...)` or `new QRCode(el, ...)`
+  depending on the lib — and pin the version in the URL so the API can't
+  drift under you.
+- **Unsure of the file path? Use the bare package URL.** jsDelivr serves the
+  package's default build at `https://cdn.jsdelivr.net/npm/<pkg>@<version>`
+  with no file path — guessed inner paths (`/marked.umd.js`,
+  `/dist/foo.min.js`) 404 more often than versions do. If a full path you
+  wrote does 404, the framework retries the bare package URL once before
+  showing the error.
 - **`type: "file"`** fields hand the live `File` to your code at
   `ctx.files[key]` (in memory only — the 5MB/key storage limit makes real
   files unpersistable); `data[key]` gets serializable metadata
@@ -533,7 +552,9 @@ keys must be unique across steps.
 
 **Formats** (`format:` on output/chart/compute items): `money`, `percent`,
 `number`, `date`. `percent` expects 0–100 (pass `ratio * 100`, not the raw
-ratio).
+ratio). `big: true` renders an item at hero size — reserve it for the ONE
+number that is the screen's main result (a total, a final score), not for
+every stat; more than one hero per screen means no hero at all.
 
 **Quick-add pattern** — a lightweight alternative to `records` when you just
 need "type something, press a button, it lands in a list":

package/dist/index.esm.js

@@ -507,7 +507,7 @@ function Bubble({ m }) {
     dangerouslySetInnerHTML: { __html: renderMarkdown(m.content) }
   });
 }
-function ChatPanel({ cfg, ctx }) {
+function ChatPanel({ cfg, ctx, title }) {
   const c = cfg;
   const [draft, setDraft] = useState("");
   const [busy, setBusy] = useState(false);
@@ -578,6 +578,9 @@ Continue with this information. If you have everything you need, answer in natur
     createElement(
       "div",
       { className: "caf-block caf-chat-log" },
+      // Every other block opens with its title label — a chat card that
+      // starts straight at a bubble was the one heading-less block on screen.
+      title ? createElement("h2", { className: "caf-block-title" }, title) : null,
       c.greeting ? createElement("div", { className: "caf-msg caf-msg-assistant", dangerouslySetInnerHTML: { __html: renderMarkdown(c.greeting) } }) : null,
       log.map((m, i) => createElement(Bubble, { key: i, m })),
       live !== null ? createElement("div", { className: "caf-msg caf-msg-assistant caf-msg-live", dangerouslySetInnerHTML: { __html: renderMarkdown(live || "\u2026") } }) : null,
@@ -1008,7 +1011,7 @@ var BLOCKS = {
   chart: ChartBlock,
   timer: TimerBlock,
   actions: ActionsBlock,
-  chat: ({ spec, ctx }) => createElement(ChatPanel, { cfg: spec.chat, ctx }),
+  chat: ({ spec, ctx }) => createElement(ChatPanel, { cfg: spec.chat, ctx, title: spec.title }),
   custom: CustomBlock
 };
 var BLOCK_NAMES = Object.keys(BLOCKS);
@@ -1717,7 +1720,9 @@ function Panel({ spec, ctx }) {
     (spec.blocks || []).map(
       (block, i) => createElement(
         "section",
-        { key: i, className: block.wide ? "caf-slot caf-slot-wide" : "caf-slot" },
+        // A collapsible is always full-width: half-width accordions leave an
+        // orphaned right edge on desktop and change width across breakpoints.
+        { key: i, className: block.wide || block.collapsible ? "caf-slot caf-slot-wide" : "caf-slot" },
         createElement(Block, { block, ctx })
       )
     )
@@ -1735,7 +1740,9 @@ function RecordsWithBlocks({ spec, ctx }) {
       spec.blocks.map(
         (block, i) => createElement(
           "section",
-          { key: i, className: block.wide ? "caf-slot caf-slot-wide" : "caf-slot" },
+          // A collapsible is always full-width: half-width accordions leave an
+          // orphaned right edge on desktop and change width across breakpoints.
+          { key: i, className: block.wide || block.collapsible ? "caf-slot caf-slot-wide" : "caf-slot" },
           createElement(Block, { block, ctx })
         )
       )
@@ -1767,7 +1774,14 @@ function loadScript(src) {
       tag.dataset.cafReady = "1";
       resolve();
     };
-    tag.onerror = () => reject(new Error(`failed to load ${src}`));
+    tag.onerror = () => {
+      const m = src.match(/^(https:\/\/cdn\.jsdelivr\.net\/npm\/(?:@[^/]+\/)?[^/]+)\/.+/);
+      if (m && m[1] !== src) {
+        loadScript(m[1]).then(resolve, () => reject(new Error(`failed to load ${src} (also tried package default ${m[1]})`)));
+      } else {
+        reject(new Error(`failed to load ${src}`));
+      }
+    };
     document.head.appendChild(tag);
   });
 }
@@ -1817,7 +1831,9 @@ function createApp(spec = {}) {
     const Layout = LAYOUT_COMPONENTS[layout];
     return createElement(
       "div",
-      { className: "caf-root" },
+      // The layout class lets shared CSS follow the active container width —
+      // e.g. the header must share the workspace's wider axis, not panel's.
+      { className: `caf-root caf-layout-${layout}` },
       createElement("style", { dangerouslySetInnerHTML: { __html: css } }),
       createElement(
         "header",
@@ -1837,6 +1853,10 @@ function createApp(spec = {}) {
 var BASE_CSS = `
 .caf-root {
   --caf-radius: 10px;
+  --caf-control-radius: 7px; /* one radius for every control: buttons, inputs, rows */
+  --caf-btn-pad-y: 0.45rem;
+  --caf-btn-pad-x: 0.8rem;
+  --caf-num-primary: 2.1rem; /* the one size for a block's dominant number */
   box-sizing: border-box;
   min-height: 100vh;
   padding: 2rem 1.25rem 4rem;
@@ -1847,9 +1867,12 @@ var BASE_CSS = `
 }
 .caf-root *, .caf-root *::before, .caf-root *::after { box-sizing: inherit; }
 .caf-header { max-width: 760px; margin: 0 auto 1.5rem; }
+/* One left axis per screen: the header adopts the workspace's wider container. */
+.caf-layout-workspace .caf-header { max-width: 1200px; }
 .caf-header h1 { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }
 .caf-header p { margin: 0.4rem 0 0; color: var(--caf-muted); font-size: 0.95rem; line-height: 1.5; }
-.caf-panel { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+/* Between-card air must beat within-card padding (1.1rem), or groups dissolve. */
+.caf-panel { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
 .caf-slot { grid-column: span 2; min-width: 0; }
 @media (min-width: 720px) { .caf-slot { grid-column: span 1; } .caf-slot-wide { grid-column: span 2; } }
 .caf-block {
@@ -1862,12 +1885,14 @@ var BASE_CSS = `
   gap: 0.8rem;
   height: 100%;
 }
-.caf-block-title { margin: 0; font-size: 0.95rem; font-weight: 650; }
+.caf-block-title { margin: 0; font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--caf-muted); }
 .caf-field { display: flex; flex-direction: column; gap: 0.3rem; }
-.caf-field label { font-size: 0.78rem; font-weight: 600; color: var(--caf-muted); letter-spacing: 0.02em; }
+/* A full size+weight step below .caf-block-title \u2014 the uppercase alone was
+   not enough to tell "card title" from "field label" at a glance. */
+.caf-field label { font-size: 0.68rem; font-weight: 500; color: var(--caf-muted); }
 .caf-field input, .caf-field select, .caf-field textarea {
   font: inherit; font-size: 0.95rem; padding: 0.5rem 0.6rem;
-  border-radius: 7px; border: 1px solid var(--caf-border);
+  border-radius: var(--caf-control-radius); border: 1px solid var(--caf-border);
   background: var(--caf-sunken); color: var(--caf-text); width: 100%;
 }
 .caf-field input:focus-visible, .caf-field select:focus-visible, .caf-field textarea:focus-visible,
@@ -1876,17 +1901,21 @@ var BASE_CSS = `
 .caf-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
 .caf-hint { color: var(--caf-muted); font-size: 0.75rem; }
 .caf-error { color: var(--caf-danger); font-size: 0.75rem; font-weight: 600; }
-.caf-output-grid { display: flex; flex-direction: column; gap: 0.7rem; }
-.caf-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
-.caf-stat-label { color: var(--caf-muted); font-size: 0.82rem; }
-.caf-stat-value { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
-.caf-stat-big { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--caf-border); }
-.caf-stat-big .caf-stat-value { font-size: 1.9rem; font-weight: 680; letter-spacing: -0.02em; color: var(--caf-accent); }
+.caf-output-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.9rem 1.1rem; }
+/* Every stat shares one axis: label above value, both flush left. */
+.caf-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
+.caf-stat-label { color: var(--caf-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
+.caf-stat-value { font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; }
+.caf-stat-big { grid-column: 1 / -1; }
+/* The divider exists to separate the hero from stats below it \u2014 alone in the
+   grid it would be an orphaned rule, so it only renders when followed. */
+.caf-stat-big:not(:last-child) { padding-bottom: 0.5rem; border-bottom: 1px solid var(--caf-border); }
+.caf-stat-big .caf-stat-value { font-size: var(--caf-num-primary); font-weight: 700; letter-spacing: -0.02em; color: var(--caf-accent); line-height: 1.15; }
 .caf-list { padding: 0.4rem; gap: 0; }
 .caf-row {
   font: inherit; text-align: left; cursor: pointer;
   display: flex; flex-direction: column; gap: 0.15rem;
-  padding: 0.65rem 0.7rem; border: none; border-radius: 7px;
+  padding: 0.65rem 0.7rem; border: none; border-radius: var(--caf-control-radius);
   background: transparent; color: inherit; width: 100%;
 }
 .caf-row:hover { background: var(--caf-sunken); }
@@ -1894,12 +1923,15 @@ var BASE_CSS = `
 .caf-row-sub { font-size: 0.78rem; color: var(--caf-muted); }
 .caf-panel-single { grid-template-columns: 1fr; }
 .caf-panel-single .caf-slot, .caf-panel-single > * { grid-column: span 1; }
-.caf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0.3rem 0.5rem; }
+/* Bottom padding matches the inter-row rhythm so the toolbar doesn't sit
+   closer to the first row than rows sit to each other. */
+.caf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0.3rem 0.75rem; }
 .caf-count { font-size: 0.8rem; color: var(--caf-muted); font-variant-numeric: tabular-nums; }
 .caf-btn {
   font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
-  padding: 0.45rem 0.8rem; border-radius: 7px;
-  border: 1px solid var(--caf-border); background: var(--caf-sunken); color: var(--caf-text);
+  padding: var(--caf-btn-pad-y) var(--caf-btn-pad-x); border-radius: var(--caf-control-radius);
+  border: 1px solid var(--caf-border); background: var(--caf-surface); color: var(--caf-text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 .caf-btn:hover { filter: brightness(0.97); }
 .caf-btn:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: 1px; }
@@ -1918,16 +1950,19 @@ var BASE_CSS = `
 .caf-line-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
 .caf-line-last { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--caf-accent); }
 .caf-donut { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
-.caf-donut-svg { width: 110px; height: 110px; flex: none; transform: rotate(0.001deg); }
+/* -3px optical correction: a circle beside flush-left text reads indented. */
+.caf-donut-svg { width: 110px; height: 110px; flex: none; transform: rotate(0.001deg); margin-left: -3px; }
 .caf-donut-seg { fill: none; stroke-width: 6; }
-.caf-donut-legend { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1; }
+/* Capped width keeps each value NEXT TO its label in wide cards \u2014 the pair
+   must read as a pair regardless of container width. */
+.caf-donut-legend { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1; max-width: 260px; }
 .caf-legend-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; }
 .caf-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
 .caf-legend-label { color: var(--caf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .caf-legend-value { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
 .caf-timer { align-items: center; text-align: center; }
 .caf-timer .caf-bar-track { width: 100%; }
-.caf-timer-time { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
+.caf-timer-time { font-size: var(--caf-num-primary); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--caf-accent); }
 .caf-timer-done { color: var(--caf-accent); }
 .caf-timer-fill { transition: width 0.9s linear; }
 .caf-timer-controls { display: flex; gap: 0.6rem; }
@@ -1944,8 +1979,11 @@ var BASE_CSS = `
 .caf-msg-tools { align-self: flex-start; font-size: 0.74rem; color: var(--caf-muted); padding: 0.15rem 0.55rem; border: 1px solid var(--caf-border); border-radius: 999px; }
 .caf-msg-error { align-self: stretch; max-width: none; display: flex; flex-direction: column; gap: 0.2rem; background: transparent; border: 1px solid var(--caf-danger); }
 .caf-msg-error strong { color: var(--caf-danger); font-size: 0.85rem; }
-.caf-chat-input { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
-.caf-chat-input input { flex: 1; font: inherit; font-size: 0.95rem; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid var(--caf-border); background: var(--caf-surface); color: var(--caf-text); }
+.caf-chat-input {
+  display: flex; gap: 0.6rem; margin-top: 1rem; padding: 0.6rem;
+  background: var(--caf-surface); border: 1px solid var(--caf-border); border-radius: var(--caf-radius);
+}
+.caf-chat-input input { flex: 1; font: inherit; font-size: 0.95rem; padding: 0.55rem 0.7rem; border-radius: var(--caf-control-radius); border: 1px solid var(--caf-border); background: var(--caf-sunken); color: var(--caf-text); }
 .caf-chat-input input:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: 1px; }
 .caf-search {
   font: inherit; font-size: 0.9rem; width: 100%;
@@ -1959,7 +1997,7 @@ var BASE_CSS = `
 .caf-row-wrap { display: flex; align-items: center; gap: 0.4rem; }
 .caf-row-wrap .caf-row { flex: 1; min-width: 0; }
 .caf-row-actions { display: flex; gap: 0.35rem; flex: none; padding-right: 0.3rem; }
-.caf-btn-sm { font-size: 0.78rem; padding: 0.3rem 0.6rem; border-radius: 6px; }
+.caf-btn-sm { font-size: 0.78rem; padding: calc(var(--caf-btn-pad-y) * 0.67) calc(var(--caf-btn-pad-x) * 0.75); }
 .caf-items { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--caf-border); padding-top: 0.7rem; }
 .caf-item-row { display: flex; align-items: flex-end; gap: 0.5rem; }
 .caf-item-row .caf-field { flex: 1; min-width: 0; }
@@ -1991,17 +2029,24 @@ var BASE_CSS = `
 }
 .caf-tab:hover { color: var(--caf-text); }
 .caf-tab:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: -2px; }
-.caf-tab-active { color: var(--caf-accent); border-bottom-color: var(--caf-accent); }
+/* :hover on the active tab must not win the specificity race and mute it. */
+.caf-tab-active, .caf-tab-active:hover { color: var(--caf-accent); border-bottom-color: var(--caf-accent); }
 .caf-tabs-body { display: flex; flex-direction: column; gap: 0.8rem; }
 .caf-collapse { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
 .caf-collapse-head {
-  font: inherit; font-size: 0.95rem; font-weight: 650; cursor: pointer;
+  /* Same treatment as .caf-block-title: a collapsible header IS a card title. */
+  font: inherit; font-size: 0.78rem; font-weight: 650; text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--caf-muted); cursor: pointer;
   display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
-  padding: 0.7rem 1rem; border: 1px solid var(--caf-border); border-radius: var(--caf-radius);
-  background: var(--caf-surface); color: var(--caf-text); width: 100%; text-align: left;
+  padding: 0.7rem 1.1rem; border: 1px solid var(--caf-border); border-radius: var(--caf-radius);
+  background: var(--caf-surface); width: 100%; text-align: left;
 }
+.caf-collapse-head { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
+.caf-collapse-head:hover { filter: brightness(0.97); }
 .caf-collapse-head:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: 1px; }
-.caf-chevron { transition: transform 0.15s ease; color: var(--caf-muted); }
+/* Accent chevron: the one interaction cue that distinguishes a collapsible
+   header from a static card title without breaking their shared typography. */
+.caf-chevron { transition: transform 0.15s ease; color: var(--caf-accent); }
 .caf-chevron-closed { transform: rotate(-90deg); }
 .caf-block-fill { border: none; background: transparent; padding: 0; overflow: auto; min-height: 320px; }
 .caf-empty, .caf-loading { color: var(--caf-muted); font-size: 0.9rem; text-align: center; padding: 1.6rem 1rem; }