claude-artifact-framework 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-artifact-framework",
-  "version": "0.9.0",
+  "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

@@ -617,7 +617,9 @@ const BASE_CSS = `
 }
 .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.72rem; font-weight: 500; 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: var(--caf-control-radius); border: 1px solid var(--caf-border);
@@ -651,7 +653,9 @@ 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;
@@ -676,7 +680,8 @@ 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; }
 /* Capped width keeps each value NEXT TO its label in wide cards — the pair
    must read as a pair regardless of container width. */
@@ -769,7 +774,9 @@ const BASE_CSS = `
 .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,