smoodly 0.0.53 → 0.0.54

package/dist/admin/ui/ActionMenu.d.ts

@@ -3,6 +3,8 @@ export type ActionMenuItem = {
     run(): void;
     disabled?: boolean;
     danger?: boolean;
+    /** The reason on a disabled entry (a paste the zone refuses), shown as the button's title. */
+    title?: string;
 };
 /** The button's box in viewport pixels, `right` measured from the viewport's right edge. */
 type Anchor = {

package/dist/admin/ui/ActionMenu.js

@@ -68,5 +68,5 @@ export function ActionMenu({ label, items, disabled, small = false }) {
             document.removeEventListener("scroll", onScroll, true);
         };
     }, [open]);
-    return (_jsxs("div", { ref: ref, style: { position: "relative", flex: "none" }, children: [_jsx("button", { ref: button, type: "button", className: cx("sm-dotmenu", small && "sm-dotmenu--sm"), "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open !== null, disabled: disabled, onClick: toggle, children: "\u00B7\u00B7\u00B7" }), open && (_jsx("div", { ref: menu, role: "menu", className: "sm-picker sm-picker--menu", style: place ?? { top: open.bottom + 6, right: open.right, visibility: "hidden" }, children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: cx("sm-picker__item", item.danger && "sm-picker__item--danger"), disabled: item.disabled, onClick: () => { setOpen(null); item.run(); }, children: item.label }, item.label))) }))] }));
+    return (_jsxs("div", { ref: ref, style: { position: "relative", flex: "none" }, children: [_jsx("button", { ref: button, type: "button", className: cx("sm-dotmenu", small && "sm-dotmenu--sm"), "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open !== null, disabled: disabled, onClick: toggle, children: "\u00B7\u00B7\u00B7" }), open && (_jsx("div", { ref: menu, role: "menu", className: "sm-picker sm-picker--menu", style: place ?? { top: open.bottom + 6, right: open.right, visibility: "hidden" }, children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: cx("sm-picker__item", item.danger && "sm-picker__item--danger"), disabled: item.disabled, title: item.title, onClick: () => { setOpen(null); item.run(); }, children: item.label }, item.label))) }))] }));
 }

package/dist/admin/ui/primitives.d.ts

@@ -103,6 +103,7 @@ export declare function Segmented<T extends string>({ options, value, onChange,
         disabled?: boolean;
         title?: string;
         className?: string;
+        "aria-label"?: string;
     } | undefined;
 }): import("react").JSX.Element;
 export declare function StatusBadge({ status }: {

package/dist/admin/ui/primitives.js

@@ -103,7 +103,7 @@ export function Tabs({ tabs, value, onChange }) {
 export function Segmented({ options, value, onChange, stretch, disabled, label, option, className }) {
     return (_jsx("div", { className: cx("sm-seg", stretch && "sm-seg--stretch", disabled && "sm-seg--disabled", className), children: options.map((o) => {
             const extra = option?.(o);
-            return (_jsx("button", { type: "button", className: cx("sm-seg__opt", extra?.className), "aria-pressed": o === value, disabled: disabled || extra?.disabled, title: extra?.title, onClick: () => onChange(o), children: label ? label(o) : o }, o));
+            return (_jsx("button", { type: "button", className: cx("sm-seg__opt", extra?.className), "aria-pressed": o === value, disabled: disabled || extra?.disabled, title: extra?.title, "aria-label": extra?.["aria-label"], onClick: () => onChange(o), children: label ? label(o) : o }, o));
         }) }));
 }
 /* ── data ────────────────────────────────────────────────────────────── */

package/dist/admin/ui/theme.js

@@ -638,6 +638,8 @@ body:has(.sm-admin){margin:0}
 .sm-seg{display:flex;gap:2px;padding:3px;background:var(--seg-bg);border-radius:var(--radius-btn)}
 /* A locale switch: each option wide enough to read as a tab, not a chip. */
 .sm-seg--locale .sm-seg__opt{min-width:64px}
+/* The Canvas | Structure switch: two icon options. */
+.sm-seg--view .sm-seg__opt{padding:4px 8px;display:grid;place-items:center}
 .sm-seg--stretch{width:100%}
 .sm-seg--disabled{opacity:.6}
 .sm-seg__opt:disabled{cursor:default}
@@ -768,6 +770,11 @@ body:has(.sm-admin){margin:0}
   position:relative;background:var(--page-bg);border-radius:var(--page-radius);
   box-shadow:var(--shadow-page);min-height:100%;
 }
+/* Structure (spec 2026-10-19 editor at launch §1): the structure layer takes the scroller; the frame stays mounted
+   and hidden under it: the wrapper is a zero-height absolute box that clips the frame (so the scroller does not grow by the
+   page's height), while the frame's own box keeps its width and height for the bridge. After .sm-page: it overrides its position. */
+.sm-canvas__scroll--structure{position:relative}
+.sm-page.sm-canvas__hidden{visibility:hidden;position:absolute;left:0;top:0;width:100%;height:0;min-height:0;pointer-events:none}
 .sm-canvas__loading{
   height:240px;display:grid;place-items:center;color:var(--text-subtle);font-family:var(--meta-font);
   font-size:var(--meta-size);letter-spacing:var(--caps-tracking);text-transform:var(--caps-transform);
@@ -834,6 +841,67 @@ body:has(.sm-admin){margin:0}
 /* A row with a grip: the grip takes the left padding's place and the label follows it. */
 .sm-outline-row--grip{padding-left:2px}
 .sm-outline-row--grip .sm-outline-row__label{flex:1}
+/* The structure view (spec 2026-10-19 editor at launch §1): the canvas column as rows of cards, the
+   outline's boxes grown up — a zone's caps label, a card per section on the outline's white, the
+   outline's selected fill and drift stripes. The add affordance between cards is the "+" pill at
+   label size, faint until its row is hovered. */
+.sm-structure{max-width:720px;margin:0 auto;padding:var(--canvas-pad);padding-bottom:40px;display:flex;flex-direction:column;gap:20px}
+.sm-structure__group{display:flex;flex-direction:column;gap:4px}
+.sm-structure__zone{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
+.sm-structure__zone .sm-sectionlabel{flex:1;min-width:0}
+.sm-structure__rows{display:flex;flex-direction:column}
+.sm-structure__row{display:flex;flex-direction:column}
+.sm-structure__card{
+  display:grid;grid-template-columns:24px 32px minmax(0,1fr) auto auto;gap:10px;align-items:center;
+  width:100%;min-height:56px;padding:8px 6px 8px 2px;text-align:left;font:inherit;
+  border-radius:var(--outline-row-radius);background:var(--outline-row-bg);border:var(--outline-row-border);
+  color:var(--text);cursor:pointer;
+}
+.sm-structure__card:hover{background:var(--control-hover)}
+.sm-structure__card:hover .sm-grip{opacity:1}
+.sm-structure__card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+.sm-structure__card--selected,.sm-structure__card--selected:hover{background:var(--nav-active-bg);color:var(--nav-active-fg);border-color:transparent}
+.sm-structure__card--locked{background:var(--surface-inset);color:var(--text-muted);border-color:transparent}
+.sm-structure__card--broken{box-shadow:inset 3px 0 0 var(--danger)}
+.sm-structure__card--orphan{box-shadow:inset 3px 0 0 var(--line-dashed)}
+.sm-structure__gripslot{width:24px;height:24px}
+.sm-structure__icon{
+  width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm);
+  background:var(--surface-inset);font-size:var(--text-lg);line-height:1;flex:none;
+}
+.sm-structure__card--selected .sm-structure__icon,.sm-structure__card--locked .sm-structure__icon{background:color-mix(in srgb,currentColor 10%,transparent)}
+.sm-structure__text{display:flex;flex-direction:column;gap:2px;min-width:0}
+.sm-structure__title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px;min-width:0}
+.sm-structure__badge{
+  font-size:var(--text-sm);font-weight:500;letter-spacing:var(--caps-tracking);text-transform:var(--caps-transform);
+  color:var(--text-muted);flex:none;
+}
+.sm-structure__card--selected .sm-structure__badge{color:inherit;opacity:.8}
+.sm-structure__preview{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
+.sm-structure__card--selected .sm-structure__preview{color:inherit;opacity:.8}
+.sm-structure__thumb{width:44px;height:30px;border-radius:4px;overflow:hidden;background:var(--surface-inset);flex:none;display:block}
+.sm-structure__img{width:100%;height:100%;object-fit:cover;display:block}
+.sm-structure__menu{display:flex;flex:none}
+.sm-structure__slot{display:flex;justify-content:center;padding:4px 0}
+.sm-structure__add{
+  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 4px;border-radius:999px;border:0;
+  background:var(--plus-bg);color:var(--plus-fg);font:500 var(--text-sm)/1 var(--font-sans);cursor:pointer;
+  box-shadow:var(--plus-shadow);white-space:nowrap;opacity:.35;transition:opacity .12s,background .12s;
+}
+.sm-structure__add-icon{
+  width:16px;height:16px;flex:none;border-radius:50%;background:var(--plus-icon-bg);color:var(--plus-icon-fg);
+  display:grid;place-items:center;font-size:12px;line-height:1;
+}
+.sm-structure__row:hover .sm-structure__add,.sm-structure__slot:hover .sm-structure__add,.sm-structure__add:focus-visible,.sm-structure__empty .sm-structure__add{opacity:1}
+.sm-structure__add:hover{background:var(--plus-hover)}
+/* The lifted row keeps the hook's transform and z-index; its card carries the shadow, its add slot hides. */
+.sm-structure__row.sm-drag--lifted{background:transparent;box-shadow:none}
+.sm-structure__row.sm-drag--lifted .sm-structure__card{box-shadow:var(--shadow-pop)}
+.sm-structure__row.sm-drag--lifted .sm-structure__slot{visibility:hidden}
+.sm-structure__empty{
+  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--outline-row-h);padding:4px 12px;
+  border:1px dashed var(--line-dashed);border-radius:var(--outline-row-radius);color:var(--text-muted);font-weight:500;
+}
 
 .sm-picker{
   width:300px;background:var(--menu-bg);border:var(--menu-border);border-radius:var(--radius-md);
@@ -847,6 +915,8 @@ body:has(.sm-admin){margin:0}
 /* after the base item rule: same specificity, so source order decides (ActionMenu states) */
 .sm-picker__item:disabled{opacity:.4;cursor:default}
 .sm-picker__item:disabled:hover{background:transparent}
+/* The clipboard's entry leads the picker (spec 2026-10-19 editor at launch §3), set off from the sections under it. */
+.sm-picker__item--paste{border-bottom:1px solid var(--line);margin-bottom:4px;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
 .sm-picker__item--danger{color:var(--danger)}
 .sm-picker__icon{
   width:26px;height:26px;flex:none;border-radius:var(--radius-sm);background:var(--accent-soft);

package/dist/admin/ui/useSortable.js

@@ -172,7 +172,9 @@ export function useSortable(options) {
         window.addEventListener("keydown", key);
     };
     const onKeyDown = (index) => (e) => {
-        e.stopPropagation(); // the row's own Enter/Space handler must not see the grip's keys
+        // The row's own Enter/Space handler must not see the grip's keys; every other key (the editor's Cmd+Z, review 2026-10-20) bubbles on.
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowUp" || e.key === "ArrowDown")
+            e.stopPropagation();
         if (e.key !== "ArrowUp" && e.key !== "ArrowDown")
             return;
         e.preventDefault();

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const SMOODLY_VERSION = "0.0.53";
+export declare const SMOODLY_VERSION = "0.0.54";

package/dist/version.js

@@ -1,2 +1,2 @@
 // Generated by scripts/write-version.mjs from package.json — do not edit.
-export const SMOODLY_VERSION = "0.0.53";
+export const SMOODLY_VERSION = "0.0.54";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smoodly",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "description": "Open-source, code-first CMS for Astro and Next.js: define a component once, it becomes a typed, editable building block.",
   "license": "MIT",
   "repository": {