@elytracms/studio 0.0.20 → 0.0.21

package/dist/components/builder/reuse-context.js

@@ -42,7 +42,7 @@ export function ReuseProvider({ children }) {
         const defaultName = manifestTitle ?? collection?.form?.labelSingular ?? collection?.form?.label ?? 'Reusable element';
         setPending({ nodeId, defaultName });
     }, [canMakeReusable, builder, manifests, capability, cms]);
-    const confirmMakeReusable = useCallback((name) => {
+    const confirmMakeReusable = useCallback((name, publish) => {
         const cap = capability;
         if (!cap || !pending)
             return;
@@ -61,7 +61,18 @@ export function ReuseProvider({ children }) {
         // clones to a fresh id; the source `node` stays untouched in the new doc).
         builder.dispatch({ type: 'replace', id: pending.nodeId, nodes: [makeEmbedNode(cap, ref.id)] });
         setPending(null);
-        toast.success(`Made “${name}” reusable — edit it from its document.`);
+        // EC-300: the new reusable is a separate document with its own lifecycle. A
+        // draft-only target resolves to nothing in the published perspective (delivery
+        // + the published canvas view), so the editor chooses at creation: PUBLISH keeps
+        // the section visible everywhere immediately (the continuity-preserving default);
+        // SAVE DRAFT keeps it editable, visible in the draft canvas, surfaced as a
+        // pending reference until published. No silent auto-publish (AD-16).
+        if (publish) {
+            void cms.publishDocument(ref).then(() => toast.success(`Made “${name}” reusable and published it.`), () => toast.error(`Made “${name}” reusable, but publishing failed — publish it from its document.`));
+        }
+        else {
+            toast.success(`Made “${name}” reusable (draft) — publish it to show on live pages.`);
+        }
     }, [capability, pending, builder, cms]);
     const detach = useCallback((nodeId) => {
         const cap = capability;
@@ -97,12 +108,11 @@ function MakeReusableDialog({ open, defaultName, onConfirm, onCancel, }) {
         setName(defaultName);
         setSeededFor(defaultName);
     }
-    function submit(event) {
-        event.preventDefault();
-        const trimmed = name.trim();
-        if (trimmed === '')
+    const empty = name.trim() === '';
+    function commit(publish) {
+        if (empty)
             return;
-        onConfirm(trimmed);
+        onConfirm(name.trim(), publish);
         setSeededFor(null);
     }
     return (_jsx(Dialog, { open: open, onOpenChange: (next) => {
@@ -110,6 +120,9 @@ function MakeReusableDialog({ open, defaultName, onConfirm, onCancel, }) {
                 onCancel();
                 setSeededFor(null);
             }
-        }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Make reusable" }), _jsx(DialogDescription, { children: "Moves the selected block into a new reusable element and embeds it here. The same element can then be embedded on any page." })] }), _jsxs("form", { onSubmit: submit, children: [_jsx(Stack, { gap: "3", children: _jsx(Field, { label: "Name", htmlFor: "make-reusable-name", required: true, children: _jsx(Input, { id: "make-reusable-name", value: name, onChange: (event) => setName(event.target.value), placeholder: "Reservation CTA", autoFocus: true, required: true }) }) }), _jsxs(DialogFooter, { className: "mt-4", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", disabled: name.trim() === '', "data-testid": "make-reusable", children: "Make reusable" })] })] })] }) }));
+        }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Make reusable" }), _jsx(DialogDescription, { children: "Moves the selected block into a new reusable element and embeds it here. The same element can then be embedded on any page. Publish it now to keep the section visible everywhere, or save it as a draft to keep editing first." })] }), _jsxs("form", { onSubmit: (event) => {
+                        event.preventDefault();
+                        commit(true);
+                    }, children: [_jsx(Stack, { gap: "3", children: _jsx(Field, { label: "Name", htmlFor: "make-reusable-name", required: true, children: _jsx(Input, { id: "make-reusable-name", value: name, onChange: (event) => setName(event.target.value), placeholder: "Reservation CTA", autoFocus: true, required: true }) }) }), _jsxs(DialogFooter, { className: "mt-4", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "mr-auto", onClick: onCancel, children: "Cancel" }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", disabled: empty, onClick: () => commit(false), "data-testid": "make-reusable-draft", children: "Save Draft" }), _jsx(Button, { type: "submit", size: "sm", disabled: empty, "data-testid": "make-reusable-publish", children: "Publish" })] })] })] }) }));
 }
 //# sourceMappingURL=reuse-context.js.map

package/dist/components/builder/reuse-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"reuse-context.js","sourceRoot":"","sources":["../../../src/components/builder/reuse-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useCallback, useContext, useMemo, useState } from 'react'\nimport type { FormEvent, ReactNode } from 'react'\nimport { blockRootsOf, getNode } from '@elytracms/core/project-graph'\nimport { readDocumentRef } from '@elytracms/core/cms-core'\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  Field,\n  Input,\n  Stack,\n  toast,\n} from '@elytracms/studio/ui'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { useCms } from '../cms/cms-store'\nimport { useBuilder } from './builder-store'\nimport { buildReusableValues, makeEmbedNode, resolveReuseCapability } from './reuse'\nimport type { ReuseCapability } from './reuse'\n\n/**\n * In-canvas reuse gestures (EC-282): \"Make reusable\" promotes a selected block to\n * a new reusable document and replaces it in place with a transcluding embed;\n * \"Detach to local copy\" inlines an embed's referenced blocks so a page can\n * diverge. Both round-trip through the existing persistence + in-Convex reference\n * index (EC-277), so where-used is correct immediately.\n *\n * The provider needs BOTH the builder store (the edited composition) and the CMS\n * store (to create/read the reusable document), so it mounts inside the\n * composition-field editor's `BuilderProvider`, itself inside the CMS document\n * editor. Where no provider is mounted (or the capability is absent), the menu\n * reads `null` and simply omits the gestures.\n */\nexport interface ReuseGestures {\n  capability: ReuseCapability | null\n  canMakeReusable: (nodeId: string) => boolean\n  canDetach: (nodeId: string) => boolean\n  /** Open the name dialog for promoting `nodeId`. */\n  startMakeReusable: (nodeId: string) => void\n  /** Replace a `Reusable` embed with an editable inline copy of its target's blocks. */\n  detach: (nodeId: string) => void\n}\n\nconst ReuseContext = createContext<ReuseGestures | null>(null)\n\nexport function useReuse(): ReuseGestures | null {\n  return useContext(ReuseContext)\n}\n\nexport function ReuseProvider({ children }: { children: ReactNode }) {\n  const builder = useBuilder()\n  const cms = useCms()\n  const [pending, setPending] = useState<{ nodeId: string; defaultName: string } | null>(null)\n\n  const manifests = useMemo(() => getStudioRegistry().registry.list(), [])\n  const capability = useMemo(\n    () => resolveReuseCapability(manifests, cms.collections),\n    [manifests, cms.collections],\n  )\n\n  const canMakeReusable = useCallback(\n    (nodeId: string): boolean => {\n      if (!capability) return false\n      const node = getNode(builder.present, nodeId)\n      // Anything but the synthetic composition root can be promoted; nesting a\n      // reusable inside a reusable is allowed (the renderer + bake are cycle-\n      // guarded, EC-281), so an embed itself is still promotable.\n      return node !== undefined && node.id !== builder.present.id\n    },\n    [capability, builder],\n  )\n\n  const canDetach = useCallback(\n    (nodeId: string): boolean => {\n      if (!capability) return false\n      return getNode(builder.present, nodeId)?.componentId === capability.embedComponentId\n    },\n    [capability, builder],\n  )\n\n  const startMakeReusable = useCallback(\n    (nodeId: string) => {\n      if (!canMakeReusable(nodeId)) return\n      const node = getNode(builder.present, nodeId)\n      if (!node) return\n      const manifestTitle = manifests.find((m) => m.id === node.componentId)?.title\n      const collection = capability ? cms.getCollection(capability.collectionId) : undefined\n      const defaultName =\n        manifestTitle ?? collection?.form?.labelSingular ?? collection?.form?.label ?? 'Reusable element'\n      setPending({ nodeId, defaultName })\n    },\n    [canMakeReusable, builder, manifests, capability, cms],\n  )\n\n  const confirmMakeReusable = useCallback(\n    (name: string) => {\n      const cap = capability\n      if (!cap || !pending) return\n      const node = getNode(builder.present, pending.nodeId)\n      const collection = cms.getCollection(cap.collectionId)\n      if (!node || !collection) {\n        setPending(null)\n        return\n      }\n      // Mint the reusable document, then write its title + content (createDocument\n      // only seeds defaults). The new id is referenced by the embed below.\n      const ref = cms.createDocument(cap.collectionId)\n      const values = buildReusableValues(collection, cap, name, node, cms.documentsOf(cap.collectionId))\n      cms.saveDocument({ collection: cap.collectionId, id: ref.id, values })\n      // Replace the selection in place with a transcluding embed (the action\n      // clones to a fresh id; the source `node` stays untouched in the new doc).\n      builder.dispatch({ type: 'replace', id: pending.nodeId, nodes: [makeEmbedNode(cap, ref.id)] })\n      setPending(null)\n      toast.success(`Made “${name}” reusable — edit it from its document.`)\n    },\n    [capability, pending, builder, cms],\n  )\n\n  const detach = useCallback(\n    (nodeId: string) => {\n      const cap = capability\n      if (!cap) return\n      const node = getNode(builder.present, nodeId)\n      if (!node || node.componentId !== cap.embedComponentId) return\n      const prop = node.props?.[cap.relationProp]\n      const ref = prop?.kind === 'static' ? readDocumentRef(prop.value) : undefined\n      if (!ref) {\n        toast.error('This element has no target to detach.')\n        return\n      }\n      const target = cms.getDocument(ref)\n      const blocks = blockRootsOf(target?.values?.[cap.contentField])\n      if (blocks.length === 0) {\n        toast.error('The referenced element has no content to detach.')\n        return\n      }\n      builder.dispatch({ type: 'replace', id: nodeId, nodes: blocks })\n      toast.success('Detached to an editable copy — the live link is broken.')\n    },\n    [capability, builder, cms],\n  )\n\n  const value = useMemo<ReuseGestures>(\n    () => ({ capability, canMakeReusable, canDetach, startMakeReusable, detach }),\n    [capability, canMakeReusable, canDetach, startMakeReusable, detach],\n  )\n\n  return (\n    <ReuseContext.Provider value={value}>\n      {children}\n      <MakeReusableDialog\n        open={pending !== null}\n        defaultName={pending?.defaultName ?? ''}\n        onConfirm={confirmMakeReusable}\n        onCancel={() => setPending(null)}\n      />\n    </ReuseContext.Provider>\n  )\n}\n\n/** Name-and-create dialog for the \"Make reusable\" gesture. */\nfunction MakeReusableDialog({\n  open,\n  defaultName,\n  onConfirm,\n  onCancel,\n}: {\n  open: boolean\n  defaultName: string\n  onConfirm: (name: string) => void\n  onCancel: () => void\n}) {\n  const [name, setName] = useState(defaultName)\n  // Re-seed the field each time the dialog opens for a new selection.\n  const [seededFor, setSeededFor] = useState<string | null>(null)\n  if (open && seededFor !== defaultName) {\n    setName(defaultName)\n    setSeededFor(defaultName)\n  }\n\n  function submit(event: FormEvent) {\n    event.preventDefault()\n    const trimmed = name.trim()\n    if (trimmed === '') return\n    onConfirm(trimmed)\n    setSeededFor(null)\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(next) => {\n        if (!next) {\n          onCancel()\n          setSeededFor(null)\n        }\n      }}\n    >\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Make reusable</DialogTitle>\n          <DialogDescription>\n            Moves the selected block into a new reusable element and embeds it here. The same element\n            can then be embedded on any page.\n          </DialogDescription>\n        </DialogHeader>\n        <form onSubmit={submit}>\n          <Stack gap=\"3\">\n            <Field label=\"Name\" htmlFor=\"make-reusable-name\" required>\n              <Input\n                id=\"make-reusable-name\"\n                value={name}\n                onChange={(event) => setName(event.target.value)}\n                placeholder=\"Reservation CTA\"\n                autoFocus\n                required\n              />\n            </Field>\n          </Stack>\n          <DialogFooter className=\"mt-4\">\n            <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" size=\"sm\" disabled={name.trim() === ''} data-testid=\"make-reusable\">\n              Make reusable\n            </Button>\n          </DialogFooter>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"]}
+{"version":3,"file":"reuse-context.js","sourceRoot":"","sources":["../../../src/components/builder/reuse-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useCallback, useContext, useMemo, useState } from 'react'\nimport type { FormEvent, ReactNode } from 'react'\nimport { blockRootsOf, getNode } from '@elytracms/core/project-graph'\nimport { readDocumentRef } from '@elytracms/core/cms-core'\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  Field,\n  Input,\n  Stack,\n  toast,\n} from '@elytracms/studio/ui'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { useCms } from '../cms/cms-store'\nimport { useBuilder } from './builder-store'\nimport { buildReusableValues, makeEmbedNode, resolveReuseCapability } from './reuse'\nimport type { ReuseCapability } from './reuse'\n\n/**\n * In-canvas reuse gestures (EC-282): \"Make reusable\" promotes a selected block to\n * a new reusable document and replaces it in place with a transcluding embed;\n * \"Detach to local copy\" inlines an embed's referenced blocks so a page can\n * diverge. Both round-trip through the existing persistence + in-Convex reference\n * index (EC-277), so where-used is correct immediately.\n *\n * The provider needs BOTH the builder store (the edited composition) and the CMS\n * store (to create/read the reusable document), so it mounts inside the\n * composition-field editor's `BuilderProvider`, itself inside the CMS document\n * editor. Where no provider is mounted (or the capability is absent), the menu\n * reads `null` and simply omits the gestures.\n */\nexport interface ReuseGestures {\n  capability: ReuseCapability | null\n  canMakeReusable: (nodeId: string) => boolean\n  canDetach: (nodeId: string) => boolean\n  /** Open the name dialog for promoting `nodeId`. */\n  startMakeReusable: (nodeId: string) => void\n  /** Replace a `Reusable` embed with an editable inline copy of its target's blocks. */\n  detach: (nodeId: string) => void\n}\n\nconst ReuseContext = createContext<ReuseGestures | null>(null)\n\nexport function useReuse(): ReuseGestures | null {\n  return useContext(ReuseContext)\n}\n\nexport function ReuseProvider({ children }: { children: ReactNode }) {\n  const builder = useBuilder()\n  const cms = useCms()\n  const [pending, setPending] = useState<{ nodeId: string; defaultName: string } | null>(null)\n\n  const manifests = useMemo(() => getStudioRegistry().registry.list(), [])\n  const capability = useMemo(\n    () => resolveReuseCapability(manifests, cms.collections),\n    [manifests, cms.collections],\n  )\n\n  const canMakeReusable = useCallback(\n    (nodeId: string): boolean => {\n      if (!capability) return false\n      const node = getNode(builder.present, nodeId)\n      // Anything but the synthetic composition root can be promoted; nesting a\n      // reusable inside a reusable is allowed (the renderer + bake are cycle-\n      // guarded, EC-281), so an embed itself is still promotable.\n      return node !== undefined && node.id !== builder.present.id\n    },\n    [capability, builder],\n  )\n\n  const canDetach = useCallback(\n    (nodeId: string): boolean => {\n      if (!capability) return false\n      return getNode(builder.present, nodeId)?.componentId === capability.embedComponentId\n    },\n    [capability, builder],\n  )\n\n  const startMakeReusable = useCallback(\n    (nodeId: string) => {\n      if (!canMakeReusable(nodeId)) return\n      const node = getNode(builder.present, nodeId)\n      if (!node) return\n      const manifestTitle = manifests.find((m) => m.id === node.componentId)?.title\n      const collection = capability ? cms.getCollection(capability.collectionId) : undefined\n      const defaultName =\n        manifestTitle ?? collection?.form?.labelSingular ?? collection?.form?.label ?? 'Reusable element'\n      setPending({ nodeId, defaultName })\n    },\n    [canMakeReusable, builder, manifests, capability, cms],\n  )\n\n  const confirmMakeReusable = useCallback(\n    (name: string, publish: boolean) => {\n      const cap = capability\n      if (!cap || !pending) return\n      const node = getNode(builder.present, pending.nodeId)\n      const collection = cms.getCollection(cap.collectionId)\n      if (!node || !collection) {\n        setPending(null)\n        return\n      }\n      // Mint the reusable document, then write its title + content (createDocument\n      // only seeds defaults). The new id is referenced by the embed below.\n      const ref = cms.createDocument(cap.collectionId)\n      const values = buildReusableValues(collection, cap, name, node, cms.documentsOf(cap.collectionId))\n      cms.saveDocument({ collection: cap.collectionId, id: ref.id, values })\n      // Replace the selection in place with a transcluding embed (the action\n      // clones to a fresh id; the source `node` stays untouched in the new doc).\n      builder.dispatch({ type: 'replace', id: pending.nodeId, nodes: [makeEmbedNode(cap, ref.id)] })\n      setPending(null)\n      // EC-300: the new reusable is a separate document with its own lifecycle. A\n      // draft-only target resolves to nothing in the published perspective (delivery\n      // + the published canvas view), so the editor chooses at creation: PUBLISH keeps\n      // the section visible everywhere immediately (the continuity-preserving default);\n      // SAVE DRAFT keeps it editable, visible in the draft canvas, surfaced as a\n      // pending reference until published. No silent auto-publish (AD-16).\n      if (publish) {\n        void cms.publishDocument(ref).then(\n          () => toast.success(`Made “${name}” reusable and published it.`),\n          () =>\n            toast.error(\n              `Made “${name}” reusable, but publishing failed — publish it from its document.`,\n            ),\n        )\n      } else {\n        toast.success(`Made “${name}” reusable (draft) — publish it to show on live pages.`)\n      }\n    },\n    [capability, pending, builder, cms],\n  )\n\n  const detach = useCallback(\n    (nodeId: string) => {\n      const cap = capability\n      if (!cap) return\n      const node = getNode(builder.present, nodeId)\n      if (!node || node.componentId !== cap.embedComponentId) return\n      const prop = node.props?.[cap.relationProp]\n      const ref = prop?.kind === 'static' ? readDocumentRef(prop.value) : undefined\n      if (!ref) {\n        toast.error('This element has no target to detach.')\n        return\n      }\n      const target = cms.getDocument(ref)\n      const blocks = blockRootsOf(target?.values?.[cap.contentField])\n      if (blocks.length === 0) {\n        toast.error('The referenced element has no content to detach.')\n        return\n      }\n      builder.dispatch({ type: 'replace', id: nodeId, nodes: blocks })\n      toast.success('Detached to an editable copy — the live link is broken.')\n    },\n    [capability, builder, cms],\n  )\n\n  const value = useMemo<ReuseGestures>(\n    () => ({ capability, canMakeReusable, canDetach, startMakeReusable, detach }),\n    [capability, canMakeReusable, canDetach, startMakeReusable, detach],\n  )\n\n  return (\n    <ReuseContext.Provider value={value}>\n      {children}\n      <MakeReusableDialog\n        open={pending !== null}\n        defaultName={pending?.defaultName ?? ''}\n        onConfirm={confirmMakeReusable}\n        onCancel={() => setPending(null)}\n      />\n    </ReuseContext.Provider>\n  )\n}\n\n/** Name-and-create dialog for the \"Make reusable\" gesture. */\nfunction MakeReusableDialog({\n  open,\n  defaultName,\n  onConfirm,\n  onCancel,\n}: {\n  open: boolean\n  defaultName: string\n  /** `publish` chooses the new reusable's initial state (EC-300/AD-16). */\n  onConfirm: (name: string, publish: boolean) => void\n  onCancel: () => void\n}) {\n  const [name, setName] = useState(defaultName)\n  // Re-seed the field each time the dialog opens for a new selection.\n  const [seededFor, setSeededFor] = useState<string | null>(null)\n  if (open && seededFor !== defaultName) {\n    setName(defaultName)\n    setSeededFor(defaultName)\n  }\n\n  const empty = name.trim() === ''\n  function commit(publish: boolean) {\n    if (empty) return\n    onConfirm(name.trim(), publish)\n    setSeededFor(null)\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(next) => {\n        if (!next) {\n          onCancel()\n          setSeededFor(null)\n        }\n      }}\n    >\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Make reusable</DialogTitle>\n          <DialogDescription>\n            Moves the selected block into a new reusable element and embeds it here. The same element\n            can then be embedded on any page. Publish it now to keep the section visible everywhere,\n            or save it as a draft to keep editing first.\n          </DialogDescription>\n        </DialogHeader>\n        {/* Enter submits the primary action (Publish) — the continuity-preserving default. */}\n        <form\n          onSubmit={(event: FormEvent) => {\n            event.preventDefault()\n            commit(true)\n          }}\n        >\n          <Stack gap=\"3\">\n            <Field label=\"Name\" htmlFor=\"make-reusable-name\" required>\n              <Input\n                id=\"make-reusable-name\"\n                value={name}\n                onChange={(event) => setName(event.target.value)}\n                placeholder=\"Reservation CTA\"\n                autoFocus\n                required\n              />\n            </Field>\n          </Stack>\n          <DialogFooter className=\"mt-4\">\n            {/* Cancel pinned left; the two commit actions group right. */}\n            <Button type=\"button\" variant=\"ghost\" size=\"sm\" className=\"mr-auto\" onClick={onCancel}>\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              size=\"sm\"\n              disabled={empty}\n              onClick={() => commit(false)}\n              data-testid=\"make-reusable-draft\"\n            >\n              Save Draft\n            </Button>\n            <Button\n              type=\"submit\"\n              size=\"sm\"\n              disabled={empty}\n              data-testid=\"make-reusable-publish\"\n            >\n              Publish\n            </Button>\n          </DialogFooter>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"]}

package/dist/components/builder/reuse.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentManifest } from '@elytracms/core/component-registry';
-import type { CollectionDef } from '@elytracms/core/cms-core';
+import type { CollectionDef, DocumentRef } from '@elytracms/core/cms-core';
 import type { ComponentNode } from '@elytracms/core/project-graph';
 /**
  * The reuse capability (EC-282): the engine-generic description of how a project
@@ -42,5 +42,18 @@ export declare function uniqueSlug(name: string, taken: ReadonlySet<string>): st
 export declare function buildReusableValues(collection: CollectionDef, capability: ReuseCapability, name: string, node: ComponentNode, existing: readonly {
     values?: Record<string, unknown>;
 }[]): Record<string, unknown>;
+/**
+ * The document a reuse-embed `node` targets (EC-300), or null when `node` is not the
+ * embed component or has no static pick yet. Lets the canvas detect a HARD reference
+ * whose target doesn't resolve (→ placeholder) without reaching into prop internals.
+ */
+export declare function reuseEmbedRef(node: ComponentNode, capability: ReuseCapability): DocumentRef | null;
+/**
+ * Every reuse-embed target ref in a composition `blocks` value, at any depth
+ * (EC-300) — the hard references a publish-integrity check walks to find
+ * unpublished targets. Recurses slots; order is document order. Duplicates are
+ * kept (the caller dedupes by key if needed).
+ */
+export declare function collectEmbedRefs(blocks: readonly ComponentNode[], capability: ReuseCapability): DocumentRef[];
 /** The `Reusable` embed node referencing the new document (id minted by the action). */
 export declare function makeEmbedNode(capability: ReuseCapability, documentId: string): ComponentNode;

package/dist/components/builder/reuse.js

@@ -1,5 +1,5 @@
 import { manifestPropFields } from '@elytracms/core/component-registry';
-import { seedDefaults, titleFieldOf } from '@elytracms/core/cms-core';
+import { readDocumentRef, seedDefaults, titleFieldOf } from '@elytracms/core/cms-core';
 import { slugify } from '@elytracms/studio/lib/utils';
 /** The lone `relation` prop of a manifest (with its name), or null unless exactly one. */
 function soleRelationProp(manifest) {
@@ -69,6 +69,38 @@ export function buildReusableValues(collection, capability, name, node, existing
     values[capability.contentField] = capability.contentCardinality === 'one' ? node : [node];
     return values;
 }
+/**
+ * The document a reuse-embed `node` targets (EC-300), or null when `node` is not the
+ * embed component or has no static pick yet. Lets the canvas detect a HARD reference
+ * whose target doesn't resolve (→ placeholder) without reaching into prop internals.
+ */
+export function reuseEmbedRef(node, capability) {
+    if (node.componentId !== capability.embedComponentId)
+        return null;
+    const prop = node.props?.[capability.relationProp];
+    const ref = prop?.kind === 'static' ? readDocumentRef(prop.value) : undefined;
+    return ref ?? null;
+}
+/**
+ * Every reuse-embed target ref in a composition `blocks` value, at any depth
+ * (EC-300) — the hard references a publish-integrity check walks to find
+ * unpublished targets. Recurses slots; order is document order. Duplicates are
+ * kept (the caller dedupes by key if needed).
+ */
+export function collectEmbedRefs(blocks, capability) {
+    const refs = [];
+    const visit = (node) => {
+        const ref = reuseEmbedRef(node, capability);
+        if (ref)
+            refs.push(ref);
+        for (const children of Object.values(node.slots ?? {}))
+            for (const child of children)
+                visit(child);
+    };
+    for (const node of blocks)
+        visit(node);
+    return refs;
+}
 /** The `Reusable` embed node referencing the new document (id minted by the action). */
 export function makeEmbedNode(capability, documentId) {
     return {

package/dist/components/builder/reuse.js.map

@@ -1 +1 @@
-{"version":3,"file":"reuse.js","sourceRoot":"","sources":["../../../src/components/builder/reuse.ts"],"names":[],"mappings":"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","sourcesContent":["import { manifestPropFields } from '@elytracms/core/component-registry'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport { seedDefaults, titleFieldOf } from '@elytracms/core/cms-core'\nimport type { CollectionDef } from '@elytracms/core/cms-core'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { slugify } from '@elytracms/studio/lib/utils'\n\n/**\n * The reuse capability (EC-282): the engine-generic description of how a project\n * models reusable elements, DERIVED from config (manifests + collections) — no\n * new declaration, so a consumer that already has a transcluding embed gets the\n * in-canvas gestures for free (the EC-296 \"works automatically\" pattern).\n *\n * The derivation predicate for a \"reusable embed\" component: it contributes no\n * slots of its own and has exactly ONE `relation` prop (cardinality `one`) whose\n * target collection holds a `blocks` field — i.e. it embeds a single document and\n * renders that document's composition by transclusion (EC-254/EC-281). For\n * Konditorei that is uniquely `project.Reusable` → `element` → `reusable.content`.\n * If zero or more than one component matches, the capability is null and the\n * gestures stay hidden rather than guessing.\n */\nexport interface ReuseCapability {\n  /** The embed component, e.g. `project.Reusable`. */\n  embedComponentId: string\n  /** The embed's relation prop that points at the reusable document, e.g. `element`. */\n  relationProp: string\n  /** The collection reusable documents live in, e.g. `reusable`. */\n  collectionId: string\n  /** The collection's composition field the embed transcludes, e.g. `content`. */\n  contentField: string\n  /** Whether that field holds a single block or a list. */\n  contentCardinality: 'one' | 'many'\n}\n\n/** The lone `relation` prop of a manifest (with its name), or null unless exactly one. */\nfunction soleRelationProp(\n  manifest: ComponentManifest,\n): { name: string; target: string; cardinality: 'one' | 'many' } | null {\n  const relations = manifestPropFields(manifest).filter((f) => f.type === 'relation')\n  const only = relations.length === 1 ? relations[0] : undefined\n  if (!only || only.type !== 'relation' || !only.target) return null\n  return { name: only.name, target: only.target, cardinality: only.cardinality }\n}\n\n/** Derive the project's reuse capability, or null when it is absent/ambiguous. */\nexport function resolveReuseCapability(\n  manifests: readonly ComponentManifest[],\n  collections: readonly CollectionDef[],\n): ReuseCapability | null {\n  const matches: ReuseCapability[] = []\n  for (const manifest of manifests) {\n    if (manifest.slots.length > 0) continue\n    const relation = soleRelationProp(manifest)\n    if (!relation || relation.cardinality !== 'one') continue\n    const collection = collections.find((c) => c.id === relation.target)\n    if (!collection) continue\n    const blocksField = collection.fields.find((f) => f.type === 'blocks')\n    if (!blocksField || blocksField.type !== 'blocks') continue\n    matches.push({\n      embedComponentId: manifest.id,\n      relationProp: relation.name,\n      collectionId: collection.id,\n      contentField: blocksField.name,\n      contentCardinality: blocksField.cardinality === 'one' ? 'one' : 'many',\n    })\n  }\n  return matches.length === 1 ? matches[0]! : null\n}\n\n/** A slug for `name`, suffixed `-2`/`-3`/… until it is free among `taken`. */\nexport function uniqueSlug(name: string, taken: ReadonlySet<string>): string {\n  const base = slugify(name) || 'element'\n  let id = base\n  for (let n = 2; taken.has(id); n += 1) id = `${base}-${n}`\n  return id\n}\n\n/**\n * The values for a new reusable document promoted from `node` (EC-282): seeded\n * defaults, the given `name` on the title field, the node on the content field,\n * and a collision-safe slug on any UNIQUE text field (e.g. Konditorei's\n * `internalId`) so the created document is publish-valid without hardcoding that\n * field's name. Other required fields, if any, are completed by the editor when\n * they open the new reusable.\n */\nexport function buildReusableValues(\n  collection: CollectionDef,\n  capability: ReuseCapability,\n  name: string,\n  node: ComponentNode,\n  existing: readonly { values?: Record<string, unknown> }[],\n): Record<string, unknown> {\n  const values: Record<string, unknown> = { ...seedDefaults(collection) }\n  const titleField = titleFieldOf(collection)?.name\n  if (titleField) values[titleField] = name\n  for (const field of collection.fields) {\n    if (\n      field.type === 'text' &&\n      field.validation?.unique === true &&\n      field.name !== titleField &&\n      field.name !== capability.contentField\n    ) {\n      const taken = new Set(\n        existing\n          .map((d) => d.values?.[field.name])\n          .filter((v): v is string => typeof v === 'string'),\n      )\n      values[field.name] = uniqueSlug(name, taken)\n    }\n  }\n  values[capability.contentField] = capability.contentCardinality === 'one' ? node : [node]\n  return values\n}\n\n/** The `Reusable` embed node referencing the new document (id minted by the action). */\nexport function makeEmbedNode(capability: ReuseCapability, documentId: string): ComponentNode {\n  return {\n    id: 'reuse-embed',\n    componentId: capability.embedComponentId,\n    props: {\n      [capability.relationProp]: {\n        kind: 'static',\n        value: { collection: capability.collectionId, id: documentId },\n      },\n    },\n  }\n}\n"]}
+{"version":3,"file":"reuse.js","sourceRoot":"","sources":["../../../src/components/builder/reuse.ts"],"names":[],"mappings":"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","sourcesContent":["import { manifestPropFields } from '@elytracms/core/component-registry'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport { readDocumentRef, seedDefaults, titleFieldOf } from '@elytracms/core/cms-core'\nimport type { CollectionDef, DocumentRef } from '@elytracms/core/cms-core'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { slugify } from '@elytracms/studio/lib/utils'\n\n/**\n * The reuse capability (EC-282): the engine-generic description of how a project\n * models reusable elements, DERIVED from config (manifests + collections) — no\n * new declaration, so a consumer that already has a transcluding embed gets the\n * in-canvas gestures for free (the EC-296 \"works automatically\" pattern).\n *\n * The derivation predicate for a \"reusable embed\" component: it contributes no\n * slots of its own and has exactly ONE `relation` prop (cardinality `one`) whose\n * target collection holds a `blocks` field — i.e. it embeds a single document and\n * renders that document's composition by transclusion (EC-254/EC-281). For\n * Konditorei that is uniquely `project.Reusable` → `element` → `reusable.content`.\n * If zero or more than one component matches, the capability is null and the\n * gestures stay hidden rather than guessing.\n */\nexport interface ReuseCapability {\n  /** The embed component, e.g. `project.Reusable`. */\n  embedComponentId: string\n  /** The embed's relation prop that points at the reusable document, e.g. `element`. */\n  relationProp: string\n  /** The collection reusable documents live in, e.g. `reusable`. */\n  collectionId: string\n  /** The collection's composition field the embed transcludes, e.g. `content`. */\n  contentField: string\n  /** Whether that field holds a single block or a list. */\n  contentCardinality: 'one' | 'many'\n}\n\n/** The lone `relation` prop of a manifest (with its name), or null unless exactly one. */\nfunction soleRelationProp(\n  manifest: ComponentManifest,\n): { name: string; target: string; cardinality: 'one' | 'many' } | null {\n  const relations = manifestPropFields(manifest).filter((f) => f.type === 'relation')\n  const only = relations.length === 1 ? relations[0] : undefined\n  if (!only || only.type !== 'relation' || !only.target) return null\n  return { name: only.name, target: only.target, cardinality: only.cardinality }\n}\n\n/** Derive the project's reuse capability, or null when it is absent/ambiguous. */\nexport function resolveReuseCapability(\n  manifests: readonly ComponentManifest[],\n  collections: readonly CollectionDef[],\n): ReuseCapability | null {\n  const matches: ReuseCapability[] = []\n  for (const manifest of manifests) {\n    if (manifest.slots.length > 0) continue\n    const relation = soleRelationProp(manifest)\n    if (!relation || relation.cardinality !== 'one') continue\n    const collection = collections.find((c) => c.id === relation.target)\n    if (!collection) continue\n    const blocksField = collection.fields.find((f) => f.type === 'blocks')\n    if (!blocksField || blocksField.type !== 'blocks') continue\n    matches.push({\n      embedComponentId: manifest.id,\n      relationProp: relation.name,\n      collectionId: collection.id,\n      contentField: blocksField.name,\n      contentCardinality: blocksField.cardinality === 'one' ? 'one' : 'many',\n    })\n  }\n  return matches.length === 1 ? matches[0]! : null\n}\n\n/** A slug for `name`, suffixed `-2`/`-3`/… until it is free among `taken`. */\nexport function uniqueSlug(name: string, taken: ReadonlySet<string>): string {\n  const base = slugify(name) || 'element'\n  let id = base\n  for (let n = 2; taken.has(id); n += 1) id = `${base}-${n}`\n  return id\n}\n\n/**\n * The values for a new reusable document promoted from `node` (EC-282): seeded\n * defaults, the given `name` on the title field, the node on the content field,\n * and a collision-safe slug on any UNIQUE text field (e.g. Konditorei's\n * `internalId`) so the created document is publish-valid without hardcoding that\n * field's name. Other required fields, if any, are completed by the editor when\n * they open the new reusable.\n */\nexport function buildReusableValues(\n  collection: CollectionDef,\n  capability: ReuseCapability,\n  name: string,\n  node: ComponentNode,\n  existing: readonly { values?: Record<string, unknown> }[],\n): Record<string, unknown> {\n  const values: Record<string, unknown> = { ...seedDefaults(collection) }\n  const titleField = titleFieldOf(collection)?.name\n  if (titleField) values[titleField] = name\n  for (const field of collection.fields) {\n    if (\n      field.type === 'text' &&\n      field.validation?.unique === true &&\n      field.name !== titleField &&\n      field.name !== capability.contentField\n    ) {\n      const taken = new Set(\n        existing\n          .map((d) => d.values?.[field.name])\n          .filter((v): v is string => typeof v === 'string'),\n      )\n      values[field.name] = uniqueSlug(name, taken)\n    }\n  }\n  values[capability.contentField] = capability.contentCardinality === 'one' ? node : [node]\n  return values\n}\n\n/**\n * The document a reuse-embed `node` targets (EC-300), or null when `node` is not the\n * embed component or has no static pick yet. Lets the canvas detect a HARD reference\n * whose target doesn't resolve (→ placeholder) without reaching into prop internals.\n */\nexport function reuseEmbedRef(node: ComponentNode, capability: ReuseCapability): DocumentRef | null {\n  if (node.componentId !== capability.embedComponentId) return null\n  const prop = node.props?.[capability.relationProp]\n  const ref = prop?.kind === 'static' ? readDocumentRef(prop.value) : undefined\n  return ref ?? null\n}\n\n/**\n * Every reuse-embed target ref in a composition `blocks` value, at any depth\n * (EC-300) — the hard references a publish-integrity check walks to find\n * unpublished targets. Recurses slots; order is document order. Duplicates are\n * kept (the caller dedupes by key if needed).\n */\nexport function collectEmbedRefs(\n  blocks: readonly ComponentNode[],\n  capability: ReuseCapability,\n): DocumentRef[] {\n  const refs: DocumentRef[] = []\n  const visit = (node: ComponentNode): void => {\n    const ref = reuseEmbedRef(node, capability)\n    if (ref) refs.push(ref)\n    for (const children of Object.values(node.slots ?? {})) for (const child of children) visit(child)\n  }\n  for (const node of blocks) visit(node)\n  return refs\n}\n\n/** The `Reusable` embed node referencing the new document (id minted by the action). */\nexport function makeEmbedNode(capability: ReuseCapability, documentId: string): ComponentNode {\n  return {\n    id: 'reuse-embed',\n    componentId: capability.embedComponentId,\n    props: {\n      [capability.relationProp]: {\n        kind: 'static',\n        value: { collection: capability.collectionId, id: documentId },\n      },\n    },\n  }\n}\n"]}

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

@@ -3,7 +3,10 @@ import { Link, STUDIO_PROJECT_ROUTE, studioPath, useNavigate } from '@elytracms/
 import { CircleAlert, CircleCheck, ExternalLink, Eye, EyeOff, History, Languages, Loader2, Lock, MoreHorizontal, Tag, Trash2, } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SIDEBAR_FIELD_GROUP, clearHiddenValues, documentKey, hasAliases, isBlocksField, isFieldHidden, isFieldLocalized, isSingleton, resolveField, sidebarFields, staticFieldHidden, urlForDocument, } from '@elytracms/core/cms-core';
-import { Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Field, Heading, Panel, PanelHeader, Row, Spacer, Stack, Text, toast, } from '@elytracms/studio/ui';
+import { blockRootsOf } from '@elytracms/core/project-graph';
+import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Field, Heading, Panel, PanelHeader, Row, Spacer, Stack, Text, toast, } from '@elytracms/studio/ui';
+import { getStudioRegistry } from '@elytracms/studio/lib/registry';
+import { collectEmbedRefs, resolveReuseCapability } from '../builder/reuse';
 import { cn } from '@elytracms/studio/lib/utils';
 import { LocaleSwitcher, displayedFieldFallback, hasLocaleVariant, localeChipLabel, setStudioLocale, } from '@elytracms/studio/lib/locale';
 import { parseDocumentFieldPath } from '@elytracms/studio/lib/references';
@@ -93,9 +96,17 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     const viewDoc = viewReadOnly && publishedSnapshot.status === 'ready' ? publishedSnapshot.doc : draft;
     const publishedPending = viewReadOnly && publishedSnapshot.status !== 'ready';
     const dirty = JSON.stringify(draft) !== JSON.stringify(doc);
-    const issues = useMemo(() => cms.validate(draft), [cms, draft]);
-    const errorCount = issues.filter((i) => i.severity === 'error').length;
+    const schemaIssues = useMemo(() => cms.validate(draft), [cms, draft]);
+    // EC-300/AD-16: composition embeds (hard references) whose target isn't published
+    // would render empty on the live site. Surface them as errors in the Issues panel,
+    // but they DON'T gate the Publish button (schema errors do) — publishing is
+    // confirm-through, so the editor can publish the page and the reusable together
+    // knowingly. The publish guard below catches them.
+    const referenceIssues = useMemo(() => unpublishedEmbedIssues(collection, draft, cms), [collection, draft, cms]);
+    const issues = useMemo(() => [...schemaIssues, ...referenceIssues], [schemaIssues, referenceIssues]);
+    const errorCount = schemaIssues.filter((i) => i.severity === 'error').length;
     const hasErrors = errorCount > 0;
+    const hasUnpublishedRefs = referenceIssues.length > 0;
     // --- Autosave (EC-225) -----------------------------------------------------
     // The draft persists automatically 1s after the last edit; there is no manual
     // Save button. Refs let the unmount flush read the latest values without
@@ -297,7 +308,7 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
         id: 'issues',
         label: 'Issues',
         icon: _jsx(CircleAlert, { className: "size-3.5" }),
-        badge: issues.length === 0 ? undefined : (_jsx(Badge, { variant: errorCount > 0 ? 'error' : 'warning', className: "px-1.5 py-0 leading-none", children: issues.length })),
+        badge: issues.length === 0 ? undefined : (_jsx(Badge, { variant: issues.some((i) => i.severity === 'error') ? 'error' : 'warning', className: "px-1.5 py-0 leading-none", children: issues.length })),
         render: () => (_jsx(IssuesPane, { issues: issues, collection: collection, onJumpToField: focusField })),
     }), [issues, errorCount, collection, focusField]);
     // EC-284 + EC-285: the document-metadata pane — slot assignment (EC-284) and/or
@@ -328,7 +339,19 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
     // EC-268: the Publish button is its own indicator — pending while the publish
     // round-trips, a brief success, and an error toast if it rejects at transport.
     const [publishState, setPublishState] = useState('idle');
-    async function handlePublish() {
+    // EC-300/AD-16: confirm-through guard when the page embeds unpublished reusables.
+    const [publishConfirm, setPublishConfirm] = useState(false);
+    // Gate publish on the confirm-through dialog when there are unpublished hard
+    // references (they'd render empty on the live site); schema errors already
+    // disable the button, so they never reach here.
+    function handlePublish() {
+        if (hasUnpublishedRefs) {
+            setPublishConfirm(true);
+            return;
+        }
+        void doPublish();
+    }
+    async function doPublish() {
         // EC-273: clean conditionally-hidden values from the draft AT PUBLISH TIME.
         // While editing, the draft keeps them so an accidental hide (e.g. flipping a
         // link's type) is recoverable; publishing is the intentional moment we commit
@@ -432,7 +455,7 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
                                         ? 'Loading the live URL…'
                                         : !cms.isPublished(ref)
                                             ? 'Publish to view the live page'
-                                            : 'Set frontendUrl in elytra.config.ts to enable', children: [_jsx(ExternalLink, {}), " View live"] }))) : null, _jsx(Button, { size: "sm", onClick: () => void handlePublish(), disabled: hasErrors || viewReadOnly || publishState === 'pending', title: viewReadOnly
+                                            : 'Set frontendUrl in elytra.config.ts to enable', children: [_jsx(ExternalLink, {}), " View live"] }))) : null, _jsx(Button, { size: "sm", onClick: handlePublish, disabled: hasErrors || viewReadOnly || publishState === 'pending', title: viewReadOnly
                                         ? 'Switch to Draft to publish'
                                         : hasErrors
                                             ? `Fix ${errorCount} ${errorCount === 1 ? 'issue' : 'issues'} to publish`
@@ -451,7 +474,55 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
                                     }) }) }) }), _jsx(InspectorSidebar, { panes: trailingPanes, activeId: inspectorPaneId, onActiveChange: setInspectorPaneId, className: "w-[320px] shrink-0 border-l border-border" })] })), confirmAction !== null ? (_jsx(ReferenceConfirmDialog, { projectId: projectId, action: confirmAction, targets: confirmTargets, open: true, onOpenChange: (open) => {
                         if (!open)
                             setConfirmAction(null);
-                    }, onConfirm: handleConfirmedAction })) : null] }) }));
+                    }, onConfirm: handleConfirmedAction })) : null, _jsx(Dialog, { open: publishConfirm, onOpenChange: (open) => { if (!open)
+                        setPublishConfirm(false); }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Publish with unpublished references?" }), _jsx(DialogDescription, { children: "This page embeds reusable elements that aren\u2019t published yet. They will be empty on the live site until you publish them too." })] }), _jsx(Stack, { gap: "1", children: referenceIssues.map((issue, i) => (_jsxs(Text, { size: "xs", tone: "muted", children: ["\u2022 ", issue.message] }, `${issue.meta?.id ?? i}`))) }), _jsxs(DialogFooter, { className: "mt-4", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setPublishConfirm(false), children: "Cancel" }), _jsx(Button, { size: "sm", "data-testid": "publish-anyway", onClick: () => {
+                                            setPublishConfirm(false);
+                                            void doPublish();
+                                        }, children: "Publish anyway" })] })] }) })] }) }));
+}
+/**
+ * EC-300/AD-16 — errors for composition embeds (hard references) whose target isn't
+ * published: they render empty on the live site. Walks every `blocks` field of the
+ * document for reuse embeds; a missing target is an `unknown-relation-target` error,
+ * an unpublished one an `unpublished-relation-target` error. Publishing is
+ * confirm-through (not blocked), so these feed the Issues panel + the publish
+ * confirmation, never the button's disabled gate. No reuse capability → none.
+ */
+function unpublishedEmbedIssues(collection, draft, cms) {
+    const capability = resolveReuseCapability(getStudioRegistry().registry.list(), cms.collections);
+    if (!capability)
+        return [];
+    const issues = [];
+    const seen = new Set();
+    for (const field of collection.fields) {
+        if (!isBlocksField(field))
+            continue;
+        for (const ref of collectEmbedRefs(blockRootsOf(draft.values?.[field.name]), capability)) {
+            const key = `${ref.collection}:${ref.id}`;
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            const exists = cms.getDocument(ref) !== undefined;
+            if (exists && cms.isPublished(ref))
+                continue;
+            issues.push(unpublishedEmbedIssue(collection, draft, field.name, ref, exists, cms));
+        }
+    }
+    return issues;
+}
+/** One unpublished/missing reuse-embed issue (EC-300). */
+function unpublishedEmbedIssue(collection, draft, field, ref, exists, cms) {
+    return {
+        code: exists ? 'unpublished-relation-target' : 'unknown-relation-target',
+        severity: 'error',
+        message: exists
+            ? `Embeds the reusable “${cms.titleOf(ref)}”, which isn’t published — it will be empty on the live site until you publish it.`
+            : `Embeds a reusable that no longer exists (“${ref.id}”) — fix or remove the embed.`,
+        path: [field],
+        collectionId: collection.id,
+        documentId: draft.id,
+        meta: { field, target: ref.collection, id: ref.id },
+    };
 }
 /**
  * A segmented-control button for the Draft/Published view toggle (EC-226). The