claude-artifact-framework 0.15.0 → 0.16.0

package/llms.txt

@@ -64,6 +64,10 @@ https://cdn.jsdelivr.net/npm/claude-artifact-framework/dist/index.global.js
 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 (kanban, week views) branch on ctx.viewport
+    ("mobile" < 720px | "desktop", reactive) — stack columns on mobile; half
+    the viewers are on a phone. The framework never clips (wide custom
+    content scrolls), but scrolling is the fallback, not the design.
 
 ## Canonical example
 

package/package.json

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

@@ -1029,6 +1029,17 @@ export function createApp(spec = {}) {
       );
     }
     const [, force] = useState(0);
+    // ctx.viewport shares the 720px breakpoint the block grid already uses,
+    // so a custom block that branches on it flips in sync with the layout.
+    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(() => {
@@ -1081,6 +1092,7 @@ export 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)
@@ -1390,4 +1402,12 @@ const 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; }
+}
 `;

package/src/blocks.js

@@ -485,7 +485,10 @@ export function CustomBlock({ spec, ctx }) {
   const rendered = spec.custom(ctx);
   // `fill: true` frees the block from the card chrome so it can own a large
   // scrollable surface (a viewer, a canvas) — the workspace main-area case.
-  const cls = spec.fill ? "caf-block caf-block-fill" : "caf-block";
+  // caf-custom guarantees a custom block can never CLIP its content on a
+  // narrow screen: wide hand-built grids become scrollable, not amputated
+  // (measured: a week grid cut off its last column at 390px with no way in).
+  const cls = spec.fill ? "caf-block caf-block-fill caf-custom" : "caf-block caf-custom";
   if (typeof rendered === "string") {
     return h("div", { className: cls, dangerouslySetInnerHTML: { __html: rendered } });
   }