@elytracms/studio 0.0.38 → 0.0.40

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

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

package/dist/components/components/component-preview.d.ts

@@ -0,0 +1,97 @@
+import { Component } from 'react';
+import type { ReactNode } from 'react';
+import type { ComponentNode, JsonValue } from '@elytracms/core/project-graph';
+import type { ComponentManifest } from '@elytracms/core/component-registry';
+import type { StudioRegistry } from '@elytracms/studio/lib/registry';
+import type { PreviewSpec } from '@elytracms/studio/lib/registry/preview';
+/**
+ * EC-320 — the editable component preview. A component's declared preview states
+ * (fixtures) select the SAMPLE STATE (slot content, base props); on top of that
+ * the user edits individual prop values in the Props sidebar and the preview
+ * re-renders live through the SAME runtime-renderer path the Builder and export
+ * use (EC-054). Slots follow the selected fixture — full slot-tree editing is out
+ * of scope for this reference surface (that's the composition editor's job); the
+ * Slots pane documents what a component accepts and which state supplies content.
+ */
+export interface PreviewState {
+    specs: PreviewSpec[];
+    index: number;
+    setIndex: (i: number) => void;
+    /** Per-prop static-value overrides applied over the selected fixture. */
+    overrides: Record<string, JsonValue>;
+    setOverride: (name: string, value: JsonValue) => void;
+    clearOverride: (name: string) => void;
+    resetAll: () => void;
+    dirty: boolean;
+    /** The live node: the selected fixture with prop overrides applied. */
+    node: ComponentNode;
+}
+/** Preview state for a manifest: the fixture selection + the live prop overrides. */
+export declare function usePreviewState(manifest: ComponentManifest): PreviewState;
+/** Re-id a preview node into the canvas `node-<n>` namespace for embedding (transfer). */
+export declare function embedNodeFrom(node: ComponentNode, id: string): ComponentNode;
+/**
+ * The live preview surface: the fixture-state selector (when a component declares
+ * more than one) plus the rendered node. Server-only components (EC-191
+ * `clientRenderable: false`) can't run on the client-rendered canvas, so they show
+ * a documented fallback rather than risk a crash; a missing implementation falls
+ * back through the renderer itself (the incompatible state).
+ */
+export declare function ComponentPreview({ manifest, studio, state, }: {
+    manifest: ComponentManifest;
+    studio: StudioRegistry;
+    state: PreviewState;
+}): import("react").JSX.Element;
+interface PreviewBoundaryState {
+    error: Error | null;
+}
+/**
+ * EC-191 resilience for the Components view: a component whose render throws — a
+ * missing provider/context (e.g. a prop control that needs a document's
+ * `CollectionViewSource`), a runtime bug — shows the documented "preview
+ * unavailable" fallback ({@link PreviewUnavailable}) instead of taking the whole
+ * view down. It resets when the previewed `resetKey` (the node) changes, so
+ * switching the fixture state or editing a prop retries the render.
+ */
+export declare class PreviewErrorBoundary extends Component<{
+    children: ReactNode;
+    displayName: string;
+    resetKey: unknown;
+}, PreviewBoundaryState> {
+    state: PreviewBoundaryState;
+    static getDerivedStateFromError(error: Error): PreviewBoundaryState;
+    componentDidUpdate(prev: Readonly<{
+        resetKey: unknown;
+    }>): void;
+    render(): ReactNode;
+}
+/**
+ * The EC-191 fallback panel — component name + "preview unavailable" + the error.
+ * Rendered INTO the preview iframe (which carries only the project stylesheet, and
+ * may carry none in tests), so it uses inline styles rather than studio UI classes
+ * — matching the canvas's own in-iframe placeholder convention.
+ */
+export declare function PreviewUnavailable({ displayName, error }: {
+    displayName: string;
+    error: Error;
+}): import("react").JSX.Element;
+/**
+ * The editable Props pane (right inspector). Every non-`blocks` prop is edited
+ * through the shared {@link PropValueControl} — the exact control set documents
+ * use (EC-190/EC-314 phase 4) — so a change re-renders the preview immediately.
+ * `blocks` props are a canvas (composition) concern, edited in a document, not here.
+ */
+export declare function PropsEditorPane({ manifest, state, }: {
+    manifest: ComponentManifest;
+    state: PreviewState;
+}): import("react").JSX.Element;
+/**
+ * The Slots pane (right inspector): the component's declared child regions and,
+ * for a fixture that supplies slot content, a note that the preview's slot content
+ * follows the selected state. Documents the pragmatic scope call — no slot-tree
+ * editing on this reference surface.
+ */
+export declare function SlotsInfoPane({ manifest }: {
+    manifest: ComponentManifest;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Component, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { MonitorOff, RotateCcw } from 'lucide-react';
+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 { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
+import { cn } from '@elytracms/studio/lib/utils';
+import { getCanvasStylesheetUrl } from '../builder/canvas-stylesheet';
+import { PropValueControl } from '../cms/prop-fields';
+/** Preview state for a manifest: the fixture selection + the live prop overrides. */
+export function usePreviewState(manifest) {
+    const specs = useMemo(() => previewSpecs(manifest), [manifest]);
+    const [index, setIndexRaw] = useState(0);
+    const [overrides, setOverrides] = useState({});
+    // Switching preview state resets prop edits — they were relative to the old state.
+    const setIndex = (i) => {
+        setIndexRaw(i);
+        setOverrides({});
+    };
+    const setOverride = (name, value) => setOverrides((o) => ({ ...o, [name]: value }));
+    const clearOverride = (name) => setOverrides((o) => {
+        const next = { ...o };
+        delete next[name];
+        return next;
+    });
+    const resetAll = () => setOverrides({});
+    const base = specs[Math.min(index, specs.length - 1)]?.node;
+    const node = useMemo(() => {
+        const fixture = base ?? { id: `preview-${manifest.id}`, componentId: manifest.id, props: {} };
+        const props = { ...(fixture.props ?? {}) };
+        for (const [name, value] of Object.entries(overrides))
+            props[name] = staticProp(value);
+        return { ...fixture, props };
+    }, [base, overrides, manifest.id]);
+    return {
+        specs,
+        index: Math.min(index, Math.max(specs.length - 1, 0)),
+        setIndex,
+        overrides,
+        setOverride,
+        clearOverride,
+        resetAll,
+        dirty: Object.keys(overrides).length > 0,
+        node,
+    };
+}
+/** Re-id a preview node into the canvas `node-<n>` namespace for embedding (transfer). */
+export function embedNodeFrom(node, id) {
+    return { ...node, id };
+}
+/**
+ * The live preview surface: the fixture-state selector (when a component declares
+ * more than one) plus the rendered node. Server-only components (EC-191
+ * `clientRenderable: false`) can't run on the client-rendered canvas, so they show
+ * a documented fallback rather than risk a crash; a missing implementation falls
+ * back through the renderer itself (the incompatible state).
+ */
+export function ComponentPreview({ manifest, studio, state, }) {
+    const ctx = useMemo(() => previewContext(studio), [studio]);
+    const serverOnly = manifest.clientRenderable === false;
+    const status = componentStatus(studio, manifest);
+    const displayName = manifest.title ?? manifest.id;
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [state.specs.length > 1 ? (_jsxs(Row, { gap: "1", wrap: true, className: "shrink-0 border-b border-border px-3 py-2", 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))), _jsx(Spacer, {}), state.dirty ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: state.resetAll, "data-testid": "preview-reset", children: [_jsx(RotateCcw, {}), " ", translate('components.preview.reset')] })) : null] })) : 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 })), status === 'incompatible' && !serverOnly ? (_jsx(Text, { size: "xs", tone: "muted", className: "mx-auto mt-3 max-w-2xl", children: translate('components.preview.incompatibleNote') })) : null] })] }));
+}
+function ServerOnlyNotice() {
+    return (_jsx("div", { className: "mx-auto grid max-w-2xl place-items-center rounded-lg border border-dashed border-border bg-muted/30 p-8 text-center", children: _jsxs(Stack, { gap: "2", align: "center", children: [_jsx(MonitorOff, { className: "size-5 text-muted-foreground", "aria-hidden": true }), _jsx(Text, { size: "sm", weight: "medium", children: translate('components.preview.serverOnlyTitle') }), _jsx(Text, { size: "xs", tone: "muted", className: "max-w-sm", children: translate('components.preview.serverOnlyBody') })] }) }));
+}
+/**
+ * The live preview render surface. Reuses the BuilderCanvas styling mechanism
+ * (EC-061, `canvas.tsx`): the component renders inside an ISOLATED same-origin
+ * iframe that `<link>`s the project's canvas stylesheet
+ * (`getCanvasStylesheetUrl()` — the consuming app's delivery CSS + studio CSS), so
+ * a component built with the site's Tailwind theme previews with the site's styles,
+ * exactly as it does on the canvas and in delivery. Using the iframe (not the
+ * studio DOM) is what keeps the delivery CSS scoped and off the studio chrome.
+ *
+ * The render is wrapped in {@link PreviewErrorBoundary} so a component that throws
+ * shows the EC-191 fallback instead of taking the whole Components view down.
+ */
+function ComponentPreviewFrame({ node, ctx, displayName, }) {
+    const iframeRef = useRef(null);
+    const [doc, setDoc] = useState(null);
+    const wireUp = useCallback(() => {
+        const d = iframeRef.current?.contentDocument;
+        if (!d || !d.body)
+            return;
+        // The SAME injection the canvas performs: the studio is dark-themed, and the
+        // delivery stylesheet is scoped to this iframe alone (no chrome leak). Unset
+        // (tests / an app that never called `setCanvasStylesheetUrl`) → skip the link.
+        d.documentElement.classList.add('dark');
+        const appCss = getCanvasStylesheetUrl();
+        if (appCss && !d.getElementById('ec-app-css')) {
+            const link = d.createElement('link');
+            link.id = 'ec-app-css';
+            link.rel = 'stylesheet';
+            link.href = appCss;
+            d.head.appendChild(link);
+        }
+        d.body.className = 'bg-background text-foreground font-sans';
+        d.body.style.margin = '0';
+        d.body.style.padding = '24px';
+        setDoc(d);
+    }, []);
+    // Handle the already-loaded case (srcDoc can load before onLoad attaches).
+    useEffect(() => {
+        if (iframeRef.current?.contentDocument?.readyState === 'complete')
+            wireUp();
+    }, [wireUp]);
+    return (_jsxs(_Fragment, { children: [_jsx("iframe", { ref: iframeRef, onLoad: wireUp, title: translate('components.detail.tab.preview'), className: "mx-auto block min-h-[360px] w-full max-w-2xl rounded-lg border border-border bg-background shadow-sm", srcDoc: "<!doctype html><html><head></head><body></body></html>" }), doc
+                ? createPortal(_jsx(PreviewErrorBoundary, { displayName: displayName, resetKey: node, children: _jsx(PreviewLiveRender, { node: node, ctx: ctx }) }), doc.body)
+                : null] }));
+}
+/** Renders the node through the runtime renderer, INSIDE a component render so the
+ *  error boundary catches synchronous render throws (mirrors the blocks-panel
+ *  thumbnail's `LiveRender`). */
+function PreviewLiveRender({ node, ctx }) {
+    return _jsx(_Fragment, { children: renderNode(node, ctx) });
+}
+/**
+ * EC-191 resilience for the Components view: a component whose render throws — a
+ * missing provider/context (e.g. a prop control that needs a document's
+ * `CollectionViewSource`), a runtime bug — shows the documented "preview
+ * unavailable" fallback ({@link PreviewUnavailable}) instead of taking the whole
+ * view down. It resets when the previewed `resetKey` (the node) changes, so
+ * switching the fixture state or editing a prop retries the render.
+ */
+export class PreviewErrorBoundary extends Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidUpdate(prev) {
+        if (this.state.error && prev.resetKey !== this.props.resetKey) {
+            this.setState({ error: null });
+        }
+    }
+    render() {
+        if (this.state.error) {
+            return _jsx(PreviewUnavailable, { displayName: this.props.displayName, error: this.state.error });
+        }
+        return this.props.children;
+    }
+}
+/**
+ * The EC-191 fallback panel — component name + "preview unavailable" + the error.
+ * Rendered INTO the preview iframe (which carries only the project stylesheet, and
+ * may carry none in tests), so it uses inline styles rather than studio UI classes
+ * — matching the canvas's own in-iframe placeholder convention.
+ */
+export function PreviewUnavailable({ displayName, error }) {
+    return (_jsxs("div", { "data-preview-unavailable": true, style: {
+            boxSizing: 'border-box',
+            maxWidth: '42rem',
+            margin: '0 auto',
+            border: '1px dashed rgba(120,120,120,0.5)',
+            borderRadius: 8,
+            padding: '24px 28px',
+            background: 'rgba(127,127,127,0.06)',
+            color: 'rgba(90,90,90,0.95)',
+            font: '14px/1.5 system-ui, -apple-system, sans-serif',
+            textAlign: 'center',
+        }, children: [_jsxs("div", { style: { fontWeight: 600 }, children: ["\u26A0 ", translate('components.preview.unavailableTitle')] }), _jsx("div", { style: { marginTop: 4, fontWeight: 600, opacity: 0.9 }, children: displayName }), _jsx("div", { style: { marginTop: 6, fontSize: 13, opacity: 0.85, wordBreak: 'break-word' }, children: error.message })] }));
+}
+/**
+ * The editable Props pane (right inspector). Every non-`blocks` prop is edited
+ * through the shared {@link PropValueControl} — the exact control set documents
+ * use (EC-190/EC-314 phase 4) — so a change re-renders the preview immediately.
+ * `blocks` props are a canvas (composition) concern, edited in a document, not here.
+ */
+export function PropsEditorPane({ manifest, state, }) {
+    const editable = Object.entries(manifest.props).filter(([, spec]) => spec.type !== 'blocks');
+    const fixture = state.specs[state.index]?.node;
+    if (editable.length === 0) {
+        return (_jsx(Text, { size: "sm", tone: "subtle", className: "p-4", children: translate('components.fieldInspector.noProps') }));
+    }
+    return (_jsxs(Stack, { gap: "4", className: "p-4", children: [editable.map(([name, spec]) => {
+                const id = `prop-${name}`;
+                const overridden = state.overrides[name] !== undefined;
+                return (_jsx(Field, { label: _jsxs(Row, { gap: "2", children: [_jsx("span", { children: localizedLabel(spec.form?.label, name) }), overridden ? _jsx(Badge, { variant: "info", children: translate('components.preview.edited') }) : null] }), htmlFor: id, hint: localizedLabel(spec.form?.description) || undefined, children: _jsx(PropValueControl, { id: id, name: name, spec: spec, value: overridden
+                            ? staticProp(state.overrides[name])
+                            : (fixture?.props?.[name] ?? undefined), onSet: (v) => state.setOverride(name, v), onClear: () => state.clearOverride(name) }) }, name));
+            }), state.dirty ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: state.resetAll, className: "self-start", children: [_jsx(RotateCcw, {}), " ", translate('components.preview.resetProps')] })) : null] }));
+}
+/**
+ * The Slots pane (right inspector): the component's declared child regions and,
+ * for a fixture that supplies slot content, a note that the preview's slot content
+ * follows the selected state. Documents the pragmatic scope call — no slot-tree
+ * editing on this reference surface.
+ */
+export function SlotsInfoPane({ manifest }) {
+    if (manifest.slots.length === 0) {
+        return (_jsx(Text, { size: "sm", tone: "subtle", className: "p-4", children: translate('components.fieldInspector.noSlots') }));
+    }
+    return (_jsxs(Stack, { gap: "3", className: "p-4", children: [_jsx(Text, { size: "xs", tone: "muted", children: translate('components.preview.slotsNote') }), _jsx("div", { className: "divide-y divide-border rounded-md border border-border", children: manifest.slots.map((slot) => (_jsxs("div", { className: "flex flex-col gap-1 p-3", children: [_jsxs(Row, { gap: "2", children: [_jsx(Code, { tone: "primary", children: slot.name }), slot.required ? (_jsx(Badge, { variant: "warning", children: translate('common.required') })) : (_jsx(Badge, { variant: "outline", children: translate('common.optional') }))] }), slot.allow && slot.allow.length > 0 ? (_jsxs(Row, { gap: "2", className: "text-xs", wrap: true, children: [_jsx(Text, { size: "xs", tone: "subtle", children: translate('components.fieldInspector.allows') }), slot.allow.map((id) => (_jsx(Code, { tone: "muted", children: id }, id)))] })) : null] }, slot.name))) })] }));
+}
+//# sourceMappingURL=component-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component-preview.js","sourceRoot":"","sources":["../../../src/components/components/component-preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { createPortal } from 'react-dom'\nimport { MonitorOff, RotateCcw } from 'lucide-react'\nimport { renderNode } from '@elytracms/core/runtime-renderer'\nimport type { RenderContext } from '@elytracms/core/runtime-renderer'\nimport { staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode, JsonValue } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, PropField } from '@elytracms/core/component-registry'\nimport { componentStatus, previewContext } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { previewSpecs } from '@elytracms/studio/lib/registry/preview'\nimport type { PreviewSpec } from '@elytracms/studio/lib/registry/preview'\nimport { Badge, Button, Code, Field, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { getCanvasStylesheetUrl } from '../builder/canvas-stylesheet'\nimport { PropValueControl } from '../cms/prop-fields'\n\n/**\n * EC-320 — the editable component preview. A component's declared preview states\n * (fixtures) select the SAMPLE STATE (slot content, base props); on top of that\n * the user edits individual prop values in the Props sidebar and the preview\n * re-renders live through the SAME runtime-renderer path the Builder and export\n * use (EC-054). Slots follow the selected fixture — full slot-tree editing is out\n * of scope for this reference surface (that's the composition editor's job); the\n * Slots pane documents what a component accepts and which state supplies content.\n */\n\nexport interface PreviewState {\n  specs: PreviewSpec[]\n  index: number\n  setIndex: (i: number) => void\n  /** Per-prop static-value overrides applied over the selected fixture. */\n  overrides: Record<string, JsonValue>\n  setOverride: (name: string, value: JsonValue) => void\n  clearOverride: (name: string) => void\n  resetAll: () => void\n  dirty: boolean\n  /** The live node: the selected fixture with prop overrides applied. */\n  node: ComponentNode\n}\n\n/** Preview state for a manifest: the fixture selection + the live prop overrides. */\nexport function usePreviewState(manifest: ComponentManifest): PreviewState {\n  const specs = useMemo(() => previewSpecs(manifest), [manifest])\n  const [index, setIndexRaw] = useState(0)\n  const [overrides, setOverrides] = useState<Record<string, JsonValue>>({})\n\n  // Switching preview state resets prop edits — they were relative to the old state.\n  const setIndex = (i: number) => {\n    setIndexRaw(i)\n    setOverrides({})\n  }\n  const setOverride = (name: string, value: JsonValue) =>\n    setOverrides((o) => ({ ...o, [name]: value }))\n  const clearOverride = (name: string) =>\n    setOverrides((o) => {\n      const next = { ...o }\n      delete next[name]\n      return next\n    })\n  const resetAll = () => setOverrides({})\n\n  const base = specs[Math.min(index, specs.length - 1)]?.node\n  const node = useMemo<ComponentNode>(() => {\n    const fixture = base ?? { id: `preview-${manifest.id}`, componentId: manifest.id, props: {} }\n    const props = { ...(fixture.props ?? {}) }\n    for (const [name, value] of Object.entries(overrides)) props[name] = staticProp(value)\n    return { ...fixture, props }\n  }, [base, overrides, manifest.id])\n\n  return {\n    specs,\n    index: Math.min(index, Math.max(specs.length - 1, 0)),\n    setIndex,\n    overrides,\n    setOverride,\n    clearOverride,\n    resetAll,\n    dirty: Object.keys(overrides).length > 0,\n    node,\n  }\n}\n\n/** Re-id a preview node into the canvas `node-<n>` namespace for embedding (transfer). */\nexport function embedNodeFrom(node: ComponentNode, id: string): ComponentNode {\n  return { ...node, id }\n}\n\n/**\n * The live preview surface: the fixture-state selector (when a component declares\n * more than one) plus the rendered node. Server-only components (EC-191\n * `clientRenderable: false`) can't run on the client-rendered canvas, so they show\n * a documented fallback rather than risk a crash; a missing implementation falls\n * back through the renderer itself (the incompatible state).\n */\nexport function ComponentPreview({\n  manifest,\n  studio,\n  state,\n}: {\n  manifest: ComponentManifest\n  studio: StudioRegistry\n  state: PreviewState\n}) {\n  const ctx = useMemo(() => previewContext(studio), [studio])\n  const serverOnly = manifest.clientRenderable === false\n  const status = componentStatus(studio, manifest)\n  const displayName = manifest.title ?? manifest.id\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      {state.specs.length > 1 ? (\n        <Row\n          gap=\"1\"\n          wrap\n          className=\"shrink-0 border-b border-border px-3 py-2\"\n          role=\"group\"\n          aria-label={translate('components.fixtureRunner.statesAria')}\n        >\n          {state.specs.map((spec, i) => (\n            <button\n              key={spec.name}\n              type=\"button\"\n              aria-pressed={i === state.index}\n              onClick={() => state.setIndex(i)}\n              className={cn(\n                'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                i === state.index\n                  ? 'bg-accent text-accent-foreground'\n                  : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n              )}\n            >\n              {spec.name}\n            </button>\n          ))}\n          <Spacer />\n          {state.dirty ? (\n            <Button variant=\"ghost\" size=\"sm\" onClick={state.resetAll} data-testid=\"preview-reset\">\n              <RotateCcw /> {translate('components.preview.reset')}\n            </Button>\n          ) : null}\n        </Row>\n      ) : null}\n\n      <div\n        className=\"canvas-grid min-h-0 flex-1 overflow-auto p-6\"\n        data-fixture-state={state.specs[state.index]?.name}\n      >\n        {serverOnly ? (\n          <ServerOnlyNotice />\n        ) : (\n          <ComponentPreviewFrame node={state.node} ctx={ctx} displayName={displayName} />\n        )}\n        {status === 'incompatible' && !serverOnly ? (\n          <Text size=\"xs\" tone=\"muted\" className=\"mx-auto mt-3 max-w-2xl\">\n            {translate('components.preview.incompatibleNote')}\n          </Text>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\nfunction ServerOnlyNotice() {\n  return (\n    <div className=\"mx-auto grid max-w-2xl place-items-center rounded-lg border border-dashed border-border bg-muted/30 p-8 text-center\">\n      <Stack gap=\"2\" align=\"center\">\n        <MonitorOff className=\"size-5 text-muted-foreground\" aria-hidden />\n        <Text size=\"sm\" weight=\"medium\">\n          {translate('components.preview.serverOnlyTitle')}\n        </Text>\n        <Text size=\"xs\" tone=\"muted\" className=\"max-w-sm\">\n          {translate('components.preview.serverOnlyBody')}\n        </Text>\n      </Stack>\n    </div>\n  )\n}\n\n/**\n * The live preview render surface. Reuses the BuilderCanvas styling mechanism\n * (EC-061, `canvas.tsx`): the component renders inside an ISOLATED same-origin\n * iframe that `<link>`s the project's canvas stylesheet\n * (`getCanvasStylesheetUrl()` — the consuming app's delivery CSS + studio CSS), so\n * a component built with the site's Tailwind theme previews with the site's styles,\n * exactly as it does on the canvas and in delivery. Using the iframe (not the\n * studio DOM) is what keeps the delivery CSS scoped and off the studio chrome.\n *\n * The render is wrapped in {@link PreviewErrorBoundary} so a component that throws\n * shows the EC-191 fallback instead of taking the whole Components view down.\n */\nfunction ComponentPreviewFrame({\n  node,\n  ctx,\n  displayName,\n}: {\n  node: ComponentNode\n  ctx: RenderContext\n  displayName: string\n}) {\n  const iframeRef = useRef<HTMLIFrameElement>(null)\n  const [doc, setDoc] = useState<Document | null>(null)\n\n  const wireUp = useCallback(() => {\n    const d = iframeRef.current?.contentDocument\n    if (!d || !d.body) return\n    // The SAME injection the canvas performs: the studio is dark-themed, and the\n    // delivery stylesheet is scoped to this iframe alone (no chrome leak). Unset\n    // (tests / an app that never called `setCanvasStylesheetUrl`) → skip the link.\n    d.documentElement.classList.add('dark')\n    const appCss = getCanvasStylesheetUrl()\n    if (appCss && !d.getElementById('ec-app-css')) {\n      const link = d.createElement('link')\n      link.id = 'ec-app-css'\n      link.rel = 'stylesheet'\n      link.href = appCss\n      d.head.appendChild(link)\n    }\n    d.body.className = 'bg-background text-foreground font-sans'\n    d.body.style.margin = '0'\n    d.body.style.padding = '24px'\n    setDoc(d)\n  }, [])\n\n  // Handle the already-loaded case (srcDoc can load before onLoad attaches).\n  useEffect(() => {\n    if (iframeRef.current?.contentDocument?.readyState === 'complete') wireUp()\n  }, [wireUp])\n\n  return (\n    <>\n      <iframe\n        ref={iframeRef}\n        onLoad={wireUp}\n        title={translate('components.detail.tab.preview')}\n        className=\"mx-auto block min-h-[360px] w-full max-w-2xl rounded-lg border border-border bg-background shadow-sm\"\n        srcDoc=\"<!doctype html><html><head></head><body></body></html>\"\n      />\n      {doc\n        ? createPortal(\n            <PreviewErrorBoundary displayName={displayName} resetKey={node}>\n              <PreviewLiveRender node={node} ctx={ctx} />\n            </PreviewErrorBoundary>,\n            doc.body,\n          )\n        : null}\n    </>\n  )\n}\n\n/** Renders the node through the runtime renderer, INSIDE a component render so the\n *  error boundary catches synchronous render throws (mirrors the blocks-panel\n *  thumbnail's `LiveRender`). */\nfunction PreviewLiveRender({ node, ctx }: { node: ComponentNode; ctx: RenderContext }) {\n  return <>{renderNode(node, ctx)}</>\n}\n\ninterface PreviewBoundaryState {\n  error: Error | null\n}\n\n/**\n * EC-191 resilience for the Components view: a component whose render throws — a\n * missing provider/context (e.g. a prop control that needs a document's\n * `CollectionViewSource`), a runtime bug — shows the documented \"preview\n * unavailable\" fallback ({@link PreviewUnavailable}) instead of taking the whole\n * view down. It resets when the previewed `resetKey` (the node) changes, so\n * switching the fixture state or editing a prop retries the render.\n */\nexport class PreviewErrorBoundary extends Component<\n  { children: ReactNode; displayName: string; resetKey: unknown },\n  PreviewBoundaryState\n> {\n  override state: PreviewBoundaryState = { error: null }\n\n  static getDerivedStateFromError(error: Error): PreviewBoundaryState {\n    return { error }\n  }\n\n  override componentDidUpdate(prev: Readonly<{ resetKey: unknown }>) {\n    if (this.state.error && prev.resetKey !== this.props.resetKey) {\n      this.setState({ error: null })\n    }\n  }\n\n  override render(): ReactNode {\n    if (this.state.error) {\n      return <PreviewUnavailable displayName={this.props.displayName} error={this.state.error} />\n    }\n    return this.props.children\n  }\n}\n\n/**\n * The EC-191 fallback panel — component name + \"preview unavailable\" + the error.\n * Rendered INTO the preview iframe (which carries only the project stylesheet, and\n * may carry none in tests), so it uses inline styles rather than studio UI classes\n * — matching the canvas's own in-iframe placeholder convention.\n */\nexport function PreviewUnavailable({ displayName, error }: { displayName: string; error: Error }) {\n  return (\n    <div\n      data-preview-unavailable\n      style={{\n        boxSizing: 'border-box',\n        maxWidth: '42rem',\n        margin: '0 auto',\n        border: '1px dashed rgba(120,120,120,0.5)',\n        borderRadius: 8,\n        padding: '24px 28px',\n        background: 'rgba(127,127,127,0.06)',\n        color: 'rgba(90,90,90,0.95)',\n        font: '14px/1.5 system-ui, -apple-system, sans-serif',\n        textAlign: 'center',\n      }}\n    >\n      <div style={{ fontWeight: 600 }}>⚠ {translate('components.preview.unavailableTitle')}</div>\n      <div style={{ marginTop: 4, fontWeight: 600, opacity: 0.9 }}>{displayName}</div>\n      <div style={{ marginTop: 6, fontSize: 13, opacity: 0.85, wordBreak: 'break-word' }}>\n        {error.message}\n      </div>\n    </div>\n  )\n}\n\n/**\n * The editable Props pane (right inspector). Every non-`blocks` prop is edited\n * through the shared {@link PropValueControl} — the exact control set documents\n * use (EC-190/EC-314 phase 4) — so a change re-renders the preview immediately.\n * `blocks` props are a canvas (composition) concern, edited in a document, not here.\n */\nexport function PropsEditorPane({\n  manifest,\n  state,\n}: {\n  manifest: ComponentManifest\n  state: PreviewState\n}) {\n  const editable = Object.entries(manifest.props).filter(([, spec]) => spec.type !== 'blocks')\n  const fixture = state.specs[state.index]?.node\n  if (editable.length === 0) {\n    return (\n      <Text size=\"sm\" tone=\"subtle\" className=\"p-4\">\n        {translate('components.fieldInspector.noProps')}\n      </Text>\n    )\n  }\n  return (\n    <Stack gap=\"4\" className=\"p-4\">\n      {editable.map(([name, spec]) => {\n        const id = `prop-${name}`\n        const overridden = state.overrides[name] !== undefined\n        return (\n          <Field\n            key={name}\n            label={\n              <Row gap=\"2\">\n                <span>{localizedLabel((spec as PropField).form?.label, name)}</span>\n                {overridden ? <Badge variant=\"info\">{translate('components.preview.edited')}</Badge> : null}\n              </Row>\n            }\n            htmlFor={id}\n            hint={localizedLabel((spec as PropField).form?.description) || undefined}\n          >\n            <PropValueControl\n              id={id}\n              name={name}\n              spec={spec as PropField}\n              value={\n                overridden\n                  ? staticProp(state.overrides[name]!)\n                  : (fixture?.props?.[name] ?? undefined)\n              }\n              onSet={(v) => state.setOverride(name, v)}\n              onClear={() => state.clearOverride(name)}\n            />\n          </Field>\n        )\n      })}\n      {state.dirty ? (\n        <Button variant=\"outline\" size=\"sm\" onClick={state.resetAll} className=\"self-start\">\n          <RotateCcw /> {translate('components.preview.resetProps')}\n        </Button>\n      ) : null}\n    </Stack>\n  )\n}\n\n/**\n * The Slots pane (right inspector): the component's declared child regions and,\n * for a fixture that supplies slot content, a note that the preview's slot content\n * follows the selected state. Documents the pragmatic scope call — no slot-tree\n * editing on this reference surface.\n */\nexport function SlotsInfoPane({ manifest }: { manifest: ComponentManifest }) {\n  if (manifest.slots.length === 0) {\n    return (\n      <Text size=\"sm\" tone=\"subtle\" className=\"p-4\">\n        {translate('components.fieldInspector.noSlots')}\n      </Text>\n    )\n  }\n  return (\n    <Stack gap=\"3\" className=\"p-4\">\n      <Text size=\"xs\" tone=\"muted\">\n        {translate('components.preview.slotsNote')}\n      </Text>\n      <div className=\"divide-y divide-border rounded-md border border-border\">\n        {manifest.slots.map((slot) => (\n          <div key={slot.name} className=\"flex flex-col gap-1 p-3\">\n            <Row gap=\"2\">\n              <Code tone=\"primary\">{slot.name}</Code>\n              {slot.required ? (\n                <Badge variant=\"warning\">{translate('common.required')}</Badge>\n              ) : (\n                <Badge variant=\"outline\">{translate('common.optional')}</Badge>\n              )}\n            </Row>\n            {slot.allow && slot.allow.length > 0 ? (\n              <Row gap=\"2\" className=\"text-xs\" wrap>\n                <Text size=\"xs\" tone=\"subtle\">\n                  {translate('components.fieldInspector.allows')}\n                </Text>\n                {slot.allow.map((id) => (\n                  <Code key={id} tone=\"muted\">\n                    {id}\n                  </Code>\n                ))}\n              </Row>\n            ) : null}\n          </div>\n        ))}\n      </div>\n    </Stack>\n  )\n}\n"]}

package/dist/components/components/components-index.d.ts

@@ -1,7 +1,9 @@
 /**
- * The Components section landing view (EC-223 Stage 6): registry health overview
- * + the authoring guide, shown when no component is selected. Takes `projectId`
- * as a prop — the splat resolver sources it from the route, not a route file.
+ * The Components section landing view (EC-050, overhauled EC-320). Serves BOTH
+ * audiences: editors get a live census of what components exist (totals, the
+ * base/project split, per-category breakdown, health) and a "pick one" nudge;
+ * devs get pointers to the real in-repo docs for registering and extending
+ * components — no code sample to drift, no invented docs.
  */
 export declare function ComponentsIndex({ projectId }: {
     projectId: string;

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

@@ -1,37 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Blocks, MousePointerClick } from 'lucide-react';
+import { BookOpen, Layers, MousePointerClick, Sparkles } from 'lucide-react';
 import { getStudioRegistry, registryHealth } from '@elytracms/studio/lib/registry';
 import { translate } from '@elytracms/studio/lib/i18n';
-import { RegistryBrowser } from '@elytracms/studio/components/components/registry-browser';
-import { Badge, Card, Code, Heading, Panel, PanelHeader, Spacer, Stack, Text, } from '@elytracms/studio/ui';
-const REGISTER_EXAMPLE = `// project code registers components + manifests
-import { defineComponent } from '@elytracms/core/component-registry'
-
-export const MarketingHeroManifest = defineComponent({
-  id: 'project.MarketingHero',        // project.* namespace
-  namespace: 'project',
-  title: 'Marketing Hero',
-  props: {
-    heading: { schema: z.string().min(1), bindable: true,
-               control: { kind: 'text' }, defaultValue: 'Hello' },
-  },
-  slots: [],
-  fixtures: [{ name: 'Default' }],
-})`;
+import { RegistryBrowser } from './registry-browser';
+import { deriveComponentStats } from './taxonomy';
+import { Badge, Card, Code, Heading, Panel, PanelHeader, Row, Spacer, Stack, Text } from '@elytracms/studio/ui';
 /**
- * The Components section landing view (EC-223 Stage 6): registry health overview
- * + the authoring guide, shown when no component is selected. Takes `projectId`
- * as a prop — the splat resolver sources it from the route, not a route file.
+ * The Components section landing view (EC-050, overhauled EC-320). Serves BOTH
+ * audiences: editors get a live census of what components exist (totals, the
+ * base/project split, per-category breakdown, health) and a "pick one" nudge;
+ * devs get pointers to the real in-repo docs for registering and extending
+ * components — no code sample to drift, no invented docs.
  */
 export function ComponentsIndex({ projectId }) {
     const studio = getStudioRegistry();
+    const manifests = studio.registry.list();
+    const stats = deriveComponentStats(manifests);
     const health = registryHealth(studio);
-    const primitives = studio.registry.primitives().length;
-    const projects = studio.registry.projectComponents().length;
-    return (_jsxs("div", { className: "mx-auto w-full max-w-4xl p-4 sm:p-6", children: [_jsx("div", { className: "mb-6 h-80 overflow-hidden rounded-lg border border-border md:hidden", children: _jsx(RegistryBrowser, { projectId: projectId }) }), _jsxs(Stack, { gap: "6", children: [_jsxs(Stack, { gap: "1", children: [_jsx(Heading, { size: "display", children: translate('components.index.title') }), _jsx(Text, { tone: "muted", children: translate('components.index.subtitle') })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsx(StatCard, { label: translate('components.index.stat.total'), value: health.total, hint: translate('components.index.stat.totalHint', { primitives, projects }) }), _jsx(StatCard, { label: translate('components.index.stat.valid'), value: health.valid, tone: "success" }), _jsx(StatCard, { label: translate('components.index.stat.needAttention'), value: health.incompatible + health.invalid, tone: health.incompatible + health.invalid > 0 ? 'warning' : 'muted', hint: translate('components.index.stat.needAttentionHint', {
+    return (_jsxs("div", { className: "mx-auto w-full max-w-4xl p-4 sm:p-6", children: [_jsx("div", { className: "mb-6 h-80 overflow-hidden rounded-lg border border-border md:hidden", children: _jsx(RegistryBrowser, { projectId: projectId }) }), _jsxs(Stack, { gap: "6", children: [_jsxs(Stack, { gap: "1", children: [_jsx(Heading, { size: "display", children: translate('components.index.title') }), _jsx(Text, { tone: "muted", children: translate('components.index.subtitle') })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsx(StatCard, { label: translate('components.index.stat.total'), value: stats.total, hint: translate('components.index.stat.totalHint', {
+                                    primitives: stats.base,
+                                    projects: stats.project,
+                                }) }), _jsx(StatCard, { label: translate('components.index.stat.valid'), value: health.valid, tone: "success" }), _jsx(StatCard, { label: translate('components.index.stat.needAttention'), value: health.incompatible + health.invalid, tone: health.incompatible + health.invalid > 0 ? 'warning' : 'muted', hint: translate('components.index.stat.needAttentionHint', {
                                     incompatible: health.incompatible,
                                     invalid: health.invalid,
-                                }) })] }), _jsxs(Card, { className: "flex items-center gap-3 p-4", children: [_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground", children: _jsx(MousePointerClick, { className: "size-4" }) }), _jsx(Text, { size: "sm", tone: "muted", children: translate('components.index.pickHint') })] }), _jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Blocks, { className: "size-4 text-muted-foreground" }), _jsx(Text, { size: "sm", weight: "semibold", children: translate('components.index.guide.title') }), _jsx(Spacer, {}), _jsx(Badge, { variant: "outline", children: translate('components.index.guide.badge') })] }), _jsxs(Stack, { gap: "3", className: "p-4", children: [_jsxs(Text, { size: "sm", tone: "muted", children: ["Project code owns its components. Register a manifest under the", ' ', _jsx(Code, { tone: "primary", children: "project.*" }), " namespace (platform primitives live under", ' ', _jsx(Code, { tone: "muted", children: "base.*" }), "). The manifest declares prop schemas, defaults, inspector controls, binding permissions, slots, and preview fixtures."] }), _jsx("pre", { className: "overflow-x-auto rounded-lg border border-border bg-muted/40 p-3 font-mono text-xs leading-relaxed text-foreground/90", children: REGISTER_EXAMPLE }), _jsx(Text, { size: "xs", tone: "subtle", children: translate('components.index.guide.fullGuide', { path: 'docs/component-authoring.md' }) })] })] })] })] }));
+                                }) })] }), stats.categories.length > 0 ? (_jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(Layers, { className: "size-4 text-muted-foreground" }), _jsx(Text, { size: "sm", weight: "semibold", children: translate('components.index.byCategory') })] }), _jsx(Row, { gap: "2", wrap: true, className: "p-4", children: stats.categories.map((category) => (_jsxs(Badge, { variant: "outline", children: [_jsx("span", { className: category.key ? 'capitalize' : undefined, children: category.key || translate('components.taxonomy.uncategorized') }), _jsx("span", { className: "font-mono text-muted-foreground", children: category.count })] }, category.key || '__uncategorized__'))) })] })) : null, _jsxs(Card, { className: "flex items-center gap-3 p-4", children: [_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground", children: _jsx(MousePointerClick, { className: "size-4" }) }), _jsx(Text, { size: "sm", tone: "muted", children: translate('components.index.pickHint') })] }), _jsxs(Panel, { children: [_jsxs(PanelHeader, { children: [_jsx(BookOpen, { className: "size-4 text-muted-foreground" }), _jsx(Text, { size: "sm", weight: "semibold", children: translate('components.index.guide.title') }), _jsx(Spacer, {}), _jsx(Badge, { variant: "outline", children: translate('components.index.guide.badge') })] }), _jsxs(Stack, { gap: "3", className: "p-4", children: [_jsx(Text, { size: "sm", tone: "muted", children: translate('components.index.guide.intro') }), _jsxs(Stack, { gap: "2", children: [_jsx(DocPointer, { path: "docs/component-authoring.md", description: translate('components.index.guide.doc.authoring') }), _jsx(DocPointer, { path: "docs/fixtures.md", description: translate('components.index.guide.doc.fixtures') }), _jsx(DocPointer, { path: "docs/extensibility.md", description: translate('components.index.guide.doc.extensibility') })] }), _jsxs(Text, { size: "xs", tone: "subtle", children: [_jsx(Sparkles, { className: "mr-1 inline size-3", "aria-hidden": true }), translate('components.index.guide.namespaceNote')] })] })] })] })] }));
+}
+function DocPointer({ path, description }) {
+    return (_jsxs(Row, { gap: "3", align: "center", className: "rounded-md border border-border p-2.5", children: [_jsx(Code, { tone: "primary", className: "shrink-0", children: path }), _jsx(Text, { size: "xs", tone: "muted", children: description })] }));
 }
 function StatCard({ label, value, hint, tone = 'default', }) {
     const valueClass = tone === 'success'

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

@@ -1 +1 @@
-{"version":3,"file":"components-index.js","sourceRoot":"","sources":["../../../src/components/components/components-index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,0DAA0D,CAAA;AAC1F,OAAO,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,EACL,IAAI,GACL,MAAM,sBAAsB,CAAA;AAE7B,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;GAatB,CAAA;AAEH;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAyB;IAClE,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAClC,MAAM,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;IACrC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,MAAM,CAAA;IACtD,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,MAAM,CAAA;IAE3D,OAAO,CACL,eAAK,SAAS,EAAC,qCAAqC,aAElD,cAAK,SAAS,EAAC,qEAAqE,YAClF,KAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI,GACrC,EAEN,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,KAAC,OAAO,IAAC,IAAI,EAAC,SAAS,YAAE,SAAS,CAAC,wBAAwB,CAAC,GAAW,EACvE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,YAAE,SAAS,CAAC,2BAA2B,CAAC,GAAQ,IAC5D,EAER,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,QAAQ,IACP,KAAK,EAAE,SAAS,CAAC,6BAA6B,CAAC,EAC/C,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,SAAS,CAAC,iCAAiC,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,GAC5E,EACF,KAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,CAAC,6BAA6B,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAC,SAAS,GAAG,EACjG,KAAC,QAAQ,IACP,KAAK,EAAE,SAAS,CAAC,qCAAqC,CAAC,EACvD,KAAK,EAAE,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,EAC3C,IAAI,EAAE,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACpE,IAAI,EAAE,SAAS,CAAC,yCAAyC,EAAE;oCACzD,YAAY,EAAE,MAAM,CAAC,YAAY;oCACjC,OAAO,EAAE,MAAM,CAAC,OAAO;iCACxB,CAAC,GACF,IACE,EAEN,MAAC,IAAI,IAAC,SAAS,EAAC,6BAA6B,aAC3C,eAAM,SAAS,EAAC,mFAAmF,YACjG,KAAC,iBAAiB,IAAC,SAAS,EAAC,QAAQ,GAAG,GACnC,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,SAAS,CAAC,2BAA2B,CAAC,GAClC,IACF,EAEP,MAAC,KAAK,eACJ,MAAC,WAAW,eACV,KAAC,MAAM,IAAC,SAAS,EAAC,8BAA8B,GAAG,EACnD,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,UAAU,YAC9B,SAAS,CAAC,8BAA8B,CAAC,GACrC,EACP,KAAC,MAAM,KAAG,EACV,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,SAAS,CAAC,8BAA8B,CAAC,GAAS,IAChE,EACd,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,KAAK,aAC5B,MAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,gFACsC,GAAG,EACnE,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,0BAAiB,gDAA2C,GAAG,EACnF,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,uBAAc,8HAE3B,EACP,cAAK,SAAS,EAAC,sHAAsH,YAClI,gBAAgB,GACb,EACN,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,YAC1B,SAAS,CAAC,kCAAkC,EAAE,EAAE,IAAI,EAAE,6BAA6B,EAAE,CAAC,GAClF,IACD,IACF,IACF,IACJ,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,SAAS,GAMjB;IACC,MAAM,UAAU,GACd,IAAI,KAAK,SAAS;QAChB,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,IAAI,KAAK,SAAS;YAClB,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,IAAI,KAAK,OAAO;gBAChB,CAAC,CAAC,uBAAuB;gBACzB,CAAC,CAAC,iBAAiB,CAAA;IAC3B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAC,KAAK,aACnB,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,kBAC9B,KAAK,CAAC,WAAW,EAAE,GACf,EACP,cAAK,SAAS,EAAE,8CAA8C,UAAU,EAAE,YAAG,KAAK,GAAO,EACxF,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,YAC7C,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAA;AACH,CAAC","sourcesContent":["import { Blocks, MousePointerClick } from 'lucide-react'\nimport { getStudioRegistry, registryHealth } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { RegistryBrowser } from '@elytracms/studio/components/components/registry-browser'\nimport {\n  Badge,\n  Card,\n  Code,\n  Heading,\n  Panel,\n  PanelHeader,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\n\nconst REGISTER_EXAMPLE = `// project code registers components + manifests\nimport { defineComponent } from '@elytracms/core/component-registry'\n\nexport const MarketingHeroManifest = defineComponent({\n  id: 'project.MarketingHero',        // project.* namespace\n  namespace: 'project',\n  title: 'Marketing Hero',\n  props: {\n    heading: { schema: z.string().min(1), bindable: true,\n               control: { kind: 'text' }, defaultValue: 'Hello' },\n  },\n  slots: [],\n  fixtures: [{ name: 'Default' }],\n})`\n\n/**\n * The Components section landing view (EC-223 Stage 6): registry health overview\n * + the authoring guide, shown when no component is selected. Takes `projectId`\n * as a prop — the splat resolver sources it from the route, not a route file.\n */\nexport function ComponentsIndex({ projectId }: { projectId: string }) {\n  const studio = getStudioRegistry()\n  const health = registryHealth(studio)\n  const primitives = studio.registry.primitives().length\n  const projects = studio.registry.projectComponents().length\n\n  return (\n    <div className=\"mx-auto w-full max-w-4xl p-4 sm:p-6\">\n      {/* Mobile-only browser (the sidebar is hidden under md). */}\n      <div className=\"mb-6 h-80 overflow-hidden rounded-lg border border-border md:hidden\">\n        <RegistryBrowser projectId={projectId} />\n      </div>\n\n      <Stack gap=\"6\">\n        <Stack gap=\"1\">\n          <Heading size=\"display\">{translate('components.index.title')}</Heading>\n          <Text tone=\"muted\">{translate('components.index.subtitle')}</Text>\n        </Stack>\n\n        <div className=\"grid gap-3 sm:grid-cols-3\">\n          <StatCard\n            label={translate('components.index.stat.total')}\n            value={health.total}\n            hint={translate('components.index.stat.totalHint', { primitives, projects })}\n          />\n          <StatCard label={translate('components.index.stat.valid')} value={health.valid} tone=\"success\" />\n          <StatCard\n            label={translate('components.index.stat.needAttention')}\n            value={health.incompatible + health.invalid}\n            tone={health.incompatible + health.invalid > 0 ? 'warning' : 'muted'}\n            hint={translate('components.index.stat.needAttentionHint', {\n              incompatible: health.incompatible,\n              invalid: health.invalid,\n            })}\n          />\n        </div>\n\n        <Card className=\"flex items-center gap-3 p-4\">\n          <span className=\"grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground\">\n            <MousePointerClick className=\"size-4\" />\n          </span>\n          <Text size=\"sm\" tone=\"muted\">\n            {translate('components.index.pickHint')}\n          </Text>\n        </Card>\n\n        <Panel>\n          <PanelHeader>\n            <Blocks className=\"size-4 text-muted-foreground\" />\n            <Text size=\"sm\" weight=\"semibold\">\n              {translate('components.index.guide.title')}\n            </Text>\n            <Spacer />\n            <Badge variant=\"outline\">{translate('components.index.guide.badge')}</Badge>\n          </PanelHeader>\n          <Stack gap=\"3\" className=\"p-4\">\n            <Text size=\"sm\" tone=\"muted\">\n              Project code owns its components. Register a manifest under the{' '}\n              <Code tone=\"primary\">project.*</Code> namespace (platform primitives live under{' '}\n              <Code tone=\"muted\">base.*</Code>). The manifest declares prop schemas,\n              defaults, inspector controls, binding permissions, slots, and preview fixtures.\n            </Text>\n            <pre className=\"overflow-x-auto rounded-lg border border-border bg-muted/40 p-3 font-mono text-xs leading-relaxed text-foreground/90\">\n              {REGISTER_EXAMPLE}\n            </pre>\n            <Text size=\"xs\" tone=\"subtle\">\n              {translate('components.index.guide.fullGuide', { path: 'docs/component-authoring.md' })}\n            </Text>\n          </Stack>\n        </Panel>\n      </Stack>\n    </div>\n  )\n}\n\nfunction StatCard({\n  label,\n  value,\n  hint,\n  tone = 'default',\n}: {\n  label: string\n  value: number\n  hint?: string\n  tone?: 'default' | 'success' | 'warning' | 'muted'\n}) {\n  const valueClass =\n    tone === 'success'\n      ? 'text-success'\n      : tone === 'warning'\n        ? 'text-warning'\n        : tone === 'muted'\n          ? 'text-muted-foreground'\n          : 'text-foreground'\n  return (\n    <Card className=\"p-4\">\n      <Text size=\"xs\" tone=\"muted\" mono>\n        {label.toUpperCase()}\n      </Text>\n      <div className={`mt-1 text-2xl font-semibold tracking-tight ${valueClass}`}>{value}</div>\n      {hint ? (\n        <Text size=\"xs\" tone=\"subtle\" className=\"mt-0.5\">\n          {hint}\n        </Text>\n      ) : null}\n    </Card>\n  )\n}\n"]}
+{"version":3,"file":"components-index.js","sourceRoot":"","sources":["../../../src/components/components/components-index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BookOpen, Layers, MousePointerClick, Sparkles } from 'lucide-react'\nimport { getStudioRegistry, registryHealth } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { RegistryBrowser } from './registry-browser'\nimport { deriveComponentStats } from './taxonomy'\nimport { Badge, Card, Code, Heading, Panel, PanelHeader, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\n\n/**\n * The Components section landing view (EC-050, overhauled EC-320). Serves BOTH\n * audiences: editors get a live census of what components exist (totals, the\n * base/project split, per-category breakdown, health) and a \"pick one\" nudge;\n * devs get pointers to the real in-repo docs for registering and extending\n * components — no code sample to drift, no invented docs.\n */\nexport function ComponentsIndex({ projectId }: { projectId: string }) {\n  const studio = getStudioRegistry()\n  const manifests = studio.registry.list()\n  const stats = deriveComponentStats(manifests)\n  const health = registryHealth(studio)\n\n  return (\n    <div className=\"mx-auto w-full max-w-4xl p-4 sm:p-6\">\n      {/* Mobile-only browser (the sidebar is hidden under md). */}\n      <div className=\"mb-6 h-80 overflow-hidden rounded-lg border border-border md:hidden\">\n        <RegistryBrowser projectId={projectId} />\n      </div>\n\n      <Stack gap=\"6\">\n        <Stack gap=\"1\">\n          <Heading size=\"display\">{translate('components.index.title')}</Heading>\n          <Text tone=\"muted\">{translate('components.index.subtitle')}</Text>\n        </Stack>\n\n        <div className=\"grid gap-3 sm:grid-cols-3\">\n          <StatCard\n            label={translate('components.index.stat.total')}\n            value={stats.total}\n            hint={translate('components.index.stat.totalHint', {\n              primitives: stats.base,\n              projects: stats.project,\n            })}\n          />\n          <StatCard\n            label={translate('components.index.stat.valid')}\n            value={health.valid}\n            tone=\"success\"\n          />\n          <StatCard\n            label={translate('components.index.stat.needAttention')}\n            value={health.incompatible + health.invalid}\n            tone={health.incompatible + health.invalid > 0 ? 'warning' : 'muted'}\n            hint={translate('components.index.stat.needAttentionHint', {\n              incompatible: health.incompatible,\n              invalid: health.invalid,\n            })}\n          />\n        </div>\n\n        {/* By category — a cheap census derived from manifest `category`. */}\n        {stats.categories.length > 0 ? (\n          <Panel>\n            <PanelHeader>\n              <Layers className=\"size-4 text-muted-foreground\" />\n              <Text size=\"sm\" weight=\"semibold\">\n                {translate('components.index.byCategory')}\n              </Text>\n            </PanelHeader>\n            <Row gap=\"2\" wrap className=\"p-4\">\n              {stats.categories.map((category) => (\n                <Badge key={category.key || '__uncategorized__'} variant=\"outline\">\n                  <span className={category.key ? 'capitalize' : undefined}>\n                    {category.key || translate('components.taxonomy.uncategorized')}\n                  </span>\n                  <span className=\"font-mono text-muted-foreground\">{category.count}</span>\n                </Badge>\n              ))}\n            </Row>\n          </Panel>\n        ) : null}\n\n        <Card className=\"flex items-center gap-3 p-4\">\n          <span className=\"grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground\">\n            <MousePointerClick className=\"size-4\" />\n          </span>\n          <Text size=\"sm\" tone=\"muted\">\n            {translate('components.index.pickHint')}\n          </Text>\n        </Card>\n\n        {/* Dev guidance — pointers to the REAL in-repo docs (no code sample to drift). */}\n        <Panel>\n          <PanelHeader>\n            <BookOpen className=\"size-4 text-muted-foreground\" />\n            <Text size=\"sm\" weight=\"semibold\">\n              {translate('components.index.guide.title')}\n            </Text>\n            <Spacer />\n            <Badge variant=\"outline\">{translate('components.index.guide.badge')}</Badge>\n          </PanelHeader>\n          <Stack gap=\"3\" className=\"p-4\">\n            <Text size=\"sm\" tone=\"muted\">\n              {translate('components.index.guide.intro')}\n            </Text>\n            <Stack gap=\"2\">\n              <DocPointer\n                path=\"docs/component-authoring.md\"\n                description={translate('components.index.guide.doc.authoring')}\n              />\n              <DocPointer\n                path=\"docs/fixtures.md\"\n                description={translate('components.index.guide.doc.fixtures')}\n              />\n              <DocPointer\n                path=\"docs/extensibility.md\"\n                description={translate('components.index.guide.doc.extensibility')}\n              />\n            </Stack>\n            <Text size=\"xs\" tone=\"subtle\">\n              <Sparkles className=\"mr-1 inline size-3\" aria-hidden />\n              {translate('components.index.guide.namespaceNote')}\n            </Text>\n          </Stack>\n        </Panel>\n      </Stack>\n    </div>\n  )\n}\n\nfunction DocPointer({ path, description }: { path: string; description: string }) {\n  return (\n    <Row gap=\"3\" align=\"center\" className=\"rounded-md border border-border p-2.5\">\n      <Code tone=\"primary\" className=\"shrink-0\">\n        {path}\n      </Code>\n      <Text size=\"xs\" tone=\"muted\">\n        {description}\n      </Text>\n    </Row>\n  )\n}\n\nfunction StatCard({\n  label,\n  value,\n  hint,\n  tone = 'default',\n}: {\n  label: string\n  value: number\n  hint?: string\n  tone?: 'default' | 'success' | 'warning' | 'muted'\n}) {\n  const valueClass =\n    tone === 'success'\n      ? 'text-success'\n      : tone === 'warning'\n        ? 'text-warning'\n        : tone === 'muted'\n          ? 'text-muted-foreground'\n          : 'text-foreground'\n  return (\n    <Card className=\"p-4\">\n      <Text size=\"xs\" tone=\"muted\" mono>\n        {label.toUpperCase()}\n      </Text>\n      <div className={`mt-1 text-2xl font-semibold tracking-tight ${valueClass}`}>{value}</div>\n      {hint ? (\n        <Text size=\"xs\" tone=\"subtle\" className=\"mt-0.5\">\n          {hint}\n        </Text>\n      ) : null}\n    </Card>\n  )\n}\n"]}

package/dist/components/components/registry-browser.d.ts

@@ -1,3 +1,10 @@
+/**
+ * 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 declare function RegistryBrowser({ projectId, activeComponentId, }: {
     projectId: string;
     activeComponentId?: string;