@elytracms/studio 0.0.38 → 0.0.40

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

@@ -2,58 +2,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router';
 import { Search } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { isPrimitive } from '@elytracms/core/component-registry';
 import { componentStatus, getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { translate } from '@elytracms/studio/lib/i18n';
 import { Code, Input, Row, Spacer, Stack, Text } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 import { ComponentStatusDot } from './component-status';
+import { deriveTaxonomy } from './taxonomy';
+/**
+ * The registry browser sidebar (EC-050, taxonomy overhaul EC-320). A searchable,
+ * two-level tree: namespace (base / project) → category (the manifest's declared
+ * `category`, uncategorized last). The segmented control narrows to a namespace;
+ * search filters across id/title/category/description. Grouping + search are pure
+ * ({@link deriveTaxonomy}), so what renders here is exactly what the tests pin.
+ */
 export function RegistryBrowser({ projectId, activeComponentId, }) {
     const studio = getStudioRegistry();
     const [query, setQuery] = useState('');
     const [namespace, setNamespace] = useState('all');
-    const [category, setCategory] = useState(null);
+    const manifests = useMemo(() => studio.registry.list(), [studio]);
     const primitiveCount = studio.registry.primitives().length;
     const projectCount = studio.registry.projectComponents().length;
-    // Switching namespace clears any category that doesn't exist in the new one.
-    function selectNamespace(ns) {
-        setNamespace(ns);
-        setCategory(null);
-    }
-    // Categories are scoped to the active namespace so every chip can yield results.
-    const categories = useMemo(() => {
-        const set = new Set();
-        for (const m of studio.registry.list({ namespace: namespace === 'all' ? undefined : namespace })) {
-            if (m.category)
-                set.add(m.category);
-        }
-        return [...set].sort();
-    }, [studio, namespace]);
-    const results = useMemo(() => studio.registry.list({
-        query: query.trim() || undefined,
-        namespace: namespace === 'all' ? undefined : namespace,
-        category: category ?? undefined,
-    }), [studio, query, namespace, category]);
-    const primitives = results.filter((m) => isPrimitive(m.id));
-    const projects = results.filter((m) => !isPrimitive(m.id));
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "shrink-0 space-y-2 border-b border-border p-3", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: translate('components.browser.searchPlaceholder'), className: "pl-8", "aria-label": translate('components.browser.searchAria') })] }), _jsxs(Row, { gap: "1", className: "rounded-md bg-muted/50 p-0.5", role: "group", "aria-label": translate('components.browser.namespaceAria'), children: [_jsx(NamespaceTab, { label: translate('components.browser.all'), count: primitiveCount + projectCount, active: namespace === 'all', onClick: () => selectNamespace('all') }), _jsx(NamespaceTab, { label: translate('components.browser.primitives'), count: primitiveCount, active: namespace === 'base', onClick: () => selectNamespace('base') }), _jsx(NamespaceTab, { label: translate('components.browser.project'), count: projectCount, active: namespace === 'project', onClick: () => selectNamespace('project') })] }), categories.length > 0 ? (_jsxs(Row, { gap: "1", wrap: true, children: [_jsx(CategoryChip, { label: translate('components.browser.all'), active: category === null, onClick: () => setCategory(null) }), categories.map((c) => (_jsx(CategoryChip, { label: c, active: category === c, onClick: () => setCategory(c) }, c)))] })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: results.length === 0 ? (_jsx(Text, { size: "sm", tone: "muted", className: "p-3", children: query.trim()
+    // The full taxonomy for the query; the segmented control then narrows namespaces.
+    const taxonomy = useMemo(() => deriveTaxonomy(manifests, query), [manifests, query]);
+    const shown = taxonomy.filter((group) => namespace === 'all' || group.namespace === namespace);
+    const empty = shown.length === 0;
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "shrink-0 space-y-2 border-b border-border p-3", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: translate('components.browser.searchPlaceholder'), className: "pl-8", "aria-label": translate('components.browser.searchAria') })] }), _jsxs(Row, { gap: "1", className: "rounded-md bg-muted/50 p-0.5", role: "group", "aria-label": translate('components.browser.namespaceAria'), children: [_jsx(NamespaceTab, { label: translate('components.browser.all'), count: primitiveCount + projectCount, active: namespace === 'all', onClick: () => setNamespace('all') }), _jsx(NamespaceTab, { label: translate('components.browser.primitives'), count: primitiveCount, active: namespace === 'base', onClick: () => setNamespace('base') }), _jsx(NamespaceTab, { label: translate('components.browser.project'), count: projectCount, active: namespace === 'project', onClick: () => setNamespace('project') })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: empty ? (_jsx(Text, { size: "sm", tone: "muted", className: "p-3", children: query.trim()
                         ? translate('components.browser.noMatchQuery', { query })
-                        : translate('components.browser.noMatchFilters') })) : (_jsxs(Stack, { gap: "3", children: [(namespace === 'all' || namespace === 'base') && primitives.length > 0 ? (_jsx(GroupedList, { heading: "base.*", count: primitives.length, manifests: primitives, projectId: projectId, activeComponentId: activeComponentId })) : null, (namespace === 'all' || namespace === 'project') && projects.length > 0 ? (_jsx(GroupedList, { heading: "project.*", count: projects.length, manifests: projects, projectId: projectId, activeComponentId: activeComponentId })) : null] })) })] }));
+                        : translate('components.browser.noMatchFilters') })) : (_jsx(Stack, { gap: "4", children: shown.map((group) => (_jsxs(Stack, { gap: "2", children: [_jsxs(Row, { gap: "2", className: "px-2", children: [_jsx(Code, { tone: "muted", children: `${group.namespace}.*` }), _jsx(Spacer, {}), _jsx(Text, { size: "xs", tone: "subtle", mono: true, children: group.count })] }), _jsx(Stack, { gap: "3", children: group.categories.map((category) => (_jsxs(Stack, { gap: "1", children: [_jsx(Text, { size: "xs", weight: "medium", tone: "subtle", className: cn('px-2 uppercase tracking-wide', category.key && 'capitalize'), children: category.key || translate('components.taxonomy.uncategorized') }), _jsx(Stack, { gap: "px", children: category.manifests.map((m) => (_jsx(ComponentRow, { manifest: m, projectId: projectId, active: m.id === activeComponentId }, m.id))) })] }, category.key || '__uncategorized__'))) })] }, group.namespace))) })) })] }));
 }
 function NamespaceTab({ label, count, active, onClick, }) {
     return (_jsxs("button", { type: "button", "aria-pressed": active, onClick: onClick, className: cn('flex flex-1 items-center justify-center gap-1.5 rounded-[5px] px-2 py-1 text-xs font-medium transition-colors', active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'), children: [label, _jsx("span", { className: "font-mono text-[0.65rem] text-muted-foreground", children: count })] }));
 }
-function CategoryChip({ label, active, onClick }) {
-    return (_jsx("button", { type: "button", onClick: onClick, className: cn('rounded-full border px-2 py-0.5 text-xs capitalize transition-colors', active
-            ? 'border-primary/30 bg-primary/10 text-primary'
-            : 'border-border text-muted-foreground hover:bg-muted'), children: label }));
-}
-function GroupedList({ heading, count, manifests, projectId, activeComponentId, }) {
+function ComponentRow({ manifest, projectId, active, }) {
     const studio = getStudioRegistry();
-    return (_jsxs(Stack, { gap: "1", children: [_jsxs(Row, { gap: "2", className: "px-2", children: [_jsx(Code, { tone: "muted", children: heading }), _jsx(Spacer, {}), _jsx(Text, { size: "xs", tone: "subtle", mono: true, children: count })] }), _jsx(Stack, { gap: "px", children: manifests.map((m) => {
-                    const status = componentStatus(studio, m);
-                    const active = m.id === activeComponentId;
-                    return (_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.component(m.id) }, "aria-current": active ? 'page' : undefined, className: cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors', active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'), children: [_jsx(ComponentStatusDot, { status: status }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: m.title ?? m.id }), m.category ? (_jsx("span", { className: "shrink-0 text-[0.7rem] capitalize text-muted-foreground", children: m.category })) : null] }, m.id));
-                }) })] }));
+    const status = componentStatus(studio, manifest);
+    return (_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.component(manifest.id) }, "aria-current": active ? 'page' : undefined, className: cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors', active
+            ? 'bg-accent text-accent-foreground'
+            : 'text-muted-foreground hover:bg-muted hover:text-foreground'), children: [_jsx(ComponentStatusDot, { status: status }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: manifest.title ?? manifest.id })] }));
 }
 //# sourceMappingURL=registry-browser.js.map

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

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

package/dist/components/components/taxonomy.d.ts

@@ -0,0 +1,51 @@
+import type { ComponentManifest } from '@elytracms/core/component-registry';
+/**
+ * EC-320 — the component registry TAXONOMY, derived purely from the metadata a
+ * manifest actually declares (no invented axes). Two levels of grouping:
+ *
+ *   1. **namespace** — `base` platform primitives vs `project` components
+ *      (`isPrimitive(id)`, i.e. `namespaceOf(id) === 'base'`).
+ *   2. **category** — the manifest's optional `category` string, with an
+ *      "uncategorized" bucket (`key: ''`) collected last.
+ *
+ * Manifests carry no free-form `tags`, so category is the finest declared axis —
+ * this makes the best of what's there rather than fabricating structure. Pure and
+ * store-agnostic so the sidebar's grouping/search is unit-testable without React.
+ */
+export type ComponentNamespace = 'base' | 'project';
+export interface TaxonomyCategory {
+    /** The manifest category, or `''` for the uncategorized bucket. */
+    key: string;
+    manifests: ComponentManifest[];
+}
+export interface TaxonomyNamespace {
+    namespace: ComponentNamespace;
+    count: number;
+    categories: TaxonomyCategory[];
+}
+/** Case-insensitive match against a manifest's id, title, category, description. */
+export declare function manifestMatchesQuery(manifest: ComponentManifest, query: string): boolean;
+/**
+ * Derive the two-level taxonomy for the sidebar. `base` precedes `project` (rail
+ * order). An optional `query` filters manifests first; a namespace/category with
+ * no surviving manifest is omitted, so every rendered group yields results.
+ */
+export declare function deriveTaxonomy(manifests: readonly ComponentManifest[], query?: string): TaxonomyNamespace[];
+export interface CategoryCount {
+    /** The manifest category, or `''` for the uncategorized bucket. */
+    key: string;
+    count: number;
+}
+/**
+ * Cheap registry stats for the intro page (EC-320): the total, the base/project
+ * split, and a per-category breakdown (uncategorized last). Derived purely from
+ * the manifest set — no health/implementation lookups here (those come from the
+ * separate {@link import('@elytracms/studio/lib/registry').registryHealth}).
+ */
+export interface ComponentStats {
+    total: number;
+    base: number;
+    project: number;
+    categories: CategoryCount[];
+}
+export declare function deriveComponentStats(manifests: readonly ComponentManifest[]): ComponentStats;

package/dist/components/components/taxonomy.js

@@ -0,0 +1,73 @@
+import { isPrimitive } from '@elytracms/core/component-registry';
+function namespaceOfManifest(manifest) {
+    return isPrimitive(manifest.id) ? 'base' : 'project';
+}
+/** Case-insensitive match against a manifest's id, title, category, description. */
+export function manifestMatchesQuery(manifest, query) {
+    const q = query.trim().toLowerCase();
+    if (q === '')
+        return true;
+    const haystack = [manifest.id, manifest.title, manifest.category, manifest.description]
+        .filter((v) => typeof v === 'string')
+        .join(' ')
+        .toLowerCase();
+    return haystack.includes(q);
+}
+/** Group category buckets: sorted alphabetically, the uncategorized bucket last. */
+function groupCategories(manifests) {
+    const byCategory = new Map();
+    for (const manifest of manifests) {
+        const key = manifest.category ?? '';
+        const bucket = byCategory.get(key);
+        if (bucket)
+            bucket.push(manifest);
+        else
+            byCategory.set(key, [manifest]);
+    }
+    return [...byCategory.entries()]
+        .sort(([a], [b]) => {
+        // Uncategorized ('') always sorts last; otherwise alphabetical.
+        if (a === '')
+            return 1;
+        if (b === '')
+            return -1;
+        return a.localeCompare(b);
+    })
+        .map(([key, ms]) => ({
+        key,
+        manifests: [...ms].sort((x, y) => (x.title ?? x.id).localeCompare(y.title ?? y.id)),
+    }));
+}
+/**
+ * Derive the two-level taxonomy for the sidebar. `base` precedes `project` (rail
+ * order). An optional `query` filters manifests first; a namespace/category with
+ * no surviving manifest is omitted, so every rendered group yields results.
+ */
+export function deriveTaxonomy(manifests, query = '') {
+    const matched = manifests.filter((m) => manifestMatchesQuery(m, query));
+    const order = ['base', 'project'];
+    return order
+        .map((namespace) => {
+        const inNamespace = matched.filter((m) => namespaceOfManifest(m) === namespace);
+        return {
+            namespace,
+            count: inNamespace.length,
+            categories: groupCategories(inNamespace),
+        };
+    })
+        .filter((group) => group.count > 0);
+}
+export function deriveComponentStats(manifests) {
+    let base = 0;
+    for (const m of manifests)
+        if (namespaceOfManifest(m) === 'base')
+            base += 1;
+    const categories = groupCategories([...manifests]).map((c) => ({ key: c.key, count: c.manifests.length }));
+    return {
+        total: manifests.length,
+        base,
+        project: manifests.length - base,
+        categories,
+    };
+}
+//# sourceMappingURL=taxonomy.js.map

package/dist/components/components/taxonomy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"taxonomy.js","sourceRoot":"","sources":["../../../src/components/components/taxonomy.ts"],"names":[],"mappings":"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","sourcesContent":["import { isPrimitive } from '@elytracms/core/component-registry'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\n\n/**\n * EC-320 — the component registry TAXONOMY, derived purely from the metadata a\n * manifest actually declares (no invented axes). Two levels of grouping:\n *\n *   1. **namespace** — `base` platform primitives vs `project` components\n *      (`isPrimitive(id)`, i.e. `namespaceOf(id) === 'base'`).\n *   2. **category** — the manifest's optional `category` string, with an\n *      \"uncategorized\" bucket (`key: ''`) collected last.\n *\n * Manifests carry no free-form `tags`, so category is the finest declared axis —\n * this makes the best of what's there rather than fabricating structure. Pure and\n * store-agnostic so the sidebar's grouping/search is unit-testable without React.\n */\n\nexport type ComponentNamespace = 'base' | 'project'\n\nexport interface TaxonomyCategory {\n  /** The manifest category, or `''` for the uncategorized bucket. */\n  key: string\n  manifests: ComponentManifest[]\n}\n\nexport interface TaxonomyNamespace {\n  namespace: ComponentNamespace\n  count: number\n  categories: TaxonomyCategory[]\n}\n\nfunction namespaceOfManifest(manifest: ComponentManifest): ComponentNamespace {\n  return isPrimitive(manifest.id) ? 'base' : 'project'\n}\n\n/** Case-insensitive match against a manifest's id, title, category, description. */\nexport function manifestMatchesQuery(manifest: ComponentManifest, query: string): boolean {\n  const q = query.trim().toLowerCase()\n  if (q === '') return true\n  const haystack = [manifest.id, manifest.title, manifest.category, manifest.description]\n    .filter((v): v is string => typeof v === 'string')\n    .join(' ')\n    .toLowerCase()\n  return haystack.includes(q)\n}\n\n/** Group category buckets: sorted alphabetically, the uncategorized bucket last. */\nfunction groupCategories(manifests: ComponentManifest[]): TaxonomyCategory[] {\n  const byCategory = new Map<string, ComponentManifest[]>()\n  for (const manifest of manifests) {\n    const key = manifest.category ?? ''\n    const bucket = byCategory.get(key)\n    if (bucket) bucket.push(manifest)\n    else byCategory.set(key, [manifest])\n  }\n  return [...byCategory.entries()]\n    .sort(([a], [b]) => {\n      // Uncategorized ('') always sorts last; otherwise alphabetical.\n      if (a === '') return 1\n      if (b === '') return -1\n      return a.localeCompare(b)\n    })\n    .map(([key, ms]) => ({\n      key,\n      manifests: [...ms].sort((x, y) => (x.title ?? x.id).localeCompare(y.title ?? y.id)),\n    }))\n}\n\n/**\n * Derive the two-level taxonomy for the sidebar. `base` precedes `project` (rail\n * order). An optional `query` filters manifests first; a namespace/category with\n * no surviving manifest is omitted, so every rendered group yields results.\n */\nexport function deriveTaxonomy(\n  manifests: readonly ComponentManifest[],\n  query = '',\n): TaxonomyNamespace[] {\n  const matched = manifests.filter((m) => manifestMatchesQuery(m, query))\n  const order: ComponentNamespace[] = ['base', 'project']\n  return order\n    .map((namespace) => {\n      const inNamespace = matched.filter((m) => namespaceOfManifest(m) === namespace)\n      return {\n        namespace,\n        count: inNamespace.length,\n        categories: groupCategories(inNamespace),\n      }\n    })\n    .filter((group) => group.count > 0)\n}\n\n// --- Stats (intro page) ---\n\nexport interface CategoryCount {\n  /** The manifest category, or `''` for the uncategorized bucket. */\n  key: string\n  count: number\n}\n\n/**\n * Cheap registry stats for the intro page (EC-320): the total, the base/project\n * split, and a per-category breakdown (uncategorized last). Derived purely from\n * the manifest set — no health/implementation lookups here (those come from the\n * separate {@link import('@elytracms/studio/lib/registry').registryHealth}).\n */\nexport interface ComponentStats {\n  total: number\n  base: number\n  project: number\n  categories: CategoryCount[]\n}\n\nexport function deriveComponentStats(manifests: readonly ComponentManifest[]): ComponentStats {\n  let base = 0\n  for (const m of manifests) if (namespaceOfManifest(m) === 'base') base += 1\n  const categories = groupCategories([...manifests]).map(\n    (c): CategoryCount => ({ key: c.key, count: c.manifests.length }),\n  )\n  return {\n    total: manifests.length,\n    base,\n    project: manifests.length - base,\n    categories,\n  }\n}\n"]}

package/dist/components/components/transfer-dialog.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentManifest } from '@elytracms/core/component-registry';
+import type { ComponentNode } from '@elytracms/core/project-graph';
+/**
+ * EC-320 — "Use in document…". Transfers the current component combination (the
+ * live preview {@link ComponentNode}, edited props and all) into a NEW DRAFT
+ * document whose blocks field holds it, then opens that document.
+ *
+ * The dialog mounts a CMS session (so it reuses the store's create/save machinery,
+ * collision-free ids and persistence) only while open. On confirm it builds the
+ * draft (pure {@link buildBlockDocument}), persists it via `saveDocument`, STAGES
+ * it for the next CMS mount (the playground handoff, see document-staging), and
+ * navigates to the document — focused on its blocks field so it opens on the canvas.
+ */
+export declare function TransferToDocumentDialog({ projectId, manifest, node, open, onOpenChange, }: {
+    projectId: string;
+    manifest: ComponentManifest;
+    node: ComponentNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;

package/dist/components/components/transfer-dialog.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { FilePlus2 } from 'lucide-react';
+import { STUDIO_PROJECT_ROUTE, studioPath, useNavigate } from '@elytracms/studio/router';
+import { Button, Code, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Row, Stack, Text, } from '@elytracms/studio/ui';
+import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
+import { isPlaygroundMode } from '@elytracms/studio/lib/persistence';
+import { resolveDeploymentCollections } from '@elytracms/studio/lib/workspace';
+import { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session';
+import { CmsSessionGate } from '../project-session';
+import { CmsProvider, useCms } from '../cms/cms-store';
+import { stageDocument } from '../cms/document-staging';
+import { buildBlockDocument, collectionsWithBlocks } from './transfer';
+import { embedNodeFrom } from './component-preview';
+/**
+ * EC-320 — "Use in document…". Transfers the current component combination (the
+ * live preview {@link ComponentNode}, edited props and all) into a NEW DRAFT
+ * document whose blocks field holds it, then opens that document.
+ *
+ * The dialog mounts a CMS session (so it reuses the store's create/save machinery,
+ * collision-free ids and persistence) only while open. On confirm it builds the
+ * draft (pure {@link buildBlockDocument}), persists it via `saveDocument`, STAGES
+ * it for the next CMS mount (the playground handoff, see document-staging), and
+ * navigates to the document — focused on its blocks field so it opens on the canvas.
+ */
+export function TransferToDocumentDialog({ projectId, manifest, node, open, onOpenChange, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: translate('components.transfer.title', { name: manifest.title ?? manifest.id }) }), _jsx(DialogDescription, { children: translate('components.transfer.description') })] }), open ? (_jsx(CmsSessionGate, { children: (cms) => {
+                        const kit = getInstantiatedKit(projectId);
+                        const collections = cms?.collections ??
+                            kit?.collections ??
+                            (isPlaygroundMode() ? resolveDeploymentCollections() : []);
+                        return (_jsx(CmsProvider, { projectId: projectId, initialCollections: collections, initialDocuments: cms?.documents ?? kit?.documents, initialPublishedKeys: cms?.publishedKeys, children: _jsx(TransferPicker, { projectId: projectId, node: node, collections: collections, onClose: () => onOpenChange(false) }) }));
+                    } })) : null] }) }));
+}
+function TransferPicker({ projectId, node, collections, onClose, }) {
+    const cms = useCms();
+    const navigate = useNavigate();
+    const targets = useMemo(() => collectionsWithBlocks(collections), [collections]);
+    function transfer(target) {
+        const existingIds = new Set(cms.documentsOf(target.collection.id).map((d) => d.id));
+        const doc = buildBlockDocument({
+            collection: target.collection,
+            blocksField: target.field,
+            node: embedNodeFrom(node, 'node-1'),
+            existingIds,
+            seq: { current: 0 },
+        });
+        // Persist through the store (upsert + reference index) and stage for the next
+        // CMS mount (playground handoff), then open the document on its canvas.
+        cms.saveDocument(doc);
+        stageDocument(projectId, doc);
+        onClose();
+        void navigate({
+            to: STUDIO_PROJECT_ROUTE,
+            params: { projectId, _splat: studioPath.cmsDocument(target.collection.id, doc.id) },
+            search: { field: `values/${target.field.name}` },
+        });
+    }
+    if (targets.length === 0) {
+        return (_jsx(Text, { size: "sm", tone: "muted", "data-testid": "transfer-no-targets", children: translate('components.transfer.noTargets') }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Stack, { gap: "2", className: "max-h-[50vh] overflow-y-auto", children: targets.map((target) => (_jsxs("button", { type: "button", "data-testid": "transfer-target", onClick: () => transfer(target), className: "flex items-center gap-3 rounded-md border border-border p-3 text-left transition-colors hover:border-primary/40 hover:bg-muted", children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(FilePlus2, { className: "size-4" }) }), _jsxs(Stack, { gap: "px", className: "min-w-0 flex-1", children: [_jsx(Text, { size: "sm", weight: "medium", className: "truncate", children: localizedLabel(target.collection.form?.label, target.collection.id) }), _jsxs(Row, { gap: "1", align: "center", children: [_jsx(Text, { size: "xs", tone: "muted", children: translate('components.transfer.intoField') }), _jsx(Code, { tone: "muted", children: target.field.name })] })] })] }, target.collection.id))) }), _jsx(DialogFooter, { children: _jsx(Button, { type: "button", variant: "ghost", onClick: onClose, children: translate('common.cancel') }) })] }));
+}
+//# sourceMappingURL=transfer-dialog.js.map

package/dist/components/components/transfer-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transfer-dialog.js","sourceRoot":"","sources":["../../../src/components/components/transfer-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react'\nimport { FilePlus2 } from 'lucide-react'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport type { CollectionDef } from '@elytracms/core/cms-core'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { STUDIO_PROJECT_ROUTE, studioPath, useNavigate } from '@elytracms/studio/router'\nimport {\n  Button,\n  Code,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  Row,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { isPlaygroundMode } from '@elytracms/studio/lib/persistence'\nimport { resolveDeploymentCollections } from '@elytracms/studio/lib/workspace'\nimport { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session'\nimport { CmsSessionGate } from '../project-session'\nimport { CmsProvider, useCms } from '../cms/cms-store'\nimport { stageDocument } from '../cms/document-staging'\nimport { buildBlockDocument, collectionsWithBlocks } from './transfer'\nimport type { CollectionBlocksTarget } from './transfer'\nimport { embedNodeFrom } from './component-preview'\n\n/**\n * EC-320 — \"Use in document…\". Transfers the current component combination (the\n * live preview {@link ComponentNode}, edited props and all) into a NEW DRAFT\n * document whose blocks field holds it, then opens that document.\n *\n * The dialog mounts a CMS session (so it reuses the store's create/save machinery,\n * collision-free ids and persistence) only while open. On confirm it builds the\n * draft (pure {@link buildBlockDocument}), persists it via `saveDocument`, STAGES\n * it for the next CMS mount (the playground handoff, see document-staging), and\n * navigates to the document — focused on its blocks field so it opens on the canvas.\n */\nexport function TransferToDocumentDialog({\n  projectId,\n  manifest,\n  node,\n  open,\n  onOpenChange,\n}: {\n  projectId: string\n  manifest: ComponentManifest\n  node: ComponentNode\n  open: boolean\n  onOpenChange: (open: boolean) => void\n}) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>\n            {translate('components.transfer.title', { name: manifest.title ?? manifest.id })}\n          </DialogTitle>\n          <DialogDescription>{translate('components.transfer.description')}</DialogDescription>\n        </DialogHeader>\n        {open ? (\n          <CmsSessionGate>\n            {(cms) => {\n              const kit = getInstantiatedKit(projectId)\n              const collections =\n                cms?.collections ??\n                kit?.collections ??\n                (isPlaygroundMode() ? resolveDeploymentCollections() : [])\n              return (\n                <CmsProvider\n                  projectId={projectId}\n                  initialCollections={collections}\n                  initialDocuments={cms?.documents ?? kit?.documents}\n                  initialPublishedKeys={cms?.publishedKeys}\n                >\n                  <TransferPicker\n                    projectId={projectId}\n                    node={node}\n                    collections={collections}\n                    onClose={() => onOpenChange(false)}\n                  />\n                </CmsProvider>\n              )\n            }}\n          </CmsSessionGate>\n        ) : null}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction TransferPicker({\n  projectId,\n  node,\n  collections,\n  onClose,\n}: {\n  projectId: string\n  node: ComponentNode\n  collections: readonly CollectionDef[]\n  onClose: () => void\n}) {\n  const cms = useCms()\n  const navigate = useNavigate()\n  const targets = useMemo(() => collectionsWithBlocks(collections), [collections])\n\n  function transfer(target: CollectionBlocksTarget) {\n    const existingIds = new Set(cms.documentsOf(target.collection.id).map((d) => d.id))\n    const doc = buildBlockDocument({\n      collection: target.collection,\n      blocksField: target.field,\n      node: embedNodeFrom(node, 'node-1'),\n      existingIds,\n      seq: { current: 0 },\n    })\n    // Persist through the store (upsert + reference index) and stage for the next\n    // CMS mount (playground handoff), then open the document on its canvas.\n    cms.saveDocument(doc)\n    stageDocument(projectId, doc)\n    onClose()\n    void navigate({\n      to: STUDIO_PROJECT_ROUTE,\n      params: { projectId, _splat: studioPath.cmsDocument(target.collection.id, doc.id) },\n      search: { field: `values/${target.field.name}` },\n    })\n  }\n\n  if (targets.length === 0) {\n    return (\n      <Text size=\"sm\" tone=\"muted\" data-testid=\"transfer-no-targets\">\n        {translate('components.transfer.noTargets')}\n      </Text>\n    )\n  }\n\n  return (\n    <>\n      <Stack gap=\"2\" className=\"max-h-[50vh] overflow-y-auto\">\n        {targets.map((target) => (\n          <button\n            key={target.collection.id}\n            type=\"button\"\n            data-testid=\"transfer-target\"\n            onClick={() => transfer(target)}\n            className=\"flex items-center gap-3 rounded-md border border-border p-3 text-left transition-colors hover:border-primary/40 hover:bg-muted\"\n          >\n            <span className=\"grid size-8 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground\">\n              <FilePlus2 className=\"size-4\" />\n            </span>\n            <Stack gap=\"px\" className=\"min-w-0 flex-1\">\n              <Text size=\"sm\" weight=\"medium\" className=\"truncate\">\n                {localizedLabel(target.collection.form?.label, target.collection.id)}\n              </Text>\n              <Row gap=\"1\" align=\"center\">\n                <Text size=\"xs\" tone=\"muted\">\n                  {translate('components.transfer.intoField')}\n                </Text>\n                <Code tone=\"muted\">{target.field.name}</Code>\n              </Row>\n            </Stack>\n          </button>\n        ))}\n      </Stack>\n      <DialogFooter>\n        <Button type=\"button\" variant=\"ghost\" onClick={onClose}>\n          {translate('common.cancel')}\n        </Button>\n      </DialogFooter>\n    </>\n  )\n}\n"]}

package/dist/components/components/transfer.d.ts

@@ -0,0 +1,43 @@
+import type { CmsDocument, CollectionDef, FieldDef } from '@elytracms/core/cms-core';
+import type { ComponentNode } from '@elytracms/core/project-graph';
+/**
+ * EC-320 — the "design guide → real content" bridge. A component combination the
+ * user has arranged in the Components view (a manifest + edited prop values,
+ * captured as a {@link ComponentNode}) is transferred into a NEW DRAFT document
+ * whose blocks/composition field holds that node. Pure so the id-minting and
+ * embedding are unit-testable; the React dialog owns the picker, persistence, and
+ * navigation.
+ */
+export interface CollectionBlocksTarget {
+    collection: CollectionDef;
+    /** The (first) blocks field the node lands in. */
+    field: FieldDef;
+}
+/**
+ * Collections that can receive a transferred combination — those declaring a
+ * `blocks` (composition) field. The first blocks field wins (a collection with a
+ * single canvas is the norm; a second is an unusual edge we don't disambiguate).
+ */
+export declare function collectionsWithBlocks(collections: readonly CollectionDef[]): CollectionBlocksTarget[];
+export interface BuildBlockDocumentInput {
+    collection: CollectionDef;
+    /** The blocks field the node lands in (from {@link collectionsWithBlocks}). */
+    blocksField: FieldDef;
+    /** The component node — a manifest id + the edited static props (+ slots). */
+    node: ComponentNode;
+    /** Every doc id already in the target collection (collision guard, EC-316). */
+    existingIds: ReadonlySet<string>;
+    /** The session id counter (mutated by {@link mintDocumentId}). */
+    seq: {
+        current: number;
+    };
+}
+/**
+ * Build the draft document that embeds `node` in the collection's blocks field.
+ * Reuses the CMS create machinery: {@link mintDocumentId} for a collision-free id
+ * (EC-316) and {@link seedDefaults} so declared field defaults are present (as a
+ * normal `+ New` would be). A `multiple` blocks field stores an array; a single
+ * (`multiple: false`) blocks field stores the lone node — matching how the
+ * composition editor persists and `blockRootsOf` reads it back.
+ */
+export declare function buildBlockDocument({ collection, blocksField, node, existingIds, seq, }: BuildBlockDocumentInput): CmsDocument;

package/dist/components/components/transfer.js

@@ -0,0 +1,31 @@
+import { isBlocksField, seedDefaults } from '@elytracms/core/cms-core';
+import { mintDocumentId } from '../cms/cms-store';
+/**
+ * Collections that can receive a transferred combination — those declaring a
+ * `blocks` (composition) field. The first blocks field wins (a collection with a
+ * single canvas is the norm; a second is an unusual edge we don't disambiguate).
+ */
+export function collectionsWithBlocks(collections) {
+    const targets = [];
+    for (const collection of collections) {
+        const field = collection.fields.find(isBlocksField);
+        if (field)
+            targets.push({ collection, field });
+    }
+    return targets;
+}
+/**
+ * Build the draft document that embeds `node` in the collection's blocks field.
+ * Reuses the CMS create machinery: {@link mintDocumentId} for a collision-free id
+ * (EC-316) and {@link seedDefaults} so declared field defaults are present (as a
+ * normal `+ New` would be). A `multiple` blocks field stores an array; a single
+ * (`multiple: false`) blocks field stores the lone node — matching how the
+ * composition editor persists and `blockRootsOf` reads it back.
+ */
+export function buildBlockDocument({ collection, blocksField, node, existingIds, seq, }) {
+    const id = mintDocumentId(collection.id, seq, existingIds);
+    const values = seedDefaults(collection);
+    values[blocksField.name] = isBlocksField(blocksField) && blocksField.multiple ? [node] : node;
+    return { collection: collection.id, id, values };
+}
+//# sourceMappingURL=transfer.js.map

package/dist/components/components/transfer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transfer.js","sourceRoot":"","sources":["../../../src/components/components/transfer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGtE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAiBjD;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CACnC,WAAqC;IAErC,MAAM,OAAO,GAA6B,EAAE,CAAA;IAC5C,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE,CAAC;QACrC,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QACnD,IAAI,KAAK;YAAE,OAAO,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAA;IAChD,CAAC;IACD,OAAO,OAAO,CAAA;AAChB,CAAC;AAcD;;;;;;;GAOG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,WAAW,EACX,IAAI,EACJ,WAAW,EACX,GAAG,GACqB;IACxB,MAAM,EAAE,GAAG,cAAc,CAAC,UAAU,CAAC,EAAE,EAAE,GAAG,EAAE,WAAW,CAAC,CAAA;IAC1D,MAAM,MAAM,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IACvC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAC7F,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,CAAA;AAClD,CAAC","sourcesContent":["import { isBlocksField, seedDefaults } from '@elytracms/core/cms-core'\nimport type { CmsDocument, CollectionDef, FieldDef } from '@elytracms/core/cms-core'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { mintDocumentId } from '../cms/cms-store'\n\n/**\n * EC-320 — the \"design guide → real content\" bridge. A component combination the\n * user has arranged in the Components view (a manifest + edited prop values,\n * captured as a {@link ComponentNode}) is transferred into a NEW DRAFT document\n * whose blocks/composition field holds that node. Pure so the id-minting and\n * embedding are unit-testable; the React dialog owns the picker, persistence, and\n * navigation.\n */\n\nexport interface CollectionBlocksTarget {\n  collection: CollectionDef\n  /** The (first) blocks field the node lands in. */\n  field: FieldDef\n}\n\n/**\n * Collections that can receive a transferred combination — those declaring a\n * `blocks` (composition) field. The first blocks field wins (a collection with a\n * single canvas is the norm; a second is an unusual edge we don't disambiguate).\n */\nexport function collectionsWithBlocks(\n  collections: readonly CollectionDef[],\n): CollectionBlocksTarget[] {\n  const targets: CollectionBlocksTarget[] = []\n  for (const collection of collections) {\n    const field = collection.fields.find(isBlocksField)\n    if (field) targets.push({ collection, field })\n  }\n  return targets\n}\n\nexport interface BuildBlockDocumentInput {\n  collection: CollectionDef\n  /** The blocks field the node lands in (from {@link collectionsWithBlocks}). */\n  blocksField: FieldDef\n  /** The component node — a manifest id + the edited static props (+ slots). */\n  node: ComponentNode\n  /** Every doc id already in the target collection (collision guard, EC-316). */\n  existingIds: ReadonlySet<string>\n  /** The session id counter (mutated by {@link mintDocumentId}). */\n  seq: { current: number }\n}\n\n/**\n * Build the draft document that embeds `node` in the collection's blocks field.\n * Reuses the CMS create machinery: {@link mintDocumentId} for a collision-free id\n * (EC-316) and {@link seedDefaults} so declared field defaults are present (as a\n * normal `+ New` would be). A `multiple` blocks field stores an array; a single\n * (`multiple: false`) blocks field stores the lone node — matching how the\n * composition editor persists and `blockRootsOf` reads it back.\n */\nexport function buildBlockDocument({\n  collection,\n  blocksField,\n  node,\n  existingIds,\n  seq,\n}: BuildBlockDocumentInput): CmsDocument {\n  const id = mintDocumentId(collection.id, seq, existingIds)\n  const values = seedDefaults(collection)\n  values[blocksField.name] = isBlocksField(blocksField) && blocksField.multiple ? [node] : node\n  return { collection: collection.id, id, values }\n}\n"]}

package/dist/components/project-list.js

@@ -5,6 +5,7 @@ import { Badge, Button, Card, Code, Heading, Row, Spacer, Stack, Text } from '@e
 import { hasProjectSession } from '@elytracms/studio/lib/auth';
 import { translate } from '@elytracms/studio/lib/i18n';
 import { PlaygroundBadge } from './playground-badge';
+import { SignInNeededBadge } from './sign-in-needed-badge';
 import { SectionStateView } from './section-state';
 import { useStudio } from './studio-context';
 import { useSwitcherEntries } from './workspace-projects';
@@ -28,9 +29,7 @@ export function ProjectLauncher({ forcedState }) {
         .filter((p) => entries.some((e) => e.kind === 'project' && e.project.id === p.id))
         .slice(0, 4);
     const forced = forcedState && forcedState !== 'working' ? forcedState : null;
-    return (_jsxs("div", { className: "mx-auto w-full max-w-6xl px-6 py-8", children: [_jsxs(Row, { gap: "3", className: "mb-6", children: [_jsxs(Stack, { gap: "1", children: [_jsxs(Row, { gap: "2", children: [_jsx(Heading, { size: "display", children: translate('shell.projects') }), _jsx(PlaygroundBadge, {}), hasConfig ? (
-                                    // EC-154: this workspace is defined in code.
-                                    _jsxs(Badge, { variant: "outline", children: [_jsx(TerminalSquare, { className: "size-3" }), " ", workspace.source] })) : null] }), _jsx(Text, { tone: "muted", children: hasConfig
+    return (_jsxs("div", { className: "mx-auto w-full max-w-6xl px-6 py-8", children: [_jsxs(Row, { gap: "3", className: "mb-6", children: [_jsxs(Stack, { gap: "1", children: [_jsxs(Row, { gap: "2", children: [_jsx(Heading, { size: "display", children: translate('shell.projects') }), _jsx(PlaygroundBadge, {}), hasConfig ? (_jsxs(Badge, { variant: "outline", children: [_jsx(TerminalSquare, { className: "size-3" }), " ", workspace.source] })) : null] }), _jsx(Text, { tone: "muted", children: hasConfig
                                     ? 'Projects are defined in code. Add entries to elytra.config.ts and provision them with the CLI.'
                                     : 'Open and manage your Elytra projects.' })] }), _jsx(Spacer, {})] }), recents.length > 0 && !forced ? (_jsxs(Stack, { gap: "2", className: "mb-6", children: [_jsx(Text, { size: "xs", tone: "muted", mono: true, className: "uppercase", children: translate('shell.projectList.recent') }), _jsx(Row, { gap: "2", wrap: true, children: recents.map((p) => (_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId: p.id, _splat: studioPath.index() }, onClick: () => studio.activate(p.id), className: "inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-1.5 text-sm transition-colors hover:border-primary/40 hover:bg-muted", children: [_jsx("span", { className: "grid size-4 place-items-center rounded-[4px] bg-primary text-[0.6rem] font-bold text-primary-foreground", children: p.name.charAt(0).toUpperCase() }), p.name] }, p.id))) })] })) : null, forced ? (_jsx(SectionStateView, { state: forced, title: forced === 'empty' ? translate('shell.projectList.empty.title') : undefined })) : visible.length === 0 ? (_jsx(SectionStateView, { state: "empty", title: translate('shell.projectList.empty.title'), description: hasConfig
                     ? 'The workspace config declares no visible projects. Add an entry to elytra.config.ts, or ask an admin to grant you access.'
@@ -41,7 +40,7 @@ function ProjectCard({ project }) {
     // Per-backend sign-in state (EC-179): one project per backend, so a project on
     // a deployment the user hasn't authenticated into shows "Sign in", not "Open".
     const authed = hasProjectSession(project.slug);
-    return (_jsxs(Card, { className: "flex flex-col gap-3 p-4 transition-colors hover:border-primary/30", children: [_jsxs(Row, { gap: "2", children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-lg bg-primary text-sm font-bold text-primary-foreground", children: project.name.charAt(0).toUpperCase() }), _jsxs(Stack, { gap: "1", className: "min-w-0", children: [_jsx(Text, { weight: "semibold", className: "truncate", children: project.name }), _jsx(Code, { tone: "muted", className: "w-fit max-w-full truncate", children: project.slug })] }), _jsx(Spacer, {}), authed ? null : (_jsxs(Badge, { variant: "warning", children: [_jsx(LogIn, { className: "size-3" }), " ", translate('auth.signIn')] }))] }), _jsxs(Row, { gap: "2", className: "text-muted-foreground", children: [_jsxs(Badge, { variant: "outline", children: [_jsx(Globe, { className: "size-3" }), " ", project.settings.locales.length] }), _jsx(Spacer, {})] }), _jsx(Button, { variant: authed ? 'secondary' : 'default', size: "sm", asChild: true, className: "mt-1", children: _jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId: project.id, _splat: studioPath.index() }, onClick: () => studio.activate(project.id), children: authed ? translate('shell.projectCard.open') : (_jsxs(_Fragment, { children: [_jsx(LogIn, {}), " ", translate('auth.signIn')] })) }) })] }));
+    return (_jsxs(Card, { className: "flex flex-col gap-3 p-4 transition-colors hover:border-primary/30", children: [_jsxs(Row, { gap: "2", children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-lg bg-primary text-sm font-bold text-primary-foreground", children: project.name.charAt(0).toUpperCase() }), _jsxs(Stack, { gap: "1", className: "min-w-0", children: [_jsx(Text, { weight: "semibold", className: "truncate", children: project.name }), _jsx(Code, { tone: "muted", className: "w-fit max-w-full truncate", children: project.slug })] }), _jsx(Spacer, {}), authed ? null : _jsx(SignInNeededBadge, {})] }), _jsxs(Row, { gap: "2", className: "text-muted-foreground", children: [_jsxs(Badge, { variant: "outline", children: [_jsx(Globe, { className: "size-3" }), " ", project.settings.locales.length] }), _jsx(Spacer, {})] }), _jsx(Button, { variant: authed ? 'secondary' : 'default', size: "sm", asChild: true, className: "mt-1", children: _jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId: project.id, _splat: studioPath.index() }, onClick: () => studio.activate(project.id), children: authed ? translate('shell.projectCard.open') : (_jsxs(_Fragment, { children: [_jsx(LogIn, {}), " ", translate('auth.signIn')] })) }) })] }));
 }
 /**
  * A configured project that has no backend project yet (EC-154): an explicit,