@elytracms/studio 0.0.42 → 0.0.44

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

@@ -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 { 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; it refreshes on any version-mutating command\n  // (publish/unpublish/snapshot/restore/pin/delete — EC-322) from anywhere, but\n  // NOT on a plain draft save (which appends no version). Editor draft/dirty/busy\n  // stays local — it 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          {translate('cms.version.comparingHint', {\n            base: compare.base,\n            target:\n              compare.target === 'draft'\n                ? translate('cms.version.currentDraft')\n                : `v${compare.target}`,\n          })}\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"]}
+{"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 { useRestoreVersion } from './use-restore-version'\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; it refreshes on any version-mutating command\n  // (publish/unpublish/snapshot/restore/pin/delete — EC-322) from anywhere, but\n  // NOT on a plain draft save (which appends no version). Editor draft/dirty/busy\n  // stays local — it is not server state (principle 12).\n  const { versionsQuery, versionKey } = useDocumentVersionsQuery(docRef)\n  const view = versionsQuery.data ?? null\n  // EC-325 — the shared restore sequence (flush → restore → replaceDraft →\n  // invalidate). Its `restoreBusy` is OR-ed with the local publish `busy` below so\n  // the pane keeps its original single-in-flight gate: while EITHER a publish or a\n  // restore is round-tripping, all of the pane's actions disable together.\n  const { restore: restoreVersion, busy: restoreBusy } = useRestoreVersion({\n    source,\n    docRef,\n    versionKey,\n    dirty,\n    save,\n    replaceDraft,\n  })\n  const anyBusy = busy || restoreBusy\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  // Restore a recorded version into the working draft — the whole-document\n  // restore (no scope) via the shared EC-325 helper, which flushes any unsaved\n  // buffer FIRST so the operation's pre-restore snapshot records it (else the\n  // rollback wouldn't be undoable — restore snapshots the persisted draft).\n  const handleRestore = useCallback(\n    (version: number) => restoreVersion(version),\n    [restoreVersion],\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={anyBusy || 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          {translate('cms.version.comparingHint', {\n            base: compare.base,\n            target:\n              compare.target === 'draft'\n                ? translate('cms.version.currentDraft')\n                : `v${compare.target}`,\n          })}\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={anyBusy || 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

@@ -1,10 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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 { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Row, SegmentedControl, Text, } from '@elytracms/studio/ui';
 import { translate } from '@elytracms/studio/lib/i18n';
 import { moveColumn, resolveColumns, toggleColumn } from '@elytracms/studio/lib/cms-views';
-import { fieldLabel } from './cms-store';
+import { fieldLabel } from './cms-labels';
 import { useCollectionView } from '../collection-view/collection-view-context';
 /**
  * The view selector of the collection table (EC-169) — a segmented control that
@@ -25,9 +24,13 @@ export function ViewTabs() {
         return null;
     const activeId = source.views?.activeId();
     const active = views.find((view) => view.id === activeId) ?? views[0];
-    return (_jsx(Row, { gap: "px", className: "rounded-md bg-muted/50 p-0.5", "data-testid": "view-bar", children: views.map((view) => (_jsx("button", { type: "button", "aria-pressed": view.id === active.id, "data-testid": `view-chip-${view.id}`, onClick: () => source.views?.setActive(view.id), className: cn('rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors', view.id === active.id
-                ? 'bg-background text-foreground shadow-sm'
-                : 'text-muted-foreground hover:text-foreground'), children: view.name }, view.id))) }));
+    return (_jsx(SegmentedControl, { testId: "view-bar", items: views.map((view) => ({
+            key: view.id,
+            label: view.name,
+            active: view.id === active.id,
+            onClick: () => source.views?.setActive(view.id),
+            testId: `view-chip-${view.id}`,
+        })) }));
 }
 /**
  * Display options for the collection table (EC-246a) — one far-right control,

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

@@ -1 +1 @@
-{"version":3,"file":"view-bar.js","sourceRoot":"","sources":["../../../src/components/cms/view-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react'\nimport { ArrowDown, ArrowUp, Check, List, ListTree, SlidersHorizontal } from 'lucide-react'\nimport type { CollectionDef } from '@elytracms/core/cms-core'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  Row,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { 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"]}
+{"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  SegmentedControl,\n  Text,\n} from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { moveColumn, resolveColumns, toggleColumn } from '@elytracms/studio/lib/cms-views'\nimport { fieldLabel } from './cms-labels'\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    <SegmentedControl\n      testId=\"view-bar\"\n      items={views.map((view) => ({\n        key: view.id,\n        label: view.name,\n        active: view.id === active.id,\n        onClick: () => source.views?.setActive(view.id),\n        testId: `view-chip-${view.id}`,\n      }))}\n    />\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/collab/collab-context.d.ts

@@ -19,8 +19,9 @@ export interface CollabStore {
     /** Run an imperative store mutation, then re-render consumers. */
     mutate: <T>(fn: () => T) => T;
 }
+declare const useCollab: () => CollabStore;
 export declare function CollabProvider({ projectId, children, }: {
     projectId: string;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function useCollab(): CollabStore;
+export { useCollab };

package/dist/components/collab/collab-context.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useReducer, useRef } from 'react';
+import { useMemo, useReducer, useRef } from 'react';
 import { Collaboration, createSequentialClock, createSequentialIds } from '@elytracms/core/collaboration';
+import { createRequiredContext } from '@elytracms/studio/lib/required-context';
 import { seedCollabSession } from './collab-seed';
-const CollabContext = createContext(null);
+const { Context: CollabContext, useRequired: useCollab } = createRequiredContext('Collab');
 const ME = { id: 'u-you', name: 'You' };
 export function CollabProvider({ projectId, children, }) {
     const [tick, bump] = useReducer((n) => n + 1, 0);
@@ -34,10 +35,5 @@ export function CollabProvider({ projectId, children, }) {
     }, [projectId, previewMode, tick]);
     return _jsx(CollabContext.Provider, { value: store, children: children });
 }
-export function useCollab() {
-    const store = useContext(CollabContext);
-    if (!store)
-        throw new Error('useCollab must be used within a <CollabProvider>.');
-    return store;
-}
+export { useCollab };
 //# sourceMappingURL=collab-context.js.map

package/dist/components/collab/collab-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"collab-context.js","sourceRoot":"","sources":["../../../src/components/collab/collab-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE9E,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AAEzG,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAqBjD,MAAM,aAAa,GAAG,aAAa,CAAqB,IAAI,CAAC,CAAA;AAE7D,MAAM,EAAE,GAAU,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;AAE9C,MAAM,UAAU,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,GAIT;IACC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;IACxD,MAAM,CAAC,WAAW,EAAE,mBAAmB,CAAC,GAAG,UAAU,CACnD,CAAC,CAAc,EAAE,IAAiB,EAAE,EAAE,CAAC,IAAI,EAC3C,OAAsB,CACvB,CAAA;IAED,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAC9C,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;QACzB,MAAM,MAAM,GAAG,IAAI,aAAa,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE,EAAE,CAAC,CAAA;QAChG,+EAA+E;QAC/E,iBAAiB,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAAA;QACzD,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;QACnC,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;IACtB,CAAC;IAED,MAAM,KAAK,GAAG,OAAO,CAAc,GAAG,EAAE;QACtC,MAAM,MAAM,GAAG,GAAG,CAAC,OAAQ,CAAA;QAC3B,OAAO;YACL,MAAM;YACN,SAAS;YACT,EAAE,EAAE,EAAE;YACN,WAAW;YACX,cAAc,EAAE,mBAAmB;YACnC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE;gBACb,MAAM,MAAM,GAAG,EAAE,EAAE,CAAA;gBACnB,IAAI,EAAE,CAAA;gBACN,OAAO,MAAM,CAAA;YACf,CAAC;SACF,CAAA;QACD,yEAAyE;QACzE,oEAAoE;IACtE,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC,CAAA;IAElC,OAAO,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA0B,CAAA;AAClF,CAAC;AAED,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IACvC,IAAI,CAAC,KAAK;QAAE,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;IAChF,OAAO,KAAK,CAAA;AACd,CAAC","sourcesContent":["import { createContext, useContext, useMemo, useReducer, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { Collaboration, createSequentialClock, createSequentialIds } from '@elytracms/core/collaboration'\nimport type { Actor, PreviewMode } from '@elytracms/core/collaboration'\nimport { seedCollabSession } from './collab-seed'\n\n/**\n * Per-project collaboration session (Phase 10). Holds one {@link Collaboration} store seeded with\n * an initial version + presence for the current user, and exposes a `mutate` helper that re-renders\n * consumers after an imperative store change. Non-persistent (session): it is the builder canvas's\n * session-scoped presence/perspective store. EC-287 retired the project graph and its publish path,\n * so the seed no longer reflects a pinned graph revision; content publishing is per document\n * (EC-224), surfaced by the CMS document Versions pane.\n */\nexport interface CollabStore {\n  collab: Collaboration\n  projectId: string\n  me: Actor\n  /** Draft vs published perspective the canvas/preview renders (EC-123). */\n  previewMode: PreviewMode\n  setPreviewMode: (mode: PreviewMode) => void\n  /** Run an imperative store mutation, then re-render consumers. */\n  mutate: <T>(fn: () => T) => T\n}\n\nconst CollabContext = createContext<CollabStore | null>(null)\n\nconst ME: Actor = { id: 'u-you', name: 'You' }\n\nexport function CollabProvider({\n  projectId,\n  children,\n}: {\n  projectId: string\n  children: ReactNode\n}) {\n  const [tick, bump] = useReducer((n: number) => n + 1, 0)\n  const [previewMode, setPreviewModeState] = useReducer(\n    (_: PreviewMode, next: PreviewMode) => next,\n    'draft' as PreviewMode,\n  )\n\n  const ref = useRef<Collaboration | null>(null)\n  if (ref.current === null) {\n    const collab = new Collaboration({ clock: createSequentialClock(), ids: createSequentialIds() })\n    // Seed one empty Initial version + presence for the current user (EC-122/126).\n    seedCollabSession(collab, projectId, { author: ME.name })\n    collab.presence.join(projectId, ME)\n    ref.current = collab\n  }\n\n  const store = useMemo<CollabStore>(() => {\n    const collab = ref.current!\n    return {\n      collab,\n      projectId,\n      me: ME,\n      previewMode,\n      setPreviewMode: setPreviewModeState,\n      mutate: (fn) => {\n        const result = fn()\n        bump()\n        return result\n      },\n    }\n    // `tick` (bumped by `mutate`) and `previewMode` are in deps so consumers\n    // re-render after an imperative store mutation or a preview change.\n  }, [projectId, previewMode, tick])\n\n  return <CollabContext.Provider value={store}>{children}</CollabContext.Provider>\n}\n\nexport function useCollab(): CollabStore {\n  const store = useContext(CollabContext)\n  if (!store) throw new Error('useCollab must be used within a <CollabProvider>.')\n  return store\n}\n"]}
+{"version":3,"file":"collab-context.js","sourceRoot":"","sources":["../../../src/components/collab/collab-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AAEzG,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAqBjD,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,qBAAqB,CAAc,QAAQ,CAAC,CAAA;AAEvG,MAAM,EAAE,GAAU,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;AAE9C,MAAM,UAAU,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,GAIT;IACC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;IACxD,MAAM,CAAC,WAAW,EAAE,mBAAmB,CAAC,GAAG,UAAU,CACnD,CAAC,CAAc,EAAE,IAAiB,EAAE,EAAE,CAAC,IAAI,EAC3C,OAAsB,CACvB,CAAA;IAED,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAC9C,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;QACzB,MAAM,MAAM,GAAG,IAAI,aAAa,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE,EAAE,CAAC,CAAA;QAChG,+EAA+E;QAC/E,iBAAiB,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAAA;QACzD,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;QACnC,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;IACtB,CAAC;IAED,MAAM,KAAK,GAAG,OAAO,CAAc,GAAG,EAAE;QACtC,MAAM,MAAM,GAAG,GAAG,CAAC,OAAQ,CAAA;QAC3B,OAAO;YACL,MAAM;YACN,SAAS;YACT,EAAE,EAAE,EAAE;YACN,WAAW;YACX,cAAc,EAAE,mBAAmB;YACnC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE;gBACb,MAAM,MAAM,GAAG,EAAE,EAAE,CAAA;gBACnB,IAAI,EAAE,CAAA;gBACN,OAAO,MAAM,CAAA;YACf,CAAC;SACF,CAAA;QACD,yEAAyE;QACzE,oEAAoE;IACtE,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC,CAAA;IAElC,OAAO,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA0B,CAAA;AAClF,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,CAAA","sourcesContent":["import { useMemo, useReducer, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { Collaboration, createSequentialClock, createSequentialIds } from '@elytracms/core/collaboration'\nimport type { Actor, PreviewMode } from '@elytracms/core/collaboration'\nimport { createRequiredContext } from '@elytracms/studio/lib/required-context'\nimport { seedCollabSession } from './collab-seed'\n\n/**\n * Per-project collaboration session (Phase 10). Holds one {@link Collaboration} store seeded with\n * an initial version + presence for the current user, and exposes a `mutate` helper that re-renders\n * consumers after an imperative store change. Non-persistent (session): it is the builder canvas's\n * session-scoped presence/perspective store. EC-287 retired the project graph and its publish path,\n * so the seed no longer reflects a pinned graph revision; content publishing is per document\n * (EC-224), surfaced by the CMS document Versions pane.\n */\nexport interface CollabStore {\n  collab: Collaboration\n  projectId: string\n  me: Actor\n  /** Draft vs published perspective the canvas/preview renders (EC-123). */\n  previewMode: PreviewMode\n  setPreviewMode: (mode: PreviewMode) => void\n  /** Run an imperative store mutation, then re-render consumers. */\n  mutate: <T>(fn: () => T) => T\n}\n\nconst { Context: CollabContext, useRequired: useCollab } = createRequiredContext<CollabStore>('Collab')\n\nconst ME: Actor = { id: 'u-you', name: 'You' }\n\nexport function CollabProvider({\n  projectId,\n  children,\n}: {\n  projectId: string\n  children: ReactNode\n}) {\n  const [tick, bump] = useReducer((n: number) => n + 1, 0)\n  const [previewMode, setPreviewModeState] = useReducer(\n    (_: PreviewMode, next: PreviewMode) => next,\n    'draft' as PreviewMode,\n  )\n\n  const ref = useRef<Collaboration | null>(null)\n  if (ref.current === null) {\n    const collab = new Collaboration({ clock: createSequentialClock(), ids: createSequentialIds() })\n    // Seed one empty Initial version + presence for the current user (EC-122/126).\n    seedCollabSession(collab, projectId, { author: ME.name })\n    collab.presence.join(projectId, ME)\n    ref.current = collab\n  }\n\n  const store = useMemo<CollabStore>(() => {\n    const collab = ref.current!\n    return {\n      collab,\n      projectId,\n      me: ME,\n      previewMode,\n      setPreviewMode: setPreviewModeState,\n      mutate: (fn) => {\n        const result = fn()\n        bump()\n        return result\n      },\n    }\n    // `tick` (bumped by `mutate`) and `previewMode` are in deps so consumers\n    // re-render after an imperative store mutation or a preview change.\n  }, [projectId, previewMode, tick])\n\n  return <CollabContext.Provider value={store}>{children}</CollabContext.Provider>\n}\n\nexport { useCollab }\n"]}

package/dist/components/collection-view/collection-view-context.d.ts

@@ -1,10 +1,18 @@
 import { type ReactNode } from 'react';
 import type { CollectionViewSource } from '@elytracms/studio/lib/collection-view/collection-view-source';
+/**
+ * The React seam for the portable list + edit surfaces (EC-240 / AD-19). The
+ * surfaces and their nested pieces (view bar, cells, filter builder, field
+ * form) read their {@link CollectionViewSource} from THIS context instead of the
+ * concrete `useCms()`, so the SAME components render over the CMS store, the
+ * users rail, or any future rail.
+ */
+declare const useCollectionView: () => CollectionViewSource;
 export declare function CollectionViewProvider({ source, children, }: {
     source: CollectionViewSource;
     children: ReactNode;
 }): import("react").JSX.Element;
 /** The active {@link CollectionViewSource}. Throws if used outside a provider. */
-export declare function useCollectionView(): CollectionViewSource;
+export { useCollectionView };
 /** The active source, or `null` outside a provider (optional consumers). */
 export declare function useOptionalCollectionView(): CollectionViewSource | null;

package/dist/components/collection-view/collection-view-context.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
+import { createRequiredContext } from '@elytracms/studio/lib/required-context';
 /**
  * The React seam for the portable list + edit surfaces (EC-240 / AD-19). The
  * surfaces and their nested pieces (view bar, cells, filter builder, field
@@ -7,18 +8,12 @@ import { createContext, useContext } from 'react';
  * concrete `useCms()`, so the SAME components render over the CMS store, the
  * users rail, or any future rail.
  */
-const CollectionViewContext = createContext(null);
+const { Context: CollectionViewContext, useRequired: useCollectionView } = createRequiredContext('CollectionView');
 export function CollectionViewProvider({ source, children, }) {
     return _jsx(CollectionViewContext.Provider, { value: source, children: children });
 }
 /** The active {@link CollectionViewSource}. Throws if used outside a provider. */
-export function useCollectionView() {
-    const source = useContext(CollectionViewContext);
-    if (!source) {
-        throw new Error('useCollectionView must be used within a <CollectionViewProvider>');
-    }
-    return source;
-}
+export { useCollectionView };
 /** The active source, or `null` outside a provider (optional consumers). */
 export function useOptionalCollectionView() {
     return useContext(CollectionViewContext);

package/dist/components/collection-view/collection-view-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection-view-context.js","sourceRoot":"","sources":["../../../src/components/collection-view/collection-view-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AAGjE;;;;;;GAMG;AACH,MAAM,qBAAqB,GAAG,aAAa,CAA8B,IAAI,CAAC,CAAA;AAE9E,MAAM,UAAU,sBAAsB,CAAC,EACrC,MAAM,EACN,QAAQ,GAIT;IACC,OAAO,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAAG,QAAQ,GAAkC,CAAA;AACnG,CAAC;AAED,kFAAkF;AAClF,MAAM,UAAU,iBAAiB;IAC/B,MAAM,MAAM,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAA;IAChD,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAA;IACrF,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,yBAAyB;IACvC,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAA;AAC1C,CAAC","sourcesContent":["import { createContext, useContext, type ReactNode } from 'react'\nimport type { CollectionViewSource } from '@elytracms/studio/lib/collection-view/collection-view-source'\n\n/**\n * The React seam for the portable list + edit surfaces (EC-240 / AD-19). The\n * surfaces and their nested pieces (view bar, cells, filter builder, field\n * form) read their {@link CollectionViewSource} from THIS context instead of the\n * concrete `useCms()`, so the SAME components render over the CMS store, the\n * users rail, or any future rail.\n */\nconst CollectionViewContext = createContext<CollectionViewSource | null>(null)\n\nexport function CollectionViewProvider({\n  source,\n  children,\n}: {\n  source: CollectionViewSource\n  children: ReactNode\n}) {\n  return <CollectionViewContext.Provider value={source}>{children}</CollectionViewContext.Provider>\n}\n\n/** The active {@link CollectionViewSource}. Throws if used outside a provider. */\nexport function useCollectionView(): CollectionViewSource {\n  const source = useContext(CollectionViewContext)\n  if (!source) {\n    throw new Error('useCollectionView must be used within a <CollectionViewProvider>')\n  }\n  return source\n}\n\n/** The active source, or `null` outside a provider (optional consumers). */\nexport function useOptionalCollectionView(): CollectionViewSource | null {\n  return useContext(CollectionViewContext)\n}\n"]}
+{"version":3,"file":"collection-view-context.js","sourceRoot":"","sources":["../../../src/components/collection-view/collection-view-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAE9E;;;;;;GAMG;AACH,MAAM,EAAE,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,iBAAiB,EAAE,GACtE,qBAAqB,CAAuB,gBAAgB,CAAC,CAAA;AAE/D,MAAM,UAAU,sBAAsB,CAAC,EACrC,MAAM,EACN,QAAQ,GAIT;IACC,OAAO,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAAG,QAAQ,GAAkC,CAAA;AACnG,CAAC;AAED,kFAAkF;AAClF,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B,4EAA4E;AAC5E,MAAM,UAAU,yBAAyB;IACvC,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAA;AAC1C,CAAC","sourcesContent":["import { useContext, type ReactNode } from 'react'\nimport type { CollectionViewSource } from '@elytracms/studio/lib/collection-view/collection-view-source'\nimport { createRequiredContext } from '@elytracms/studio/lib/required-context'\n\n/**\n * The React seam for the portable list + edit surfaces (EC-240 / AD-19). The\n * surfaces and their nested pieces (view bar, cells, filter builder, field\n * form) read their {@link CollectionViewSource} from THIS context instead of the\n * concrete `useCms()`, so the SAME components render over the CMS store, the\n * users rail, or any future rail.\n */\nconst { Context: CollectionViewContext, useRequired: useCollectionView } =\n  createRequiredContext<CollectionViewSource>('CollectionView')\n\nexport function CollectionViewProvider({\n  source,\n  children,\n}: {\n  source: CollectionViewSource\n  children: ReactNode\n}) {\n  return <CollectionViewContext.Provider value={source}>{children}</CollectionViewContext.Provider>\n}\n\n/** The active {@link CollectionViewSource}. Throws if used outside a provider. */\nexport { useCollectionView }\n\n/** The active source, or `null` outside a provider (optional consumers). */\nexport function useOptionalCollectionView(): CollectionViewSource | null {\n  return useContext(CollectionViewContext)\n}\n"]}

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

@@ -12,7 +12,7 @@ import { ReferencesPanel } from '@elytracms/studio/components/references/referen
 import { InspectorSidebar } from '@elytracms/studio/components/inspector/inspector-sidebar';
 import { useSetBreadcrumb } from '@elytracms/studio/components/breadcrumb-context';
 import { translate } from '@elytracms/studio/lib/i18n';
-import { Badge, Button, Code, Heading, Row, Spacer, Stack, Text } from '@elytracms/studio/ui';
+import { Badge, Button, Code, Heading, Row, Spacer, Stack, TabButton, Text } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 /**
  * The component detail view (EC-050/052, overhauled in EC-320) — now on the CMS
@@ -56,9 +56,6 @@ function ComponentDetailBody({ projectId, studio, manifest, }) {
             render: () => _jsx(SlotsInfoPane, { manifest: manifest }),
         },
     ];
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.components() }, className: "inline-flex items-center gap-1 px-4 pt-3 text-xs text-muted-foreground transition-colors hover:text-foreground md:hidden", children: [_jsx(ArrowLeft, { className: "size-3.5" }), " ", translate('components.detail.allComponents')] }), _jsxs("div", { className: "shrink-0 border-b border-border px-4 py-3 sm:px-6", children: [_jsxs(Row, { gap: "3", children: [_jsxs(Row, { gap: "2", align: "center", className: "min-w-0 flex-wrap", children: [_jsx(Heading, { level: 1, size: "h2", className: "truncate", children: title }), _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 }), _jsxs(Button, { size: "sm", onClick: () => setTransferOpen(true), "data-testid": "use-in-document", children: [_jsx(FilePlus2, {}), " ", translate('components.transfer.action')] })] }), _jsx(Row, { gap: "2", align: "center", className: "mt-1", children: _jsx(Code, { tone: "muted", children: manifest.id }) }), manifest.description ? (_jsx(Text, { tone: "muted", size: "sm", className: "mt-1 max-w-prose", children: manifest.description })) : null, status !== 'valid' ? (_jsx(Text, { size: "sm", className: cn('mt-1', status === 'invalid' ? 'text-destructive' : 'text-warning'), children: statusDescription(status) })) : null, _jsxs(Row, { gap: "1", align: "center", className: "mt-3", children: [_jsx(SurfaceTab, { label: translate('components.detail.tab.preview'), icon: _jsx(Play, { className: "size-3" }), active: tab === 'preview', onClick: () => setTab('preview') }), _jsx(SurfaceTab, { label: translate('components.detail.tab.manifest'), icon: _jsx(ListTree, { className: "size-3" }), active: tab === 'manifest', onClick: () => setTab('manifest') }), _jsx("div", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": true }), _jsx(SurfaceTab, { label: translate('references.title'), icon: _jsx(Link2, { className: "size-3" }), active: tab === 'references', onClick: () => setTab('references') })] })] }), tab === 'preview' ? (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(ComponentPreview, { manifest: manifest, studio: studio, state: preview }) }), _jsx(InspectorSidebar, { panes: panes, className: "w-[320px] shrink-0 border-l border-border" })] })) : tab === 'manifest' ? (_jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-4xl", children: _jsxs(Stack, { gap: "6", children: [_jsx(FieldInspector, { manifest: manifest }), 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("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(ReferencesPanel, { projectId: projectId, target: { type: 'component', id: manifest.id } }) }) })), _jsx(TransferToDocumentDialog, { projectId: projectId, manifest: manifest, node: preview.node, open: transferOpen, onOpenChange: setTransferOpen })] }));
-}
-function SurfaceTab({ label, icon, active, onClick, }) {
-    return (_jsxs("button", { type: "button", "aria-pressed": active, onClick: onClick, className: cn('inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors', active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted'), children: [icon, label] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.components() }, className: "inline-flex items-center gap-1 px-4 pt-3 text-xs text-muted-foreground transition-colors hover:text-foreground md:hidden", children: [_jsx(ArrowLeft, { className: "size-3.5" }), " ", translate('components.detail.allComponents')] }), _jsxs("div", { className: "shrink-0 border-b border-border px-4 py-3 sm:px-6", children: [_jsxs(Row, { gap: "3", children: [_jsxs(Row, { gap: "2", align: "center", className: "min-w-0 flex-wrap", children: [_jsx(Heading, { level: 1, size: "h2", className: "truncate", children: title }), _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 }), _jsxs(Button, { size: "sm", onClick: () => setTransferOpen(true), "data-testid": "use-in-document", children: [_jsx(FilePlus2, {}), " ", translate('components.transfer.action')] })] }), _jsx(Row, { gap: "2", align: "center", className: "mt-1", children: _jsx(Code, { tone: "muted", children: manifest.id }) }), manifest.description ? (_jsx(Text, { tone: "muted", size: "sm", className: "mt-1 max-w-prose", children: manifest.description })) : null, status !== 'valid' ? (_jsx(Text, { size: "sm", className: cn('mt-1', status === 'invalid' ? 'text-destructive' : 'text-warning'), children: statusDescription(status) })) : null, _jsxs(Row, { gap: "1", align: "center", className: "mt-3", children: [_jsxs(TabButton, { active: tab === 'preview', onClick: () => setTab('preview'), children: [_jsx(Play, { className: "size-3" }), translate('components.detail.tab.preview')] }), _jsxs(TabButton, { active: tab === 'manifest', onClick: () => setTab('manifest'), children: [_jsx(ListTree, { className: "size-3" }), translate('components.detail.tab.manifest')] }), _jsx("div", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": true }), _jsxs(TabButton, { active: tab === 'references', onClick: () => setTab('references'), children: [_jsx(Link2, { className: "size-3" }), translate('references.title')] })] })] }), tab === 'preview' ? (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(ComponentPreview, { manifest: manifest, studio: studio, state: preview }) }), _jsx(InspectorSidebar, { panes: panes, className: "w-[320px] shrink-0 border-l border-border" })] })) : tab === 'manifest' ? (_jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-4xl", children: _jsxs(Stack, { gap: "6", children: [_jsx(FieldInspector, { manifest: manifest }), 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("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(ReferencesPanel, { projectId: projectId, target: { type: 'component', id: manifest.id } }) }) })), _jsx(TransferToDocumentDialog, { projectId: projectId, manifest: manifest, node: preview.node, open: transferOpen, onOpenChange: setTransferOpen })] }));
 }
 //# sourceMappingURL=component-detail.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../src/components/components/component-detail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { ArrowLeft, FilePlus2, Link2, ListTree, Play, SlidersHorizontal, SquareStack } from 'lucide-react'\nimport { isPrimitive } from '@elytracms/core/component-registry'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router'\nimport { componentStatus, getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } 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 {\n  ComponentPreview,\n  PropsEditorPane,\n  SlotsInfoPane,\n  usePreviewState,\n} from '@elytracms/studio/components/components/component-preview'\nimport { TransferToDocumentDialog } from '@elytracms/studio/components/components/transfer-dialog'\nimport { ReferencesPanel } from '@elytracms/studio/components/references/references-panel'\nimport { InspectorSidebar } from '@elytracms/studio/components/inspector/inspector-sidebar'\nimport type { InspectorPane } from '@elytracms/studio/components/inspector/inspector-sidebar'\nimport { useSetBreadcrumb } from '@elytracms/studio/components/breadcrumb-context'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { Badge, Button, Code, Heading, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\n\n/**\n * The component detail view (EC-050/052, overhauled in EC-320) — now on the CMS\n * shell: a header (title · namespace/category badges · id · status), a lens row of\n * tabs (Preview / Manifest / References — References-as-a-tab, EC-269), and, on the\n * Preview tab, the live editable preview beside the shared right {@link InspectorSidebar}\n * (Props / Slots). \"Use in document…\" transfers the current combination into a draft.\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). Unconditional (hooks rules).\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\">{translate('components.detail.notFound.body', { id: componentId })}</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  return <ComponentDetailBody key={manifest.id} projectId={projectId} studio={studio} manifest={manifest} />\n}\n\ntype DetailTab = 'preview' | 'manifest' | 'references'\n\nfunction ComponentDetailBody({\n  projectId,\n  studio,\n  manifest,\n}: {\n  projectId: string\n  studio: StudioRegistry\n  manifest: ComponentManifest\n}) {\n  const preview = usePreviewState(manifest)\n  const [tab, setTab] = useState<DetailTab>('preview')\n  const [transferOpen, setTransferOpen] = useState(false)\n\n  const status = componentStatus(studio, manifest)\n  const namespace = isPrimitive(manifest.id) ? 'base' : 'project'\n  const title = manifest.title ?? manifest.id\n\n  // The Preview tab's right inspector: editable Props + declared Slots. Shares the\n  // exact frame the document editor uses (EC-224), so a prop edit re-renders the\n  // preview live through the same control set documents use.\n  const panes: InspectorPane[] = [\n    {\n      id: 'props',\n      label: translate('components.fieldInspector.props'),\n      icon: <SlidersHorizontal className=\"size-3.5\" />,\n      render: () => <PropsEditorPane manifest={manifest} state={preview} />,\n    },\n    {\n      id: 'slots',\n      label: translate('components.fieldInspector.slots'),\n      icon: <SquareStack className=\"size-3.5\" />,\n      render: () => <SlotsInfoPane manifest={manifest} />,\n    },\n  ]\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      {/* Mobile-only back link (the registry sidebar is hidden under md). */}\n      <Link\n        to={STUDIO_PROJECT_ROUTE}\n        params={{ projectId, _splat: studioPath.components() }}\n        className=\"inline-flex items-center gap-1 px-4 pt-3 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      {/* Header */}\n      <div className=\"shrink-0 border-b border-border px-4 py-3 sm:px-6\">\n        <Row gap=\"3\">\n          <Row gap=\"2\" align=\"center\" className=\"min-w-0 flex-wrap\">\n            <Heading level={1} size=\"h2\" className=\"truncate\">\n              {title}\n            </Heading>\n            <Badge variant={namespace === 'project' ? 'primary' : 'outline'}>{namespace}</Badge>\n            {manifest.category ? <Badge variant=\"outline\">{manifest.category}</Badge> : null}\n          </Row>\n          <Spacer />\n          <ComponentStatusBadge status={status} />\n          <Button size=\"sm\" onClick={() => setTransferOpen(true)} data-testid=\"use-in-document\">\n            <FilePlus2 /> {translate('components.transfer.action')}\n          </Button>\n        </Row>\n        <Row gap=\"2\" align=\"center\" className=\"mt-1\">\n          <Code tone=\"muted\">{manifest.id}</Code>\n        </Row>\n        {manifest.description ? (\n          <Text tone=\"muted\" size=\"sm\" className=\"mt-1 max-w-prose\">\n            {manifest.description}\n          </Text>\n        ) : null}\n        {status !== 'valid' ? (\n          <Text size=\"sm\" className={cn('mt-1', status === 'invalid' ? 'text-destructive' : 'text-warning')}>\n            {statusDescription(status)}\n          </Text>\n        ) : null}\n\n        {/* Lens row — the tab set (mirrors the document editor's lens row). */}\n        <Row gap=\"1\" align=\"center\" className=\"mt-3\">\n          <SurfaceTab\n            label={translate('components.detail.tab.preview')}\n            icon={<Play className=\"size-3\" />}\n            active={tab === 'preview'}\n            onClick={() => setTab('preview')}\n          />\n          <SurfaceTab\n            label={translate('components.detail.tab.manifest')}\n            icon={<ListTree className=\"size-3\" />}\n            active={tab === 'manifest'}\n            onClick={() => setTab('manifest')}\n          />\n          <div className=\"mx-1 h-4 w-px bg-border\" aria-hidden />\n          <SurfaceTab\n            label={translate('references.title')}\n            icon={<Link2 className=\"size-3\" />}\n            active={tab === 'references'}\n            onClick={() => setTab('references')}\n          />\n        </Row>\n      </div>\n\n      {/* Body */}\n      {tab === 'preview' ? (\n        <div className=\"flex min-h-0 flex-1 overflow-hidden\">\n          <div className=\"min-h-0 flex-1 overflow-hidden\">\n            <ComponentPreview manifest={manifest} studio={studio} state={preview} />\n          </div>\n          <InspectorSidebar panes={panes} className=\"w-[320px] shrink-0 border-l border-border\" />\n        </div>\n      ) : tab === 'manifest' ? (\n        <div className=\"min-h-0 flex-1 overflow-auto p-4 sm:p-6\">\n          <div className=\"mx-auto w-full max-w-4xl\">\n            <Stack gap=\"6\">\n              <FieldInspector manifest={manifest} />\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            </Stack>\n          </div>\n        </div>\n      ) : (\n        // EC-172/EC-269: inbound references over the reference index, as a tab.\n        <div className=\"min-h-0 flex-1 overflow-auto p-4 sm:p-6\">\n          <div className=\"mx-auto w-full max-w-2xl\">\n            <ReferencesPanel projectId={projectId} target={{ type: 'component', id: manifest.id }} />\n          </div>\n        </div>\n      )}\n\n      <TransferToDocumentDialog\n        projectId={projectId}\n        manifest={manifest}\n        node={preview.node}\n        open={transferOpen}\n        onOpenChange={setTransferOpen}\n      />\n    </div>\n  )\n}\n\nfunction SurfaceTab({\n  label,\n  icon,\n  active,\n  onClick,\n}: {\n  label: string\n  icon: ReactNode\n  active: boolean\n  onClick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={active}\n      onClick={onClick}\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n        active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted',\n      )}\n    >\n      {icon}\n      {label}\n    </button>\n  )\n}\n"]}
+{"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../src/components/components/component-detail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react'\nimport { ArrowLeft, FilePlus2, Link2, ListTree, Play, SlidersHorizontal, SquareStack } from 'lucide-react'\nimport { isPrimitive } from '@elytracms/core/component-registry'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router'\nimport { componentStatus, getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } 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 {\n  ComponentPreview,\n  PropsEditorPane,\n  SlotsInfoPane,\n  usePreviewState,\n} from '@elytracms/studio/components/components/component-preview'\nimport { TransferToDocumentDialog } from '@elytracms/studio/components/components/transfer-dialog'\nimport { ReferencesPanel } from '@elytracms/studio/components/references/references-panel'\nimport { InspectorSidebar } from '@elytracms/studio/components/inspector/inspector-sidebar'\nimport type { InspectorPane } from '@elytracms/studio/components/inspector/inspector-sidebar'\nimport { useSetBreadcrumb } from '@elytracms/studio/components/breadcrumb-context'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { Badge, Button, Code, Heading, Row, Spacer, Stack, TabButton, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\n\n/**\n * The component detail view (EC-050/052, overhauled in EC-320) — now on the CMS\n * shell: a header (title · namespace/category badges · id · status), a lens row of\n * tabs (Preview / Manifest / References — References-as-a-tab, EC-269), and, on the\n * Preview tab, the live editable preview beside the shared right {@link InspectorSidebar}\n * (Props / Slots). \"Use in document…\" transfers the current combination into a draft.\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). Unconditional (hooks rules).\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\">{translate('components.detail.notFound.body', { id: componentId })}</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  return <ComponentDetailBody key={manifest.id} projectId={projectId} studio={studio} manifest={manifest} />\n}\n\ntype DetailTab = 'preview' | 'manifest' | 'references'\n\nfunction ComponentDetailBody({\n  projectId,\n  studio,\n  manifest,\n}: {\n  projectId: string\n  studio: StudioRegistry\n  manifest: ComponentManifest\n}) {\n  const preview = usePreviewState(manifest)\n  const [tab, setTab] = useState<DetailTab>('preview')\n  const [transferOpen, setTransferOpen] = useState(false)\n\n  const status = componentStatus(studio, manifest)\n  const namespace = isPrimitive(manifest.id) ? 'base' : 'project'\n  const title = manifest.title ?? manifest.id\n\n  // The Preview tab's right inspector: editable Props + declared Slots. Shares the\n  // exact frame the document editor uses (EC-224), so a prop edit re-renders the\n  // preview live through the same control set documents use.\n  const panes: InspectorPane[] = [\n    {\n      id: 'props',\n      label: translate('components.fieldInspector.props'),\n      icon: <SlidersHorizontal className=\"size-3.5\" />,\n      render: () => <PropsEditorPane manifest={manifest} state={preview} />,\n    },\n    {\n      id: 'slots',\n      label: translate('components.fieldInspector.slots'),\n      icon: <SquareStack className=\"size-3.5\" />,\n      render: () => <SlotsInfoPane manifest={manifest} />,\n    },\n  ]\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      {/* Mobile-only back link (the registry sidebar is hidden under md). */}\n      <Link\n        to={STUDIO_PROJECT_ROUTE}\n        params={{ projectId, _splat: studioPath.components() }}\n        className=\"inline-flex items-center gap-1 px-4 pt-3 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      {/* Header */}\n      <div className=\"shrink-0 border-b border-border px-4 py-3 sm:px-6\">\n        <Row gap=\"3\">\n          <Row gap=\"2\" align=\"center\" className=\"min-w-0 flex-wrap\">\n            <Heading level={1} size=\"h2\" className=\"truncate\">\n              {title}\n            </Heading>\n            <Badge variant={namespace === 'project' ? 'primary' : 'outline'}>{namespace}</Badge>\n            {manifest.category ? <Badge variant=\"outline\">{manifest.category}</Badge> : null}\n          </Row>\n          <Spacer />\n          <ComponentStatusBadge status={status} />\n          <Button size=\"sm\" onClick={() => setTransferOpen(true)} data-testid=\"use-in-document\">\n            <FilePlus2 /> {translate('components.transfer.action')}\n          </Button>\n        </Row>\n        <Row gap=\"2\" align=\"center\" className=\"mt-1\">\n          <Code tone=\"muted\">{manifest.id}</Code>\n        </Row>\n        {manifest.description ? (\n          <Text tone=\"muted\" size=\"sm\" className=\"mt-1 max-w-prose\">\n            {manifest.description}\n          </Text>\n        ) : null}\n        {status !== 'valid' ? (\n          <Text size=\"sm\" className={cn('mt-1', status === 'invalid' ? 'text-destructive' : 'text-warning')}>\n            {statusDescription(status)}\n          </Text>\n        ) : null}\n\n        {/* Lens row — the tab set (mirrors the document editor's lens row). */}\n        <Row gap=\"1\" align=\"center\" className=\"mt-3\">\n          <TabButton active={tab === 'preview'} onClick={() => setTab('preview')}>\n            <Play className=\"size-3\" />\n            {translate('components.detail.tab.preview')}\n          </TabButton>\n          <TabButton active={tab === 'manifest'} onClick={() => setTab('manifest')}>\n            <ListTree className=\"size-3\" />\n            {translate('components.detail.tab.manifest')}\n          </TabButton>\n          <div className=\"mx-1 h-4 w-px bg-border\" aria-hidden />\n          <TabButton active={tab === 'references'} onClick={() => setTab('references')}>\n            <Link2 className=\"size-3\" />\n            {translate('references.title')}\n          </TabButton>\n        </Row>\n      </div>\n\n      {/* Body */}\n      {tab === 'preview' ? (\n        <div className=\"flex min-h-0 flex-1 overflow-hidden\">\n          <div className=\"min-h-0 flex-1 overflow-hidden\">\n            <ComponentPreview manifest={manifest} studio={studio} state={preview} />\n          </div>\n          <InspectorSidebar panes={panes} className=\"w-[320px] shrink-0 border-l border-border\" />\n        </div>\n      ) : tab === 'manifest' ? (\n        <div className=\"min-h-0 flex-1 overflow-auto p-4 sm:p-6\">\n          <div className=\"mx-auto w-full max-w-4xl\">\n            <Stack gap=\"6\">\n              <FieldInspector manifest={manifest} />\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            </Stack>\n          </div>\n        </div>\n      ) : (\n        // EC-172/EC-269: inbound references over the reference index, as a tab.\n        <div className=\"min-h-0 flex-1 overflow-auto p-4 sm:p-6\">\n          <div className=\"mx-auto w-full max-w-2xl\">\n            <ReferencesPanel projectId={projectId} target={{ type: 'component', id: manifest.id }} />\n          </div>\n        </div>\n      )}\n\n      <TransferToDocumentDialog\n        projectId={projectId}\n        manifest={manifest}\n        node={preview.node}\n        open={transferOpen}\n        onOpenChange={setTransferOpen}\n      />\n    </div>\n  )\n}\n"]}

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

@@ -6,7 +6,7 @@ import { renderNode } from '@elytracms/core/runtime-renderer';
 import { staticProp } from '@elytracms/core/project-graph';
 import { componentStatus, previewContext } from '@elytracms/studio/lib/registry';
 import { previewSpecs } from '@elytracms/studio/lib/registry/preview';
-import { Badge, Button, Code, Field, Row, Spacer, Stack, Text } from '@elytracms/studio/ui';
+import { Badge, Button, Code, Field, Row, Spacer, Stack, TabButton, Text } from '@elytracms/studio/ui';
 import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
 import { cn } from '@elytracms/studio/lib/utils';
 import { getCanvasStylesheetUrl } from '../builder/canvas-stylesheet';
@@ -71,15 +71,19 @@ export function ComponentPreview({ manifest, studio, state, }) {
     // Defaults to the always-present 'full' (responsive) option.
     const { viewports } = useCanvasViewports();
     const [viewport, setViewport] = useState(viewports[0].key);
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs(Row, { gap: "1", wrap: true, align: "center", className: "shrink-0 border-b border-border px-3 py-2", children: [state.specs.length > 1 ? (_jsx(Row, { gap: "1", wrap: true, role: "group", "aria-label": translate('components.fixtureRunner.statesAria'), children: state.specs.map((spec, i) => (_jsx("button", { type: "button", "aria-pressed": i === state.index, onClick: () => state.setIndex(i), className: cn('rounded-md px-2.5 py-1 text-xs font-medium transition-colors', i === state.index
-                                ? 'bg-accent text-accent-foreground'
-                                : 'text-muted-foreground hover:bg-muted hover:text-foreground'), children: spec.name }, spec.name))) })) : null, _jsx(Spacer, {}), _jsx(Row, { gap: "1", wrap: true, role: "group", "aria-label": translate('components.preview.breakpointAria'), children: viewports.map((option) => (_jsx(PreviewBreakpointButton, { option: option, active: option.key === viewport, onSelect: () => setViewport(option.key) }, option.key))) }), state.dirty ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: state.resetAll, "data-testid": "preview-reset", children: [_jsx(RotateCcw, {}), " ", translate('components.preview.reset')] })) : null] }), _jsxs("div", { className: "canvas-grid min-h-0 flex-1 overflow-auto p-6", "data-fixture-state": state.specs[state.index]?.name, children: [serverOnly ? (_jsx(ServerOnlyNotice, {})) : (_jsx(ComponentPreviewFrame, { node: state.node, ctx: ctx, displayName: displayName, width: viewportWidth(viewports, viewport) })), status === 'incompatible' && !serverOnly ? (_jsx(Text, { size: "xs", tone: "muted", className: "mx-auto mt-3 max-w-2xl", children: translate('components.preview.incompatibleNote') })) : null] })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs(Row, { gap: "1", wrap: true, align: "center", className: "shrink-0 border-b border-border px-3 py-2", children: [state.specs.length > 1 ? (_jsx(Row, { gap: "1", wrap: true, role: "group", "aria-label": translate('components.fixtureRunner.statesAria'), children: state.specs.map((spec, i) => (_jsx(TabButton, { active: i === state.index, onClick: () => state.setIndex(i), children: spec.name }, spec.name))) })) : null, _jsx(Spacer, {}), _jsx(Row, { gap: "1", wrap: true, role: "group", "aria-label": translate('components.preview.breakpointAria'), children: viewports.map((option) => (_jsx(PreviewBreakpointButton, { option: option, active: option.key === viewport, onSelect: () => setViewport(option.key) }, option.key))) }), state.dirty ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: state.resetAll, "data-testid": "preview-reset", children: [_jsx(RotateCcw, {}), " ", translate('components.preview.reset')] })) : null] }), _jsxs("div", { className: "canvas-grid min-h-0 flex-1 overflow-auto p-6", "data-fixture-state": state.specs[state.index]?.name, children: [serverOnly ? (_jsx(ServerOnlyNotice, {})) : (_jsx(ComponentPreviewFrame, { node: state.node, ctx: ctx, displayName: displayName, width: viewportWidth(viewports, viewport) })), status === 'incompatible' && !serverOnly ? (_jsx(Text, { size: "xs", tone: "muted", className: "mx-auto mt-3 max-w-2xl", children: translate('components.preview.incompatibleNote') })) : null] })] }));
 }
 /**
  * One breakpoint option in the preview's width switcher. Mirrors the builder
  * canvas toolbar's `ViewportButton` (`composition-field-editor.tsx`) — same
  * `Button`/active-state styling — but drives LOCAL preview state instead of
  * the builder store (this surface has no composition/undo stack).
+ *
+ * EC-328: evaluated against the shared `TabButton`/`SegmentedControl`
+ * primitives and kept separate — it's built on the shared `Button` (not a
+ * bare hand-rolled `<button>`, so it wasn't part of the duplication those
+ * primitives address), and carries an interpolated `aria-label` plus a
+ * conditional px-value `title` tooltip neither primitive's terse API models.
  */
 function PreviewBreakpointButton({ option, active, onSelect, }) {
     return (_jsx(Button, { size: "sm", variant: "ghost", "aria-label": translate('builder.canvas.viewportPreviewAria', { label: option.label }), "aria-pressed": active, title: option.px !== undefined