@elytracms/studio 0.0.61 → 0.0.63

package/dist/components/builder/fixture-thumbnail.js

@@ -41,6 +41,20 @@ class ThumbnailErrorBoundary extends Component {
         return this.props.children;
     }
 }
+/**
+ * Curated preview-image tile (EC-409): renders `manifest.previewImage` in the
+ * SAME 16/10 tile frame as {@link ScaledFixtureThumbnail}, object-fit cover.
+ * The escape hatch for components whose live render needs data/context the
+ * tile can't have — fixtures stay the primary curation lever. `alt` is the
+ * component title (already-localized manifest data); the image is never a
+ * fetch the engine performs, just an `<img>` with the consumer's URL string.
+ */
+export function PreviewImageThumbnail({ src, alt, className, }) {
+    return (_jsx("div", { "data-block-thumbnail": true, "data-block-thumbnail-image": true, className: cn('relative w-full overflow-hidden rounded-md border border-border bg-background', className), style: { aspectRatio: '16 / 10' }, children: _jsx("img", { src: src, alt: alt, 
+            // The surrounding tile is the drag source; a natively draggable <img>
+            // would hijack the tile drag.
+            draggable: false, className: "pointer-events-none h-full w-full select-none object-cover" }) }));
+}
 export function ScaledFixtureThumbnail({ node, studio, designWidth = DESIGN_WIDTH, eager = false, className, }) {
     const registry = studio ?? getStudioRegistry();
     const ref = useRef(null);

package/dist/components/builder/fixture-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"fixture-thumbnail.js","sourceRoot":"","sources":["../../../src/components/builder/fixture-thumbnail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, useEffect, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport { renderNode } from '@elytracms/core/runtime-renderer'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { getStudioRegistry, previewContext } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { translate } from '@elytracms/studio/lib/i18n'\n\n/**\n * Live, scaled fixture thumbnail (EC-164). Renders a preview node through the\n * runtime renderer — the exact render path the canvas, fixture runner, and\n * export use — inside a fixed-aspect tile, scaled down with a CSS transform.\n * Never a screenshot, never interactive (pointer events are disabled), and\n * never a crash: render errors degrade to a visible fallback inside the tile.\n *\n * Off-screen thumbnails mount lazily via IntersectionObserver so a large\n * registry doesn't render its whole library up front; pass `eager` to render\n * immediately (first-fold tiles, non-DOM tests).\n */\n\n/** Width the preview is laid out at before being scaled into the tile. */\nconst DESIGN_WIDTH = 420\n/** Fallback scale used for the single frame before the tile is measured. */\nconst FALLBACK_SCALE = 0.45\n\nfunction LiveRender({ node, studio }: { node: ComponentNode; studio: StudioRegistry }) {\n  const ctx = useMemo(() => previewContext(studio), [studio])\n  // Called inside a component render so the boundary catches sync throws too.\n  return <>{renderNode(node, ctx)}</>\n}\n\nfunction ThumbnailFallback({ message }: { message: string }) {\n  return (\n    <div\n      data-block-thumbnail-fallback\n      className=\"flex h-full w-full items-start gap-1.5 p-2 text-[0.7rem] leading-snug text-amber-700 dark:text-amber-400\"\n    >\n      <AlertTriangle aria-hidden className=\"mt-px size-3 shrink-0\" />\n      <span className=\"line-clamp-3\">{message}</span>\n    </div>\n  )\n}\n\ninterface BoundaryState {\n  error: Error | null\n}\n\n/** Tile-local error boundary: one broken fixture never takes down the panel. */\nclass ThumbnailErrorBoundary extends Component<{ children: ReactNode }, BoundaryState> {\n  override state: BoundaryState = { error: null }\n\n  static getDerivedStateFromError(error: Error): BoundaryState {\n    return { error }\n  }\n\n  override render(): ReactNode {\n    if (this.state.error) {\n      return (\n        <ThumbnailFallback\n          message={translate('builder.blocksPanel.previewFailed', { error: this.state.error.message })}\n        />\n      )\n    }\n    return this.props.children\n  }\n}\n\nexport function ScaledFixtureThumbnail({\n  node,\n  studio,\n  designWidth = DESIGN_WIDTH,\n  eager = false,\n  className,\n}: {\n  /** The preview subtree to render live (deterministic ids). */\n  node: ComponentNode\n  /**\n   * Registry the preview renders against. Defaults to the active project's live\n   * registry (`getStudioRegistry()`) — the blocks panel's tiles and their\n   * thumbnails share one registry. Pass an explicit registry to render against a\n   * specific component set (deterministic previews/tests).\n   */\n  studio?: StudioRegistry\n  /** Layout width of the unscaled preview, in CSS pixels. */\n  designWidth?: number\n  /** Mount the live render immediately instead of waiting for visibility. */\n  eager?: boolean\n  className?: string\n}) {\n  const registry = studio ?? getStudioRegistry()\n  const ref = useRef<HTMLDivElement>(null)\n  const [inView, setInView] = useState(eager)\n  const [scale, setScale] = useState<number | null>(null)\n\n  // Lazy mount: render the live preview only once the tile scrolls into view.\n  // IntersectionObserver always delivers an initial report (intersecting or\n  // not) within a rendering frame — when no report arrives at all the page\n  // isn't producing frames (occluded/headless automation windows), so a\n  // safety-net timer mounts the preview rather than leaving tiles blank.\n  // Frame-producing browsers report long before the timer and keep laziness.\n  useEffect(() => {\n    if (inView) return\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') {\n      setInView(true)\n      return\n    }\n    let reported = false\n    const observer = new IntersectionObserver((entries) => {\n      reported = true\n      if (entries.some((entry) => entry.isIntersecting)) setInView(true)\n    })\n    observer.observe(el)\n    const fallback = setTimeout(() => {\n      if (!reported) setInView(true)\n    }, 400)\n    return () => {\n      observer.disconnect()\n      clearTimeout(fallback)\n    }\n  }, [inView])\n\n  // Fit-to-tile scale, kept in sync with the tile's measured width.\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const update = () => {\n      const width = el.clientWidth\n      if (width > 0) setScale(width / designWidth)\n    }\n    update()\n    if (typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(update)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [designWidth])\n\n  return (\n    <div\n      ref={ref}\n      aria-hidden\n      data-block-thumbnail\n      className={cn(\n        'relative w-full overflow-hidden rounded-md border border-border bg-background',\n        className,\n      )}\n      style={{ aspectRatio: '16 / 10' }}\n    >\n      {inView ? (\n        <ThumbnailErrorBoundary>\n          <div\n            className=\"pointer-events-none absolute left-0 top-0 origin-top-left select-none p-3\"\n            style={{ width: designWidth, transform: `scale(${scale ?? FALLBACK_SCALE})` }}\n          >\n            <LiveRender node={node} studio={registry} />\n          </div>\n        </ThumbnailErrorBoundary>\n      ) : null}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"fixture-thumbnail.js","sourceRoot":"","sources":["../../../src/components/builder/fixture-thumbnail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, useEffect, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport { renderNode } from '@elytracms/core/runtime-renderer'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { getStudioRegistry, previewContext } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { translate } from '@elytracms/studio/lib/i18n'\n\n/**\n * Live, scaled fixture thumbnail (EC-164). Renders a preview node through the\n * runtime renderer — the exact render path the canvas, fixture runner, and\n * export use — inside a fixed-aspect tile, scaled down with a CSS transform.\n * Never a screenshot, never interactive (pointer events are disabled), and\n * never a crash: render errors degrade to a visible fallback inside the tile.\n *\n * Off-screen thumbnails mount lazily via IntersectionObserver so a large\n * registry doesn't render its whole library up front; pass `eager` to render\n * immediately (first-fold tiles, non-DOM tests).\n */\n\n/** Width the preview is laid out at before being scaled into the tile. */\nconst DESIGN_WIDTH = 420\n/** Fallback scale used for the single frame before the tile is measured. */\nconst FALLBACK_SCALE = 0.45\n\nfunction LiveRender({ node, studio }: { node: ComponentNode; studio: StudioRegistry }) {\n  const ctx = useMemo(() => previewContext(studio), [studio])\n  // Called inside a component render so the boundary catches sync throws too.\n  return <>{renderNode(node, ctx)}</>\n}\n\nfunction ThumbnailFallback({ message }: { message: string }) {\n  return (\n    <div\n      data-block-thumbnail-fallback\n      className=\"flex h-full w-full items-start gap-1.5 p-2 text-[0.7rem] leading-snug text-amber-700 dark:text-amber-400\"\n    >\n      <AlertTriangle aria-hidden className=\"mt-px size-3 shrink-0\" />\n      <span className=\"line-clamp-3\">{message}</span>\n    </div>\n  )\n}\n\ninterface BoundaryState {\n  error: Error | null\n}\n\n/** Tile-local error boundary: one broken fixture never takes down the panel. */\nclass ThumbnailErrorBoundary extends Component<{ children: ReactNode }, BoundaryState> {\n  override state: BoundaryState = { error: null }\n\n  static getDerivedStateFromError(error: Error): BoundaryState {\n    return { error }\n  }\n\n  override render(): ReactNode {\n    if (this.state.error) {\n      return (\n        <ThumbnailFallback\n          message={translate('builder.blocksPanel.previewFailed', { error: this.state.error.message })}\n        />\n      )\n    }\n    return this.props.children\n  }\n}\n\n/**\n * Curated preview-image tile (EC-409): renders `manifest.previewImage` in the\n * SAME 16/10 tile frame as {@link ScaledFixtureThumbnail}, object-fit cover.\n * The escape hatch for components whose live render needs data/context the\n * tile can't have — fixtures stay the primary curation lever. `alt` is the\n * component title (already-localized manifest data); the image is never a\n * fetch the engine performs, just an `<img>` with the consumer's URL string.\n */\nexport function PreviewImageThumbnail({\n  src,\n  alt,\n  className,\n}: {\n  /** The manifest's `previewImage` URL string, passed through verbatim. */\n  src: string\n  /** The component title (localized manifest data — no new catalog string). */\n  alt: string\n  className?: string\n}) {\n  return (\n    <div\n      data-block-thumbnail\n      data-block-thumbnail-image\n      className={cn(\n        'relative w-full overflow-hidden rounded-md border border-border bg-background',\n        className,\n      )}\n      style={{ aspectRatio: '16 / 10' }}\n    >\n      {/* Deliberately NOT loading=\"lazy\": native lazy images need rendering\n          frames to trigger (occluded/headless windows never load them — the\n          same hazard the live thumbnail's safety-net timer covers), and a\n          curated preview is a small asset on a handful of tiles. */}\n      <img\n        src={src}\n        alt={alt}\n        // The surrounding tile is the drag source; a natively draggable <img>\n        // would hijack the tile drag.\n        draggable={false}\n        className=\"pointer-events-none h-full w-full select-none object-cover\"\n      />\n    </div>\n  )\n}\n\nexport function ScaledFixtureThumbnail({\n  node,\n  studio,\n  designWidth = DESIGN_WIDTH,\n  eager = false,\n  className,\n}: {\n  /** The preview subtree to render live (deterministic ids). */\n  node: ComponentNode\n  /**\n   * Registry the preview renders against. Defaults to the active project's live\n   * registry (`getStudioRegistry()`) — the blocks panel's tiles and their\n   * thumbnails share one registry. Pass an explicit registry to render against a\n   * specific component set (deterministic previews/tests).\n   */\n  studio?: StudioRegistry\n  /** Layout width of the unscaled preview, in CSS pixels. */\n  designWidth?: number\n  /** Mount the live render immediately instead of waiting for visibility. */\n  eager?: boolean\n  className?: string\n}) {\n  const registry = studio ?? getStudioRegistry()\n  const ref = useRef<HTMLDivElement>(null)\n  const [inView, setInView] = useState(eager)\n  const [scale, setScale] = useState<number | null>(null)\n\n  // Lazy mount: render the live preview only once the tile scrolls into view.\n  // IntersectionObserver always delivers an initial report (intersecting or\n  // not) within a rendering frame — when no report arrives at all the page\n  // isn't producing frames (occluded/headless automation windows), so a\n  // safety-net timer mounts the preview rather than leaving tiles blank.\n  // Frame-producing browsers report long before the timer and keep laziness.\n  useEffect(() => {\n    if (inView) return\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') {\n      setInView(true)\n      return\n    }\n    let reported = false\n    const observer = new IntersectionObserver((entries) => {\n      reported = true\n      if (entries.some((entry) => entry.isIntersecting)) setInView(true)\n    })\n    observer.observe(el)\n    const fallback = setTimeout(() => {\n      if (!reported) setInView(true)\n    }, 400)\n    return () => {\n      observer.disconnect()\n      clearTimeout(fallback)\n    }\n  }, [inView])\n\n  // Fit-to-tile scale, kept in sync with the tile's measured width.\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const update = () => {\n      const width = el.clientWidth\n      if (width > 0) setScale(width / designWidth)\n    }\n    update()\n    if (typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(update)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [designWidth])\n\n  return (\n    <div\n      ref={ref}\n      aria-hidden\n      data-block-thumbnail\n      className={cn(\n        'relative w-full overflow-hidden rounded-md border border-border bg-background',\n        className,\n      )}\n      style={{ aspectRatio: '16 / 10' }}\n    >\n      {inView ? (\n        <ThumbnailErrorBoundary>\n          <div\n            className=\"pointer-events-none absolute left-0 top-0 origin-top-left select-none p-3\"\n            style={{ width: designWidth, transform: `scale(${scale ?? FALLBACK_SCALE})` }}\n          >\n            <LiveRender node={node} studio={registry} />\n          </div>\n        </ThumbnailErrorBoundary>\n      ) : null}\n    </div>\n  )\n}\n"]}

package/dist/components/builder/property-inspector.d.ts

@@ -1 +1,22 @@
+import type { ComponentNode } from '@elytracms/core/project-graph';
+import type { ComponentManifest, PropField } from '@elytracms/core/component-registry';
 export declare function PropertyInspector(): import("react").JSX.Element;
+/**
+ * The prop rows the inspector renders for a node (EC-393). Manifest props MINUS:
+ * layout-managed props (they render in the Layout section, EC-162); `blocks` props
+ * (they are child regions shown in Slots, EC-190); and any prop hidden RIGHT NOW by
+ * its `form.hidden` — static `true`, or a predicate over the SIBLING prop values.
+ *
+ * The predicate's context is the component instance's EFFECTIVE prop values
+ * (`effectivePropValues` — static values with manifest defaults filled), the prop
+ * analogue of the document form's active-locale draft values (`isFieldHidden` there).
+ * So a conditional row shows/hides live as a sibling prop changes and unmounts
+ * exactly like a document-form field. Pure (no store) so the behaviour is testable.
+ */
+export declare function visibleInspectorProps(manifest: ComponentManifest, node: ComponentNode, layoutManaged: ReadonlySet<string>): [string, PropField][];
+declare function PropField({ node, name, spec }: {
+    node: ComponentNode;
+    name: string;
+    spec: PropField;
+}): import("react").JSX.Element;
+export {};

package/dist/components/builder/property-inspector.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { staticProp } from '@elytracms/core/project-graph';
-import { manifestSlots } from '@elytracms/core/component-registry';
+import { effectivePropValues, manifestSlots } from '@elytracms/core/component-registry';
+import { isFieldHidden } from '@elytracms/core/cms-core';
 import { getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { Badge, Code, Field, InspectorSection, PanelHeader, Row, Spacer, Stack, Text, } from '@elytracms/studio/ui';
 import { humanizeName } from '@elytracms/studio/lib/utils';
@@ -19,17 +20,32 @@ export function PropertyInspector() {
     const manifest = studio.registry.getManifest(node.componentId);
     return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs(PanelHeader, { children: [_jsx(Text, { size: "sm", weight: "semibold", children: translate('builder.inspector.title') }), _jsx(Spacer, {}), _jsx(Code, { tone: "muted", title: node.componentId, children: componentDisplayName(node.componentId, manifest) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(SettingsTab, { node: node, manifest: manifest }) })] }));
 }
+/**
+ * The prop rows the inspector renders for a node (EC-393). Manifest props MINUS:
+ * layout-managed props (they render in the Layout section, EC-162); `blocks` props
+ * (they are child regions shown in Slots, EC-190); and any prop hidden RIGHT NOW by
+ * its `form.hidden` — static `true`, or a predicate over the SIBLING prop values.
+ *
+ * The predicate's context is the component instance's EFFECTIVE prop values
+ * (`effectivePropValues` — static values with manifest defaults filled), the prop
+ * analogue of the document form's active-locale draft values (`isFieldHidden` there).
+ * So a conditional row shows/hides live as a sibling prop changes and unmounts
+ * exactly like a document-form field. Pure (no store) so the behaviour is testable.
+ */
+export function visibleInspectorProps(manifest, node, layoutManaged) {
+    const ctx = { values: effectivePropValues(manifest, node) };
+    return Object.entries(manifest.props).filter(([name, spec]) => !layoutManaged.has(name) &&
+        spec.type !== 'blocks' &&
+        !isFieldHidden({ ...spec, name }, ctx));
+}
 /** The full property surface: node identity, static props, condition, slots. */
 function SettingsTab({ node, manifest, }) {
     // Container layout props render in the dedicated Layout section (EC-162),
     // not as a second set of generic controls.
     const layoutManaged = new Set(layoutManagedPropNames(node));
-    // EC-190: `blocks` props are slots (named child regions), edited via the page
-    // tree / composition surface, not as a scalar control — so they show in the
-    // Slots section, not Props.
-    const props = manifest
-        ? Object.entries(manifest.props).filter(([name, spec]) => !layoutManaged.has(name) && spec.type !== 'blocks')
-        : [];
+    // EC-190: `blocks` props are slots; EC-393: `form.hidden` props are omitted —
+    // evaluated against the node's effective sibling prop values, live as they change.
+    const props = manifest ? visibleInspectorProps(manifest, node, layoutManaged) : [];
     const slots = manifest ? manifestSlots(manifest) : [];
     return (_jsxs(_Fragment, { children: [_jsx(LayoutSection, { node: node }), !manifest ? (_jsxs("div", { className: "p-3", children: [_jsx(Badge, { variant: "error", children: translate('builder.inspector.unknownComponent') }), _jsx(Text, { size: "xs", tone: "muted", className: "mt-2", children: translate('builder.inspector.noManifest') })] })) : (_jsx(InspectorSection, { title: translate('builder.inspector.props'), children: props.length === 0 ? (_jsx(Text, { size: "xs", tone: "subtle", children: translate('builder.inspector.noEditableProps') })) : (_jsx(Stack, { gap: "4", children: props.map(([name, spec]) => (_jsx(PropField, { node: node, name: name, spec: spec }, `${node.id}:${name}`))) })) })), slots.length > 0 ? (_jsxs(InspectorSection, { title: translate('builder.inspector.slots'), children: [_jsx(Stack, { gap: "1", children: slots.map((slot) => {
                             const count = node.slots?.[slot.name]?.length ?? 0;
@@ -43,6 +59,6 @@ function PropField({ node, name, spec }) {
     const id = `prop-${node.id}-${name}`;
     // Coalesce rapid edits to the same prop into one undo step (EC-190).
     const coalesceKey = `${node.id}:${name}`;
-    return (_jsx(Field, { label: localizedLabel(spec.form?.label, name), htmlFor: id, children: _jsx(PropValueControl, { id: id, name: name, spec: spec, value: value, onSet: (v) => builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey }), onClear: () => builder.dispatch({ type: 'removeProp', id: node.id, name }) }) }));
+    return (_jsx(Field, { label: localizedLabel(spec.form?.label, name), htmlFor: id, hint: localizedLabel(spec.form?.description) || undefined, children: _jsx(PropValueControl, { id: id, name: name, spec: spec, value: value, onSet: (v) => builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey }), onClear: () => builder.dispatch({ type: 'removeProp', id: node.id, name }) }) }));
 }
 //# sourceMappingURL=property-inspector.js.map

package/dist/components/builder/property-inspector.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-inspector.js","sourceRoot":"","sources":["../../../src/components/builder/property-inspector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, PropField } from '@elytracms/core/component-registry'\nimport { manifestSlots } from '@elytracms/core/component-registry'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport {\n  Badge,\n  Code,\n  Field,\n  InspectorSection,\n  PanelHeader,\n  Row,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { humanizeName } from '@elytracms/studio/lib/utils'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { componentDisplayName } from '@elytracms/studio/lib/persona/labels'\nimport { PropValueControl } from '../cms/prop-fields'\nimport { useBuilder } from './builder-store'\nimport { LayoutSection, layoutManagedPropNames } from './layout-inspector'\n\nexport function PropertyInspector() {\n  const builder = useBuilder()\n  const studio = getStudioRegistry()\n  const node = builder.selectedNode\n\n  if (!node) {\n    return (\n      <div className=\"grid h-full place-items-center p-6 text-center\">\n        <Text size=\"sm\" tone=\"muted\">\n          {translate('builder.inspector.emptySelection')}\n        </Text>\n      </div>\n    )\n  }\n\n  const manifest = studio.registry.getManifest(node.componentId)\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <PanelHeader>\n        <Text size=\"sm\" weight=\"semibold\">\n          {translate('builder.inspector.title')}\n        </Text>\n        <Spacer />\n        <Code tone=\"muted\" title={node.componentId}>\n          {componentDisplayName(node.componentId, manifest)}\n        </Code>\n      </PanelHeader>\n\n      <div className=\"min-h-0 flex-1 overflow-auto\">\n        <SettingsTab node={node} manifest={manifest} />\n      </div>\n    </div>\n  )\n}\n\n/** The full property surface: node identity, static props, condition, slots. */\nfunction SettingsTab({\n  node,\n  manifest,\n}: {\n  node: ComponentNode\n  manifest: ComponentManifest | undefined\n}) {\n  // Container layout props render in the dedicated Layout section (EC-162),\n  // not as a second set of generic controls.\n  const layoutManaged = new Set(layoutManagedPropNames(node))\n  // EC-190: `blocks` props are slots (named child regions), edited via the page\n  // tree / composition surface, not as a scalar control — so they show in the\n  // Slots section, not Props.\n  const props = manifest\n    ? Object.entries(manifest.props).filter(\n        ([name, spec]) => !layoutManaged.has(name) && spec.type !== 'blocks',\n      )\n    : []\n  const slots = manifest ? manifestSlots(manifest) : []\n\n  return (\n    <>\n      {/* EC-192: the editor-facing inspector no longer renders the raw node id or\n          namespaced component id (the persona promise). The component's human name\n          is in the panel header (with the manifest id in its `title`); the canvas\n          and tree provide selection. */}\n      {/* Contextual layout inspector for Stack/Grid containers (EC-162). */}\n      <LayoutSection node={node} />\n\n      {!manifest ? (\n        <div className=\"p-3\">\n          <Badge variant=\"error\">{translate('builder.inspector.unknownComponent')}</Badge>\n          <Text size=\"xs\" tone=\"muted\" className=\"mt-2\">\n            {translate('builder.inspector.noManifest')}\n          </Text>\n        </div>\n      ) : (\n        <InspectorSection title={translate('builder.inspector.props')}>\n          {props.length === 0 ? (\n            <Text size=\"xs\" tone=\"subtle\">\n              {translate('builder.inspector.noEditableProps')}\n            </Text>\n          ) : (\n            <Stack gap=\"4\">\n              {props.map(([name, spec]) => (\n                // Key by node id so per-node local control state never leaks\n                // across a selection change to a same-named prop.\n                <PropField key={`${node.id}:${name}`} node={node} name={name} spec={spec} />\n              ))}\n            </Stack>\n          )}\n        </InspectorSection>\n      )}\n\n      {slots.length > 0 ? (\n        <InspectorSection title={translate('builder.inspector.slots')}>\n          <Stack gap=\"1\">\n            {slots.map((slot) => {\n              const count = node.slots?.[slot.name]?.length ?? 0\n              const missing = slot.required && count === 0\n              return (\n                <Row key={slot.name} gap=\"2\">\n                  <Text size=\"xs\" title={slot.name}>\n                    {humanizeName(slot.name)}\n                  </Text>\n                  {slot.required ? (\n                    <Badge variant={missing ? 'error' : 'outline'}>{translate('common.required')}</Badge>\n                  ) : null}\n                  <Spacer />\n                  <Text size=\"xs\" tone=\"subtle\" mono>\n                    {count}\n                  </Text>\n                </Row>\n              )\n            })}\n          </Stack>\n          <Text size=\"xs\" tone=\"subtle\" className=\"mt-2\">\n            {translate('builder.inspector.slotsHint')}\n          </Text>\n        </InspectorSection>\n      ) : null}\n    </>\n  )\n}\n\nfunction PropField({ node, name, spec }: { node: ComponentNode; name: string; spec: PropField }) {\n  const builder = useBuilder()\n  const value = node.props?.[name]\n  const id = `prop-${node.id}-${name}`\n  // Coalesce rapid edits to the same prop into one undo step (EC-190).\n  const coalesceKey = `${node.id}:${name}`\n\n  return (\n    <Field label={localizedLabel(spec.form?.label, name)} htmlFor={id}>\n      <PropValueControl\n        id={id}\n        name={name}\n        spec={spec}\n        value={value}\n        onSet={(v) => builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey })}\n        onClear={() => builder.dispatch({ type: 'removeProp', id: node.id, name })}\n      />\n    </Field>\n  )\n}\n\n"]}
+{"version":3,"file":"property-inspector.js","sourceRoot":"","sources":["../../../src/components/builder/property-inspector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, PropField } from '@elytracms/core/component-registry'\nimport { effectivePropValues, manifestSlots } from '@elytracms/core/component-registry'\nimport { isFieldHidden } from '@elytracms/core/cms-core'\nimport type { FieldConditionContext, FieldDef } from '@elytracms/core/cms-core'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport {\n  Badge,\n  Code,\n  Field,\n  InspectorSection,\n  PanelHeader,\n  Row,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { humanizeName } from '@elytracms/studio/lib/utils'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { componentDisplayName } from '@elytracms/studio/lib/persona/labels'\nimport { PropValueControl } from '../cms/prop-fields'\nimport { useBuilder } from './builder-store'\nimport { LayoutSection, layoutManagedPropNames } from './layout-inspector'\n\nexport function PropertyInspector() {\n  const builder = useBuilder()\n  const studio = getStudioRegistry()\n  const node = builder.selectedNode\n\n  if (!node) {\n    return (\n      <div className=\"grid h-full place-items-center p-6 text-center\">\n        <Text size=\"sm\" tone=\"muted\">\n          {translate('builder.inspector.emptySelection')}\n        </Text>\n      </div>\n    )\n  }\n\n  const manifest = studio.registry.getManifest(node.componentId)\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <PanelHeader>\n        <Text size=\"sm\" weight=\"semibold\">\n          {translate('builder.inspector.title')}\n        </Text>\n        <Spacer />\n        <Code tone=\"muted\" title={node.componentId}>\n          {componentDisplayName(node.componentId, manifest)}\n        </Code>\n      </PanelHeader>\n\n      <div className=\"min-h-0 flex-1 overflow-auto\">\n        <SettingsTab node={node} manifest={manifest} />\n      </div>\n    </div>\n  )\n}\n\n/**\n * The prop rows the inspector renders for a node (EC-393). Manifest props MINUS:\n * layout-managed props (they render in the Layout section, EC-162); `blocks` props\n * (they are child regions shown in Slots, EC-190); and any prop hidden RIGHT NOW by\n * its `form.hidden` — static `true`, or a predicate over the SIBLING prop values.\n *\n * The predicate's context is the component instance's EFFECTIVE prop values\n * (`effectivePropValues` — static values with manifest defaults filled), the prop\n * analogue of the document form's active-locale draft values (`isFieldHidden` there).\n * So a conditional row shows/hides live as a sibling prop changes and unmounts\n * exactly like a document-form field. Pure (no store) so the behaviour is testable.\n */\nexport function visibleInspectorProps(\n  manifest: ComponentManifest,\n  node: ComponentNode,\n  layoutManaged: ReadonlySet<string>,\n): [string, PropField][] {\n  const ctx: FieldConditionContext = { values: effectivePropValues(manifest, node) }\n  return Object.entries(manifest.props).filter(\n    ([name, spec]) =>\n      !layoutManaged.has(name) &&\n      spec.type !== 'blocks' &&\n      !isFieldHidden({ ...spec, name } as FieldDef, ctx),\n  )\n}\n\n/** The full property surface: node identity, static props, condition, slots. */\nfunction SettingsTab({\n  node,\n  manifest,\n}: {\n  node: ComponentNode\n  manifest: ComponentManifest | undefined\n}) {\n  // Container layout props render in the dedicated Layout section (EC-162),\n  // not as a second set of generic controls.\n  const layoutManaged = new Set(layoutManagedPropNames(node))\n  // EC-190: `blocks` props are slots; EC-393: `form.hidden` props are omitted —\n  // evaluated against the node's effective sibling prop values, live as they change.\n  const props = manifest ? visibleInspectorProps(manifest, node, layoutManaged) : []\n  const slots = manifest ? manifestSlots(manifest) : []\n\n  return (\n    <>\n      {/* EC-192: the editor-facing inspector no longer renders the raw node id or\n          namespaced component id (the persona promise). The component's human name\n          is in the panel header (with the manifest id in its `title`); the canvas\n          and tree provide selection. */}\n      {/* Contextual layout inspector for Stack/Grid containers (EC-162). */}\n      <LayoutSection node={node} />\n\n      {!manifest ? (\n        <div className=\"p-3\">\n          <Badge variant=\"error\">{translate('builder.inspector.unknownComponent')}</Badge>\n          <Text size=\"xs\" tone=\"muted\" className=\"mt-2\">\n            {translate('builder.inspector.noManifest')}\n          </Text>\n        </div>\n      ) : (\n        <InspectorSection title={translate('builder.inspector.props')}>\n          {props.length === 0 ? (\n            <Text size=\"xs\" tone=\"subtle\">\n              {translate('builder.inspector.noEditableProps')}\n            </Text>\n          ) : (\n            <Stack gap=\"4\">\n              {props.map(([name, spec]) => (\n                // Key by node id so per-node local control state never leaks\n                // across a selection change to a same-named prop.\n                <PropField key={`${node.id}:${name}`} node={node} name={name} spec={spec} />\n              ))}\n            </Stack>\n          )}\n        </InspectorSection>\n      )}\n\n      {slots.length > 0 ? (\n        <InspectorSection title={translate('builder.inspector.slots')}>\n          <Stack gap=\"1\">\n            {slots.map((slot) => {\n              const count = node.slots?.[slot.name]?.length ?? 0\n              const missing = slot.required && count === 0\n              return (\n                <Row key={slot.name} gap=\"2\">\n                  <Text size=\"xs\" title={slot.name}>\n                    {humanizeName(slot.name)}\n                  </Text>\n                  {slot.required ? (\n                    <Badge variant={missing ? 'error' : 'outline'}>{translate('common.required')}</Badge>\n                  ) : null}\n                  <Spacer />\n                  <Text size=\"xs\" tone=\"subtle\" mono>\n                    {count}\n                  </Text>\n                </Row>\n              )\n            })}\n          </Stack>\n          <Text size=\"xs\" tone=\"subtle\" className=\"mt-2\">\n            {translate('builder.inspector.slotsHint')}\n          </Text>\n        </InspectorSection>\n      ) : null}\n    </>\n  )\n}\n\nfunction PropField({ node, name, spec }: { node: ComponentNode; name: string; spec: PropField }) {\n  const builder = useBuilder()\n  const value = node.props?.[name]\n  const id = `prop-${node.id}-${name}`\n  // Coalesce rapid edits to the same prop into one undo step (EC-190).\n  const coalesceKey = `${node.id}:${name}`\n\n  return (\n    // EC-393: honor `form.description` as the field hint, at parity with the document\n    // form (`detail-editor.tsx` passes the same to its `Field`).\n    <Field\n      label={localizedLabel(spec.form?.label, name)}\n      htmlFor={id}\n      hint={localizedLabel(spec.form?.description) || undefined}\n    >\n      <PropValueControl\n        id={id}\n        name={name}\n        spec={spec}\n        value={value}\n        onSet={(v) => builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey })}\n        onClear={() => builder.dispatch({ type: 'removeProp', id: node.id, name })}\n      />\n    </Field>\n  )\n}\n\n"]}

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

@@ -5,7 +5,7 @@ import { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router
 import { useCms } from '@elytracms/studio/components/cms/cms-store';
 import { focusCollectionList } from './collection-focus.js';
 import { Card, Code, Heading, Spacer, Stack, Text } from '@elytracms/studio/ui';
-import { localizedLabel } from '@elytracms/studio/lib/i18n';
+import { localizedLabel, useT } from '@elytracms/studio/lib/i18n';
 /**
  * The CMS section landing view (EC-223 Stage 6): the collection grid, shown when
  * no collection is selected. Takes `projectId` as a prop; the splat resolver
@@ -14,13 +14,16 @@ import { localizedLabel } from '@elytracms/studio/lib/i18n';
  */
 export function CmsIndex({ projectId, focusCollections, }) {
     const cms = useCms();
+    const t = useT();
     const collections = focusCollectionList(cms.collections, focusCollections);
-    return (_jsx("div", { className: "mx-auto w-full max-w-3xl p-4 sm:p-6", children: _jsxs(Stack, { gap: "6", children: [_jsxs(Stack, { gap: "1", children: [_jsx(Heading, { size: "display", children: "Content" }), _jsx(Text, { tone: "muted", children: "Schema-driven collections. Open a collection to browse its documents as a table and edit them in the detail editor." })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: collections.map((collection) => {
+    return (_jsx("div", { className: "mx-auto w-full max-w-3xl p-4 sm:p-6", children: _jsxs(Stack, { gap: "6", children: [_jsxs(Stack, { gap: "1", children: [_jsx(Heading, { size: "display", children: t('cms.index.heading') }), _jsx(Text, { tone: "muted", children: t('cms.index.description') })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: collections.map((collection) => {
                         // EC-217: a singleton reads as one fixed document — a distinct icon
                         // and a "Single document" note instead of a (always-1) row count.
                         const singleton = isSingleton(collection);
                         const Icon = singleton ? FileCog : Database;
-                        return (_jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.cmsCollection(collection.id) }, children: _jsxs(Card, { className: "flex items-center gap-3 p-4 transition-colors hover:border-primary/30", children: [_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-4" }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { weight: "semibold", className: "truncate", children: localizedLabel(collection.form?.label, collection.id) }), _jsxs(Code, { tone: "muted", className: "w-fit", children: [collection.id, " \u00B7 ", collection.fields.length, " fields"] })] }), _jsx(Spacer, {}), singleton ? (_jsx(Text, { size: "xs", tone: "muted", className: "whitespace-nowrap", children: "Single document" })) : (_jsx(Text, { size: "sm", tone: "muted", mono: true, children: cms.documentsOf(collection.id).length }))] }) }, collection.id));
+                        return (_jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.cmsCollection(collection.id) }, children: _jsxs(Card, { className: "flex items-center gap-3 p-4 transition-colors hover:border-primary/30", children: [_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-4" }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { weight: "semibold", className: "truncate", children: localizedLabel(collection.form?.label, collection.id) }), _jsxs(Code, { tone: "muted", className: "w-fit", children: [collection.id, " \u00B7", ' ', t(collection.fields.length === 1
+                                                        ? 'cms.index.fieldCount.one'
+                                                        : 'cms.index.fieldCount.other', { count: collection.fields.length })] })] }), _jsx(Spacer, {}), singleton ? (_jsx(Text, { size: "xs", tone: "muted", className: "whitespace-nowrap", children: t('cms.index.singleDocument') })) : (_jsx(Text, { size: "sm", tone: "muted", mono: true, children: cms.documentsOf(collection.id).length }))] }) }, collection.id));
                     }) })] }) }));
 }
 //# sourceMappingURL=cms-index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cms-index.js","sourceRoot":"","sources":["../../../src/components/cms/cms-index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE3D;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,SAAS,EACT,gBAAgB,GAIjB;IACC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAA;IACpB,MAAM,WAAW,GAAG,mBAAmB,CAAC,GAAG,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;IAE1E,OAAO,CACL,cAAK,SAAS,EAAC,qCAAqC,YAClD,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,KAAC,OAAO,IAAC,IAAI,EAAC,SAAS,wBAAkB,EACzC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,oIAGX,IACD,EACR,cAAK,SAAS,EAAC,2BAA2B,YACvC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;wBAC9B,oEAAoE;wBACpE,kEAAkE;wBAClE,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;wBACzC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAA;wBAC3C,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EAAE,oBAAoB,EACxB,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,YAEtE,MAAC,IAAI,IAAC,SAAS,EAAC,uEAAuE,aACrF,eAAM,SAAS,EAAC,mFAAmF,YACjG,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,GAAG,GACtB,EACP,MAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,aACnC,KAAC,IAAI,IAAC,MAAM,EAAC,UAAU,EAAC,SAAS,EAAC,UAAU,YACzC,cAAc,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC,GACjD,EACP,MAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,aACjC,UAAU,CAAC,EAAE,cAAK,UAAU,CAAC,MAAM,CAAC,MAAM,eACtC,IACD,EACR,KAAC,MAAM,KAAG,EACT,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,mBAAmB,gCAEnD,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,kBAC9B,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,MAAM,GACjC,CACR,IACI,IA1BF,UAAU,CAAC,EAAE,CA2Bb,CACR,CAAA;oBACH,CAAC,CAAC,GACE,IACA,GACJ,CACP,CAAA;AACH,CAAC","sourcesContent":["import { Database, FileCog } from 'lucide-react'\nimport { isSingleton } from '@elytracms/core/cms-core'\nimport { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router'\nimport { useCms } from '@elytracms/studio/components/cms/cms-store'\nimport { focusCollectionList } from './collection-focus'\nimport { Card, Code, Heading, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { localizedLabel } from '@elytracms/studio/lib/i18n'\n\n/**\n * The CMS section landing view (EC-223 Stage 6): the collection grid, shown when\n * no collection is selected. Takes `projectId` as a prop; the splat resolver\n * mounts it inside the CMS provider so {@link useCms} resolves. `focusCollections`\n * (EC-239) narrows the grid for a focused CMS module instance.\n */\nexport function CmsIndex({\n  projectId,\n  focusCollections,\n}: {\n  projectId: string\n  focusCollections?: readonly string[]\n}) {\n  const cms = useCms()\n  const collections = focusCollectionList(cms.collections, focusCollections)\n\n  return (\n    <div className=\"mx-auto w-full max-w-3xl p-4 sm:p-6\">\n      <Stack gap=\"6\">\n        <Stack gap=\"1\">\n          <Heading size=\"display\">Content</Heading>\n          <Text tone=\"muted\">\n            Schema-driven collections. Open a collection to browse its documents as a table and edit\n            them in the detail editor.\n          </Text>\n        </Stack>\n        <div className=\"grid gap-3 sm:grid-cols-2\">\n          {collections.map((collection) => {\n            // EC-217: a singleton reads as one fixed document — a distinct icon\n            // and a \"Single document\" note instead of a (always-1) row count.\n            const singleton = isSingleton(collection)\n            const Icon = singleton ? FileCog : Database\n            return (\n              <Link\n                key={collection.id}\n                to={STUDIO_PROJECT_ROUTE}\n                params={{ projectId, _splat: studioPath.cmsCollection(collection.id) }}\n              >\n                <Card className=\"flex items-center gap-3 p-4 transition-colors hover:border-primary/30\">\n                  <span className=\"grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground\">\n                    <Icon className=\"size-4\" />\n                  </span>\n                  <Stack gap=\"none\" className=\"min-w-0\">\n                    <Text weight=\"semibold\" className=\"truncate\">\n                      {localizedLabel(collection.form?.label, collection.id)}\n                    </Text>\n                    <Code tone=\"muted\" className=\"w-fit\">\n                      {collection.id} · {collection.fields.length} fields\n                    </Code>\n                  </Stack>\n                  <Spacer />\n                  {singleton ? (\n                    <Text size=\"xs\" tone=\"muted\" className=\"whitespace-nowrap\">\n                      Single document\n                    </Text>\n                  ) : (\n                    <Text size=\"sm\" tone=\"muted\" mono>\n                      {cms.documentsOf(collection.id).length}\n                    </Text>\n                  )}\n                </Card>\n              </Link>\n            )\n          })}\n        </div>\n      </Stack>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"cms-index.js","sourceRoot":"","sources":["../../../src/components/cms/cms-index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC/E,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAEjE;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,SAAS,EACT,gBAAgB,GAIjB;IACC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAA;IACpB,MAAM,CAAC,GAAG,IAAI,EAAE,CAAA;IAChB,MAAM,WAAW,GAAG,mBAAmB,CAAC,GAAG,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;IAE1E,OAAO,CACL,cAAK,SAAS,EAAC,qCAAqC,YAClD,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,KAAC,OAAO,IAAC,IAAI,EAAC,SAAS,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAW,EAC1D,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,YAAE,CAAC,CAAC,uBAAuB,CAAC,GAAQ,IAChD,EACR,cAAK,SAAS,EAAC,2BAA2B,YACvC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;wBAC9B,oEAAoE;wBACpE,kEAAkE;wBAClE,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;wBACzC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAA;wBAC3C,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EAAE,oBAAoB,EACxB,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,YAEtE,MAAC,IAAI,IAAC,SAAS,EAAC,uEAAuE,aACrF,eAAM,SAAS,EAAC,mFAAmF,YACjG,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,GAAG,GACtB,EACP,MAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,aACnC,KAAC,IAAI,IAAC,MAAM,EAAC,UAAU,EAAC,SAAS,EAAC,UAAU,YACzC,cAAc,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC,GACjD,EACP,MAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,aACjC,UAAU,CAAC,EAAE,aAAI,GAAG,EACpB,CAAC,CACA,UAAU,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;wDAC5B,CAAC,CAAC,0BAA0B;wDAC5B,CAAC,CAAC,4BAA4B,EAChC,EAAE,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,CACpC,IACI,IACD,EACR,KAAC,MAAM,KAAG,EACT,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,mBAAmB,YACvD,CAAC,CAAC,0BAA0B,CAAC,GACzB,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,kBAC9B,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,MAAM,GACjC,CACR,IACI,IAhCF,UAAU,CAAC,EAAE,CAiCb,CACR,CAAA;oBACH,CAAC,CAAC,GACE,IACA,GACJ,CACP,CAAA;AACH,CAAC","sourcesContent":["import { Database, FileCog } from 'lucide-react'\nimport { isSingleton } from '@elytracms/core/cms-core'\nimport { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router'\nimport { useCms } from '@elytracms/studio/components/cms/cms-store'\nimport { focusCollectionList } from './collection-focus'\nimport { Card, Code, Heading, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { localizedLabel, useT } from '@elytracms/studio/lib/i18n'\n\n/**\n * The CMS section landing view (EC-223 Stage 6): the collection grid, shown when\n * no collection is selected. Takes `projectId` as a prop; the splat resolver\n * mounts it inside the CMS provider so {@link useCms} resolves. `focusCollections`\n * (EC-239) narrows the grid for a focused CMS module instance.\n */\nexport function CmsIndex({\n  projectId,\n  focusCollections,\n}: {\n  projectId: string\n  focusCollections?: readonly string[]\n}) {\n  const cms = useCms()\n  const t = useT()\n  const collections = focusCollectionList(cms.collections, focusCollections)\n\n  return (\n    <div className=\"mx-auto w-full max-w-3xl p-4 sm:p-6\">\n      <Stack gap=\"6\">\n        <Stack gap=\"1\">\n          <Heading size=\"display\">{t('cms.index.heading')}</Heading>\n          <Text tone=\"muted\">{t('cms.index.description')}</Text>\n        </Stack>\n        <div className=\"grid gap-3 sm:grid-cols-2\">\n          {collections.map((collection) => {\n            // EC-217: a singleton reads as one fixed document — a distinct icon\n            // and a \"Single document\" note instead of a (always-1) row count.\n            const singleton = isSingleton(collection)\n            const Icon = singleton ? FileCog : Database\n            return (\n              <Link\n                key={collection.id}\n                to={STUDIO_PROJECT_ROUTE}\n                params={{ projectId, _splat: studioPath.cmsCollection(collection.id) }}\n              >\n                <Card className=\"flex items-center gap-3 p-4 transition-colors hover:border-primary/30\">\n                  <span className=\"grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground\">\n                    <Icon className=\"size-4\" />\n                  </span>\n                  <Stack gap=\"none\" className=\"min-w-0\">\n                    <Text weight=\"semibold\" className=\"truncate\">\n                      {localizedLabel(collection.form?.label, collection.id)}\n                    </Text>\n                    <Code tone=\"muted\" className=\"w-fit\">\n                      {collection.id} ·{' '}\n                      {t(\n                        collection.fields.length === 1\n                          ? 'cms.index.fieldCount.one'\n                          : 'cms.index.fieldCount.other',\n                        { count: collection.fields.length },\n                      )}\n                    </Code>\n                  </Stack>\n                  <Spacer />\n                  {singleton ? (\n                    <Text size=\"xs\" tone=\"muted\" className=\"whitespace-nowrap\">\n                      {t('cms.index.singleDocument')}\n                    </Text>\n                  ) : (\n                    <Text size=\"sm\" tone=\"muted\" mono>\n                      {cms.documentsOf(collection.id).length}\n                    </Text>\n                  )}\n                </Card>\n              </Link>\n            )\n          })}\n        </div>\n      </Stack>\n    </div>\n  )\n}\n"]}

package/dist/components/cms/detail-editor.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { CollectionViewSource } from '@elytracms/studio/lib/collection-view/collection-view-source';
 export declare function DetailEditor({ projectId, collectionId, documentId, focusPath, }: {
     projectId: string;
@@ -13,9 +14,19 @@ export declare function DetailEditor({ projectId, collectionId, documentId, focu
  * routing (the "back to list" target, the not-found link) is rail-owned via
  * `source.listPath`, so the shell never hard-codes the CMS route.
  */
-export declare function PortableDetailEditor({ source, projectId, documentId, focusPath, }: {
+export declare function PortableDetailEditor({ source, projectId, documentId, focusPath, formAppendix, }: {
     source: CollectionViewSource;
     projectId: string;
     documentId: string;
     focusPath?: string;
+    /**
+     * EC-396 — a form-column appendix seam (a direct-value node, per the customization
+     * principle — no registry): rendered INSIDE the editor's form column, below the
+     * fieldset cards, at the same `max-w-2xl` width and gap-6 rhythm. The account
+     * surface mounts its `CredentialPanel` through it so the account page is ONE editor
+     * surface (the editor owns the scroll + fills the height, so the Issues sidebar
+     * spans the full surface), never a second parallel card wrapper. Absent for the CMS
+     * and users entry points, which pass nothing.
+     */
+    formAppendix?: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/cms/detail-editor.js

@@ -70,7 +70,7 @@ export function DetailEditor({ projectId, collectionId, documentId, focusPath, }
  * routing (the "back to list" target, the not-found link) is rail-owned via
  * `source.listPath`, so the shell never hard-codes the CMS route.
  */
-export function PortableDetailEditor({ source, projectId, documentId, focusPath, }) {
+export function PortableDetailEditor({ source, projectId, documentId, focusPath, formAppendix, }) {
     const doc = source.get({ collection: source.collectionId, id: documentId });
     // EC-274: singleton opening is owned by `SingletonGate` (it resolves the lone
     // document and materializes it). The detail editor just renders the document it
@@ -78,13 +78,13 @@ export function PortableDetailEditor({ source, projectId, documentId, focusPath,
     if (!doc) {
         return (_jsx(DocumentNotFound, { projectId: projectId, listPath: source.listPath, label: localizedLabel(source.schema.form?.label, source.collectionId) }));
     }
-    return (_jsx(CollectionViewProvider, { source: source, children: _jsx(EditorBody, { projectId: projectId, collection: source.schema, doc: doc, focusPath: focusPath }, `${source.collectionId}/${documentId}`) }));
+    return (_jsx(CollectionViewProvider, { source: source, children: _jsx(EditorBody, { projectId: projectId, collection: source.schema, doc: doc, focusPath: focusPath, formAppendix: formAppendix }, `${source.collectionId}/${documentId}`) }));
 }
 /** The record-not-found state — a heading + a rail-owned "back to list" link. */
 function DocumentNotFound({ projectId, listPath, label, }) {
     return (_jsx("div", { className: "grid h-full place-items-center p-8", children: _jsxs(Stack, { gap: "3", align: "center", className: "text-center", children: [_jsx(Heading, { level: 2, size: "h2", children: translate('cms.editor.notFoundTitle') }), listPath !== undefined ? (_jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: listPath }, className: "text-sm text-primary hover:underline", children: translate('cms.editor.backToList', { label }) })) : null] }) }));
 }
-function EditorBody({ projectId, collection, doc, focusPath, }) {
+function EditorBody({ projectId, collection, doc, focusPath, formAppendix, }) {
     const source = useCollectionView();
     const navigate = useNavigate();
     // AD-19: capability flags gate whole shell regions AND their method groups, so
@@ -508,26 +508,26 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
                                                     ? 'bg-accent text-accent-foreground'
                                                     : 'text-muted-foreground hover:bg-muted'), children: [_jsxs("button", { type: "button", onClick: () => setActiveTab(COMPARE_TAB), "aria-pressed": activeTab === COMPARE_TAB, className: "inline-flex items-center gap-1", children: [_jsx(GitCompareArrows, { className: "size-3", "aria-hidden": true }), " ", translate('cms.version.compare')] }), _jsx("button", { type: "button", onClick: exitCompare, "aria-label": translate('cms.version.closeCompare'), className: "ml-0.5 rounded p-0.5 hover:bg-background/40", children: _jsx(X, { className: "size-3" }) })] })) : null] }), _jsx(Spacer, {}), canLocales ? _jsx(LocaleSwitcher, {}) : null, canPublish ? (_jsxs(Row, { gap: "px", className: "rounded-md bg-muted/60 p-0.5", children: [_jsx(PerspectiveButton, { label: translate('cms.editor.draftState'), active: perspective === 'draft', onClick: () => setPerspective('draft') }), _jsx(PerspectiveButton, { label: translate('cms.editor.publishedState'), active: perspective === 'published', accent: "info", disabled: !published, title: published ? undefined : translate('cms.editor.publishToViewPublished'), onClick: () => setPerspective('published') })] })) : null] })) : null] }), viewReadOnly ? (_jsxs(Row, { gap: "2", className: "shrink-0 border-b border-info/30 bg-info/10 px-4 py-1.5 text-info sm:px-6", "data-testid": "published-view-banner", children: [_jsx(Lock, { className: "size-3.5 shrink-0", "aria-hidden": true }), _jsx(Text, { size: "xs", className: "text-info", children: translate('cms.editor.publishedReadOnlyBanner') }), _jsx(Spacer, {}), _jsx("button", { type: "button", onClick: () => setPerspective('draft'), className: "text-xs font-medium underline-offset-2 hover:underline", children: translate('cms.editor.switchToDraft') })] })) : null, publishedPending ? (_jsx("div", { className: "grid min-h-0 flex-1 place-items-center p-8", children: _jsx(Text, { size: "sm", tone: "muted", children: publishedSnapshot.status === 'loading'
                                 ? translate('cms.editor.loadingPublishedVersion')
-                                : translate('cms.editor.noPublishedVersion') }) })) : activeTab === COMPARE_TAB && compare ? (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(VersionCompare, {}) }), _jsx(InspectorSidebar, { panes: trailingPanes, activeId: inspectorPaneId, onActiveChange: setInspectorPaneId, className: "w-[320px] shrink-0 border-l border-border" })] })) : canvasField ? (_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(CompositionFieldEditor, { field: canvasField, value: getValue(canvasField), onChange: (v) => setValue(canvasField, v), readOnly: viewReadOnly || source.isFieldReadOnly(canvasField), trailingPanes: trailingPanes }, `${canvasField.name}:${restoreNonce}:${perspective}`) })) : activeTab === REFERENCES_TAB ? (_jsx("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(ReferencesPanel, { projectId: projectId, source: { type: 'document', id: documentKey(ref) }, target: { type: 'document', id: documentKey(ref) } }) }) }) })) : (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(Stack, { gap: "6", children: groups.map((group) => {
-                                            // EC-306: a conditionally/statically hidden group section is skipped
-                                            // entirely (its fields are also exempt from validation).
-                                            if (hiddenGroups.has(group.name))
-                                                return null;
-                                            // EC-273/EC-240: drop a fieldset whose every field is hidden — whether
-                                            // content-conditionally or for this principal — so the form never
-                                            // shows an empty section header.
-                                            const visible = group.fields.filter(isFieldShown);
-                                            if (visible.length === 0)
-                                                return null;
-                                            const section = group.section;
-                                            // EC-241: a section `title` is a LocalizedString ({ en, de } or a plain
-                                            // string) — resolve it against the active UI locale before rendering.
-                                            const sectionTitle = section?.title !== undefined ? localizedLabel(section.title, group.name) : undefined;
-                                            return (_jsx(CollapsibleSection, { collapsible: section?.collapsible, defaultOpen: section?.defaultOpen, title: _jsx(Text, { size: "sm", weight: "semibold", className: sectionTitle || group.name === DEFAULT_FIELD_GROUP ? undefined : 'capitalize', children: sectionTitle ??
-                                                        (group.name === DEFAULT_FIELD_GROUP
-                                                            ? translate('cms.editor.defaultGroup')
-                                                            : group.name) }), children: _jsx("div", { className: "grid grid-cols-1 gap-4 p-4 md:grid-cols-12", children: visible.map((field) => (_jsx("div", { className: cn('col-span-1', fieldWidthColSpan(field.form?.width)), children: renderFieldRow(field) }, field.name))) }) }, group.name));
-                                        }) }) }) }), activeEmbed ? (_jsx(EmbedInspector, { payload: activeEmbed, className: "w-[320px] shrink-0 border-l border-border" })) : (_jsx(InspectorSidebar, { panes: trailingPanes, activeId: inspectorPaneId, onActiveChange: setInspectorPaneId, className: "w-[320px] shrink-0 border-l border-border" }))] })), explicitSave ? (_jsx(UnsavedChangesGuard, { when: dirty, onSave: () => {
+                                : translate('cms.editor.noPublishedVersion') }) })) : activeTab === COMPARE_TAB && compare ? (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(VersionCompare, {}) }), _jsx(InspectorSidebar, { panes: trailingPanes, activeId: inspectorPaneId, onActiveChange: setInspectorPaneId, className: "w-[320px] shrink-0 border-l border-border" })] })) : canvasField ? (_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(CompositionFieldEditor, { field: canvasField, value: getValue(canvasField), onChange: (v) => setValue(canvasField, v), readOnly: viewReadOnly || source.isFieldReadOnly(canvasField), trailingPanes: trailingPanes }, `${canvasField.name}:${restoreNonce}:${perspective}`) })) : activeTab === REFERENCES_TAB ? (_jsx("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(ReferencesPanel, { projectId: projectId, source: { type: 'document', id: documentKey(ref) }, target: { type: 'document', id: documentKey(ref) } }) }) }) })) : (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsxs(Stack, { gap: "6", children: [groups.map((group) => {
+                                                // EC-306: a conditionally/statically hidden group section is skipped
+                                                // entirely (its fields are also exempt from validation).
+                                                if (hiddenGroups.has(group.name))
+                                                    return null;
+                                                // EC-273/EC-240: drop a fieldset whose every field is hidden — whether
+                                                // content-conditionally or for this principal — so the form never
+                                                // shows an empty section header.
+                                                const visible = group.fields.filter(isFieldShown);
+                                                if (visible.length === 0)
+                                                    return null;
+                                                const section = group.section;
+                                                // EC-241: a section `title` is a LocalizedString ({ en, de } or a plain
+                                                // string) — resolve it against the active UI locale before rendering.
+                                                const sectionTitle = section?.title !== undefined ? localizedLabel(section.title, group.name) : undefined;
+                                                return (_jsx(CollapsibleSection, { collapsible: section?.collapsible, defaultOpen: section?.defaultOpen, title: _jsx(Text, { size: "sm", weight: "semibold", className: sectionTitle || group.name === DEFAULT_FIELD_GROUP ? undefined : 'capitalize', children: sectionTitle ??
+                                                            (group.name === DEFAULT_FIELD_GROUP
+                                                                ? translate('cms.editor.defaultGroup')
+                                                                : group.name) }), children: _jsx("div", { className: "grid grid-cols-1 gap-4 p-4 md:grid-cols-12", children: visible.map((field) => (_jsx("div", { className: cn('col-span-1', fieldWidthColSpan(field.form?.width)), children: renderFieldRow(field) }, field.name))) }) }, group.name));
+                                            }), formAppendix] }) }) }), activeEmbed ? (_jsx(EmbedInspector, { payload: activeEmbed, className: "w-[320px] shrink-0 border-l border-border" })) : (_jsx(InspectorSidebar, { panes: trailingPanes, activeId: inspectorPaneId, onActiveChange: setInspectorPaneId, className: "w-[320px] shrink-0 border-l border-border" }))] })), explicitSave ? (_jsx(UnsavedChangesGuard, { when: dirty, onSave: () => {
                             save();
                             return true;
                         }, description: translate('cms.editor.unsavedChangesGuard') })) : null, confirmAction !== null ? (_jsx(ReferenceConfirmDialog, { projectId: projectId, action: confirmAction, targets: confirmTargets, open: true, onOpenChange: (open) => {