@elytracms/studio 0.0.32 → 0.0.33

package/dist/components/cms/view-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-bar.js","sourceRoot":"","sources":["../../../src/components/cms/view-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react'\nimport { ArrowDown, ArrowUp, Check, List, ListTree, SlidersHorizontal } from 'lucide-react'\nimport type { CollectionDef } from '@elytracms/core/cms-core'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  Row,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { moveColumn, resolveColumns, toggleColumn } from '@elytracms/studio/lib/cms-views'\nimport { fieldLabel } from './cms-store'\nimport { useCollectionView } from '../collection-view/collection-view-context'\n\n/**\n * The view selector of the collection table (EC-169) — a segmented control that\n * switches between the built-in \"All documents\" default and the project's\n * code-defined views (EC-246b: views are config-as-code, so this only *picks* a\n * lens; it never creates, edits, or deletes one at runtime). Renders nothing\n * when the default view is the only one — no lonely single-tab chrome. Shares\n * the segmented-control language of the locale switcher for a consistent header.\n *\n * AD-19: reads the named-views capability off the portable {@link useCollectionView}\n * source, so a rail without config-declared views simply shows no selector.\n */\nexport function ViewTabs() {\n  const source = useCollectionView()\n  const views = source.views?.list() ?? []\n\n  // A single (default) view needs no selector — the breadcrumb names the collection.\n  if (views.length <= 1) return null\n\n  const activeId = source.views?.activeId()\n  const active = views.find((view) => view.id === activeId) ?? views[0]!\n\n  return (\n    <Row gap=\"px\" className=\"rounded-md bg-muted/50 p-0.5\" data-testid=\"view-bar\">\n      {views.map((view) => (\n        <button\n          key={view.id}\n          type=\"button\"\n          aria-pressed={view.id === active.id}\n          data-testid={`view-chip-${view.id}`}\n          onClick={() => source.views?.setActive(view.id)}\n          className={cn(\n            'rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors',\n            view.id === active.id\n              ? 'bg-background text-foreground shadow-sm'\n              : 'text-muted-foreground hover:text-foreground',\n          )}\n        >\n          {view.name}\n        </button>\n      ))}\n    </Row>\n  )\n}\n\n/**\n * Display options for the collection table (EC-246a) — one far-right control,\n * aligned with where per-row actions live, folding together how the list is\n * *shown*: the page hierarchy layout (flat vs tree, for hierarchical collections)\n * and visible/ordered columns. Column order is a property of all columns (visible\n * or not); the first visible column is the title/link and can't be hidden.\n */\nexport function DisplayMenu({\n  collection,\n  hierarchical,\n  treeMode,\n  onToggleTree,\n}: {\n  collection: CollectionDef\n  hierarchical: boolean\n  treeMode: boolean\n  onToggleTree: (tree: boolean) => void\n}) {\n  const source = useCollectionView()\n  const state = source.viewState()\n  const columns = resolveColumns(collection, state)\n  const titleField = columns.find((column) => column.visible)?.field\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"icon-sm\"\n          aria-label=\"Display options\"\n          title=\"Display: layout and columns\"\n          data-testid=\"display-menu\"\n        >\n          <SlidersHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-64\">\n        {hierarchical ? (\n          <>\n            <DropdownMenuLabel>Layout</DropdownMenuLabel>\n            <LayoutOption\n              label=\"Flat list\"\n              icon={<List />}\n              active={!treeMode}\n              onSelect={() => onToggleTree(false)}\n            />\n            <LayoutOption\n              label=\"Page hierarchy\"\n              icon={<ListTree />}\n              active={treeMode}\n              onSelect={() => onToggleTree(true)}\n            />\n            <DropdownMenuSeparator />\n          </>\n        ) : null}\n        <DropdownMenuLabel>Columns · first visible is the title</DropdownMenuLabel>\n        {columns.map((column, index) => {\n          const field = collection.fields.find((f) => f.name === column.field)\n          if (!field) return null\n          const isTitle = column.field === titleField\n          return (\n            <DropdownMenuItem\n              key={column.field}\n              onSelect={(event) => event.preventDefault()}\n              data-testid={`column-row-${column.field}`}\n            >\n              <input\n                type=\"checkbox\"\n                className=\"size-3.5 accent-primary\"\n                checked={column.visible}\n                disabled={isTitle}\n                onChange={() =>\n                  source.setViewState((prev) => toggleColumn(collection, prev, column.field))\n                }\n                aria-label={`Toggle column ${fieldLabel(field)}`}\n                data-testid={`column-toggle-${column.field}`}\n              />\n              <Text as=\"span\" size=\"sm\" className=\"min-w-0 flex-1 truncate\">\n                {fieldLabel(field)}\n                {isTitle ? (\n                  <Text as=\"span\" size=\"xs\" tone=\"subtle\">\n                    {' '}\n                    (title)\n                  </Text>\n                ) : null}\n              </Text>\n              <Row gap=\"1\">\n                <ColumnMoveButton\n                  label={`Move column ${fieldLabel(field)} up`}\n                  icon={<ArrowUp />}\n                  disabled={index <= 0}\n                  onMove={() =>\n                    source.setViewState((prev) => moveColumn(collection, prev, column.field, -1))\n                  }\n                />\n                <ColumnMoveButton\n                  label={`Move column ${fieldLabel(field)} down`}\n                  icon={<ArrowDown />}\n                  disabled={index >= columns.length - 1}\n                  onMove={() =>\n                    source.setViewState((prev) => moveColumn(collection, prev, column.field, 1))\n                  }\n                />\n              </Row>\n            </DropdownMenuItem>\n          )\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** One layout choice (flat vs tree) — a checkmark marks the active mode. */\nfunction LayoutOption({\n  label,\n  icon,\n  active,\n  onSelect,\n}: {\n  label: string\n  icon: ReactNode\n  active: boolean\n  onSelect: () => void\n}) {\n  return (\n    <DropdownMenuItem\n      data-testid={`layout-${active ? 'active' : 'option'}`}\n      onSelect={(event) => {\n        event.preventDefault()\n        onSelect()\n      }}\n    >\n      {icon}\n      <Text as=\"span\" size=\"sm\" className=\"min-w-0 flex-1 truncate\">\n        {label}\n      </Text>\n      {active ? <Check className=\"size-3.5 text-primary\" /> : null}\n    </DropdownMenuItem>\n  )\n}\n\nfunction ColumnMoveButton({\n  label,\n  icon,\n  disabled,\n  onMove,\n}: {\n  label: string\n  icon: ReactNode\n  disabled: boolean\n  onMove: () => void\n}) {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className=\"size-5 [&_svg]:size-3\"\n      aria-label={label}\n      disabled={disabled}\n      onClick={(event) => {\n        event.preventDefault()\n        event.stopPropagation()\n        onMove()\n      }}\n    >\n      {icon}\n    </Button>\n  )\n}\n"]}
+{"version":3,"file":"view-bar.js","sourceRoot":"","sources":["../../../src/components/cms/view-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react'\nimport { ArrowDown, ArrowUp, Check, List, ListTree, SlidersHorizontal } from 'lucide-react'\nimport type { CollectionDef } from '@elytracms/core/cms-core'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  Row,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { moveColumn, resolveColumns, toggleColumn } from '@elytracms/studio/lib/cms-views'\nimport { fieldLabel } from './cms-store'\nimport { useCollectionView } from '../collection-view/collection-view-context'\n\n/**\n * The view selector of the collection table (EC-169) — a segmented control that\n * switches between the built-in \"All documents\" default and the project's\n * code-defined views (EC-246b: views are config-as-code, so this only *picks* a\n * lens; it never creates, edits, or deletes one at runtime). Renders nothing\n * when the default view is the only one — no lonely single-tab chrome. Shares\n * the segmented-control language of the locale switcher for a consistent header.\n *\n * AD-19: reads the named-views capability off the portable {@link useCollectionView}\n * source, so a rail without config-declared views simply shows no selector.\n */\nexport function ViewTabs() {\n  const source = useCollectionView()\n  const views = source.views?.list() ?? []\n\n  // A single (default) view needs no selector — the breadcrumb names the collection.\n  if (views.length <= 1) return null\n\n  const activeId = source.views?.activeId()\n  const active = views.find((view) => view.id === activeId) ?? views[0]!\n\n  return (\n    <Row gap=\"px\" className=\"rounded-md bg-muted/50 p-0.5\" data-testid=\"view-bar\">\n      {views.map((view) => (\n        <button\n          key={view.id}\n          type=\"button\"\n          aria-pressed={view.id === active.id}\n          data-testid={`view-chip-${view.id}`}\n          onClick={() => source.views?.setActive(view.id)}\n          className={cn(\n            'rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors',\n            view.id === active.id\n              ? 'bg-background text-foreground shadow-sm'\n              : 'text-muted-foreground hover:text-foreground',\n          )}\n        >\n          {view.name}\n        </button>\n      ))}\n    </Row>\n  )\n}\n\n/**\n * Display options for the collection table (EC-246a) — one far-right control,\n * aligned with where per-row actions live, folding together how the list is\n * *shown*: the page hierarchy layout (flat vs tree, for hierarchical collections)\n * and visible/ordered columns. Column order is a property of all columns (visible\n * or not); the first visible column is the title/link and can't be hidden.\n */\nexport function DisplayMenu({\n  collection,\n  hierarchical,\n  treeMode,\n  onToggleTree,\n}: {\n  collection: CollectionDef\n  hierarchical: boolean\n  treeMode: boolean\n  onToggleTree: (tree: boolean) => void\n}) {\n  const source = useCollectionView()\n  const state = source.viewState()\n  const columns = resolveColumns(collection, state)\n  const titleField = columns.find((column) => column.visible)?.field\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"icon-sm\"\n          aria-label={translate('cms.list.display.ariaLabel')}\n          title={translate('cms.list.display.title')}\n          data-testid=\"display-menu\"\n        >\n          <SlidersHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-64\">\n        {hierarchical ? (\n          <>\n            <DropdownMenuLabel>{translate('cms.list.display.layout')}</DropdownMenuLabel>\n            <LayoutOption\n              label={translate('cms.list.display.flatList')}\n              icon={<List />}\n              active={!treeMode}\n              onSelect={() => onToggleTree(false)}\n            />\n            <LayoutOption\n              label={translate('cms.list.display.pageHierarchy')}\n              icon={<ListTree />}\n              active={treeMode}\n              onSelect={() => onToggleTree(true)}\n            />\n            <DropdownMenuSeparator />\n          </>\n        ) : null}\n        <DropdownMenuLabel>{translate('cms.list.display.columns')}</DropdownMenuLabel>\n        {columns.map((column, index) => {\n          const field = collection.fields.find((f) => f.name === column.field)\n          if (!field) return null\n          const isTitle = column.field === titleField\n          return (\n            <DropdownMenuItem\n              key={column.field}\n              onSelect={(event) => event.preventDefault()}\n              data-testid={`column-row-${column.field}`}\n            >\n              <input\n                type=\"checkbox\"\n                className=\"size-3.5 accent-primary\"\n                checked={column.visible}\n                disabled={isTitle}\n                onChange={() =>\n                  source.setViewState((prev) => toggleColumn(collection, prev, column.field))\n                }\n                aria-label={translate('cms.list.display.toggleColumn', { field: fieldLabel(field) })}\n                data-testid={`column-toggle-${column.field}`}\n              />\n              <Text as=\"span\" size=\"sm\" className=\"min-w-0 flex-1 truncate\">\n                {fieldLabel(field)}\n                {isTitle ? (\n                  <Text as=\"span\" size=\"xs\" tone=\"subtle\">\n                    {' '}\n                    {translate('cms.list.display.titleTag')}\n                  </Text>\n                ) : null}\n              </Text>\n              <Row gap=\"1\">\n                <ColumnMoveButton\n                  label={translate('cms.list.display.moveColumnUp', { field: fieldLabel(field) })}\n                  icon={<ArrowUp />}\n                  disabled={index <= 0}\n                  onMove={() =>\n                    source.setViewState((prev) => moveColumn(collection, prev, column.field, -1))\n                  }\n                />\n                <ColumnMoveButton\n                  label={translate('cms.list.display.moveColumnDown', { field: fieldLabel(field) })}\n                  icon={<ArrowDown />}\n                  disabled={index >= columns.length - 1}\n                  onMove={() =>\n                    source.setViewState((prev) => moveColumn(collection, prev, column.field, 1))\n                  }\n                />\n              </Row>\n            </DropdownMenuItem>\n          )\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** One layout choice (flat vs tree) — a checkmark marks the active mode. */\nfunction LayoutOption({\n  label,\n  icon,\n  active,\n  onSelect,\n}: {\n  label: string\n  icon: ReactNode\n  active: boolean\n  onSelect: () => void\n}) {\n  return (\n    <DropdownMenuItem\n      data-testid={`layout-${active ? 'active' : 'option'}`}\n      onSelect={(event) => {\n        event.preventDefault()\n        onSelect()\n      }}\n    >\n      {icon}\n      <Text as=\"span\" size=\"sm\" className=\"min-w-0 flex-1 truncate\">\n        {label}\n      </Text>\n      {active ? <Check className=\"size-3.5 text-primary\" /> : null}\n    </DropdownMenuItem>\n  )\n}\n\nfunction ColumnMoveButton({\n  label,\n  icon,\n  disabled,\n  onMove,\n}: {\n  label: string\n  icon: ReactNode\n  disabled: boolean\n  onMove: () => void\n}) {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className=\"size-5 [&_svg]:size-3\"\n      aria-label={label}\n      disabled={disabled}\n      onClick={(event) => {\n        event.preventDefault()\n        event.stopPropagation()\n        onMove()\n      }}\n    >\n      {icon}\n    </Button>\n  )\n}\n"]}

package/dist/components/components/component-detail.js

@@ -8,6 +8,7 @@ import { FieldInspector } from '@elytracms/studio/components/components/field-in
 import { FixtureRunner } from '@elytracms/studio/components/components/fixture-runner';
 import { ReferencesPanel } from '@elytracms/studio/components/references/references-panel';
 import { useSetBreadcrumb } from '@elytracms/studio/components/breadcrumb-context';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { Badge, Code, Heading, Row, Spacer, Stack, Text } from '@elytracms/studio/ui';
 /**
  * The component detail view (EC-223 Stage 6): manifest metadata, the field/slot
@@ -21,10 +22,10 @@ export function ComponentDetail({ projectId, componentId, }) {
     // breadcrumb (under the Components section crumb).
     useSetBreadcrumb([{ label: manifest?.title ?? manifest?.id ?? componentId }]);
     if (!manifest) {
-        return (_jsx("div", { className: "grid h-full place-items-center p-8", children: _jsxs(Stack, { gap: "3", align: "center", className: "max-w-sm text-center", children: [_jsx(Heading, { level: 2, size: "h2", children: "Component not found" }), _jsxs(Text, { tone: "muted", children: ["No component is registered with id ", _jsx(Code, { tone: "muted", children: componentId }), "."] }), _jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.components() }, className: "text-sm text-primary hover:underline", children: "Back to components" })] }) }));
+        return (_jsx("div", { className: "grid h-full place-items-center p-8", children: _jsxs(Stack, { gap: "3", align: "center", className: "max-w-sm text-center", children: [_jsx(Heading, { level: 2, size: "h2", children: translate('components.detail.notFound.title') }), _jsx(Text, { tone: "muted", children: translate('components.detail.notFound.body', { id: componentId }) }), _jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.components() }, className: "text-sm text-primary hover:underline", children: translate('components.detail.notFound.back') })] }) }));
     }
     const status = componentStatus(studio, manifest);
     const namespace = isPrimitive(manifest.id) ? 'base.primitives' : 'project';
-    return (_jsxs("div", { className: "mx-auto w-full max-w-4xl p-4 sm:p-6", children: [_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.components() }, className: "mb-3 inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground md:hidden", children: [_jsx(ArrowLeft, { className: "size-3.5" }), " All components"] }), _jsxs(Stack, { gap: "6", children: [_jsxs(Stack, { gap: "2", children: [_jsxs(Row, { gap: "2", wrap: true, children: [_jsx(Heading, { size: "display", children: manifest.title ?? manifest.id }), _jsx(Badge, { variant: namespace === 'project' ? 'primary' : 'outline', children: namespace }), manifest.category ? _jsx(Badge, { variant: "outline", children: manifest.category }) : null, _jsx(Spacer, {}), _jsx(ComponentStatusBadge, { status: status })] }), _jsx(Code, { tone: "muted", className: "w-fit", children: manifest.id }), manifest.description ? (_jsx(Text, { tone: "muted", className: "max-w-prose", children: manifest.description })) : null, status !== 'valid' ? (_jsx(Text, { size: "sm", className: status === 'invalid' ? 'text-destructive' : 'text-warning', children: statusDescription(status) })) : null] }), manifest.designTokens && manifest.designTokens.length > 0 ? (_jsxs(Stack, { gap: "1", children: [_jsx(Text, { size: "xs", tone: "muted", mono: true, children: "DESIGN TOKENS" }), _jsx(Row, { gap: "1", wrap: true, children: manifest.designTokens.map((token) => (_jsx(Code, { tone: "muted", children: token }, token))) })] })) : null, _jsx(FixtureRunner, { manifest: manifest }, manifest.id), _jsx(FieldInspector, { manifest: manifest }), _jsx(ReferencesPanel, { projectId: projectId, target: { type: 'component', id: manifest.id } })] })] }));
+    return (_jsxs("div", { className: "mx-auto w-full max-w-4xl p-4 sm:p-6", children: [_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.components() }, className: "mb-3 inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground md:hidden", children: [_jsx(ArrowLeft, { className: "size-3.5" }), " ", translate('components.detail.allComponents')] }), _jsxs(Stack, { gap: "6", children: [_jsxs(Stack, { gap: "2", children: [_jsxs(Row, { gap: "2", wrap: true, children: [_jsx(Heading, { size: "display", children: manifest.title ?? manifest.id }), _jsx(Badge, { variant: namespace === 'project' ? 'primary' : 'outline', children: namespace }), manifest.category ? _jsx(Badge, { variant: "outline", children: manifest.category }) : null, _jsx(Spacer, {}), _jsx(ComponentStatusBadge, { status: status })] }), _jsx(Code, { tone: "muted", className: "w-fit", children: manifest.id }), manifest.description ? (_jsx(Text, { tone: "muted", className: "max-w-prose", children: manifest.description })) : null, status !== 'valid' ? (_jsx(Text, { size: "sm", className: status === 'invalid' ? 'text-destructive' : 'text-warning', children: statusDescription(status) })) : null] }), manifest.designTokens && manifest.designTokens.length > 0 ? (_jsxs(Stack, { gap: "1", children: [_jsx(Text, { size: "xs", tone: "muted", mono: true, children: translate('components.detail.designTokens') }), _jsx(Row, { gap: "1", wrap: true, children: manifest.designTokens.map((token) => (_jsx(Code, { tone: "muted", children: token }, token))) })] })) : null, _jsx(FixtureRunner, { manifest: manifest }, manifest.id), _jsx(FieldInspector, { manifest: manifest }), _jsx(ReferencesPanel, { projectId: projectId, target: { type: 'component', id: manifest.id } })] })] }));
 }
 //# sourceMappingURL=component-detail.js.map

package/dist/components/components/component-detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../src/components/components/component-detail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ArrowLeft } from 'lucide-react'\nimport { isPrimitive } from '@elytracms/core/component-registry'\nimport { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router'\nimport { componentStatus, getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport {\n  ComponentStatusBadge,\n  statusDescription,\n} from '@elytracms/studio/components/components/component-status'\nimport { FieldInspector } from '@elytracms/studio/components/components/field-inspector'\nimport { FixtureRunner } from '@elytracms/studio/components/components/fixture-runner'\nimport { ReferencesPanel } from '@elytracms/studio/components/references/references-panel'\nimport { useSetBreadcrumb } from '@elytracms/studio/components/breadcrumb-context'\nimport { Badge, Code, Heading, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\n\n/**\n * The component detail view (EC-223 Stage 6): manifest metadata, the field/slot\n * inspector, the fixture runner, and inbound references. Takes its ids as props\n * — the splat resolver sources `componentId` from the engine route table.\n */\nexport function ComponentDetail({\n  projectId,\n  componentId,\n}: {\n  projectId: string\n  componentId: string\n}) {\n  const studio = getStudioRegistry()\n  const manifest = studio.registry.getManifest(componentId)\n\n  // EC-214: the component is the active record — name it in the global header\n  // breadcrumb (under the Components section crumb).\n  useSetBreadcrumb([{ label: manifest?.title ?? manifest?.id ?? componentId }])\n\n  if (!manifest) {\n    return (\n      <div className=\"grid h-full place-items-center p-8\">\n        <Stack gap=\"3\" align=\"center\" className=\"max-w-sm text-center\">\n          <Heading level={2} size=\"h2\">\n            Component not found\n          </Heading>\n          <Text tone=\"muted\">\n            No component is registered with id <Code tone=\"muted\">{componentId}</Code>.\n          </Text>\n          <Link\n            to={STUDIO_PROJECT_ROUTE}\n            params={{ projectId, _splat: studioPath.components() }}\n            className=\"text-sm text-primary hover:underline\"\n          >\n            Back to components\n          </Link>\n        </Stack>\n      </div>\n    )\n  }\n\n  const status = componentStatus(studio, manifest)\n  const namespace = isPrimitive(manifest.id) ? 'base.primitives' : 'project'\n\n  return (\n    <div className=\"mx-auto w-full max-w-4xl p-4 sm:p-6\">\n      <Link\n        to={STUDIO_PROJECT_ROUTE}\n        params={{ projectId, _splat: studioPath.components() }}\n        className=\"mb-3 inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground md:hidden\"\n      >\n        <ArrowLeft className=\"size-3.5\" /> All components\n      </Link>\n\n      <Stack gap=\"6\">\n        {/* Header */}\n        <Stack gap=\"2\">\n          <Row gap=\"2\" wrap>\n            <Heading size=\"display\">{manifest.title ?? manifest.id}</Heading>\n            <Badge variant={namespace === 'project' ? 'primary' : 'outline'}>{namespace}</Badge>\n            {manifest.category ? <Badge variant=\"outline\">{manifest.category}</Badge> : null}\n            <Spacer />\n            <ComponentStatusBadge status={status} />\n          </Row>\n          <Code tone=\"muted\" className=\"w-fit\">\n            {manifest.id}\n          </Code>\n          {manifest.description ? (\n            <Text tone=\"muted\" className=\"max-w-prose\">\n              {manifest.description}\n            </Text>\n          ) : null}\n          {status !== 'valid' ? (\n            <Text size=\"sm\" className={status === 'invalid' ? 'text-destructive' : 'text-warning'}>\n              {statusDescription(status)}\n            </Text>\n          ) : null}\n        </Stack>\n\n        {/* Design tokens */}\n        {manifest.designTokens && manifest.designTokens.length > 0 ? (\n          <Stack gap=\"1\">\n            <Text size=\"xs\" tone=\"muted\" mono>\n              DESIGN TOKENS\n            </Text>\n            <Row gap=\"1\" wrap>\n              {manifest.designTokens.map((token) => (\n                <Code key={token} tone=\"muted\">\n                  {token}\n                </Code>\n              ))}\n            </Row>\n          </Stack>\n        ) : null}\n\n        {/* Fixture runner — keyed so state resets when switching components. */}\n        <FixtureRunner key={manifest.id} manifest={manifest} />\n\n        {/* Field inspector */}\n        <FieldInspector manifest={manifest} />\n\n        {/* Where is this component used? (EC-172, inbound over the EC-155 index) */}\n        <ReferencesPanel projectId={projectId} target={{ type: 'component', id: manifest.id }} />\n      </Stack>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../src/components/components/component-detail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ArrowLeft } from 'lucide-react'\nimport { isPrimitive } from '@elytracms/core/component-registry'\nimport { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router'\nimport { componentStatus, getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport {\n  ComponentStatusBadge,\n  statusDescription,\n} from '@elytracms/studio/components/components/component-status'\nimport { FieldInspector } from '@elytracms/studio/components/components/field-inspector'\nimport { FixtureRunner } from '@elytracms/studio/components/components/fixture-runner'\nimport { ReferencesPanel } from '@elytracms/studio/components/references/references-panel'\nimport { useSetBreadcrumb } from '@elytracms/studio/components/breadcrumb-context'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { Badge, Code, Heading, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\n\n/**\n * The component detail view (EC-223 Stage 6): manifest metadata, the field/slot\n * inspector, the fixture runner, and inbound references. Takes its ids as props\n * — the splat resolver sources `componentId` from the engine route table.\n */\nexport function ComponentDetail({\n  projectId,\n  componentId,\n}: {\n  projectId: string\n  componentId: string\n}) {\n  const studio = getStudioRegistry()\n  const manifest = studio.registry.getManifest(componentId)\n\n  // EC-214: the component is the active record — name it in the global header\n  // breadcrumb (under the Components section crumb).\n  useSetBreadcrumb([{ label: manifest?.title ?? manifest?.id ?? componentId }])\n\n  if (!manifest) {\n    return (\n      <div className=\"grid h-full place-items-center p-8\">\n        <Stack gap=\"3\" align=\"center\" className=\"max-w-sm text-center\">\n          <Heading level={2} size=\"h2\">\n            {translate('components.detail.notFound.title')}\n          </Heading>\n          <Text tone=\"muted\">\n            {translate('components.detail.notFound.body', { id: componentId })}\n          </Text>\n          <Link\n            to={STUDIO_PROJECT_ROUTE}\n            params={{ projectId, _splat: studioPath.components() }}\n            className=\"text-sm text-primary hover:underline\"\n          >\n            {translate('components.detail.notFound.back')}\n          </Link>\n        </Stack>\n      </div>\n    )\n  }\n\n  const status = componentStatus(studio, manifest)\n  const namespace = isPrimitive(manifest.id) ? 'base.primitives' : 'project'\n\n  return (\n    <div className=\"mx-auto w-full max-w-4xl p-4 sm:p-6\">\n      <Link\n        to={STUDIO_PROJECT_ROUTE}\n        params={{ projectId, _splat: studioPath.components() }}\n        className=\"mb-3 inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground md:hidden\"\n      >\n        <ArrowLeft className=\"size-3.5\" /> {translate('components.detail.allComponents')}\n      </Link>\n\n      <Stack gap=\"6\">\n        {/* Header */}\n        <Stack gap=\"2\">\n          <Row gap=\"2\" wrap>\n            <Heading size=\"display\">{manifest.title ?? manifest.id}</Heading>\n            <Badge variant={namespace === 'project' ? 'primary' : 'outline'}>{namespace}</Badge>\n            {manifest.category ? <Badge variant=\"outline\">{manifest.category}</Badge> : null}\n            <Spacer />\n            <ComponentStatusBadge status={status} />\n          </Row>\n          <Code tone=\"muted\" className=\"w-fit\">\n            {manifest.id}\n          </Code>\n          {manifest.description ? (\n            <Text tone=\"muted\" className=\"max-w-prose\">\n              {manifest.description}\n            </Text>\n          ) : null}\n          {status !== 'valid' ? (\n            <Text size=\"sm\" className={status === 'invalid' ? 'text-destructive' : 'text-warning'}>\n              {statusDescription(status)}\n            </Text>\n          ) : null}\n        </Stack>\n\n        {/* Design tokens */}\n        {manifest.designTokens && manifest.designTokens.length > 0 ? (\n          <Stack gap=\"1\">\n            <Text size=\"xs\" tone=\"muted\" mono>\n              {translate('components.detail.designTokens')}\n            </Text>\n            <Row gap=\"1\" wrap>\n              {manifest.designTokens.map((token) => (\n                <Code key={token} tone=\"muted\">\n                  {token}\n                </Code>\n              ))}\n            </Row>\n          </Stack>\n        ) : null}\n\n        {/* Fixture runner — keyed so state resets when switching components. */}\n        <FixtureRunner key={manifest.id} manifest={manifest} />\n\n        {/* Field inspector */}\n        <FieldInspector manifest={manifest} />\n\n        {/* Where is this component used? (EC-172, inbound over the EC-155 index) */}\n        <ReferencesPanel projectId={projectId} target={{ type: 'component', id: manifest.id }} />\n      </Stack>\n    </div>\n  )\n}\n"]}

package/dist/components/components/component-status.js

@@ -1,30 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleAlert, CircleCheck, TriangleAlert } from 'lucide-react';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { Badge } from '@elytracms/studio/ui';
 const STATUS_META = {
-    valid: { label: 'valid', variant: 'success', dot: 'bg-success' },
-    incompatible: { label: 'incompatible', variant: 'warning', dot: 'bg-warning' },
-    invalid: { label: 'invalid', variant: 'error', dot: 'bg-destructive' },
+    valid: { variant: 'success', dot: 'bg-success' },
+    incompatible: { variant: 'warning', dot: 'bg-warning' },
+    invalid: { variant: 'error', dot: 'bg-destructive' },
 };
 /** A small status dot for list rows. */
 export function ComponentStatusDot({ status }) {
     const meta = STATUS_META[status];
-    return (_jsx("span", { className: `size-1.5 shrink-0 rounded-full ${meta.dot}`, title: meta.label, "aria-label": `Status: ${meta.label}` }));
+    const label = translate('components.status.' + status);
+    return (_jsx("span", { className: `size-1.5 shrink-0 rounded-full ${meta.dot}`, title: label, "aria-label": translate('components.status.aria', { status: label }) }));
 }
 /** A status badge with icon for the detail view. */
 export function ComponentStatusBadge({ status }) {
     const meta = STATUS_META[status];
     const Icon = status === 'valid' ? CircleCheck : status === 'incompatible' ? TriangleAlert : CircleAlert;
-    return (_jsxs(Badge, { variant: meta.variant, children: [_jsx(Icon, { className: "size-3" }), " ", meta.label] }));
+    return (_jsxs(Badge, { variant: meta.variant, children: [_jsx(Icon, { className: "size-3" }), " ", translate('components.status.' + status)] }));
 }
 export function statusDescription(status) {
-    switch (status) {
-        case 'valid':
-            return 'Manifest is registered and an implementation is wired up.';
-        case 'incompatible':
-            return 'Manifest is registered but no implementation is available — the renderer will show a fallback.';
-        case 'invalid':
-            return 'The registry reported a structured issue for this component.';
-    }
+    return translate('components.status.description.' + status);
 }
 //# sourceMappingURL=component-status.js.map

package/dist/components/components/component-status.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-status.js","sourceRoot":"","sources":["../../../src/components/components/component-status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAE5C,MAAM,WAAW,GAGb;IACF,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,YAAY,EAAE;IAChE,YAAY,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,YAAY,EAAE;IAC9E,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE;CACvE,CAAA;AAED,wCAAwC;AACxC,MAAM,UAAU,kBAAkB,CAAC,EAAE,MAAM,EAA+B;IACxE,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAChC,OAAO,CACL,eACE,SAAS,EAAE,kCAAkC,IAAI,CAAC,GAAG,EAAE,EACvD,KAAK,EAAE,IAAI,CAAC,KAAK,gBACL,WAAW,IAAI,CAAC,KAAK,EAAE,GACnC,CACH,CAAA;AACH,CAAC;AAED,oDAAoD;AACpD,MAAM,UAAU,oBAAoB,CAAC,EAAE,MAAM,EAA+B;IAC1E,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAChC,MAAM,IAAI,GAAG,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,KAAK,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAA;IACvG,OAAO,CACL,MAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,aAC1B,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,GAAG,OAAE,IAAI,CAAC,KAAK,IACjC,CACT,CAAA;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,MAAuB;IACvD,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,OAAO;YACV,OAAO,2DAA2D,CAAA;QACpE,KAAK,cAAc;YACjB,OAAO,gGAAgG,CAAA;QACzG,KAAK,SAAS;YACZ,OAAO,8DAA8D,CAAA;IACzE,CAAC;AACH,CAAC","sourcesContent":["import { CircleAlert, CircleCheck, TriangleAlert } from 'lucide-react'\nimport type { ComponentStatus } from '@elytracms/studio/lib/registry'\nimport { Badge } from '@elytracms/studio/ui'\n\nconst STATUS_META: Record<\n  ComponentStatus,\n  { label: string; variant: 'success' | 'warning' | 'error'; dot: string }\n> = {\n  valid: { label: 'valid', variant: 'success', dot: 'bg-success' },\n  incompatible: { label: 'incompatible', variant: 'warning', dot: 'bg-warning' },\n  invalid: { label: 'invalid', variant: 'error', dot: 'bg-destructive' },\n}\n\n/** A small status dot for list rows. */\nexport function ComponentStatusDot({ status }: { status: ComponentStatus }) {\n  const meta = STATUS_META[status]\n  return (\n    <span\n      className={`size-1.5 shrink-0 rounded-full ${meta.dot}`}\n      title={meta.label}\n      aria-label={`Status: ${meta.label}`}\n    />\n  )\n}\n\n/** A status badge with icon for the detail view. */\nexport function ComponentStatusBadge({ status }: { status: ComponentStatus }) {\n  const meta = STATUS_META[status]\n  const Icon = status === 'valid' ? CircleCheck : status === 'incompatible' ? TriangleAlert : CircleAlert\n  return (\n    <Badge variant={meta.variant}>\n      <Icon className=\"size-3\" /> {meta.label}\n    </Badge>\n  )\n}\n\nexport function statusDescription(status: ComponentStatus): string {\n  switch (status) {\n    case 'valid':\n      return 'Manifest is registered and an implementation is wired up.'\n    case 'incompatible':\n      return 'Manifest is registered but no implementation is available — the renderer will show a fallback.'\n    case 'invalid':\n      return 'The registry reported a structured issue for this component.'\n  }\n}\n"]}
+{"version":3,"file":"component-status.js","sourceRoot":"","sources":["../../../src/components/components/component-status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAEtE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAE5C,MAAM,WAAW,GAGb;IACF,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,YAAY,EAAE;IAChD,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,YAAY,EAAE;IACvD,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE;CACrD,CAAA;AAED,wCAAwC;AACxC,MAAM,UAAU,kBAAkB,CAAC,EAAE,MAAM,EAA+B;IACxE,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAChC,MAAM,KAAK,GAAG,SAAS,CAAC,oBAAoB,GAAG,MAAM,CAAC,CAAA;IACtD,OAAO,CACL,eACE,SAAS,EAAE,kCAAkC,IAAI,CAAC,GAAG,EAAE,EACvD,KAAK,EAAE,KAAK,gBACA,SAAS,CAAC,wBAAwB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,GAClE,CACH,CAAA;AACH,CAAC;AAED,oDAAoD;AACpD,MAAM,UAAU,oBAAoB,CAAC,EAAE,MAAM,EAA+B;IAC1E,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAChC,MAAM,IAAI,GAAG,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,KAAK,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAA;IACvG,OAAO,CACL,MAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,aAC1B,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,GAAG,OAAE,SAAS,CAAC,oBAAoB,GAAG,MAAM,CAAC,IAC/D,CACT,CAAA;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,MAAuB;IACvD,OAAO,SAAS,CAAC,gCAAgC,GAAG,MAAM,CAAC,CAAA;AAC7D,CAAC","sourcesContent":["import { CircleAlert, CircleCheck, TriangleAlert } from 'lucide-react'\nimport type { ComponentStatus } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { Badge } from '@elytracms/studio/ui'\n\nconst STATUS_META: Record<\n  ComponentStatus,\n  { variant: 'success' | 'warning' | 'error'; dot: string }\n> = {\n  valid: { variant: 'success', dot: 'bg-success' },\n  incompatible: { variant: 'warning', dot: 'bg-warning' },\n  invalid: { variant: 'error', dot: 'bg-destructive' },\n}\n\n/** A small status dot for list rows. */\nexport function ComponentStatusDot({ status }: { status: ComponentStatus }) {\n  const meta = STATUS_META[status]\n  const label = translate('components.status.' + status)\n  return (\n    <span\n      className={`size-1.5 shrink-0 rounded-full ${meta.dot}`}\n      title={label}\n      aria-label={translate('components.status.aria', { status: label })}\n    />\n  )\n}\n\n/** A status badge with icon for the detail view. */\nexport function ComponentStatusBadge({ status }: { status: ComponentStatus }) {\n  const meta = STATUS_META[status]\n  const Icon = status === 'valid' ? CircleCheck : status === 'incompatible' ? TriangleAlert : CircleAlert\n  return (\n    <Badge variant={meta.variant}>\n      <Icon className=\"size-3\" /> {translate('components.status.' + status)}\n    </Badge>\n  )\n}\n\nexport function statusDescription(status: ComponentStatus): string {\n  return translate('components.status.description.' + status)\n}\n"]}

package/dist/components/components/components-index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Blocks, MousePointerClick } from 'lucide-react';
 import { getStudioRegistry, registryHealth } from '@elytracms/studio/lib/registry';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { RegistryBrowser } from '@elytracms/studio/components/components/registry-browser';
 import { Badge, Card, Code, Heading, Panel, PanelHeader, Spacer, Stack, Text, } from '@elytracms/studio/ui';
 const REGISTER_EXAMPLE = `// project code registers components + manifests
@@ -27,7 +28,10 @@ export function ComponentsIndex({ projectId }) {
     const health = registryHealth(studio);
     const primitives = studio.registry.primitives().length;
     const projects = studio.registry.projectComponents().length;
-    return (_jsxs("div", { className: "mx-auto w-full max-w-4xl p-4 sm:p-6", children: [_jsx("div", { className: "mb-6 h-80 overflow-hidden rounded-lg border border-border md:hidden", children: _jsx(RegistryBrowser, { projectId: projectId }) }), _jsxs(Stack, { gap: "6", children: [_jsxs(Stack, { gap: "1", children: [_jsx(Heading, { size: "display", children: "Component registry" }), _jsx(Text, { tone: "muted", children: "Browse the platform primitives and this project's components. Select one to inspect its manifest, fields, and preview fixtures." })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsx(StatCard, { label: "Components", value: health.total, hint: `${primitives} primitives · ${projects} project` }), _jsx(StatCard, { label: "Valid", value: health.valid, tone: "success" }), _jsx(StatCard, { label: "Need attention", value: health.incompatible + health.invalid, tone: health.incompatible + health.invalid > 0 ? 'warning' : 'muted', hint: `${health.incompatible} incompatible · ${health.invalid} invalid` })] }), _jsxs(Card, { className: "flex items-center gap-3 p-4", children: [_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground", children: _jsx(MousePointerClick, { className: "size-4" }) }), _jsx(Text, { size: "sm", tone: "muted", children: "Pick a component from the list to open its detail view \u2014 manifest metadata, the prop & slot inspector, and the visual fixture runner." })] }), _jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Blocks, { className: "size-4 text-muted-foreground" }), _jsx(Text, { size: "sm", weight: "semibold", children: "Registering project components" }), _jsx(Spacer, {}), _jsx(Badge, { variant: "outline", children: "guide" })] }), _jsxs(Stack, { gap: "3", className: "p-4", children: [_jsxs(Text, { size: "sm", tone: "muted", children: ["Project code owns its components. Register a manifest under the", ' ', _jsx(Code, { tone: "primary", children: "project.*" }), " namespace (platform primitives live under", ' ', _jsx(Code, { tone: "muted", children: "base.primitives.*" }), "). The manifest declares prop schemas, defaults, inspector controls, binding permissions, slots, and preview fixtures."] }), _jsx("pre", { className: "overflow-x-auto rounded-lg border border-border bg-muted/40 p-3 font-mono text-xs leading-relaxed text-foreground/90", children: REGISTER_EXAMPLE }), _jsxs(Text, { size: "xs", tone: "subtle", children: ["Full guide: ", _jsx(Code, { tone: "muted", children: "docs/component-authoring.md" })] })] })] })] })] }));
+    return (_jsxs("div", { className: "mx-auto w-full max-w-4xl p-4 sm:p-6", children: [_jsx("div", { className: "mb-6 h-80 overflow-hidden rounded-lg border border-border md:hidden", children: _jsx(RegistryBrowser, { projectId: projectId }) }), _jsxs(Stack, { gap: "6", children: [_jsxs(Stack, { gap: "1", children: [_jsx(Heading, { size: "display", children: translate('components.index.title') }), _jsx(Text, { tone: "muted", children: translate('components.index.subtitle') })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsx(StatCard, { label: translate('components.index.stat.total'), value: health.total, hint: translate('components.index.stat.totalHint', { primitives, projects }) }), _jsx(StatCard, { label: translate('components.index.stat.valid'), value: health.valid, tone: "success" }), _jsx(StatCard, { label: translate('components.index.stat.needAttention'), value: health.incompatible + health.invalid, tone: health.incompatible + health.invalid > 0 ? 'warning' : 'muted', hint: translate('components.index.stat.needAttentionHint', {
+                                    incompatible: health.incompatible,
+                                    invalid: health.invalid,
+                                }) })] }), _jsxs(Card, { className: "flex items-center gap-3 p-4", children: [_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground", children: _jsx(MousePointerClick, { className: "size-4" }) }), _jsx(Text, { size: "sm", tone: "muted", children: translate('components.index.pickHint') })] }), _jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Blocks, { className: "size-4 text-muted-foreground" }), _jsx(Text, { size: "sm", weight: "semibold", children: translate('components.index.guide.title') }), _jsx(Spacer, {}), _jsx(Badge, { variant: "outline", children: translate('components.index.guide.badge') })] }), _jsxs(Stack, { gap: "3", className: "p-4", children: [_jsxs(Text, { size: "sm", tone: "muted", children: ["Project code owns its components. Register a manifest under the", ' ', _jsx(Code, { tone: "primary", children: "project.*" }), " namespace (platform primitives live under", ' ', _jsx(Code, { tone: "muted", children: "base.primitives.*" }), "). The manifest declares prop schemas, defaults, inspector controls, binding permissions, slots, and preview fixtures."] }), _jsx("pre", { className: "overflow-x-auto rounded-lg border border-border bg-muted/40 p-3 font-mono text-xs leading-relaxed text-foreground/90", children: REGISTER_EXAMPLE }), _jsx(Text, { size: "xs", tone: "subtle", children: translate('components.index.guide.fullGuide', { path: 'docs/component-authoring.md' }) })] })] })] })] }));
 }
 function StatCard({ label, value, hint, tone = 'default', }) {
     const valueClass = tone === 'success'

package/dist/components/components/components-index.js.map

@@ -1 +1 @@
-{"version":3,"file":"components-index.js","sourceRoot":"","sources":["../../../src/components/components/components-index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Blocks, MousePointerClick } from 'lucide-react'\nimport { getStudioRegistry, registryHealth } from '@elytracms/studio/lib/registry'\nimport { RegistryBrowser } from '@elytracms/studio/components/components/registry-browser'\nimport {\n  Badge,\n  Card,\n  Code,\n  Heading,\n  Panel,\n  PanelHeader,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\n\nconst REGISTER_EXAMPLE = `// project code registers components + manifests\nimport { defineComponent } from '@elytracms/core/component-registry'\n\nexport const MarketingHeroManifest = defineComponent({\n  id: 'project.MarketingHero',        // project.* namespace\n  namespace: 'project',\n  title: 'Marketing Hero',\n  props: {\n    heading: { schema: z.string().min(1), bindable: true,\n               control: { kind: 'text' }, defaultValue: 'Hello' },\n  },\n  slots: [],\n  fixtures: [{ name: 'Default' }],\n})`\n\n/**\n * The Components section landing view (EC-223 Stage 6): registry health overview\n * + the authoring guide, shown when no component is selected. Takes `projectId`\n * as a prop — the splat resolver sources it from the route, not a route file.\n */\nexport function ComponentsIndex({ projectId }: { projectId: string }) {\n  const studio = getStudioRegistry()\n  const health = registryHealth(studio)\n  const primitives = studio.registry.primitives().length\n  const projects = studio.registry.projectComponents().length\n\n  return (\n    <div className=\"mx-auto w-full max-w-4xl p-4 sm:p-6\">\n      {/* Mobile-only browser (the sidebar is hidden under md). */}\n      <div className=\"mb-6 h-80 overflow-hidden rounded-lg border border-border md:hidden\">\n        <RegistryBrowser projectId={projectId} />\n      </div>\n\n      <Stack gap=\"6\">\n        <Stack gap=\"1\">\n          <Heading size=\"display\">Component registry</Heading>\n          <Text tone=\"muted\">\n            Browse the platform primitives and this project's components. Select one to inspect its\n            manifest, fields, and preview fixtures.\n          </Text>\n        </Stack>\n\n        <div className=\"grid gap-3 sm:grid-cols-3\">\n          <StatCard label=\"Components\" value={health.total} hint={`${primitives} primitives · ${projects} project`} />\n          <StatCard label=\"Valid\" value={health.valid} tone=\"success\" />\n          <StatCard\n            label=\"Need attention\"\n            value={health.incompatible + health.invalid}\n            tone={health.incompatible + health.invalid > 0 ? 'warning' : 'muted'}\n            hint={`${health.incompatible} incompatible · ${health.invalid} invalid`}\n          />\n        </div>\n\n        <Card className=\"flex items-center gap-3 p-4\">\n          <span className=\"grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground\">\n            <MousePointerClick className=\"size-4\" />\n          </span>\n          <Text size=\"sm\" tone=\"muted\">\n            Pick a component from the list to open its detail view — manifest metadata, the prop &\n            slot inspector, and the visual fixture runner.\n          </Text>\n        </Card>\n\n        <Panel>\n          <PanelHeader>\n            <Blocks className=\"size-4 text-muted-foreground\" />\n            <Text size=\"sm\" weight=\"semibold\">\n              Registering project components\n            </Text>\n            <Spacer />\n            <Badge variant=\"outline\">guide</Badge>\n          </PanelHeader>\n          <Stack gap=\"3\" className=\"p-4\">\n            <Text size=\"sm\" tone=\"muted\">\n              Project code owns its components. Register a manifest under the{' '}\n              <Code tone=\"primary\">project.*</Code> namespace (platform primitives live under{' '}\n              <Code tone=\"muted\">base.primitives.*</Code>). The manifest declares prop schemas,\n              defaults, inspector controls, binding permissions, slots, and preview fixtures.\n            </Text>\n            <pre className=\"overflow-x-auto rounded-lg border border-border bg-muted/40 p-3 font-mono text-xs leading-relaxed text-foreground/90\">\n              {REGISTER_EXAMPLE}\n            </pre>\n            <Text size=\"xs\" tone=\"subtle\">\n              Full guide: <Code tone=\"muted\">docs/component-authoring.md</Code>\n            </Text>\n          </Stack>\n        </Panel>\n      </Stack>\n    </div>\n  )\n}\n\nfunction StatCard({\n  label,\n  value,\n  hint,\n  tone = 'default',\n}: {\n  label: string\n  value: number\n  hint?: string\n  tone?: 'default' | 'success' | 'warning' | 'muted'\n}) {\n  const valueClass =\n    tone === 'success'\n      ? 'text-success'\n      : tone === 'warning'\n        ? 'text-warning'\n        : tone === 'muted'\n          ? 'text-muted-foreground'\n          : 'text-foreground'\n  return (\n    <Card className=\"p-4\">\n      <Text size=\"xs\" tone=\"muted\" mono>\n        {label.toUpperCase()}\n      </Text>\n      <div className={`mt-1 text-2xl font-semibold tracking-tight ${valueClass}`}>{value}</div>\n      {hint ? (\n        <Text size=\"xs\" tone=\"subtle\" className=\"mt-0.5\">\n          {hint}\n        </Text>\n      ) : null}\n    </Card>\n  )\n}\n"]}
+{"version":3,"file":"components-index.js","sourceRoot":"","sources":["../../../src/components/components/components-index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Blocks, MousePointerClick } from 'lucide-react'\nimport { getStudioRegistry, registryHealth } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { RegistryBrowser } from '@elytracms/studio/components/components/registry-browser'\nimport {\n  Badge,\n  Card,\n  Code,\n  Heading,\n  Panel,\n  PanelHeader,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\n\nconst REGISTER_EXAMPLE = `// project code registers components + manifests\nimport { defineComponent } from '@elytracms/core/component-registry'\n\nexport const MarketingHeroManifest = defineComponent({\n  id: 'project.MarketingHero',        // project.* namespace\n  namespace: 'project',\n  title: 'Marketing Hero',\n  props: {\n    heading: { schema: z.string().min(1), bindable: true,\n               control: { kind: 'text' }, defaultValue: 'Hello' },\n  },\n  slots: [],\n  fixtures: [{ name: 'Default' }],\n})`\n\n/**\n * The Components section landing view (EC-223 Stage 6): registry health overview\n * + the authoring guide, shown when no component is selected. Takes `projectId`\n * as a prop — the splat resolver sources it from the route, not a route file.\n */\nexport function ComponentsIndex({ projectId }: { projectId: string }) {\n  const studio = getStudioRegistry()\n  const health = registryHealth(studio)\n  const primitives = studio.registry.primitives().length\n  const projects = studio.registry.projectComponents().length\n\n  return (\n    <div className=\"mx-auto w-full max-w-4xl p-4 sm:p-6\">\n      {/* Mobile-only browser (the sidebar is hidden under md). */}\n      <div className=\"mb-6 h-80 overflow-hidden rounded-lg border border-border md:hidden\">\n        <RegistryBrowser projectId={projectId} />\n      </div>\n\n      <Stack gap=\"6\">\n        <Stack gap=\"1\">\n          <Heading size=\"display\">{translate('components.index.title')}</Heading>\n          <Text tone=\"muted\">{translate('components.index.subtitle')}</Text>\n        </Stack>\n\n        <div className=\"grid gap-3 sm:grid-cols-3\">\n          <StatCard\n            label={translate('components.index.stat.total')}\n            value={health.total}\n            hint={translate('components.index.stat.totalHint', { primitives, projects })}\n          />\n          <StatCard label={translate('components.index.stat.valid')} value={health.valid} tone=\"success\" />\n          <StatCard\n            label={translate('components.index.stat.needAttention')}\n            value={health.incompatible + health.invalid}\n            tone={health.incompatible + health.invalid > 0 ? 'warning' : 'muted'}\n            hint={translate('components.index.stat.needAttentionHint', {\n              incompatible: health.incompatible,\n              invalid: health.invalid,\n            })}\n          />\n        </div>\n\n        <Card className=\"flex items-center gap-3 p-4\">\n          <span className=\"grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground\">\n            <MousePointerClick className=\"size-4\" />\n          </span>\n          <Text size=\"sm\" tone=\"muted\">\n            {translate('components.index.pickHint')}\n          </Text>\n        </Card>\n\n        <Panel>\n          <PanelHeader>\n            <Blocks className=\"size-4 text-muted-foreground\" />\n            <Text size=\"sm\" weight=\"semibold\">\n              {translate('components.index.guide.title')}\n            </Text>\n            <Spacer />\n            <Badge variant=\"outline\">{translate('components.index.guide.badge')}</Badge>\n          </PanelHeader>\n          <Stack gap=\"3\" className=\"p-4\">\n            <Text size=\"sm\" tone=\"muted\">\n              Project code owns its components. Register a manifest under the{' '}\n              <Code tone=\"primary\">project.*</Code> namespace (platform primitives live under{' '}\n              <Code tone=\"muted\">base.primitives.*</Code>). The manifest declares prop schemas,\n              defaults, inspector controls, binding permissions, slots, and preview fixtures.\n            </Text>\n            <pre className=\"overflow-x-auto rounded-lg border border-border bg-muted/40 p-3 font-mono text-xs leading-relaxed text-foreground/90\">\n              {REGISTER_EXAMPLE}\n            </pre>\n            <Text size=\"xs\" tone=\"subtle\">\n              {translate('components.index.guide.fullGuide', { path: 'docs/component-authoring.md' })}\n            </Text>\n          </Stack>\n        </Panel>\n      </Stack>\n    </div>\n  )\n}\n\nfunction StatCard({\n  label,\n  value,\n  hint,\n  tone = 'default',\n}: {\n  label: string\n  value: number\n  hint?: string\n  tone?: 'default' | 'success' | 'warning' | 'muted'\n}) {\n  const valueClass =\n    tone === 'success'\n      ? 'text-success'\n      : tone === 'warning'\n        ? 'text-warning'\n        : tone === 'muted'\n          ? 'text-muted-foreground'\n          : 'text-foreground'\n  return (\n    <Card className=\"p-4\">\n      <Text size=\"xs\" tone=\"muted\" mono>\n        {label.toUpperCase()}\n      </Text>\n      <div className={`mt-1 text-2xl font-semibold tracking-tight ${valueClass}`}>{value}</div>\n      {hint ? (\n        <Text size=\"xs\" tone=\"subtle\" className=\"mt-0.5\">\n          {hint}\n        </Text>\n      ) : null}\n    </Card>\n  )\n}\n"]}

package/dist/components/components/field-inspector.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { manifestPropFields } from '@elytracms/core/component-registry';
 import { Badge, Code, Panel, PanelHeader, Row, Spacer, Text } from '@elytracms/studio/ui';
-import { localizedLabel } from '@elytracms/studio/lib/i18n';
+import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
 /**
  * The editor control a prop field-def presents (EC-190): derived from the
  * field `type`, refined by the optional `form.control` hint (textarea / color /
@@ -26,14 +26,14 @@ function formatDefault(value) {
  */
 export function FieldInspector({ manifest }) {
     const props = manifestPropFields(manifest);
-    return (_jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Props" }), _jsx(Spacer, {}), _jsx(Text, { size: "xs", tone: "muted", mono: true, children: props.length })] }), props.length === 0 ? (_jsx(Text, { size: "sm", tone: "subtle", className: "p-4", children: "This component declares no editable props." })) : (_jsx("div", { className: "divide-y divide-border", children: props.map((field) => (_jsx(PropRow, { field: field }, field.name))) }))] }), _jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Slots" }), _jsx(Spacer, {}), _jsx(Text, { size: "xs", tone: "muted", mono: true, children: manifest.slots.length })] }), manifest.slots.length === 0 ? (_jsx(Text, { size: "sm", tone: "subtle", className: "p-4", children: "This component has no slots." })) : (_jsx("div", { className: "divide-y divide-border", children: manifest.slots.map((slot) => (_jsx(SlotRow, { slot: slot }, slot.name))) }))] })] }));
+    return (_jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Text, { size: "sm", weight: "semibold", children: translate('components.fieldInspector.props') }), _jsx(Spacer, {}), _jsx(Text, { size: "xs", tone: "muted", mono: true, children: props.length })] }), props.length === 0 ? (_jsx(Text, { size: "sm", tone: "subtle", className: "p-4", children: translate('components.fieldInspector.noProps') })) : (_jsx("div", { className: "divide-y divide-border", children: props.map((field) => (_jsx(PropRow, { field: field }, field.name))) }))] }), _jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Text, { size: "sm", weight: "semibold", children: translate('components.fieldInspector.slots') }), _jsx(Spacer, {}), _jsx(Text, { size: "xs", tone: "muted", mono: true, children: manifest.slots.length })] }), manifest.slots.length === 0 ? (_jsx(Text, { size: "sm", tone: "subtle", className: "p-4", children: translate('components.fieldInspector.noSlots') })) : (_jsx("div", { className: "divide-y divide-border", children: manifest.slots.map((slot) => (_jsx(SlotRow, { slot: slot }, slot.name))) }))] })] }));
 }
 function PropRow({ field }) {
     const label = localizedLabel(field.form?.label, field.name);
     const description = field.form?.description !== undefined ? localizedLabel(field.form.description) : undefined;
-    return (_jsxs("div", { className: "flex flex-col gap-1.5 p-3", children: [_jsxs(Row, { gap: "2", children: [_jsx(Code, { tone: "primary", children: field.name }), _jsx(Badge, { variant: "outline", children: controlType(field) }), _jsx(Spacer, {}), field.form?.inlineEditable ? _jsx(Badge, { variant: "info", children: "inline" }) : null] }), label || description ? (_jsx(Text, { size: "xs", tone: "muted", children: description ?? label })) : null, _jsxs(Row, { gap: "3", className: "text-xs", children: [_jsx(Text, { size: "xs", tone: "subtle", children: "default" }), _jsx(Code, { tone: "muted", children: formatDefault(field.default) })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 p-3", children: [_jsxs(Row, { gap: "2", children: [_jsx(Code, { tone: "primary", children: field.name }), _jsx(Badge, { variant: "outline", children: controlType(field) }), _jsx(Spacer, {}), field.form?.inlineEditable ? (_jsx(Badge, { variant: "info", children: translate('components.fieldInspector.inline') })) : null] }), label || description ? (_jsx(Text, { size: "xs", tone: "muted", children: description ?? label })) : null, _jsxs(Row, { gap: "3", className: "text-xs", children: [_jsx(Text, { size: "xs", tone: "subtle", children: translate('components.fieldInspector.default') }), _jsx(Code, { tone: "muted", children: formatDefault(field.default) })] })] }));
 }
 function SlotRow({ slot }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1 p-3", children: [_jsxs(Row, { gap: "2", children: [_jsx(Code, { tone: "primary", children: slot.name }), slot.required ? _jsx(Badge, { variant: "warning", children: "required" }) : _jsx(Badge, { variant: "outline", children: "optional" }), _jsx(Spacer, {}), slot.label ? (_jsx(Text, { size: "xs", tone: "muted", children: slot.label })) : null] }), slot.allow && slot.allow.length > 0 ? (_jsxs(Row, { gap: "2", className: "text-xs", children: [_jsx(Text, { size: "xs", tone: "subtle", children: "allows" }), _jsx(Row, { gap: "1", wrap: true, children: slot.allow.map((id) => (_jsx(Code, { tone: "muted", children: id }, id))) })] })) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1 p-3", children: [_jsxs(Row, { gap: "2", children: [_jsx(Code, { tone: "primary", children: slot.name }), slot.required ? (_jsx(Badge, { variant: "warning", children: translate('common.required') })) : (_jsx(Badge, { variant: "outline", children: translate('common.optional') })), _jsx(Spacer, {}), slot.label ? (_jsx(Text, { size: "xs", tone: "muted", children: slot.label })) : null] }), slot.allow && slot.allow.length > 0 ? (_jsxs(Row, { gap: "2", className: "text-xs", children: [_jsx(Text, { size: "xs", tone: "subtle", children: translate('components.fieldInspector.allows') }), _jsx(Row, { gap: "1", wrap: true, children: slot.allow.map((id) => (_jsx(Code, { tone: "muted", children: id }, id))) })] })) : null] }));
 }
 //# sourceMappingURL=field-inspector.js.map

package/dist/components/components/field-inspector.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-inspector.js","sourceRoot":"","sources":["../../../src/components/components/field-inspector.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAEvE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AACzF,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE3D;;;;GAIG;AACH,SAAS,WAAW,CAAC,KAAe;IAClC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,IAAI,EAAE,OAAO;QAAE,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAA;IAC3E,OAAO,KAAK,CAAC,IAAI,CAAA;AACnB,CAAC;AAED,SAAS,aAAa,CAAC,KAAc;IACnC,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,GAAG,CAAA;IACnC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IACjE,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;AAC9B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAmC;IAC1E,MAAM,KAAK,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAA;IAC1C,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,MAAC,KAAK,eACJ,MAAC,WAAW,eACV,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,UAAU,sBAE1B,EACP,KAAC,MAAM,KAAG,EACV,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,kBAC9B,KAAK,CAAC,MAAM,GACR,IACK,EACb,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,KAAK,2DAEtC,CACR,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,wBAAwB,YACpC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACpB,KAAC,OAAO,IAAkB,KAAK,EAAE,KAAK,IAAxB,KAAK,CAAC,IAAI,CAAkB,CAC3C,CAAC,GACE,CACP,IACK,EAER,MAAC,KAAK,eACJ,MAAC,WAAW,eACV,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,UAAU,sBAE1B,EACP,KAAC,MAAM,KAAG,EACV,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,kBAC9B,QAAQ,CAAC,KAAK,CAAC,MAAM,GACjB,IACK,EACb,QAAQ,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC7B,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,KAAK,6CAEtC,CACR,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,wBAAwB,YACpC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5B,KAAC,OAAO,IAAiB,IAAI,EAAE,IAAI,IAArB,IAAI,CAAC,IAAI,CAAgB,CACxC,CAAC,GACE,CACP,IACK,IACJ,CACP,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,EAAE,KAAK,EAAuB;IAC7C,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IAC3D,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9G,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,aACV,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,YAAE,KAAK,CAAC,IAAI,GAAQ,EACxC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,WAAW,CAAC,KAAK,CAAC,GAAS,EACrD,KAAC,MAAM,KAAG,EACT,KAAK,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,OAAO,EAAC,MAAM,uBAAe,CAAC,CAAC,CAAC,IAAI,IACrE,EACL,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,CACtB,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,WAAW,IAAI,KAAK,GAChB,CACR,CAAC,CAAC,CAAC,IAAI,EACR,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,SAAS,aAC9B,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,wBAEtB,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,YAAE,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,GAAQ,IACpD,IACF,CACP,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,EAAE,IAAI,EAAsB;IAC3C,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,aACV,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,YAAE,IAAI,CAAC,IAAI,GAAQ,EACtC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,yBAAiB,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,yBAAiB,EACtG,KAAC,MAAM,KAAG,EACT,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,IAAI,CAAC,KAAK,GACN,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,EACL,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACrC,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,SAAS,aAC9B,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,uBAEtB,EACP,KAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,kBACd,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CACtB,KAAC,IAAI,IAAU,IAAI,EAAC,OAAO,YACxB,EAAE,IADM,EAAE,CAEN,CACR,CAAC,GACE,IACF,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAA;AACH,CAAC","sourcesContent":["import type { ComponentManifest, SlotSpec } from '@elytracms/core/component-registry'\nimport { manifestPropFields } from '@elytracms/core/component-registry'\nimport type { FieldDef } from '@elytracms/core/cms-core'\nimport { Badge, Code, Panel, PanelHeader, Row, Spacer, Text } from '@elytracms/studio/ui'\nimport { localizedLabel } from '@elytracms/studio/lib/i18n'\n\n/**\n * The editor control a prop field-def presents (EC-190): derived from the\n * field `type`, refined by the optional `form.control` hint (textarea / color /\n * json for `text`). Read-only display label for the manifest viewer.\n */\nfunction controlType(field: FieldDef): string {\n  if (field.type === 'text' && field.form?.control) return field.form.control\n  return field.type\n}\n\nfunction formatDefault(value: unknown): string {\n  if (value === undefined) return '—'\n  if (typeof value === 'string') return value === '' ? '\"\"' : value\n  return JSON.stringify(value)\n}\n\n/**\n * Inspect a component's props and slots (brief §7.2, §8.3, EC-053): prop field-def\n * type/control (EC-190), default value, and slot rules (required, allowed\n * children). Props are static field-defs; binding metadata retired in EC-190.\n */\nexport function FieldInspector({ manifest }: { manifest: ComponentManifest }) {\n  const props = manifestPropFields(manifest)\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-2\">\n      <Panel>\n        <PanelHeader>\n          <Text size=\"sm\" weight=\"semibold\">\n            Props\n          </Text>\n          <Spacer />\n          <Text size=\"xs\" tone=\"muted\" mono>\n            {props.length}\n          </Text>\n        </PanelHeader>\n        {props.length === 0 ? (\n          <Text size=\"sm\" tone=\"subtle\" className=\"p-4\">\n            This component declares no editable props.\n          </Text>\n        ) : (\n          <div className=\"divide-y divide-border\">\n            {props.map((field) => (\n              <PropRow key={field.name} field={field} />\n            ))}\n          </div>\n        )}\n      </Panel>\n\n      <Panel>\n        <PanelHeader>\n          <Text size=\"sm\" weight=\"semibold\">\n            Slots\n          </Text>\n          <Spacer />\n          <Text size=\"xs\" tone=\"muted\" mono>\n            {manifest.slots.length}\n          </Text>\n        </PanelHeader>\n        {manifest.slots.length === 0 ? (\n          <Text size=\"sm\" tone=\"subtle\" className=\"p-4\">\n            This component has no slots.\n          </Text>\n        ) : (\n          <div className=\"divide-y divide-border\">\n            {manifest.slots.map((slot) => (\n              <SlotRow key={slot.name} slot={slot} />\n            ))}\n          </div>\n        )}\n      </Panel>\n    </div>\n  )\n}\n\nfunction PropRow({ field }: { field: FieldDef }) {\n  const label = localizedLabel(field.form?.label, field.name)\n  const description = field.form?.description !== undefined ? localizedLabel(field.form.description) : undefined\n  return (\n    <div className=\"flex flex-col gap-1.5 p-3\">\n      <Row gap=\"2\">\n        <Code tone=\"primary\">{field.name}</Code>\n        <Badge variant=\"outline\">{controlType(field)}</Badge>\n        <Spacer />\n        {field.form?.inlineEditable ? <Badge variant=\"info\">inline</Badge> : null}\n      </Row>\n      {label || description ? (\n        <Text size=\"xs\" tone=\"muted\">\n          {description ?? label}\n        </Text>\n      ) : null}\n      <Row gap=\"3\" className=\"text-xs\">\n        <Text size=\"xs\" tone=\"subtle\">\n          default\n        </Text>\n        <Code tone=\"muted\">{formatDefault(field.default)}</Code>\n      </Row>\n    </div>\n  )\n}\n\nfunction SlotRow({ slot }: { slot: SlotSpec }) {\n  return (\n    <div className=\"flex flex-col gap-1 p-3\">\n      <Row gap=\"2\">\n        <Code tone=\"primary\">{slot.name}</Code>\n        {slot.required ? <Badge variant=\"warning\">required</Badge> : <Badge variant=\"outline\">optional</Badge>}\n        <Spacer />\n        {slot.label ? (\n          <Text size=\"xs\" tone=\"muted\">\n            {slot.label}\n          </Text>\n        ) : null}\n      </Row>\n      {slot.allow && slot.allow.length > 0 ? (\n        <Row gap=\"2\" className=\"text-xs\">\n          <Text size=\"xs\" tone=\"subtle\">\n            allows\n          </Text>\n          <Row gap=\"1\" wrap>\n            {slot.allow.map((id) => (\n              <Code key={id} tone=\"muted\">\n                {id}\n              </Code>\n            ))}\n          </Row>\n        </Row>\n      ) : null}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"field-inspector.js","sourceRoot":"","sources":["../../../src/components/components/field-inspector.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentManifest, SlotSpec } from '@elytracms/core/component-registry'\nimport { manifestPropFields } from '@elytracms/core/component-registry'\nimport type { FieldDef } from '@elytracms/core/cms-core'\nimport { Badge, Code, Panel, PanelHeader, Row, Spacer, Text } from '@elytracms/studio/ui'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\n\n/**\n * The editor control a prop field-def presents (EC-190): derived from the\n * field `type`, refined by the optional `form.control` hint (textarea / color /\n * json for `text`). Read-only display label for the manifest viewer.\n */\nfunction controlType(field: FieldDef): string {\n  if (field.type === 'text' && field.form?.control) return field.form.control\n  return field.type\n}\n\nfunction formatDefault(value: unknown): string {\n  if (value === undefined) return '—'\n  if (typeof value === 'string') return value === '' ? '\"\"' : value\n  return JSON.stringify(value)\n}\n\n/**\n * Inspect a component's props and slots (brief §7.2, §8.3, EC-053): prop field-def\n * type/control (EC-190), default value, and slot rules (required, allowed\n * children). Props are static field-defs; binding metadata retired in EC-190.\n */\nexport function FieldInspector({ manifest }: { manifest: ComponentManifest }) {\n  const props = manifestPropFields(manifest)\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-2\">\n      <Panel>\n        <PanelHeader>\n          <Text size=\"sm\" weight=\"semibold\">\n            {translate('components.fieldInspector.props')}\n          </Text>\n          <Spacer />\n          <Text size=\"xs\" tone=\"muted\" mono>\n            {props.length}\n          </Text>\n        </PanelHeader>\n        {props.length === 0 ? (\n          <Text size=\"sm\" tone=\"subtle\" className=\"p-4\">\n            {translate('components.fieldInspector.noProps')}\n          </Text>\n        ) : (\n          <div className=\"divide-y divide-border\">\n            {props.map((field) => (\n              <PropRow key={field.name} field={field} />\n            ))}\n          </div>\n        )}\n      </Panel>\n\n      <Panel>\n        <PanelHeader>\n          <Text size=\"sm\" weight=\"semibold\">\n            {translate('components.fieldInspector.slots')}\n          </Text>\n          <Spacer />\n          <Text size=\"xs\" tone=\"muted\" mono>\n            {manifest.slots.length}\n          </Text>\n        </PanelHeader>\n        {manifest.slots.length === 0 ? (\n          <Text size=\"sm\" tone=\"subtle\" className=\"p-4\">\n            {translate('components.fieldInspector.noSlots')}\n          </Text>\n        ) : (\n          <div className=\"divide-y divide-border\">\n            {manifest.slots.map((slot) => (\n              <SlotRow key={slot.name} slot={slot} />\n            ))}\n          </div>\n        )}\n      </Panel>\n    </div>\n  )\n}\n\nfunction PropRow({ field }: { field: FieldDef }) {\n  const label = localizedLabel(field.form?.label, field.name)\n  const description = field.form?.description !== undefined ? localizedLabel(field.form.description) : undefined\n  return (\n    <div className=\"flex flex-col gap-1.5 p-3\">\n      <Row gap=\"2\">\n        <Code tone=\"primary\">{field.name}</Code>\n        <Badge variant=\"outline\">{controlType(field)}</Badge>\n        <Spacer />\n        {field.form?.inlineEditable ? (\n          <Badge variant=\"info\">{translate('components.fieldInspector.inline')}</Badge>\n        ) : null}\n      </Row>\n      {label || description ? (\n        <Text size=\"xs\" tone=\"muted\">\n          {description ?? label}\n        </Text>\n      ) : null}\n      <Row gap=\"3\" className=\"text-xs\">\n        <Text size=\"xs\" tone=\"subtle\">\n          {translate('components.fieldInspector.default')}\n        </Text>\n        <Code tone=\"muted\">{formatDefault(field.default)}</Code>\n      </Row>\n    </div>\n  )\n}\n\nfunction SlotRow({ slot }: { slot: SlotSpec }) {\n  return (\n    <div className=\"flex flex-col gap-1 p-3\">\n      <Row gap=\"2\">\n        <Code tone=\"primary\">{slot.name}</Code>\n        {slot.required ? (\n          <Badge variant=\"warning\">{translate('common.required')}</Badge>\n        ) : (\n          <Badge variant=\"outline\">{translate('common.optional')}</Badge>\n        )}\n        <Spacer />\n        {slot.label ? (\n          <Text size=\"xs\" tone=\"muted\">\n            {slot.label}\n          </Text>\n        ) : null}\n      </Row>\n      {slot.allow && slot.allow.length > 0 ? (\n        <Row gap=\"2\" className=\"text-xs\">\n          <Text size=\"xs\" tone=\"subtle\">\n            {translate('components.fieldInspector.allows')}\n          </Text>\n          <Row gap=\"1\" wrap>\n            {slot.allow.map((id) => (\n              <Code key={id} tone=\"muted\">\n                {id}\n              </Code>\n            ))}\n          </Row>\n        </Row>\n      ) : null}\n    </div>\n  )\n}\n"]}

package/dist/components/components/fixture-runner.js

@@ -4,6 +4,7 @@ import { renderNode } from '@elytracms/core/runtime-renderer';
 import { getStudioRegistry, previewContext } from '@elytracms/studio/lib/registry';
 import { previewSpecs } from '@elytracms/studio/lib/registry/preview';
 import { Panel, PanelHeader, Row, Spacer, Text } from '@elytracms/studio/ui';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { cn } from '@elytracms/studio/lib/utils';
 /**
  * Visual fixture runner (brief §7.2, §8.3, §11, EC-054). Renders each of a
@@ -17,7 +18,9 @@ export function FixtureRunner({ manifest }) {
     const [index, setIndex] = useState(0);
     const ctx = useMemo(() => previewContext(studio), [studio]);
     const active = specs[Math.min(index, specs.length - 1)];
-    return (_jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Preview" }), _jsx(Spacer, {}), _jsxs(Text, { size: "xs", tone: "muted", mono: true, children: [specs.length, " ", specs.length === 1 ? 'state' : 'states'] })] }), specs.length > 1 ? (_jsx(Row, { gap: "1", wrap: true, className: "border-b border-border px-3 py-2", role: "group", "aria-label": "Fixture states", children: specs.map((spec, i) => (_jsx("button", { type: "button", "aria-pressed": i === index, onClick: () => setIndex(i), className: cn('rounded-md px-2.5 py-1 text-xs font-medium transition-colors', i === index
+    return (_jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Text, { size: "sm", weight: "semibold", children: translate('components.fixtureRunner.preview') }), _jsx(Spacer, {}), _jsx(Text, { size: "xs", tone: "muted", mono: true, children: translate(specs.length === 1
+                            ? 'components.fixtureRunner.stateCount.one'
+                            : 'components.fixtureRunner.stateCount.other', { count: specs.length }) })] }), specs.length > 1 ? (_jsx(Row, { gap: "1", wrap: true, className: "border-b border-border px-3 py-2", role: "group", "aria-label": translate('components.fixtureRunner.statesAria'), children: specs.map((spec, i) => (_jsx("button", { type: "button", "aria-pressed": i === index, onClick: () => setIndex(i), className: cn('rounded-md px-2.5 py-1 text-xs font-medium transition-colors', i === index
                         ? 'bg-accent text-accent-foreground'
                         : 'text-muted-foreground hover:bg-muted hover:text-foreground'), children: spec.name }, spec.name))) })) : null, _jsx("div", { className: "canvas-grid p-6", "data-fixture-state": active?.name, children: _jsx("div", { className: "mx-auto max-w-xl rounded-lg border border-border bg-background p-6 shadow-sm", children: active ? renderNode(active.node, ctx) : null }) })] }));
 }

package/dist/components/components/fixture-runner.js.map

@@ -1 +1 @@
-{"version":3,"file":"fixture-runner.js","sourceRoot":"","sources":["../../../src/components/components/fixture-runner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAE7D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACrE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,EAAE,EAAE,MAAM,6BAA6B,CAAA;AAEhD;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAmC;IACzE,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAC3D,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;IAEvD,OAAO,CACL,MAAC,KAAK,eACJ,MAAC,WAAW,eACV,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,UAAU,wBAE1B,EACP,KAAC,MAAM,KAAG,EACV,MAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,mBAC9B,KAAK,CAAC,MAAM,OAAG,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,IAClD,IACK,EAEb,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAClB,KAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,QAAC,SAAS,EAAC,kCAAkC,EAAC,IAAI,EAAC,OAAO,gBAAY,gBAAgB,YACpG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,iBAEE,IAAI,EAAC,QAAQ,kBACC,CAAC,KAAK,KAAK,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC1B,SAAS,EAAE,EAAE,CACX,8DAA8D,EAC9D,CAAC,KAAK,KAAK;wBACT,CAAC,CAAC,kCAAkC;wBACpC,CAAC,CAAC,4DAA4D,CACjE,YAEA,IAAI,CAAC,IAAI,IAXL,IAAI,CAAC,IAAI,CAYP,CACV,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAER,cAAK,SAAS,EAAC,iBAAiB,wBAAqB,MAAM,EAAE,IAAI,YAC/D,cAAK,SAAS,EAAC,8EAA8E,YAC1F,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GACzC,GACF,IACA,CACT,CAAA;AACH,CAAC","sourcesContent":["import { useMemo, useState } from 'react'\nimport { renderNode } from '@elytracms/core/runtime-renderer'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport { getStudioRegistry, previewContext } from '@elytracms/studio/lib/registry'\nimport { previewSpecs } from '@elytracms/studio/lib/registry/preview'\nimport { Panel, PanelHeader, Row, Spacer, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\n\n/**\n * Visual fixture runner (brief §7.2, §8.3, §11, EC-054). Renders each of a\n * component's preview states through the runtime renderer + registry — the same\n * render path the Builder and export use — so output is deterministic and\n * agent-verifiable. Incompatible components surface the renderer's fallback.\n */\nexport function FixtureRunner({ manifest }: { manifest: ComponentManifest }) {\n  const studio = getStudioRegistry()\n  const specs = useMemo(() => previewSpecs(manifest), [manifest])\n  const [index, setIndex] = useState(0)\n  const ctx = useMemo(() => previewContext(studio), [studio])\n  const active = specs[Math.min(index, specs.length - 1)]\n\n  return (\n    <Panel>\n      <PanelHeader>\n        <Text size=\"sm\" weight=\"semibold\">\n          Preview\n        </Text>\n        <Spacer />\n        <Text size=\"xs\" tone=\"muted\" mono>\n          {specs.length} {specs.length === 1 ? 'state' : 'states'}\n        </Text>\n      </PanelHeader>\n\n      {specs.length > 1 ? (\n        <Row gap=\"1\" wrap className=\"border-b border-border px-3 py-2\" role=\"group\" aria-label=\"Fixture states\">\n          {specs.map((spec, i) => (\n            <button\n              key={spec.name}\n              type=\"button\"\n              aria-pressed={i === index}\n              onClick={() => setIndex(i)}\n              className={cn(\n                'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                i === index\n                  ? 'bg-accent text-accent-foreground'\n                  : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n              )}\n            >\n              {spec.name}\n            </button>\n          ))}\n        </Row>\n      ) : null}\n\n      <div className=\"canvas-grid p-6\" data-fixture-state={active?.name}>\n        <div className=\"mx-auto max-w-xl rounded-lg border border-border bg-background p-6 shadow-sm\">\n          {active ? renderNode(active.node, ctx) : null}\n        </div>\n      </div>\n    </Panel>\n  )\n}\n"]}
+{"version":3,"file":"fixture-runner.js","sourceRoot":"","sources":["../../../src/components/components/fixture-runner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAE7D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACrE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,EAAE,EAAE,MAAM,6BAA6B,CAAA;AAEhD;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAmC;IACzE,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAC3D,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;IAEvD,OAAO,CACL,MAAC,KAAK,eACJ,MAAC,WAAW,eACV,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,UAAU,YAC9B,SAAS,CAAC,kCAAkC,CAAC,GACzC,EACP,KAAC,MAAM,KAAG,EACV,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,kBAC9B,SAAS,CACR,KAAK,CAAC,MAAM,KAAK,CAAC;4BAChB,CAAC,CAAC,yCAAyC;4BAC3C,CAAC,CAAC,2CAA2C,EAC/C,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CACxB,GACI,IACK,EAEb,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAClB,KAAC,GAAG,IACF,GAAG,EAAC,GAAG,EACP,IAAI,QACJ,SAAS,EAAC,kCAAkC,EAC5C,IAAI,EAAC,OAAO,gBACA,SAAS,CAAC,qCAAqC,CAAC,YAE3D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,iBAEE,IAAI,EAAC,QAAQ,kBACC,CAAC,KAAK,KAAK,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC1B,SAAS,EAAE,EAAE,CACX,8DAA8D,EAC9D,CAAC,KAAK,KAAK;wBACT,CAAC,CAAC,kCAAkC;wBACpC,CAAC,CAAC,4DAA4D,CACjE,YAEA,IAAI,CAAC,IAAI,IAXL,IAAI,CAAC,IAAI,CAYP,CACV,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,EAER,cAAK,SAAS,EAAC,iBAAiB,wBAAqB,MAAM,EAAE,IAAI,YAC/D,cAAK,SAAS,EAAC,8EAA8E,YAC1F,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GACzC,GACF,IACA,CACT,CAAA;AACH,CAAC","sourcesContent":["import { useMemo, useState } from 'react'\nimport { renderNode } from '@elytracms/core/runtime-renderer'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport { getStudioRegistry, previewContext } from '@elytracms/studio/lib/registry'\nimport { previewSpecs } from '@elytracms/studio/lib/registry/preview'\nimport { Panel, PanelHeader, Row, Spacer, Text } from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { cn } from '@elytracms/studio/lib/utils'\n\n/**\n * Visual fixture runner (brief §7.2, §8.3, §11, EC-054). Renders each of a\n * component's preview states through the runtime renderer + registry — the same\n * render path the Builder and export use — so output is deterministic and\n * agent-verifiable. Incompatible components surface the renderer's fallback.\n */\nexport function FixtureRunner({ manifest }: { manifest: ComponentManifest }) {\n  const studio = getStudioRegistry()\n  const specs = useMemo(() => previewSpecs(manifest), [manifest])\n  const [index, setIndex] = useState(0)\n  const ctx = useMemo(() => previewContext(studio), [studio])\n  const active = specs[Math.min(index, specs.length - 1)]\n\n  return (\n    <Panel>\n      <PanelHeader>\n        <Text size=\"sm\" weight=\"semibold\">\n          {translate('components.fixtureRunner.preview')}\n        </Text>\n        <Spacer />\n        <Text size=\"xs\" tone=\"muted\" mono>\n          {translate(\n            specs.length === 1\n              ? 'components.fixtureRunner.stateCount.one'\n              : 'components.fixtureRunner.stateCount.other',\n            { count: specs.length },\n          )}\n        </Text>\n      </PanelHeader>\n\n      {specs.length > 1 ? (\n        <Row\n          gap=\"1\"\n          wrap\n          className=\"border-b border-border px-3 py-2\"\n          role=\"group\"\n          aria-label={translate('components.fixtureRunner.statesAria')}\n        >\n          {specs.map((spec, i) => (\n            <button\n              key={spec.name}\n              type=\"button\"\n              aria-pressed={i === index}\n              onClick={() => setIndex(i)}\n              className={cn(\n                'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                i === index\n                  ? 'bg-accent text-accent-foreground'\n                  : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n              )}\n            >\n              {spec.name}\n            </button>\n          ))}\n        </Row>\n      ) : null}\n\n      <div className=\"canvas-grid p-6\" data-fixture-state={active?.name}>\n        <div className=\"mx-auto max-w-xl rounded-lg border border-border bg-background p-6 shadow-sm\">\n          {active ? renderNode(active.node, ctx) : null}\n        </div>\n      </div>\n    </Panel>\n  )\n}\n"]}

package/dist/components/components/registry-browser.js

@@ -4,6 +4,7 @@ import { Search } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { isPrimitive } from '@elytracms/core/component-registry';
 import { componentStatus, getStudioRegistry } from '@elytracms/studio/lib/registry';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { Code, Input, Row, Spacer, Stack, Text } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 import { ComponentStatusDot } from './component-status';
@@ -35,9 +36,9 @@ export function RegistryBrowser({ projectId, activeComponentId, }) {
     }), [studio, query, namespace, category]);
     const primitives = results.filter((m) => isPrimitive(m.id));
     const projects = results.filter((m) => !isPrimitive(m.id));
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "shrink-0 space-y-2 border-b border-border p-3", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search components\u2026", className: "pl-8", "aria-label": "Search components" })] }), _jsxs(Row, { gap: "1", className: "rounded-md bg-muted/50 p-0.5", role: "group", "aria-label": "Filter by namespace", children: [_jsx(NamespaceTab, { label: "All", count: primitiveCount + projectCount, active: namespace === 'all', onClick: () => selectNamespace('all') }), _jsx(NamespaceTab, { label: "Primitives", count: primitiveCount, active: namespace === 'base.primitives', onClick: () => selectNamespace('base.primitives') }), _jsx(NamespaceTab, { label: "Project", count: projectCount, active: namespace === 'project', onClick: () => selectNamespace('project') })] }), categories.length > 0 ? (_jsxs(Row, { gap: "1", wrap: true, children: [_jsx(CategoryChip, { label: "All", active: category === null, onClick: () => setCategory(null) }), categories.map((c) => (_jsx(CategoryChip, { label: c, active: category === c, onClick: () => setCategory(c) }, c)))] })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: results.length === 0 ? (_jsx(Text, { size: "sm", tone: "muted", className: "p-3", children: query.trim()
-                        ? `No components match “${query}”.`
-                        : 'No components match the selected filters.' })) : (_jsxs(Stack, { gap: "3", children: [(namespace === 'all' || namespace === 'base.primitives') && primitives.length > 0 ? (_jsx(GroupedList, { heading: "base.primitives.*", count: primitives.length, manifests: primitives, projectId: projectId, activeComponentId: activeComponentId })) : null, (namespace === 'all' || namespace === 'project') && projects.length > 0 ? (_jsx(GroupedList, { heading: "project.*", count: projects.length, manifests: projects, projectId: projectId, activeComponentId: activeComponentId })) : null] })) })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "shrink-0 space-y-2 border-b border-border p-3", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: translate('components.browser.searchPlaceholder'), className: "pl-8", "aria-label": translate('components.browser.searchAria') })] }), _jsxs(Row, { gap: "1", className: "rounded-md bg-muted/50 p-0.5", role: "group", "aria-label": translate('components.browser.namespaceAria'), children: [_jsx(NamespaceTab, { label: translate('components.browser.all'), count: primitiveCount + projectCount, active: namespace === 'all', onClick: () => selectNamespace('all') }), _jsx(NamespaceTab, { label: translate('components.browser.primitives'), count: primitiveCount, active: namespace === 'base.primitives', onClick: () => selectNamespace('base.primitives') }), _jsx(NamespaceTab, { label: translate('components.browser.project'), count: projectCount, active: namespace === 'project', onClick: () => selectNamespace('project') })] }), categories.length > 0 ? (_jsxs(Row, { gap: "1", wrap: true, children: [_jsx(CategoryChip, { label: translate('components.browser.all'), active: category === null, onClick: () => setCategory(null) }), categories.map((c) => (_jsx(CategoryChip, { label: c, active: category === c, onClick: () => setCategory(c) }, c)))] })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: results.length === 0 ? (_jsx(Text, { size: "sm", tone: "muted", className: "p-3", children: query.trim()
+                        ? translate('components.browser.noMatchQuery', { query })
+                        : translate('components.browser.noMatchFilters') })) : (_jsxs(Stack, { gap: "3", children: [(namespace === 'all' || namespace === 'base.primitives') && primitives.length > 0 ? (_jsx(GroupedList, { heading: "base.primitives.*", count: primitives.length, manifests: primitives, projectId: projectId, activeComponentId: activeComponentId })) : null, (namespace === 'all' || namespace === 'project') && projects.length > 0 ? (_jsx(GroupedList, { heading: "project.*", count: projects.length, manifests: projects, projectId: projectId, activeComponentId: activeComponentId })) : null] })) })] }));
 }
 function NamespaceTab({ label, count, active, onClick, }) {
     return (_jsxs("button", { type: "button", "aria-pressed": active, onClick: onClick, className: cn('flex flex-1 items-center justify-center gap-1.5 rounded-[5px] px-2 py-1 text-xs font-medium transition-colors', active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'), children: [label, _jsx("span", { className: "font-mono text-[0.65rem] text-muted-foreground", children: count })] }));

package/dist/components/components/registry-browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry-browser.js","sourceRoot":"","sources":["../../../src/components/components/registry-browser.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router'\nimport { Search } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { isPrimitive } from '@elytracms/core/component-registry'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport { componentStatus, getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { Code, Input, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { ComponentStatusDot } from './component-status'\n\ntype NamespaceFilter = 'all' | 'base.primitives' | 'project'\n\nexport function RegistryBrowser({\n  projectId,\n  activeComponentId,\n}: {\n  projectId: string\n  activeComponentId?: string\n}) {\n  const studio = getStudioRegistry()\n  const [query, setQuery] = useState('')\n  const [namespace, setNamespace] = useState<NamespaceFilter>('all')\n  const [category, setCategory] = useState<string | null>(null)\n\n  const primitiveCount = studio.registry.primitives().length\n  const projectCount = studio.registry.projectComponents().length\n\n  // Switching namespace clears any category that doesn't exist in the new one.\n  function selectNamespace(ns: NamespaceFilter) {\n    setNamespace(ns)\n    setCategory(null)\n  }\n\n  // Categories are scoped to the active namespace so every chip can yield results.\n  const categories = useMemo(() => {\n    const set = new Set<string>()\n    for (const m of studio.registry.list({ namespace: namespace === 'all' ? undefined : namespace })) {\n      if (m.category) set.add(m.category)\n    }\n    return [...set].sort()\n  }, [studio, namespace])\n\n  const results = useMemo(\n    () =>\n      studio.registry.list({\n        query: query.trim() || undefined,\n        namespace: namespace === 'all' ? undefined : namespace,\n        category: category ?? undefined,\n      }),\n    [studio, query, namespace, category],\n  )\n\n  const primitives = results.filter((m) => isPrimitive(m.id))\n  const projects = results.filter((m) => !isPrimitive(m.id))\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <div className=\"shrink-0 space-y-2 border-b border-border p-3\">\n        <div className=\"relative\">\n          <Search className=\"pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n          <Input\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search components…\"\n            className=\"pl-8\"\n            aria-label=\"Search components\"\n          />\n        </div>\n        <Row gap=\"1\" className=\"rounded-md bg-muted/50 p-0.5\" role=\"group\" aria-label=\"Filter by namespace\">\n          <NamespaceTab label=\"All\" count={primitiveCount + projectCount} active={namespace === 'all'} onClick={() => selectNamespace('all')} />\n          <NamespaceTab label=\"Primitives\" count={primitiveCount} active={namespace === 'base.primitives'} onClick={() => selectNamespace('base.primitives')} />\n          <NamespaceTab label=\"Project\" count={projectCount} active={namespace === 'project'} onClick={() => selectNamespace('project')} />\n        </Row>\n        {categories.length > 0 ? (\n          <Row gap=\"1\" wrap>\n            <CategoryChip label=\"All\" active={category === null} onClick={() => setCategory(null)} />\n            {categories.map((c) => (\n              <CategoryChip key={c} label={c} active={category === c} onClick={() => setCategory(c)} />\n            ))}\n          </Row>\n        ) : null}\n      </div>\n\n      <div className=\"min-h-0 flex-1 overflow-auto p-2\">\n        {results.length === 0 ? (\n          <Text size=\"sm\" tone=\"muted\" className=\"p-3\">\n            {query.trim()\n              ? `No components match “${query}”.`\n              : 'No components match the selected filters.'}\n          </Text>\n        ) : (\n          <Stack gap=\"3\">\n            {(namespace === 'all' || namespace === 'base.primitives') && primitives.length > 0 ? (\n              <GroupedList\n                heading=\"base.primitives.*\"\n                count={primitives.length}\n                manifests={primitives}\n                projectId={projectId}\n                activeComponentId={activeComponentId}\n              />\n            ) : null}\n            {(namespace === 'all' || namespace === 'project') && projects.length > 0 ? (\n              <GroupedList\n                heading=\"project.*\"\n                count={projects.length}\n                manifests={projects}\n                projectId={projectId}\n                activeComponentId={activeComponentId}\n              />\n            ) : null}\n          </Stack>\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction NamespaceTab({\n  label,\n  count,\n  active,\n  onClick,\n}: {\n  label: string\n  count: number\n  active: boolean\n  onClick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={active}\n      onClick={onClick}\n      className={cn(\n        'flex flex-1 items-center justify-center gap-1.5 rounded-[5px] px-2 py-1 text-xs font-medium transition-colors',\n        active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',\n      )}\n    >\n      {label}\n      <span className=\"font-mono text-[0.65rem] text-muted-foreground\">{count}</span>\n    </button>\n  )\n}\n\nfunction CategoryChip({ label, active, onClick }: { label: string; active: boolean; onClick: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        'rounded-full border px-2 py-0.5 text-xs capitalize transition-colors',\n        active\n          ? 'border-primary/30 bg-primary/10 text-primary'\n          : 'border-border text-muted-foreground hover:bg-muted',\n      )}\n    >\n      {label}\n    </button>\n  )\n}\n\nfunction GroupedList({\n  heading,\n  count,\n  manifests,\n  projectId,\n  activeComponentId,\n}: {\n  heading: string\n  count: number\n  manifests: ComponentManifest[]\n  projectId: string\n  activeComponentId?: string\n}) {\n  const studio = getStudioRegistry()\n  return (\n    <Stack gap=\"1\">\n      <Row gap=\"2\" className=\"px-2\">\n        <Code tone=\"muted\">{heading}</Code>\n        <Spacer />\n        <Text size=\"xs\" tone=\"subtle\" mono>\n          {count}\n        </Text>\n      </Row>\n      <Stack gap=\"px\">\n        {manifests.map((m) => {\n          const status = componentStatus(studio, m)\n          const active = m.id === activeComponentId\n          return (\n            <Link\n              key={m.id}\n              to={STUDIO_PROJECT_ROUTE}\n              params={{ projectId, _splat: studioPath.component(m.id) }}\n              aria-current={active ? 'page' : undefined}\n              className={cn(\n                'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',\n                active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n              )}\n            >\n              <ComponentStatusDot status={status} />\n              <span className=\"min-w-0 flex-1 truncate font-medium text-foreground\">{m.title ?? m.id}</span>\n              {m.category ? (\n                <span className=\"shrink-0 text-[0.7rem] capitalize text-muted-foreground\">{m.category}</span>\n              ) : null}\n            </Link>\n          )\n        })}\n      </Stack>\n    </Stack>\n  )\n}\n"]}
+{"version":3,"file":"registry-browser.js","sourceRoot":"","sources":["../../../src/components/components/registry-browser.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router'\nimport { Search } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { isPrimitive } from '@elytracms/core/component-registry'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport { componentStatus, getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { Code, Input, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { ComponentStatusDot } from './component-status'\n\ntype NamespaceFilter = 'all' | 'base.primitives' | 'project'\n\nexport function RegistryBrowser({\n  projectId,\n  activeComponentId,\n}: {\n  projectId: string\n  activeComponentId?: string\n}) {\n  const studio = getStudioRegistry()\n  const [query, setQuery] = useState('')\n  const [namespace, setNamespace] = useState<NamespaceFilter>('all')\n  const [category, setCategory] = useState<string | null>(null)\n\n  const primitiveCount = studio.registry.primitives().length\n  const projectCount = studio.registry.projectComponents().length\n\n  // Switching namespace clears any category that doesn't exist in the new one.\n  function selectNamespace(ns: NamespaceFilter) {\n    setNamespace(ns)\n    setCategory(null)\n  }\n\n  // Categories are scoped to the active namespace so every chip can yield results.\n  const categories = useMemo(() => {\n    const set = new Set<string>()\n    for (const m of studio.registry.list({ namespace: namespace === 'all' ? undefined : namespace })) {\n      if (m.category) set.add(m.category)\n    }\n    return [...set].sort()\n  }, [studio, namespace])\n\n  const results = useMemo(\n    () =>\n      studio.registry.list({\n        query: query.trim() || undefined,\n        namespace: namespace === 'all' ? undefined : namespace,\n        category: category ?? undefined,\n      }),\n    [studio, query, namespace, category],\n  )\n\n  const primitives = results.filter((m) => isPrimitive(m.id))\n  const projects = results.filter((m) => !isPrimitive(m.id))\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <div className=\"shrink-0 space-y-2 border-b border-border p-3\">\n        <div className=\"relative\">\n          <Search className=\"pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n          <Input\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder={translate('components.browser.searchPlaceholder')}\n            className=\"pl-8\"\n            aria-label={translate('components.browser.searchAria')}\n          />\n        </div>\n        <Row gap=\"1\" className=\"rounded-md bg-muted/50 p-0.5\" role=\"group\" aria-label={translate('components.browser.namespaceAria')}>\n          <NamespaceTab label={translate('components.browser.all')} count={primitiveCount + projectCount} active={namespace === 'all'} onClick={() => selectNamespace('all')} />\n          <NamespaceTab label={translate('components.browser.primitives')} count={primitiveCount} active={namespace === 'base.primitives'} onClick={() => selectNamespace('base.primitives')} />\n          <NamespaceTab label={translate('components.browser.project')} count={projectCount} active={namespace === 'project'} onClick={() => selectNamespace('project')} />\n        </Row>\n        {categories.length > 0 ? (\n          <Row gap=\"1\" wrap>\n            <CategoryChip label={translate('components.browser.all')} active={category === null} onClick={() => setCategory(null)} />\n            {categories.map((c) => (\n              <CategoryChip key={c} label={c} active={category === c} onClick={() => setCategory(c)} />\n            ))}\n          </Row>\n        ) : null}\n      </div>\n\n      <div className=\"min-h-0 flex-1 overflow-auto p-2\">\n        {results.length === 0 ? (\n          <Text size=\"sm\" tone=\"muted\" className=\"p-3\">\n            {query.trim()\n              ? translate('components.browser.noMatchQuery', { query })\n              : translate('components.browser.noMatchFilters')}\n          </Text>\n        ) : (\n          <Stack gap=\"3\">\n            {(namespace === 'all' || namespace === 'base.primitives') && primitives.length > 0 ? (\n              <GroupedList\n                heading=\"base.primitives.*\"\n                count={primitives.length}\n                manifests={primitives}\n                projectId={projectId}\n                activeComponentId={activeComponentId}\n              />\n            ) : null}\n            {(namespace === 'all' || namespace === 'project') && projects.length > 0 ? (\n              <GroupedList\n                heading=\"project.*\"\n                count={projects.length}\n                manifests={projects}\n                projectId={projectId}\n                activeComponentId={activeComponentId}\n              />\n            ) : null}\n          </Stack>\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction NamespaceTab({\n  label,\n  count,\n  active,\n  onClick,\n}: {\n  label: string\n  count: number\n  active: boolean\n  onClick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={active}\n      onClick={onClick}\n      className={cn(\n        'flex flex-1 items-center justify-center gap-1.5 rounded-[5px] px-2 py-1 text-xs font-medium transition-colors',\n        active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',\n      )}\n    >\n      {label}\n      <span className=\"font-mono text-[0.65rem] text-muted-foreground\">{count}</span>\n    </button>\n  )\n}\n\nfunction CategoryChip({ label, active, onClick }: { label: string; active: boolean; onClick: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        'rounded-full border px-2 py-0.5 text-xs capitalize transition-colors',\n        active\n          ? 'border-primary/30 bg-primary/10 text-primary'\n          : 'border-border text-muted-foreground hover:bg-muted',\n      )}\n    >\n      {label}\n    </button>\n  )\n}\n\nfunction GroupedList({\n  heading,\n  count,\n  manifests,\n  projectId,\n  activeComponentId,\n}: {\n  heading: string\n  count: number\n  manifests: ComponentManifest[]\n  projectId: string\n  activeComponentId?: string\n}) {\n  const studio = getStudioRegistry()\n  return (\n    <Stack gap=\"1\">\n      <Row gap=\"2\" className=\"px-2\">\n        <Code tone=\"muted\">{heading}</Code>\n        <Spacer />\n        <Text size=\"xs\" tone=\"subtle\" mono>\n          {count}\n        </Text>\n      </Row>\n      <Stack gap=\"px\">\n        {manifests.map((m) => {\n          const status = componentStatus(studio, m)\n          const active = m.id === activeComponentId\n          return (\n            <Link\n              key={m.id}\n              to={STUDIO_PROJECT_ROUTE}\n              params={{ projectId, _splat: studioPath.component(m.id) }}\n              aria-current={active ? 'page' : undefined}\n              className={cn(\n                'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',\n                active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n              )}\n            >\n              <ComponentStatusDot status={status} />\n              <span className=\"min-w-0 flex-1 truncate font-medium text-foreground\">{m.title ?? m.id}</span>\n              {m.category ? (\n                <span className=\"shrink-0 text-[0.7rem] capitalize text-muted-foreground\">{m.category}</span>\n              ) : null}\n            </Link>\n          )\n        })}\n      </Stack>\n    </Stack>\n  )\n}\n"]}

package/dist/components/delivery-health-banner.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Rocket, X } from 'lucide-react';
 import { Button, Row, Spacer, Text } from '@elytracms/studio/ui';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { resolveBackendConfig } from '../lib/persistence/backend-mode';
 import { getConvexClient, queryRef } from '../lib/persistence/convex-client';
 import { resolveDeploymentUrl } from '../lib/workspace';
@@ -39,6 +40,6 @@ export function DeliveryHealthBanner() {
     }, []);
     if (dismissed || !missing || missing.length === 0)
         return null;
-    return (_jsxs(Row, { gap: "2", className: "shrink-0 border-b border-warning/30 bg-warning/10 px-4 py-1.5 text-warning sm:px-6", "data-testid": "delivery-health-banner", children: [_jsx(Rocket, { className: "size-3.5 shrink-0", "aria-hidden": true }), _jsxs(Text, { size: "xs", className: "text-warning", children: ["Instant publish isn\u2019t fully configured \u2014 ", missing.join(', '), " not set on this Convex deployment. Publishes succeed, but the live site won\u2019t update until you set them (see CONNECT.md) and re-push functions."] }), _jsx(Spacer, {}), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => setDismissed(true), "aria-label": "Dismiss", title: "Dismiss", children: _jsx(X, { "aria-hidden": true }) })] }));
+    return (_jsxs(Row, { gap: "2", className: "shrink-0 border-b border-warning/30 bg-warning/10 px-4 py-1.5 text-warning sm:px-6", "data-testid": "delivery-health-banner", children: [_jsx(Rocket, { className: "size-3.5 shrink-0", "aria-hidden": true }), _jsxs(Text, { size: "xs", className: "text-warning", children: ["Instant publish isn\u2019t fully configured \u2014 ", missing.join(', '), " not set on this Convex deployment. Publishes succeed, but the live site won\u2019t update until you set them (see CONNECT.md) and re-push functions."] }), _jsx(Spacer, {}), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => setDismissed(true), "aria-label": translate('shell.deliveryHealth.dismiss'), title: translate('shell.deliveryHealth.dismiss'), children: _jsx(X, { "aria-hidden": true }) })] }));
 }
 //# sourceMappingURL=delivery-health-banner.js.map