claude-artifact-framework 0.9.0 → 0.9.1

package/README.md

@@ -347,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: {
@@ -361,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

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);
@@ -1884,7 +1887,9 @@ var 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 \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: var(--caf-control-radius); border: 1px solid var(--caf-border);
@@ -1918,7 +1923,9 @@ 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;
@@ -1943,7 +1950,8 @@ 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; }
 /* Capped width keeps each value NEXT TO its label in wide cards \u2014 the pair
    must read as a pair regardless of container width. */
@@ -2036,7 +2044,9 @@ var 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; }