@elytracms/studio 0.0.14 → 0.0.16

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 { Link, STUDIO_PROJECT_ROUTE, useLocation } from '@elytracms/studio/router'\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react'\nimport type { ProjectId, SectionAvailabilityMap } from '@elytracms/core/studio-core'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { SECTION_NAV_ITEMS, activeSectionFromPath, navAvailabilityOf } from './sections'\nimport type { StudioNavId } from './sections'\n\nexport interface SectionNavProps {\n  projectId: ProjectId\n  activeSection: StudioNavId | null\n  availability: SectionAvailabilityMap\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). Availability-aware: `available`/`planned`\n * are navigable; `unavailable` is rendered disabled. User-collapsible to an\n * icon rail (EC-214) — the preference persists, and the active section carries a\n * strong highlight (accent fill + a leading marker bar).\n */\nexport function SectionNav({\n  projectId,\n  activeSection,\n  availability,\n  collapsed,\n  onToggleCollapsed,\n}: SectionNavProps) {\n  // Recover the active id from the path if the shell didn't supply one — the\n  // shared parser is the single source of truth for the section segment index.\n  const { pathname } = useLocation()\n  const active = activeSection ?? activeSectionFromPath(pathname)\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      {SECTION_NAV_ITEMS.map((item) => {\n        const state = navAvailabilityOf(availability, item.id)\n        const isActive = item.id === active\n        const Icon = item.icon\n\n        const body = (\n          <>\n            {/* Strong active marker: a leading accent bar (EC-214). */}\n            {isActive ? (\n              <span\n                className=\"absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary\"\n                aria-hidden\n              />\n            ) : null}\n            <Icon className=\"size-4 shrink-0\" />\n            {collapsed ? null : (\n              <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n            )}\n            {state === 'planned' && !collapsed ? (\n              <span\n                className=\"size-1.5 shrink-0 rounded-full bg-warning\"\n                aria-hidden\n                title=\"Planned\"\n              />\n            ) : null}\n          </>\n        )\n\n        const base = cn(\n          'group relative flex h-9 items-center gap-2.5 rounded-md text-sm transition-colors',\n          collapsed ? 'justify-center px-0' : 'px-3',\n        )\n\n        // EC-221: an unavailable section is absent from the rail (not greyed) —\n        // e.g. Extensions, cut from the v1 nav (vision §5). It stays reachable by\n        // URL for Milestone E revival; the rail simply doesn't advertise it.\n        if (state === 'unavailable') return null\n\n        return (\n          <Link\n            key={item.id}\n            to={STUDIO_PROJECT_ROUTE}\n            params={{ projectId, _splat: item.id }}\n            title={item.label}\n            aria-current={isActive ? 'page' : undefined}\n            className={cn(\n              base,\n              isActive\n                ? 'bg-accent font-medium text-accent-foreground'\n                : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n            )}\n          >\n            {body}\n          </Link>\n        )\n      })}\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          'mt-auto 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    </nav>\n  )\n}\n"]}
+{"version":3,"file":"section-nav.js","sourceRoot":"","sources":["../../src/components/section-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Link, STUDIO_PROJECT_ROUTE, useLocation } from '@elytracms/studio/router'\nimport { AlertTriangle, PanelLeftClose, PanelLeftOpen } from 'lucide-react'\nimport type { Project } from '@elytracms/core/studio-core'\nimport type { CustomizationIssue } from '@elytracms/core/studio-core'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { Text } from '@elytracms/studio/ui'\nimport { useAppViews } from './app-views/default-modules'\nimport { activeModuleFromPath, useSidebar } from './app-views/sidebar'\nimport type { ResolvedSidebarItem } from './app-views/sidebar'\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), now driven by the configurable sidebar\n * (EC-237): a consumer-extendable tree of items / groups / separators resolved\n * over the app-view module registry (EC-239). Availability-aware (`unavailable`\n * items are absent per EC-221); items deep-link to a module + resource; the\n * preference-persisted collapse and the strong active marker (EC-214) are\n * preserved. Customization issues (duplicate ids, unknown modules, unresolvable\n * deep-links) render at the rail foot — visible, never silent.\n */\nexport function SectionNav({ project, collapsed, onToggleCollapsed }: SectionNavProps) {\n  const { pathname } = useLocation()\n  const active = activeModuleFromPath(pathname)\n  const { nodes, issues: sidebarIssues } = useSidebar(project)\n  const { issues: moduleIssues } = useAppViews()\n  const issues = [...moduleIssues, ...sidebarIssues]\n  const projectId = project.id\n\n  return (\n    <nav\n      aria-label=\"Sections\"\n      className={cn(\n        'flex shrink-0 flex-col gap-0.5 border-r border-border bg-card/40 p-2 transition-[width] duration-150',\n        collapsed ? 'w-[3.5rem]' : 'w-56',\n      )}\n    >\n      {nodes.map((node) => {\n        if (node.kind === 'separator') {\n          return <div key={node.id} className=\"my-1.5 border-t border-border/60\" aria-hidden />\n        }\n        if (node.kind === 'group') {\n          const items = node.items.filter((item) => item.availability !== 'unavailable')\n          if (items.length === 0) return null\n          return (\n            <div key={node.id} 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              {items.map((item) => (\n                <NavItemLink\n                  key={item.id}\n                  projectId={projectId}\n                  item={item}\n                  active={active}\n                  collapsed={collapsed}\n                  nested\n                />\n              ))}\n            </div>\n          )\n        }\n        // EC-221: an unavailable item is absent from the rail (not greyed) — it\n        // stays reachable by URL, the rail simply doesn't advertise it.\n        if (node.availability === 'unavailable') return null\n        return (\n          <NavItemLink\n            key={node.id}\n            projectId={projectId}\n            item={node}\n            active={active}\n            collapsed={collapsed}\n          />\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 item (top-level or nested) — a deep-linkable Link to its module. */\nfunction NavItemLink({\n  projectId,\n  item,\n  active,\n  collapsed,\n  nested = false,\n}: {\n  projectId: string\n  item: ResolvedSidebarItem\n  active: string | null\n  collapsed: boolean\n  nested?: boolean\n}) {\n  const isActive = item.moduleId === active\n  const Icon = item.icon\n  return (\n    <Link\n      to={STUDIO_PROJECT_ROUTE}\n      params={{ projectId, _splat: item.path }}\n      title={item.label}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(\n        'group relative flex h-9 items-center gap-2.5 rounded-md text-sm transition-colors',\n        collapsed ? 'justify-center px-0' : nested ? 'pl-7 pr-3' : 'px-3',\n        isActive\n          ? 'bg-accent font-medium text-accent-foreground'\n          : '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\">{item.label}</span>}\n      {item.availability === 'planned' && !collapsed ? (\n        <span className=\"size-1.5 shrink-0 rounded-full bg-warning\" aria-hidden title=\"Planned\" />\n      ) : null}\n    </Link>\n  )\n}\n\n/** Visible customization issues at the rail foot — the seam's \"never silent\" (EC-236). */\nfunction NavIssues({ issues, collapsed }: { issues: CustomizationIssue[]; collapsed: boolean }) {\n  if (collapsed) {\n    return (\n      <div\n        className=\"grid h-9 place-items-center text-amber-600 dark:text-amber-400\"\n        title={issues.map((issue) => issue.message).join('\\n')}\n      >\n        <AlertTriangle className=\"size-4\" aria-label={`${issues.length} sidebar issues`} />\n      </div>\n    )\n  }\n  return (\n    <div className=\"mb-1 flex flex-col gap-1 rounded-md border border-amber-500/30 bg-amber-500/5 p-2\">\n      {issues.map((issue, index) => (\n        <div\n          key={`${issue.point}:${issue.id ?? index}`}\n          className=\"flex items-start gap-1.5 text-amber-600 dark:text-amber-400\"\n          title={issue.message}\n        >\n          <AlertTriangle className=\"mt-0.5 size-3.5 shrink-0\" aria-hidden />\n          <Text size=\"xs\" className=\"min-w-0 leading-snug\">\n            {issue.message}\n          </Text>\n        </div>\n      ))}\n    </div>\n  )\n}\n"]}

package/dist/components/section-state.d.ts

@@ -20,5 +20,3 @@ export declare function SectionStateView({ state, title, description, action, cl
 export declare function SectionSkeleton({ className }: {
     className?: string;
 }): import("react").JSX.Element;
-/** The full set of forceable states, for fixtures and the state switcher. */
-export declare const FORCEABLE_STATES: readonly SectionState[];

package/dist/components/section-state.js

@@ -66,13 +66,4 @@ export function SectionStateView({ state, title, description, action, className,
 export function SectionSkeleton({ className }) {
     return (_jsxs("div", { "data-section-state": "loading", className: cn('space-y-4 p-6', className), "aria-busy": true, children: [_jsx("div", { className: "h-7 w-48 animate-pulse rounded-md bg-muted" }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: "h-28 animate-pulse rounded-xl bg-muted/70" }, i))) })] }));
 }
-/** The full set of forceable states, for fixtures and the state switcher. */
-export const FORCEABLE_STATES = [
-    'working',
-    'empty',
-    'loading',
-    'error',
-    'unavailable',
-    'planned',
-];
 //# sourceMappingURL=section-state.js.map

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\n/** The full set of forceable states, for fixtures and the state switcher. */\nexport const FORCEABLE_STATES: readonly SectionState[] = [\n  'working',\n  'empty',\n  'loading',\n  'error',\n  'unavailable',\n  'planned',\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'\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"]}

package/dist/components/section-surface.d.ts

@@ -7,19 +7,15 @@ export interface SectionSurfaceProps {
     section: SectionId;
     /** Forced state from `?state=`; overrides availability. */
     forcedState?: SectionState;
-    /** Working-state content. When omitted, a phase placeholder is shown. */
+    /** Working-state content. */
     children?: ReactNode;
 }
 /**
  * Resolves a section's deterministic state (brief §8.1, §11) and renders it: the
- * working content (or a phase placeholder) when `working`, else a consistent
- * state view. A small state switcher makes every state reachable for inspection.
+ * working content when `working`, else a consistent state view. A small state
+ * switcher makes every state reachable for inspection.
  */
 export declare function SectionSurface({ project, section, forcedState, children }: SectionSurfaceProps): import("react").JSX.Element;
-/** Placeholder for an available section whose live surface lands in a later phase. */
-export declare function PhasePlaceholder({ section }: {
-    section: SectionId;
-}): import("react").JSX.Element;
 /**
  * Deterministic state switcher (brief §11). Links to the same section with each
  * `?state=` value so agents/humans can reproduce every state by URL or click.

package/dist/components/section-surface.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link, STUDIO_PROJECT_ROUTE } from '@elytracms/studio/router';
-import { ArrowUpRight } from 'lucide-react';
-import { availabilityOf, sectionStateSchema } from '@elytracms/core/studio-core';
-import { Badge, Button, Code, Row, Stack, Text } from '@elytracms/studio/ui';
+import { availabilityOf, SECTIONS, sectionStateSchema } from '@elytracms/core/studio-core';
+import { Code, Row, Stack, Text } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 import { resolveSectionState, SectionStateView } from './section-state';
-import { sectionNavItem } from './sections';
 /** Parse a `?state=` search param into a SectionState (undefined when absent/invalid). */
 export function parseSectionState(raw) {
     const parsed = sectionStateSchema.safeParse(raw);
@@ -13,19 +11,13 @@ export function parseSectionState(raw) {
 }
 /**
  * Resolves a section's deterministic state (brief §8.1, §11) and renders it: the
- * working content (or a phase placeholder) when `working`, else a consistent
- * state view. A small state switcher makes every state reachable for inspection.
+ * working content when `working`, else a consistent state view. A small state
+ * switcher makes every state reachable for inspection.
  */
 export function SectionSurface({ project, section, forcedState, children }) {
     const availability = availabilityOf(project.settings.sectionAvailability, section);
     const state = resolveSectionState(availability, forcedState);
-    return (_jsxs(Stack, { gap: "none", className: "min-h-full", children: [_jsx(StateSwitcher, { projectId: project.id, section: section, current: forcedState }), state === 'working' ? ((children ?? _jsx(PhasePlaceholder, { section: section }))) : (_jsx(SectionStateView, { state: state, title: sectionNavItem(section).label }))] }));
-}
-/** Placeholder for an available section whose live surface lands in a later phase. */
-export function PhasePlaceholder({ section }) {
-    const item = sectionNavItem(section);
-    const Icon = item.icon;
-    return (_jsx("div", { "data-section-state": "working", className: "grid flex-1 place-items-center p-8", children: _jsxs(Stack, { gap: "3", align: "center", className: "max-w-md text-center", children: [_jsx("span", { className: "grid size-12 place-items-center rounded-xl border border-border bg-card text-primary", children: _jsx(Icon, { className: "size-6" }) }), _jsxs(Stack, { gap: "1", align: "center", children: [_jsxs(Text, { weight: "semibold", children: [item.label, " is enabled"] }), _jsxs(Text, { size: "sm", tone: "muted", children: [item.description, " The full surface arrives in ", item.phase, "."] })] }), _jsx(Badge, { variant: "primary", children: item.phase })] }) }));
+    return (_jsxs(Stack, { gap: "none", className: "min-h-full", children: [_jsx(StateSwitcher, { projectId: project.id, section: section, current: forcedState }), state === 'working' ? (children) : (_jsx(SectionStateView, { state: state, title: SECTIONS[section].label }))] }));
 }
 /**
  * Deterministic state switcher (brief §11). Links to the same section with each
@@ -41,6 +33,6 @@ export function StateSwitcher({ projectId, section, current, }) {
                 return (_jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: section }, search: { state: s }, className: cn('rounded-md px-2 py-0.5 font-mono text-xs transition-colors', active
                         ? 'bg-accent text-accent-foreground'
                         : 'text-muted-foreground hover:bg-muted hover:text-foreground'), children: s }, s));
-            }), _jsx(Code, { tone: "muted", className: "ml-2 hidden sm:inline-flex", children: activeKey === 'default' ? 'auto' : `?state=${activeKey}` }), _jsx("span", { className: "flex-1" }), _jsx(Button, { variant: "ghost", size: "sm", asChild: true, className: "hidden md:inline-flex", children: _jsxs(Link, { to: "/", className: "gap-1", children: ["Docs ", _jsx(ArrowUpRight, {})] }) })] }));
+            }), _jsx(Code, { tone: "muted", className: "ml-2 hidden sm:inline-flex", children: activeKey === 'default' ? 'auto' : `?state=${activeKey}` })] }));
 }
 //# sourceMappingURL=section-surface.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"section-surface.js","sourceRoot":"","sources":["../../src/components/section-surface.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Link, STUDIO_PROJECT_ROUTE } from '@elytracms/studio/router'\nimport { ArrowUpRight } from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport { availabilityOf, sectionStateSchema } from '@elytracms/core/studio-core'\nimport type { Project, ProjectId, SectionId, SectionState } from '@elytracms/core/studio-core'\nimport { Badge, Button, Code, Row, Stack, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { resolveSectionState, SectionStateView } from './section-state'\nimport { sectionNavItem } from './sections'\n\n/** Parse a `?state=` search param into a SectionState (undefined when absent/invalid). */\nexport function parseSectionState(raw: unknown): SectionState | undefined {\n  const parsed = sectionStateSchema.safeParse(raw)\n  return parsed.success ? parsed.data : undefined\n}\n\nexport interface SectionSurfaceProps {\n  project: Project\n  section: SectionId\n  /** Forced state from `?state=`; overrides availability. */\n  forcedState?: SectionState\n  /** Working-state content. When omitted, a phase placeholder is shown. */\n  children?: ReactNode\n}\n\n/**\n * Resolves a section's deterministic state (brief §8.1, §11) and renders it: the\n * working content (or a phase placeholder) when `working`, else a consistent\n * state view. A small state switcher makes every state reachable for inspection.\n */\nexport function SectionSurface({ project, section, forcedState, children }: SectionSurfaceProps) {\n  const availability = availabilityOf(project.settings.sectionAvailability, section)\n  const state = resolveSectionState(availability, forcedState)\n\n  return (\n    <Stack gap=\"none\" className=\"min-h-full\">\n      <StateSwitcher projectId={project.id} section={section} current={forcedState} />\n      {state === 'working' ? (\n        (children ?? <PhasePlaceholder section={section} />)\n      ) : (\n        <SectionStateView state={state} title={sectionNavItem(section).label} />\n      )}\n    </Stack>\n  )\n}\n\n/** Placeholder for an available section whose live surface lands in a later phase. */\nexport function PhasePlaceholder({ section }: { section: SectionId }) {\n  const item = sectionNavItem(section)\n  const Icon = item.icon\n  return (\n    <div data-section-state=\"working\" className=\"grid flex-1 place-items-center p-8\">\n      <Stack gap=\"3\" align=\"center\" className=\"max-w-md text-center\">\n        <span className=\"grid size-12 place-items-center rounded-xl border border-border bg-card text-primary\">\n          <Icon className=\"size-6\" />\n        </span>\n        <Stack gap=\"1\" align=\"center\">\n          <Text weight=\"semibold\">{item.label} is enabled</Text>\n          <Text size=\"sm\" tone=\"muted\">\n            {item.description} The full surface arrives in {item.phase}.\n          </Text>\n        </Stack>\n        <Badge variant=\"primary\">{item.phase}</Badge>\n      </Stack>\n    </div>\n  )\n}\n\n/**\n * Deterministic state switcher (brief §11). Links to the same section with each\n * `?state=` value so agents/humans can reproduce every state by URL or click.\n */\nexport function StateSwitcher({\n  projectId,\n  section,\n  current,\n}: {\n  projectId: ProjectId\n  section: SectionId\n  current?: SectionState\n}) {\n  const states: SectionState[] = ['working', 'empty', 'loading', 'error', 'unavailable', 'planned']\n  const activeKey = current ?? 'default'\n  return (\n    <Row\n      gap=\"1\"\n      wrap\n      className=\"shrink-0 border-b border-dashed border-border/70 px-4 py-2 sm:px-6\"\n      data-testid=\"state-switcher\"\n    >\n      <Text size=\"xs\" tone=\"subtle\" mono className=\"mr-1\">\n        state\n      </Text>\n      <Link\n        to={STUDIO_PROJECT_ROUTE}\n        params={{ projectId, _splat: section }}\n        search={{}}\n        className={cn(\n          'rounded-md px-2 py-0.5 font-mono text-xs transition-colors',\n          activeKey === 'default'\n            ? 'bg-accent text-accent-foreground'\n            : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n        )}\n      >\n        default\n      </Link>\n      {states.map((s) => {\n        const active = s === activeKey\n        return (\n          <Link\n            key={s}\n            to={STUDIO_PROJECT_ROUTE}\n            params={{ projectId, _splat: section }}\n            search={{ state: s }}\n            className={cn(\n              'rounded-md px-2 py-0.5 font-mono text-xs transition-colors',\n              active\n                ? 'bg-accent text-accent-foreground'\n                : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n            )}\n          >\n            {s}\n          </Link>\n        )\n      })}\n      <Code tone=\"muted\" className=\"ml-2 hidden sm:inline-flex\">\n        {activeKey === 'default' ? 'auto' : `?state=${activeKey}`}\n      </Code>\n      <span className=\"flex-1\" />\n      <Button variant=\"ghost\" size=\"sm\" asChild className=\"hidden md:inline-flex\">\n        <Link to=\"/\" className=\"gap-1\">\n          Docs <ArrowUpRight />\n        </Link>\n      </Button>\n    </Row>\n  )\n}\n"]}
+{"version":3,"file":"section-surface.js","sourceRoot":"","sources":["../../src/components/section-surface.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Link, STUDIO_PROJECT_ROUTE } from '@elytracms/studio/router'\nimport type { ReactNode } from 'react'\nimport { availabilityOf, SECTIONS, sectionStateSchema } from '@elytracms/core/studio-core'\nimport type { Project, ProjectId, SectionId, SectionState } from '@elytracms/core/studio-core'\nimport { Code, Row, Stack, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { resolveSectionState, SectionStateView } from './section-state'\n\n/** Parse a `?state=` search param into a SectionState (undefined when absent/invalid). */\nexport function parseSectionState(raw: unknown): SectionState | undefined {\n  const parsed = sectionStateSchema.safeParse(raw)\n  return parsed.success ? parsed.data : undefined\n}\n\nexport interface SectionSurfaceProps {\n  project: Project\n  section: SectionId\n  /** Forced state from `?state=`; overrides availability. */\n  forcedState?: SectionState\n  /** Working-state content. */\n  children?: ReactNode\n}\n\n/**\n * Resolves a section's deterministic state (brief §8.1, §11) and renders it: the\n * working content when `working`, else a consistent state view. A small state\n * switcher makes every state reachable for inspection.\n */\nexport function SectionSurface({ project, section, forcedState, children }: SectionSurfaceProps) {\n  const availability = availabilityOf(project.settings.sectionAvailability, section)\n  const state = resolveSectionState(availability, forcedState)\n\n  return (\n    <Stack gap=\"none\" className=\"min-h-full\">\n      <StateSwitcher projectId={project.id} section={section} current={forcedState} />\n      {state === 'working' ? (\n        children\n      ) : (\n        <SectionStateView state={state} title={SECTIONS[section].label} />\n      )}\n    </Stack>\n  )\n}\n\n/**\n * Deterministic state switcher (brief §11). Links to the same section with each\n * `?state=` value so agents/humans can reproduce every state by URL or click.\n */\nexport function StateSwitcher({\n  projectId,\n  section,\n  current,\n}: {\n  projectId: ProjectId\n  section: SectionId\n  current?: SectionState\n}) {\n  const states: SectionState[] = ['working', 'empty', 'loading', 'error', 'unavailable', 'planned']\n  const activeKey = current ?? 'default'\n  return (\n    <Row\n      gap=\"1\"\n      wrap\n      className=\"shrink-0 border-b border-dashed border-border/70 px-4 py-2 sm:px-6\"\n      data-testid=\"state-switcher\"\n    >\n      <Text size=\"xs\" tone=\"subtle\" mono className=\"mr-1\">\n        state\n      </Text>\n      <Link\n        to={STUDIO_PROJECT_ROUTE}\n        params={{ projectId, _splat: section }}\n        search={{}}\n        className={cn(\n          'rounded-md px-2 py-0.5 font-mono text-xs transition-colors',\n          activeKey === 'default'\n            ? 'bg-accent text-accent-foreground'\n            : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n        )}\n      >\n        default\n      </Link>\n      {states.map((s) => {\n        const active = s === activeKey\n        return (\n          <Link\n            key={s}\n            to={STUDIO_PROJECT_ROUTE}\n            params={{ projectId, _splat: section }}\n            search={{ state: s }}\n            className={cn(\n              'rounded-md px-2 py-0.5 font-mono text-xs transition-colors',\n              active\n                ? 'bg-accent text-accent-foreground'\n                : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n            )}\n          >\n            {s}\n          </Link>\n        )\n      })}\n      <Code tone=\"muted\" className=\"ml-2 hidden sm:inline-flex\">\n        {activeKey === 'default' ? 'auto' : `?state=${activeKey}`}\n      </Code>\n    </Row>\n  )\n}\n"]}

package/dist/components/sections.d.ts

@@ -12,7 +12,6 @@ export interface SectionNavItem {
     label: string;
     description: string;
     icon: LucideIcon;
-    phase: string;
 }
 /** Navigation items in canonical order (brief §8.1 + EC-170). */
 export declare const SECTION_NAV_ITEMS: readonly SectionNavItem[];

package/dist/components/sections.js

@@ -1,14 +1,5 @@
 import { Blocks, Database, Image, Puzzle, Settings, Signpost } from 'lucide-react';
 import { SECTIONS, SECTION_IDS, availabilityOf, sectionIdSchema } from '@elytracms/core/studio-core';
-/** Which Studio phase delivers each section's live surface (for placeholders). */
-const SECTION_PHASE = {
-    components: 'Phase 4',
-    cms: 'Phase 6',
-    routes: 'Milestone B',
-    assets: 'Phase 6',
-    extensions: 'Phase 11',
-    settings: 'Phase 2',
-};
 const ICONS = {
     components: Blocks,
     cms: Database,
@@ -34,7 +25,6 @@ export const SECTION_NAV_ITEMS = NAV_IDS.map((id) => ({
     label: descriptorOf(id).label,
     description: descriptorOf(id).description,
     icon: ICONS[id],
-    phase: SECTION_PHASE[id],
 }));
 export function sectionNavItem(id) {
     return SECTION_NAV_ITEMS.find((item) => item.id === id);

package/dist/components/sections.js.map

@@ -1 +1 @@
-{"version":3,"file":"sections.js","sourceRoot":"","sources":["../../src/components/sections.ts"],"names":[],"mappings":"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","sourcesContent":["import { Blocks, Database, Image, Puzzle, Settings, Signpost } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { SECTIONS, SECTION_IDS, availabilityOf, sectionIdSchema } from '@elytracms/core/studio-core'\nimport type {\n  Project,\n  SectionAvailability,\n  SectionAvailabilityMap,\n  SectionId,\n} from '@elytracms/core/studio-core'\n\n/**\n * App-level navigation ids: the studio-core sections plus surfaces registered\n * by the app itself. `routes` (EC-170) is the first app-registered surface —\n * it lives next to the CMS in the rail and rides on the CMS availability,\n * since routes/redirects are CMS routing concerns (`@elytracms/core/cms-core`).\n */\nexport type StudioNavId = SectionId | 'routes'\n\n/** Which Studio phase delivers each section's live surface (for placeholders). */\nconst SECTION_PHASE: Record<StudioNavId, string> = {\n  components: 'Phase 4',\n  cms: 'Phase 6',\n  routes: 'Milestone B',\n  assets: 'Phase 6',\n  extensions: 'Phase 11',\n  settings: 'Phase 2',\n}\n\nexport interface SectionNavItem {\n  id: StudioNavId\n  label: string\n  description: string\n  icon: LucideIcon\n  phase: string\n}\n\nconst ICONS: Record<StudioNavId, LucideIcon> = {\n  components: Blocks,\n  cms: Database,\n  routes: Signpost,\n  assets: Image,\n  extensions: Puzzle,\n  settings: Settings,\n}\n\n/** Descriptor for the app-registered Routes surface (EC-170). */\nconst ROUTES_DESCRIPTOR = {\n  id: 'routes',\n  label: 'Routes',\n  description: 'View the resolved URL routes & redirects (defined in elytra.config.ts).',\n} as const\n\n/** Canonical nav order: studio-core order with Routes slotted after CMS. */\nconst NAV_IDS: readonly StudioNavId[] = SECTION_IDS.flatMap((id) =>\n  id === 'cms' ? ([id, 'routes'] as const) : [id],\n)\n\nfunction descriptorOf(id: StudioNavId): { label: string; description: string } {\n  return id === 'routes' ? ROUTES_DESCRIPTOR : SECTIONS[id]\n}\n\n/** Navigation items in canonical order (brief §8.1 + EC-170). */\nexport const SECTION_NAV_ITEMS: readonly SectionNavItem[] = NAV_IDS.map((id) => ({\n  id,\n  label: descriptorOf(id).label,\n  description: descriptorOf(id).description,\n  icon: ICONS[id],\n  phase: SECTION_PHASE[id],\n}))\n\nexport function sectionNavItem(id: StudioNavId): SectionNavItem {\n  return SECTION_NAV_ITEMS.find((item) => item.id === id)!\n}\n\n/**\n * Availability for a nav id. App-registered surfaces map onto the section\n * whose data they manage: Routes follows the CMS availability.\n */\nexport function navAvailabilityOf(\n  map: SectionAvailabilityMap,\n  id: StudioNavId,\n): SectionAvailability {\n  return availabilityOf(map, id === 'routes' ? 'cms' : id)\n}\n\n/**\n * The section a project should open to: the first non-`unavailable` section in\n * canonical order. Settings is always available, so this never returns null.\n */\nexport function firstAvailableSection(project: Project): SectionId {\n  const found = SECTION_IDS.find(\n    (id) => availabilityOf(project.settings.sectionAvailability, id) !== 'unavailable',\n  )\n  return found ?? 'settings'\n}\n\n/**\n * Parse the active nav id out of a studio pathname `/$projectId/<section>[/...]`\n * (incl. the app-registered Routes surface, EC-170). Returns null for the bare\n * project URL or an unknown segment. The section is the SECOND path segment —\n * directly after the projectId; there is no `/p` prefix (EC-220). The single\n * source of truth for active-section detection: the shell breadcrumb and the\n * nav rail both read it, so the segment index lives in exactly one place.\n */\nexport function activeSectionFromPath(pathname: string): StudioNavId | null {\n  const segment = pathname.split('/')[2] ?? ''\n  if (segment === 'routes') return 'routes'\n  const parsed = sectionIdSchema.safeParse(segment)\n  return parsed.success ? parsed.data : null\n}\n"]}
+{"version":3,"file":"sections.js","sourceRoot":"","sources":["../../src/components/sections.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAElF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAuBpG,MAAM,KAAK,GAAoC;IAC7C,UAAU,EAAE,MAAM;IAClB,GAAG,EAAE,QAAQ;IACb,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,QAAQ;CACnB,CAAA;AAED,iEAAiE;AACjE,MAAM,iBAAiB,GAAG;IACxB,EAAE,EAAE,QAAQ;IACZ,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,yEAAyE;CAC9E,CAAA;AAEV,4EAA4E;AAC5E,MAAM,OAAO,GAA2B,WAAW,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CACjE,EAAE,KAAK,KAAK,CAAC,CAAC,CAAE,CAAC,EAAE,EAAE,QAAQ,CAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAChD,CAAA;AAED,SAAS,YAAY,CAAC,EAAe;IACnC,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;AAC3D,CAAC;AAED,iEAAiE;AACjE,MAAM,CAAC,MAAM,iBAAiB,GAA8B,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/E,EAAE;IACF,KAAK,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,KAAK;IAC7B,WAAW,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,WAAW;IACzC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;CAChB,CAAC,CAAC,CAAA;AAEH,MAAM,UAAU,cAAc,CAAC,EAAe;IAC5C,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAE,CAAA;AAC1D,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,GAA2B,EAC3B,EAAe;IAEf,OAAO,cAAc,CAAC,GAAG,EAAE,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;AAC1D,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAAgB;IACpD,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAC5B,CAAC,EAAE,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,mBAAmB,EAAE,EAAE,CAAC,KAAK,aAAa,CACnF,CAAA;IACD,OAAO,KAAK,IAAI,UAAU,CAAA;AAC5B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,qBAAqB,CAAC,QAAgB;IACpD,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;IAC5C,IAAI,OAAO,KAAK,QAAQ;QAAE,OAAO,QAAQ,CAAA;IACzC,MAAM,MAAM,GAAG,eAAe,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;IACjD,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;AAC5C,CAAC","sourcesContent":["import { Blocks, Database, Image, Puzzle, Settings, Signpost } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { SECTIONS, SECTION_IDS, availabilityOf, sectionIdSchema } from '@elytracms/core/studio-core'\nimport type {\n  Project,\n  SectionAvailability,\n  SectionAvailabilityMap,\n  SectionId,\n} from '@elytracms/core/studio-core'\n\n/**\n * App-level navigation ids: the studio-core sections plus surfaces registered\n * by the app itself. `routes` (EC-170) is the first app-registered surface —\n * it lives next to the CMS in the rail and rides on the CMS availability,\n * since routes/redirects are CMS routing concerns (`@elytracms/core/cms-core`).\n */\nexport type StudioNavId = SectionId | 'routes'\n\nexport interface SectionNavItem {\n  id: StudioNavId\n  label: string\n  description: string\n  icon: LucideIcon\n}\n\nconst ICONS: Record<StudioNavId, LucideIcon> = {\n  components: Blocks,\n  cms: Database,\n  routes: Signpost,\n  assets: Image,\n  extensions: Puzzle,\n  settings: Settings,\n}\n\n/** Descriptor for the app-registered Routes surface (EC-170). */\nconst ROUTES_DESCRIPTOR = {\n  id: 'routes',\n  label: 'Routes',\n  description: 'View the resolved URL routes & redirects (defined in elytra.config.ts).',\n} as const\n\n/** Canonical nav order: studio-core order with Routes slotted after CMS. */\nconst NAV_IDS: readonly StudioNavId[] = SECTION_IDS.flatMap((id) =>\n  id === 'cms' ? ([id, 'routes'] as const) : [id],\n)\n\nfunction descriptorOf(id: StudioNavId): { label: string; description: string } {\n  return id === 'routes' ? ROUTES_DESCRIPTOR : SECTIONS[id]\n}\n\n/** Navigation items in canonical order (brief §8.1 + EC-170). */\nexport const SECTION_NAV_ITEMS: readonly SectionNavItem[] = NAV_IDS.map((id) => ({\n  id,\n  label: descriptorOf(id).label,\n  description: descriptorOf(id).description,\n  icon: ICONS[id],\n}))\n\nexport function sectionNavItem(id: StudioNavId): SectionNavItem {\n  return SECTION_NAV_ITEMS.find((item) => item.id === id)!\n}\n\n/**\n * Availability for a nav id. App-registered surfaces map onto the section\n * whose data they manage: Routes follows the CMS availability.\n */\nexport function navAvailabilityOf(\n  map: SectionAvailabilityMap,\n  id: StudioNavId,\n): SectionAvailability {\n  return availabilityOf(map, id === 'routes' ? 'cms' : id)\n}\n\n/**\n * The section a project should open to: the first non-`unavailable` section in\n * canonical order. Settings is always available, so this never returns null.\n */\nexport function firstAvailableSection(project: Project): SectionId {\n  const found = SECTION_IDS.find(\n    (id) => availabilityOf(project.settings.sectionAvailability, id) !== 'unavailable',\n  )\n  return found ?? 'settings'\n}\n\n/**\n * Parse the active nav id out of a studio pathname `/$projectId/<section>[/...]`\n * (incl. the app-registered Routes surface, EC-170). Returns null for the bare\n * project URL or an unknown segment. The section is the SECOND path segment —\n * directly after the projectId; there is no `/p` prefix (EC-220). The single\n * source of truth for active-section detection: the shell breadcrumb and the\n * nav rail both read it, so the segment index lives in exactly one place.\n */\nexport function activeSectionFromPath(pathname: string): StudioNavId | null {\n  const segment = pathname.split('/')[2] ?? ''\n  if (segment === 'routes') return 'routes'\n  const parsed = sectionIdSchema.safeParse(segment)\n  return parsed.success ? parsed.data : null\n}\n"]}

package/dist/components/studio-project-screen.d.ts

@@ -11,9 +11,8 @@
  *
  * `projectId` stays a real route param (the `$projectId` segment); the trailing
  * pathname (`_splat`) is matched against the engine route table
- * (`matchStudioRoute`) and the deeper ids (collection / document / component)
- * flow down as props. Every screen already takes its ids as props, so this
- * collapse is mechanical — the package never read deep params through the router;
- * the disappearing route-file wrappers did.
+ * (`matchStudioRoute`) into a module id + segments, and the active module (EC-239)
+ * resolves the screen. Every surface already takes its ids as props, so the
+ * resolver just hands the module its parsed deep-link.
  */
 export declare function StudioProjectScreen(): import("react").JSX.Element;

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

@@ -1,35 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { isSingleton, resolveSingletonDocument } from '@elytracms/core/cms-core';
-import { validSampleGraph } from '@elytracms/core/project-graph';
-import { Link, Navigate, STUDIO_PROJECT_ROUTE, studioPath, useParams, useSearch, } from '@elytracms/studio/router';
+import { Link, Navigate, STUDIO_PROJECT_ROUTE, useParams, useSearch } from '@elytracms/studio/router';
 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 { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session';
 import { useStudio } from './studio-context';
 import { StudioShell } from './studio-shell';
-import { firstAvailableSection } from './sections';
-import { SectionSurface } from './section-surface';
-import { SectionStateView } from './section-state';
-import { SettingsForm } from './settings-form';
-import { AssetLibrary } from './assets/asset-library';
 import { AssetsProvider } from './assets/assets-store';
-import { BuilderProvider } from './builder/builder-store';
 import { CollabProvider } from './collab/collab-context';
-import { RoutesShell } from './routes/routes-shell';
-import { ExtensionsView } from './extensions/extensions-view';
-import { RegistryBrowser } from './components/registry-browser';
-import { ComponentsIndex } from './components/components-index';
-import { ComponentDetail } from './components/component-detail';
-import { CmsSessionGate, ProjectSessionProvider, useProjectSession, } from './project-session';
-import { CmsProvider, useCms } from './cms/cms-store';
-import { CollectionsSidebar } from './cms/collections-sidebar';
-import { CmsIndex } from './cms/cms-index';
-import { CollectionTable } from './cms/collection-table';
-import { DetailEditor } from './cms/detail-editor';
-import { OperationErrorBanner } from './operation-error';
+import { ProjectSessionProvider } from './project-session';
+import { firstAvailableModule, flatPath } from './app-views/module';
+import { useAppViews } from './app-views/default-modules';
 /**
  * EC-223 Stage 6 (catch-all routing): the studio's per-project route component.
  *
@@ -43,10 +25,9 @@ import { OperationErrorBanner } from './operation-error';
  *
  * `projectId` stays a real route param (the `$projectId` segment); the trailing
  * pathname (`_splat`) is matched against the engine route table
- * (`matchStudioRoute`) and the deeper ids (collection / document / component)
- * flow down as props. Every screen already takes its ids as props, so this
- * collapse is mechanical — the package never read deep params through the router;
- * the disappearing route-file wrappers did.
+ * (`matchStudioRoute`) into a module id + segments, and the active module (EC-239)
+ * resolves the screen. Every surface already takes its ids as props, so the
+ * resolver just hands the module its parsed deep-link.
  */
 export function StudioProjectScreen() {
     const params = useParams({ strict: false });
@@ -71,147 +52,47 @@ export function StudioProjectScreen() {
     const search = studioSearch(rawSearch);
     return (_jsx(StudioShell, { project: project, children: _jsx(ProjectSessionProvider, { projectId: project.id, children: _jsx(ProjectProviders, { project: project, children: _jsx(StudioSectionResolver, { project: project, match: match, search: search }) }) }, project.id) }));
 }
-/** The per-project provider stack, mounted once the session source is known. */
+/**
+ * The per-project provider stack, mounted once the session source is known.
+ *
+ * EC-287: there is no project-level builder graph anymore — layouts are code and
+ * the DB holds content only. The block-field canvas mounts its OWN scoped
+ * `BuilderProvider` per document (`composition-field-editor`), so no graph is
+ * threaded here. `CollabProvider` stays as the canvas's session-scoped
+ * presence/perspective store, seeded graph-lessly.
+ */
 function ProjectProviders({ project, children }) {
-    const { session } = useProjectSession();
-    // A project created from a starter kit (EC-119) opens on the kit's graph —
-    // but only until something is persisted: the hydrated revision wins.
-    const kit = getInstantiatedKit(project.id);
-    const graph = session?.graph ?? kit?.graph ?? validSampleGraph;
     return (
-    // Key by project id so the session data sources + graph reset when switching projects.
-    // One canonical graph per project session: the Builder canvas and its Content tab
-    // (bindings, repeating sections, template pages) read the same live graph. The data
-    // store hydrates/persists this project's `cms-data-sources` records.
-    _jsx(DataProvider, { projectId: project.id, children: _jsx(BuilderProvider, { graph: graph, projectId: project.id, children: _jsx(AssetsProvider, { projectId: project.id, children: _jsx(CollabProvider, { projectId: project.id, graph: graph, publish: session?.publish, children: children }, project.id) }, project.id) }, project.id) }, project.id));
+    // Key by project id so the session data sources reset when switching projects.
+    // The data store hydrates/persists this project's `cms-data-sources` records.
+    _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) — what the per-section `<Outlet />`s
- * used to resolve. Renders inside the shell + provider stack, so every screen
- * sees the same live graph, CMS store, and breadcrumb context the file routes
- * gave it. `index` and `builder` are redirect-only screens, kept here (rather
- * than short-circuited before the shell) because the retired routes nested under
- * the project layout too — they mounted the stack and then navigated, exact
- * parity.
+ * 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
+ * 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;
-    switch (match.section) {
-        case 'index':
-            // Bare `/$projectId` → the project's first available section.
-            return (_jsx(Navigate, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: firstAvailableSection(project) }, replace: true }));
-        case 'settings':
-            return (_jsx(SectionSurface, { project: project, section: "settings", forcedState: search.state, children: _jsx(SettingsForm, { project: project }) }));
-        case 'assets':
-            return (_jsx(SectionSurface, { project: project, section: "assets", forcedState: search.state, children: _jsx(AssetLibrary, { projectId: projectId, focusAssetId: search.asset }) }));
-        case 'routes':
-            // Deterministic forced states (?state=) for the surface (EC-036).
-            return search.state && search.state !== 'working' ? (_jsx(SectionStateView, { state: search.state, title: "Routes" })) : (_jsx(RoutesShell, { project: project }));
-        case 'extensions':
-            return search.state && search.state !== 'working' ? (_jsx(SectionStateView, { state: search.state, title: "Extensions" })) : (_jsx(ExtensionsView, {}));
-        case 'builder':
-            // Retired surface (EC-187 slice 6): a page is a document in the `page`
-            // collection. A `?page=<id>` deep link lands on that document's editor;
-            // otherwise the page-collection list. The page-graph-only params have no
-            // home here and are dropped.
-            return (_jsx(Navigate, { to: STUDIO_PROJECT_ROUTE, params: {
-                    projectId,
-                    _splat: search.page
-                        ? studioPath.cmsDocument('page', search.page)
-                        : studioPath.cmsCollection('page'),
-                }, replace: true }));
-        case 'components':
-            return (_jsx(ComponentsScreen, { projectId: projectId, componentId: match.componentId, state: search.state }));
-        case 'cms':
-            return (_jsx(CmsScreen, { project: project, collectionId: match.collectionId, documentId: match.documentId, state: search.state, field: search.field }));
-        case 'not-found':
-        default:
-            return _jsx(StudioRouteNotFound, {});
-    }
-}
-/**
- * Components section (EC-050): a registry-browser sidebar beside the active
- * screen — the index (no selection) or a component's detail. Forced states
- * (?state=) replace the whole surface.
- */
-function ComponentsScreen({ projectId, componentId, state, }) {
-    if (state && state !== 'working') {
-        return _jsx(SectionStateView, { state: state, title: "Components" });
-    }
-    return (_jsxs("div", { className: "flex h-full min-h-0", children: [_jsx("aside", { className: "hidden h-full min-h-0 w-[300px] shrink-0 border-r border-border md:block", children: _jsx(RegistryBrowser, { projectId: projectId, activeComponentId: componentId ?? undefined }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: componentId === null ? (_jsx(ComponentsIndex, { projectId: projectId })) : (_jsx(ComponentDetail, { projectId: projectId, componentId: componentId })) })] }));
-}
-/**
- * CMS section: hydrates the persisted (or kit-seeded) collections + documents,
- * then renders the collections sidebar beside the active screen (index, a
- * collection table, or a document editor). Forced states (?state=) replace the
- * whole surface before the provider mounts.
- */
-function CmsScreen({ project, collectionId, documentId, state, field, }) {
-    const projectId = project.id;
-    if (state && state !== 'working') {
-        return _jsx(SectionStateView, { state: state, title: "CMS" });
-    }
-    // A project created from a starter kit (EC-119) opens the CMS on the kit's schemas + content.
-    const kit = getInstantiatedKit(projectId);
-    return (
-    // EC-177 gap 1: in Convex mode every CMS mount loads the CURRENT persisted
-    // schema + documents (fixtures only when nothing is persisted — first run).
-    // Playground renders synchronously with `null` → fixture seeds, as before.
-    _jsx(CmsSessionGate, { children: (cms) => (_jsx(CmsProvider, { projectId: projectId, initialCollections: cms?.collections ?? kit?.collections, initialDocuments: cms?.documents ?? kit?.documents, initialPublishedKeys: cms?.publishedKeys, initialLocaleConfig: cms
-                ? // Hydrated sessions follow the project's persisted locale settings.
-                    { default: project.settings.defaultLocale, locales: [...project.settings.locales] }
-                : kit?.localeConfig, children: _jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(CmsPersistErrorBanner, {}), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx("aside", { className: "hidden h-full min-h-0 w-[240px] shrink-0 border-r border-border md:block", children: _jsx(CollectionsSidebar, { projectId: projectId, activeCollectionId: collectionId ?? undefined }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(CmsContent, { projectId: projectId, collectionId: collectionId, documentId: documentId, field: field }) })] })] }) }, projectId)) }));
-}
-/** Resolves the active CMS screen inside the provider (needs the live store). */
-function CmsContent({ projectId, collectionId, documentId, field, }) {
-    const cms = useCms();
-    if (collectionId === null)
-        return _jsx(CmsIndex, { projectId: projectId });
-    if (documentId === null) {
-        const collection = cms.getCollection(collectionId);
-        // EC-274: a singleton is a UI lens — at the collection URL it opens its one
-        // document directly *while in its expected shape*, but degrades to the list
-        // (with a "for review" lane) on drift. SingletonGate decides per the data.
-        if (collection && isSingleton(collection)) {
-            return _jsx(SingletonGate, { projectId: projectId, collectionId: collectionId });
-        }
-        return _jsx(CollectionTable, { projectId: projectId, collectionId: collectionId });
+    const appViews = useAppViews();
+    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 }));
     }
-    return (_jsx(DetailEditor, { projectId: projectId, collectionId: collectionId, documentId: documentId, focusPath: field }));
-}
-/**
- * EC-274 — the singleton lens gate. At a singleton collection's URL, resolve its
- * lone document and open it directly; on drift (> 1 document) fall back to the
- * list with the "for review" lane so an editor can resolve the conflict. The one
- * document keeps a normal id — nothing here names a literal document id.
- */
-function SingletonGate({ projectId, collectionId }) {
-    const cms = useCms();
-    const collection = cms.getCollection(collectionId);
-    const docs = cms.documentsOf(collectionId);
-    const resolution = collection
-        ? resolveSingletonDocument(collection, docs)
-        : { kind: 'empty' };
-    // Materialize the lone document on first visit (an empty draft, persisted like
-    // any create). Idempotent in the store; only fires while genuinely empty.
-    useEffect(() => {
-        if (resolution.kind === 'empty')
-            cms.ensureSingletonDocument(collectionId);
-    }, [resolution.kind, cms, collectionId]);
-    if (resolution.kind === 'ready') {
-        return (_jsx(DetailEditor, { projectId: projectId, collectionId: collectionId, documentId: resolution.doc.id }));
-    }
-    if (resolution.kind === 'drift') {
-        return _jsx(CollectionTable, { projectId: projectId, collectionId: collectionId });
-    }
-    return (_jsx("div", { className: "grid h-full place-items-center p-8", children: _jsxs(Text, { size: "sm", tone: "muted", children: ["Opening ", collection?.form?.label ?? collectionId, "\u2026"] }) }));
-}
-/** Failed/denied persisted CMS mutations are always visible (EC-141). */
-function CmsPersistErrorBanner() {
-    const cms = useCms();
-    if (!cms.persistError)
-        return null;
-    return (_jsx("div", { className: "shrink-0 border-b border-border p-2", children: _jsx(OperationErrorBanner, { error: cms.persistError, onDismiss: cms.clearPersistError }) }));
+    const module = appViews.get(match.moduleId);
+    if (!module)
+        return _jsx(StudioRouteNotFound, {});
+    // A flat module (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);
+    if (deepLink === null)
+        return _jsx(StudioRouteNotFound, {});
+    return _jsx(_Fragment, { children: module.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" }) })] }) }));