@elytracms/studio 0.0.17 → 0.0.19

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

@@ -10,8 +10,8 @@ import { StudioShell } from './studio-shell';
 import { AssetsProvider } from './assets/assets-store';
 import { CollabProvider } from './collab/collab-context';
 import { ProjectSessionProvider } from './project-session';
-import { firstAvailableModule, flatPath } from './app-views/module';
-import { useAppViews } from './app-views/default-modules';
+import { flatPath } from './app-views/module';
+import { landingViewId, useStudioNav } from './app-views/sidebar';
 /**
  * EC-223 Stage 6 (catch-all routing): the studio's per-project route component.
  *
@@ -68,31 +68,31 @@ function ProjectProviders({ project, children }) {
     _jsx(DataProvider, { projectId: project.id, children: _jsx(AssetsProvider, { projectId: project.id, children: _jsx(CollabProvider, { projectId: project.id, children: children }, project.id) }, project.id) }, project.id));
 }
 /**
- * The URL→screen switch (EC-223 Stage 6), now driven by the app-view module
- * registry (EC-239). The bare project URL redirects to the first available
- * module; otherwise the matched module id is resolved from the registry (defaults
- * + `config.appViews`) and its `parsePath` interprets the trailing segments into a
- * deep-link the module renders. An unknown module id or an unparseable path is a
- * not-found; module CONFIG problems (duplicate/invalid `appViews`) surface as
+ * The URL→screen switch (EC-223 Stage 6), driven by the view registry DERIVED from
+ * the section rail (EC-237/239). The bare project URL redirects to the first
+ * navigable rail view; otherwise the matched view id is resolved from the registry
+ * (rail views + always-on built-ins) and its `parsePath` interprets the trailing
+ * segments into a deep-link the view renders. An unknown view id or an unparseable
+ * path is a not-found; rail CONFIG problems (duplicate/invalid views) surface as
  * visible issues in the shell, never silently. Renders inside the shell + provider
  * stack, so every surface sees the same live CMS store and breadcrumb context.
  */
 function StudioSectionResolver({ project, match, search, }) {
     const projectId = project.id;
-    const appViews = useAppViews();
+    const nav = useStudioNav(project);
     if (match.section === 'index') {
-        // Bare `/$projectId` → the project's first available module.
-        return (_jsx(Navigate, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: firstAvailableModule(appViews.modules, project) }, replace: true }));
+        // Bare `/$projectId` → the project's first navigable rail view.
+        return (_jsx(Navigate, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: landingViewId(nav, project) }, replace: true }));
     }
-    const module = appViews.get(match.moduleId);
-    if (!module)
+    const view = nav.registry.get(match.viewId);
+    if (!view)
         return _jsx(StudioRouteNotFound, {});
-    // A flat module (no `parsePath`) accepts only the bare path; a nested one
+    // A flat view (no `parsePath`) accepts only the bare path; a nested one
     // (CMS/components) interprets its segments. `null` → an over-deep path → not-found.
-    const deepLink = (module.parsePath ?? flatPath)(match.segments);
+    const deepLink = (view.parsePath ?? flatPath)(match.segments);
     if (deepLink === null)
         return _jsx(StudioRouteNotFound, {});
-    return _jsx(_Fragment, { children: module.render({ project, projectId, deepLink, 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" }) })] }) }));

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 { firstAvailableModule, flatPath } from './app-views/module'\nimport { useAppViews } from './app-views/default-modules'\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), now driven by the app-view module\n * registry (EC-239). The bare project URL redirects to the first available\n * module; otherwise the matched module id is resolved from the registry (defaults\n * + `config.appViews`) and its `parsePath` interprets the trailing segments into a\n * deep-link the module renders. An unknown module id or an unparseable path is a\n * not-found; module CONFIG problems (duplicate/invalid `appViews`) 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 appViews = useAppViews()\n\n  if (match.section === 'index') {\n    // Bare `/$projectId` → the project's first available module.\n    return (\n      <Navigate\n        to={STUDIO_PROJECT_ROUTE}\n        params={{ projectId, _splat: firstAvailableModule(appViews.modules, project) }}\n        replace\n      />\n    )\n  }\n\n  const module = appViews.get(match.moduleId)\n  if (!module) return <StudioRouteNotFound />\n\n  // A flat module (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 = (module.parsePath ?? flatPath)(match.segments)\n  if (deepLink === null) return <StudioRouteNotFound />\n\n  return <>{module.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 { 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"]}

package/dist/components/studio-shell.js

@@ -10,8 +10,7 @@ import { PlaygroundBadge } from './playground-badge';
 import { DevLoginBadge } from './dev-login-badge';
 import { ProjectSwitcher } from './project-switcher';
 import { SectionNav } from './section-nav';
-import { useAppViews } from './app-views/default-modules';
-import { activeModuleFromPath } from './app-views/sidebar';
+import { activeViewIdFromPath, useStudioNav } from './app-views/sidebar';
 import { BreadcrumbProvider, useBreadcrumbTrail } from './breadcrumb-context';
 /**
  * The Studio shell (brief §4.3, §8.1): a persistent top bar + section rail that
@@ -22,7 +21,7 @@ import { BreadcrumbProvider, useBreadcrumbTrail } from './breadcrumb-context';
  */
 export function StudioShell({ project, children }) {
     const { pathname } = useLocation();
-    const activeModule = activeModuleFromPath(pathname);
+    const activeViewId = activeViewIdFromPath(pathname);
     // User-toggled, persisted rail collapse (EC-214). Defaults to expanded; the
     // stored preference is read after mount (no flash script needed for a rail).
     const [railCollapsed, setRailCollapsed] = useState(false);
@@ -36,25 +35,26 @@ 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, { projectId: project.id, activeModule: activeModule }), _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": "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, {})] }));
 }
 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';
 /**
  * The single global breadcrumb (EC-214): project (the switcher) › section › …the
- * active record. The section crumb is the active app-view module's label (EC-239,
- * resolved from the registry); deeper crumbs are contributed by the active surface
- * via {@link useBreadcrumbTrail}. The last crumb is the current page (plain text);
- * earlier crumbs link back.
+ * active record. The section crumb is the active VIEW's label (EC-237/239, resolved
+ * from the rail-derived registry); deeper crumbs are contributed by the active
+ * surface via {@link useBreadcrumbTrail}. The last crumb is the current page (plain
+ * text); earlier crumbs link back.
  */
-function HeaderBreadcrumb({ projectId, activeModule, }) {
-    const views = useAppViews();
+function HeaderBreadcrumb({ project, activeViewId, }) {
+    const projectId = project.id;
+    const nav = useStudioNav(project);
     const extra = useBreadcrumbTrail();
-    const module = activeModule ? views.get(activeModule) : undefined;
-    if (!module)
+    const view = activeViewId ? nav.registry.get(activeViewId) : undefined;
+    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: module.label })) : (_jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: module.id }, className: CRUMB_LINK, children: module.label })), extra.map((item, index) => {
+    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) => {
                 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":"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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 { 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 { useAppViews } from './app-views/default-modules'\nimport { activeModuleFromPath } 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 activeModule = activeModuleFromPath(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 projectId={project.id} activeModule={activeModule} />\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 app-view module's label (EC-239,\n * resolved from the registry); deeper crumbs are contributed by the active surface\n * via {@link useBreadcrumbTrail}. The last crumb is the current page (plain text);\n * earlier crumbs link back.\n */\nfunction HeaderBreadcrumb({\n  projectId,\n  activeModule,\n}: {\n  projectId: ProjectId\n  activeModule: string | null\n}) {\n  const views = useAppViews()\n  const extra = useBreadcrumbTrail()\n  const module = activeModule ? views.get(activeModule) : undefined\n  if (!module) 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}>{module.label}</span>\n      ) : (\n        <Link\n          to={STUDIO_PROJECT_ROUTE}\n          params={{ projectId, _splat: module.id }}\n          className={CRUMB_LINK}\n        >\n          {module.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 { 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"]}

package/dist/customization.d.ts

@@ -0,0 +1,48 @@
+/**
+ * `@elytracms/studio/customization` — the public customization API for a consuming
+ * repo's `studio.config.tsx` (EC-236/237/238/239).
+ *
+ * Everything a repo customizes about the builder UI is **live studio code passed by
+ * reference** through `defineStudio({...})` — the section rail (`nav.*`), custom
+ * field renderers, and (in time) branding. This config is studio-only: it is handed
+ * to `createStudio(config, studioConfig)` at the mount and never enters the shared
+ * `elytra.config.ts` / the `frontend/` delivery bundle. The customization principle
+ * in one import surface: direct values, no registries, no string ids — the lone
+ * string seam is `fieldRenderers`' control key, which the delivery-shared schema
+ * references via `form.control`.
+ *
+ * @example
+ * ```tsx
+ * // studio.config.tsx
+ * import { defineStudio, nav } from '@elytracms/studio/customization'
+ * import { ColorField } from './fields/color'
+ *
+ * export default defineStudio({
+ *   sidebar: [
+ *     nav.cms({ label: 'Content' }),
+ *     nav.group('Catalog', [
+ *       nav.cms({ label: 'Catalog', collections: ['product', 'productCategory'] }),
+ *       nav.cms({ label: 'Categories', collection: 'productCategory' }),
+ *     ]),
+ *     nav.separator(),
+ *     nav.assets(),
+ *     nav.settings(),
+ *   ],
+ *   fieldRenderers: { color: ColorField },
+ * })
+ *
+ * // router.tsx (the mount)
+ * import { createStudio } from '@elytracms/studio/customization'
+ * import config from '../../elytra.config'
+ * import studioConfig from './studio.config'
+ * createStudio(config, studioConfig)
+ * ```
+ */
+export { defineStudio } from './components/app-views/studio-config';
+export type { StudioConfig, CustomFieldRenderer, CustomFieldRendererProps, } from './components/app-views/studio-config';
+export { nav } from './components/app-views/default-modules';
+export type { CmsViewConfig, BuiltinViewConfig, CustomViewConfig, } from './components/app-views/default-modules';
+export type { AppViewContext, AppViewModule, SidebarNode } from './components/app-views/module';
+export { createStudio } from './lib/workspace';
+/** A ready-made example renderer; a consuming repo may use it or author its own. */
+export { colorFieldRenderer } from './components/cms/field-renderer';

package/dist/customization.js

@@ -0,0 +1,46 @@
+/**
+ * `@elytracms/studio/customization` — the public customization API for a consuming
+ * repo's `studio.config.tsx` (EC-236/237/238/239).
+ *
+ * Everything a repo customizes about the builder UI is **live studio code passed by
+ * reference** through `defineStudio({...})` — the section rail (`nav.*`), custom
+ * field renderers, and (in time) branding. This config is studio-only: it is handed
+ * to `createStudio(config, studioConfig)` at the mount and never enters the shared
+ * `elytra.config.ts` / the `frontend/` delivery bundle. The customization principle
+ * in one import surface: direct values, no registries, no string ids — the lone
+ * string seam is `fieldRenderers`' control key, which the delivery-shared schema
+ * references via `form.control`.
+ *
+ * @example
+ * ```tsx
+ * // studio.config.tsx
+ * import { defineStudio, nav } from '@elytracms/studio/customization'
+ * import { ColorField } from './fields/color'
+ *
+ * export default defineStudio({
+ *   sidebar: [
+ *     nav.cms({ label: 'Content' }),
+ *     nav.group('Catalog', [
+ *       nav.cms({ label: 'Catalog', collections: ['product', 'productCategory'] }),
+ *       nav.cms({ label: 'Categories', collection: 'productCategory' }),
+ *     ]),
+ *     nav.separator(),
+ *     nav.assets(),
+ *     nav.settings(),
+ *   ],
+ *   fieldRenderers: { color: ColorField },
+ * })
+ *
+ * // router.tsx (the mount)
+ * import { createStudio } from '@elytracms/studio/customization'
+ * import config from '../../elytra.config'
+ * import studioConfig from './studio.config'
+ * createStudio(config, studioConfig)
+ * ```
+ */
+export { defineStudio } from './components/app-views/studio-config';
+export { nav } from './components/app-views/default-modules';
+export { createStudio } from './lib/workspace';
+/** A ready-made example renderer; a consuming repo may use it or author its own. */
+export { colorFieldRenderer } from './components/cms/field-renderer';
+//# sourceMappingURL=customization.js.map

package/dist/customization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customization.js","sourceRoot":"","sources":["../src/customization.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAA;AAMnE,OAAO,EAAE,GAAG,EAAE,MAAM,wCAAwC,CAAA;AAO5D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,oFAAoF;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA","sourcesContent":["/**\n * `@elytracms/studio/customization` — the public customization API for a consuming\n * repo's `studio.config.tsx` (EC-236/237/238/239).\n *\n * Everything a repo customizes about the builder UI is **live studio code passed by\n * reference** through `defineStudio({...})` — the section rail (`nav.*`), custom\n * field renderers, and (in time) branding. This config is studio-only: it is handed\n * to `createStudio(config, studioConfig)` at the mount and never enters the shared\n * `elytra.config.ts` / the `frontend/` delivery bundle. The customization principle\n * in one import surface: direct values, no registries, no string ids — the lone\n * string seam is `fieldRenderers`' control key, which the delivery-shared schema\n * references via `form.control`.\n *\n * @example\n * ```tsx\n * // studio.config.tsx\n * import { defineStudio, nav } from '@elytracms/studio/customization'\n * import { ColorField } from './fields/color'\n *\n * export default defineStudio({\n *   sidebar: [\n *     nav.cms({ label: 'Content' }),\n *     nav.group('Catalog', [\n *       nav.cms({ label: 'Catalog', collections: ['product', 'productCategory'] }),\n *       nav.cms({ label: 'Categories', collection: 'productCategory' }),\n *     ]),\n *     nav.separator(),\n *     nav.assets(),\n *     nav.settings(),\n *   ],\n *   fieldRenderers: { color: ColorField },\n * })\n *\n * // router.tsx (the mount)\n * import { createStudio } from '@elytracms/studio/customization'\n * import config from '../../elytra.config'\n * import studioConfig from './studio.config'\n * createStudio(config, studioConfig)\n * ```\n */\nexport { defineStudio } from './components/app-views/studio-config'\nexport type {\n  StudioConfig,\n  CustomFieldRenderer,\n  CustomFieldRendererProps,\n} from './components/app-views/studio-config'\nexport { nav } from './components/app-views/default-modules'\nexport type {\n  CmsViewConfig,\n  BuiltinViewConfig,\n  CustomViewConfig,\n} from './components/app-views/default-modules'\nexport type { AppViewContext, AppViewModule, SidebarNode } from './components/app-views/module'\nexport { createStudio } from './lib/workspace'\n/** A ready-made example renderer; a consuming repo may use it or author its own. */\nexport { colorFieldRenderer } from './components/cms/field-renderer'\n"]}

package/dist/lib/cms-views/view-model.d.ts

@@ -34,8 +34,8 @@ export type FilterClause = z.infer<typeof filterClauseSchema>;
 export declare const viewSortSchema: z.ZodObject<{
     field: z.ZodString;
     dir: z.ZodEnum<{
-        asc: "asc";
         desc: "desc";
+        asc: "asc";
     }>;
 }, z.core.$strip>;
 export type ViewSort = z.infer<typeof viewSortSchema>;
@@ -55,8 +55,8 @@ export declare const tableViewStateSchema: z.ZodObject<{
     sort: z.ZodNullable<z.ZodObject<{
         field: z.ZodString;
         dir: z.ZodEnum<{
-            asc: "asc";
             desc: "desc";
+            asc: "asc";
         }>;
     }, z.core.$strip>>;
     columns: z.ZodArray<z.ZodString>;

package/dist/lib/cms-views/views-store.d.ts

@@ -41,8 +41,8 @@ export declare const savedViewRecordSchema: z.ZodObject<{
         sort: z.ZodNullable<z.ZodObject<{
             field: z.ZodString;
             dir: z.ZodEnum<{
-                asc: "asc";
                 desc: "desc";
+                asc: "asc";
             }>;
         }, z.core.$strip>>;
         columns: z.ZodArray<z.ZodString>;

package/dist/lib/workspace/index.d.ts

@@ -1,20 +1,31 @@
-import type { AppViewEntry, BreakpointConfig, ElytraConfigInput, FieldRendererEntry, SidebarEntry } from '@elytracms/core/studio-core';
+import type { BreakpointConfig, ElytraConfigInput } from '@elytracms/core/studio-core';
 import type { CollectionDef, RedirectRecord, RouteRecord } from '@elytracms/core/cms-core';
+import type { SidebarNode } from '../../components/app-views/module';
+import type { CustomFieldRenderer, StudioConfig } from '../../components/app-views/studio-config';
 import type { WorkspaceState } from './workspace-source';
 export { resolveWorkspaceState, WORKSPACE_ENV_VAR } from './workspace-source';
 export type { WorkspaceSources, WorkspaceState } from './workspace-source';
 export { persistedProjects, selectSwitcherProjects, unprovisionedProjects } from './switcher-source';
 export type { SwitcherEntry, SwitcherSourceInput } from './switcher-source';
 /**
- * Mount the studio against a project config (EC-223 mount contract). The
- * consumer's entry point does `import config from './elytra.config'` and calls
- * this — an explicit init, NOT an `import.meta.glob` autoload that reaches into
- * the consumer's filesystem (Oli, 2026-06-19: "there's always an entry point that
- * can trigger a function call"). This is the config-injection responsibility of
- * the eventual `createStudio(config)` package export; it seeds the workspace state
- * every later query (`getActiveProjectSlug`, `resolveDeployment*`) reads.
+ * Mount the studio against a project config (EC-223 mount contract) and an
+ * optional studio-only customization config (EC-236). The consumer's entry point
+ * does `import config from './elytra.config'` + `import studio from
+ * './studio.config'` and calls this — an explicit init, NOT an `import.meta.glob`
+ * autoload that reaches into the consumer's filesystem (Oli, 2026-06-19: "there's
+ * always an entry point that can trigger a function call").
+ *
+ * Two configs, deliberately: `config` (`elytra.config.ts`) is the project
+ * definition, shared with the `frontend/` delivery bundle and projected to data;
+ * `studio` (`studio.config.tsx` via `defineStudio`) is live builder UI code — the
+ * section rail, custom field renderers, branding — that must NEVER reach delivery.
+ * Keeping them separate is the customization boundary principle in the mount
+ * signature. Seeds the workspace state + the studio-config holder every later
+ * query (`getActiveProjectSlug`, `resolveDeployment*`) reads.
  */
-export declare function createStudio(config: ElytraConfigInput): void;
+export declare function createStudio(config: ElytraConfigInput, studio?: StudioConfig): void;
+/** Test seam: set/clear the studio customization config. Never used by app code. */
+export declare function setStudioConfigForTests(next: StudioConfig | null): void;
 /** Set the active project slug; returns whether the resolved deployment changed. */
 export declare function setActiveProjectSlug(slug: string | null): boolean;
 export declare function getActiveProjectSlug(): string | null;
@@ -73,24 +84,21 @@ export declare function resolveDeploymentCollections(): CollectionDef[];
  */
 export declare function resolveDeploymentBreakpoints(): BreakpointConfig[] | undefined;
 /**
- * The custom field renderers of the active config project (EC-238). Config-sourced
- * live React code (omitted from the serializable projection); `[]` when none — the
- * document editor then uses its built-in control for every field type.
+ * The custom field renderers from the studio config (EC-238): control name →
+ * component. Studio-only live code (from `defineStudio`, never the project schema
+ * or the delivery bundle); `undefined` when none — the document editor then uses
+ * its built-in control for every field. Studio-wide (not per-project): the rail and
+ * renderers customize the studio, not one backend.
  */
-export declare function resolveDeploymentFieldRenderers(): FieldRendererEntry[];
+export declare function resolveDeploymentFieldRenderers(): Record<string, CustomFieldRenderer> | undefined;
 /**
- * The custom app-view modules of the active config project (EC-239). Config-sourced
- * live React modules (omitted from the serializable projection); `[]` when none —
- * the studio then mounts only its default module registry (CMS/Routes/Assets/…).
+ * The configurable section rail from the studio config (EC-237): an ordered list of
+ * `nav.*` nodes (views / groups / separators). Studio-only live code (carries view
+ * objects + icons); `undefined` when none — the studio then derives the default
+ * rail from its built-in views. Invalid entries surface as visible issues at
+ * resolution, never silent.
  */
-export declare function resolveDeploymentAppViews(): AppViewEntry[];
-/**
- * The configurable sidebar of the active config project (EC-237). Config-sourced
- * live entries (carry icons; omitted from the projection); `undefined` when the
- * project declares none — the studio then derives the default rail from its module
- * registry (declared-but-invalid entries surface as visible issues, never silent).
- */
-export declare function resolveDeploymentSidebar(): SidebarEntry[] | undefined;
+export declare function resolveDeploymentSidebar(): SidebarNode[] | undefined;
 /**
  * The resolved URL routes of the active config project (EC-207, "routes as
  * code"). Routes are config-sourced: the studio reads the materialized

package/dist/lib/workspace/index.js

@@ -3,20 +3,33 @@ import { resolveWorkspaceState } from './workspace-source';
 export { resolveWorkspaceState, WORKSPACE_ENV_VAR } from './workspace-source';
 export { persistedProjects, selectSwitcherProjects, unprovisionedProjects } from './switcher-source';
 let cached = null;
-/**
- * Mount the studio against a project config (EC-223 mount contract). The
- * consumer's entry point does `import config from './elytra.config'` and calls
- * this — an explicit init, NOT an `import.meta.glob` autoload that reaches into
- * the consumer's filesystem (Oli, 2026-06-19: "there's always an entry point that
- * can trigger a function call"). This is the config-injection responsibility of
- * the eventual `createStudio(config)` package export; it seeds the workspace state
- * every later query (`getActiveProjectSlug`, `resolveDeployment*`) reads.
- */
-export function createStudio(config) {
+let studioConfig = null;
+/**
+ * Mount the studio against a project config (EC-223 mount contract) and an
+ * optional studio-only customization config (EC-236). The consumer's entry point
+ * does `import config from './elytra.config'` + `import studio from
+ * './studio.config'` and calls this — an explicit init, NOT an `import.meta.glob`
+ * autoload that reaches into the consumer's filesystem (Oli, 2026-06-19: "there's
+ * always an entry point that can trigger a function call").
+ *
+ * Two configs, deliberately: `config` (`elytra.config.ts`) is the project
+ * definition, shared with the `frontend/` delivery bundle and projected to data;
+ * `studio` (`studio.config.tsx` via `defineStudio`) is live builder UI code — the
+ * section rail, custom field renderers, branding — that must NEVER reach delivery.
+ * Keeping them separate is the customization boundary principle in the mount
+ * signature. Seeds the workspace state + the studio-config holder every later
+ * query (`getActiveProjectSlug`, `resolveDeployment*`) reads.
+ */
+export function createStudio(config, studio) {
     cached = resolveWorkspaceState({
         fileModule: { default: config },
         fileName: 'elytra.config.ts',
     });
+    studioConfig = studio ?? null;
+}
+/** Test seam: set/clear the studio customization config. Never used by app code. */
+export function setStudioConfigForTests(next) {
+    studioConfig = next;
 }
 /**
  * The active project slug (EC-179, vision AD-8). One project per backend, so the
@@ -157,29 +170,24 @@ export function resolveDeploymentBreakpoints() {
     return activeConfigProject()?.breakpoints;
 }
 /**
- * The custom field renderers of the active config project (EC-238). Config-sourced
- * live React code (omitted from the serializable projection); `[]` when none — the
- * document editor then uses its built-in control for every field type.
+ * The custom field renderers from the studio config (EC-238): control name →
+ * component. Studio-only live code (from `defineStudio`, never the project schema
+ * or the delivery bundle); `undefined` when none — the document editor then uses
+ * its built-in control for every field. Studio-wide (not per-project): the rail and
+ * renderers customize the studio, not one backend.
  */
 export function resolveDeploymentFieldRenderers() {
-    return activeConfigProject()?.fieldRenderers ?? [];
-}
-/**
- * The custom app-view modules of the active config project (EC-239). Config-sourced
- * live React modules (omitted from the serializable projection); `[]` when none —
- * the studio then mounts only its default module registry (CMS/Routes/Assets/…).
- */
-export function resolveDeploymentAppViews() {
-    return activeConfigProject()?.appViews ?? [];
+    return studioConfig?.fieldRenderers;
 }
 /**
- * The configurable sidebar of the active config project (EC-237). Config-sourced
- * live entries (carry icons; omitted from the projection); `undefined` when the
- * project declares none — the studio then derives the default rail from its module
- * registry (declared-but-invalid entries surface as visible issues, never silent).
+ * The configurable section rail from the studio config (EC-237): an ordered list of
+ * `nav.*` nodes (views / groups / separators). Studio-only live code (carries view
+ * objects + icons); `undefined` when none — the studio then derives the default
+ * rail from its built-in views. Invalid entries surface as visible issues at
+ * resolution, never silent.
  */
 export function resolveDeploymentSidebar() {
-    return activeConfigProject()?.sidebar;
+    return studioConfig?.sidebar;
 }
 /**
  * The resolved URL routes of the active config project (EC-207, "routes as