npm - @elytracms/studio - Versions diffs - 0.0.32 → 0.0.34 - Mend

@elytracms/studio 0.0.32 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/dist/components/cms/versions-pane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"versions-pane.js","sourceRoot":"","sources":["../../../src/components/cms/versions-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { Eye, GitCompareArrows, RotateCcw } from 'lucide-react'\nimport { Badge, Button, Code, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { documentsSemanticEqual } from '@elytracms/core/content'\nimport { useOperationCache } from '@elytracms/studio/lib/query'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { useCollectionView } from '../collection-view/collection-view-context'\nimport { useDocumentEditor } from './document-editor-context'\nimport { useDocumentVersionsQuery } from './use-document-versions'\nimport { formatVersionTimestamp } from './versions-model'\n\n/*\n EC-224 — the document-level Versions inspector pane. Re-homes the EC-180\n * VersionsPanel at the document level (the Sanity model): the continuous draft\n * on top with Publish, then the recorded version history (the live pin\n * badged), each older version restorable into the draft.\n \n Publish routes through the same pointer op as the header control\n * (`cms.publishDocument`); restore loads a recorded snapshot as the new working\n * draft (the operation snapshots the current draft first, so a rollback is\n * itself undoable) and the open editor adopts it via `replaceDraft`. Unpublish\n * deliberately stays in the header — it routes through the EC-173\n * reference-aware confirmation, which this pane does not duplicate.\n \n EC-298: each row also opens the compare view (⤢) and, once comparing, doubles\n * as the navigator — clicking a row sets it as the base of the diff.\n */\nexport function VersionsPane() {\n const source = useCollectionView()\n const {\n collection,\n docRef,\n draft,\n dirty,\n hasErrors,\n viewReadOnly,\n save,\n replaceDraft,\n compare,\n compareActive,\n startCompare,\n setCompareBase,\n } = useDocumentEditor()\n const [busy, setBusy] = useState(false)\n const published = source.publishing?.isPublished(docRef) ?? false\n const cache = useOperationCache()\n\n // The recorded version history, read through the one shared query (EC-308/AD-17,\n // deduped with the compare view). The flush-before-read ordering lives in the\n // loader, so the listed history is authoritative regardless of which surface\n // triggered the change; `invalidateOn: documents` refreshes it on any\n // publish/restore/save from anywhere. Editor draft/dirty/busy stays local — it\n // is not server state (principle 12).\n const { versionsQuery, versionKey } = useDocumentVersionsQuery(docRef)\n const view = versionsQuery.data ?? null\n\n const liveSnapshot =\n view?.publishedVersion !== undefined\n ? view.versions.find((v) => v.version === view.publishedVersion)?.snapshot\n : undefined\n // SEMANTIC equality (EC-298) — the same engine the compare view uses, so the two\n // never contradict: a doc that only differs by EC-277 envelope drift reads as\n // \"up to date\", not \"unpublished changes\".\n const liveMatchesDraft =\n liveSnapshot !== undefined && documentsSemanticEqual(collection, liveSnapshot, draft)\n const canPublish = !liveMatchesDraft\n\n const handlePublish = useCallback(async () => {\n setBusy(true)\n try {\n // Publish snapshots the SAVED draft — capture any unsaved edits first so\n // the published version is exactly what the editor shows. Await the\n // publish (it flushes + reconciles the pin, EC-225) before re-reading the\n // version list so the new version shows.\n if (dirty) save()\n await source.publishing?.publish(docRef)\n await cache.invalidate(versionKey)\n } finally {\n setBusy(false)\n }\n }, [source, docRef, dirty, save, cache, versionKey])\n\n const handleRestore = useCallback(\n async (version: number) => {\n setBusy(true)\n try {\n // Capture any unsaved buffer edits FIRST so the operation's pre-restore\n // snapshot records them — otherwise they'd be lost and the rollback\n // wouldn't be undoable (restore snapshots the persisted draft).\n if (dirty) save()\n const restored = await source.versioning?.restore(docRef, version)\n if (restored) replaceDraft(restored)\n await cache.invalidate(versionKey)\n } finally {\n setBusy(false)\n }\n },\n [source, docRef, dirty, save, replaceDraft, cache, versionKey],\n )\n\n return (\n <Stack gap=\"3\" className=\"p-3\">\n {canPublish ? (\n <Row gap=\"2\" align=\"center\" className=\"rounded-md border border-primary/40 bg-primary/5 px-2.5 py-2\">\n <Stack gap=\"none\" className=\"min-w-0\">\n <Text size=\"sm\" weight=\"medium\">\n Draft\n </Text>\n <Text size=\"xs\" tone=\"muted\">\n {published ? 'Unpublished changes' : 'Not published yet'}\n </Text>\n </Stack>\n <Spacer />\n <Button\n size=\"sm\"\n onClick={handlePublish}\n disabled={busy \|\| hasErrors \|\| viewReadOnly}\n title={\n viewReadOnly\n ? 'Switch to Draft to publish'\n : hasErrors\n ? 'Fix the document’s validation issues to publish'\n : undefined\n }\n >\n <Eye /> Publish\n </Button>\n </Row>\n ) : (\n <Text size=\"xs\" tone=\"muted\" className=\"px-0.5\">\n The live version is up to date — nothing to publish.\n </Text>\n )}\n\n {compareActive && compare ? (\n <Text size=\"xs\" tone=\"muted\" className=\"px-0.5\">\n Comparing <span className=\"font-medium text-foreground\">v{compare.base}</span> →{' '}\n {compare.target === 'draft' ? 'Current draft' : `v${compare.target}`}. Click a version to set it as the base.\n </Text>\n ) : null}\n\n <Stack gap=\"1\">\n {view === null ? (\n <Text size=\"xs\" tone=\"muted\" className=\"px-0.5\">\n Loading…\n </Text>\n ) : view.versions.length === 0 ? (\n <Text size=\"xs\" tone=\"muted\" className=\"px-0.5\">\n No published versions yet.\n </Text>\n ) : (\n view.versions.map((entry) => {\n const isLive = entry.version === view.publishedVersion\n const isBase = compareActive && compare?.base === entry.version\n const isTarget = compareActive && compare?.target === entry.version\n const selectable = compareActive && !isTarget\n return (\n <Row\n key={entry.version}\n gap=\"2\"\n align=\"center\"\n {...(selectable\n ? {\n role: 'button',\n tabIndex: 0,\n onClick: () => setCompareBase(entry.version),\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault()\n setCompareBase(entry.version)\n }\n },\n }\n : {})}\n className={cn(\n 'rounded-md border px-2.5 py-1.5',\n isBase ? 'border-primary bg-primary/5' : 'border-border/60',\n selectable && !isBase && 'cursor-pointer hover:bg-muted/60',\n )}\n >\n <Code tone={isLive ? 'primary' : 'muted'}>v{entry.version}</Code>\n {isLive ? <Badge variant=\"success\">Published</Badge> : null}\n {isBase ? (\n <Badge variant=\"outline\">Base</Badge>\n ) : isTarget ? (\n <Badge variant=\"outline\">Compared</Badge>\n ) : null}\n <Text size=\"xs\" tone=\"subtle\" mono className=\"truncate\">\n {formatVersionTimestamp(entry.createdAt)}\n </Text>\n <Spacer />\n {compareActive ? null : (\n <>\n <Button\n size=\"icon-sm\"\n variant=\"ghost\"\n onClick={() => startCompare(entry.version)}\n title=\"Compare this version with the current draft\"\n aria-label={`Compare v${entry.version}`}\n >\n <GitCompareArrows />\n </Button>\n {isLive ? null : (\n <Button\n size=\"sm\"\n variant=\"outline\"\n onClick={() => void handleRestore(entry.version)}\n disabled={busy \|\| viewReadOnly}\n title={viewReadOnly ? 'Switch to Draft to restore' : undefined}\n >\n <RotateCcw /> Restore\n </Button>\n )}\n </>\n )}\n </Row>\n )\n })\n )}\n </Stack>\n </Stack>\n )\n}\n"]}
1	+ {"version":3,"file":"versions-pane.js","sourceRoot":"","sources":["../../../src/components/cms/versions-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { Eye, GitCompareArrows, RotateCcw } from 'lucide-react'\nimport { Badge, Button, Code, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { documentsSemanticEqual } from '@elytracms/core/content'\nimport { useOperationCache } from '@elytracms/studio/lib/query'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { useCollectionView } from '../collection-view/collection-view-context'\nimport { useDocumentEditor } from './document-editor-context'\nimport { useDocumentVersionsQuery } from './use-document-versions'\nimport { formatVersionTimestamp } from './versions-model'\n\n/*\n EC-224 — the document-level Versions inspector pane. Re-homes the EC-180\n * VersionsPanel at the document level (the Sanity model): the continuous draft\n * on top with Publish, then the recorded version history (the live pin\n * badged), each older version restorable into the draft.\n \n Publish routes through the same pointer op as the header control\n * (`cms.publishDocument`); restore loads a recorded snapshot as the new working\n * draft (the operation snapshots the current draft first, so a rollback is\n * itself undoable) and the open editor adopts it via `replaceDraft`. Unpublish\n * deliberately stays in the header — it routes through the EC-173\n * reference-aware confirmation, which this pane does not duplicate.\n \n EC-298: each row also opens the compare view (⤢) and, once comparing, doubles\n * as the navigator — clicking a row sets it as the base of the diff.\n */\nexport function VersionsPane() {\n const source = useCollectionView()\n const {\n collection,\n docRef,\n draft,\n dirty,\n hasErrors,\n viewReadOnly,\n save,\n replaceDraft,\n compare,\n compareActive,\n startCompare,\n setCompareBase,\n } = useDocumentEditor()\n const [busy, setBusy] = useState(false)\n const published = source.publishing?.isPublished(docRef) ?? false\n const cache = useOperationCache()\n\n // The recorded version history, read through the one shared query (EC-308/AD-17,\n // deduped with the compare view). The flush-before-read ordering lives in the\n // loader, so the listed history is authoritative regardless of which surface\n // triggered the change; `invalidateOn: documents` refreshes it on any\n // publish/restore/save from anywhere. Editor draft/dirty/busy stays local — it\n // is not server state (principle 12).\n const { versionsQuery, versionKey } = useDocumentVersionsQuery(docRef)\n const view = versionsQuery.data ?? null\n\n const liveSnapshot =\n view?.publishedVersion !== undefined\n ? view.versions.find((v) => v.version === view.publishedVersion)?.snapshot\n : undefined\n // SEMANTIC equality (EC-298) — the same engine the compare view uses, so the two\n // never contradict: a doc that only differs by EC-277 envelope drift reads as\n // \"up to date\", not \"unpublished changes\".\n const liveMatchesDraft =\n liveSnapshot !== undefined && documentsSemanticEqual(collection, liveSnapshot, draft)\n const canPublish = !liveMatchesDraft\n\n const handlePublish = useCallback(async () => {\n setBusy(true)\n try {\n // Publish snapshots the SAVED draft — capture any unsaved edits first so\n // the published version is exactly what the editor shows. Await the\n // publish (it flushes + reconciles the pin, EC-225) before re-reading the\n // version list so the new version shows.\n if (dirty) save()\n await source.publishing?.publish(docRef)\n await cache.invalidate(versionKey)\n } finally {\n setBusy(false)\n }\n }, [source, docRef, dirty, save, cache, versionKey])\n\n const handleRestore = useCallback(\n async (version: number) => {\n setBusy(true)\n try {\n // Capture any unsaved buffer edits FIRST so the operation's pre-restore\n // snapshot records them — otherwise they'd be lost and the rollback\n // wouldn't be undoable (restore snapshots the persisted draft).\n if (dirty) save()\n const restored = await source.versioning?.restore(docRef, version)\n if (restored) replaceDraft(restored)\n await cache.invalidate(versionKey)\n } finally {\n setBusy(false)\n }\n },\n [source, docRef, dirty, save, replaceDraft, cache, versionKey],\n )\n\n return (\n <Stack gap=\"3\" className=\"p-3\">\n {canPublish ? (\n <Row gap=\"2\" align=\"center\" className=\"rounded-md border border-primary/40 bg-primary/5 px-2.5 py-2\">\n <Stack gap=\"none\" className=\"min-w-0\">\n <Text size=\"sm\" weight=\"medium\">\n {translate('cms.editor.draftState')}\n </Text>\n <Text size=\"xs\" tone=\"muted\">\n {published\n ? translate('cms.version.unpublishedChanges')\n : translate('cms.version.notPublishedYet')}\n </Text>\n </Stack>\n <Spacer />\n <Button\n size=\"sm\"\n onClick={handlePublish}\n disabled={busy \|\| hasErrors \|\| viewReadOnly}\n title={\n viewReadOnly\n ? translate('cms.editor.switchToDraftToPublish')\n : hasErrors\n ? translate('cms.version.fixValidationToPublish')\n : undefined\n }\n >\n <Eye /> {translate('cms.editor.publish')}\n </Button>\n </Row>\n ) : (\n <Text size=\"xs\" tone=\"muted\" className=\"px-0.5\">\n {translate('cms.version.liveUpToDate')}\n </Text>\n )}\n\n {compareActive && compare ? (\n <Text size=\"xs\" tone=\"muted\" className=\"px-0.5\">\n Comparing <span className=\"font-medium text-foreground\">v{compare.base}</span> →{' '}\n {compare.target === 'draft' ? 'Current draft' : `v${compare.target}`}. Click a version to set it as the base.\n </Text>\n ) : null}\n\n <Stack gap=\"1\">\n {view === null ? (\n <Text size=\"xs\" tone=\"muted\" className=\"px-0.5\">\n {translate('common.loading')}\n </Text>\n ) : view.versions.length === 0 ? (\n <Text size=\"xs\" tone=\"muted\" className=\"px-0.5\">\n {translate('cms.version.noVersionsYet')}\n </Text>\n ) : (\n view.versions.map((entry) => {\n const isLive = entry.version === view.publishedVersion\n const isBase = compareActive && compare?.base === entry.version\n const isTarget = compareActive && compare?.target === entry.version\n const selectable = compareActive && !isTarget\n return (\n <Row\n key={entry.version}\n gap=\"2\"\n align=\"center\"\n {...(selectable\n ? {\n role: 'button',\n tabIndex: 0,\n onClick: () => setCompareBase(entry.version),\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault()\n setCompareBase(entry.version)\n }\n },\n }\n : {})}\n className={cn(\n 'rounded-md border px-2.5 py-1.5',\n isBase ? 'border-primary bg-primary/5' : 'border-border/60',\n selectable && !isBase && 'cursor-pointer hover:bg-muted/60',\n )}\n >\n <Code tone={isLive ? 'primary' : 'muted'}>v{entry.version}</Code>\n {isLive ? <Badge variant=\"success\">{translate('cms.editor.publishedState')}</Badge> : null}\n {isBase ? (\n <Badge variant=\"outline\">{translate('cms.version.baseBadge')}</Badge>\n ) : isTarget ? (\n <Badge variant=\"outline\">{translate('cms.version.comparedBadge')}</Badge>\n ) : null}\n <Text size=\"xs\" tone=\"subtle\" mono className=\"truncate\">\n {formatVersionTimestamp(entry.createdAt)}\n </Text>\n <Spacer />\n {compareActive ? null : (\n <>\n <Button\n size=\"icon-sm\"\n variant=\"ghost\"\n onClick={() => startCompare(entry.version)}\n title={translate('cms.version.compareWithDraft')}\n aria-label={translate('cms.version.compareVersionLabel', { version: entry.version })}\n >\n <GitCompareArrows />\n </Button>\n {isLive ? null : (\n <Button\n size=\"sm\"\n variant=\"outline\"\n onClick={() => void handleRestore(entry.version)}\n disabled={busy \|\| viewReadOnly}\n title={viewReadOnly ? translate('cms.version.switchToDraftToRestore') : undefined}\n >\n <RotateCcw /> {translate('cms.version.restore')}\n </Button>\n )}\n </>\n )}\n </Row>\n )\n })\n )}\n </Stack>\n </Stack>\n )\n}\n"]}

package/dist/components/cms/view-bar.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { ArrowDown, ArrowUp, Check, List, ListTree, SlidersHorizontal } from 'lucide-react';
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Row, Text, } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
+import { translate } from '@elytracms/studio/lib/i18n';
 import { moveColumn, resolveColumns, toggleColumn } from '@elytracms/studio/lib/cms-views';
 import { fieldLabel } from './cms-store';
 import { useCollectionView } from '../collection-view/collection-view-context';
@@ -40,12 +41,12 @@ export function DisplayMenu({ collection, hierarchical, treeMode, onToggleTree,
     const state = source.viewState();
     const columns = resolveColumns(collection, state);
     const titleField = columns.find((column) => column.visible)?.field;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Display options", title: "Display: layout and columns", "data-testid": "display-menu", children: _jsx(SlidersHorizontal, {}) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [hierarchical ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuLabel, { children: "Layout" }), _jsx(LayoutOption, { label: "Flat list", icon: _jsx(List, {}), active: !treeMode, onSelect: () => onToggleTree(false) }), _jsx(LayoutOption, { label: "Page hierarchy", icon: _jsx(ListTree, {}), active: treeMode, onSelect: () => onToggleTree(true) }), _jsx(DropdownMenuSeparator, {})] })) : null, _jsx(DropdownMenuLabel, { children: "Columns \u00B7 first visible is the title" }), columns.map((column, index) => {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": translate('cms.list.display.ariaLabel'), title: translate('cms.list.display.title'), "data-testid": "display-menu", children: _jsx(SlidersHorizontal, {}) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [hierarchical ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuLabel, { children: translate('cms.list.display.layout') }), _jsx(LayoutOption, { label: translate('cms.list.display.flatList'), icon: _jsx(List, {}), active: !treeMode, onSelect: () => onToggleTree(false) }), _jsx(LayoutOption, { label: translate('cms.list.display.pageHierarchy'), icon: _jsx(ListTree, {}), active: treeMode, onSelect: () => onToggleTree(true) }), _jsx(DropdownMenuSeparator, {})] })) : null, _jsx(DropdownMenuLabel, { children: translate('cms.list.display.columns') }), columns.map((column, index) => {
                         const field = collection.fields.find((f) => f.name === column.field);
                         if (!field)
                             return null;
                         const isTitle = column.field === titleField;
-                        return (_jsxs(DropdownMenuItem, { onSelect: (event) => event.preventDefault(), "data-testid": `column-row-${column.field}`, children: [_jsx("input", { type: "checkbox", className: "size-3.5 accent-primary", checked: column.visible, disabled: isTitle, onChange: () => source.setViewState((prev) => toggleColumn(collection, prev, column.field)), "aria-label": `Toggle column ${fieldLabel(field)}`, "data-testid": `column-toggle-${column.field}` }), _jsxs(Text, { as: "span", size: "sm", className: "min-w-0 flex-1 truncate", children: [fieldLabel(field), isTitle ? (_jsxs(Text, { as: "span", size: "xs", tone: "subtle", children: [' ', "(title)"] })) : null] }), _jsxs(Row, { gap: "1", children: [_jsx(ColumnMoveButton, { label: `Move column ${fieldLabel(field)} up`, icon: _jsx(ArrowUp, {}), disabled: index <= 0, onMove: () => source.setViewState((prev) => moveColumn(collection, prev, column.field, -1)) }), _jsx(ColumnMoveButton, { label: `Move column ${fieldLabel(field)} down`, icon: _jsx(ArrowDown, {}), disabled: index >= columns.length - 1, onMove: () => source.setViewState((prev) => moveColumn(collection, prev, column.field, 1)) })] })] }, column.field));
+                        return (_jsxs(DropdownMenuItem, { onSelect: (event) => event.preventDefault(), "data-testid": `column-row-${column.field}`, children: [_jsx("input", { type: "checkbox", className: "size-3.5 accent-primary", checked: column.visible, disabled: isTitle, onChange: () => source.setViewState((prev) => toggleColumn(collection, prev, column.field)), "aria-label": translate('cms.list.display.toggleColumn', { field: fieldLabel(field) }), "data-testid": `column-toggle-${column.field}` }), _jsxs(Text, { as: "span", size: "sm", className: "min-w-0 flex-1 truncate", children: [fieldLabel(field), isTitle ? (_jsxs(Text, { as: "span", size: "xs", tone: "subtle", children: [' ', translate('cms.list.display.titleTag')] })) : null] }), _jsxs(Row, { gap: "1", children: [_jsx(ColumnMoveButton, { label: translate('cms.list.display.moveColumnUp', { field: fieldLabel(field) }), icon: _jsx(ArrowUp, {}), disabled: index <= 0, onMove: () => source.setViewState((prev) => moveColumn(collection, prev, column.field, -1)) }), _jsx(ColumnMoveButton, { label: translate('cms.list.display.moveColumnDown', { field: fieldLabel(field) }), icon: _jsx(ArrowDown, {}), disabled: index >= columns.length - 1, onMove: () => source.setViewState((prev) => moveColumn(collection, prev, column.field, 1)) })] })] }, column.field));
                     })] })] }));
 }
 /** One layout choice (flat vs tree) — a checkmark marks the active mode. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"view-bar.js","sourceRoot":"","sources":["../../../src/components/cms/view-bar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAE3F,OAAO,EACL,MAAM,EACN,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,mBAAmB,EACnB,GAAG,EACH,IAAI,GACL,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,EAAE,EAAE,MAAM,6BAA6B,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAA;AAE9E;;;;;;;;;;GAUG;AACH,MAAM,UAAU,QAAQ;IACtB,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;IAExC,mFAAmF;IACnF,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;IAElC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAA;IACzC,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,IAAI,KAAK,CAAC,CAAC,CAAE,CAAA;IAEtE,OAAO,CACL,KAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,8BAA8B,iBAAa,UAAU,YAC1E,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,iBAEE,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,iBACtB,aAAa,IAAI,CAAC,EAAE,EAAE,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,EAC/C,SAAS,EAAE,EAAE,CACX,iEAAiE,EACjE,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE;gBACnB,CAAC,CAAC,yCAAyC;gBAC3C,CAAC,CAAC,6CAA6C,CAClD,YAEA,IAAI,CAAC,IAAI,IAZL,IAAI,CAAC,EAAE,CAaL,CACV,CAAC,GACE,CACP,CAAA;AACH,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,YAAY,GAMb;IACC,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,EAAE,CAAA;IAChC,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA;IACjD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,CAAA;IAElE,OAAO,CACL,MAAC,YAAY,eACX,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,SAAS,gBACH,iBAAiB,EAC5B,KAAK,EAAC,6BAA6B,iBACvB,cAAc,YAE1B,KAAC,iBAAiB,KAAG,GACd,GACW,EACtB,MAAC,mBAAmB,IAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,aAC9C,YAAY,CAAC,CAAC,CAAC,CACd,8BACE,KAAC,iBAAiB,yBAA2B,EAC7C,KAAC,YAAY,IACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,KAAC,IAAI,KAAG,EACd,MAAM,EAAE,CAAC,QAAQ,EACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,GACnC,EACF,KAAC,YAAY,IACX,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,MAAM,EAAE,QAAQ,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GAClC,EACF,KAAC,qBAAqB,KAAG,IACxB,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,iBAAiB,4DAAyD,EAC1E,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;wBAC7B,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,CAAA;wBACpE,IAAI,CAAC,KAAK;4BAAE,OAAO,IAAI,CAAA;wBACvB,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,KAAK,UAAU,CAAA;wBAC3C,OAAO,CACL,MAAC,gBAAgB,IAEf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,iBAC9B,cAAc,MAAM,CAAC,KAAK,EAAE,aAEzC,gBACE,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,GAAG,EAAE,CACb,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,gBAEjE,iBAAiB,UAAU,CAAC,KAAK,CAAC,EAAE,iBACnC,iBAAiB,MAAM,CAAC,KAAK,EAAE,GAC5C,EACF,MAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,yBAAyB,aAC1D,UAAU,CAAC,KAAK,CAAC,EACjB,OAAO,CAAC,CAAC,CAAC,CACT,MAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,aACpC,GAAG,eAEC,CACR,CAAC,CAAC,CAAC,IAAI,IACH,EACP,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,aACV,KAAC,gBAAgB,IACf,KAAK,EAAE,eAAe,UAAU,CAAC,KAAK,CAAC,KAAK,EAC5C,IAAI,EAAE,KAAC,OAAO,KAAG,EACjB,QAAQ,EAAE,KAAK,IAAI,CAAC,EACpB,MAAM,EAAE,GAAG,EAAE,CACX,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAE/E,EACF,KAAC,gBAAgB,IACf,KAAK,EAAE,eAAe,UAAU,CAAC,KAAK,CAAC,OAAO,EAC9C,IAAI,EAAE,KAAC,SAAS,KAAG,EACnB,QAAQ,EAAE,KAAK,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EACrC,MAAM,EAAE,GAAG,EAAE,CACX,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,GAE9E,IACE,KAzCD,MAAM,CAAC,KAAK,CA0CA,CACpB,CAAA;oBACH,CAAC,CAAC,IACkB,IACT,CAChB,CAAA;AACH,CAAC;AAED,4EAA4E;AAC5E,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,GAMT;IACC,OAAO,CACL,MAAC,gBAAgB,mBACF,UAAU,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,EACrD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,QAAQ,EAAE,CAAA;QACZ,CAAC,aAEA,IAAI,EACL,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,yBAAyB,YAC1D,KAAK,GACD,EACN,MAAM,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,SAAS,EAAC,uBAAuB,GAAG,CAAC,CAAC,CAAC,IAAI,IAC3C,CACpB,CAAA;AACH,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,GAMP;IACC,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,uBAAuB,gBACrB,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,MAAM,EAAE,CAAA;QACV,CAAC,YAEA,IAAI,GACE,CACV,CAAA;AACH,CAAC","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"]}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../src/components/components/component-detail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAChE,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACnF,OAAO,EACL,oBAAoB,EACpB,iBAAiB,GAClB,MAAM,0DAA0D,CAAA;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,yDAAyD,CAAA;AACxF,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAA;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,0DAA0D,CAAA;AAC1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAA;AAClF,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAErF;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,WAAW,GAIZ;IACC,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;IAEzD,4EAA4E;IAC5E,mDAAmD;IACnD,gBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,QAAQ,EAAE,EAAE,IAAI,WAAW,EAAE,CAAC,CAAC,CAAA;IAE7E,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,CACL,cAAK,SAAS,EAAC,oCAAoC,YACjD,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,sBAAsB,aAC5D,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAC,IAAI,~~oCAElB~~,EACV,~~MAAC~~,IAAI,IAAC,IAAI,EAAC,OAAO,~~oDACmB~~,~~KAAC~~,~~IAAI~~,~~IAAC~~,~~IAAI~~,~~EAAC~~,~~OAAO~~,~~YAAE~~,WAAW,~~GAAQ~~,~~SACrE~~,EACP,KAAC,IAAI,IACH,EAAE,EAAE,oBAAoB,EACxB,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,UAAU,EAAE,EAAE,EACtD,SAAS,EAAC,sCAAsC,~~mCAG3C~~,IACD,GACJ,CACP,CAAA;IACH,CAAC;IAED,MAAM,MAAM,GAAG,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAChD,MAAM,SAAS,GAAG,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAA;IAE1E,OAAO,CACL,eAAK,SAAS,EAAC,qCAAqC,aAClD,MAAC,IAAI,IACH,EAAE,EAAE,oBAAoB,EACxB,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,UAAU,EAAE,EAAE,EACtD,SAAS,EAAC,qHAAqH,aAE/H,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,~~uBAC7B~~,EAEP,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aAEZ,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,mBACf,KAAC,OAAO,IAAC,IAAI,EAAC,SAAS,YAAE,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,EAAE,GAAW,EACjE,KAAC,KAAK,IAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,YAAG,SAAS,GAAS,EACnF,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,QAAQ,CAAC,QAAQ,GAAS,CAAC,CAAC,CAAC,IAAI,EAChF,KAAC,MAAM,KAAG,EACV,KAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,GAAI,IACpC,EACN,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,YACjC,QAAQ,CAAC,EAAE,GACP,EACN,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CACtB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,aAAa,YACvC,QAAQ,CAAC,WAAW,GAChB,CACR,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,cAAc,YAClF,iBAAiB,CAAC,MAAM,CAAC,GACrB,CACR,CAAC,CAAC,CAAC,IAAI,IACF,EAGP,QAAQ,CAAC,YAAY,IAAI,QAAQ,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3D,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,~~oCAE1B~~,EACP,KAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,kBACd,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACpC,KAAC,IAAI,IAAa,IAAI,EAAC,OAAO,YAC3B,KAAK,IADG,KAAK,CAET,CACR,CAAC,GACE,IACA,CACT,CAAC,CAAC,CAAC,IAAI,EAGR,KAAC,aAAa,IAAmB,QAAQ,EAAE,QAAQ,IAA/B,QAAQ,CAAC,EAAE,CAAwB,EAGvD,KAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,GAAI,EAGtC,KAAC,eAAe,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,GAAI,IACnF,IACJ,CACP,CAAA;AACH,CAAC","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"]}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components-index.js","sourceRoot":"","sources":["../../../src/components/components/components-index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,0DAA0D,CAAA;AAC1F,OAAO,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,EACL,IAAI,GACL,MAAM,sBAAsB,CAAA;AAE7B,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;GAatB,CAAA;AAEH;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAyB;IAClE,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;IACrC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,MAAM,CAAA;IACtD,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,MAAM,CAAA;IAE3D,OAAO,CACL,eAAK,SAAS,EAAC,qCAAqC,aAElD,cAAK,SAAS,EAAC,qEAAqE,YAClF,KAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI,GACrC,EAEN,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,KAAC,OAAO,IAAC,IAAI,EAAC,SAAS,~~mCAA6B~~,~~EACpD~~,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,~~gJAGX~~,~~IACD~~,EAER,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,QAAQ,~~IAAC~~,KAAK,~~EAAC~~,~~YAAY~~,~~EAAC~~,KAAK,EAAE,MAAM,CAAC,KAAK,~~EAAE~~,IAAI,EAAE,~~GAAG~~,UAAU,~~iBAAiB~~,QAAQ,~~UAAU~~,~~GAAI~~,~~EAC5G~~,KAAC,QAAQ,IAAC,KAAK,~~EAAC~~,~~OAAO~~,~~EAAC~~,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAC,SAAS,GAAG,~~EAC9D~~,KAAC,QAAQ,IACP,KAAK,~~EAAC~~,~~gBAAgB~~,~~EACtB~~,KAAK,EAAE,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,EAC3C,IAAI,EAAE,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACpE,IAAI,EAAE,~~GAAG~~,MAAM,CAAC,YAAY,~~mBAAmB~~,MAAM,CAAC,OAAO,~~UAAU~~,~~GACvE~~,IACE,EAEN,MAAC,IAAI,IAAC,SAAS,EAAC,6BAA6B,aAC3C,eAAM,SAAS,EAAC,mFAAmF,YACjG,KAAC,iBAAiB,IAAC,SAAS,EAAC,QAAQ,GAAG,GACnC,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,~~2JAGrB~~,IACF,EAEP,MAAC,KAAK,eACJ,MAAC,WAAW,eACV,KAAC,MAAM,IAAC,SAAS,EAAC,8BAA8B,GAAG,EACnD,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,UAAU~~,+CAE1B~~,EACP,KAAC,MAAM,KAAG,EACV,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,~~sBAAc~~,~~IAC1B~~,EACd,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,KAAK,aAC5B,MAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,gFACsC,GAAG,EACnE,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,0BAAiB,gDAA2C,GAAG,EACnF,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,kCAAyB,8HAEtC,EACP,cAAK,SAAS,EAAC,sHAAsH,YAClI,gBAAgB,GACb,EACN,~~MAAC~~,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,~~6BACf~~,~~KAAC~~,~~IAAI~~,~~IAAC~~,IAAI,~~EAAC~~,~~OAAO~~,~~4CAAmC~~,~~IAC5D~~,IACD,IACF,IACF,IACJ,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,SAAS,GAMjB;IACC,MAAM,UAAU,GACd,IAAI,KAAK,SAAS;QAChB,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,IAAI,KAAK,SAAS;YAClB,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,IAAI,KAAK,OAAO;gBAChB,CAAC,CAAC,uBAAuB;gBACzB,CAAC,CAAC,iBAAiB,CAAA;IAC3B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAC,KAAK,aACnB,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,kBAC9B,KAAK,CAAC,WAAW,EAAE,GACf,EACP,cAAK,SAAS,EAAE,8CAA8C,UAAU,EAAE,YAAG,KAAK,GAAO,EACxF,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,YAC7C,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAA;AACH,CAAC","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"]}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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"]}