@elytracms/studio 0.0.57 → 0.0.59

package/dist/components/ai/proposal-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"proposal-card.js","sourceRoot":"","sources":["../../../src/components/ai/proposal-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAA;AAC1F,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAA;AACnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,GAMP;IACC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAA;IACpB,MAAM,UAAU,GAAG,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAA;IACzD,MAAM,MAAM,GAAG,0BAA0B,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAA;IAE9D,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAA;QAC5B,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,iBAAiB,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;QAC5E,OAAO,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,CAAC,CAAA;IACjD,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAA;IAEjD,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,KAAK,WAAW,CAAA;IAErD,MAAM,eAAe,GACnB,CAAC,UAAU,EAAE,IAAI,EAAE,aAAa,IAAI,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAChF,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,IAAI,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChE,QAAQ,CAAC,UAAU,CAAA;IAErB,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,KAAK,SAAS,CAAA;IAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,KAAK,UAAU,CAAA;IAE/C,OAAO,CACL,MAAC,KAAK,IACJ,GAAG,EAAC,GAAG,EACP,SAAS,EAAC,yDAAyD,aAEnE,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,iDAAiD,aACrF,KAAC,QAAQ,IAAC,SAAS,EAAC,8BAA8B,GAAG,EACrD,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,kBAAkB,YACzD,aAAa;4BACZ,CAAC,CAAC,SAAS,CAAC,4BAA4B,EAAE,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC;4BAC1E,CAAC,CAAC,SAAS,CAAC,mBAAmB,EAAE,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC,GAC9D,EACP,KAAC,MAAM,KAAG,EACT,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,SAAS,CAAC,qBAAqB,CAAC,GAAS,CAAC,CAAC,CAAC,IAAI,EACpF,QAAQ,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,SAAS,CAAC,uBAAuB,CAAC,GAAS,CAAC,CAAC,CAAC,IAAI,IACpF,EAEN,cAAK,SAAS,EAAC,MAAM,YAClB,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,CAChB,KAAC,sBAAsB,IAAC,MAAM,EAAE,MAAM,YACpC,KAAC,gBAAgB,IACf,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAW,EACvB,aAAa,EAAE;4BACb,OAAO,EAAE,SAAS,CAAC,yBAAyB,CAAC;4BAC7C,MAAM,EAAE,aAAa;gCACnB,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC;gCACtC,CAAC,CAAC,SAAS,CAAC,wBAAwB,CAAC;4BACvC,KAAK,EAAE,aAAa;gCAClB,CAAC,CAAC,SAAS,CAAC,wBAAwB,CAAC;gCACrC,CAAC,CAAC,SAAS,CAAC,uBAAuB,CAAC;yBACvC,GACD,GACqB,CAC1B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,MAAM,YAC1C,SAAS,CAAC,yBAAyB,CAAC,GAChC,CACR,GACG,EAEN,KAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,qCAAqC,YACxE,QAAQ,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAC/B,8BACE,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,gBAAgB,YACpD,SAAS,CAAC,wBAAwB,CAAC,GAC/B,EACP,MAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,SAAS,aAClD,KAAC,CAAC,KAAG,OAAE,SAAS,CAAC,qBAAqB,CAAC,IAChC,EACT,MAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,OAAO,aAChC,KAAC,KAAK,KAAG,OAAE,SAAS,CAAC,mBAAmB,CAAC,IAClC,IACR,CACJ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACZ,8BACE,KAAC,MAAM,KAAG,EACV,MAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,aACjD,KAAC,YAAY,KAAG,OAAE,SAAS,CAAC,kBAAkB,CAAC,IACxC,IACR,CACJ,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,SAAS,CAAC,2BAA2B,CAAC,GAClC,CACR,GACG,IACA,CACT,CAAA;AACH,CAAC","sourcesContent":["import { useMemo } from 'react'\nimport { ArrowUpRight, Check, Sparkles, X } from 'lucide-react'\nimport { diffDocuments } from '@elytracms/core/content'\nimport { resolveLabel } from '@elytracms/core/cms-core'\nimport { Badge, Button, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { proposalDocuments } from '@elytracms/studio/lib/ai'\nimport type { ProposalReview } from '@elytracms/studio/lib/ai'\nimport { useCms } from '../cms/cms-store'\nimport { useCmsCollectionViewSource } from '../collection-view/cms-collection-view-source'\nimport { CollectionViewProvider } from '../collection-view/collection-view-context'\nimport { DocumentDiffView } from '../cms/document-diff-view'\n\n/**\n * The AI proposal review (EC-199): a valid, leash-compliant draft the editor reviews\n * as a DIFF (the shared EC-317 {@link DocumentDiffView} — never a second renderer)\n * before applying it as a draft or discarding it. The diff is `empty-before` vs\n * `proposed-after`, wrapped in a `CollectionViewProvider` for the target collection so\n * relations/assets render as titles/thumbnails. Apply/discard are handled by the panel\n * (the operations write + provenance snapshot happen there); this card is the surface.\n */\nexport function ProposalCard({\n  proposal,\n  onApply,\n  onDiscard,\n  onOpen,\n}: {\n  proposal: ProposalReview\n  onApply: () => void\n  onDiscard: () => void\n  onOpen: () => void\n}) {\n  const cms = useCms()\n  const collection = cms.getCollection(proposal.collection)\n  const source = useCmsCollectionViewSource(proposal.collection)\n\n  const diff = useMemo(() => {\n    if (!collection) return null\n    const { before, after } = proposalDocuments(proposal.patch, proposal.before)\n    return diffDocuments(collection, before, after)\n  }, [collection, proposal.patch, proposal.before])\n\n  const isTranslation = proposal.origin === 'translate'\n\n  const collectionLabel =\n    (collection?.form?.labelSingular && resolveLabel(collection.form.labelSingular)) ??\n    (collection?.form?.label && resolveLabel(collection.form.label)) ??\n    proposal.collection\n\n  const applied = proposal.status === 'applied'\n  const rejected = proposal.status === 'rejected'\n\n  return (\n    <Stack\n      gap=\"2\"\n      className=\"overflow-hidden rounded-xl border border-border bg-card\"\n    >\n      <Row gap=\"2\" align=\"center\" className=\"border-b border-border/60 bg-muted/30 px-3 py-2\">\n        <Sparkles className=\"size-4 shrink-0 text-primary\" />\n        <Text size=\"sm\" weight=\"medium\" className=\"min-w-0 truncate\">\n          {isTranslation\n            ? translate('ai.translate.proposalTitle', { collection: collectionLabel })\n            : translate('ai.proposal.title', { collection: collectionLabel })}\n        </Text>\n        <Spacer />\n        {applied ? <Badge variant=\"success\">{translate('ai.proposal.applied')}</Badge> : null}\n        {rejected ? <Badge variant=\"outline\">{translate('ai.proposal.discarded')}</Badge> : null}\n      </Row>\n\n      <div className=\"px-3\">\n        {diff && source ? (\n          <CollectionViewProvider source={source}>\n            <DocumentDiffView\n              diff={diff}\n              collection={collection!}\n              columnHeaders={{\n                unified: translate('ai.proposal.diffUnified'),\n                before: isTranslation\n                  ? translate('ai.translate.diffBefore')\n                  : translate('ai.proposal.diffBefore'),\n                after: isTranslation\n                  ? translate('ai.translate.diffAfter')\n                  : translate('ai.proposal.diffAfter'),\n              }}\n            />\n          </CollectionViewProvider>\n        ) : (\n          <Text size=\"xs\" tone=\"muted\" className=\"py-2\">\n            {translate('ai.proposal.unavailable')}\n          </Text>\n        )}\n      </div>\n\n      <Row gap=\"2\" align=\"center\" className=\"border-t border-border/60 px-3 py-2\">\n        {proposal.status === 'pending' ? (\n          <>\n            <Text size=\"xs\" tone=\"muted\" className=\"min-w-0 flex-1\">\n              {translate('ai.proposal.reviewHint')}\n            </Text>\n            <Button size=\"sm\" variant=\"ghost\" onClick={onDiscard}>\n              <X /> {translate('ai.proposal.discard')}\n            </Button>\n            <Button size=\"sm\" onClick={onApply}>\n              <Check /> {translate('ai.proposal.apply')}\n            </Button>\n          </>\n        ) : applied ? (\n          <>\n            <Spacer />\n            <Button size=\"sm\" variant=\"outline\" onClick={onOpen}>\n              <ArrowUpRight /> {translate('ai.proposal.open')}\n            </Button>\n          </>\n        ) : (\n          <Text size=\"xs\" tone=\"muted\">\n            {translate('ai.proposal.discardedNote')}\n          </Text>\n        )}\n      </Row>\n    </Stack>\n  )\n}\n"]}
+{"version":3,"file":"proposal-card.js","sourceRoot":"","sources":["../../../src/components/ai/proposal-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { ArrowUpRight, Check, Maximize2, Sparkles, X } from 'lucide-react'\nimport { diffDocuments } from '@elytracms/core/content'\nimport type { DocumentDiff } from '@elytracms/core/content'\nimport { resolveLabel } from '@elytracms/core/cms-core'\nimport type { CollectionDef } from '@elytracms/core/cms-core'\nimport { Badge, Button, Heading, Row, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { proposalDocuments } from '@elytracms/studio/lib/ai'\nimport type { ProposalOrigin, ProposalReview } from '@elytracms/studio/lib/ai'\nimport type { CollectionViewSource } from '@elytracms/studio/lib/collection-view/collection-view-source'\nimport { useCms } from '../cms/cms-store'\nimport { useCmsCollectionViewSource } from '../collection-view/cms-collection-view-source'\nimport { CollectionViewProvider } from '../collection-view/collection-view-context'\nimport { DocumentDiffView } from '../cms/document-diff-view'\n\n/**\n * The AI proposal review (EC-199, extended by EC-332/EC-378): a valid,\n * leash-compliant proposal the editor reviews as a DIFF (the shared EC-317\n * {@link DocumentDiffView} — never a second renderer) before applying it as a\n * draft or discarding it. Create proposals diff `empty-before` vs\n * `proposed-after`; translate/update proposals diff the EXISTING document\n * (old → new). Apply/discard are handled by the panel (the operations write +\n * provenance snapshot happen there); this card is the surface.\n *\n * {@link ProposalCard} is the CMS-wired shell; {@link ProposalCardView} is the\n * presentational card over an injected collection + view source (node-smoked\n * with `renderToStaticMarkup`, house pattern).\n */\n\n/** The card's origin-dependent captions (title + diff column headers). */\nexport function proposalCaptions(\n  origin: ProposalOrigin,\n  collectionLabel: string,\n): { title: string; unified: string; before: string; after: string } {\n  if (origin === 'translate') {\n    return {\n      title: translate('ai.translate.proposalTitle', { collection: collectionLabel }),\n      unified: translate('ai.proposal.diffUnified'),\n      before: translate('ai.translate.diffBefore'),\n      after: translate('ai.translate.diffAfter'),\n    }\n  }\n  if (origin === 'update') {\n    return {\n      title: translate('ai.update.proposalTitle', { collection: collectionLabel }),\n      unified: translate('ai.proposal.diffUnified'),\n      before: translate('ai.update.diffBefore'),\n      after: translate('ai.update.diffAfter'),\n    }\n  }\n  return {\n    title: translate('ai.proposal.title', { collection: collectionLabel }),\n    unified: translate('ai.proposal.diffUnified'),\n    before: translate('ai.proposal.diffBefore'),\n    after: translate('ai.proposal.diffAfter'),\n  }\n}\n\nexport function ProposalCard({\n  proposal,\n  onApply,\n  onDiscard,\n  onOpen,\n}: {\n  proposal: ProposalReview\n  onApply: () => void\n  onDiscard: () => void\n  onOpen: () => void\n}) {\n  const cms = useCms()\n  const collection = cms.getCollection(proposal.collection)\n  const source = useCmsCollectionViewSource(proposal.collection)\n  return (\n    <ProposalCardView\n      proposal={proposal}\n      collection={collection}\n      source={source}\n      onApply={onApply}\n      onDiscard={onDiscard}\n      onOpen={onOpen}\n    />\n  )\n}\n\n/** The presentational proposal card over an injected collection + view source. */\nexport function ProposalCardView({\n  proposal,\n  collection,\n  source,\n  onApply,\n  onDiscard,\n  onOpen,\n}: {\n  proposal: ProposalReview\n  collection: CollectionDef | undefined\n  source: CollectionViewSource | null\n  onApply: () => void\n  onDiscard: () => void\n  onOpen: () => void\n}) {\n  const diff = useMemo(() => {\n    if (!collection) return null\n    const { before, after } = proposalDocuments(proposal.patch, proposal.before)\n    return diffDocuments(collection, before, after)\n  }, [collection, proposal.patch, proposal.before])\n\n  const collectionLabel =\n    (collection?.form?.labelSingular && resolveLabel(collection.form.labelSingular)) ??\n    (collection?.form?.label && resolveLabel(collection.form.label)) ??\n    proposal.collection\n\n  const captions = proposalCaptions(proposal.origin, collectionLabel)\n  const applied = proposal.status === 'applied'\n  const rejected = proposal.status === 'rejected'\n  const columnHeaders = { unified: captions.unified, before: captions.before, after: captions.after }\n\n  // EC-382 — the expandable review surface: the sidebar card stays stacked; a\n  // roomy full-height sheet is offered for a large proposal (never a modal form).\n  const [reviewOpen, setReviewOpen] = useState(false)\n  const reviewable = diff !== null && source !== null\n\n  return (\n    <Stack\n      gap=\"2\"\n      className=\"overflow-hidden rounded-xl border border-border bg-card\"\n    >\n      <Row gap=\"2\" align=\"center\" className=\"border-b border-border/60 bg-muted/30 px-3 py-2\">\n        <Sparkles className=\"size-4 shrink-0 text-primary\" />\n        <Text size=\"sm\" weight=\"medium\" className=\"min-w-0 truncate\">\n          {captions.title}\n        </Text>\n        <Spacer />\n        {applied ? <Badge variant=\"success\">{translate('ai.proposal.applied')}</Badge> : null}\n        {rejected ? <Badge variant=\"outline\">{translate('ai.proposal.discarded')}</Badge> : null}\n        {reviewable ? (\n          <Button\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            onClick={() => setReviewOpen(true)}\n            title={translate('ai.proposal.expandReview')}\n            aria-label={translate('ai.proposal.expandReview')}\n          >\n            <Maximize2 />\n          </Button>\n        ) : null}\n      </Row>\n\n      <div className=\"px-3\">\n        {reviewable ? (\n          <CollectionViewProvider source={source!}>\n            <DocumentDiffView\n              diff={diff!}\n              collection={collection!}\n              columnHeaders={columnHeaders}\n              layout=\"stacked\"\n            />\n          </CollectionViewProvider>\n        ) : (\n          <Text size=\"xs\" tone=\"muted\" className=\"py-2\">\n            {translate('ai.proposal.unavailable')}\n          </Text>\n        )}\n      </div>\n\n      <Row gap=\"2\" align=\"center\" className=\"border-t border-border/60 px-3 py-2\">\n        {proposal.status === 'pending' ? (\n          <>\n            <Text size=\"xs\" tone=\"muted\" className=\"min-w-0 flex-1\">\n              {translate('ai.proposal.reviewHint')}\n            </Text>\n            <Button size=\"sm\" variant=\"ghost\" onClick={onDiscard}>\n              <X /> {translate('ai.proposal.discard')}\n            </Button>\n            <Button size=\"sm\" onClick={onApply}>\n              <Check /> {translate('ai.proposal.apply')}\n            </Button>\n          </>\n        ) : applied ? (\n          <>\n            <Spacer />\n            <Button size=\"sm\" variant=\"outline\" onClick={onOpen}>\n              <ArrowUpRight /> {translate('ai.proposal.open')}\n            </Button>\n          </>\n        ) : (\n          <Text size=\"xs\" tone=\"muted\">\n            {translate('ai.proposal.discardedNote')}\n          </Text>\n        )}\n      </Row>\n\n      {reviewable && reviewOpen ? (\n        <ProposalReviewSheet\n          title={captions.title}\n          diff={diff!}\n          collection={collection!}\n          source={source!}\n          columnHeaders={columnHeaders}\n          status={proposal.status}\n          onApply={onApply}\n          onDiscard={onDiscard}\n          onClose={() => setReviewOpen(false)}\n        />\n      ) : null}\n    </Stack>\n  )\n}\n\n/**\n * The expandable review surface (EC-382): the proposal's diff promoted into a\n * roomy, full-height right-anchored sheet where the wide `grid` layout is\n * comfortable — for a large proposal the 320px sidebar can only cramp. It is a\n * REVIEW surface, not a form, so it stays lightly dismissible (backdrop click /\n * Escape / close button) rather than a trapping modal — the forms-never-modal\n * spirit, applied. Presentation only: Apply/Discard call the same handlers the\n * card does; it changes no proposal data. Rendered through a portal so it\n * escapes the narrow AI panel; the card default keeps it closed, so the SSR\n * smoke path never mounts the portal.\n */\nfunction ProposalReviewSheet({\n  title,\n  diff,\n  collection,\n  source,\n  columnHeaders,\n  status,\n  onApply,\n  onDiscard,\n  onClose,\n}: {\n  title: string\n  diff: DocumentDiff\n  collection: CollectionDef\n  source: CollectionViewSource\n  columnHeaders: { unified: string; before: string; after: string }\n  status: ProposalReview['status']\n  onApply: () => void\n  onDiscard: () => void\n  onClose: () => void\n}) {\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose()\n    }\n    window.addEventListener('keydown', onKey)\n    return () => window.removeEventListener('keydown', onKey)\n  }, [onClose])\n\n  if (typeof document === 'undefined') return null\n\n  return createPortal(\n    <div className=\"fixed inset-0 z-50 flex\">\n      <div className=\"flex-1 bg-background/70 backdrop-blur-sm\" aria-hidden onClick={onClose} />\n      <aside\n        role=\"dialog\"\n        aria-label={title}\n        className=\"flex h-full w-[min(720px,92vw)] flex-col border-l border-border bg-card shadow-2xl\"\n      >\n        <Row gap=\"2\" align=\"center\" className=\"h-12 shrink-0 border-b border-border px-4\">\n          <Sparkles className=\"size-4 shrink-0 text-primary\" />\n          <Heading level={2} size=\"h4\" className=\"min-w-0 truncate\">\n            {title}\n          </Heading>\n          <Spacer />\n          <Button\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            onClick={onClose}\n            title={translate('ai.proposal.collapseReview')}\n            aria-label={translate('ai.proposal.collapseReview')}\n          >\n            <X />\n          </Button>\n        </Row>\n\n        <div className=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n          <div className=\"mx-auto w-full max-w-3xl\">\n            <CollectionViewProvider source={source}>\n              <DocumentDiffView diff={diff} collection={collection} columnHeaders={columnHeaders} />\n            </CollectionViewProvider>\n          </div>\n        </div>\n\n        {status === 'pending' ? (\n          <Row gap=\"2\" align=\"center\" className=\"shrink-0 border-t border-border px-4 py-3\">\n            <Text size=\"xs\" tone=\"muted\" className=\"min-w-0 flex-1\">\n              {translate('ai.proposal.reviewHint')}\n            </Text>\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              onClick={() => {\n                onDiscard()\n                onClose()\n              }}\n            >\n              <X /> {translate('ai.proposal.discard')}\n            </Button>\n            <Button\n              size=\"sm\"\n              onClick={() => {\n                onApply()\n                onClose()\n              }}\n            >\n              <Check /> {translate('ai.proposal.apply')}\n            </Button>\n          </Row>\n        ) : null}\n      </aside>\n    </div>,\n    document.body,\n  )\n}\n"]}

package/dist/components/builder/blocks-model.js

@@ -1,8 +1,8 @@
-import { cloneWithNewIds } from '@elytracms/core/project-graph';
+import { cloneWithNewIds, isLayoutContainerId } from '@elytracms/core/project-graph';
 import { isCanvasEligible, propValueValidator } from '@elytracms/core/component-registry';
 import { componentStatus } from '@elytracms/studio/lib/registry';
 import { nodeFromProps, previewSpecs } from '@elytracms/studio/lib/registry/preview';
-import { LAYOUT_PRESETS, nodeFromManifest } from './node-factory.js';
+import { LAYOUT_PRESETS, nodeFromManifest, seededNodeFromManifest } from './node-factory.js';
 /**
  * Intersect two component-id allow-lists. `undefined` means "no constraint from
  * this source", so the result is the other list (copied); two present lists yield
@@ -97,9 +97,14 @@ export function tilesForManifest(studio, manifest) {
     const title = manifest.title ?? manifest.id;
     const baseIssues = manifestIssues(studio, manifest);
     if (!manifest.fixtures || manifest.fixtures.length === 0) {
-        // No declared fixtures: preview via the shared preview specs (authored
-        // primitive previews or plain defaults), insert the bare manifest defaults.
-        const preview = previewSpecs(manifest)[0];
+        // No declared fixtures: insert the manifest defaults, seeding layout
+        // containers so a bare Stack/Grid survives EC-161 normalization instead of
+        // vanishing on commit (EC-383). Preview from the seeded node for containers
+        // (WYSIWYG with the insert) and from the shared preview specs otherwise
+        // (authored primitive previews or plain defaults).
+        const previewNode = isLayoutContainerId(manifest.id)
+            ? cloneWithNewIds(seededNodeFromManifest(manifest), prefixedCounter(`preview-${manifest.id}`))
+            : previewSpecs(manifest)[0].node;
         return [
             {
                 key: `${manifest.id}::default`,
@@ -108,8 +113,8 @@ export function tilesForManifest(studio, manifest) {
                 variant: 'Default',
                 description: manifest.description,
                 issues: baseIssues,
-                previewNode: preview.node,
-                build: () => nodeFromManifest(manifest),
+                previewNode,
+                build: () => seededNodeFromManifest(manifest),
             },
         ];
     }

package/dist/components/builder/blocks-model.js.map

@@ -1 +1 @@
-{"version":3,"file":"blocks-model.js","sourceRoot":"","sources":["../../../src/components/builder/blocks-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAG/D,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AA+CjE;;;;;;;;;;GAUG;AACH,MAAM,UAAU,cAAc,CAC5B,SAAwC,EACxC,UAAyC;IAEzC,IAAI,CAAC,SAAS;QAAE,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC/D,IAAI,CAAC,UAAU;QAAE,OAAO,CAAC,GAAG,SAAS,CAAC,CAAA;IACtC,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,CAAA;IACnC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;AAClD,CAAC;AAED,MAAM,aAAa,GAAG,OAAO,CAAA;AAE7B,SAAS,eAAe,CAAC,MAAc;IACrC,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,OAAO,GAAG,EAAE;QACV,CAAC,IAAI,CAAC,CAAA;QACN,OAAO,GAAG,MAAM,IAAI,CAAC,EAAE,CAAA;IACzB,CAAC,CAAA;AACH,CAAC;AAED,mEAAmE;AACnE,SAAS,WAAW,CAAC,QAA2B,EAAE,EAAU;IAC1D,OAAO,EAAE,GAAG,gBAAgB,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAA;AAC9C,CAAC;AAED,8EAA8E;AAC9E,SAAS,cAAc,CAAC,MAAsB,EAAE,QAA2B;IACzE,MAAM,MAAM,GAAG,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAChD,IAAI,MAAM,KAAK,cAAc,EAAE,CAAC;QAC9B,OAAO,CAAC,wCAAwC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAA;IAClE,CAAC;IACD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO,MAAM,CAAC,QAAQ,CAAC,MAAM;aAC1B,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,KAAK,QAAQ,CAAC,EAAE,CAAC;aACpD,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAClC,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,MAAsB,EACtB,QAA2B,EAC3B,OAAyB,EACzB,MAAc;IAEd,MAAM,MAAM,GAAa,EAAE,CAAA;IAC3B,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;IAExC,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QACzD,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QACjC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,CAAC,IAAI,CAAC,YAAY,OAAO,CAAC,IAAI,wBAAwB,IAAI,IAAI,CAAC,CAAA;YACrE,SAAQ;QACV,CAAC;QACD,0EAA0E;QAC1E,IAAI,CAAC,CAAC,kBAAkB,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,YAAY,OAAO,CAAC,IAAI,qCAAqC,IAAI,IAAI,CAAC,CAAA;QACpF,CAAC;IACH,CAAC;IAED,MAAM,IAAI,GAAG,aAAa,CAAC,QAAQ,EAAE,YAAY,EAAE,MAAM,CAAC,CAAA;IAE1D,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC;QACzB,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACjE,MAAM,KAAK,GAAwC,EAAE,CAAA;QACrD,KAAK,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YACxE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,OAAO,CAAC,IAAI,4BAA4B,QAAQ,IAAI,CAAC,CAAA;YAC/E,CAAC;YACD,KAAK,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;gBAChD,MAAM,EAAE,GAAG,GAAG,MAAM,IAAI,QAAQ,IAAI,KAAK,EAAE,CAAA;gBAC3C,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;gBAC1D,IAAI,CAAC,aAAa,EAAE,CAAC;oBACnB,MAAM,CAAC,IAAI,CACT,YAAY,OAAO,CAAC,IAAI,mCAAmC,OAAO,cAAc,QAAQ,IAAI,CAC7F,CAAA;oBACD,+EAA+E;oBAC/E,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,CAAA;gBACrC,CAAC;gBACD,OAAO,WAAW,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;YACvC,CAAC,CAAC,CAAA;QACJ,CAAC;QACD,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;IACvD,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAA;AACzB,CAAC;AAED,+EAA+E;AAC/E,MAAM,UAAU,gBAAgB,CAAC,MAAsB,EAAE,QAA2B;IAClF,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,EAAE,CAAA;IAC3C,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAEnD,IAAI,CAAC,QAAQ,CAAC,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzD,uEAAuE;QACvE,4EAA4E;QAC5E,MAAM,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAE,CAAA;QAC1C,OAAO;YACL;gBACE,GAAG,EAAE,GAAG,QAAQ,CAAC,EAAE,WAAW;gBAC9B,WAAW,EAAE,QAAQ,CAAC,EAAE;gBACxB,KAAK;gBACL,OAAO,EAAE,SAAS;gBAClB,WAAW,EAAE,QAAQ,CAAC,WAAW;gBACjC,MAAM,EAAE,UAAU;gBAClB,WAAW,EAAE,OAAO,CAAC,IAAI;gBACzB,KAAK,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;aACxC;SACF,CAAA;IACH,CAAC;IAED,OAAO,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;QAC9C,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,cAAc,CACrC,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,QAAQ,CAAC,EAAE,IAAI,KAAK,EAAE,CAClC,CAAA;QACD,OAAO;YACL,GAAG,EAAE,GAAG,QAAQ,CAAC,EAAE,KAAK,OAAO,CAAC,IAAI,EAAE;YACtC,WAAW,EAAE,QAAQ,CAAC,EAAE;YACxB,KAAK;YACL,OAAO,EAAE,OAAO,CAAC,IAAI;YACrB,WAAW,EAAE,QAAQ,CAAC,WAAW;YACjC,MAAM,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC;YAClC,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,IAAI;SACnE,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,QAA2B,EAAE,KAAa;IACzD,MAAM,GAAG,GAAG,CAAC,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,QAAQ,CAAC;SAC/E,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC;SACT,WAAW,EAAE,CAAA;IAChB,OAAO,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAC5B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,MAAsB,EAAE,SAAsB,EAAE;IAC1E,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,CAAA;IAChD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAA;IAE9B,MAAM,MAAM,GAAG,IAAI,GAAG,EAAuB,CAAA;IAC7C,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC;QAC9C,iEAAiE;QACjE,8EAA8E;QAC9E,iEAAiE;QACjE,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;YAAE,SAAQ;QACzC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAAE,SAAQ;QACnD,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC;YAAE,SAAQ;QAChD,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,IAAI,aAAa,CAAA;QACnD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAA;QACxC,KAAK,CAAC,IAAI,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAA;QACjD,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IAC7B,CAAC;IAED,OAAO,CAAC,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC;SACzB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;SACtC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;AACtD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,SAAoB;IAC9C,OAAO,cAAc,CAAC,MAAM,CAC1B,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,WAAW,CAAC,CACzE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACjB,GAAG,EAAE,WAAW,MAAM,CAAC,GAAG,EAAE;QAC5B,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,WAAW;QACvC,KAAK,EAAE,MAAM,CAAC,KAAK;QACnB,OAAO,EAAE,MAAM,CAAC,WAAW;QAC3B,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,MAAM,EAAE,EAAE;QACV,WAAW,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,eAAe,CAAC,kBAAkB,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7F,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;KAC5B,CAAC,CAAC,CAAA;AACL,CAAC","sourcesContent":["import { cloneWithNewIds } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentFixture, ComponentManifest } from '@elytracms/core/component-registry'\nimport { isCanvasEligible, propValueValidator } from '@elytracms/core/component-registry'\nimport { componentStatus } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { nodeFromProps, previewSpecs } from '@elytracms/studio/lib/registry/preview'\nimport { LAYOUT_PRESETS, nodeFromManifest } from './node-factory'\n\n/**\n * Blocks panel model (EC-164) — the pure, React-free derivation behind the\n * visual insert surface. Every registry manifest yields one tile per declared\n * fixture (or a single default-props tile), grouped by manifest `category`\n * and filtered by a free-text query over name / description / category — no\n * hand-maintained panel config. Broken fixtures degrade to tiles carrying\n * explicit `issues`, never to a missing entry or a crash.\n */\n\n/** One insertable tile in the blocks panel. */\nexport interface BlockTile {\n  /** Stable identity (`<componentId>::<variant>` or `preset::<key>`). */\n  key: string\n  /** Component id of the node the tile inserts. */\n  componentId: string\n  title: string\n  /** Variation label: the fixture name, `Default`, or a preset description. */\n  variant: string\n  description?: string\n  /**\n   * Validation problems detected while building the preview (unknown child\n   * component, undeclared slot, invalid fixture prop, missing\n   * implementation). A non-empty list marks the tile as degraded — it still\n   * renders and still inserts.\n   */\n  issues: string[]\n  /** Deterministic-id subtree rendered live in the tile thumbnail. */\n  previewNode: ComponentNode\n  /** Build the subtree to insert (ids are reassigned by the builder store). */\n  build: () => ComponentNode\n}\n\n/** Tiles of one manifest `category`. */\nexport interface BlockGroup {\n  category: string\n  tiles: BlockTile[]\n}\n\nexport interface BlockFilter {\n  /** Case-insensitive match over id, title, description, and category. */\n  query?: string\n  /** When set, only these component ids may be inserted (slot.allow). */\n  slotAllow?: string[]\n}\n\n/**\n * Intersect two component-id allow-lists. `undefined` means \"no constraint from\n * this source\", so the result is the other list (copied); two present lists yield\n * their set intersection, preserving the first list's order. This layers a\n * composition field's top-level `allow` vocabulary over a slot's positional\n * `allow` at the canvas root (EC-188): a component must satisfy BOTH leashes to be\n * offered. An empty array stays empty (\"allow nothing\"); callers wanting the\n * validator's \"empty = allow any\" must coalesce `[]` to `undefined` first (which\n * `resolveInsertContext` does via its `length > 0` guard, mirroring\n * `validateCompositionValue`).\n */\nexport function intersectAllow(\n  slotAllow: readonly string[] | undefined,\n  fieldAllow: readonly string[] | undefined,\n): string[] | undefined {\n  if (!slotAllow) return fieldAllow ? [...fieldAllow] : undefined\n  if (!fieldAllow) return [...slotAllow]\n  const inField = new Set(fieldAllow)\n  return slotAllow.filter((id) => inField.has(id))\n}\n\nconst UNCATEGORIZED = 'other'\n\nfunction prefixedCounter(prefix: string): () => string {\n  let n = 0\n  return () => {\n    n += 1\n    return `${prefix}-${n}`\n  }\n}\n\n/** A node built from a manifest's defaults with an explicit id. */\nfunction defaultNode(manifest: ComponentManifest, id: string): ComponentNode {\n  return { ...nodeFromManifest(manifest), id }\n}\n\n/** Structured issues for a component that cannot render (EC-055 statuses). */\nfunction manifestIssues(studio: StudioRegistry, manifest: ComponentManifest): string[] {\n  const status = componentStatus(studio, manifest)\n  if (status === 'incompatible') {\n    return [`No implementation is registered for \"${manifest.id}\".`]\n  }\n  if (status === 'invalid') {\n    return studio.registry.issues\n      .filter((issue) => issue.componentId === manifest.id)\n      .map((issue) => issue.message)\n  }\n  return []\n}\n\n/**\n * Build the configured subtree a fixture describes: manifest defaults overlaid\n * with the fixture's props, plus one default-props child node per\n * `slotChildren` component id. Never throws — unknown components, undeclared\n * slots, and invalid prop values become entries in `issues` while the node is\n * still produced (the renderer shows its own visible fallbacks for them).\n */\nexport function fixtureSubtree(\n  studio: StudioRegistry,\n  manifest: ComponentManifest,\n  fixture: ComponentFixture,\n  baseId: string,\n): { node: ComponentNode; issues: string[] } {\n  const issues: string[] = []\n  const fixtureProps = fixture.props ?? {}\n\n  for (const [name, value] of Object.entries(fixtureProps)) {\n    const spec = manifest.props[name]\n    if (!spec) {\n      issues.push(`Fixture \"${fixture.name}\" sets unknown prop \"${name}\".`)\n      continue\n    }\n    // EC-190: validate the fixture value with the prop's field-def validator.\n    if (!(propValueValidator(manifest, name)?.(value) ?? true)) {\n      issues.push(`Fixture \"${fixture.name}\" sets an invalid value for prop \"${name}\".`)\n    }\n  }\n\n  const node = nodeFromProps(manifest, fixtureProps, baseId)\n\n  if (fixture.slotChildren) {\n    const declared = new Set(manifest.slots.map((slot) => slot.name))\n    const slots: NonNullable<ComponentNode['slots']> = {}\n    for (const [slotName, childIds] of Object.entries(fixture.slotChildren)) {\n      if (!declared.has(slotName)) {\n        issues.push(`Fixture \"${fixture.name}\" fills undeclared slot \"${slotName}\".`)\n      }\n      slots[slotName] = childIds.map((childId, index) => {\n        const id = `${baseId}-${slotName}-${index}`\n        const childManifest = studio.registry.getManifest(childId)\n        if (!childManifest) {\n          issues.push(\n            `Fixture \"${fixture.name}\" references unknown component \"${childId}\" in slot \"${slotName}\".`,\n          )\n          // Keep the reference: the renderer shows a visible missing-component fallback.\n          return { id, componentId: childId }\n        }\n        return defaultNode(childManifest, id)\n      })\n    }\n    if (Object.keys(slots).length > 0) node.slots = slots\n  }\n\n  return { node, issues }\n}\n\n/** All tiles for one manifest: one per fixture, else a single default tile. */\nexport function tilesForManifest(studio: StudioRegistry, manifest: ComponentManifest): BlockTile[] {\n  const title = manifest.title ?? manifest.id\n  const baseIssues = manifestIssues(studio, manifest)\n\n  if (!manifest.fixtures || manifest.fixtures.length === 0) {\n    // No declared fixtures: preview via the shared preview specs (authored\n    // primitive previews or plain defaults), insert the bare manifest defaults.\n    const preview = previewSpecs(manifest)[0]!\n    return [\n      {\n        key: `${manifest.id}::default`,\n        componentId: manifest.id,\n        title,\n        variant: 'Default',\n        description: manifest.description,\n        issues: baseIssues,\n        previewNode: preview.node,\n        build: () => nodeFromManifest(manifest),\n      },\n    ]\n  }\n\n  return manifest.fixtures.map((fixture, index) => {\n    const { node, issues } = fixtureSubtree(\n      studio,\n      manifest,\n      fixture,\n      `preview-${manifest.id}-${index}`,\n    )\n    return {\n      key: `${manifest.id}::${fixture.name}`,\n      componentId: manifest.id,\n      title,\n      variant: fixture.name,\n      description: manifest.description,\n      issues: [...baseIssues, ...issues],\n      previewNode: node,\n      build: () => fixtureSubtree(studio, manifest, fixture, 'tmp').node,\n    }\n  })\n}\n\nfunction matches(manifest: ComponentManifest, query: string): boolean {\n  const hay = [manifest.id, manifest.title, manifest.description, manifest.category]\n    .filter(Boolean)\n    .join(' ')\n    .toLowerCase()\n  return hay.includes(query)\n}\n\n/**\n * Derive the panel's category groups from the registry: filter by slot allow\n * list and query, expand manifests into tiles, group by `category`, and sort\n * categories alphabetically (registry order within a group). Deterministic.\n */\nexport function blockGroups(studio: StudioRegistry, filter: BlockFilter = {}): BlockGroup[] {\n  const query = filter.query?.trim().toLowerCase()\n  const allow = filter.slotAllow\n\n  const groups = new Map<string, BlockTile[]>()\n  for (const manifest of studio.registry.list()) {\n    // EC-191: the canvas is client-rendered, so only canvas-eligible\n    // (client-renderable) components are offered for insertion; server-only / RSC\n    // components are usable in dev frames, not placed on the canvas.\n    if (!isCanvasEligible(manifest)) continue\n    if (allow && !allow.includes(manifest.id)) continue\n    if (query && !matches(manifest, query)) continue\n    const category = manifest.category ?? UNCATEGORIZED\n    const tiles = groups.get(category) ?? []\n    tiles.push(...tilesForManifest(studio, manifest))\n    groups.set(category, tiles)\n  }\n\n  return [...groups.entries()]\n    .sort(([a], [b]) => a.localeCompare(b))\n    .map(([category, tiles]) => ({ category, tiles }))\n}\n\n/**\n * Layout helper presets (EC-067) as panel tiles. Preview nodes are re-id'd\n * deterministically so sibling React keys stay unique.\n */\nexport function presetTiles(slotAllow?: string[]): BlockTile[] {\n  return LAYOUT_PRESETS.filter(\n    (preset) => !slotAllow || slotAllow.includes(preset.build().componentId),\n  ).map((preset) => ({\n    key: `preset::${preset.key}`,\n    componentId: preset.build().componentId,\n    title: preset.label,\n    variant: preset.description,\n    description: preset.description,\n    issues: [],\n    previewNode: cloneWithNewIds(preset.build(), prefixedCounter(`preview-preset-${preset.key}`)),\n    build: () => preset.build(),\n  }))\n}\n"]}
+{"version":3,"file":"blocks-model.js","sourceRoot":"","sources":["../../../src/components/builder/blocks-model.ts"],"names":[],"mappings":"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","sourcesContent":["import { cloneWithNewIds, isLayoutContainerId } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentFixture, ComponentManifest } from '@elytracms/core/component-registry'\nimport { isCanvasEligible, propValueValidator } from '@elytracms/core/component-registry'\nimport { componentStatus } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { nodeFromProps, previewSpecs } from '@elytracms/studio/lib/registry/preview'\nimport { LAYOUT_PRESETS, nodeFromManifest, seededNodeFromManifest } from './node-factory'\n\n/**\n * Blocks panel model (EC-164) — the pure, React-free derivation behind the\n * visual insert surface. Every registry manifest yields one tile per declared\n * fixture (or a single default-props tile), grouped by manifest `category`\n * and filtered by a free-text query over name / description / category — no\n * hand-maintained panel config. Broken fixtures degrade to tiles carrying\n * explicit `issues`, never to a missing entry or a crash.\n */\n\n/** One insertable tile in the blocks panel. */\nexport interface BlockTile {\n  /** Stable identity (`<componentId>::<variant>` or `preset::<key>`). */\n  key: string\n  /** Component id of the node the tile inserts. */\n  componentId: string\n  title: string\n  /** Variation label: the fixture name, `Default`, or a preset description. */\n  variant: string\n  description?: string\n  /**\n   * Validation problems detected while building the preview (unknown child\n   * component, undeclared slot, invalid fixture prop, missing\n   * implementation). A non-empty list marks the tile as degraded — it still\n   * renders and still inserts.\n   */\n  issues: string[]\n  /** Deterministic-id subtree rendered live in the tile thumbnail. */\n  previewNode: ComponentNode\n  /** Build the subtree to insert (ids are reassigned by the builder store). */\n  build: () => ComponentNode\n}\n\n/** Tiles of one manifest `category`. */\nexport interface BlockGroup {\n  category: string\n  tiles: BlockTile[]\n}\n\nexport interface BlockFilter {\n  /** Case-insensitive match over id, title, description, and category. */\n  query?: string\n  /** When set, only these component ids may be inserted (slot.allow). */\n  slotAllow?: string[]\n}\n\n/**\n * Intersect two component-id allow-lists. `undefined` means \"no constraint from\n * this source\", so the result is the other list (copied); two present lists yield\n * their set intersection, preserving the first list's order. This layers a\n * composition field's top-level `allow` vocabulary over a slot's positional\n * `allow` at the canvas root (EC-188): a component must satisfy BOTH leashes to be\n * offered. An empty array stays empty (\"allow nothing\"); callers wanting the\n * validator's \"empty = allow any\" must coalesce `[]` to `undefined` first (which\n * `resolveInsertContext` does via its `length > 0` guard, mirroring\n * `validateCompositionValue`).\n */\nexport function intersectAllow(\n  slotAllow: readonly string[] | undefined,\n  fieldAllow: readonly string[] | undefined,\n): string[] | undefined {\n  if (!slotAllow) return fieldAllow ? [...fieldAllow] : undefined\n  if (!fieldAllow) return [...slotAllow]\n  const inField = new Set(fieldAllow)\n  return slotAllow.filter((id) => inField.has(id))\n}\n\nconst UNCATEGORIZED = 'other'\n\nfunction prefixedCounter(prefix: string): () => string {\n  let n = 0\n  return () => {\n    n += 1\n    return `${prefix}-${n}`\n  }\n}\n\n/** A node built from a manifest's defaults with an explicit id. */\nfunction defaultNode(manifest: ComponentManifest, id: string): ComponentNode {\n  return { ...nodeFromManifest(manifest), id }\n}\n\n/** Structured issues for a component that cannot render (EC-055 statuses). */\nfunction manifestIssues(studio: StudioRegistry, manifest: ComponentManifest): string[] {\n  const status = componentStatus(studio, manifest)\n  if (status === 'incompatible') {\n    return [`No implementation is registered for \"${manifest.id}\".`]\n  }\n  if (status === 'invalid') {\n    return studio.registry.issues\n      .filter((issue) => issue.componentId === manifest.id)\n      .map((issue) => issue.message)\n  }\n  return []\n}\n\n/**\n * Build the configured subtree a fixture describes: manifest defaults overlaid\n * with the fixture's props, plus one default-props child node per\n * `slotChildren` component id. Never throws — unknown components, undeclared\n * slots, and invalid prop values become entries in `issues` while the node is\n * still produced (the renderer shows its own visible fallbacks for them).\n */\nexport function fixtureSubtree(\n  studio: StudioRegistry,\n  manifest: ComponentManifest,\n  fixture: ComponentFixture,\n  baseId: string,\n): { node: ComponentNode; issues: string[] } {\n  const issues: string[] = []\n  const fixtureProps = fixture.props ?? {}\n\n  for (const [name, value] of Object.entries(fixtureProps)) {\n    const spec = manifest.props[name]\n    if (!spec) {\n      issues.push(`Fixture \"${fixture.name}\" sets unknown prop \"${name}\".`)\n      continue\n    }\n    // EC-190: validate the fixture value with the prop's field-def validator.\n    if (!(propValueValidator(manifest, name)?.(value) ?? true)) {\n      issues.push(`Fixture \"${fixture.name}\" sets an invalid value for prop \"${name}\".`)\n    }\n  }\n\n  const node = nodeFromProps(manifest, fixtureProps, baseId)\n\n  if (fixture.slotChildren) {\n    const declared = new Set(manifest.slots.map((slot) => slot.name))\n    const slots: NonNullable<ComponentNode['slots']> = {}\n    for (const [slotName, childIds] of Object.entries(fixture.slotChildren)) {\n      if (!declared.has(slotName)) {\n        issues.push(`Fixture \"${fixture.name}\" fills undeclared slot \"${slotName}\".`)\n      }\n      slots[slotName] = childIds.map((childId, index) => {\n        const id = `${baseId}-${slotName}-${index}`\n        const childManifest = studio.registry.getManifest(childId)\n        if (!childManifest) {\n          issues.push(\n            `Fixture \"${fixture.name}\" references unknown component \"${childId}\" in slot \"${slotName}\".`,\n          )\n          // Keep the reference: the renderer shows a visible missing-component fallback.\n          return { id, componentId: childId }\n        }\n        return defaultNode(childManifest, id)\n      })\n    }\n    if (Object.keys(slots).length > 0) node.slots = slots\n  }\n\n  return { node, issues }\n}\n\n/** All tiles for one manifest: one per fixture, else a single default tile. */\nexport function tilesForManifest(studio: StudioRegistry, manifest: ComponentManifest): BlockTile[] {\n  const title = manifest.title ?? manifest.id\n  const baseIssues = manifestIssues(studio, manifest)\n\n  if (!manifest.fixtures || manifest.fixtures.length === 0) {\n    // No declared fixtures: insert the manifest defaults, seeding layout\n    // containers so a bare Stack/Grid survives EC-161 normalization instead of\n    // vanishing on commit (EC-383). Preview from the seeded node for containers\n    // (WYSIWYG with the insert) and from the shared preview specs otherwise\n    // (authored primitive previews or plain defaults).\n    const previewNode = isLayoutContainerId(manifest.id)\n      ? cloneWithNewIds(seededNodeFromManifest(manifest), prefixedCounter(`preview-${manifest.id}`))\n      : previewSpecs(manifest)[0]!.node\n    return [\n      {\n        key: `${manifest.id}::default`,\n        componentId: manifest.id,\n        title,\n        variant: 'Default',\n        description: manifest.description,\n        issues: baseIssues,\n        previewNode,\n        build: () => seededNodeFromManifest(manifest),\n      },\n    ]\n  }\n\n  return manifest.fixtures.map((fixture, index) => {\n    const { node, issues } = fixtureSubtree(\n      studio,\n      manifest,\n      fixture,\n      `preview-${manifest.id}-${index}`,\n    )\n    return {\n      key: `${manifest.id}::${fixture.name}`,\n      componentId: manifest.id,\n      title,\n      variant: fixture.name,\n      description: manifest.description,\n      issues: [...baseIssues, ...issues],\n      previewNode: node,\n      build: () => fixtureSubtree(studio, manifest, fixture, 'tmp').node,\n    }\n  })\n}\n\nfunction matches(manifest: ComponentManifest, query: string): boolean {\n  const hay = [manifest.id, manifest.title, manifest.description, manifest.category]\n    .filter(Boolean)\n    .join(' ')\n    .toLowerCase()\n  return hay.includes(query)\n}\n\n/**\n * Derive the panel's category groups from the registry: filter by slot allow\n * list and query, expand manifests into tiles, group by `category`, and sort\n * categories alphabetically (registry order within a group). Deterministic.\n */\nexport function blockGroups(studio: StudioRegistry, filter: BlockFilter = {}): BlockGroup[] {\n  const query = filter.query?.trim().toLowerCase()\n  const allow = filter.slotAllow\n\n  const groups = new Map<string, BlockTile[]>()\n  for (const manifest of studio.registry.list()) {\n    // EC-191: the canvas is client-rendered, so only canvas-eligible\n    // (client-renderable) components are offered for insertion; server-only / RSC\n    // components are usable in dev frames, not placed on the canvas.\n    if (!isCanvasEligible(manifest)) continue\n    if (allow && !allow.includes(manifest.id)) continue\n    if (query && !matches(manifest, query)) continue\n    const category = manifest.category ?? UNCATEGORIZED\n    const tiles = groups.get(category) ?? []\n    tiles.push(...tilesForManifest(studio, manifest))\n    groups.set(category, tiles)\n  }\n\n  return [...groups.entries()]\n    .sort(([a], [b]) => a.localeCompare(b))\n    .map(([category, tiles]) => ({ category, tiles }))\n}\n\n/**\n * Layout helper presets (EC-067) as panel tiles. Preview nodes are re-id'd\n * deterministically so sibling React keys stay unique.\n */\nexport function presetTiles(slotAllow?: string[]): BlockTile[] {\n  return LAYOUT_PRESETS.filter(\n    (preset) => !slotAllow || slotAllow.includes(preset.build().componentId),\n  ).map((preset) => ({\n    key: `preset::${preset.key}`,\n    componentId: preset.build().componentId,\n    title: preset.label,\n    variant: preset.description,\n    description: preset.description,\n    issues: [],\n    previewNode: cloneWithNewIds(preset.build(), prefixedCounter(`preview-preset-${preset.key}`)),\n    build: () => preset.build(),\n  }))\n}\n"]}

package/dist/components/builder/canvas-dnd.d.ts

@@ -0,0 +1,59 @@
+import type { RefObject } from 'react';
+import type { ComponentNode } from '@elytracms/core/project-graph';
+import type { ManifestRules } from '@elytracms/studio/lib/dnd/drop-rules';
+import type { StudioRegistry } from '@elytracms/studio/lib/registry';
+import type { BuilderAction } from './builder-store.js';
+import type { ActiveInlineEdit } from './canvas-inline-editing.js';
+/**
+ * Drag & drop on the canvas (EC-160), extracted from `BuilderCanvas` (EC-330).
+ * Eligibility is the pure shared rule set (`lib/dnd/drop-rules`) — the same
+ * functions the page tree consumes — evaluated live during `dragover`; the
+ * wrapper under the pointer shows the resolution (`data-ec-drop`:
+ * into/before/after, or `blocked` for a visible rejection). A completed drop
+ * dispatches exactly one builder action (move or insert) → one operations
+ * command → one undo step. Ineligible targets never `preventDefault`, so
+ * releasing over one is a native no-op.
+ *
+ * The listener wiring is framework-free ({@link attachCanvasDndListeners},
+ * the `clipboard-actions` pattern) so the whole gesture state machine —
+ * arm-on-mousedown, live indicator, plan resolution, one-dispatch drop — is
+ * unit-testable without a DOM environment; {@link useCanvasDnd} only owns the
+ * React effect lifecycle.
+ */
+/** The structural slice of the iframe document the DnD wiring needs. */
+export interface CanvasDndDocument {
+    addEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void;
+    removeEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void;
+    querySelector(selectors: string): Element | null;
+}
+export interface CanvasDndDeps {
+    /** The current composition root (read live — listeners outlive renders). */
+    currentRoot(): ComponentNode;
+    /** Manifest lookup feeding the pure drop rules. */
+    getManifest(componentId: string): ManifestRules | undefined;
+    dispatch(action: BuilderAction): void;
+    /**
+     * Whether `target` sits inside the live inline editor (EC-158): a press
+     * there must keep native caret clicks/text selection, never start a node drag.
+     */
+    isEditingTarget(target: EventTarget | null): boolean;
+}
+/**
+ * Wire the canvas drag-and-drop listeners onto the iframe document (native —
+ * React's synthetic events don't cross frames). Returns the detach function.
+ */
+export declare function attachCanvasDndListeners(doc: CanvasDndDocument, deps: CanvasDndDeps): () => void;
+/**
+ * The React face of the canvas DnD wiring: attach on the iframe document once
+ * it exists, detach on doc swap/unmount. State lives in refs on purpose —
+ * listeners outlive renders and must read the *current* graph and editing
+ * session without re-subscribing on every edit.
+ */
+export declare function useCanvasDnd(doc: Document | null, deps: {
+    /** The live composition root (`builder.present`, mirrored into a ref). */
+    presentRef: RefObject<ComponentNode>;
+    dispatch: (action: BuilderAction) => void;
+    studio: StudioRegistry;
+    /** The live inline-edit session (owned by `useCanvasInlineEditing`). */
+    editingRef: RefObject<ActiveInlineEdit | null>;
+}): void;

package/dist/components/builder/canvas-dnd.js

@@ -0,0 +1,207 @@
+import { useEffect } from 'react';
+import { getNode, getParentInfo } from '@elytracms/core/project-graph';
+import { canNestInto, containerFlowAxis, dropIndicatorFor, dropPositionForPoint, resolveDrop, } from '@elytracms/studio/lib/dnd/drop-rules';
+import { activeDrag, beginDrag, endDrag, onDragSessionEnd } from './drag-session.js';
+import { wrapperAt } from './canvas-dom.js';
+/**
+ * Wire the canvas drag-and-drop listeners onto the iframe document (native —
+ * React's synthetic events don't cross frames). Returns the detach function.
+ */
+export function attachCanvasDndListeners(doc, deps) {
+    const { currentRoot, getManifest, dispatch } = deps;
+    let dropWrapper = null;
+    let dropPlan = null;
+    const clearIndicator = () => {
+        dropWrapper?.removeAttribute('data-ec-drop');
+        dropWrapper?.removeAttribute('data-ec-drop-axis');
+        dropWrapper = null;
+        dropPlan = null;
+    };
+    const showIndicator = (wrapper, state, axis) => {
+        if (dropWrapper && dropWrapper !== wrapper) {
+            dropWrapper.removeAttribute('data-ec-drop');
+            dropWrapper.removeAttribute('data-ec-drop-axis');
+        }
+        dropWrapper = wrapper;
+        if (!wrapper)
+            return;
+        if (state) {
+            wrapper.setAttribute('data-ec-drop', state);
+            // Before/after bars render along the parent's flow axis (EC-162).
+            wrapper.setAttribute('data-ec-drop-axis', axis === 'horizontal' ? 'x' : 'y');
+        }
+        else {
+            wrapper.removeAttribute('data-ec-drop');
+            wrapper.removeAttribute('data-ec-drop-axis');
+        }
+    };
+    // Wrappers are armed draggable per-gesture on mousedown, never via render
+    // state: the active inline editor (EC-158) must keep native caret clicks
+    // and text selection, so a press inside the editing host disarms its
+    // wrapper instead of starting a node drag.
+    const onMouseDown = (e) => {
+        const wrapper = wrapperAt(e.target);
+        if (!wrapper)
+            return;
+        const root = currentRoot();
+        const nodeId = wrapper.getAttribute('data-ec-node-id');
+        const inEditor = deps.isEditingTarget(e.target);
+        if (root && nodeId && nodeId !== root.id && !inEditor) {
+            wrapper.setAttribute('draggable', 'true');
+        }
+        else {
+            wrapper.removeAttribute('draggable');
+        }
+    };
+    const onDragStart = (e) => {
+        const event = e;
+        // Drags inside the live inline editor are native text drags — leave them alone.
+        if (deps.isEditingTarget(event.target))
+            return;
+        const wrapper = wrapperAt(event.target);
+        if (!wrapper)
+            return;
+        const root = currentRoot();
+        const nodeId = wrapper.getAttribute('data-ec-node-id');
+        const node = root ? getNode(root, nodeId) : undefined;
+        if (!root || !node || nodeId === root.id) {
+            event.preventDefault();
+            return;
+        }
+        beginDrag({ subject: { kind: 'node', nodeId, componentId: node.componentId }, source: 'canvas', label: node.componentId }, event.dataTransfer);
+    };
+    const onDragOver = (e) => {
+        const event = e;
+        const drag = activeDrag();
+        if (!drag)
+            return;
+        const root = currentRoot();
+        if (!root)
+            return;
+        const wrapper = wrapperAt(event.target);
+        // Empty space around the page subtree targets the root slot (append).
+        const refId = wrapper?.getAttribute('data-ec-node-id') ?? root.id;
+        const refWrapper = wrapper ?? doc.querySelector(`[data-ec-node-id="${root.id}"]`);
+        const refNode = getNode(root, refId);
+        if (!refNode) {
+            clearIndicator();
+            return;
+        }
+        let position = 'into';
+        let flow = 'vertical';
+        if (wrapper && refId !== root.id) {
+            const rect = wrapper.getBoundingClientRect();
+            // Hit-bands follow the parent's flow axis (EC-162); the cross-axis
+            // side bands of vertically flowing targets are the wrap gesture.
+            flow = containerFlowAxis(getParentInfo(root, refId)?.parent);
+            position = dropPositionForPoint({
+                x: rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0.5,
+                y: rect.height > 0 ? (event.clientY - rect.top) / rect.height : 0.5,
+                flow,
+                nestable: canNestInto(getManifest, refNode.componentId),
+                edges: true,
+                wrappable: true,
+            });
+        }
+        const resolution = resolveDrop({
+            root,
+            getManifest,
+            subject: drag.subject,
+            location: { nodeId: refId, position },
+        });
+        showIndicator(refWrapper, dropIndicatorFor(resolution, position), flow);
+        if (resolution.eligible) {
+            dropPlan = resolution;
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = drag.subject.kind === 'node' ? 'move' : 'copy';
+            }
+        }
+        else {
+            dropPlan = null;
+        }
+    };
+    const onDrop = (e) => {
+        const event = e;
+        const drag = activeDrag();
+        if (!drag)
+            return;
+        const plan = dropPlan;
+        clearIndicator();
+        if (!plan)
+            return;
+        event.preventDefault();
+        // Exactly one dispatch per completed drop (one undo step, one command).
+        if (plan.kind === 'move') {
+            dispatch({ type: 'move', id: plan.nodeId, target: plan.target });
+        }
+        else if (plan.kind === 'wrap') {
+            // EC-162 gesture: reference + subject become a two-column Grid.
+            const subject = plan.nodeId !== undefined
+                ? { kind: 'node', nodeId: plan.nodeId }
+                : drag.buildNode
+                    ? { kind: 'component', node: drag.buildNode() }
+                    : null;
+            if (!subject) {
+                endDrag('cancelled');
+                return;
+            }
+            dispatch({ type: 'wrap', referenceId: plan.referenceId, side: plan.side, subject });
+        }
+        else if (drag.buildNode) {
+            dispatch({ type: 'insert', target: plan.target, node: drag.buildNode() });
+        }
+        else {
+            endDrag('cancelled');
+            return;
+        }
+        endDrag('dropped');
+    };
+    const onDragEnd = () => {
+        clearIndicator();
+        endDrag('cancelled');
+    };
+    const onDragLeave = (e) => {
+        // Leaving the iframe document entirely (relatedTarget is null).
+        if (!e.relatedTarget)
+            clearIndicator();
+    };
+    // Cleanup when the drag ends anywhere (e.g. dropped on the page tree).
+    const unsubscribe = onDragSessionEnd(() => clearIndicator());
+    doc.addEventListener('mousedown', onMouseDown, true);
+    doc.addEventListener('dragstart', onDragStart);
+    doc.addEventListener('dragover', onDragOver);
+    doc.addEventListener('drop', onDrop);
+    doc.addEventListener('dragend', onDragEnd);
+    doc.addEventListener('dragleave', onDragLeave);
+    return () => {
+        unsubscribe();
+        clearIndicator();
+        doc.removeEventListener('mousedown', onMouseDown, true);
+        doc.removeEventListener('dragstart', onDragStart);
+        doc.removeEventListener('dragover', onDragOver);
+        doc.removeEventListener('drop', onDrop);
+        doc.removeEventListener('dragend', onDragEnd);
+        doc.removeEventListener('dragleave', onDragLeave);
+    };
+}
+/**
+ * The React face of the canvas DnD wiring: attach on the iframe document once
+ * it exists, detach on doc swap/unmount. State lives in refs on purpose —
+ * listeners outlive renders and must read the *current* graph and editing
+ * session without re-subscribing on every edit.
+ */
+export function useCanvasDnd(doc, deps) {
+    const { presentRef, dispatch, studio, editingRef } = deps;
+    useEffect(() => {
+        if (!doc)
+            return;
+        return attachCanvasDndListeners(doc, {
+            currentRoot: () => presentRef.current,
+            getManifest: (id) => studio.registry.getManifest(id),
+            dispatch,
+            isEditingTarget: (target) => editingRef.current?.host.contains(target) ?? false,
+        });
+    }, [doc, dispatch, studio, presentRef, editingRef]);
+}
+//# sourceMappingURL=canvas-dnd.js.map

package/dist/components/builder/canvas-dnd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-dnd.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-dnd.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from 'react'\nimport type { RefObject } from 'react'\nimport { getNode, getParentInfo } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport {\n  canNestInto,\n  containerFlowAxis,\n  dropIndicatorFor,\n  dropPositionForPoint,\n  resolveDrop,\n} from '@elytracms/studio/lib/dnd/drop-rules'\nimport type { DropPlan, DropPosition, FlowAxis, ManifestRules } from '@elytracms/studio/lib/dnd/drop-rules'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport type { BuilderAction } from './builder-store'\nimport { activeDrag, beginDrag, endDrag, onDragSessionEnd } from './drag-session'\nimport type { ActiveInlineEdit } from './canvas-inline-editing'\nimport { wrapperAt } from './canvas-dom'\n\n/**\n * Drag & drop on the canvas (EC-160), extracted from `BuilderCanvas` (EC-330).\n * Eligibility is the pure shared rule set (`lib/dnd/drop-rules`) — the same\n * functions the page tree consumes — evaluated live during `dragover`; the\n * wrapper under the pointer shows the resolution (`data-ec-drop`:\n * into/before/after, or `blocked` for a visible rejection). A completed drop\n * dispatches exactly one builder action (move or insert) → one operations\n * command → one undo step. Ineligible targets never `preventDefault`, so\n * releasing over one is a native no-op.\n *\n * The listener wiring is framework-free ({@link attachCanvasDndListeners},\n * the `clipboard-actions` pattern) so the whole gesture state machine —\n * arm-on-mousedown, live indicator, plan resolution, one-dispatch drop — is\n * unit-testable without a DOM environment; {@link useCanvasDnd} only owns the\n * React effect lifecycle.\n */\n\n/** The structural slice of the iframe document the DnD wiring needs. */\nexport interface CanvasDndDocument {\n  addEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void\n  removeEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void\n  querySelector(selectors: string): Element | null\n}\n\nexport interface CanvasDndDeps {\n  /** The current composition root (read live — listeners outlive renders). */\n  currentRoot(): ComponentNode\n  /** Manifest lookup feeding the pure drop rules. */\n  getManifest(componentId: string): ManifestRules | undefined\n  dispatch(action: BuilderAction): void\n  /**\n   * Whether `target` sits inside the live inline editor (EC-158): a press\n   * there must keep native caret clicks/text selection, never start a node drag.\n   */\n  isEditingTarget(target: EventTarget | null): boolean\n}\n\n/**\n * Wire the canvas drag-and-drop listeners onto the iframe document (native —\n * React's synthetic events don't cross frames). Returns the detach function.\n */\nexport function attachCanvasDndListeners(doc: CanvasDndDocument, deps: CanvasDndDeps): () => void {\n  const { currentRoot, getManifest, dispatch } = deps\n\n  let dropWrapper: HTMLElement | null = null\n  let dropPlan: DropPlan | null = null\n  const clearIndicator = () => {\n    dropWrapper?.removeAttribute('data-ec-drop')\n    dropWrapper?.removeAttribute('data-ec-drop-axis')\n    dropWrapper = null\n    dropPlan = null\n  }\n  const showIndicator = (wrapper: HTMLElement | null, state: string | null, axis: FlowAxis) => {\n    if (dropWrapper && dropWrapper !== wrapper) {\n      dropWrapper.removeAttribute('data-ec-drop')\n      dropWrapper.removeAttribute('data-ec-drop-axis')\n    }\n    dropWrapper = wrapper\n    if (!wrapper) return\n    if (state) {\n      wrapper.setAttribute('data-ec-drop', state)\n      // Before/after bars render along the parent's flow axis (EC-162).\n      wrapper.setAttribute('data-ec-drop-axis', axis === 'horizontal' ? 'x' : 'y')\n    } else {\n      wrapper.removeAttribute('data-ec-drop')\n      wrapper.removeAttribute('data-ec-drop-axis')\n    }\n  }\n\n  // Wrappers are armed draggable per-gesture on mousedown, never via render\n  // state: the active inline editor (EC-158) must keep native caret clicks\n  // and text selection, so a press inside the editing host disarms its\n  // wrapper instead of starting a node drag.\n  const onMouseDown = (e: Event) => {\n    const wrapper = wrapperAt(e.target)\n    if (!wrapper) return\n    const root = currentRoot()\n    const nodeId = wrapper.getAttribute('data-ec-node-id')\n    const inEditor = deps.isEditingTarget(e.target)\n    if (root && nodeId && nodeId !== root.id && !inEditor) {\n      wrapper.setAttribute('draggable', 'true')\n    } else {\n      wrapper.removeAttribute('draggable')\n    }\n  }\n\n  const onDragStart = (e: Event) => {\n    const event = e as DragEvent\n    // Drags inside the live inline editor are native text drags — leave them alone.\n    if (deps.isEditingTarget(event.target)) return\n    const wrapper = wrapperAt(event.target)\n    if (!wrapper) return\n    const root = currentRoot()\n    const nodeId = wrapper.getAttribute('data-ec-node-id')!\n    const node = root ? getNode(root, nodeId) : undefined\n    if (!root || !node || nodeId === root.id) {\n      event.preventDefault()\n      return\n    }\n    beginDrag(\n      { subject: { kind: 'node', nodeId, componentId: node.componentId }, source: 'canvas', label: node.componentId },\n      event.dataTransfer,\n    )\n  }\n\n  const onDragOver = (e: Event) => {\n    const event = e as DragEvent\n    const drag = activeDrag()\n    if (!drag) return\n    const root = currentRoot()\n    if (!root) return\n    const wrapper = wrapperAt(event.target)\n    // Empty space around the page subtree targets the root slot (append).\n    const refId = wrapper?.getAttribute('data-ec-node-id') ?? root.id\n    const refWrapper =\n      wrapper ?? (doc.querySelector(`[data-ec-node-id=\"${root.id}\"]`) as HTMLElement | null)\n    const refNode = getNode(root, refId)\n    if (!refNode) {\n      clearIndicator()\n      return\n    }\n    let position: DropPosition = 'into'\n    let flow: FlowAxis = 'vertical'\n    if (wrapper && refId !== root.id) {\n      const rect = wrapper.getBoundingClientRect()\n      // Hit-bands follow the parent's flow axis (EC-162); the cross-axis\n      // side bands of vertically flowing targets are the wrap gesture.\n      flow = containerFlowAxis(getParentInfo(root, refId)?.parent)\n      position = dropPositionForPoint({\n        x: rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0.5,\n        y: rect.height > 0 ? (event.clientY - rect.top) / rect.height : 0.5,\n        flow,\n        nestable: canNestInto(getManifest, refNode.componentId),\n        edges: true,\n        wrappable: true,\n      })\n    }\n    const resolution = resolveDrop({\n      root,\n      getManifest,\n      subject: drag.subject,\n      location: { nodeId: refId, position },\n    })\n    showIndicator(refWrapper, dropIndicatorFor(resolution, position), flow)\n    if (resolution.eligible) {\n      dropPlan = resolution\n      event.preventDefault()\n      if (event.dataTransfer) {\n        event.dataTransfer.dropEffect = drag.subject.kind === 'node' ? 'move' : 'copy'\n      }\n    } else {\n      dropPlan = null\n    }\n  }\n\n  const onDrop = (e: Event) => {\n    const event = e as DragEvent\n    const drag = activeDrag()\n    if (!drag) return\n    const plan = dropPlan\n    clearIndicator()\n    if (!plan) return\n    event.preventDefault()\n    // Exactly one dispatch per completed drop (one undo step, one command).\n    if (plan.kind === 'move') {\n      dispatch({ type: 'move', id: plan.nodeId, target: plan.target })\n    } else if (plan.kind === 'wrap') {\n      // EC-162 gesture: reference + subject become a two-column Grid.\n      const subject =\n        plan.nodeId !== undefined\n          ? { kind: 'node' as const, nodeId: plan.nodeId }\n          : drag.buildNode\n            ? { kind: 'component' as const, node: drag.buildNode() }\n            : null\n      if (!subject) {\n        endDrag('cancelled')\n        return\n      }\n      dispatch({ type: 'wrap', referenceId: plan.referenceId, side: plan.side, subject })\n    } else if (drag.buildNode) {\n      dispatch({ type: 'insert', target: plan.target, node: drag.buildNode() })\n    } else {\n      endDrag('cancelled')\n      return\n    }\n    endDrag('dropped')\n  }\n\n  const onDragEnd = () => {\n    clearIndicator()\n    endDrag('cancelled')\n  }\n\n  const onDragLeave = (e: Event) => {\n    // Leaving the iframe document entirely (relatedTarget is null).\n    if (!(e as DragEvent).relatedTarget) clearIndicator()\n  }\n\n  // Cleanup when the drag ends anywhere (e.g. dropped on the page tree).\n  const unsubscribe = onDragSessionEnd(() => clearIndicator())\n\n  doc.addEventListener('mousedown', onMouseDown, true)\n  doc.addEventListener('dragstart', onDragStart)\n  doc.addEventListener('dragover', onDragOver)\n  doc.addEventListener('drop', onDrop)\n  doc.addEventListener('dragend', onDragEnd)\n  doc.addEventListener('dragleave', onDragLeave)\n  return () => {\n    unsubscribe()\n    clearIndicator()\n    doc.removeEventListener('mousedown', onMouseDown, true)\n    doc.removeEventListener('dragstart', onDragStart)\n    doc.removeEventListener('dragover', onDragOver)\n    doc.removeEventListener('drop', onDrop)\n    doc.removeEventListener('dragend', onDragEnd)\n    doc.removeEventListener('dragleave', onDragLeave)\n  }\n}\n\n/**\n * The React face of the canvas DnD wiring: attach on the iframe document once\n * it exists, detach on doc swap/unmount. State lives in refs on purpose —\n * listeners outlive renders and must read the *current* graph and editing\n * session without re-subscribing on every edit.\n */\nexport function useCanvasDnd(\n  doc: Document | null,\n  deps: {\n    /** The live composition root (`builder.present`, mirrored into a ref). */\n    presentRef: RefObject<ComponentNode>\n    dispatch: (action: BuilderAction) => void\n    studio: StudioRegistry\n    /** The live inline-edit session (owned by `useCanvasInlineEditing`). */\n    editingRef: RefObject<ActiveInlineEdit | null>\n  },\n): void {\n  const { presentRef, dispatch, studio, editingRef } = deps\n  useEffect(() => {\n    if (!doc) return\n    return attachCanvasDndListeners(doc, {\n      currentRoot: () => presentRef.current,\n      getManifest: (id) => studio.registry.getManifest(id),\n      dispatch,\n      isEditingTarget: (target) => editingRef.current?.host.contains(target as Node) ?? false,\n    })\n  }, [doc, dispatch, studio, presentRef, editingRef])\n}\n"]}

package/dist/components/builder/canvas-dom.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shared canvas DOM helpers (EC-330): the per-node editable wrappers the
+ * canvas renders (`decorateNode` stamps `data-ec-node-id`) are the anchor
+ * every iframe listener resolves gestures against — selection/hover
+ * (canvas.tsx), drag & drop (`canvas-dnd`), and inline editing
+ * (`canvas-inline-editing`) all share these two lookups.
+ */
+/** The node id of the editable wrapper containing `target`, or null. */
+export declare function nodeIdAt(target: EventTarget | null): string | null;
+/** The editable wrapper element containing `target`, or null. */
+export declare function wrapperAt(target: EventTarget | null): HTMLElement | null;

package/dist/components/builder/canvas-dom.js

@@ -0,0 +1,17 @@
+/**
+ * Shared canvas DOM helpers (EC-330): the per-node editable wrappers the
+ * canvas renders (`decorateNode` stamps `data-ec-node-id`) are the anchor
+ * every iframe listener resolves gestures against — selection/hover
+ * (canvas.tsx), drag & drop (`canvas-dnd`), and inline editing
+ * (`canvas-inline-editing`) all share these two lookups.
+ */
+/** The node id of the editable wrapper containing `target`, or null. */
+export function nodeIdAt(target) {
+    return wrapperAt(target)?.getAttribute('data-ec-node-id') ?? null;
+}
+/** The editable wrapper element containing `target`, or null. */
+export function wrapperAt(target) {
+    const el = target;
+    return el?.closest?.('[data-ec-node-id]') ?? null;
+}
+//# sourceMappingURL=canvas-dom.js.map

package/dist/components/builder/canvas-dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-dom.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-dom.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,wEAAwE;AACxE,MAAM,UAAU,QAAQ,CAAC,MAA0B;IACjD,OAAO,SAAS,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAA;AACnE,CAAC;AAED,iEAAiE;AACjE,MAAM,UAAU,SAAS,CAAC,MAA0B;IAClD,MAAM,EAAE,GAAG,MAA4B,CAAA;IACvC,OAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,mBAAmB,CAAwB,IAAI,IAAI,CAAA;AAC3E,CAAC","sourcesContent":["/**\n * Shared canvas DOM helpers (EC-330): the per-node editable wrappers the\n * canvas renders (`decorateNode` stamps `data-ec-node-id`) are the anchor\n * every iframe listener resolves gestures against — selection/hover\n * (canvas.tsx), drag & drop (`canvas-dnd`), and inline editing\n * (`canvas-inline-editing`) all share these two lookups.\n */\n\n/** The node id of the editable wrapper containing `target`, or null. */\nexport function nodeIdAt(target: EventTarget | null): string | null {\n  return wrapperAt(target)?.getAttribute('data-ec-node-id') ?? null\n}\n\n/** The editable wrapper element containing `target`, or null. */\nexport function wrapperAt(target: EventTarget | null): HTMLElement | null {\n  const el = target as HTMLElement | null\n  return (el?.closest?.('[data-ec-node-id]') as HTMLElement | null) ?? null\n}\n"]}

package/dist/components/builder/canvas-inline-editing.d.ts

@@ -0,0 +1,91 @@
+import type { RefObject } from 'react';
+import type { ComponentManifest } from '@elytracms/core/component-registry';
+import type { ComponentNode } from '@elytracms/core/project-graph';
+import type { StudioRegistry } from '@elytracms/studio/lib/registry';
+import type { BuilderAction } from './builder-store.js';
+/**
+ * Inline editing on the canvas (EC-158 plain text, EC-159 rich text),
+ * extracted from `BuilderCanvas` (EC-330): double-click on a node whose
+ * manifest flags an inline-editable prop turns the *rendered element itself*
+ * contenteditable — no overlay, no input swap, so typography and layout are
+ * identical in edit and render states. A session finishes exactly once, and a
+ * commit dispatches exactly one `setProp` action — one undo step. The graph
+ * stays the single source of truth.
+ *
+ * Commit/cancel gestures: plain text commits on Enter or blur; rich text is
+ * multiline, so plain Enter inserts a paragraph and the commit gesture is
+ * Cmd/Ctrl+Enter or blur (Enter-to-commit would make multi-paragraph content
+ * unauthorable in place). Esc always cancels, dispatching nothing.
+ *
+ * The listener wiring is framework-free
+ * ({@link attachCanvasInlineEditingListeners}, the `clipboard-actions`
+ * pattern) so the begin/commit/cancel state machine is unit-testable without
+ * a DOM environment; {@link useCanvasInlineEditing} owns the React state the
+ * canvas renders from (the live rich-text host, the remount epochs) and the
+ * session ref other canvas listeners consult.
+ */
+/** A live inline-editing session bound to its DOM host (EC-158/EC-159). */
+export interface ActiveInlineEdit {
+    nodeId: string;
+    host: HTMLElement;
+    /** Finish the session exactly once (later calls are no-ops). */
+    finish: (mode: 'commit' | 'cancel') => void;
+}
+/** The structural slice of the iframe document the editing wiring needs. */
+export interface CanvasInlineEditingDocument {
+    addEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void;
+    removeEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void;
+    getSelection(): Selection | null;
+    createRange(): Range;
+}
+export interface CanvasInlineEditingDeps {
+    /** The current composition root (read live — listeners outlive renders). */
+    currentRoot(): ComponentNode;
+    getManifest(componentId: string): ComponentManifest | undefined;
+    dispatch(action: BuilderAction): void;
+    /** The live session — imperative DOM state, mirrored for other listeners. */
+    getEditing(): ActiveInlineEdit | null;
+    setEditing(edit: ActiveInlineEdit | null): void;
+    /** Mirror the rich-text host into render state (mounts the mark toolbar). */
+    setRichEditHost(host: HTMLElement | null): void;
+    /**
+     * A rich-text session mutates the rendered DOM behind React's back
+     * (contenteditable + mark commands), so finishing one must REMOUNT the
+     * node's subtree — bumping its epoch changes the decorate key, React
+     * discards the edited DOM wholesale and re-renders from the graph (the
+     * committed value, or the untouched original on cancel). Patching the old
+     * fiber tree against editor-mutated DOM would leave stale artifacts.
+     */
+    bumpRichEditEpoch(nodeId: string): void;
+}
+/**
+ * Wire the inline-editing dblclick listener onto the iframe document (native —
+ * React's synthetic events don't cross frames). Returns the detach function;
+ * detaching mid-session cancels it (never dispatch from cleanup).
+ */
+export declare function attachCanvasInlineEditingListeners(doc: CanvasInlineEditingDocument, deps: CanvasInlineEditingDeps): () => void;
+/** What `useCanvasInlineEditing` hands back to the canvas. */
+export interface CanvasInlineEditing {
+    /**
+     * The active session — imperative DOM state inside the iframe, not render
+     * state. Other canvas listeners (selection clicks, DnD arming, clipboard
+     * blocking) consult it live through this ref.
+     */
+    editingRef: RefObject<ActiveInlineEdit | null>;
+    /** The live rich-text host, mirrored into render state (mark toolbar mount). */
+    richEditHost: HTMLElement | null;
+    /** Per-node remount epochs — decorate keys change when a rich session ends. */
+    richEditEpochs: Record<string, number>;
+}
+/**
+ * The React face of the canvas inline editing (EC-158/EC-159): owns the
+ * session ref and the render state (`richEditHost`, `richEditEpochs`), wires
+ * the dblclick listener when the iframe document exists, and cancels a live
+ * session on teardown.
+ */
+export declare function useCanvasInlineEditing(doc: Document | null, deps: {
+    /** The live composition root (`builder.present`, mirrored into a ref). */
+    presentRef: RefObject<ComponentNode>;
+    dispatch: (action: BuilderAction) => void;
+    studio: StudioRegistry;
+}): CanvasInlineEditing;