claude-artifact-framework 0.15.0 → 0.16.0

package/README.md

@@ -801,10 +801,30 @@ custom: (ctx) => React.createElement("div", {
   `d.preview` can kill persistence for the entire app. Big things (data
   URLs, file contents, parse results) live in `React.useState` or come from
   `ctx.files`; `data` holds what is small and serializable.
+- **Column grids ask `ctx.viewport`.** Half of artifact viewers are on a
+  phone. `ctx.viewport` is `"mobile"` (< 720px) or `"desktop"`, and the
+  block re-renders when it changes. A layout that lays columns side by side
+  (kanban boards, week calendars, dashboards of mini-cards) must stack or
+  reduce them on `"mobile"` — 3 columns squeezed into 390px are ~90px each
+  and unreadable:
+
+```js
+custom: (ctx) => {
+  const cols = ctx.viewport === "mobile" ? "1fr" : "repeat(3, 1fr)";
+  return React.createElement("div",
+    { style: { display: "grid", gridTemplateColumns: cols, gap: "0.6rem" } },
+    /* ...columnas... */);
+}
+```
+
+  As a safety net the framework never clips: custom content wider than the
+  screen scrolls horizontally instead of disappearing. But scrolling a
+  squeezed board is the fallback, not the design — branch on `ctx.viewport`.
 - Custom re-renders whenever `data` or `view` change; it receives the full
-  `ctx` (`data`, `update`, `view`, `files`, `viewerId`, `colors`, `go`,
-  `back`) and lives inside the block error boundary — a bug in your custom
-  code shows a named error in its slot, never a blank app.
+  `ctx` (`data`, `update`, `view`, `files`, `viewerId`, `colors`,
+  `viewport`, `go`, `back`) and lives inside the block error boundary — a
+  bug in your custom code shows a named error in its slot, never a blank
+  app.
 
 ## API reference
 
@@ -963,3 +983,6 @@ The rules that decide whether a generated app works, all in one place
 13. **Brand is zero-asset-first** — monogram/gradient/emoji defaults before
     URLs; inline `<svg>` over remote images; one icon style per app
     (emoji-first); `avatar: true` instead of hand-built initials circles.
+14. **Column grids in `custom` branch on `ctx.viewport`** — stack kanban
+    columns / week grids when it says `"mobile"`; half the viewers are on
+    a phone.

package/dist/index.esm.js

@@ -1023,7 +1023,7 @@ function ActionsBlock({ spec, ctx }) {
 }
 function CustomBlock({ spec, ctx }) {
   const rendered = spec.custom(ctx);
-  const cls = spec.fill ? "caf-block caf-block-fill" : "caf-block";
+  const cls = spec.fill ? "caf-block caf-block-fill caf-custom" : "caf-block caf-custom";
   if (typeof rendered === "string") {
     return createElement("div", { className: cls, dangerouslySetInnerHTML: { __html: rendered } });
   }
@@ -2321,6 +2321,15 @@ function createApp(spec = {}) {
       );
     }
     const [, force] = useState(0);
+    const [narrow, setNarrow] = useState(
+      () => typeof window !== "undefined" && window.matchMedia("(max-width: 719px)").matches
+    );
+    useEffect(() => {
+      const mq = window.matchMedia("(max-width: 719px)");
+      const onChange = (e) => setNarrow(e.matches);
+      mq.addEventListener("change", onChange);
+      return () => mq.removeEventListener("change", onChange);
+    }, []);
     const [libsState, setLibsState] = useState(spec.libs && spec.libs.length ? "loading" : "ready");
     const [libsError, setLibsError] = useState(null);
     useEffect(() => {
@@ -2366,6 +2375,7 @@ function createApp(spec = {}) {
       setTab: (key, i) => state.setView({ tabs: { ...state.getView().tabs, [key]: i } }),
       toggleCollapsed: (key, val) => state.setView({ collapsed: { ...state.getView().collapsed, [key]: val } }),
       colors: (n) => seriesColors(spec.theme && spec.theme.seed, n),
+      viewport: narrow ? "mobile" : "desktop",
       machine: spec.machine || null,
       send: spec.machine ? (eventName, payload) => runMachineEvent(spec.machine, state.update, eventName, payload) : () => {
         throw new Error("claude-artifact-framework: ctx.send() needs a `machine` declared at the top level.");
@@ -2649,6 +2659,14 @@ var BASE_CSS = `
 .caf-block-error { border-color: var(--caf-danger); gap: 0.4rem; }
 .caf-block-error strong { font-size: 0.9rem; color: var(--caf-danger); }
 .caf-block-error code { font-size: 0.78rem; color: var(--caf-muted); word-break: break-word; }
+/* Never-clip guarantee: content inside a custom block that is wider than the
+   phone (column grids, week views) must scroll, not disappear off-screen. */
+.caf-custom { overflow-x: auto; }
+/* Touch devices get tappable framework controls regardless of the spec. */
+@media (pointer: coarse) {
+  .caf-btn, .caf-tab, .caf-field input, .caf-field select { min-height: 44px; }
+  .caf-btn-sm, .caf-doc-close, .caf-item-remove { min-height: 40px; }
+}
 `;
 export {
   contrast,