claude-artifact-framework 0.8.1 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-artifact-framework",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "Utilities for building apps inside Claude Artifacts: platform storage, chat tool-calling loops, and other primitives verified against the real runtime.",
   "type": "module",
   "main": "./dist/index.esm.js",

package/src/app.js

@@ -419,7 +419,9 @@ function Panel({ spec, ctx }) {
     (spec.blocks || []).map((block, i) =>
       h(
         "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" },
         h(Block, { block, ctx })
       )
     )
@@ -444,7 +446,9 @@ function RecordsWithBlocks({ spec, ctx }) {
           spec.blocks.map((block, i) =>
             h(
               "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" },
               h(Block, { block, ctx })
             )
           )
@@ -482,7 +486,19 @@ function loadScript(src) {
     const tag = document.createElement("script");
     tag.src = src;
     tag.onload = () => { tag.dataset.cafReady = "1"; resolve(); };
-    tag.onerror = () => reject(new Error(`failed to load ${src}`));
+    tag.onerror = () => {
+      // Models guess file paths inside packages and get them wrong more often
+      // than they get versions wrong (measured: marked@13's UMD lives at
+      // lib/marked.umd.js, not the root the model wrote). jsDelivr serves a
+      // package's default build at the bare npm/<pkg>@<version> URL, so one
+      // retry there absorbs the whole failure class.
+      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);
   });
 }
@@ -540,7 +556,9 @@ export function createApp(spec = {}) {
 
     return h(
       "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}` },
       h("style", { dangerouslySetInnerHTML: { __html: css } }),
       h(
         "header",
@@ -565,6 +583,10 @@ export function createApp(spec = {}) {
 const 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;
@@ -575,9 +597,12 @@ const 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 {
@@ -590,12 +615,14 @@ const 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 — 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,
@@ -604,17 +631,21 @@ const 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 — 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); }
@@ -622,12 +653,15 @@ const 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; }
@@ -646,16 +680,19 @@ const 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 — 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; }
@@ -672,8 +709,11 @@ const 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%;
@@ -687,7 +727,7 @@ const 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; }
@@ -719,17 +759,24 @@ const 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; }

package/src/blocks.js

@@ -464,7 +464,7 @@ export const BLOCKS = {
   chart: ChartBlock,
   timer: TimerBlock,
   actions: ActionsBlock,
-  chat: ({ spec, ctx }) => h(ChatPanel, { cfg: spec.chat, ctx }),
+  chat: ({ spec, ctx }) => h(ChatPanel, { cfg: spec.chat, ctx, title: spec.title }),
   custom: CustomBlock,
 };
 

package/src/chat.js

@@ -171,7 +171,7 @@ function Bubble({ m }) {
 // The embeddable core: everything the chat layout does, as a single column
 // that can live in a workspace sidebar (or any block slot) as well as fill
 // the whole app. One conversation per app — it persists under data.chat.
-export function ChatPanel({ cfg, ctx }) {
+export function ChatPanel({ cfg, ctx, title }) {
   const c = cfg;
   const [draft, setDraft] = useState("");
   const [busy, setBusy] = useState(false);
@@ -250,6 +250,9 @@ export function ChatPanel({ cfg, ctx }) {
     h(
       "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 ? h("h2", { className: "caf-block-title" }, title) : null,
       c.greeting
         ? h("div", { className: "caf-msg caf-msg-assistant", dangerouslySetInnerHTML: { __html: renderMarkdown(c.greeting) } })
         : null,