@elytracms/studio 0.0.31 → 0.0.33

package/dist/components/section-nav.js

@@ -4,6 +4,7 @@ import { Link, STUDIO_PROJECT_ROUTE, useLocation } from '@elytracms/studio/route
 import { AlertTriangle, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { cn } from '@elytracms/studio/lib/utils';
 import { readCollapsedViews, storeCollapsedViews } from '@elytracms/studio/lib/rail';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { Text } from '@elytracms/studio/ui';
 import { activeViewIdFromPath, isNavViewVisible, useStudioNav } from './app-views/sidebar';
 import { useFieldRenderers } from './cms/field-renderer';
@@ -50,7 +51,7 @@ export function SectionNav({ project, collapsed, onToggleCollapsed }) {
             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) => {
+    return (_jsxs("nav", { "aria-label": translate('shell.nav.label'), 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}`);
                 }
@@ -75,7 +76,7 @@ export function SectionNav({ project, collapsed, onToggleCollapsed }) {
                 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?.filter(isVisible).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" })] })) })] })] }));
+            }), _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 ? translate('shell.sidebar.expand') : translate('shell.sidebar.collapse'), "aria-pressed": collapsed, title: collapsed ? translate('shell.sidebar.expand') : translate('shell.sidebar.collapse'), 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: translate('shell.sidebar.collapseLabel') })] })) })] })] }));
 }
 /** 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, collapsible = false, expanded = true, onToggleExpanded, }) {
@@ -87,18 +88,20 @@ function NavViewLink({ projectId, view, activeViewId, collapsed, nested = false,
             ? '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] }));
+                : '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: translate('shell.nav.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 }) })] }));
+    return (_jsxs("div", { className: "relative", children: [link, _jsx("button", { type: "button", onClick: onToggleExpanded, "aria-label": translate(expanded ? 'shell.nav.collapseView' : 'shell.nav.expandView', {
+                    name: 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 }) {
     if (collapsed) {
-        return (_jsx("div", { className: "grid h-9 place-items-center text-amber-600 dark:text-amber-400", title: issues.map((issue) => issue.message).join('\n'), children: _jsx(AlertTriangle, { className: "size-4", "aria-label": `${issues.length} sidebar issues` }) }));
+        return (_jsx("div", { className: "grid h-9 place-items-center text-amber-600 dark:text-amber-400", title: issues.map((issue) => issue.message).join('\n'), children: _jsx(AlertTriangle, { className: "size-4", "aria-label": translate('shell.nav.issuesCount', { count: issues.length }) }) }));
     }
     return (_jsx("div", { className: "mb-1 flex flex-col gap-1 rounded-md border border-amber-500/30 bg-amber-500/5 p-2", children: issues.map((issue, index) => (_jsxs("div", { className: "flex items-start gap-1.5 text-amber-600 dark:text-amber-400", title: issue.message, children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": true }), _jsx(Text, { size: "xs", className: "min-w-0 leading-snug", children: issue.message })] }, `${issue.point}:${issue.id ?? index}`))) }));
 }

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

@@ -1 +1 @@
-{"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, isNavViewVisible, useStudioNav } from './app-views/sidebar'\nimport type { ResolvedRailView } from './app-views/sidebar'\nimport { useFieldRenderers } from './cms/field-renderer'\nimport { useProjectRole } from './auth-context'\nimport type { NavPermissionContext } from './app-views/module'\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-240 (AD-18): per-nav-item, default-open permission gating. The signed-in\n  // user's role drives an OPTIONAL `visible` predicate on any view; absent →\n  // visible. UI reflection only — the server chokepoint stays the real boundary,\n  // and a permission-hidden view is still reachable by URL (EC-221).\n  const role = useProjectRole(projectId)\n  const navCtx: NavPermissionContext = { project, role }\n  const isVisible = (view: ResolvedRailView) => isNavViewVisible(view, navCtx)\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(\n            (view) => view.availability !== 'unavailable' && isVisible(view),\n          )\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. EC-240: a\n        // permission-hidden view is likewise absent-but-addressable.\n        if (node.availability === 'unavailable' || !isVisible(node)) 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?.filter(isVisible).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"]}
+{"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 { translate } from '@elytracms/studio/lib/i18n'\nimport { Text } from '@elytracms/studio/ui'\nimport { activeViewIdFromPath, isNavViewVisible, useStudioNav } from './app-views/sidebar'\nimport type { ResolvedRailView } from './app-views/sidebar'\nimport { useFieldRenderers } from './cms/field-renderer'\nimport { useProjectRole } from './auth-context'\nimport type { NavPermissionContext } from './app-views/module'\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-240 (AD-18): per-nav-item, default-open permission gating. The signed-in\n  // user's role drives an OPTIONAL `visible` predicate on any view; absent →\n  // visible. UI reflection only — the server chokepoint stays the real boundary,\n  // and a permission-hidden view is still reachable by URL (EC-221).\n  const role = useProjectRole(projectId)\n  const navCtx: NavPermissionContext = { project, role }\n  const isVisible = (view: ResolvedRailView) => isNavViewVisible(view, navCtx)\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={translate('shell.nav.label')}\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(\n            (view) => view.availability !== 'unavailable' && isVisible(view),\n          )\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. EC-240: a\n        // permission-hidden view is likewise absent-but-addressable.\n        if (node.availability === 'unavailable' || !isVisible(node)) 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?.filter(isVisible).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 ? translate('shell.sidebar.expand') : translate('shell.sidebar.collapse')}\n          aria-pressed={collapsed}\n          title={collapsed ? translate('shell.sidebar.expand') : translate('shell.sidebar.collapse')}\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\">{translate('shell.sidebar.collapseLabel')}</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={translate('shell.nav.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={translate(expanded ? 'shell.nav.collapseView' : 'shell.nav.expandView', {\n          name: view.label,\n        })}\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={translate('shell.nav.issuesCount', { count: issues.length })} />\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/components/section-state.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleAlert, Clock, Inbox, Loader2, Lock } from 'lucide-react';
 import { Badge, Heading, Stack, Text } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
+import { translate } from '@elytracms/studio/lib/i18n';
 /**
  * Resolve the runtime state of a section (brief §8.1, §11). A `forced` value
  * (e.g. from a `?state=` param) wins, making every state reachable
@@ -16,38 +17,14 @@ export function resolveSectionState(availability, forced) {
         return 'unavailable';
     return 'working';
 }
+// Structural (icon/variant) only; the title/description/badge copy is resolved at
+// the render site via `translate` so it reflects the active UI locale (EC-241).
 const PRESETS = {
-    empty: {
-        icon: Inbox,
-        title: 'Nothing here yet',
-        description: 'This section has no content for the active project.',
-        badge: { label: 'empty', variant: 'outline' },
-    },
-    loading: {
-        icon: Loader2,
-        title: 'Loading…',
-        description: 'Fetching the latest state for this section.',
-        badge: { label: 'loading', variant: 'info' },
-        spin: true,
-    },
-    error: {
-        icon: CircleAlert,
-        title: 'Something went wrong',
-        description: 'This section could not be loaded. Try again in a moment.',
-        badge: { label: 'error', variant: 'error' },
-    },
-    unavailable: {
-        icon: Lock,
-        title: 'Not available',
-        description: 'This section is not available for the active project.',
-        badge: { label: 'unavailable', variant: 'outline' },
-    },
-    planned: {
-        icon: Clock,
-        title: 'Planned',
-        description: 'This surface is planned and not yet enabled for this project.',
-        badge: { label: 'planned', variant: 'warning' },
-    },
+    empty: { icon: Inbox, badgeVariant: 'outline' },
+    loading: { icon: Loader2, badgeVariant: 'info', spin: true },
+    error: { icon: CircleAlert, badgeVariant: 'error' },
+    unavailable: { icon: Lock, badgeVariant: 'outline' },
+    planned: { icon: Clock, badgeVariant: 'warning' },
 };
 /** Loading uses a skeleton; the rest use a centered placeholder. Consistent across sections. */
 export function SectionStateView({ state, title, description, action, className, }) {
@@ -55,12 +32,16 @@ export function SectionStateView({ state, title, description, action, className,
         return _jsx(SectionSkeleton, { className: className });
     const preset = PRESETS[state];
     const Icon = preset.icon;
+    // `state` is narrowed to a non-loading state here, so each has a title/description/badge key.
+    const presetTitle = translate(`shell.sectionState.${state}.title`);
+    const presetDescription = translate(`shell.sectionState.${state}.description`);
+    const badgeLabel = translate(`shell.sectionState.badge.${state}`);
     const tone = state === 'error'
         ? 'border-destructive/30 bg-destructive/5'
         : state === 'planned'
             ? 'border-warning/30 bg-warning/5'
             : 'border-border bg-card/40';
-    return (_jsx("div", { "data-section-state": state, className: cn('grid min-h-[18rem] place-items-center p-8', className), children: _jsxs(Stack, { gap: "3", align: "center", className: cn('max-w-sm rounded-xl border border-dashed px-8 py-10 text-center', tone), children: [_jsx("span", { className: "grid size-11 place-items-center rounded-lg border border-border bg-background text-muted-foreground", children: _jsx(Icon, { className: "size-5" }) }), _jsxs(Stack, { gap: "1", align: "center", children: [_jsx(Heading, { level: 2, size: "h3", children: title ?? preset.title }), _jsx(Text, { size: "sm", tone: "muted", children: description ?? preset.description })] }), _jsx(Badge, { variant: preset.badge.variant, children: preset.badge.label }), action ? _jsx("div", { className: "pt-1", children: action }) : null] }) }));
+    return (_jsx("div", { "data-section-state": state, className: cn('grid min-h-[18rem] place-items-center p-8', className), children: _jsxs(Stack, { gap: "3", align: "center", className: cn('max-w-sm rounded-xl border border-dashed px-8 py-10 text-center', tone), children: [_jsx("span", { className: "grid size-11 place-items-center rounded-lg border border-border bg-background text-muted-foreground", children: _jsx(Icon, { className: "size-5" }) }), _jsxs(Stack, { gap: "1", align: "center", children: [_jsx(Heading, { level: 2, size: "h3", children: title ?? presetTitle }), _jsx(Text, { size: "sm", tone: "muted", children: description ?? presetDescription })] }), _jsx(Badge, { variant: preset.badgeVariant, children: badgeLabel }), action ? _jsx("div", { className: "pt-1", children: action }) : null] }) }));
 }
 /** Shimmer skeleton standing in for an in-flight section load. */
 export function SectionSkeleton({ className }) {

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

@@ -1 +1 @@
-{"version":3,"file":"section-state.js","sourceRoot":"","sources":["../../src/components/section-state.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CircleAlert, Clock, Inbox, Loader2, Lock, type LucideIcon } from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport type { SectionAvailability, SectionState } from '@elytracms/core/studio-core'\nimport { Badge, Heading, Stack, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\n\n/**\n * Resolve the runtime state of a section (brief §8.1, §11). A `forced` value\n * (e.g. from a `?state=` param) wins, making every state reachable\n * deterministically; otherwise availability decides.\n */\nexport function resolveSectionState(\n  availability: SectionAvailability,\n  forced?: SectionState | null,\n): SectionState {\n  if (forced) return forced\n  if (availability === 'planned') return 'planned'\n  if (availability === 'unavailable') return 'unavailable'\n  return 'working'\n}\n\ninterface StatePreset {\n  icon: LucideIcon\n  title: string\n  description: string\n  badge: { label: string; variant: 'outline' | 'warning' | 'error' | 'info' }\n  spin?: boolean\n}\n\nconst PRESETS: Record<Exclude<SectionState, 'working'>, StatePreset> = {\n  empty: {\n    icon: Inbox,\n    title: 'Nothing here yet',\n    description: 'This section has no content for the active project.',\n    badge: { label: 'empty', variant: 'outline' },\n  },\n  loading: {\n    icon: Loader2,\n    title: 'Loading…',\n    description: 'Fetching the latest state for this section.',\n    badge: { label: 'loading', variant: 'info' },\n    spin: true,\n  },\n  error: {\n    icon: CircleAlert,\n    title: 'Something went wrong',\n    description: 'This section could not be loaded. Try again in a moment.',\n    badge: { label: 'error', variant: 'error' },\n  },\n  unavailable: {\n    icon: Lock,\n    title: 'Not available',\n    description: 'This section is not available for the active project.',\n    badge: { label: 'unavailable', variant: 'outline' },\n  },\n  planned: {\n    icon: Clock,\n    title: 'Planned',\n    description: 'This surface is planned and not yet enabled for this project.',\n    badge: { label: 'planned', variant: 'warning' },\n  },\n}\n\nexport interface SectionStateViewProps {\n  state: Exclude<SectionState, 'working'>\n  /** Section-specific heading, e.g. \"CMS\" — overrides the generic preset title. */\n  title?: string\n  description?: ReactNode\n  action?: ReactNode\n  className?: string\n}\n\n/** Loading uses a skeleton; the rest use a centered placeholder. Consistent across sections. */\nexport function SectionStateView({\n  state,\n  title,\n  description,\n  action,\n  className,\n}: SectionStateViewProps) {\n  if (state === 'loading') return <SectionSkeleton className={className} />\n\n  const preset = PRESETS[state]\n  const Icon = preset.icon\n  const tone =\n    state === 'error'\n      ? 'border-destructive/30 bg-destructive/5'\n      : state === 'planned'\n        ? 'border-warning/30 bg-warning/5'\n        : 'border-border bg-card/40'\n\n  return (\n    <div\n      data-section-state={state}\n      className={cn('grid min-h-[18rem] place-items-center p-8', className)}\n    >\n      <Stack\n        gap=\"3\"\n        align=\"center\"\n        className={cn('max-w-sm rounded-xl border border-dashed px-8 py-10 text-center', tone)}\n      >\n        <span className=\"grid size-11 place-items-center rounded-lg border border-border bg-background text-muted-foreground\">\n          <Icon className=\"size-5\" />\n        </span>\n        <Stack gap=\"1\" align=\"center\">\n          <Heading level={2} size=\"h3\">\n            {title ?? preset.title}\n          </Heading>\n          <Text size=\"sm\" tone=\"muted\">\n            {description ?? preset.description}\n          </Text>\n        </Stack>\n        <Badge variant={preset.badge.variant}>{preset.badge.label}</Badge>\n        {action ? <div className=\"pt-1\">{action}</div> : null}\n      </Stack>\n    </div>\n  )\n}\n\n/** Shimmer skeleton standing in for an in-flight section load. */\nexport function SectionSkeleton({ className }: { className?: string }) {\n  return (\n    <div data-section-state=\"loading\" className={cn('space-y-4 p-6', className)} aria-busy>\n      <div className=\"h-7 w-48 animate-pulse rounded-md bg-muted\" />\n      <div className=\"grid gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n        {Array.from({ length: 6 }).map((_, i) => (\n          <div key={i} className=\"h-28 animate-pulse rounded-xl bg-muted/70\" />\n        ))}\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"section-state.js","sourceRoot":"","sources":["../../src/components/section-state.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CircleAlert, Clock, Inbox, Loader2, Lock, type LucideIcon } from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport type { SectionAvailability, SectionState } from '@elytracms/core/studio-core'\nimport { Badge, Heading, Stack, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { translate } from '@elytracms/studio/lib/i18n'\n\n/**\n * Resolve the runtime state of a section (brief §8.1, §11). A `forced` value\n * (e.g. from a `?state=` param) wins, making every state reachable\n * deterministically; otherwise availability decides.\n */\nexport function resolveSectionState(\n  availability: SectionAvailability,\n  forced?: SectionState | null,\n): SectionState {\n  if (forced) return forced\n  if (availability === 'planned') return 'planned'\n  if (availability === 'unavailable') return 'unavailable'\n  return 'working'\n}\n\ninterface StatePreset {\n  icon: LucideIcon\n  badgeVariant: 'outline' | 'warning' | 'error' | 'info'\n  spin?: boolean\n}\n\n// Structural (icon/variant) only; the title/description/badge copy is resolved at\n// the render site via `translate` so it reflects the active UI locale (EC-241).\nconst PRESETS: Record<Exclude<SectionState, 'working'>, StatePreset> = {\n  empty: { icon: Inbox, badgeVariant: 'outline' },\n  loading: { icon: Loader2, badgeVariant: 'info', spin: true },\n  error: { icon: CircleAlert, badgeVariant: 'error' },\n  unavailable: { icon: Lock, badgeVariant: 'outline' },\n  planned: { icon: Clock, badgeVariant: 'warning' },\n}\n\nexport interface SectionStateViewProps {\n  state: Exclude<SectionState, 'working'>\n  /** Section-specific heading, e.g. \"CMS\" — overrides the generic preset title. */\n  title?: string\n  description?: ReactNode\n  action?: ReactNode\n  className?: string\n}\n\n/** Loading uses a skeleton; the rest use a centered placeholder. Consistent across sections. */\nexport function SectionStateView({\n  state,\n  title,\n  description,\n  action,\n  className,\n}: SectionStateViewProps) {\n  if (state === 'loading') return <SectionSkeleton className={className} />\n\n  const preset = PRESETS[state]\n  const Icon = preset.icon\n  // `state` is narrowed to a non-loading state here, so each has a title/description/badge key.\n  const presetTitle = translate(`shell.sectionState.${state}.title`)\n  const presetDescription = translate(`shell.sectionState.${state}.description`)\n  const badgeLabel = translate(`shell.sectionState.badge.${state}`)\n  const tone =\n    state === 'error'\n      ? 'border-destructive/30 bg-destructive/5'\n      : state === 'planned'\n        ? 'border-warning/30 bg-warning/5'\n        : 'border-border bg-card/40'\n\n  return (\n    <div\n      data-section-state={state}\n      className={cn('grid min-h-[18rem] place-items-center p-8', className)}\n    >\n      <Stack\n        gap=\"3\"\n        align=\"center\"\n        className={cn('max-w-sm rounded-xl border border-dashed px-8 py-10 text-center', tone)}\n      >\n        <span className=\"grid size-11 place-items-center rounded-lg border border-border bg-background text-muted-foreground\">\n          <Icon className=\"size-5\" />\n        </span>\n        <Stack gap=\"1\" align=\"center\">\n          <Heading level={2} size=\"h3\">\n            {title ?? presetTitle}\n          </Heading>\n          <Text size=\"sm\" tone=\"muted\">\n            {description ?? presetDescription}\n          </Text>\n        </Stack>\n        <Badge variant={preset.badgeVariant}>{badgeLabel}</Badge>\n        {action ? <div className=\"pt-1\">{action}</div> : null}\n      </Stack>\n    </div>\n  )\n}\n\n/** Shimmer skeleton standing in for an in-flight section load. */\nexport function SectionSkeleton({ className }: { className?: string }) {\n  return (\n    <div data-section-state=\"loading\" className={cn('space-y-4 p-6', className)} aria-busy>\n      <div className=\"h-7 w-48 animate-pulse rounded-md bg-muted\" />\n      <div className=\"grid gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n        {Array.from({ length: 6 }).map((_, i) => (\n          <div key={i} className=\"h-28 animate-pulse rounded-xl bg-muted/70\" />\n        ))}\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/components/settings-form.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Code, Panel, PanelHeader, Row, Spacer, Stack, Text } from '@elytracms/studio/ui';
 import { exportTargetLabel } from '@elytracms/studio/lib/persona/labels';
+import { translate } from '@elytracms/studio/lib/i18n';
 /**
  * Project settings — read-only (vision AD-8). Identity, locales, and
  * environments are owned by `elytra.config.ts` and read at runtime; the studio
@@ -9,7 +10,7 @@ import { exportTargetLabel } from '@elytracms/studio/lib/persona/labels';
  */
 export function SettingsForm({ project }) {
     const { settings } = project;
-    return (_jsx("div", { className: "mx-auto w-full max-w-3xl p-4 sm:p-6", children: _jsxs(Stack, { gap: "6", children: [_jsxs(Text, { size: "sm", tone: "muted", children: ["Project identity and settings are defined in code \u2014 ", _jsx(Code, { tone: "muted", children: "elytra.config.ts" }), ". Edit that file to change the name, locales, or environments; the studio reads them at runtime."] }), _jsxs(Panel, { children: [_jsx(PanelHeader, { children: _jsx(Text, { size: "sm", weight: "semibold", children: "Identity" }) }), _jsxs(Stack, { gap: "3", className: "p-4", children: [_jsx(ReadField, { label: "Name", children: _jsx(Text, { size: "sm", children: project.name }) }), _jsx(ReadField, { label: "URL key", children: _jsx(Code, { tone: "muted", children: project.slug }) })] })] }), _jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Locales" }), _jsx(Spacer, {}), _jsxs(Text, { size: "xs", tone: "muted", mono: true, children: [settings.locales.length, " configured"] })] }), _jsx(Stack, { gap: "3", className: "p-4", children: _jsx(ReadField, { label: "Configured locales", children: _jsx(Row, { gap: "2", wrap: true, children: settings.locales.map((locale) => (_jsxs(Badge, { variant: locale === settings.defaultLocale ? 'primary' : 'outline', children: [locale, locale === settings.defaultLocale ? ' · default' : ''] }, locale))) }) }) })] }), _jsxs(Panel, { children: [_jsx(PanelHeader, { children: _jsx(Text, { size: "sm", weight: "semibold", children: "Environments & export" }) }), _jsxs(Stack, { gap: "3", className: "p-4", children: [_jsx(ReadField, { label: "Environments", children: _jsx(Stack, { gap: "2", children: settings.environments.map((env) => (_jsx(Row, { gap: "2", className: "rounded-md border border-border px-3 py-2", title: env.key, children: _jsx(Text, { size: "sm", children: env.label }) }, env.key))) }) }), _jsx(ReadField, { label: "Export target", children: _jsx(Text, { size: "sm", children: exportTargetLabel(settings.exportTarget) }) })] })] })] }) }));
+    return (_jsx("div", { className: "mx-auto w-full max-w-3xl p-4 sm:p-6", children: _jsxs(Stack, { gap: "6", children: [_jsxs(Text, { size: "sm", tone: "muted", children: ["Project identity and settings are defined in code \u2014 ", _jsx(Code, { tone: "muted", children: "elytra.config.ts" }), ". Edit that file to change the name, locales, or environments; the studio reads them at runtime."] }), _jsxs(Panel, { children: [_jsx(PanelHeader, { children: _jsx(Text, { size: "sm", weight: "semibold", children: translate('settings.identity.title') }) }), _jsxs(Stack, { gap: "3", className: "p-4", children: [_jsx(ReadField, { label: translate('settings.identity.name'), children: _jsx(Text, { size: "sm", children: project.name }) }), _jsx(ReadField, { label: translate('settings.identity.urlKey'), children: _jsx(Code, { tone: "muted", children: project.slug }) })] })] }), _jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Text, { size: "sm", weight: "semibold", children: translate('settings.locales.title') }), _jsx(Spacer, {}), _jsx(Text, { size: "xs", tone: "muted", mono: true, children: translate('settings.locales.configuredCount', { count: settings.locales.length }) })] }), _jsx(Stack, { gap: "3", className: "p-4", children: _jsx(ReadField, { label: translate('settings.locales.configured'), children: _jsx(Row, { gap: "2", wrap: true, children: settings.locales.map((locale) => (_jsxs(Badge, { variant: locale === settings.defaultLocale ? 'primary' : 'outline', children: [locale, locale === settings.defaultLocale ? translate('settings.locales.defaultSuffix') : ''] }, locale))) }) }) })] }), _jsxs(Panel, { children: [_jsx(PanelHeader, { children: _jsx(Text, { size: "sm", weight: "semibold", children: translate('settings.environments.title') }) }), _jsxs(Stack, { gap: "3", className: "p-4", children: [_jsx(ReadField, { label: translate('settings.environments.label'), children: _jsx(Stack, { gap: "2", children: settings.environments.map((env) => (_jsx(Row, { gap: "2", className: "rounded-md border border-border px-3 py-2", title: env.key, children: _jsx(Text, { size: "sm", children: env.label }) }, env.key))) }) }), _jsx(ReadField, { label: translate('settings.exportTarget'), children: _jsx(Text, { size: "sm", children: exportTargetLabel(settings.exportTarget) }) })] })] })] }) }));
 }
 function ReadField({ label, children }) {
     return (_jsxs(Stack, { gap: "1", children: [_jsx(Text, { size: "xs", tone: "muted", weight: "medium", children: label }), children] }));

package/dist/components/settings-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-form.js","sourceRoot":"","sources":["../../src/components/settings-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react'\nimport type { Project } from '@elytracms/core/studio-core'\nimport { Badge, Code, Panel, PanelHeader, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { exportTargetLabel } from '@elytracms/studio/lib/persona/labels'\n\n/**\n * Project settings — read-only (vision AD-8). Identity, locales, and\n * environments are owned by `elytra.config.ts` and read at runtime; the studio\n * never writes them back. This surface displays the resolved config so editors\n * can see how the project is wired without exposing a (fake) edit path.\n */\nexport function SettingsForm({ project }: { project: Project }) {\n  const { settings } = project\n  return (\n    <div className=\"mx-auto w-full max-w-3xl p-4 sm:p-6\">\n      <Stack gap=\"6\">\n        <Text size=\"sm\" tone=\"muted\">\n          Project identity and settings are defined in code — <Code tone=\"muted\">elytra.config.ts</Code>\n          . Edit that file to change the name, locales, or environments; the studio reads them at\n          runtime.\n        </Text>\n\n        <Panel>\n          <PanelHeader>\n            <Text size=\"sm\" weight=\"semibold\">\n              Identity\n            </Text>\n          </PanelHeader>\n          <Stack gap=\"3\" className=\"p-4\">\n            <ReadField label=\"Name\">\n              <Text size=\"sm\">{project.name}</Text>\n            </ReadField>\n            <ReadField label=\"URL key\">\n              <Code tone=\"muted\">{project.slug}</Code>\n            </ReadField>\n          </Stack>\n        </Panel>\n\n        <Panel>\n          <PanelHeader>\n            <Text size=\"sm\" weight=\"semibold\">\n              Locales\n            </Text>\n            <Spacer />\n            <Text size=\"xs\" tone=\"muted\" mono>\n              {settings.locales.length} configured\n            </Text>\n          </PanelHeader>\n          <Stack gap=\"3\" className=\"p-4\">\n            <ReadField label=\"Configured locales\">\n              <Row gap=\"2\" wrap>\n                {settings.locales.map((locale) => (\n                  <Badge\n                    key={locale}\n                    variant={locale === settings.defaultLocale ? 'primary' : 'outline'}\n                  >\n                    {locale}\n                    {locale === settings.defaultLocale ? ' · default' : ''}\n                  </Badge>\n                ))}\n              </Row>\n            </ReadField>\n          </Stack>\n        </Panel>\n\n        <Panel>\n          <PanelHeader>\n            <Text size=\"sm\" weight=\"semibold\">\n              Environments & export\n            </Text>\n          </PanelHeader>\n          <Stack gap=\"3\" className=\"p-4\">\n            <ReadField label=\"Environments\">\n              <Stack gap=\"2\">\n                {settings.environments.map((env) => (\n                  <Row\n                    key={env.key}\n                    gap=\"2\"\n                    className=\"rounded-md border border-border px-3 py-2\"\n                    title={env.key}\n                  >\n                    <Text size=\"sm\">{env.label}</Text>\n                  </Row>\n                ))}\n              </Stack>\n            </ReadField>\n            <ReadField label=\"Export target\">\n              <Text size=\"sm\">{exportTargetLabel(settings.exportTarget)}</Text>\n            </ReadField>\n          </Stack>\n        </Panel>\n      </Stack>\n    </div>\n  )\n}\n\nfunction ReadField({ label, children }: { label: string; children: ReactNode }) {\n  return (\n    <Stack gap=\"1\">\n      <Text size=\"xs\" tone=\"muted\" weight=\"medium\">\n        {label}\n      </Text>\n      {children}\n    </Stack>\n  )\n}\n"]}
+{"version":3,"file":"settings-form.js","sourceRoot":"","sources":["../../src/components/settings-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react'\nimport type { Project } from '@elytracms/core/studio-core'\nimport { Badge, Code, Panel, PanelHeader, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { exportTargetLabel } from '@elytracms/studio/lib/persona/labels'\nimport { translate } from '@elytracms/studio/lib/i18n'\n\n/**\n * Project settings — read-only (vision AD-8). Identity, locales, and\n * environments are owned by `elytra.config.ts` and read at runtime; the studio\n * never writes them back. This surface displays the resolved config so editors\n * can see how the project is wired without exposing a (fake) edit path.\n */\nexport function SettingsForm({ project }: { project: Project }) {\n  const { settings } = project\n  return (\n    <div className=\"mx-auto w-full max-w-3xl p-4 sm:p-6\">\n      <Stack gap=\"6\">\n        <Text size=\"sm\" tone=\"muted\">\n          Project identity and settings are defined in code — <Code tone=\"muted\">elytra.config.ts</Code>\n          . Edit that file to change the name, locales, or environments; the studio reads them at\n          runtime.\n        </Text>\n\n        <Panel>\n          <PanelHeader>\n            <Text size=\"sm\" weight=\"semibold\">\n              {translate('settings.identity.title')}\n            </Text>\n          </PanelHeader>\n          <Stack gap=\"3\" className=\"p-4\">\n            <ReadField label={translate('settings.identity.name')}>\n              <Text size=\"sm\">{project.name}</Text>\n            </ReadField>\n            <ReadField label={translate('settings.identity.urlKey')}>\n              <Code tone=\"muted\">{project.slug}</Code>\n            </ReadField>\n          </Stack>\n        </Panel>\n\n        <Panel>\n          <PanelHeader>\n            <Text size=\"sm\" weight=\"semibold\">\n              {translate('settings.locales.title')}\n            </Text>\n            <Spacer />\n            <Text size=\"xs\" tone=\"muted\" mono>\n              {translate('settings.locales.configuredCount', { count: settings.locales.length })}\n            </Text>\n          </PanelHeader>\n          <Stack gap=\"3\" className=\"p-4\">\n            <ReadField label={translate('settings.locales.configured')}>\n              <Row gap=\"2\" wrap>\n                {settings.locales.map((locale) => (\n                  <Badge\n                    key={locale}\n                    variant={locale === settings.defaultLocale ? 'primary' : 'outline'}\n                  >\n                    {locale}\n                    {locale === settings.defaultLocale ? translate('settings.locales.defaultSuffix') : ''}\n                  </Badge>\n                ))}\n              </Row>\n            </ReadField>\n          </Stack>\n        </Panel>\n\n        <Panel>\n          <PanelHeader>\n            <Text size=\"sm\" weight=\"semibold\">\n              {translate('settings.environments.title')}\n            </Text>\n          </PanelHeader>\n          <Stack gap=\"3\" className=\"p-4\">\n            <ReadField label={translate('settings.environments.label')}>\n              <Stack gap=\"2\">\n                {settings.environments.map((env) => (\n                  <Row\n                    key={env.key}\n                    gap=\"2\"\n                    className=\"rounded-md border border-border px-3 py-2\"\n                    title={env.key}\n                  >\n                    <Text size=\"sm\">{env.label}</Text>\n                  </Row>\n                ))}\n              </Stack>\n            </ReadField>\n            <ReadField label={translate('settings.exportTarget')}>\n              <Text size=\"sm\">{exportTargetLabel(settings.exportTarget)}</Text>\n            </ReadField>\n          </Stack>\n        </Panel>\n      </Stack>\n    </div>\n  )\n}\n\nfunction ReadField({ label, children }: { label: string; children: ReactNode }) {\n  return (\n    <Stack gap=\"1\">\n      <Text size=\"xs\" tone=\"muted\" weight=\"medium\">\n        {label}\n      </Text>\n      {children}\n    </Stack>\n  )\n}\n"]}

package/dist/components/studio-project-screen.js

@@ -5,6 +5,7 @@ import { matchStudioRoute } from '@elytracms/studio/router/match';
 import { studioSearch } from '@elytracms/studio/router/search';
 import { Button, Heading, Stack, Text } from '@elytracms/studio/ui';
 import { DataProvider } from '@elytracms/studio/lib/data';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { useStudio } from './studio-context';
 import { StudioShell } from './studio-shell';
 import { AssetsProvider } from './assets/assets-store';
@@ -95,9 +96,9 @@ function StudioSectionResolver({ project, match, search, }) {
     return _jsx(_Fragment, { children: view.render({ project, projectId, deepLink, search }) });
 }
 function ProjectNotFound() {
-    return (_jsx("div", { className: "grid min-h-dvh place-items-center p-8", children: _jsxs(Stack, { gap: "3", align: "center", className: "max-w-sm text-center", children: [_jsx(Heading, { size: "display", children: "Project not found" }), _jsx(Text, { tone: "muted", children: "This project doesn\u2019t exist or was deleted. It may only have existed in this session." }), _jsx(Button, { asChild: true, children: _jsx(Link, { to: "/", children: "Back to projects" }) })] }) }));
+    return (_jsx("div", { className: "grid min-h-dvh place-items-center p-8", children: _jsxs(Stack, { gap: "3", align: "center", className: "max-w-sm text-center", children: [_jsx(Heading, { size: "display", children: translate('shell.projectNotFound.title') }), _jsx(Text, { tone: "muted", children: translate('shell.projectNotFound.body') }), _jsx(Button, { asChild: true, children: _jsx(Link, { to: "/", children: translate('shell.backToProjects') }) })] }) }));
 }
 function StudioRouteNotFound() {
-    return (_jsx("div", { className: "grid h-full place-items-center p-8", children: _jsxs(Stack, { gap: "2", align: "center", className: "max-w-sm text-center", children: [_jsx(Heading, { level: 2, size: "h2", children: "Page not found" }), _jsx(Text, { tone: "muted", children: "This studio URL doesn\u2019t resolve to a section." })] }) }));
+    return (_jsx("div", { className: "grid h-full place-items-center p-8", children: _jsxs(Stack, { gap: "2", align: "center", className: "max-w-sm text-center", children: [_jsx(Heading, { level: 2, size: "h2", children: translate('shell.routeNotFound.title') }), _jsx(Text, { tone: "muted", children: translate('shell.routeNotFound.body') })] }) }));
 }
 //# sourceMappingURL=studio-project-screen.js.map

package/dist/components/studio-project-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"studio-project-screen.js","sourceRoot":"","sources":["../../src/components/studio-project-screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from 'react'\nimport type { ReactNode } from 'react'\nimport type { Project } from '@elytracms/core/studio-core'\nimport { Link, Navigate, STUDIO_PROJECT_ROUTE, useParams, useSearch } from '@elytracms/studio/router'\nimport { matchStudioRoute } from '@elytracms/studio/router/match'\nimport type { StudioRouteMatch } from '@elytracms/studio/router/match'\nimport { studioSearch } from '@elytracms/studio/router/search'\nimport type { StudioSearch } from '@elytracms/studio/router/search'\nimport { Button, Heading, Stack, Text } from '@elytracms/studio/ui'\nimport { DataProvider } from '@elytracms/studio/lib/data'\nimport { useStudio } from './studio-context'\nimport { StudioShell } from './studio-shell'\nimport { AssetsProvider } from './assets/assets-store'\nimport { CollabProvider } from './collab/collab-context'\nimport { ProjectSessionProvider } from './project-session'\nimport { flatPath } from './app-views/module'\nimport { landingViewId, useStudioNav } from './app-views/sidebar'\n\n/**\n * EC-223 Stage 6 (catch-all routing): the studio's per-project route component.\n *\n * The consumer mounts ONE splat route (`/$projectId/$`) whose component is this.\n * Everything that was a per-project file route — the provider stack, the section\n * rail shell, and every section screen — now lives inside the package and is\n * resolved here from the URL. The consumer's route tree shrinks to a single\n * ~10-line mount, which is the whole point of Stage 6: the engine owns its\n * navigation, so an external repo consumes the studio without rebuilding a route\n * file per screen.\n *\n * `projectId` stays a real route param (the `$projectId` segment); the trailing\n * pathname (`_splat`) is matched against the engine route table\n * (`matchStudioRoute`) into a module id + segments, and the active module (EC-239)\n * resolves the screen. Every surface already takes its ids as props, so the\n * resolver just hands the module its parsed deep-link.\n */\nexport function StudioProjectScreen() {\n  const params = useParams({ strict: false }) as { projectId?: string; _splat?: string }\n  // The route's VALIDATED search (the splat's `validateSearch: studioSearch`).\n  // Read it through `useSearch`, not `useLocation().search`: the validated search\n  // is resolved at route-match time and stable from the component's first render,\n  // whereas `location.search` can lag a tick during hydration — long enough for a\n  // child `<Navigate>` (the builder redirect) to fire on a momentarily-empty\n  // search and drop its `?page=` deep-link target.\n  const rawSearch = useSearch({ strict: false }) as Record<string, unknown>\n  const studio = useStudio()\n  const projectId = params.projectId ?? ''\n  const project = studio.getProject(projectId)\n\n  // Record the active project once it resolves (preserves recents across sections).\n  useEffect(() => {\n    if (project) studio.activate(project.id)\n  }, [project, studio])\n\n  if (!project) return <ProjectNotFound />\n\n  const match = matchStudioRoute(params._splat ?? '')\n  const search = studioSearch(rawSearch)\n\n  return (\n    <StudioShell project={project}>\n      {/* EC-177 gap 1: in Convex mode the session HYDRATES from persistence\n          before any provider mounts — the builder boots from the latest\n          persisted revision, publishing reflects the persisted state, and the\n          preview content engine serves live documents. Playground renders\n          synchronously from fixtures (session: null), exactly as before. */}\n      <ProjectSessionProvider key={project.id} projectId={project.id}>\n        <ProjectProviders project={project}>\n          <StudioSectionResolver project={project} match={match} search={search} />\n        </ProjectProviders>\n      </ProjectSessionProvider>\n    </StudioShell>\n  )\n}\n\n/**\n * The per-project provider stack, mounted once the session source is known.\n *\n * EC-287: there is no project-level builder graph anymore — layouts are code and\n * the DB holds content only. The block-field canvas mounts its OWN scoped\n * `BuilderProvider` per document (`composition-field-editor`), so no graph is\n * threaded here. `CollabProvider` stays as the canvas's session-scoped\n * presence/perspective store, seeded graph-lessly.\n */\nfunction ProjectProviders({ project, children }: { project: Project; children: ReactNode }) {\n  return (\n    // Key by project id so the session data sources reset when switching projects.\n    // The data store hydrates/persists this project's `cms-data-sources` records.\n    <DataProvider key={project.id} projectId={project.id}>\n      {/* EC-195: project-level so the canvas resolves `asset`-typed Image props\n          and the inspector picks from the live library — not just the Assets\n          section. Asset METADATA only (small); blobs stay lazy. */}\n      <AssetsProvider key={project.id} projectId={project.id}>\n        <CollabProvider key={project.id} projectId={project.id}>\n          {children}\n        </CollabProvider>\n      </AssetsProvider>\n    </DataProvider>\n  )\n}\n\n/**\n * The URL→screen switch (EC-223 Stage 6), driven by the view registry DERIVED from\n * the section rail (EC-237/239). The bare project URL redirects to the first\n * navigable rail view; otherwise the matched view id is resolved from the registry\n * (rail views + always-on built-ins) and its `parsePath` interprets the trailing\n * segments into a deep-link the view renders. An unknown view id or an unparseable\n * path is a not-found; rail CONFIG problems (duplicate/invalid views) surface as\n * visible issues in the shell, never silently. Renders inside the shell + provider\n * stack, so every surface sees the same live CMS store and breadcrumb context.\n */\nfunction StudioSectionResolver({\n  project,\n  match,\n  search,\n}: {\n  project: Project\n  match: StudioRouteMatch\n  search: StudioSearch\n}) {\n  const projectId = project.id\n  const nav = useStudioNav(project)\n\n  if (match.section === 'index') {\n    // Bare `/$projectId` → the project's first navigable rail view.\n    return (\n      <Navigate\n        to={STUDIO_PROJECT_ROUTE}\n        params={{ projectId, _splat: landingViewId(nav, project) }}\n        replace\n      />\n    )\n  }\n\n  const view = nav.registry.get(match.viewId)\n  if (!view) return <StudioRouteNotFound />\n\n  // A flat view (no `parsePath`) accepts only the bare path; a nested one\n  // (CMS/components) interprets its segments. `null` → an over-deep path → not-found.\n  const deepLink = (view.parsePath ?? flatPath)(match.segments)\n  if (deepLink === null) return <StudioRouteNotFound />\n\n  return <>{view.render({ project, projectId, deepLink, search })}</>\n}\n\nfunction ProjectNotFound() {\n  return (\n    <div className=\"grid min-h-dvh place-items-center p-8\">\n      <Stack gap=\"3\" align=\"center\" className=\"max-w-sm text-center\">\n        <Heading size=\"display\">Project not found</Heading>\n        <Text tone=\"muted\">\n          This project doesn’t exist or was deleted. It may only have existed in this session.\n        </Text>\n        <Button asChild>\n          <Link to=\"/\">Back to projects</Link>\n        </Button>\n      </Stack>\n    </div>\n  )\n}\n\nfunction StudioRouteNotFound() {\n  return (\n    <div className=\"grid h-full place-items-center p-8\">\n      <Stack gap=\"2\" align=\"center\" className=\"max-w-sm text-center\">\n        <Heading level={2} size=\"h2\">\n          Page not found\n        </Heading>\n        <Text tone=\"muted\">This studio URL doesn’t resolve to a section.</Text>\n      </Stack>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"studio-project-screen.js","sourceRoot":"","sources":["../../src/components/studio-project-screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from 'react'\nimport type { ReactNode } from 'react'\nimport type { Project } from '@elytracms/core/studio-core'\nimport { Link, Navigate, STUDIO_PROJECT_ROUTE, useParams, useSearch } from '@elytracms/studio/router'\nimport { matchStudioRoute } from '@elytracms/studio/router/match'\nimport type { StudioRouteMatch } from '@elytracms/studio/router/match'\nimport { studioSearch } from '@elytracms/studio/router/search'\nimport type { StudioSearch } from '@elytracms/studio/router/search'\nimport { Button, Heading, Stack, Text } from '@elytracms/studio/ui'\nimport { DataProvider } from '@elytracms/studio/lib/data'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { useStudio } from './studio-context'\nimport { StudioShell } from './studio-shell'\nimport { AssetsProvider } from './assets/assets-store'\nimport { CollabProvider } from './collab/collab-context'\nimport { ProjectSessionProvider } from './project-session'\nimport { flatPath } from './app-views/module'\nimport { landingViewId, useStudioNav } from './app-views/sidebar'\n\n/**\n * EC-223 Stage 6 (catch-all routing): the studio's per-project route component.\n *\n * The consumer mounts ONE splat route (`/$projectId/$`) whose component is this.\n * Everything that was a per-project file route — the provider stack, the section\n * rail shell, and every section screen — now lives inside the package and is\n * resolved here from the URL. The consumer's route tree shrinks to a single\n * ~10-line mount, which is the whole point of Stage 6: the engine owns its\n * navigation, so an external repo consumes the studio without rebuilding a route\n * file per screen.\n *\n * `projectId` stays a real route param (the `$projectId` segment); the trailing\n * pathname (`_splat`) is matched against the engine route table\n * (`matchStudioRoute`) into a module id + segments, and the active module (EC-239)\n * resolves the screen. Every surface already takes its ids as props, so the\n * resolver just hands the module its parsed deep-link.\n */\nexport function StudioProjectScreen() {\n  const params = useParams({ strict: false }) as { projectId?: string; _splat?: string }\n  // The route's VALIDATED search (the splat's `validateSearch: studioSearch`).\n  // Read it through `useSearch`, not `useLocation().search`: the validated search\n  // is resolved at route-match time and stable from the component's first render,\n  // whereas `location.search` can lag a tick during hydration — long enough for a\n  // child `<Navigate>` (the builder redirect) to fire on a momentarily-empty\n  // search and drop its `?page=` deep-link target.\n  const rawSearch = useSearch({ strict: false }) as Record<string, unknown>\n  const studio = useStudio()\n  const projectId = params.projectId ?? ''\n  const project = studio.getProject(projectId)\n\n  // Record the active project once it resolves (preserves recents across sections).\n  useEffect(() => {\n    if (project) studio.activate(project.id)\n  }, [project, studio])\n\n  if (!project) return <ProjectNotFound />\n\n  const match = matchStudioRoute(params._splat ?? '')\n  const search = studioSearch(rawSearch)\n\n  return (\n    <StudioShell project={project}>\n      {/* EC-177 gap 1: in Convex mode the session HYDRATES from persistence\n          before any provider mounts — the builder boots from the latest\n          persisted revision, publishing reflects the persisted state, and the\n          preview content engine serves live documents. Playground renders\n          synchronously from fixtures (session: null), exactly as before. */}\n      <ProjectSessionProvider key={project.id} projectId={project.id}>\n        <ProjectProviders project={project}>\n          <StudioSectionResolver project={project} match={match} search={search} />\n        </ProjectProviders>\n      </ProjectSessionProvider>\n    </StudioShell>\n  )\n}\n\n/**\n * The per-project provider stack, mounted once the session source is known.\n *\n * EC-287: there is no project-level builder graph anymore — layouts are code and\n * the DB holds content only. The block-field canvas mounts its OWN scoped\n * `BuilderProvider` per document (`composition-field-editor`), so no graph is\n * threaded here. `CollabProvider` stays as the canvas's session-scoped\n * presence/perspective store, seeded graph-lessly.\n */\nfunction ProjectProviders({ project, children }: { project: Project; children: ReactNode }) {\n  return (\n    // Key by project id so the session data sources reset when switching projects.\n    // The data store hydrates/persists this project's `cms-data-sources` records.\n    <DataProvider key={project.id} projectId={project.id}>\n      {/* EC-195: project-level so the canvas resolves `asset`-typed Image props\n          and the inspector picks from the live library — not just the Assets\n          section. Asset METADATA only (small); blobs stay lazy. */}\n      <AssetsProvider key={project.id} projectId={project.id}>\n        <CollabProvider key={project.id} projectId={project.id}>\n          {children}\n        </CollabProvider>\n      </AssetsProvider>\n    </DataProvider>\n  )\n}\n\n/**\n * The URL→screen switch (EC-223 Stage 6), driven by the view registry DERIVED from\n * the section rail (EC-237/239). The bare project URL redirects to the first\n * navigable rail view; otherwise the matched view id is resolved from the registry\n * (rail views + always-on built-ins) and its `parsePath` interprets the trailing\n * segments into a deep-link the view renders. An unknown view id or an unparseable\n * path is a not-found; rail CONFIG problems (duplicate/invalid views) surface as\n * visible issues in the shell, never silently. Renders inside the shell + provider\n * stack, so every surface sees the same live CMS store and breadcrumb context.\n */\nfunction StudioSectionResolver({\n  project,\n  match,\n  search,\n}: {\n  project: Project\n  match: StudioRouteMatch\n  search: StudioSearch\n}) {\n  const projectId = project.id\n  const nav = useStudioNav(project)\n\n  if (match.section === 'index') {\n    // Bare `/$projectId` → the project's first navigable rail view.\n    return (\n      <Navigate\n        to={STUDIO_PROJECT_ROUTE}\n        params={{ projectId, _splat: landingViewId(nav, project) }}\n        replace\n      />\n    )\n  }\n\n  const view = nav.registry.get(match.viewId)\n  if (!view) return <StudioRouteNotFound />\n\n  // A flat view (no `parsePath`) accepts only the bare path; a nested one\n  // (CMS/components) interprets its segments. `null` → an over-deep path → not-found.\n  const deepLink = (view.parsePath ?? flatPath)(match.segments)\n  if (deepLink === null) return <StudioRouteNotFound />\n\n  return <>{view.render({ project, projectId, deepLink, search })}</>\n}\n\nfunction ProjectNotFound() {\n  return (\n    <div className=\"grid min-h-dvh place-items-center p-8\">\n      <Stack gap=\"3\" align=\"center\" className=\"max-w-sm text-center\">\n        <Heading size=\"display\">{translate('shell.projectNotFound.title')}</Heading>\n        <Text tone=\"muted\">{translate('shell.projectNotFound.body')}</Text>\n        <Button asChild>\n          <Link to=\"/\">{translate('shell.backToProjects')}</Link>\n        </Button>\n      </Stack>\n    </div>\n  )\n}\n\nfunction StudioRouteNotFound() {\n  return (\n    <div className=\"grid h-full place-items-center p-8\">\n      <Stack gap=\"2\" align=\"center\" className=\"max-w-sm text-center\">\n        <Heading level={2} size=\"h2\">\n          {translate('shell.routeNotFound.title')}\n        </Heading>\n        <Text tone=\"muted\">{translate('shell.routeNotFound.body')}</Text>\n      </Stack>\n    </div>\n  )\n}\n"]}

package/dist/components/studio-shell.js

@@ -4,6 +4,7 @@ import { ChevronRight } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { Row, Spacer, Toaster } from '@elytracms/studio/ui';
 import { readRailCollapsed, storeRailCollapsed } from '@elytracms/studio/lib/rail';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { CurrentUserMenu } from './current-user-menu';
 import { DeliveryHealthBanner } from './delivery-health-banner';
 import { PlaygroundBadge } from './playground-badge';
@@ -35,7 +36,7 @@ export function StudioShell({ project, children }) {
             return next;
         });
     }, []);
-    return (_jsxs(BreadcrumbProvider, { children: [_jsxs("div", { className: "flex h-dvh flex-col bg-background", children: [_jsxs("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-3", children: [_jsx(Link, { to: "/", className: "grid size-6 shrink-0 place-items-center", "aria-label": "All projects", children: _jsx("span", { className: "size-5 rounded-[5px] bg-primary shadow-sm" }) }), _jsx(ProjectSwitcher, { activeProject: project }), _jsx(HeaderBreadcrumb, { project: project, activeViewId: activeViewId }), _jsx(Spacer, {}), _jsx(PlaygroundBadge, {}), _jsx(DevLoginBadge, {}), _jsx(CurrentUserMenu, { projectId: project.id })] }), _jsx(DeliveryHealthBanner, {}), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx(SectionNav, { project: project, collapsed: railCollapsed, onToggleCollapsed: toggleRail }), _jsx("main", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: children }) })] })] }), _jsx(Toaster, {})] }));
+    return (_jsxs(BreadcrumbProvider, { children: [_jsxs("div", { className: "flex h-dvh flex-col bg-background", children: [_jsxs("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-3", children: [_jsx(Link, { to: "/", className: "grid size-6 shrink-0 place-items-center", "aria-label": translate('shell.allProjects'), children: _jsx("span", { className: "size-5 rounded-[5px] bg-primary shadow-sm" }) }), _jsx(ProjectSwitcher, { activeProject: project }), _jsx(HeaderBreadcrumb, { project: project, activeViewId: activeViewId }), _jsx(Spacer, {}), _jsx(PlaygroundBadge, {}), _jsx(DevLoginBadge, {}), _jsx(CurrentUserMenu, { projectId: project.id })] }), _jsx(DeliveryHealthBanner, {}), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx(SectionNav, { project: project, collapsed: railCollapsed, onToggleCollapsed: toggleRail }), _jsx("main", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: children }) })] })] }), _jsx(Toaster, {})] }));
 }
 const CRUMB_LINK = 'max-w-[12rem] truncate text-muted-foreground transition-colors hover:text-foreground';
 const CRUMB_CURRENT = 'max-w-[16rem] truncate font-medium text-foreground';
@@ -54,7 +55,7 @@ function HeaderBreadcrumb({ project, activeViewId, }) {
     if (!view)
         return null;
     const sectionIsLast = extra.length === 0;
-    return (_jsxs(Row, { gap: "1", className: "min-w-0 text-sm", "aria-label": "Breadcrumb", children: [_jsx(ChevronRight, { className: "size-3.5 shrink-0 text-muted-foreground/50", "aria-hidden": true }), sectionIsLast ? (_jsx("span", { className: CRUMB_CURRENT, children: view.label })) : (_jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: view.id }, className: CRUMB_LINK, children: view.label })), extra.map((item, index) => {
+    return (_jsxs(Row, { gap: "1", className: "min-w-0 text-sm", "aria-label": translate('shell.breadcrumb.label'), children: [_jsx(ChevronRight, { className: "size-3.5 shrink-0 text-muted-foreground/50", "aria-hidden": true }), sectionIsLast ? (_jsx("span", { className: CRUMB_CURRENT, children: view.label })) : (_jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: view.id }, className: CRUMB_LINK, children: view.label })), extra.map((item, index) => {
                 const isLast = index === extra.length - 1;
                 return (_jsxs(Row, { gap: "1", className: "min-w-0", children: [_jsx(ChevronRight, { className: "size-3.5 shrink-0 text-muted-foreground/50", "aria-hidden": true }), !isLast && item.to ? (
                         // `to` and `params` are always contributed as a unit (the type

package/dist/components/studio-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"studio-shell.js","sourceRoot":"","sources":["../../src/components/studio-shell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGxD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACxE,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAO7E;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAoB;IACjE,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAClC,MAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;IAEnD,4EAA4E;IAC5E,6EAA6E;IAC7E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzD,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,iBAAiB,EAAE,CAAC,CAAA;IACvC,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE;YACxB,MAAM,IAAI,GAAG,CAAC,IAAI,CAAA;YAClB,kBAAkB,CAAC,IAAI,CAAC,CAAA;YACxB,OAAO,IAAI,CAAA;QACb,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,MAAC,kBAAkB,eACjB,eAAK,SAAS,EAAC,mCAAmC,aAEhD,kBAAQ,SAAS,EAAC,mEAAmE,aACnF,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,yCAAyC,gBAAY,cAAc,YACxF,eAAM,SAAS,EAAC,2CAA2C,GAAG,GACzD,EACP,KAAC,eAAe,IAAC,aAAa,EAAE,OAAO,GAAI,EAC3C,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,GAAI,EAClE,KAAC,MAAM,KAAG,EAEV,KAAC,eAAe,KAAG,EAEnB,KAAC,aAAa,KAAG,EAEjB,KAAC,eAAe,IAAC,SAAS,EAAE,OAAO,CAAC,EAAE,GAAI,IACnC,EAGT,KAAC,oBAAoB,KAAG,EAExB,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,aAAa,EACxB,iBAAiB,EAAE,UAAU,GAC7B,EAEF,eAAM,SAAS,EAAC,8CAA8C,YAC5D,cAAK,SAAS,EAAC,8BAA8B,YAAE,QAAQ,GAAO,GACzD,IACH,IACF,EAEN,KAAC,OAAO,KAAG,IACQ,CACtB,CAAA;AACH,CAAC;AAED,MAAM,UAAU,GACd,sFAAsF,CAAA;AACxF,MAAM,aAAa,GAAG,oDAAoD,CAAA;AAE1E;;;;;;GAMG;AACH,SAAS,gBAAgB,CAAC,EACxB,OAAO,EACP,YAAY,GAIb;IACC,MAAM,SAAS,GAAc,OAAO,CAAC,EAAE,CAAA;IACvC,MAAM,GAAG,GAAG,YAAY,CAAC,OAAO,CAAC,CAAA;IACjC,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IACtE,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IACtB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,KAAK,CAAC,CAAA;IAExC,OAAO,CACL,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,iBAAiB,gBAAY,YAAY,aAC9D,KAAC,YAAY,IAAC,SAAS,EAAC,4CAA4C,wBAAe,EAClF,aAAa,CAAC,CAAC,CAAC,CACf,eAAM,SAAS,EAAE,aAAa,YAAG,IAAI,CAAC,KAAK,GAAQ,CACpD,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,EAAE,EAAE,oBAAoB,EACxB,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,EACtC,SAAS,EAAE,UAAU,YAEpB,IAAI,CAAC,KAAK,GACN,CACR,EACA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAA;gBACzC,OAAO,CACL,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAgC,SAAS,EAAC,SAAS,aAC7D,KAAC,YAAY,IAAC,SAAS,EAAC,4CAA4C,wBAAe,EAClF,CAAC,MAAM,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;wBACpB,+DAA+D;wBAC/D,oEAAoE;wBACpE,KAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAO,EAAE,SAAS,EAAE,UAAU,YAC3D,IAAI,CAAC,KAAK,GACN,CACR,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,YAAG,IAAI,CAAC,KAAK,GAAQ,CAC1E,KAVe,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,CAWpC,CACP,CAAA;YACH,CAAC,CAAC,IACE,CACP,CAAA;AACH,CAAC","sourcesContent":["import { Link, STUDIO_PROJECT_ROUTE, useLocation } from '@elytracms/studio/router'\nimport { ChevronRight } from 'lucide-react'\nimport { useCallback, useEffect, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport type { Project, ProjectId } from '@elytracms/core/studio-core'\nimport { Row, Spacer, Toaster } from '@elytracms/studio/ui'\nimport { readRailCollapsed, storeRailCollapsed } from '@elytracms/studio/lib/rail'\nimport { CurrentUserMenu } from './current-user-menu'\nimport { DeliveryHealthBanner } from './delivery-health-banner'\nimport { PlaygroundBadge } from './playground-badge'\nimport { DevLoginBadge } from './dev-login-badge'\nimport { ProjectSwitcher } from './project-switcher'\nimport { SectionNav } from './section-nav'\nimport { activeViewIdFromPath, useStudioNav } from './app-views/sidebar'\nimport { BreadcrumbProvider, useBreadcrumbTrail } from './breadcrumb-context'\n\nexport interface StudioShellProps {\n  project: Project\n  children: ReactNode\n}\n\n/**\n * The Studio shell (brief §4.3, §8.1): a persistent top bar + section rail that\n * preserve the active project while the user moves between surfaces. The top bar\n * carries the single global breadcrumb reaching the active record (EC-214) — no\n * secondary band, no per-view title repeating the section. Responsive and\n * overflow-safe.\n */\nexport function StudioShell({ project, children }: StudioShellProps) {\n  const { pathname } = useLocation()\n  const activeViewId = activeViewIdFromPath(pathname)\n\n  // User-toggled, persisted rail collapse (EC-214). Defaults to expanded; the\n  // stored preference is read after mount (no flash script needed for a rail).\n  const [railCollapsed, setRailCollapsed] = useState(false)\n  useEffect(() => {\n    setRailCollapsed(readRailCollapsed())\n  }, [])\n  const toggleRail = useCallback(() => {\n    setRailCollapsed((prev) => {\n      const next = !prev\n      storeRailCollapsed(next)\n      return next\n    })\n  }, [])\n\n  return (\n    <BreadcrumbProvider>\n      <div className=\"flex h-dvh flex-col bg-background\">\n        {/* Top bar — global controls + the one breadcrumb to the active record. */}\n        <header className=\"flex h-12 shrink-0 items-center gap-2 border-b border-border px-3\">\n          <Link to=\"/\" className=\"grid size-6 shrink-0 place-items-center\" aria-label=\"All projects\">\n            <span className=\"size-5 rounded-[5px] bg-primary shadow-sm\" />\n          </Link>\n          <ProjectSwitcher activeProject={project} />\n          <HeaderBreadcrumb project={project} activeViewId={activeViewId} />\n          <Spacer />\n          {/* EC-153: explicit playground-mode marker (renders nothing on Convex). */}\n          <PlaygroundBadge />\n          {/* Dev-only unattended-auth marker (renders nothing in prod / when unset). */}\n          <DevLoginBadge />\n          {/* EC-150: signed-in user + their role on this project + sign-out. */}\n          <CurrentUserMenu projectId={project.id} />\n        </header>\n\n        {/* EC-268: warns when instant-publish env is incomplete (connected mode only). */}\n        <DeliveryHealthBanner />\n\n        <div className=\"flex min-h-0 flex-1\">\n          <SectionNav\n            project={project}\n            collapsed={railCollapsed}\n            onToggleCollapsed={toggleRail}\n          />\n\n          <main className=\"flex min-w-0 flex-1 flex-col overflow-hidden\">\n            <div className=\"min-h-0 flex-1 overflow-auto\">{children}</div>\n          </main>\n        </div>\n      </div>\n      {/* EC-268: transient action feedback (e.g. a publish that fails at transport). */}\n      <Toaster />\n    </BreadcrumbProvider>\n  )\n}\n\nconst CRUMB_LINK =\n  'max-w-[12rem] truncate text-muted-foreground transition-colors hover:text-foreground'\nconst CRUMB_CURRENT = 'max-w-[16rem] truncate font-medium text-foreground'\n\n/**\n * The single global breadcrumb (EC-214): project (the switcher) › section › …the\n * active record. The section crumb is the active VIEW's label (EC-237/239, resolved\n * from the rail-derived registry); deeper crumbs are contributed by the active\n * surface via {@link useBreadcrumbTrail}. The last crumb is the current page (plain\n * text); earlier crumbs link back.\n */\nfunction HeaderBreadcrumb({\n  project,\n  activeViewId,\n}: {\n  project: Project\n  activeViewId: string | null\n}) {\n  const projectId: ProjectId = project.id\n  const nav = useStudioNav(project)\n  const extra = useBreadcrumbTrail()\n  const view = activeViewId ? nav.registry.get(activeViewId) : undefined\n  if (!view) return null\n  const sectionIsLast = extra.length === 0\n\n  return (\n    <Row gap=\"1\" className=\"min-w-0 text-sm\" aria-label=\"Breadcrumb\">\n      <ChevronRight className=\"size-3.5 shrink-0 text-muted-foreground/50\" aria-hidden />\n      {sectionIsLast ? (\n        <span className={CRUMB_CURRENT}>{view.label}</span>\n      ) : (\n        <Link\n          to={STUDIO_PROJECT_ROUTE}\n          params={{ projectId, _splat: view.id }}\n          className={CRUMB_LINK}\n        >\n          {view.label}\n        </Link>\n      )}\n      {extra.map((item, index) => {\n        const isLast = index === extra.length - 1\n        return (\n          <Row gap=\"1\" key={`${item.label}-${index}`} className=\"min-w-0\">\n            <ChevronRight className=\"size-3.5 shrink-0 text-muted-foreground/50\" aria-hidden />\n            {!isLast && item.to ? (\n              // `to` and `params` are always contributed as a unit (the type\n              // pairs them); the assertion satisfies the route's required params.\n              <Link to={item.to} params={item.params!} className={CRUMB_LINK}>\n                {item.label}\n              </Link>\n            ) : (\n              <span className={isLast ? CRUMB_CURRENT : CRUMB_LINK}>{item.label}</span>\n            )}\n          </Row>\n        )\n      })}\n    </Row>\n  )\n}\n"]}
+{"version":3,"file":"studio-shell.js","sourceRoot":"","sources":["../../src/components/studio-shell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Link, STUDIO_PROJECT_ROUTE, useLocation } from '@elytracms/studio/router'\nimport { ChevronRight } from 'lucide-react'\nimport { useCallback, useEffect, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport type { Project, ProjectId } from '@elytracms/core/studio-core'\nimport { Row, Spacer, Toaster } from '@elytracms/studio/ui'\nimport { readRailCollapsed, storeRailCollapsed } from '@elytracms/studio/lib/rail'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { CurrentUserMenu } from './current-user-menu'\nimport { DeliveryHealthBanner } from './delivery-health-banner'\nimport { PlaygroundBadge } from './playground-badge'\nimport { DevLoginBadge } from './dev-login-badge'\nimport { ProjectSwitcher } from './project-switcher'\nimport { SectionNav } from './section-nav'\nimport { activeViewIdFromPath, useStudioNav } from './app-views/sidebar'\nimport { BreadcrumbProvider, useBreadcrumbTrail } from './breadcrumb-context'\n\nexport interface StudioShellProps {\n  project: Project\n  children: ReactNode\n}\n\n/**\n * The Studio shell (brief §4.3, §8.1): a persistent top bar + section rail that\n * preserve the active project while the user moves between surfaces. The top bar\n * carries the single global breadcrumb reaching the active record (EC-214) — no\n * secondary band, no per-view title repeating the section. Responsive and\n * overflow-safe.\n */\nexport function StudioShell({ project, children }: StudioShellProps) {\n  const { pathname } = useLocation()\n  const activeViewId = activeViewIdFromPath(pathname)\n\n  // User-toggled, persisted rail collapse (EC-214). Defaults to expanded; the\n  // stored preference is read after mount (no flash script needed for a rail).\n  const [railCollapsed, setRailCollapsed] = useState(false)\n  useEffect(() => {\n    setRailCollapsed(readRailCollapsed())\n  }, [])\n  const toggleRail = useCallback(() => {\n    setRailCollapsed((prev) => {\n      const next = !prev\n      storeRailCollapsed(next)\n      return next\n    })\n  }, [])\n\n  return (\n    <BreadcrumbProvider>\n      <div className=\"flex h-dvh flex-col bg-background\">\n        {/* Top bar — global controls + the one breadcrumb to the active record. */}\n        <header className=\"flex h-12 shrink-0 items-center gap-2 border-b border-border px-3\">\n          <Link to=\"/\" className=\"grid size-6 shrink-0 place-items-center\" aria-label={translate('shell.allProjects')}>\n            <span className=\"size-5 rounded-[5px] bg-primary shadow-sm\" />\n          </Link>\n          <ProjectSwitcher activeProject={project} />\n          <HeaderBreadcrumb project={project} activeViewId={activeViewId} />\n          <Spacer />\n          {/* EC-153: explicit playground-mode marker (renders nothing on Convex). */}\n          <PlaygroundBadge />\n          {/* Dev-only unattended-auth marker (renders nothing in prod / when unset). */}\n          <DevLoginBadge />\n          {/* EC-150: signed-in user + their role on this project + sign-out. */}\n          <CurrentUserMenu projectId={project.id} />\n        </header>\n\n        {/* EC-268: warns when instant-publish env is incomplete (connected mode only). */}\n        <DeliveryHealthBanner />\n\n        <div className=\"flex min-h-0 flex-1\">\n          <SectionNav\n            project={project}\n            collapsed={railCollapsed}\n            onToggleCollapsed={toggleRail}\n          />\n\n          <main className=\"flex min-w-0 flex-1 flex-col overflow-hidden\">\n            <div className=\"min-h-0 flex-1 overflow-auto\">{children}</div>\n          </main>\n        </div>\n      </div>\n      {/* EC-268: transient action feedback (e.g. a publish that fails at transport). */}\n      <Toaster />\n    </BreadcrumbProvider>\n  )\n}\n\nconst CRUMB_LINK =\n  'max-w-[12rem] truncate text-muted-foreground transition-colors hover:text-foreground'\nconst CRUMB_CURRENT = 'max-w-[16rem] truncate font-medium text-foreground'\n\n/**\n * The single global breadcrumb (EC-214): project (the switcher) › section › …the\n * active record. The section crumb is the active VIEW's label (EC-237/239, resolved\n * from the rail-derived registry); deeper crumbs are contributed by the active\n * surface via {@link useBreadcrumbTrail}. The last crumb is the current page (plain\n * text); earlier crumbs link back.\n */\nfunction HeaderBreadcrumb({\n  project,\n  activeViewId,\n}: {\n  project: Project\n  activeViewId: string | null\n}) {\n  const projectId: ProjectId = project.id\n  const nav = useStudioNav(project)\n  const extra = useBreadcrumbTrail()\n  const view = activeViewId ? nav.registry.get(activeViewId) : undefined\n  if (!view) return null\n  const sectionIsLast = extra.length === 0\n\n  return (\n    <Row gap=\"1\" className=\"min-w-0 text-sm\" aria-label={translate('shell.breadcrumb.label')}>\n      <ChevronRight className=\"size-3.5 shrink-0 text-muted-foreground/50\" aria-hidden />\n      {sectionIsLast ? (\n        <span className={CRUMB_CURRENT}>{view.label}</span>\n      ) : (\n        <Link\n          to={STUDIO_PROJECT_ROUTE}\n          params={{ projectId, _splat: view.id }}\n          className={CRUMB_LINK}\n        >\n          {view.label}\n        </Link>\n      )}\n      {extra.map((item, index) => {\n        const isLast = index === extra.length - 1\n        return (\n          <Row gap=\"1\" key={`${item.label}-${index}`} className=\"min-w-0\">\n            <ChevronRight className=\"size-3.5 shrink-0 text-muted-foreground/50\" aria-hidden />\n            {!isLast && item.to ? (\n              // `to` and `params` are always contributed as a unit (the type\n              // pairs them); the assertion satisfies the route's required params.\n              <Link to={item.to} params={item.params!} className={CRUMB_LINK}>\n                {item.label}\n              </Link>\n            ) : (\n              <span className={isLast ? CRUMB_CURRENT : CRUMB_LINK}>{item.label}</span>\n            )}\n          </Row>\n        )\n      })}\n    </Row>\n  )\n}\n"]}

package/dist/components/users/users-module.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, RotateCcw, ShieldAlert } from 'lucide-react';
 import { Button, Heading, Row, Stack, Text } from '@elytracms/studio/ui';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { useProjectRole } from '../auth-context';
 import { UsersProvider, useUsers } from './users-store';
 import { useUsersCollectionViewSource } from './users-collection-view-source';
@@ -31,7 +32,7 @@ export function UsersModule({ projectId, userId = null, }) {
     // `useProjectRole` conflates "loading" and "not a member" as null; in the studio
     // a member always reaches here, so null resolves to the real role momentarily.
     if (role === null) {
-        return (_jsx(Stack, { className: "h-full place-items-center p-8", align: "center", justify: "center", children: _jsx(Text, { size: "sm", tone: "muted", children: "Checking access\u2026" }) }));
+        return (_jsx(Stack, { className: "h-full place-items-center p-8", align: "center", justify: "center", children: _jsx(Text, { size: "sm", tone: "muted", children: translate('users.checkingAccess') }) }));
     }
     if (role !== 'admin')
         return _jsx(RestrictedState, {});
@@ -39,17 +40,17 @@ export function UsersModule({ projectId, userId = null, }) {
 }
 /** The non-admin gate: honest about why the surface is empty. */
 function RestrictedState() {
-    return (_jsxs(Stack, { gap: "2", align: "center", justify: "center", className: "h-full p-8 text-center", children: [_jsx(ShieldAlert, { className: "size-6 text-muted-foreground" }), _jsx(Heading, { level: 2, size: "h3", children: "Admins only" }), _jsx(Text, { size: "sm", tone: "muted", className: "max-w-sm", children: "Managing users and roles requires the admin role on this deployment. Ask an admin to grant you access." })] }));
+    return (_jsxs(Stack, { gap: "2", align: "center", justify: "center", className: "h-full p-8 text-center", children: [_jsx(ShieldAlert, { className: "size-6 text-muted-foreground" }), _jsx(Heading, { level: 2, size: "h3", children: translate('users.restrictedTitle') }), _jsx(Text, { size: "sm", tone: "muted", className: "max-w-sm", children: translate('users.restrictedBody') })] }));
 }
 /** The loaded surface: the portable list (or a member's detail) over the users source. */
 function UsersSurface({ projectId, userId }) {
     const store = useUsers();
     const source = useUsersCollectionViewSource(projectId);
     if (store.status === 'error') {
-        return (_jsxs(Stack, { gap: "2", className: "p-6", "data-testid": "users-error", children: [_jsxs(Row, { gap: "2", children: [_jsx(AlertTriangle, { className: "size-4 text-destructive" }), _jsx(Text, { weight: "semibold", children: "Users failed to load" })] }), _jsx(Text, { size: "sm", tone: "muted", children: store.errorMessage ?? 'The persistence backend is unreachable.' }), _jsx(Row, { children: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void store.refresh(), children: [_jsx(RotateCcw, {}), " Retry"] }) })] }));
+        return (_jsxs(Stack, { gap: "2", className: "p-6", "data-testid": "users-error", children: [_jsxs(Row, { gap: "2", children: [_jsx(AlertTriangle, { className: "size-4 text-destructive" }), _jsx(Text, { weight: "semibold", children: translate('users.loadFailed') })] }), _jsx(Text, { size: "sm", tone: "muted", children: store.errorMessage ?? translate('common.backendUnreachable') }), _jsx(Row, { children: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void store.refresh(), children: [_jsx(RotateCcw, {}), " ", translate('common.retry')] }) })] }));
     }
     if (store.status === 'loading') {
-        return (_jsx(Stack, { className: "h-full place-items-center p-8", align: "center", justify: "center", children: _jsx(Text, { size: "sm", tone: "muted", children: "Loading users\u2026" }) }));
+        return (_jsx(Stack, { className: "h-full place-items-center p-8", align: "center", justify: "center", children: _jsx(Text, { size: "sm", tone: "muted", children: translate('users.loading') }) }));
     }
     // A member's detail opens in the portable edit shell (AD-19); the list otherwise.
     // The shell mounts its own CollectionViewProvider, so only the list wraps here.