@elytracms/studio 0.0.19 → 0.0.20

package/dist/components/section-nav.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment } from 'react';
+import { Fragment, useCallback, useEffect, useState } from 'react';
 import { Link, STUDIO_PROJECT_ROUTE, useLocation } from '@elytracms/studio/router';
-import { AlertTriangle, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { AlertTriangle, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { cn } from '@elytracms/studio/lib/utils';
+import { readCollapsedViews, storeCollapsedViews } from '@elytracms/studio/lib/rail';
 import { Text } from '@elytracms/studio/ui';
 import { activeViewIdFromPath, useStudioNav } from './app-views/sidebar';
 import { useFieldRenderers } from './cms/field-renderer';
@@ -23,6 +24,24 @@ export function SectionNav({ project, collapsed, onToggleCollapsed }) {
     const { issues: rendererIssues } = useFieldRenderers();
     const issues = [...navIssues, ...rendererIssues];
     const projectId = project.id;
+    // EC-293: per-parent collapse of nested sub-views, persisted (read after mount,
+    // like the rail-collapse pref — no flash script needed). A collapsed parent hides
+    // its children but stays a navigable link.
+    const [collapsedViews, setCollapsedViews] = useState(() => new Set());
+    useEffect(() => {
+        setCollapsedViews(readCollapsedViews());
+    }, []);
+    const toggleViewCollapsed = useCallback((id) => {
+        setCollapsedViews((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            storeCollapsedViews(next);
+            return next;
+        });
+    }, []);
     return (_jsxs("nav", { "aria-label": "Sections", className: cn('flex shrink-0 flex-col gap-0.5 border-r border-border bg-card/40 p-2 transition-[width] duration-150', collapsed ? 'w-[3.5rem]' : 'w-56'), children: [nodes.map((node, index) => {
                 if (node.kind === 'separator') {
                     return _jsx("div", { className: "my-1.5 border-t border-border/60", "aria-hidden": true }, `sep-${index}`);
@@ -38,23 +57,34 @@ export function SectionNav({ project, collapsed, onToggleCollapsed }) {
                 if (node.availability === 'unavailable')
                     return null;
                 // EC-293: a view may nest its sub-views (CMS collections). The parent renders
-                // as a link; its children render indented below (hidden when collapsed). The
-                // parent gets a subtle active hint when one of its children is the active view.
+                // as a link with a disclosure chevron; its children render indented below,
+                // hidden when the rail is collapsed OR this parent is collapsed. The parent
+                // gets a subtle active hint when one of its children is the active view.
+                const hasChildren = (node.children?.length ?? 0) > 0;
                 const hasActiveChild = node.children?.some((child) => child.id === activeViewId) ?? false;
-                return (_jsxs(Fragment, { children: [_jsx(NavViewLink, { projectId: projectId, view: node, activeViewId: activeViewId, collapsed: collapsed, hasActiveChild: hasActiveChild }), collapsed
+                const viewCollapsed = collapsedViews.has(node.id);
+                return (_jsxs(Fragment, { children: [_jsx(NavViewLink, { projectId: projectId, view: node, activeViewId: activeViewId, collapsed: collapsed, hasActiveChild: hasActiveChild, collapsible: hasChildren && !collapsed, expanded: !viewCollapsed, onToggleExpanded: () => toggleViewCollapsed(node.id) }), collapsed || viewCollapsed
                             ? null
                             : node.children?.map((child) => (_jsx(NavViewLink, { projectId: projectId, view: child, activeViewId: activeViewId, collapsed: collapsed, nested: true }, child.id)))] }, node.id));
             }), _jsxs("div", { className: "mt-auto flex flex-col gap-0.5", children: [issues.length > 0 ? _jsx(NavIssues, { issues: issues, collapsed: collapsed }) : null, _jsx("button", { type: "button", onClick: onToggleCollapsed, "aria-label": collapsed ? 'Expand sidebar' : 'Collapse sidebar', "aria-pressed": collapsed, title: collapsed ? 'Expand sidebar' : 'Collapse sidebar', className: cn('flex h-9 items-center gap-2.5 rounded-md text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground', collapsed ? 'justify-center px-0' : 'px-3'), children: collapsed ? (_jsx(PanelLeftOpen, { className: "size-4 shrink-0" })) : (_jsxs(_Fragment, { children: [_jsx(PanelLeftClose, { className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: "Collapse" })] })) })] })] }));
 }
 /** One rail view (top-level or nested) — a Link to its home route, active by view id. */
-function NavViewLink({ projectId, view, activeViewId, collapsed, nested = false, hasActiveChild = false, }) {
+function NavViewLink({ projectId, view, activeViewId, collapsed, nested = false, hasActiveChild = false, collapsible = false, expanded = true, onToggleExpanded, }) {
     const isActive = view.id === activeViewId;
     const Icon = view.icon;
-    return (_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: view.path }, title: view.label, "aria-current": isActive ? 'page' : undefined, className: cn('group relative flex h-9 items-center gap-2.5 rounded-md text-sm transition-colors', collapsed ? 'justify-center px-0' : nested ? 'pl-7 pr-3' : 'px-3', isActive
+    const link = (_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: view.path }, title: view.label, "aria-current": isActive ? 'page' : undefined, className: cn('group relative flex h-9 items-center gap-2.5 rounded-md text-sm transition-colors', 
+        // Collapsible parents reserve room on the right for the chevron toggle.
+        collapsed ? 'justify-center px-0' : nested ? 'pl-7 pr-3' : collapsible ? 'pl-3 pr-9' : 'px-3', isActive
             ? 'bg-accent font-medium text-accent-foreground'
             : hasActiveChild
                 ? 'text-foreground hover:bg-muted'
                 : 'text-muted-foreground hover:bg-muted hover:text-foreground'), children: [isActive ? (_jsx("span", { className: "absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary", "aria-hidden": true })) : null, _jsx(Icon, { className: "size-4 shrink-0" }), collapsed ? null : _jsx("span", { className: "min-w-0 flex-1 truncate", children: view.label }), view.availability === 'planned' && !collapsed ? (_jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-warning", "aria-hidden": true, title: "Planned" })) : null] }));
+    // A leaf (or the collapsed icons-only rail) is just the link.
+    if (!collapsible)
+        return link;
+    // A parent pairs the link with a sibling chevron toggle (so the chevron collapses
+    // without navigating, and the link still navigates to the parent surface).
+    return (_jsxs("div", { className: "relative", children: [link, _jsx("button", { type: "button", onClick: onToggleExpanded, "aria-label": `${expanded ? 'Collapse' : 'Expand'} ${view.label}`, "aria-expanded": expanded, className: "absolute right-1 top-1/2 grid size-6 -translate-y-1/2 place-items-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground", children: _jsx(ChevronDown, { className: cn('size-3.5 transition-transform', expanded ? '' : '-rotate-90'), "aria-hidden": true }) })] }));
 }
 /** Visible customization issues at the rail foot — the seam's "never silent" (EC-236). */
 function NavIssues({ issues, collapsed }) {

package/dist/components/section-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-nav.js","sourceRoot":"","sources":["../../src/components/section-nav.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAClF,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAG3E,OAAO,EAAE,EAAE,EAAE,MAAM,6BAA6B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAExE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AASxD;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAmB;IACnF,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAClC,MAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;IACnD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC,CAAA;IAC1D,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtD,MAAM,MAAM,GAAG,CAAC,GAAG,SAAS,EAAE,GAAG,cAAc,CAAC,CAAA;IAChD,MAAM,SAAS,GAAG,OAAO,CAAC,EAAE,CAAA;IAE5B,OAAO,CACL,6BACa,UAAU,EACrB,SAAS,EAAE,EAAE,CACX,sGAAsG,EACtG,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAClC,aAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;oBAC9B,OAAO,cAA0B,SAAS,EAAC,kCAAkC,yBAA5D,OAAO,KAAK,EAAE,CAA6D,CAAA;gBAC9F,CAAC;gBACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;oBAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,KAAK,aAAa,CAAC,CAAA;oBAC9E,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;wBAAE,OAAO,IAAI,CAAA;oBACnC,OAAO,CACL,eAA0C,SAAS,EAAC,iBAAiB,aAClE,SAAS,CAAC,CAAC,CAAC,CACX,cAAK,SAAS,EAAC,gCAAgC,wBAAe,CAC/D,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,oDAAoD,YAE7D,IAAI,CAAC,KAAK,GACN,CACR,EACA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,WAAW,IAEV,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,IAJf,IAAI,CAAC,EAAE,CAKZ,CACH,CAAC,KApBM,SAAS,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,CAqBlC,CACP,CAAA;gBACH,CAAC;gBACD,wEAAwE;gBACxE,gEAAgE;gBAChE,IAAI,IAAI,CAAC,YAAY,KAAK,aAAa;oBAAE,OAAO,IAAI,CAAA;gBACpD,8EAA8E;gBAC9E,6EAA6E;gBAC7E,gFAAgF;gBAChF,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,YAAY,CAAC,IAAI,KAAK,CAAA;gBACzF,OAAO,CACL,MAAC,QAAQ,eACP,KAAC,WAAW,IACV,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,GAC9B,EACD,SAAS;4BACR,CAAC,CAAC,IAAI;4BACN,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,WAAW,IAEV,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,KAAK,EACX,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,MAAM,UALD,KAAK,CAAC,EAAE,CAMb,CACH,CAAC,KAnBO,IAAI,CAAC,EAAE,CAoBX,CACZ,CAAA;YACH,CAAC,CAAC,EAEF,eAAK,SAAS,EAAC,+BAA+B,aAC3C,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC,CAAC,CAAC,IAAI,EAG/E,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB,gBACd,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,kBAC/C,SAAS,EACvB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,EACxD,SAAS,EAAE,EAAE,CACX,+HAA+H,EAC/H,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAC3C,YAEA,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,aAAa,IAAC,SAAS,EAAC,iBAAiB,GAAG,CAC9C,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,cAAc,IAAC,SAAS,EAAC,iBAAiB,GAAG,EAC9C,eAAM,SAAS,EAAC,mCAAmC,yBAAgB,IAClE,CACJ,GACM,IACL,IACF,CACP,CAAA;AACH,CAAC;AAED,yFAAyF;AACzF,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,MAAM,GAAG,KAAK,EACd,cAAc,GAAG,KAAK,GASvB;IACC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,KAAK,YAAY,CAAA;IACzC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;IACtB,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,oBAAoB,EACxB,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,EACxC,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,SAAS,EAAE,EAAE,CACX,mFAAmF,EACnF,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,EACjE,QAAQ;YACN,CAAC,CAAC,8CAA8C;YAChD,CAAC,CAAC,cAAc;gBACd,CAAC,CAAC,gCAAgC;gBAClC,CAAC,CAAC,4DAA4D,CACnE,aAGA,QAAQ,CAAC,CAAC,CAAC,CACV,eAAM,SAAS,EAAC,2DAA2D,wBAAe,CAC3F,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,GAAG,EACnC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,yBAAyB,YAAE,IAAI,CAAC,KAAK,GAAQ,EAChF,IAAI,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAC/C,eAAM,SAAS,EAAC,2CAA2C,uBAAa,KAAK,EAAC,SAAS,GAAG,CAC3F,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAA;AACH,CAAC;AAED,0FAA0F;AAC1F,SAAS,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAwD;IAC5F,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,cACE,SAAS,EAAC,gEAAgE,EAC1E,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,YAEtD,KAAC,aAAa,IAAC,SAAS,EAAC,QAAQ,gBAAa,GAAG,MAAM,CAAC,MAAM,iBAAiB,GAAI,GAC/E,CACP,CAAA;IACH,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAC,mFAAmF,YAC/F,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,eAEE,SAAS,EAAC,6DAA6D,EACvE,KAAK,EAAE,KAAK,CAAC,OAAO,aAEpB,KAAC,aAAa,IAAC,SAAS,EAAC,0BAA0B,wBAAe,EAClE,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,YAC7C,KAAK,CAAC,OAAO,GACT,KAPF,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,EAAE,IAAI,KAAK,EAAE,CAQtC,CACP,CAAC,GACE,CACP,CAAA;AACH,CAAC","sourcesContent":["import { Fragment } from 'react'\nimport { Link, STUDIO_PROJECT_ROUTE, useLocation } from '@elytracms/studio/router'\nimport { AlertTriangle, PanelLeftClose, PanelLeftOpen } from 'lucide-react'\nimport type { Project } from '@elytracms/core/studio-core'\nimport type { CustomizationIssue } from '@elytracms/core/studio-core'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { Text } from '@elytracms/studio/ui'\nimport { activeViewIdFromPath, useStudioNav } from './app-views/sidebar'\nimport type { ResolvedRailView } from './app-views/sidebar'\nimport { useFieldRenderers } from './cms/field-renderer'\n\nexport interface SectionNavProps {\n  project: Project\n  /** User-toggled collapse (EC-214) — icons only when collapsed, persisted by the shell. */\n  collapsed: boolean\n  onToggleCollapsed: () => void\n}\n\n/**\n * Vertical section rail (brief §8.1), driven by the configurable sidebar (EC-237):\n * a consumer-extendable tree of views / groups / separators resolved over the\n * built-in views (EC-239). Availability-aware (`unavailable` items are absent per\n * EC-221); the active item is matched by the VIEW ID in the URL, so two views\n * backed by the same surface (Content vs. a focused Categories) highlight\n * independently. The preference-persisted collapse and the strong active marker\n * (EC-214) are preserved. Customization issues (duplicate view id, invalid view,\n * non-component renderers) render at the rail foot — visible, never silent.\n */\nexport function SectionNav({ project, collapsed, onToggleCollapsed }: SectionNavProps) {\n  const { pathname } = useLocation()\n  const activeViewId = activeViewIdFromPath(pathname)\n  const { nodes, issues: navIssues } = useStudioNav(project)\n  const { issues: rendererIssues } = useFieldRenderers()\n  const issues = [...navIssues, ...rendererIssues]\n  const projectId = project.id\n\n  return (\n    <nav\n      aria-label=\"Sections\"\n      className={cn(\n        'flex shrink-0 flex-col gap-0.5 border-r border-border bg-card/40 p-2 transition-[width] duration-150',\n        collapsed ? 'w-[3.5rem]' : 'w-56',\n      )}\n    >\n      {nodes.map((node, index) => {\n        if (node.kind === 'separator') {\n          return <div key={`sep-${index}`} className=\"my-1.5 border-t border-border/60\" aria-hidden />\n        }\n        if (node.kind === 'group') {\n          const views = node.views.filter((view) => view.availability !== 'unavailable')\n          if (views.length === 0) return null\n          return (\n            <div key={`group-${node.label}-${index}`} className=\"mt-2 first:mt-0\">\n              {collapsed ? (\n                <div className=\"my-1 border-t border-border/60\" aria-hidden />\n              ) : (\n                <Text\n                  size=\"xs\"\n                  tone=\"subtle\"\n                  className=\"px-3 pb-1 pt-1 font-medium uppercase tracking-wide\"\n                >\n                  {node.label}\n                </Text>\n              )}\n              {views.map((view) => (\n                <NavViewLink\n                  key={view.id}\n                  projectId={projectId}\n                  view={view}\n                  activeViewId={activeViewId}\n                  collapsed={collapsed}\n                />\n              ))}\n            </div>\n          )\n        }\n        // EC-221: an unavailable view is absent from the rail (not greyed) — it\n        // stays reachable by URL, the rail simply doesn't advertise it.\n        if (node.availability === 'unavailable') return null\n        // EC-293: a view may nest its sub-views (CMS collections). The parent renders\n        // as a link; its children render indented below (hidden when collapsed). The\n        // parent gets a subtle active hint when one of its children is the active view.\n        const hasActiveChild = node.children?.some((child) => child.id === activeViewId) ?? false\n        return (\n          <Fragment key={node.id}>\n            <NavViewLink\n              projectId={projectId}\n              view={node}\n              activeViewId={activeViewId}\n              collapsed={collapsed}\n              hasActiveChild={hasActiveChild}\n            />\n            {collapsed\n              ? null\n              : node.children?.map((child) => (\n                  <NavViewLink\n                    key={child.id}\n                    projectId={projectId}\n                    view={child}\n                    activeViewId={activeViewId}\n                    collapsed={collapsed}\n                    nested\n                  />\n                ))}\n          </Fragment>\n        )\n      })}\n\n      <div className=\"mt-auto flex flex-col gap-0.5\">\n        {issues.length > 0 ? <NavIssues issues={issues} collapsed={collapsed} /> : null}\n\n        {/* Collapse toggle pinned to the rail foot (EC-214). */}\n        <button\n          type=\"button\"\n          onClick={onToggleCollapsed}\n          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n          aria-pressed={collapsed}\n          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n          className={cn(\n            'flex h-9 items-center gap-2.5 rounded-md text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',\n            collapsed ? 'justify-center px-0' : 'px-3',\n          )}\n        >\n          {collapsed ? (\n            <PanelLeftOpen className=\"size-4 shrink-0\" />\n          ) : (\n            <>\n              <PanelLeftClose className=\"size-4 shrink-0\" />\n              <span className=\"min-w-0 flex-1 truncate text-left\">Collapse</span>\n            </>\n          )}\n        </button>\n      </div>\n    </nav>\n  )\n}\n\n/** One rail view (top-level or nested) — a Link to its home route, active by view id. */\nfunction NavViewLink({\n  projectId,\n  view,\n  activeViewId,\n  collapsed,\n  nested = false,\n  hasActiveChild = false,\n}: {\n  projectId: string\n  view: ResolvedRailView\n  activeViewId: string | null\n  collapsed: boolean\n  nested?: boolean\n  /** EC-293: this parent's a child is the active view → a subtle (non-accent) hint. */\n  hasActiveChild?: boolean\n}) {\n  const isActive = view.id === activeViewId\n  const Icon = view.icon\n  return (\n    <Link\n      to={STUDIO_PROJECT_ROUTE}\n      params={{ projectId, _splat: view.path }}\n      title={view.label}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(\n        'group relative flex h-9 items-center gap-2.5 rounded-md text-sm transition-colors',\n        collapsed ? 'justify-center px-0' : nested ? 'pl-7 pr-3' : 'px-3',\n        isActive\n          ? 'bg-accent font-medium text-accent-foreground'\n          : hasActiveChild\n            ? 'text-foreground hover:bg-muted'\n            : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n      )}\n    >\n      {/* Strong active marker: a leading accent bar (EC-214). */}\n      {isActive ? (\n        <span className=\"absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary\" aria-hidden />\n      ) : null}\n      <Icon className=\"size-4 shrink-0\" />\n      {collapsed ? null : <span className=\"min-w-0 flex-1 truncate\">{view.label}</span>}\n      {view.availability === 'planned' && !collapsed ? (\n        <span className=\"size-1.5 shrink-0 rounded-full bg-warning\" aria-hidden title=\"Planned\" />\n      ) : null}\n    </Link>\n  )\n}\n\n/** Visible customization issues at the rail foot — the seam's \"never silent\" (EC-236). */\nfunction NavIssues({ issues, collapsed }: { issues: CustomizationIssue[]; collapsed: boolean }) {\n  if (collapsed) {\n    return (\n      <div\n        className=\"grid h-9 place-items-center text-amber-600 dark:text-amber-400\"\n        title={issues.map((issue) => issue.message).join('\\n')}\n      >\n        <AlertTriangle className=\"size-4\" aria-label={`${issues.length} sidebar issues`} />\n      </div>\n    )\n  }\n  return (\n    <div className=\"mb-1 flex flex-col gap-1 rounded-md border border-amber-500/30 bg-amber-500/5 p-2\">\n      {issues.map((issue, index) => (\n        <div\n          key={`${issue.point}:${issue.id ?? index}`}\n          className=\"flex items-start gap-1.5 text-amber-600 dark:text-amber-400\"\n          title={issue.message}\n        >\n          <AlertTriangle className=\"mt-0.5 size-3.5 shrink-0\" aria-hidden />\n          <Text size=\"xs\" className=\"min-w-0 leading-snug\">\n            {issue.message}\n          </Text>\n        </div>\n      ))}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"section-nav.js","sourceRoot":"","sources":["../../src/components/section-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, useCallback, useEffect, useState } from 'react'\nimport { Link, STUDIO_PROJECT_ROUTE, useLocation } from '@elytracms/studio/router'\nimport { AlertTriangle, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react'\nimport type { Project } from '@elytracms/core/studio-core'\nimport type { CustomizationIssue } from '@elytracms/core/studio-core'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { readCollapsedViews, storeCollapsedViews } from '@elytracms/studio/lib/rail'\nimport { Text } from '@elytracms/studio/ui'\nimport { activeViewIdFromPath, useStudioNav } from './app-views/sidebar'\nimport type { ResolvedRailView } from './app-views/sidebar'\nimport { useFieldRenderers } from './cms/field-renderer'\n\nexport interface SectionNavProps {\n  project: Project\n  /** User-toggled collapse (EC-214) — icons only when collapsed, persisted by the shell. */\n  collapsed: boolean\n  onToggleCollapsed: () => void\n}\n\n/**\n * Vertical section rail (brief §8.1), driven by the configurable sidebar (EC-237):\n * a consumer-extendable tree of views / groups / separators resolved over the\n * built-in views (EC-239). Availability-aware (`unavailable` items are absent per\n * EC-221); the active item is matched by the VIEW ID in the URL, so two views\n * backed by the same surface (Content vs. a focused Categories) highlight\n * independently. The preference-persisted collapse and the strong active marker\n * (EC-214) are preserved. Customization issues (duplicate view id, invalid view,\n * non-component renderers) render at the rail foot — visible, never silent.\n */\nexport function SectionNav({ project, collapsed, onToggleCollapsed }: SectionNavProps) {\n  const { pathname } = useLocation()\n  const activeViewId = activeViewIdFromPath(pathname)\n  const { nodes, issues: navIssues } = useStudioNav(project)\n  const { issues: rendererIssues } = useFieldRenderers()\n  const issues = [...navIssues, ...rendererIssues]\n  const projectId = project.id\n\n  // EC-293: per-parent collapse of nested sub-views, persisted (read after mount,\n  // like the rail-collapse pref — no flash script needed). A collapsed parent hides\n  // its children but stays a navigable link.\n  const [collapsedViews, setCollapsedViews] = useState<Set<string>>(() => new Set())\n  useEffect(() => {\n    setCollapsedViews(readCollapsedViews())\n  }, [])\n  const toggleViewCollapsed = useCallback((id: string) => {\n    setCollapsedViews((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) next.delete(id)\n      else next.add(id)\n      storeCollapsedViews(next)\n      return next\n    })\n  }, [])\n\n  return (\n    <nav\n      aria-label=\"Sections\"\n      className={cn(\n        'flex shrink-0 flex-col gap-0.5 border-r border-border bg-card/40 p-2 transition-[width] duration-150',\n        collapsed ? 'w-[3.5rem]' : 'w-56',\n      )}\n    >\n      {nodes.map((node, index) => {\n        if (node.kind === 'separator') {\n          return <div key={`sep-${index}`} className=\"my-1.5 border-t border-border/60\" aria-hidden />\n        }\n        if (node.kind === 'group') {\n          const views = node.views.filter((view) => view.availability !== 'unavailable')\n          if (views.length === 0) return null\n          return (\n            <div key={`group-${node.label}-${index}`} className=\"mt-2 first:mt-0\">\n              {collapsed ? (\n                <div className=\"my-1 border-t border-border/60\" aria-hidden />\n              ) : (\n                <Text\n                  size=\"xs\"\n                  tone=\"subtle\"\n                  className=\"px-3 pb-1 pt-1 font-medium uppercase tracking-wide\"\n                >\n                  {node.label}\n                </Text>\n              )}\n              {views.map((view) => (\n                <NavViewLink\n                  key={view.id}\n                  projectId={projectId}\n                  view={view}\n                  activeViewId={activeViewId}\n                  collapsed={collapsed}\n                />\n              ))}\n            </div>\n          )\n        }\n        // EC-221: an unavailable view is absent from the rail (not greyed) — it\n        // stays reachable by URL, the rail simply doesn't advertise it.\n        if (node.availability === 'unavailable') return null\n        // EC-293: a view may nest its sub-views (CMS collections). The parent renders\n        // as a link with a disclosure chevron; its children render indented below,\n        // hidden when the rail is collapsed OR this parent is collapsed. The parent\n        // gets a subtle active hint when one of its children is the active view.\n        const hasChildren = (node.children?.length ?? 0) > 0\n        const hasActiveChild = node.children?.some((child) => child.id === activeViewId) ?? false\n        const viewCollapsed = collapsedViews.has(node.id)\n        return (\n          <Fragment key={node.id}>\n            <NavViewLink\n              projectId={projectId}\n              view={node}\n              activeViewId={activeViewId}\n              collapsed={collapsed}\n              hasActiveChild={hasActiveChild}\n              collapsible={hasChildren && !collapsed}\n              expanded={!viewCollapsed}\n              onToggleExpanded={() => toggleViewCollapsed(node.id)}\n            />\n            {collapsed || viewCollapsed\n              ? null\n              : node.children?.map((child) => (\n                  <NavViewLink\n                    key={child.id}\n                    projectId={projectId}\n                    view={child}\n                    activeViewId={activeViewId}\n                    collapsed={collapsed}\n                    nested\n                  />\n                ))}\n          </Fragment>\n        )\n      })}\n\n      <div className=\"mt-auto flex flex-col gap-0.5\">\n        {issues.length > 0 ? <NavIssues issues={issues} collapsed={collapsed} /> : null}\n\n        {/* Collapse toggle pinned to the rail foot (EC-214). */}\n        <button\n          type=\"button\"\n          onClick={onToggleCollapsed}\n          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n          aria-pressed={collapsed}\n          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n          className={cn(\n            'flex h-9 items-center gap-2.5 rounded-md text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',\n            collapsed ? 'justify-center px-0' : 'px-3',\n          )}\n        >\n          {collapsed ? (\n            <PanelLeftOpen className=\"size-4 shrink-0\" />\n          ) : (\n            <>\n              <PanelLeftClose className=\"size-4 shrink-0\" />\n              <span className=\"min-w-0 flex-1 truncate text-left\">Collapse</span>\n            </>\n          )}\n        </button>\n      </div>\n    </nav>\n  )\n}\n\n/** One rail view (top-level or nested) — a Link to its home route, active by view id. */\nfunction NavViewLink({\n  projectId,\n  view,\n  activeViewId,\n  collapsed,\n  nested = false,\n  hasActiveChild = false,\n  collapsible = false,\n  expanded = true,\n  onToggleExpanded,\n}: {\n  projectId: string\n  view: ResolvedRailView\n  activeViewId: string | null\n  collapsed: boolean\n  nested?: boolean\n  /** EC-293: this parent's a child is the active view → a subtle (non-accent) hint. */\n  hasActiveChild?: boolean\n  /** EC-293: this parent has nested children → render a disclosure chevron. */\n  collapsible?: boolean\n  /** Whether the nested children are shown (chevron points down) or hidden. */\n  expanded?: boolean\n  /** Toggle this parent's collapse (the chevron click — does not navigate). */\n  onToggleExpanded?: () => void\n}) {\n  const isActive = view.id === activeViewId\n  const Icon = view.icon\n  const link = (\n    <Link\n      to={STUDIO_PROJECT_ROUTE}\n      params={{ projectId, _splat: view.path }}\n      title={view.label}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(\n        'group relative flex h-9 items-center gap-2.5 rounded-md text-sm transition-colors',\n        // Collapsible parents reserve room on the right for the chevron toggle.\n        collapsed ? 'justify-center px-0' : nested ? 'pl-7 pr-3' : collapsible ? 'pl-3 pr-9' : 'px-3',\n        isActive\n          ? 'bg-accent font-medium text-accent-foreground'\n          : hasActiveChild\n            ? 'text-foreground hover:bg-muted'\n            : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n      )}\n    >\n      {/* Strong active marker: a leading accent bar (EC-214). */}\n      {isActive ? (\n        <span className=\"absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary\" aria-hidden />\n      ) : null}\n      <Icon className=\"size-4 shrink-0\" />\n      {collapsed ? null : <span className=\"min-w-0 flex-1 truncate\">{view.label}</span>}\n      {view.availability === 'planned' && !collapsed ? (\n        <span className=\"size-1.5 shrink-0 rounded-full bg-warning\" aria-hidden title=\"Planned\" />\n      ) : null}\n    </Link>\n  )\n  // A leaf (or the collapsed icons-only rail) is just the link.\n  if (!collapsible) return link\n  // A parent pairs the link with a sibling chevron toggle (so the chevron collapses\n  // without navigating, and the link still navigates to the parent surface).\n  return (\n    <div className=\"relative\">\n      {link}\n      <button\n        type=\"button\"\n        onClick={onToggleExpanded}\n        aria-label={`${expanded ? 'Collapse' : 'Expand'} ${view.label}`}\n        aria-expanded={expanded}\n        className=\"absolute right-1 top-1/2 grid size-6 -translate-y-1/2 place-items-center rounded text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground\"\n      >\n        <ChevronDown\n          className={cn('size-3.5 transition-transform', expanded ? '' : '-rotate-90')}\n          aria-hidden\n        />\n      </button>\n    </div>\n  )\n}\n\n/** Visible customization issues at the rail foot — the seam's \"never silent\" (EC-236). */\nfunction NavIssues({ issues, collapsed }: { issues: CustomizationIssue[]; collapsed: boolean }) {\n  if (collapsed) {\n    return (\n      <div\n        className=\"grid h-9 place-items-center text-amber-600 dark:text-amber-400\"\n        title={issues.map((issue) => issue.message).join('\\n')}\n      >\n        <AlertTriangle className=\"size-4\" aria-label={`${issues.length} sidebar issues`} />\n      </div>\n    )\n  }\n  return (\n    <div className=\"mb-1 flex flex-col gap-1 rounded-md border border-amber-500/30 bg-amber-500/5 p-2\">\n      {issues.map((issue, index) => (\n        <div\n          key={`${issue.point}:${issue.id ?? index}`}\n          className=\"flex items-start gap-1.5 text-amber-600 dark:text-amber-400\"\n          title={issue.message}\n        >\n          <AlertTriangle className=\"mt-0.5 size-3.5 shrink-0\" aria-hidden />\n          <Text size=\"xs\" className=\"min-w-0 leading-snug\">\n            {issue.message}\n          </Text>\n        </div>\n      ))}\n    </div>\n  )\n}\n"]}

package/dist/lib/rail.d.ts

@@ -9,3 +9,13 @@ export declare const RAIL_STORAGE_KEY = "elytra-rail-collapsed";
 export declare function readRailCollapsed(): boolean;
 /** Persist the collapse preference (best-effort; storage may be unavailable). */
 export declare function storeRailCollapsed(collapsed: boolean): void;
+/**
+ * Per-parent collapse of the rail's nested sub-views (EC-293). We persist the
+ * exceptions — the set of COLLAPSED parent view ids — so the default (every parent
+ * expanded) needs no storage and an unknown/removed id is harmless.
+ */
+export declare const RAIL_COLLAPSED_VIEWS_KEY = "elytra-rail-collapsed-views";
+/** Read the collapsed parent-view ids; empty (all expanded) when unset/unavailable. */
+export declare function readCollapsedViews(): Set<string>;
+/** Persist the collapsed parent-view ids (best-effort; storage may be unavailable). */
+export declare function storeCollapsedViews(ids: ReadonlySet<string>): void;

package/dist/lib/rail.js

@@ -23,4 +23,29 @@ export function storeRailCollapsed(collapsed) {
         // ignore — preference simply won't persist this session
     }
 }
+/**
+ * Per-parent collapse of the rail's nested sub-views (EC-293). We persist the
+ * exceptions — the set of COLLAPSED parent view ids — so the default (every parent
+ * expanded) needs no storage and an unknown/removed id is harmless.
+ */
+export const RAIL_COLLAPSED_VIEWS_KEY = 'elytra-rail-collapsed-views';
+/** Read the collapsed parent-view ids; empty (all expanded) when unset/unavailable. */
+export function readCollapsedViews() {
+    try {
+        const raw = localStorage.getItem(RAIL_COLLAPSED_VIEWS_KEY);
+        return new Set(raw ? raw.split(',').filter(Boolean) : []);
+    }
+    catch {
+        return new Set();
+    }
+}
+/** Persist the collapsed parent-view ids (best-effort; storage may be unavailable). */
+export function storeCollapsedViews(ids) {
+    try {
+        localStorage.setItem(RAIL_COLLAPSED_VIEWS_KEY, [...ids].join(','));
+    }
+    catch {
+        // ignore — preference simply won't persist this session
+    }
+}
 //# sourceMappingURL=rail.js.map

package/dist/lib/rail.js.map

@@ -1 +1 @@
-{"version":3,"file":"rail.js","sourceRoot":"","sources":["../../src/lib/rail.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAA;AAEvD,uFAAuF;AACvF,MAAM,UAAU,iBAAiB;IAC/B,IAAI,CAAC;QACH,OAAO,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,GAAG,CAAA;IACvD,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAA;IACd,CAAC;AACH,CAAC;AAED,iFAAiF;AACjF,MAAM,UAAU,kBAAkB,CAAC,SAAkB;IACnD,IAAI,CAAC;QACH,YAAY,CAAC,OAAO,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;IAC/D,CAAC;IAAC,MAAM,CAAC;QACP,wDAAwD;IAC1D,CAAC;AACH,CAAC","sourcesContent":["/**\n * Section-rail collapse preference (EC-214). The studio's vertical section rail\n * is user-collapsible; the choice persists across sessions so the shell opens\n * the way the user left it. Best-effort like the theme preference: storage may be\n * unavailable, in which case the rail simply defaults to expanded each session.\n */\nexport const RAIL_STORAGE_KEY = 'elytra-rail-collapsed'\n\n/** Read the persisted collapse preference; expanded (false) when unset/unavailable. */\nexport function readRailCollapsed(): boolean {\n  try {\n    return localStorage.getItem(RAIL_STORAGE_KEY) === '1'\n  } catch {\n    return false\n  }\n}\n\n/** Persist the collapse preference (best-effort; storage may be unavailable). */\nexport function storeRailCollapsed(collapsed: boolean): void {\n  try {\n    localStorage.setItem(RAIL_STORAGE_KEY, collapsed ? '1' : '0')\n  } catch {\n    // ignore — preference simply won't persist this session\n  }\n}\n"]}
+{"version":3,"file":"rail.js","sourceRoot":"","sources":["../../src/lib/rail.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAA;AAEvD,uFAAuF;AACvF,MAAM,UAAU,iBAAiB;IAC/B,IAAI,CAAC;QACH,OAAO,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,GAAG,CAAA;IACvD,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAA;IACd,CAAC;AACH,CAAC;AAED,iFAAiF;AACjF,MAAM,UAAU,kBAAkB,CAAC,SAAkB;IACnD,IAAI,CAAC;QACH,YAAY,CAAC,OAAO,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;IAC/D,CAAC;IAAC,MAAM,CAAC;QACP,wDAAwD;IAC1D,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,6BAA6B,CAAA;AAErE,uFAAuF;AACvF,MAAM,UAAU,kBAAkB;IAChC,IAAI,CAAC;QACH,MAAM,GAAG,GAAG,YAAY,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAA;QAC1D,OAAO,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,GAAG,EAAE,CAAA;IAClB,CAAC;AACH,CAAC;AAED,uFAAuF;AACvF,MAAM,UAAU,mBAAmB,CAAC,GAAwB;IAC1D,IAAI,CAAC;QACH,YAAY,CAAC,OAAO,CAAC,wBAAwB,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACpE,CAAC;IAAC,MAAM,CAAC;QACP,wDAAwD;IAC1D,CAAC;AACH,CAAC","sourcesContent":["/**\n * Section-rail collapse preference (EC-214). The studio's vertical section rail\n * is user-collapsible; the choice persists across sessions so the shell opens\n * the way the user left it. Best-effort like the theme preference: storage may be\n * unavailable, in which case the rail simply defaults to expanded each session.\n */\nexport const RAIL_STORAGE_KEY = 'elytra-rail-collapsed'\n\n/** Read the persisted collapse preference; expanded (false) when unset/unavailable. */\nexport function readRailCollapsed(): boolean {\n  try {\n    return localStorage.getItem(RAIL_STORAGE_KEY) === '1'\n  } catch {\n    return false\n  }\n}\n\n/** Persist the collapse preference (best-effort; storage may be unavailable). */\nexport function storeRailCollapsed(collapsed: boolean): void {\n  try {\n    localStorage.setItem(RAIL_STORAGE_KEY, collapsed ? '1' : '0')\n  } catch {\n    // ignore — preference simply won't persist this session\n  }\n}\n\n/**\n * Per-parent collapse of the rail's nested sub-views (EC-293). We persist the\n * exceptions — the set of COLLAPSED parent view ids — so the default (every parent\n * expanded) needs no storage and an unknown/removed id is harmless.\n */\nexport const RAIL_COLLAPSED_VIEWS_KEY = 'elytra-rail-collapsed-views'\n\n/** Read the collapsed parent-view ids; empty (all expanded) when unset/unavailable. */\nexport function readCollapsedViews(): Set<string> {\n  try {\n    const raw = localStorage.getItem(RAIL_COLLAPSED_VIEWS_KEY)\n    return new Set(raw ? raw.split(',').filter(Boolean) : [])\n  } catch {\n    return new Set()\n  }\n}\n\n/** Persist the collapsed parent-view ids (best-effort; storage may be unavailable). */\nexport function storeCollapsedViews(ids: ReadonlySet<string>): void {\n  try {\n    localStorage.setItem(RAIL_COLLAPSED_VIEWS_KEY, [...ids].join(','))\n  } catch {\n    // ignore — preference simply won't persist this session\n  }\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elytracms/studio",
   "author": "finaldream <hi@finaldream.de>",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "private": false,
   "description": "The Elytra studio engine (UI + lib + routes + data-only Convex schema) as an importable package. Extraction staged in EXTRACTION.md (EC-223); Stages 1-2 = UI primitives + router-free lib leaves.",
   "license": "MIT",
@@ -117,7 +117,7 @@
     "lucide-react": "^1.17.0",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.0.0",
-    "@elytracms/core": "^0.0.19"
+    "@elytracms/core": "^0.0.20"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.170.0",