@elytracms/studio 0.0.39 → 0.0.41

package/dist/components/cms/prop-fields.js

@@ -6,6 +6,7 @@ import { Input, Row, Select, Stack, Text } from '@elytracms/studio/ui';
 import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
 import { FieldControl } from './field-control';
 import { FieldDensityProvider } from './field-density';
+import { useOptionalCollectionView } from '../collection-view/collection-view-context';
 export function controlKind(spec) {
     switch (spec.type) {
         case 'boolean':
@@ -48,6 +49,13 @@ export function controlKind(spec) {
  */
 export function PropValueControl({ id, name, spec, value, onSet, onClear }) {
     const current = isStaticProp(value) ? value.value : spec.default;
+    // The `asset`/`relation`/`object` controls delegate to the CMS `FieldControl`,
+    // which reads the ambient `CollectionViewSource` (asset library, relation
+    // candidates, nested form). The component-registry preview surface has no
+    // document/collection context, so outside a provider those controls must degrade
+    // to a read-only value display instead of throwing "useCollectionView must be
+    // used within a <CollectionViewProvider>" (the Konditorei Components-view crash).
+    const hasWorkspaceContext = useOptionalCollectionView() != null;
     // EC-190: validate with the prop's field-def value validator.
     const valid = current === undefined || fieldValueValidator({ ...spec, name })(current);
     // EC-190: derive the editor control from the field `type` + optional `form.control`.
@@ -82,13 +90,29 @@ export function PropValueControl({ id, name, spec, value, onSet, onClear }) {
         // preview; `object` = the nested/repeater form; `relation` = the document picker
         // (resolves the ref to its title, instead of stringifying it to "[object Object]").
         // All edit a structured static prop value through the same shared control documents use.
-        control = (_jsx(FieldDensityProvider, { density: "compact", children: _jsx(FieldControl, { id: id, field: { ...spec, name }, value: current, onChange: (v) => (v === undefined || v === null ? onClear() : onSet(v)), readOnly: false }) }));
+        // Without a workspace context (the Components preview), degrade to a read-only
+        // value display so the pane renders instead of throwing.
+        control = hasWorkspaceContext ? (_jsx(FieldDensityProvider, { density: "compact", children: _jsx(FieldControl, { id: id, field: { ...spec, name }, value: current, onChange: (v) => (v === undefined || v === null ? onClear() : onSet(v)), readOnly: false }) })) : (_jsx(WorkspaceValueFallback, { value: current }));
     }
     else {
         control = (_jsx(Input, { id: id, value: typeof current === 'string' ? current : String(current ?? ''), onChange: (e) => onSet(e.target.value) }));
     }
     return (_jsxs(Stack, { gap: "1", children: [control, !valid ? (_jsx(Text, { size: "xs", className: "text-destructive", children: translate('builder.inspector.invalidValue') })) : null] }));
 }
+/**
+ * Read-only stand-in for an `asset`/`relation`/`object` prop when there is no
+ * ambient `CollectionViewSource` (the component-registry preview, which has no
+ * document/collection context). Shows the current value and a hint that it is
+ * editable inside a document — never the live picker, which needs a workspace.
+ */
+function WorkspaceValueFallback({ value }) {
+    const text = value === undefined || value === null
+        ? '—'
+        : typeof value === 'string'
+            ? value
+            : JSON.stringify(value);
+    return (_jsxs(Stack, { gap: "1", children: [_jsx("div", { className: "truncate rounded-md border border-input bg-muted/30 px-2.5 py-1.5 text-sm text-muted-foreground", children: text }), _jsx(Text, { size: "xs", tone: "muted", children: translate('components.preview.propNeedsDocument') })] }));
+}
 /** Number input with a local buffer: commits only finite values, never NaN; empty clears the prop. */
 function NumberControl({ id, current, onSet, onClear, }) {
     const [raw, setRaw] = useState(typeof current === 'number' ? String(current) : '');

package/dist/components/cms/prop-fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"prop-fields.js","sourceRoot":"","sources":["../../../src/components/cms/prop-fields.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react'\nimport { isStaticProp } from '@elytracms/core/project-graph'\nimport type { JsonValue, PropValue } from '@elytracms/core/project-graph'\nimport type { PropField } from '@elytracms/core/component-registry'\nimport { fieldValueValidator } from '@elytracms/core/cms-core'\nimport type { FieldDef, SelectOption } from '@elytracms/core/cms-core'\nimport { Input, Row, Select, Stack, Text } from '@elytracms/studio/ui'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { FieldControl } from './field-control'\nimport { FieldDensityProvider } from './field-density'\n\n/**\n * The EC-190 \"props-as-fields\" value control — the single renderer for a\n * manifest-declared prop field, shared by the canvas property inspector\n * (`builder/property-inspector.tsx`) and the rich-text component-embed prop editor\n * (`rich-text/embed-props.tsx`). Extracted here so both surfaces render prop fields\n * through *one* control set (asset → library picker, relation → document picker,\n * object → nested form, …) rather than two parallel form systems.\n *\n * It is deliberately store-agnostic: it reads a prop's current value and reports\n * edits through `onSet(rawValue)` / `onClear()`. The caller owns *where* the value\n * lands — the inspector dispatches a builder command; the embed editor rewrites a\n * ProseMirror node attr — and is responsible for wrapping the raw value in a\n * `staticProp` envelope.\n */\n\n/**\n * The inspector control to render for a prop field-def. The `control.kind`\n * vocabulary derives from the field `type` plus the optional `form.control`\n * presentation hint on `text` fields.\n */\nexport type ControlKind =\n  | 'text'\n  | 'textarea'\n  | 'number'\n  | 'boolean'\n  | 'select'\n  | 'json'\n  | 'color'\n  | 'richtext'\n  | 'asset'\n  | 'object'\n  | 'relation'\n\nexport function controlKind(spec: PropField): ControlKind {\n  switch (spec.type) {\n    case 'boolean':\n      return 'boolean'\n    case 'number':\n      return 'number'\n    case 'select':\n      return 'select'\n    case 'richText':\n      return 'richtext'\n    // EC-195: an `asset`-typed prop (e.g. the Image `src`) picks from the asset\n    // library — never a raw asset id typed into a text box (the EC-192 persona).\n    case 'asset':\n      return 'asset'\n    // EC-253: an `object`/repeater prop reuses the CMS repeater control below.\n    case 'object':\n      return 'object'\n    // EC-262: a `relation`-typed prop (e.g. a ProductGrid's `category`) reuses the\n    // CMS relation picker — never a text box that stringifies the ref to \"[object Object]\".\n    case 'relation':\n      return 'relation'\n    case 'text': {\n      const c = spec.form?.control\n      if (c === 'textarea') return 'textarea'\n      if (c === 'color') return 'color'\n      if (c === 'json') return 'json'\n      return 'text'\n    }\n    default:\n      return 'text'\n  }\n}\n\nexport interface PropValueControlProps {\n  /** DOM id for the control's primary input (label `htmlFor` target). */\n  id: string\n  /** The prop's field name — needed to synthesize the `FieldDef` for reused controls. */\n  name: string\n  /** The manifest prop field-def driving the control kind + validation. */\n  spec: PropField\n  /** The prop's current value envelope (or `undefined` when unset). */\n  value: PropValue | undefined\n  /** Commit a new raw value (the caller wraps it in a `staticProp`). */\n  onSet: (value: JsonValue) => void\n  /** Remove the prop (revert to the manifest default). */\n  onClear: () => void\n}\n\n/**\n * Render + edit a single manifest prop value. Store-agnostic: emits through\n * `onSet`/`onClear`. Shows a validation issue when the current value fails the\n * prop's field-def validator.\n */\nexport function PropValueControl({ id, name, spec, value, onSet, onClear }: PropValueControlProps) {\n  const current = isStaticProp(value) ? value.value : (spec.default as JsonValue | undefined)\n\n  // EC-190: validate with the prop's field-def value validator.\n  const valid = current === undefined || fieldValueValidator({ ...spec, name } as FieldDef)(current)\n  // EC-190: derive the editor control from the field `type` + optional `form.control`.\n  const kind = controlKind(spec)\n  // Select options live on the `select` field-def.\n  const options: readonly SelectOption[] = spec.type === 'select' ? spec.options : []\n\n  let control\n  if (kind === 'boolean') {\n    control = (\n      <label className=\"flex h-8 items-center gap-2 text-sm\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          checked={current === true}\n          onChange={(e) => onSet(e.target.checked)}\n          className=\"size-4 accent-primary\"\n        />\n        <Text size=\"sm\" tone=\"muted\">\n          {current === true ? translate('common.true') : translate('common.false')}\n        </Text>\n      </label>\n    )\n  } else if (kind === 'select') {\n    control = (\n      <Select\n        id={id}\n        value={String(current ?? '')}\n        onChange={(e) => {\n          // EC-190: select option values are strings (field-def `options`).\n          const opt = options.find((o) => o.value === e.target.value)\n          onSet(opt ? opt.value : e.target.value)\n        }}\n      >\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {localizedLabel(opt.label, opt.value)}\n          </option>\n        ))}\n      </Select>\n    )\n  } else if (kind === 'number') {\n    control = <NumberControl id={id} current={current} onSet={onSet} onClear={onClear} />\n  } else if (kind === 'json') {\n    control = <JsonControl id={id} current={current} onSet={onSet} />\n  } else if (kind === 'color') {\n    control = (\n      <Row gap=\"2\">\n        <input\n          id={id}\n          type=\"color\"\n          value={typeof current === 'string' && /^#[0-9a-f]{6}$/i.test(current) ? current : '#000000'}\n          onChange={(e) => onSet(e.target.value)}\n          className=\"h-8 w-10 shrink-0 rounded-md border border-input bg-background\"\n        />\n        <Input value={typeof current === 'string' ? current : ''} onChange={(e) => onSet(e.target.value)} />\n      </Row>\n    )\n  } else if (kind === 'textarea' || kind === 'richtext') {\n    control = (\n      <textarea\n        id={id}\n        rows={2}\n        value={typeof current === 'string' ? current : ''}\n        onChange={(e) => onSet(e.target.value)}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n    )\n  } else if (kind === 'asset' || kind === 'object' || kind === 'relation') {\n    // EC-195/EC-253/EC-262: reuse the CMS field control. `asset` = library picker +\n    // preview; `object` = the nested/repeater form; `relation` = the document picker\n    // (resolves the ref to its title, instead of stringifying it to \"[object Object]\").\n    // All edit a structured static prop value through the same shared control documents use.\n    control = (\n      <FieldDensityProvider density=\"compact\">\n        <FieldControl\n          id={id}\n          field={{ ...spec, name } as FieldDef}\n          value={current}\n          onChange={(v) => (v === undefined || v === null ? onClear() : onSet(v as JsonValue))}\n          readOnly={false}\n        />\n      </FieldDensityProvider>\n    )\n  } else {\n    control = (\n      <Input\n        id={id}\n        value={typeof current === 'string' ? current : String(current ?? '')}\n        onChange={(e) => onSet(e.target.value)}\n      />\n    )\n  }\n\n  return (\n    <Stack gap=\"1\">\n      {control}\n      {!valid ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {translate('builder.inspector.invalidValue')}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n\n/** Number input with a local buffer: commits only finite values, never NaN; empty clears the prop. */\nfunction NumberControl({\n  id,\n  current,\n  onSet,\n  onClear,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: number) => void\n  onClear: () => void\n}) {\n  const [raw, setRaw] = useState(typeof current === 'number' ? String(current) : '')\n  useEffect(() => {\n    setRaw(typeof current === 'number' ? String(current) : '')\n  }, [current])\n  return (\n    <Input\n      id={id}\n      type=\"number\"\n      value={raw}\n      onChange={(e) => {\n        const v = e.target.value\n        setRaw(v)\n        if (v.trim() === '') {\n          onClear()\n          return\n        }\n        const n = Number(v)\n        if (Number.isFinite(n)) onSet(n)\n      }}\n    />\n  )\n}\n\n/** JSON textarea with a local buffer: commits only when the text parses; flags parse errors. */\nfunction JsonControl({\n  id,\n  current,\n  onSet,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: JsonValue) => void\n}) {\n  const [raw, setRaw] = useState(() => JSON.stringify(current ?? null))\n  const [error, setError] = useState<string | null>(null)\n  useEffect(() => {\n    setRaw(JSON.stringify(current ?? null))\n    setError(null)\n  }, [current])\n  return (\n    <Stack gap=\"1\">\n      <textarea\n        id={id}\n        rows={3}\n        value={raw}\n        onChange={(e) => {\n          const v = e.target.value\n          setRaw(v)\n          try {\n            onSet(JSON.parse(v) as JsonValue)\n            setError(null)\n          } catch {\n            setError(translate('builder.inspector.invalidJson'))\n          }\n        }}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n      {error ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {error}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n"]}
+{"version":3,"file":"prop-fields.js","sourceRoot":"","sources":["../../../src/components/cms/prop-fields.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react'\nimport { isStaticProp } from '@elytracms/core/project-graph'\nimport type { JsonValue, PropValue } from '@elytracms/core/project-graph'\nimport type { PropField } from '@elytracms/core/component-registry'\nimport { fieldValueValidator } from '@elytracms/core/cms-core'\nimport type { FieldDef, SelectOption } from '@elytracms/core/cms-core'\nimport { Input, Row, Select, Stack, Text } from '@elytracms/studio/ui'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { FieldControl } from './field-control'\nimport { FieldDensityProvider } from './field-density'\nimport { useOptionalCollectionView } from '../collection-view/collection-view-context'\n\n/**\n * The EC-190 \"props-as-fields\" value control — the single renderer for a\n * manifest-declared prop field, shared by the canvas property inspector\n * (`builder/property-inspector.tsx`) and the rich-text component-embed prop editor\n * (`rich-text/embed-props.tsx`). Extracted here so both surfaces render prop fields\n * through *one* control set (asset → library picker, relation → document picker,\n * object → nested form, …) rather than two parallel form systems.\n *\n * It is deliberately store-agnostic: it reads a prop's current value and reports\n * edits through `onSet(rawValue)` / `onClear()`. The caller owns *where* the value\n * lands — the inspector dispatches a builder command; the embed editor rewrites a\n * ProseMirror node attr — and is responsible for wrapping the raw value in a\n * `staticProp` envelope.\n */\n\n/**\n * The inspector control to render for a prop field-def. The `control.kind`\n * vocabulary derives from the field `type` plus the optional `form.control`\n * presentation hint on `text` fields.\n */\nexport type ControlKind =\n  | 'text'\n  | 'textarea'\n  | 'number'\n  | 'boolean'\n  | 'select'\n  | 'json'\n  | 'color'\n  | 'richtext'\n  | 'asset'\n  | 'object'\n  | 'relation'\n\nexport function controlKind(spec: PropField): ControlKind {\n  switch (spec.type) {\n    case 'boolean':\n      return 'boolean'\n    case 'number':\n      return 'number'\n    case 'select':\n      return 'select'\n    case 'richText':\n      return 'richtext'\n    // EC-195: an `asset`-typed prop (e.g. the Image `src`) picks from the asset\n    // library — never a raw asset id typed into a text box (the EC-192 persona).\n    case 'asset':\n      return 'asset'\n    // EC-253: an `object`/repeater prop reuses the CMS repeater control below.\n    case 'object':\n      return 'object'\n    // EC-262: a `relation`-typed prop (e.g. a ProductGrid's `category`) reuses the\n    // CMS relation picker — never a text box that stringifies the ref to \"[object Object]\".\n    case 'relation':\n      return 'relation'\n    case 'text': {\n      const c = spec.form?.control\n      if (c === 'textarea') return 'textarea'\n      if (c === 'color') return 'color'\n      if (c === 'json') return 'json'\n      return 'text'\n    }\n    default:\n      return 'text'\n  }\n}\n\nexport interface PropValueControlProps {\n  /** DOM id for the control's primary input (label `htmlFor` target). */\n  id: string\n  /** The prop's field name — needed to synthesize the `FieldDef` for reused controls. */\n  name: string\n  /** The manifest prop field-def driving the control kind + validation. */\n  spec: PropField\n  /** The prop's current value envelope (or `undefined` when unset). */\n  value: PropValue | undefined\n  /** Commit a new raw value (the caller wraps it in a `staticProp`). */\n  onSet: (value: JsonValue) => void\n  /** Remove the prop (revert to the manifest default). */\n  onClear: () => void\n}\n\n/**\n * Render + edit a single manifest prop value. Store-agnostic: emits through\n * `onSet`/`onClear`. Shows a validation issue when the current value fails the\n * prop's field-def validator.\n */\nexport function PropValueControl({ id, name, spec, value, onSet, onClear }: PropValueControlProps) {\n  const current = isStaticProp(value) ? value.value : (spec.default as JsonValue | undefined)\n  // The `asset`/`relation`/`object` controls delegate to the CMS `FieldControl`,\n  // which reads the ambient `CollectionViewSource` (asset library, relation\n  // candidates, nested form). The component-registry preview surface has no\n  // document/collection context, so outside a provider those controls must degrade\n  // to a read-only value display instead of throwing \"useCollectionView must be\n  // used within a <CollectionViewProvider>\" (the Konditorei Components-view crash).\n  const hasWorkspaceContext = useOptionalCollectionView() != null\n\n  // EC-190: validate with the prop's field-def value validator.\n  const valid = current === undefined || fieldValueValidator({ ...spec, name } as FieldDef)(current)\n  // EC-190: derive the editor control from the field `type` + optional `form.control`.\n  const kind = controlKind(spec)\n  // Select options live on the `select` field-def.\n  const options: readonly SelectOption[] = spec.type === 'select' ? spec.options : []\n\n  let control\n  if (kind === 'boolean') {\n    control = (\n      <label className=\"flex h-8 items-center gap-2 text-sm\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          checked={current === true}\n          onChange={(e) => onSet(e.target.checked)}\n          className=\"size-4 accent-primary\"\n        />\n        <Text size=\"sm\" tone=\"muted\">\n          {current === true ? translate('common.true') : translate('common.false')}\n        </Text>\n      </label>\n    )\n  } else if (kind === 'select') {\n    control = (\n      <Select\n        id={id}\n        value={String(current ?? '')}\n        onChange={(e) => {\n          // EC-190: select option values are strings (field-def `options`).\n          const opt = options.find((o) => o.value === e.target.value)\n          onSet(opt ? opt.value : e.target.value)\n        }}\n      >\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {localizedLabel(opt.label, opt.value)}\n          </option>\n        ))}\n      </Select>\n    )\n  } else if (kind === 'number') {\n    control = <NumberControl id={id} current={current} onSet={onSet} onClear={onClear} />\n  } else if (kind === 'json') {\n    control = <JsonControl id={id} current={current} onSet={onSet} />\n  } else if (kind === 'color') {\n    control = (\n      <Row gap=\"2\">\n        <input\n          id={id}\n          type=\"color\"\n          value={typeof current === 'string' && /^#[0-9a-f]{6}$/i.test(current) ? current : '#000000'}\n          onChange={(e) => onSet(e.target.value)}\n          className=\"h-8 w-10 shrink-0 rounded-md border border-input bg-background\"\n        />\n        <Input value={typeof current === 'string' ? current : ''} onChange={(e) => onSet(e.target.value)} />\n      </Row>\n    )\n  } else if (kind === 'textarea' || kind === 'richtext') {\n    control = (\n      <textarea\n        id={id}\n        rows={2}\n        value={typeof current === 'string' ? current : ''}\n        onChange={(e) => onSet(e.target.value)}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n    )\n  } else if (kind === 'asset' || kind === 'object' || kind === 'relation') {\n    // EC-195/EC-253/EC-262: reuse the CMS field control. `asset` = library picker +\n    // preview; `object` = the nested/repeater form; `relation` = the document picker\n    // (resolves the ref to its title, instead of stringifying it to \"[object Object]\").\n    // All edit a structured static prop value through the same shared control documents use.\n    // Without a workspace context (the Components preview), degrade to a read-only\n    // value display so the pane renders instead of throwing.\n    control = hasWorkspaceContext ? (\n      <FieldDensityProvider density=\"compact\">\n        <FieldControl\n          id={id}\n          field={{ ...spec, name } as FieldDef}\n          value={current}\n          onChange={(v) => (v === undefined || v === null ? onClear() : onSet(v as JsonValue))}\n          readOnly={false}\n        />\n      </FieldDensityProvider>\n    ) : (\n      <WorkspaceValueFallback value={current} />\n    )\n  } else {\n    control = (\n      <Input\n        id={id}\n        value={typeof current === 'string' ? current : String(current ?? '')}\n        onChange={(e) => onSet(e.target.value)}\n      />\n    )\n  }\n\n  return (\n    <Stack gap=\"1\">\n      {control}\n      {!valid ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {translate('builder.inspector.invalidValue')}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n\n/**\n * Read-only stand-in for an `asset`/`relation`/`object` prop when there is no\n * ambient `CollectionViewSource` (the component-registry preview, which has no\n * document/collection context). Shows the current value and a hint that it is\n * editable inside a document — never the live picker, which needs a workspace.\n */\nfunction WorkspaceValueFallback({ value }: { value: JsonValue | undefined }) {\n  const text =\n    value === undefined || value === null\n      ? '—'\n      : typeof value === 'string'\n        ? value\n        : JSON.stringify(value)\n  return (\n    <Stack gap=\"1\">\n      <div className=\"truncate rounded-md border border-input bg-muted/30 px-2.5 py-1.5 text-sm text-muted-foreground\">\n        {text}\n      </div>\n      <Text size=\"xs\" tone=\"muted\">\n        {translate('components.preview.propNeedsDocument')}\n      </Text>\n    </Stack>\n  )\n}\n\n/** Number input with a local buffer: commits only finite values, never NaN; empty clears the prop. */\nfunction NumberControl({\n  id,\n  current,\n  onSet,\n  onClear,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: number) => void\n  onClear: () => void\n}) {\n  const [raw, setRaw] = useState(typeof current === 'number' ? String(current) : '')\n  useEffect(() => {\n    setRaw(typeof current === 'number' ? String(current) : '')\n  }, [current])\n  return (\n    <Input\n      id={id}\n      type=\"number\"\n      value={raw}\n      onChange={(e) => {\n        const v = e.target.value\n        setRaw(v)\n        if (v.trim() === '') {\n          onClear()\n          return\n        }\n        const n = Number(v)\n        if (Number.isFinite(n)) onSet(n)\n      }}\n    />\n  )\n}\n\n/** JSON textarea with a local buffer: commits only when the text parses; flags parse errors. */\nfunction JsonControl({\n  id,\n  current,\n  onSet,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: JsonValue) => void\n}) {\n  const [raw, setRaw] = useState(() => JSON.stringify(current ?? null))\n  const [error, setError] = useState<string | null>(null)\n  useEffect(() => {\n    setRaw(JSON.stringify(current ?? null))\n    setError(null)\n  }, [current])\n  return (\n    <Stack gap=\"1\">\n      <textarea\n        id={id}\n        rows={3}\n        value={raw}\n        onChange={(e) => {\n          const v = e.target.value\n          setRaw(v)\n          try {\n            onSet(JSON.parse(v) as JsonValue)\n            setError(null)\n          } catch {\n            setError(translate('builder.inspector.invalidJson'))\n          }\n        }}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n      {error ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {error}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n"]}

package/dist/components/cms/rich-text/component-embed.d.ts

@@ -10,8 +10,13 @@ import { Node } from '@tiptap/react';
  *
  * The editor shows a placeholder card naming the embedded component (a live in-editor
  * preview would need the runtime renderer + resolvers; deferred). Insertion is wired
- * from the toolbar / slash menu; the card's Edit affordance opens the EC-314 phase-4
- * prop editor ({@link EmbedPropsDialog}), which rewrites `attrs.node` through a proper
+ * from the toolbar / slash menu.
+ *
+ * Prop editing (0.0.41): when a host provides an {@link useOptionalEmbedInspector embed
+ * inspector} — the CMS detail editor — selecting the card swaps that host's sidebar to
+ * the embed's prop form and the Edit affordance simply selects the node. Where no host
+ * exists (the builder property inspector, the asset detail pane) it falls back to the
+ * {@link EmbedPropsDialog} modal. Either path rewrites `attrs.node` through a proper
  * ProseMirror transaction (undoable). `readOnly` renders an inert card (no edit/delete).
  */
 export declare const ComponentEmbed: Node<any, any>;

package/dist/components/cms/rich-text/component-embed.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Node, NodeViewWrapper, ReactNodeViewRenderer, mergeAttributes } from '@tiptap/react';
 import { Blocks, Pencil, Trash2 } from 'lucide-react';
 import { COMPONENT_EMBED_NODE_TYPE, embeddedComponentNode } from '@elytracms/core/rich-text';
@@ -9,6 +9,7 @@ import { translate } from '@elytracms/studio/lib/i18n';
 import { componentDisplayName } from '@elytracms/studio/lib/persona/labels';
 import { cn } from '@elytracms/studio/lib/utils';
 import { EmbedPropsDialog, embedPropsSummary } from './embed-props';
+import { useOptionalEmbedInspector } from './embed-inspector-context';
 /**
  * The rich-text component-embed node (EC-189/EC-314): a block atom holding a single
  * composition value at `attrs.node`. It is the third place constrained composition
@@ -20,8 +21,13 @@ import { EmbedPropsDialog, embedPropsSummary } from './embed-props';
  *
  * The editor shows a placeholder card naming the embedded component (a live in-editor
  * preview would need the runtime renderer + resolvers; deferred). Insertion is wired
- * from the toolbar / slash menu; the card's Edit affordance opens the EC-314 phase-4
- * prop editor ({@link EmbedPropsDialog}), which rewrites `attrs.node` through a proper
+ * from the toolbar / slash menu.
+ *
+ * Prop editing (0.0.41): when a host provides an {@link useOptionalEmbedInspector embed
+ * inspector} — the CMS detail editor — selecting the card swaps that host's sidebar to
+ * the embed's prop form and the Edit affordance simply selects the node. Where no host
+ * exists (the builder property inspector, the asset detail pane) it falls back to the
+ * {@link EmbedPropsDialog} modal. Either path rewrites `attrs.node` through a proper
  * ProseMirror transaction (undoable). `readOnly` renders an inert card (no edit/delete).
  */
 export const ComponentEmbed = Node.create({
@@ -60,10 +66,13 @@ function readEmbedded(attrNode) {
 export function EmbedCard({ displayName, summary, onEdit, onDelete, }) {
     return (_jsxs("div", { className: "flex items-center gap-2.5 rounded-md border border-border bg-muted/40 px-3 py-2.5 text-sm", children: [_jsx(Blocks, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate font-medium text-foreground", children: displayName }), summary ? _jsx("span", { className: "truncate text-xs text-muted-foreground", children: summary }) : null] }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: translate('richText.embed.badge') }), onEdit ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", contentEditable: false, "aria-label": translate('richText.embed.editProps'), onClick: onEdit, children: _jsx(Pencil, { className: "size-3.5" }) })) : null, onDelete ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", contentEditable: false, "aria-label": translate('common.remove'), onClick: onDelete, children: _jsx(Trash2, { className: "size-3.5" }) })) : null] }));
 }
-function ComponentEmbedView({ node, updateAttributes, deleteNode, selected, editor }) {
+function ComponentEmbedView({ node, updateAttributes, deleteNode, selected, editor, getPos, }) {
     const embedded = readEmbedded(node.attrs.node);
     const manifest = embedded ? getStudioRegistry().registry.getManifest(embedded.componentId) : undefined;
     const editable = editor.isEditable;
+    // The ambient sidebar sink, if a host provides one (the CMS detail editor). Its
+    // presence decides sidebar vs. modal — see the node's doc comment.
+    const inspector = useOptionalEmbedInspector();
     const [open, setOpen] = useState(false);
     const displayName = embedded
         ? componentDisplayName(embedded.componentId, manifest)
@@ -71,6 +80,52 @@ function ComponentEmbedView({ node, updateAttributes, deleteNode, selected, edit
     const summary = embedded ? embedPropsSummary(embedded, manifest) : undefined;
     // Editing needs a manifest to know which prop fields to render.
     const canEdit = editable && embedded != null && manifest != null;
-    return (_jsxs(NodeViewWrapper, { "data-drag-handle": true, className: cn('my-2', selected && 'rounded-md ring-2 ring-ring/50'), children: [_jsx(EmbedCard, { displayName: displayName, summary: summary, onEdit: canEdit ? () => setOpen(true) : undefined, onDelete: editable ? () => deleteNode() : undefined }), canEdit && embedded && manifest ? (_jsx(EmbedPropsDialog, { open: open, onOpenChange: setOpen, node: embedded, manifest: manifest, onSave: (next) => updateAttributes({ node: next }) })) : null] }));
+    // With a host sidebar, props are edited there (selection-driven); the modal is only
+    // the fallback for surfaces that have no sidebar host.
+    const useSidebar = canEdit && inspector != null;
+    // Keep the write-back / position closures fresh without churning the effect: their
+    // identities change every render, but the trigger is the primitive selection state.
+    const latest = useRef({ embedded, manifest, updateAttributes, getPos, editor, editable });
+    latest.current = { embedded, manifest, updateAttributes, getPos, editor, editable };
+    // A stable signal for "the embedded node meaningfully changed" — its serialization.
+    // Re-pushing on a prop edit keeps the sidebar showing the just-committed value.
+    const embeddedKey = embedded ? JSON.stringify(embedded) : '';
+    // While this embed is the selected node, mirror it into the host sidebar; clear on
+    // deselect / unmount (caret moves off, node deleted, field unmounts). Keyed on the
+    // node id so a fast A→B reselect never lets A's cleanup wipe B (selection race).
+    useEffect(() => {
+        if (!useSidebar || !selected || !inspector)
+            return;
+        const cur = latest.current;
+        if (!cur.embedded || !cur.manifest)
+            return;
+        const nodeId = cur.embedded.id;
+        inspector.setActiveEmbed({
+            nodeId,
+            node: cur.embedded,
+            manifest: cur.manifest,
+            readOnly: !cur.editable,
+            onChange: (next) => latest.current.updateAttributes({ node: next }),
+            onDeselect: () => {
+                const pos = latest.current.getPos();
+                // A TextSelection off the node drops the NodeSelection → deselects → clears.
+                if (pos != null)
+                    latest.current.editor.commands.setTextSelection(pos);
+            },
+        });
+        return () => inspector.clearActiveEmbed(nodeId);
+    }, [useSidebar, selected, inspector, embeddedKey]);
+    // Edit affordance: with a sidebar host, just select the node (which opens the
+    // inspector via the effect above); otherwise open the modal fallback.
+    const onEdit = !canEdit
+        ? undefined
+        : useSidebar
+            ? () => {
+                const pos = getPos();
+                if (pos != null)
+                    editor.commands.setNodeSelection(pos);
+            }
+            : () => setOpen(true);
+    return (_jsxs(NodeViewWrapper, { "data-drag-handle": true, className: cn('my-2', selected && 'rounded-md ring-2 ring-ring/50'), children: [_jsx(EmbedCard, { displayName: displayName, summary: summary, onEdit: onEdit, onDelete: editable ? () => deleteNode() : undefined }), !useSidebar && canEdit && embedded && manifest ? (_jsx(EmbedPropsDialog, { open: open, onOpenChange: setOpen, node: embedded, manifest: manifest, onSave: (next) => updateAttributes({ node: next }) })) : null] }));
 }
 //# sourceMappingURL=component-embed.js.map

package/dist/components/cms/rich-text/component-embed.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-embed.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/component-embed.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react'\nimport { Node, NodeViewWrapper, ReactNodeViewRenderer, mergeAttributes } from '@tiptap/react'\nimport type { ReactNodeViewProps } from '@tiptap/react'\nimport { Blocks, Pencil, Trash2 } from 'lucide-react'\nimport { COMPONENT_EMBED_NODE_TYPE, embeddedComponentNode } from '@elytracms/core/rich-text'\nimport type { ComponentNode, JsonValue } from '@elytracms/core/project-graph'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { Button } from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { componentDisplayName } from '@elytracms/studio/lib/persona/labels'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { EmbedPropsDialog, embedPropsSummary } from './embed-props'\n\n/**\n * The rich-text component-embed node (EC-189/EC-314): a block atom holding a single\n * composition value at `attrs.node`. It is the third place constrained composition\n * lives (after the page collection and `blocks` fields) — a registry component\n * embedded in prose. The node carries no ProseMirror content (the embedded component\n * owns its own children through composition slots); `attrs.node` round-trips verbatim\n * so the extractor still indexes the embedded component's references, and the delivery\n * renderer renders it exactly as a `blocks` value.\n *\n * The editor shows a placeholder card naming the embedded component (a live in-editor\n * preview would need the runtime renderer + resolvers; deferred). Insertion is wired\n * from the toolbar / slash menu; the card's Edit affordance opens the EC-314 phase-4\n * prop editor ({@link EmbedPropsDialog}), which rewrites `attrs.node` through a proper\n * ProseMirror transaction (undoable). `readOnly` renders an inert card (no edit/delete).\n */\nexport const ComponentEmbed = Node.create({\n  name: COMPONENT_EMBED_NODE_TYPE,\n  group: 'block',\n  atom: true,\n  selectable: true,\n  draggable: true,\n\n  addAttributes() {\n    // `node` holds the embedded ComponentNode JSON; storage/JSON only, not markup.\n    return { node: { default: null, rendered: false } }\n  },\n\n  parseHTML() {\n    return [{ tag: `div[data-${COMPONENT_EMBED_NODE_TYPE}]` }]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['div', mergeAttributes(HTMLAttributes, { [`data-${COMPONENT_EMBED_NODE_TYPE}`]: '' })]\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(ComponentEmbedView)\n  },\n})\n\n/** Read the embedded ComponentNode from a ProseMirror node's attrs, if valid. */\nfunction readEmbedded(attrNode: unknown): ComponentNode | undefined {\n  return embeddedComponentNode({\n    type: COMPONENT_EMBED_NODE_TYPE,\n    attrs: { node: attrNode as JsonValue },\n  })\n}\n\n/**\n * The presentational embed card — component identity, an optional one-line prop\n * summary, and (only when a handler is supplied) edit / delete affordances. It is\n * kept free of TipTap and registry context so it renders + asserts standalone: an\n * inert (read-only) card is simply the card with no `onEdit`/`onDelete`.\n */\nexport function EmbedCard({\n  displayName,\n  summary,\n  onEdit,\n  onDelete,\n}: {\n  displayName: string\n  summary?: string | undefined\n  onEdit?: (() => void) | undefined\n  onDelete?: (() => void) | undefined\n}) {\n  return (\n    <div className=\"flex items-center gap-2.5 rounded-md border border-border bg-muted/40 px-3 py-2.5 text-sm\">\n      <Blocks className=\"size-4 shrink-0 text-muted-foreground\" />\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span className=\"truncate font-medium text-foreground\">{displayName}</span>\n        {summary ? <span className=\"truncate text-xs text-muted-foreground\">{summary}</span> : null}\n      </span>\n      <span className=\"shrink-0 text-xs text-muted-foreground\">\n        {translate('richText.embed.badge')}\n      </span>\n      {onEdit ? (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          contentEditable={false}\n          aria-label={translate('richText.embed.editProps')}\n          onClick={onEdit}\n        >\n          <Pencil className=\"size-3.5\" />\n        </Button>\n      ) : null}\n      {onDelete ? (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          contentEditable={false}\n          aria-label={translate('common.remove')}\n          onClick={onDelete}\n        >\n          <Trash2 className=\"size-3.5\" />\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n\nfunction ComponentEmbedView({ node, updateAttributes, deleteNode, selected, editor }: ReactNodeViewProps) {\n  const embedded = readEmbedded(node.attrs.node)\n  const manifest = embedded ? getStudioRegistry().registry.getManifest(embedded.componentId) : undefined\n  const editable = editor.isEditable\n  const [open, setOpen] = useState(false)\n\n  const displayName = embedded\n    ? componentDisplayName(embedded.componentId, manifest)\n    : translate('richText.embed.unknown')\n  const summary = embedded ? embedPropsSummary(embedded, manifest) : undefined\n  // Editing needs a manifest to know which prop fields to render.\n  const canEdit = editable && embedded != null && manifest != null\n\n  return (\n    <NodeViewWrapper data-drag-handle className={cn('my-2', selected && 'rounded-md ring-2 ring-ring/50')}>\n      <EmbedCard\n        displayName={displayName}\n        summary={summary}\n        onEdit={canEdit ? () => setOpen(true) : undefined}\n        onDelete={editable ? () => deleteNode() : undefined}\n      />\n      {canEdit && embedded && manifest ? (\n        <EmbedPropsDialog\n          open={open}\n          onOpenChange={setOpen}\n          node={embedded}\n          manifest={manifest}\n          onSave={(next) => updateAttributes({ node: next })}\n        />\n      ) : null}\n    </NodeViewWrapper>\n  )\n}\n"]}
+{"version":3,"file":"component-embed.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/component-embed.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Node, NodeViewWrapper, ReactNodeViewRenderer, mergeAttributes } from '@tiptap/react'\nimport type { ReactNodeViewProps } from '@tiptap/react'\nimport { Blocks, Pencil, Trash2 } from 'lucide-react'\nimport { COMPONENT_EMBED_NODE_TYPE, embeddedComponentNode } from '@elytracms/core/rich-text'\nimport type { ComponentNode, JsonValue } from '@elytracms/core/project-graph'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { Button } from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { componentDisplayName } from '@elytracms/studio/lib/persona/labels'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { EmbedPropsDialog, embedPropsSummary } from './embed-props'\nimport { useOptionalEmbedInspector } from './embed-inspector-context'\n\n/**\n * The rich-text component-embed node (EC-189/EC-314): a block atom holding a single\n * composition value at `attrs.node`. It is the third place constrained composition\n * lives (after the page collection and `blocks` fields) — a registry component\n * embedded in prose. The node carries no ProseMirror content (the embedded component\n * owns its own children through composition slots); `attrs.node` round-trips verbatim\n * so the extractor still indexes the embedded component's references, and the delivery\n * renderer renders it exactly as a `blocks` value.\n *\n * The editor shows a placeholder card naming the embedded component (a live in-editor\n * preview would need the runtime renderer + resolvers; deferred). Insertion is wired\n * from the toolbar / slash menu.\n *\n * Prop editing (0.0.41): when a host provides an {@link useOptionalEmbedInspector embed\n * inspector} — the CMS detail editor — selecting the card swaps that host's sidebar to\n * the embed's prop form and the Edit affordance simply selects the node. Where no host\n * exists (the builder property inspector, the asset detail pane) it falls back to the\n * {@link EmbedPropsDialog} modal. Either path rewrites `attrs.node` through a proper\n * ProseMirror transaction (undoable). `readOnly` renders an inert card (no edit/delete).\n */\nexport const ComponentEmbed = Node.create({\n  name: COMPONENT_EMBED_NODE_TYPE,\n  group: 'block',\n  atom: true,\n  selectable: true,\n  draggable: true,\n\n  addAttributes() {\n    // `node` holds the embedded ComponentNode JSON; storage/JSON only, not markup.\n    return { node: { default: null, rendered: false } }\n  },\n\n  parseHTML() {\n    return [{ tag: `div[data-${COMPONENT_EMBED_NODE_TYPE}]` }]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['div', mergeAttributes(HTMLAttributes, { [`data-${COMPONENT_EMBED_NODE_TYPE}`]: '' })]\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(ComponentEmbedView)\n  },\n})\n\n/** Read the embedded ComponentNode from a ProseMirror node's attrs, if valid. */\nfunction readEmbedded(attrNode: unknown): ComponentNode | undefined {\n  return embeddedComponentNode({\n    type: COMPONENT_EMBED_NODE_TYPE,\n    attrs: { node: attrNode as JsonValue },\n  })\n}\n\n/**\n * The presentational embed card — component identity, an optional one-line prop\n * summary, and (only when a handler is supplied) edit / delete affordances. It is\n * kept free of TipTap and registry context so it renders + asserts standalone: an\n * inert (read-only) card is simply the card with no `onEdit`/`onDelete`.\n */\nexport function EmbedCard({\n  displayName,\n  summary,\n  onEdit,\n  onDelete,\n}: {\n  displayName: string\n  summary?: string | undefined\n  onEdit?: (() => void) | undefined\n  onDelete?: (() => void) | undefined\n}) {\n  return (\n    <div className=\"flex items-center gap-2.5 rounded-md border border-border bg-muted/40 px-3 py-2.5 text-sm\">\n      <Blocks className=\"size-4 shrink-0 text-muted-foreground\" />\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span className=\"truncate font-medium text-foreground\">{displayName}</span>\n        {summary ? <span className=\"truncate text-xs text-muted-foreground\">{summary}</span> : null}\n      </span>\n      <span className=\"shrink-0 text-xs text-muted-foreground\">\n        {translate('richText.embed.badge')}\n      </span>\n      {onEdit ? (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          contentEditable={false}\n          aria-label={translate('richText.embed.editProps')}\n          onClick={onEdit}\n        >\n          <Pencil className=\"size-3.5\" />\n        </Button>\n      ) : null}\n      {onDelete ? (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          contentEditable={false}\n          aria-label={translate('common.remove')}\n          onClick={onDelete}\n        >\n          <Trash2 className=\"size-3.5\" />\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n\nfunction ComponentEmbedView({\n  node,\n  updateAttributes,\n  deleteNode,\n  selected,\n  editor,\n  getPos,\n}: ReactNodeViewProps) {\n  const embedded = readEmbedded(node.attrs.node)\n  const manifest = embedded ? getStudioRegistry().registry.getManifest(embedded.componentId) : undefined\n  const editable = editor.isEditable\n  // The ambient sidebar sink, if a host provides one (the CMS detail editor). Its\n  // presence decides sidebar vs. modal — see the node's doc comment.\n  const inspector = useOptionalEmbedInspector()\n  const [open, setOpen] = useState(false)\n\n  const displayName = embedded\n    ? componentDisplayName(embedded.componentId, manifest)\n    : translate('richText.embed.unknown')\n  const summary = embedded ? embedPropsSummary(embedded, manifest) : undefined\n  // Editing needs a manifest to know which prop fields to render.\n  const canEdit = editable && embedded != null && manifest != null\n  // With a host sidebar, props are edited there (selection-driven); the modal is only\n  // the fallback for surfaces that have no sidebar host.\n  const useSidebar = canEdit && inspector != null\n\n  // Keep the write-back / position closures fresh without churning the effect: their\n  // identities change every render, but the trigger is the primitive selection state.\n  const latest = useRef({ embedded, manifest, updateAttributes, getPos, editor, editable })\n  latest.current = { embedded, manifest, updateAttributes, getPos, editor, editable }\n\n  // A stable signal for \"the embedded node meaningfully changed\" — its serialization.\n  // Re-pushing on a prop edit keeps the sidebar showing the just-committed value.\n  const embeddedKey = embedded ? JSON.stringify(embedded) : ''\n\n  // While this embed is the selected node, mirror it into the host sidebar; clear on\n  // deselect / unmount (caret moves off, node deleted, field unmounts). Keyed on the\n  // node id so a fast A→B reselect never lets A's cleanup wipe B (selection race).\n  useEffect(() => {\n    if (!useSidebar || !selected || !inspector) return\n    const cur = latest.current\n    if (!cur.embedded || !cur.manifest) return\n    const nodeId = cur.embedded.id\n    inspector.setActiveEmbed({\n      nodeId,\n      node: cur.embedded,\n      manifest: cur.manifest,\n      readOnly: !cur.editable,\n      onChange: (next) => latest.current.updateAttributes({ node: next }),\n      onDeselect: () => {\n        const pos = latest.current.getPos()\n        // A TextSelection off the node drops the NodeSelection → deselects → clears.\n        if (pos != null) latest.current.editor.commands.setTextSelection(pos)\n      },\n    })\n    return () => inspector.clearActiveEmbed(nodeId)\n  }, [useSidebar, selected, inspector, embeddedKey])\n\n  // Edit affordance: with a sidebar host, just select the node (which opens the\n  // inspector via the effect above); otherwise open the modal fallback.\n  const onEdit = !canEdit\n    ? undefined\n    : useSidebar\n      ? () => {\n          const pos = getPos()\n          if (pos != null) editor.commands.setNodeSelection(pos)\n        }\n      : () => setOpen(true)\n\n  return (\n    <NodeViewWrapper data-drag-handle className={cn('my-2', selected && 'rounded-md ring-2 ring-ring/50')}>\n      <EmbedCard\n        displayName={displayName}\n        summary={summary}\n        onEdit={onEdit}\n        onDelete={editable ? () => deleteNode() : undefined}\n      />\n      {!useSidebar && canEdit && embedded && manifest ? (\n        <EmbedPropsDialog\n          open={open}\n          onOpenChange={setOpen}\n          node={embedded}\n          manifest={manifest}\n          onSave={(next) => updateAttributes({ node: next })}\n        />\n      ) : null}\n    </NodeViewWrapper>\n  )\n}\n"]}

package/dist/components/cms/rich-text/editor.js

@@ -8,8 +8,9 @@ import { useOptionalAssets } from '../../assets/assets-store';
 import { AssetPicker } from '../asset-picker';
 import { buildRichTextExtensions } from './extensions';
 import { isEffectivelyEmpty, isEquivalentToStored, normalizeEditorDoc, richTextValueFromDoc, toEditorDoc, } from './value';
-import { insertAssetImage, insertComponentEmbed } from './insert';
-import { EmbedPicker, hasEmbeddable } from './embed-picker';
+import { insertAssetImage, insertComponentEmbed, listEmbeddable } from './insert';
+import { EmbedPicker } from './embed-picker';
+import { getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { RichTextToolbar } from './toolbar';
 /**
  * The CMS rich-text field editor (EC-314) — a real TipTap editor over the shared
@@ -35,7 +36,10 @@ export function RichTextEditor({ value, onChange, readOnly = false, id, allow })
     const [imageOpen, setImageOpen] = useState(false);
     const [embedOpen, setEmbedOpen] = useState(false);
     const canImage = assets != null;
-    const canEmbed = useMemo(() => hasEmbeddable(allow), [allow]);
+    // The `allow`-gated components this field may embed — drives both the toolbar
+    // picker and the slash menu's direct per-component items (0.0.41).
+    const embeddable = useMemo(() => listEmbeddable(allow, getStudioRegistry().registry.list()), [allow]);
+    const canEmbed = embeddable.length > 0;
     // Every linkable document across the workspace (excluding the asset rail — you link
     // to content, not to raw files). Recomputed only when the source changes.
     const linkTargets = useMemo(() => {
@@ -65,7 +69,22 @@ export function RichTextEditor({ value, onChange, readOnly = false, id, allow })
     const openImage = canImage ? () => setImageOpen(true) : undefined;
     const openEmbed = canEmbed ? () => setEmbedOpen(true) : undefined;
     const editor = useEditor({
-        extensions: buildRichTextExtensions({ slash: { onImage: openImage, onEmbed: openEmbed } }),
+        extensions: buildRichTextExtensions({
+            slash: {
+                onImage: openImage,
+                // Direct per-component slash items (0.0.41) — insert with manifest defaults
+                // and select, so the embed inspector opens onto the new node's props.
+                embed: canEmbed
+                    ? {
+                        components: embeddable,
+                        insert: (ed, range, manifest) => {
+                            ed.chain().focus().deleteRange(range).run();
+                            insertComponentEmbed(ed, manifest, { select: true });
+                        },
+                    }
+                    : undefined,
+            },
+        }),
         content: toEditorDoc(value),
         editable: !readOnly,
         editorProps: {
@@ -106,6 +125,6 @@ export function RichTextEditor({ value, onChange, readOnly = false, id, allow })
                     setImageOpen(false);
                     if (assetId)
                         insertAssetImage(editor, assetId, assets);
-                } })) : null, canEmbed ? (_jsx(EmbedPicker, { open: embedOpen, onOpenChange: setEmbedOpen, allow: allow, onSelect: (manifest) => insertComponentEmbed(editor, manifest) })) : null] }));
+                } })) : null, canEmbed ? (_jsx(EmbedPicker, { open: embedOpen, onOpenChange: setEmbedOpen, allow: allow, onSelect: (manifest) => insertComponentEmbed(editor, manifest, { select: true }) })) : null] }));
 }
 //# sourceMappingURL=editor.js.map

package/dist/components/cms/rich-text/editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport type { RichTextDoc } from '@elytracms/core/rich-text'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { localizedLabel } from '@elytracms/studio/lib/i18n'\nimport { useOptionalCollectionView } from '../../collection-view/collection-view-context'\nimport { useOptionalAssets } from '../../assets/assets-store'\nimport { AssetPicker } from '../asset-picker'\nimport { buildRichTextExtensions } from './extensions'\nimport {\n  isEffectivelyEmpty,\n  isEquivalentToStored,\n  normalizeEditorDoc,\n  richTextValueFromDoc,\n  toEditorDoc,\n} from './value'\nimport { insertAssetImage, insertComponentEmbed } from './insert'\nimport { EmbedPicker, hasEmbeddable } from './embed-picker'\nimport { RichTextToolbar } from './toolbar'\nimport type { LinkTarget } from './link-control'\n\ninterface RichTextEditorProps {\n  /** The stored `richText` value (`{ version, doc }`, legacy string, or empty). */\n  value: unknown\n  onChange: (value: unknown) => void\n  readOnly?: boolean\n  id?: string\n  /** The field's embed `allow` list (component ids editors may embed). */\n  allow?: string[]\n}\n\n/**\n * The CMS rich-text field editor (EC-314) — a real TipTap editor over the shared\n * `@elytracms/core/rich-text` storage, replacing the plaintext textarea stub.\n *\n * It stays *controlled without churn*: the editor is created once from the initial\n * value; the stored value is only re-pushed into ProseMirror when it changes\n * externally (locale switch, reset, compare) and is not already equivalent to what\n * is on screen. On edit, output is pruned to the lean storage convention\n * ({@link normalizeEditorDoc}) and — crucially — when an edit lands the document back\n * on its stored meaning, the *exact stored value* is re-emitted so the field never\n * shows a spurious dirty state (the same \"commit-nothing-when-equivalent\" contract\n * the canvas inline editor uses).\n *\n * The image and component-embed pickers are owned here (not the toolbar) so both the\n * toolbar buttons and the `/` slash menu open the same modal — one insertion path.\n */\nexport function RichTextEditor({ value, onChange, readOnly = false, id, allow }: RichTextEditorProps) {\n  // Ambient context for reference-aware insertion (null outside a collection view /\n  // asset backend — the editor then degrades to external links and no image insert).\n  const source = useOptionalCollectionView()\n  const assets = useOptionalAssets()\n\n  const [imageOpen, setImageOpen] = useState(false)\n  const [embedOpen, setEmbedOpen] = useState(false)\n\n  const canImage = assets != null\n  const canEmbed = useMemo(() => hasEmbeddable(allow), [allow])\n\n  // Every linkable document across the workspace (excluding the asset rail — you link\n  // to content, not to raw files). Recomputed only when the source changes.\n  const linkTargets = useMemo<LinkTarget[]>(() => {\n    if (!source) return []\n    const out: LinkTarget[] = []\n    for (const collection of source.collections) {\n      if (collection.id === source.assetCollectionId) continue\n      const collectionLabel = localizedLabel(collection.form?.labelSingular, collection.id)\n      for (const doc of source.referenceCandidates(collection.id)) {\n        const ref = { collection: collection.id, id: doc.id }\n        out.push({ ref, label: source.titleOf(ref), collectionLabel })\n      }\n    }\n    return out\n  }, [source])\n\n  // Latest value/onChange, read inside the stable onUpdate closure.\n  const valueRef = useRef(value)\n  valueRef.current = value\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n  // What we last emitted upward — lets the sync effect ignore our own echoes.\n  const lastEmitted = useRef<unknown>(value)\n\n  // Media openers for the toolbar + slash menu. setState fns are stable, so these\n  // stay valid for the life of the editor even though it's built once.\n  const openImage = canImage ? () => setImageOpen(true) : undefined\n  const openEmbed = canEmbed ? () => setEmbedOpen(true) : undefined\n\n  const editor = useEditor({\n    extensions: buildRichTextExtensions({ slash: { onImage: openImage, onEmbed: openEmbed } }),\n    content: toEditorDoc(value),\n    editable: !readOnly,\n    editorProps: {\n      attributes: { class: 'ec-rte-content', ...(id ? { id } : {}) },\n    },\n    onUpdate: ({ editor }) => {\n      const current = normalizeEditorDoc(editor.getJSON() as unknown as RichTextDoc)\n      const stored = valueRef.current\n      // Three outcomes: unchanged → re-emit the stored value verbatim (no dirty);\n      // emptied → clear the field (undefined); otherwise → the new stamped value.\n      const next = isEquivalentToStored(current, stored)\n        ? stored\n        : isEffectivelyEmpty(current)\n          ? undefined\n          : richTextValueFromDoc(current)\n      lastEmitted.current = next\n      onChangeRef.current(next)\n    },\n  })\n\n  // Reflect external value changes into the editor, never echoing our own emits.\n  useEffect(() => {\n    if (!editor) return\n    if (value === lastEmitted.current) return\n    const current = normalizeEditorDoc(editor.getJSON() as unknown as RichTextDoc)\n    if (isEquivalentToStored(current, value)) return\n    editor.commands.setContent(toEditorDoc(value), { emitUpdate: false })\n  }, [editor, value])\n\n  // Toggle editability without rebuilding the editor (preserves history/selection).\n  useEffect(() => {\n    editor?.setEditable(!readOnly)\n  }, [editor, readOnly])\n\n  if (!editor) return null\n\n  return (\n    <div\n      className={cn(\n        'ec-rte overflow-hidden rounded-md border border-input bg-background shadow-sm',\n        'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40',\n        readOnly && 'opacity-70',\n      )}\n    >\n      {!readOnly ? (\n        <RichTextToolbar\n          editor={editor}\n          targets={linkTargets}\n          onOpenImage={openImage}\n          onOpenEmbed={openEmbed}\n        />\n      ) : null}\n      <EditorContent editor={editor} />\n      {canImage ? (\n        <AssetPicker\n          open={imageOpen}\n          onOpenChange={setImageOpen}\n          value={null}\n          accept=\"image/*\"\n          onChange={(assetId) => {\n            setImageOpen(false)\n            if (assetId) insertAssetImage(editor, assetId, assets)\n          }}\n        />\n      ) : null}\n      {canEmbed ? (\n        <EmbedPicker\n          open={embedOpen}\n          onOpenChange={setEmbedOpen}\n          allow={allow}\n          onSelect={(manifest) => insertComponentEmbed(editor, manifest)}\n        />\n      ) : null}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"editor.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport type { RichTextDoc } from '@elytracms/core/rich-text'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { localizedLabel } from '@elytracms/studio/lib/i18n'\nimport { useOptionalCollectionView } from '../../collection-view/collection-view-context'\nimport { useOptionalAssets } from '../../assets/assets-store'\nimport { AssetPicker } from '../asset-picker'\nimport { buildRichTextExtensions } from './extensions'\nimport {\n  isEffectivelyEmpty,\n  isEquivalentToStored,\n  normalizeEditorDoc,\n  richTextValueFromDoc,\n  toEditorDoc,\n} from './value'\nimport { insertAssetImage, insertComponentEmbed, listEmbeddable } from './insert'\nimport { EmbedPicker } from './embed-picker'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { RichTextToolbar } from './toolbar'\nimport type { LinkTarget } from './link-control'\n\ninterface RichTextEditorProps {\n  /** The stored `richText` value (`{ version, doc }`, legacy string, or empty). */\n  value: unknown\n  onChange: (value: unknown) => void\n  readOnly?: boolean\n  id?: string\n  /** The field's embed `allow` list (component ids editors may embed). */\n  allow?: string[]\n}\n\n/**\n * The CMS rich-text field editor (EC-314) — a real TipTap editor over the shared\n * `@elytracms/core/rich-text` storage, replacing the plaintext textarea stub.\n *\n * It stays *controlled without churn*: the editor is created once from the initial\n * value; the stored value is only re-pushed into ProseMirror when it changes\n * externally (locale switch, reset, compare) and is not already equivalent to what\n * is on screen. On edit, output is pruned to the lean storage convention\n * ({@link normalizeEditorDoc}) and — crucially — when an edit lands the document back\n * on its stored meaning, the *exact stored value* is re-emitted so the field never\n * shows a spurious dirty state (the same \"commit-nothing-when-equivalent\" contract\n * the canvas inline editor uses).\n *\n * The image and component-embed pickers are owned here (not the toolbar) so both the\n * toolbar buttons and the `/` slash menu open the same modal — one insertion path.\n */\nexport function RichTextEditor({ value, onChange, readOnly = false, id, allow }: RichTextEditorProps) {\n  // Ambient context for reference-aware insertion (null outside a collection view /\n  // asset backend — the editor then degrades to external links and no image insert).\n  const source = useOptionalCollectionView()\n  const assets = useOptionalAssets()\n\n  const [imageOpen, setImageOpen] = useState(false)\n  const [embedOpen, setEmbedOpen] = useState(false)\n\n  const canImage = assets != null\n  // The `allow`-gated components this field may embed — drives both the toolbar\n  // picker and the slash menu's direct per-component items (0.0.41).\n  const embeddable = useMemo(\n    () => listEmbeddable(allow, getStudioRegistry().registry.list()),\n    [allow],\n  )\n  const canEmbed = embeddable.length > 0\n\n  // Every linkable document across the workspace (excluding the asset rail — you link\n  // to content, not to raw files). Recomputed only when the source changes.\n  const linkTargets = useMemo<LinkTarget[]>(() => {\n    if (!source) return []\n    const out: LinkTarget[] = []\n    for (const collection of source.collections) {\n      if (collection.id === source.assetCollectionId) continue\n      const collectionLabel = localizedLabel(collection.form?.labelSingular, collection.id)\n      for (const doc of source.referenceCandidates(collection.id)) {\n        const ref = { collection: collection.id, id: doc.id }\n        out.push({ ref, label: source.titleOf(ref), collectionLabel })\n      }\n    }\n    return out\n  }, [source])\n\n  // Latest value/onChange, read inside the stable onUpdate closure.\n  const valueRef = useRef(value)\n  valueRef.current = value\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n  // What we last emitted upward — lets the sync effect ignore our own echoes.\n  const lastEmitted = useRef<unknown>(value)\n\n  // Media openers for the toolbar + slash menu. setState fns are stable, so these\n  // stay valid for the life of the editor even though it's built once.\n  const openImage = canImage ? () => setImageOpen(true) : undefined\n  const openEmbed = canEmbed ? () => setEmbedOpen(true) : undefined\n\n  const editor = useEditor({\n    extensions: buildRichTextExtensions({\n      slash: {\n        onImage: openImage,\n        // Direct per-component slash items (0.0.41) — insert with manifest defaults\n        // and select, so the embed inspector opens onto the new node's props.\n        embed: canEmbed\n          ? {\n              components: embeddable,\n              insert: (ed, range, manifest) => {\n                ed.chain().focus().deleteRange(range).run()\n                insertComponentEmbed(ed, manifest, { select: true })\n              },\n            }\n          : undefined,\n      },\n    }),\n    content: toEditorDoc(value),\n    editable: !readOnly,\n    editorProps: {\n      attributes: { class: 'ec-rte-content', ...(id ? { id } : {}) },\n    },\n    onUpdate: ({ editor }) => {\n      const current = normalizeEditorDoc(editor.getJSON() as unknown as RichTextDoc)\n      const stored = valueRef.current\n      // Three outcomes: unchanged → re-emit the stored value verbatim (no dirty);\n      // emptied → clear the field (undefined); otherwise → the new stamped value.\n      const next = isEquivalentToStored(current, stored)\n        ? stored\n        : isEffectivelyEmpty(current)\n          ? undefined\n          : richTextValueFromDoc(current)\n      lastEmitted.current = next\n      onChangeRef.current(next)\n    },\n  })\n\n  // Reflect external value changes into the editor, never echoing our own emits.\n  useEffect(() => {\n    if (!editor) return\n    if (value === lastEmitted.current) return\n    const current = normalizeEditorDoc(editor.getJSON() as unknown as RichTextDoc)\n    if (isEquivalentToStored(current, value)) return\n    editor.commands.setContent(toEditorDoc(value), { emitUpdate: false })\n  }, [editor, value])\n\n  // Toggle editability without rebuilding the editor (preserves history/selection).\n  useEffect(() => {\n    editor?.setEditable(!readOnly)\n  }, [editor, readOnly])\n\n  if (!editor) return null\n\n  return (\n    <div\n      className={cn(\n        'ec-rte overflow-hidden rounded-md border border-input bg-background shadow-sm',\n        'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40',\n        readOnly && 'opacity-70',\n      )}\n    >\n      {!readOnly ? (\n        <RichTextToolbar\n          editor={editor}\n          targets={linkTargets}\n          onOpenImage={openImage}\n          onOpenEmbed={openEmbed}\n        />\n      ) : null}\n      <EditorContent editor={editor} />\n      {canImage ? (\n        <AssetPicker\n          open={imageOpen}\n          onOpenChange={setImageOpen}\n          value={null}\n          accept=\"image/*\"\n          onChange={(assetId) => {\n            setImageOpen(false)\n            if (assetId) insertAssetImage(editor, assetId, assets)\n          }}\n        />\n      ) : null}\n      {canEmbed ? (\n        <EmbedPicker\n          open={embedOpen}\n          onOpenChange={setEmbedOpen}\n          allow={allow}\n          onSelect={(manifest) => insertComponentEmbed(editor, manifest, { select: true })}\n        />\n      ) : null}\n    </div>\n  )\n}\n"]}

package/dist/components/cms/rich-text/embed-inspector-context.d.ts

@@ -0,0 +1,50 @@
+import type { ComponentNode } from '@elytracms/core/project-graph';
+import type { ComponentManifest } from '@elytracms/core/component-registry';
+/**
+ * Selection-driven embed inspector plumbing (0.0.41) — a deliberately **TipTap-free**
+ * seam between the rich-text editor and the CMS detail editor's right sidebar.
+ *
+ * When a `componentEmbed` node is selected inside a rich-text field, the field pushes
+ * an {@link EmbedInspectorPayload} through this context; the detail editor swaps its
+ * inspector sidebar for the embed's prop form (the same EC-190 controls the old modal
+ * used). Deselecting clears it and the normal sidebar returns.
+ *
+ * It carries only plain data + callbacks (no `@tiptap/*` imports) so the detail
+ * editor — which sits on the critical path and must NOT statically pull TipTap
+ * (EC-322) — can consume it while the editor subtree stays behind `rich-text/lazy`.
+ */
+export interface EmbedInspectorPayload {
+    /**
+     * Stable identity of the embedded node (its `ComponentNode.id`). Dedupes selection
+     * races: when the selection moves from embed A to embed B, B's "open" and A's
+     * "close" can interleave — clearing keys on this id so A never wipes B.
+     */
+    nodeId: string;
+    /** The embedded component node whose props the inspector edits. */
+    node: ComponentNode;
+    /** Its manifest — drives which prop fields render. */
+    manifest: ComponentManifest;
+    /** Render the inspector read-only (mirrors the field's `readOnly`). */
+    readOnly: boolean;
+    /**
+     * Commit an edited node. The field writes it back through one ProseMirror
+     * `updateAttributes` transaction (undoable); the caller has already applied the
+     * no-dirty guard, so this only fires on a real structural change.
+     */
+    onChange: (node: ComponentNode) => void;
+    /** Move the editor selection off this node — the inspector's back affordance. */
+    onDeselect: () => void;
+}
+export interface EmbedInspectorApi {
+    /** Show (or refocus) the inspector for the currently-selected embed. */
+    setActiveEmbed: (payload: EmbedInspectorPayload) => void;
+    /** Hide the inspector, but only when `nodeId` is the one currently shown. */
+    clearActiveEmbed: (nodeId: string) => void;
+}
+export declare const EmbedInspectorProvider: import("react").Provider<EmbedInspectorApi | null>;
+/**
+ * The ambient embed-inspector sink, or `null` when the rich-text field is mounted
+ * outside a host that provides one (the builder property inspector, the asset detail
+ * pane). A `null` return is the signal to fall back to the modal prop editor.
+ */
+export declare function useOptionalEmbedInspector(): EmbedInspectorApi | null;

package/dist/components/cms/rich-text/embed-inspector-context.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+const EmbedInspectorContext = createContext(null);
+export const EmbedInspectorProvider = EmbedInspectorContext.Provider;
+/**
+ * The ambient embed-inspector sink, or `null` when the rich-text field is mounted
+ * outside a host that provides one (the builder property inspector, the asset detail
+ * pane). A `null` return is the signal to fall back to the modal prop editor.
+ */
+export function useOptionalEmbedInspector() {
+    return useContext(EmbedInspectorContext);
+}
+//# sourceMappingURL=embed-inspector-context.js.map

package/dist/components/cms/rich-text/embed-inspector-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"embed-inspector-context.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/embed-inspector-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA+CjD,MAAM,qBAAqB,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAA;AAE3E,MAAM,CAAC,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,QAAQ,CAAA;AAEpE;;;;GAIG;AACH,MAAM,UAAU,yBAAyB;IACvC,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAA;AAC1C,CAAC","sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\n\n/**\n * Selection-driven embed inspector plumbing (0.0.41) — a deliberately **TipTap-free**\n * seam between the rich-text editor and the CMS detail editor's right sidebar.\n *\n * When a `componentEmbed` node is selected inside a rich-text field, the field pushes\n * an {@link EmbedInspectorPayload} through this context; the detail editor swaps its\n * inspector sidebar for the embed's prop form (the same EC-190 controls the old modal\n * used). Deselecting clears it and the normal sidebar returns.\n *\n * It carries only plain data + callbacks (no `@tiptap/*` imports) so the detail\n * editor — which sits on the critical path and must NOT statically pull TipTap\n * (EC-322) — can consume it while the editor subtree stays behind `rich-text/lazy`.\n */\nexport interface EmbedInspectorPayload {\n  /**\n   * Stable identity of the embedded node (its `ComponentNode.id`). Dedupes selection\n   * races: when the selection moves from embed A to embed B, B's \"open\" and A's\n   * \"close\" can interleave — clearing keys on this id so A never wipes B.\n   */\n  nodeId: string\n  /** The embedded component node whose props the inspector edits. */\n  node: ComponentNode\n  /** Its manifest — drives which prop fields render. */\n  manifest: ComponentManifest\n  /** Render the inspector read-only (mirrors the field's `readOnly`). */\n  readOnly: boolean\n  /**\n   * Commit an edited node. The field writes it back through one ProseMirror\n   * `updateAttributes` transaction (undoable); the caller has already applied the\n   * no-dirty guard, so this only fires on a real structural change.\n   */\n  onChange: (node: ComponentNode) => void\n  /** Move the editor selection off this node — the inspector's back affordance. */\n  onDeselect: () => void\n}\n\nexport interface EmbedInspectorApi {\n  /** Show (or refocus) the inspector for the currently-selected embed. */\n  setActiveEmbed: (payload: EmbedInspectorPayload) => void\n  /** Hide the inspector, but only when `nodeId` is the one currently shown. */\n  clearActiveEmbed: (nodeId: string) => void\n}\n\nconst EmbedInspectorContext = createContext<EmbedInspectorApi | null>(null)\n\nexport const EmbedInspectorProvider = EmbedInspectorContext.Provider\n\n/**\n * The ambient embed-inspector sink, or `null` when the rich-text field is mounted\n * outside a host that provides one (the builder property inspector, the asset detail\n * pane). A `null` return is the signal to fall back to the modal prop editor.\n */\nexport function useOptionalEmbedInspector(): EmbedInspectorApi | null {\n  return useContext(EmbedInspectorContext)\n}\n"]}

package/dist/components/cms/rich-text/embed-inspector.d.ts

@@ -0,0 +1,25 @@
+import type { EmbedInspectorPayload } from './embed-inspector-context';
+/**
+ * The selection-driven embed prop inspector (0.0.41) — the detail editor's right
+ * sidebar swaps to this when a `componentEmbed` node is selected in a rich-text
+ * field. It replaces the retired-for-this-surface {@link EmbedPropsDialog} modal so
+ * embed props are edited in the SAME place document fields are, not a third form
+ * surface (the product-owner feedback that motivated the change).
+ *
+ * It reuses the exact modal machinery — the EC-190 {@link PropValueControl} stack and
+ * the {@link editableEmbedProps}/{@link blocksEmbedProps} manifest partitioning — so
+ * `blocks`-typed composition props are excluded (edited on the canvas) with a visible
+ * note, and asset/relation/object props open their real pickers.
+ *
+ * Write-back is **immediate per prop change** (like the builder inspector): each edit
+ * commits through the payload's `onChange` (one ProseMirror transaction upstream),
+ * guarded by {@link resolveEmbedWrite} so an unchanged write never dirties the field.
+ * There is no draft+Apply — the sidebar always reflects the committed node.
+ *
+ * TipTap-free by construction (see {@link EmbedInspectorPayload}) so the detail editor
+ * can import it without pulling the editor runtime onto the critical path (EC-322).
+ */
+export declare function EmbedInspector({ payload, className, }: {
+    payload: EmbedInspectorPayload;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/cms/rich-text/embed-inspector.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronLeft } from 'lucide-react';
+import { Button, Field, Row, Separator, Stack, Text } from '@elytracms/studio/ui';
+import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
+import { componentDisplayName } from '@elytracms/studio/lib/persona/labels';
+import { cn } from '@elytracms/studio/lib/utils';
+import { PropValueControl } from '../prop-fields';
+import { blocksEmbedProps, clearComponentNodeProp, editableEmbedProps, resolveEmbedWrite, setComponentNodeProp, } from './embed-props';
+/**
+ * The selection-driven embed prop inspector (0.0.41) — the detail editor's right
+ * sidebar swaps to this when a `componentEmbed` node is selected in a rich-text
+ * field. It replaces the retired-for-this-surface {@link EmbedPropsDialog} modal so
+ * embed props are edited in the SAME place document fields are, not a third form
+ * surface (the product-owner feedback that motivated the change).
+ *
+ * It reuses the exact modal machinery — the EC-190 {@link PropValueControl} stack and
+ * the {@link editableEmbedProps}/{@link blocksEmbedProps} manifest partitioning — so
+ * `blocks`-typed composition props are excluded (edited on the canvas) with a visible
+ * note, and asset/relation/object props open their real pickers.
+ *
+ * Write-back is **immediate per prop change** (like the builder inspector): each edit
+ * commits through the payload's `onChange` (one ProseMirror transaction upstream),
+ * guarded by {@link resolveEmbedWrite} so an unchanged write never dirties the field.
+ * There is no draft+Apply — the sidebar always reflects the committed node.
+ *
+ * TipTap-free by construction (see {@link EmbedInspectorPayload}) so the detail editor
+ * can import it without pulling the editor runtime onto the critical path (EC-322).
+ */
+export function EmbedInspector({ payload, className, }) {
+    const { node, manifest, readOnly, onChange, onDeselect } = payload;
+    const editable = editableEmbedProps(manifest);
+    const blocks = blocksEmbedProps(manifest);
+    function set(name, value) {
+        const next = resolveEmbedWrite(node, setComponentNodeProp(node, name, value));
+        if (next)
+            onChange(next);
+    }
+    function clear(name) {
+        const next = resolveEmbedWrite(node, clearComponentNodeProp(node, name));
+        if (next)
+            onChange(next);
+    }
+    return (_jsxs("div", { className: cn('flex h-full min-h-0 flex-col bg-card', className), children: [_jsxs(Row, { gap: "1", align: "center", className: "shrink-0 border-b border-border p-1.5", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": translate('richText.embed.inspectorBack'), onClick: onDeselect, children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsx(Text, { as: "span", size: "xs", weight: "semibold", className: "min-w-0 flex-1 truncate", children: componentDisplayName(node.componentId, manifest) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: _jsxs(Stack, { gap: "4", "aria-disabled": readOnly || undefined, className: cn(readOnly && 'pointer-events-none opacity-70'), children: [editable.length === 0 ? (_jsx(Text, { size: "sm", tone: "muted", children: translate('richText.embed.noProps') })) : (editable.map(([name, spec]) => {
+                            const id = `embed-${node.id}-${name}`;
+                            return (_jsx(Field, { label: localizedLabel(spec.form?.label, name), htmlFor: id, children: _jsx(PropValueControl, { id: id, name: name, spec: spec, value: node.props?.[name], onSet: (v) => set(name, v), onClear: () => clear(name) }) }, name));
+                        })), blocks.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(Text, { size: "xs", tone: "subtle", children: translate('richText.embed.blocksNote') })] })) : null] }) })] }));
+}
+//# sourceMappingURL=embed-inspector.js.map