@agent-native/core 0.42.0 → 0.43.0

package/dist/client/blocks/library/decision.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decision.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/decision.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,GACV,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EACL,WAAW,EACX,cAAc,GAGf,MAAM,sBAAsB,CAAC;AAE9B;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,KAAK,GACwB;IAC7B,OAAO,CACL,mBAAS,SAAS,EAAC,qBAAqB,mBAAgB,OAAO,aAC5D,KAAK,IAAI,cAAK,SAAS,EAAC,iCAAiC,YAAE,KAAK,GAAO,EACxE,YAAG,SAAS,EAAC,wDAAwD,YAClE,IAAI,CAAC,QAAQ,GACZ,EACJ,cAAK,SAAS,EAAC,gCAAgC,YAC5C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,mBAEE,SAAS,EAAE,EAAE,CACX,8CAA8C,EAC9C,MAAM,CAAC,WAAW;wBAChB,CAAC,CAAC,yCAAyC;wBAC3C,CAAC,CAAC,YAAY,CACjB,aAED,eAAK,SAAS,EAAC,wCAAwC,aACrD,aAAI,SAAS,EAAC,sDAAsD,YACjE,MAAM,CAAC,KAAK,GACV,EACJ,MAAM,CAAC,WAAW,IAAI,CACrB,eAAM,SAAS,EAAC,yHAAyH,4BAElI,CACR,IACG,EACL,MAAM,CAAC,MAAM,IAAI,CAChB,YAAG,SAAS,EAAC,8CAA8C,YACxD,MAAM,CAAC,MAAM,GACZ,CACL,KAtBI,MAAM,CAAC,EAAE,CAuBN,CACX,CAAC,GACE,IACE,CACX,CAAC;AACJ,CAAC;AAED,MAAM,gBAAgB,GACpB,qLAAqL,CAAC;AACxL,MAAM,mBAAmB,GACvB,wMAAwM,CAAC;AAC3M,MAAM,gBAAgB,GACpB,6EAA6E,CAAC;AAEhF,SAAS,UAAU,CAAC,MAAc;IAChC,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GAC0B;IAC7B,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,KAA8B,EAAE,EAAE,CACxE,QAAQ,CAAC;QACP,GAAG,IAAI;QACP,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CACnC,MAAM,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1D;KACF,CAAC,CAAC;IAEL,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,EAAE;QACxC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC;YAAE,OAAO;QACrC,QAAQ,CAAC;YACP,GAAG,IAAI;YACP,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,QAAQ,CAAC;SACjE,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,EAAE;YAAE,OAAO;QACtC,QAAQ,CAAC;YACP,GAAG,IAAI;YACP,OAAO,EAAE;gBACP,GAAG,IAAI,CAAC,OAAO;gBACf,EAAE,EAAE,EAAE,UAAU,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE;aAClD;SACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,QAAQ;QACvB,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;YACvB,KAAK,EAAE,UAAU;YACjB,OAAO;YACP,SAAS,EAAE,UAAU;YACrB,UAAU,EAAE,KAAK;YACjB,YAAY,EAAE,OAAO;YACrB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,CACP,iBACE,IAAI,EAAC,QAAQ,+CAEF,uBAAuB,EAClC,SAAS,EAAC,4KAA4K,YAEtL,KAAC,UAAU,IAAC,SAAS,EAAC,QAAQ,GAAG,GAC1B,CACV;YACD,QAAQ,EAAE,CACR,KAAC,gBAAgB,IACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,mBAAmB,EAAE,CAAC,MAAM,EAAE,EAAE,CAC9B,YAAY,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAE/D,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,SAAS,GAChB,CACH;SACF,CAAC,IAAI,CAGJ,KAAC,sBAAsB,IACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,mBAAmB,EAAE,CAAC,MAAM,EAAE,EAAE,CAC9B,YAAY,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAE/D,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,SAAS,GAChB,CACH,CAAC;QACJ,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,4CACzB,eAAK,SAAS,EAAC,wBAAwB,aACrC,iBAAO,SAAS,EAAC,6BAA6B,aAC5C,eAAM,SAAS,EAAE,gBAAgB,yBAAiB,EAClD,mBACE,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,QAAQ,EAAE,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,QAAQ,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,GAErD,IACI,EACP,QAAQ,IACL,EACN,cAAK,SAAS,EAAC,YAAY,YACxB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,mBAEE,SAAS,EAAE,EAAE,CACX,8CAA8C,EAC9C,MAAM,CAAC,WAAW;wBAChB,wDAAwD,CAC3D,aAED,cAAK,SAAS,EAAC,YAAY,YACzB,iBAAO,SAAS,EAAC,cAAc,aAC7B,eAAM,SAAS,EAAE,gBAAgB,uBAAe,EAChD,gBACE,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,YAAY,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,GAExD,IACI,GACJ,EACN,iBAAO,SAAS,EAAC,mBAAmB,aAClC,eAAM,SAAS,EAAE,gBAAgB,uBAAe,EAChD,mBACE,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,MAAM,CAAC,MAAM,IAAI,EAAE,EAC1B,QAAQ,EAAE,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,YAAY,CAAC,MAAM,CAAC,EAAE,EAAE;wCACtB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;qCACxC,CAAC,GAEJ,IACI,KAjCH,MAAM,CAAC,EAAE,CAkCN,CACX,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC;AAED,kFAAkF;AAClF,SAAS,gBAAgB,CAAC,EACxB,OAAO,EACP,mBAAmB,EACnB,QAAQ,EACR,KAAK,GAMN;IACC,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,aACzB,cAAK,SAAS,EAAC,uCAAuC,kCAEhD,EACN,cAAK,SAAS,EAAC,YAAY,YACxB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,eAEE,SAAS,EAAC,4DAA4D,aAEtE,eAAK,SAAS,EAAC,yCAAyC,aACtD,eAAM,SAAS,EAAC,sDAAsD,YACnE,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,UAAU,KAAK,GAAG,CAAC,EAAE,GACxC,EACN,MAAM,CAAC,WAAW,IAAI,CACrB,eAAM,SAAS,EAAC,oIAAoI,4BAE7I,CACR,IACG,EACN,eAAK,SAAS,EAAC,yBAAyB,aACtC,kBACE,IAAI,EAAC,QAAQ,iCAEb,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAC1C,SAAS,EAAE,EAAE,CACX,yIAAyI,EACzI,MAAM,CAAC,WAAW;wCAChB,CAAC,CAAC,yCAAyC;wCAC3C,CAAC,CAAC,oEAAoE,CACzE,aAEA,MAAM,CAAC,WAAW,IAAI,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,EACxD,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,kBAAkB,IACjD,EACT,iBACE,IAAI,EAAC,QAAQ,+CAED,UAAU,MAAM,CAAC,KAAK,IAAI,UAAU,KAAK,GAAG,CAAC,EAAE,EAAE,EAC7D,QAAQ,EAAE,OAAO,CAAC,MAAM,IAAI,CAAC,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAClC,SAAS,EAAC,oMAAoM,YAE9M,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,GAC3B,IACL,KAtCD,MAAM,CAAC,EAAE,CAuCV,CACP,CAAC,GACE,EACN,kBACE,IAAI,EAAC,QAAQ,iCAEb,QAAQ,EAAE,OAAO,CAAC,MAAM,IAAI,EAAE,EAC9B,OAAO,EAAE,KAAK,EACd,SAAS,EAAC,kNAAkN,aAE5N,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,kBAE1B,IACL,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,sBAAsB,CAAC,KAK/B;IACC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,aACzB,iBACE,IAAI,EAAC,QAAQ,+CAEF,uBAAuB,mBACnB,IAAI,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EACzC,SAAS,EAAC,4KAA4K,YAEtL,KAAC,UAAU,IAAC,SAAS,EAAC,QAAQ,GAAG,GAC1B,EACR,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,kEAAkE,YAC/E,KAAC,gBAAgB,OAAK,KAAK,GAAI,GAC3B,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAED,mFAAmF;AACnF,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAe;IACrD,IAAI,EAAE,UAAU;IAChB,MAAM,EAAE,cAAc;IACtB,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,iBAAiB;IACvB,SAAS,EAAE,CAAC,OAAO,CAAC;IACpB,gFAAgF;IAChF,+EAA+E;IAC/E,iFAAiF;IACjF,iFAAiF;IACjF,iFAAiF;IACjF,WAAW,EAAE,OAAO;IACpB,KAAK,EAAE,UAAU;IACjB,WAAW,EACT,wKAAwK;IAC1K,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;QACZ,QAAQ,EAAE,gDAAgD;QAC1D,OAAO,EAAE;YACP;gBACE,EAAE,EAAE,aAAa;gBACjB,KAAK,EAAE,kBAAkB;gBACzB,MAAM,EAAE,4CAA4C;gBACpD,WAAW,EAAE,IAAI;aAClB;YACD;gBACE,EAAE,EAAE,aAAa;gBACjB,KAAK,EAAE,aAAa;gBACpB,MAAM,EAAE,0CAA0C;aACnD;SACF;KACF,CAAC;CACH,CAAC,CAAC","sourcesContent":["import { useState } from \"react\";\nimport {\n  IconCheck,\n  IconPencil,\n  IconPlus,\n  IconTrash,\n} from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport { defineBlock } from \"../types.js\";\nimport type { BlockReadProps, BlockEditProps } from \"../types.js\";\nimport {\n  decisionMdx,\n  decisionSchema,\n  type DecisionData,\n  type DecisionOption,\n} from \"./decision.config.js\";\n\n/**\n * Standard `decision` block — a decision prompt with inline-editable option\n * cards and one authored \"recommended\" choice. Lives in core so any app can\n * register it (it originated in the plan template).\n *\n * The root `<section>` keeps the app-neutral `an-block` class (document-flow\n * spacing hook) alongside the legacy `plan-block` class (styled by the plan\n * template's own stylesheet), so plan renders as before and any other app gets\n * theme-token styling. All inner color comes from shadcn theme tokens\n * (`text-muted-foreground`, `text-foreground`, `bg-muted`, `bg-background`,\n * `border-border`, `ring`), so it reads correctly in any template palette.\n */\nexport function DecisionBlock({\n  data,\n  blockId,\n  title,\n}: BlockReadProps<DecisionData>) {\n  return (\n    <section className=\"an-block plan-block\" data-block-id={blockId}>\n      {title && <div className=\"an-block-label plan-block-label\">{title}</div>}\n      <p className=\"mt-3 max-w-3xl text-lg leading-8 text-muted-foreground\">\n        {data.question}\n      </p>\n      <div className=\"mt-6 grid gap-3 md:grid-cols-2\">\n        {data.options.map((option) => (\n          <article\n            key={option.id}\n            className={cn(\n              \"rounded-xl border border-border bg-muted p-4\",\n              option.recommended\n                ? \"shadow-[inset_3px_0_0_hsl(var(--ring))]\"\n                : \"opacity-85\",\n            )}\n          >\n            <div className=\"flex items-start justify-between gap-3\">\n              <h3 className=\"text-lg font-semibold tracking-tight text-foreground\">\n                {option.label}\n              </h3>\n              {option.recommended && (\n                <span className=\"rounded-full border border-border px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground\">\n                  Recommended\n                </span>\n              )}\n            </div>\n            {option.detail && (\n              <p className=\"mt-3 text-sm leading-6 text-muted-foreground\">\n                {option.detail}\n              </p>\n            )}\n          </article>\n        ))}\n      </div>\n    </section>\n  );\n}\n\nconst inlineInputClass =\n  \"w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-ring\";\nconst inlineTextareaClass =\n  \"w-full resize-y rounded-md border border-border bg-background px-3 py-2 text-sm leading-6 text-foreground shadow-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-ring\";\nconst inlineLabelClass =\n  \"text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground\";\n\nfunction newLocalId(prefix: string): string {\n  return `${prefix}-${Math.random().toString(36).slice(2, 10)}`;\n}\n\nexport function DecisionBlockEdit({\n  data,\n  onChange,\n  editable,\n  blockId,\n  title,\n  summary,\n  ctx,\n}: BlockEditProps<DecisionData>) {\n  const updateOption = (optionId: string, patch: Partial<DecisionOption>) =>\n    onChange({\n      ...data,\n      options: data.options.map((option) =>\n        option.id === optionId ? { ...option, ...patch } : option,\n      ),\n    });\n\n  const removeOption = (optionId: string) => {\n    if (data.options.length <= 1) return;\n    onChange({\n      ...data,\n      options: data.options.filter((option) => option.id !== optionId),\n    });\n  };\n\n  const addOption = () => {\n    if (data.options.length >= 20) return;\n    onChange({\n      ...data,\n      options: [\n        ...data.options,\n        { id: newLocalId(\"option\"), label: \"New option\" },\n      ],\n    });\n  };\n\n  const settings = editable\n    ? (ctx.renderEditSurface?.({\n        title: \"Decision\",\n        blockId,\n        blockType: \"decision\",\n        blockTitle: title,\n        blockSummary: summary,\n        blockData: data,\n        trigger: (\n          <button\n            type=\"button\"\n            data-plan-interactive\n            aria-label=\"Edit decision options\"\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground\"\n          >\n            <IconPencil className=\"size-4\" />\n          </button>\n        ),\n        children: (\n          <DecisionSettings\n            options={data.options}\n            onToggleRecommended={(option) =>\n              updateOption(option.id, { recommended: !option.recommended })\n            }\n            onRemove={removeOption}\n            onAdd={addOption}\n          />\n        ),\n      }) ?? (\n        // No panel surface provided by the host: fall back to a plain inline\n        // settings card so option management still works.\n        <DecisionInlineSettings\n          options={data.options}\n          onToggleRecommended={(option) =>\n            updateOption(option.id, { recommended: !option.recommended })\n          }\n          onRemove={removeOption}\n          onAdd={addOption}\n        />\n      ))\n    : null;\n\n  return (\n    <div className=\"grid gap-5\" data-plan-interactive>\n      <div className=\"flex items-start gap-3\">\n        <label className=\"grid min-w-0 flex-1 gap-1.5\">\n          <span className={inlineLabelClass}>Question</span>\n          <textarea\n            className={inlineTextareaClass}\n            rows={2}\n            value={data.question}\n            disabled={!editable}\n            onChange={(event) =>\n              onChange({ ...data, question: event.target.value })\n            }\n          />\n        </label>\n        {settings}\n      </div>\n      <div className=\"grid gap-3\">\n        {data.options.map((option) => (\n          <article\n            key={option.id}\n            className={cn(\n              \"rounded-lg border border-border bg-muted p-4\",\n              option.recommended &&\n                \"border-ring/60 shadow-[inset_3px_0_0_hsl(var(--ring))]\",\n            )}\n          >\n            <div className=\"grid gap-3\">\n              <label className=\"grid gap-1.5\">\n                <span className={inlineLabelClass}>Option</span>\n                <input\n                  className={inlineInputClass}\n                  value={option.label}\n                  disabled={!editable}\n                  onChange={(event) =>\n                    updateOption(option.id, { label: event.target.value })\n                  }\n                />\n              </label>\n            </div>\n            <label className=\"mt-3 grid gap-1.5\">\n              <span className={inlineLabelClass}>Detail</span>\n              <textarea\n                className={inlineTextareaClass}\n                rows={2}\n                value={option.detail ?? \"\"}\n                disabled={!editable}\n                onChange={(event) =>\n                  updateOption(option.id, {\n                    detail: event.target.value || undefined,\n                  })\n                }\n              />\n            </label>\n          </article>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/** Option-management controls rendered inside the host's edit surface popover. */\nfunction DecisionSettings({\n  options,\n  onToggleRecommended,\n  onRemove,\n  onAdd,\n}: {\n  options: DecisionOption[];\n  onToggleRecommended: (option: DecisionOption) => void;\n  onRemove: (optionId: string) => void;\n  onAdd: () => void;\n}) {\n  return (\n    <div className=\"grid gap-3\">\n      <div className=\"text-sm font-semibold text-foreground\">\n        Decision settings\n      </div>\n      <div className=\"grid gap-2\">\n        {options.map((option, index) => (\n          <div\n            key={option.id}\n            className=\"grid gap-2 rounded-md border border-border bg-muted/20 p-2\"\n          >\n            <div className=\"flex items-center justify-between gap-2\">\n              <span className=\"min-w-0 truncate text-xs font-medium text-foreground\">\n                {option.label.trim() || `Option ${index + 1}`}\n              </span>\n              {option.recommended && (\n                <span className=\"shrink-0 rounded-full border border-border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-muted-foreground\">\n                  Recommended\n                </span>\n              )}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <button\n                type=\"button\"\n                data-plan-interactive\n                onClick={() => onToggleRecommended(option)}\n                className={cn(\n                  \"inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-md border border-border px-2.5 text-xs font-medium transition-colors\",\n                  option.recommended\n                    ? \"bg-background text-foreground shadow-sm\"\n                    : \"text-muted-foreground hover:bg-background/70 hover:text-foreground\",\n                )}\n              >\n                {option.recommended && <IconCheck className=\"size-3.5\" />}\n                {option.recommended ? \"Recommended\" : \"Mark recommended\"}\n              </button>\n              <button\n                type=\"button\"\n                data-plan-interactive\n                aria-label={`Delete ${option.label || `option ${index + 1}`}`}\n                disabled={options.length <= 1}\n                onClick={() => onRemove(option.id)}\n                className=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border text-destructive transition-colors hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                <IconTrash className=\"size-3.5\" />\n              </button>\n            </div>\n          </div>\n        ))}\n      </div>\n      <button\n        type=\"button\"\n        data-plan-interactive\n        disabled={options.length >= 20}\n        onClick={onAdd}\n        className=\"inline-flex h-8 items-center justify-center gap-1.5 rounded-md border border-border px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50\"\n      >\n        <IconPlus className=\"size-3.5\" />\n        Add option\n      </button>\n    </div>\n  );\n}\n\n/**\n * Fallback for hosts that do not provide `ctx.renderEditSurface`: a plain\n * disclosure button that reveals the same settings inline (no overlay primitive,\n * so core stays shadcn-free).\n */\nfunction DecisionInlineSettings(props: {\n  options: DecisionOption[];\n  onToggleRecommended: (option: DecisionOption) => void;\n  onRemove: (optionId: string) => void;\n  onAdd: () => void;\n}) {\n  const [open, setOpen] = useState(false);\n  return (\n    <div className=\"grid gap-2\">\n      <button\n        type=\"button\"\n        data-plan-interactive\n        aria-label=\"Edit decision options\"\n        aria-expanded={open}\n        onClick={() => setOpen((value) => !value)}\n        className=\"flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground\"\n      >\n        <IconPencil className=\"size-4\" />\n      </button>\n      {open && (\n        <div className=\"w-80 rounded-md border border-border bg-background p-3 shadow-sm\">\n          <DecisionSettings {...props} />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Full client spec for the shared `decision` block (schema + MDX + Read/Edit). */\nexport const decisionBlock = defineBlock<DecisionData>({\n  type: \"decision\",\n  schema: decisionSchema,\n  mdx: decisionMdx,\n  Read: DecisionBlock,\n  Edit: DecisionBlockEdit,\n  placement: [\"block\"],\n  // `panel`: the document shows the clean read view (question + option cards with\n  // the recommended pick highlighted), and the corner pencil opens the editor in\n  // a popover. NOT `inline` — an inline schema-editing form (question + per-option\n  // textareas) rendered straight into the doc reads as a confusing data-entry wall\n  // rather than a decision. Mirrors how `question-form` / `visual-questions` edit.\n  editSurface: \"panel\",\n  label: \"Decision\",\n  description:\n    \"A decision prompt with option cards and an authored recommended choice. Shows a clean read view in the document; edit the question and options from the corner pencil.\",\n  empty: () => ({\n    question: \"Which implementation direction should we take?\",\n    options: [\n      {\n        id: \"recommended\",\n        label: \"Recommended path\",\n        detail: \"Smallest useful slice with clear rollback.\",\n        recommended: true,\n      },\n      {\n        id: \"alternative\",\n        label: \"Alternative\",\n        detail: \"Broader pass that touches more surfaces.\",\n      },\n    ],\n  }),\n});\n"]}

package/dist/client/blocks/library/diagram.config.d.ts

@@ -0,0 +1,64 @@
+import { z } from "zod";
+import type { BlockMdxConfig } from "../types.js";
+/**
+ * Pure (React-free) part of the shared `diagram` block: its data schema and MDX
+ * round-trip config. Lives in core so BOTH apps' server/shared registries
+ * (`plan-block-registry.ts`, `nfm-registry.ts`) and the client spec
+ * (`diagram.tsx`) consume one definition. Keeping it React-free means importing
+ * it into a server module never pulls React into the Nitro/SSR bundle.
+ *
+ * The MDX `tag` + attribute shape MUST match the legacy `<Diagram … data={…} />`
+ * encoding — the whole `data` object is serialized as one JSON `data` prop — so
+ * stored `.mdx` round-trips byte-compatibly (the block originated in the plan
+ * template before moving here).
+ */
+export interface DiagramNode {
+    id: string;
+    label: string;
+    detail?: string;
+    x?: number;
+    y?: number;
+}
+export interface DiagramEdge {
+    from: string;
+    to: string;
+    label?: string;
+}
+export interface DiagramNote {
+    id: string;
+    text: string;
+    x?: number;
+    y?: number;
+}
+export interface DiagramData {
+    /**
+     * Preferred authoring path for architecture/code diagrams: a scoped, inert
+     * HTML/SVG fragment. Use .diagram-* primitives and --wf-* tokens; the
+     * renderer supplies theme-token-backed styling plus sketch/clean style hooks.
+     */
+    html?: string;
+    css?: string;
+    caption?: string;
+    /**
+     * Legacy compatibility path for older/simple node graphs. New plans should use
+     * `html`/`css` when layout quality matters.
+     */
+    nodes?: DiagramNode[];
+    edges?: DiagramEdge[];
+    notes?: DiagramNote[];
+}
+/**
+ * The block can be a flexible HTML/SVG fragment or a legacy positional
+ * node/edge/note graph, so it ships a custom `Edit` rather than relying on the
+ * schema auto-editor. Editing stays comment/patch-driven.
+ */
+export declare const diagramSchema: z.ZodType<DiagramData>;
+/**
+ * MDX config: the entire `data` object is serialized as one JSON `data` prop and
+ * the element is self-closing — exactly the legacy `<Diagram id … data={…} />`
+ * form. `toAttrs` returns `{ data }`; `fromAttrs` reads the `data` object,
+ * mirroring the legacy `dataAttr(node, "data") ?? { nodes: [], edges: [] }`
+ * default so plans missing the prop still parse.
+ */
+export declare const diagramMdx: BlockMdxConfig<DiagramData>;
+//# sourceMappingURL=diagram.config.d.ts.map

package/dist/client/blocks/library/diagram.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram.config.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/diagram.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AAoED;;;;GAIG;AACH,eAAO,MAAM,aAAa,EA8BP,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;AAE1C;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,cAAc,CAAC,WAAW,CAWlD,CAAC"}

package/dist/client/blocks/library/diagram.config.js

@@ -0,0 +1,111 @@
+import { z } from "zod";
+const idSchema = z.string().trim().min(1).max(120);
+const unsafeDiagramHtmlPattern = /(?:<!doctype|<\/?(?:html|head|body|script|style|iframe|object|embed|link|meta|base|form|math|foreignObject|noscript|frame|frameset|applet|portal|marquee)[\s>/]|@(?:import|font-face|keyframes|page|namespace|charset)\b|\b(?:java\s*script|vb\s*script|data\s*:\s*(?:text\/html|image\/svg\+xml))\s*:?\s*|\bsrcdoc\s*=|(?:^|\s)(?:on[a-z][\w:-]*|@[\w:.-]+|x-on:[\w:.-]+|:on[a-z][\w:-]*|x-bind:on[a-z][\w:-]*|:style|x-bind:style)\s*=|expression\s*\(|url\s*\(\s*['"]?\s*(?:java\s*script|vb\s*script|data\s*:\s*(?:text\/html|image\/svg\+xml)))/i;
+const unsafeViewportCssPattern = /(?:^|[;{\s])position\s*:\s*(?:fixed|sticky)\b|(?:^|[;{\s])z-index\s*:\s*[1-9]\d{4,}\b/i;
+function decodeSafetyEntities(value) {
+    return value
+        .replace(/&#(x[0-9a-f]+|\d+);?/gi, (_, code) => {
+        const point = code.toLowerCase().startsWith("x")
+            ? Number.parseInt(code.slice(1), 16)
+            : Number.parseInt(code, 10);
+        return Number.isFinite(point) ? String.fromCodePoint(point) : "";
+    })
+        .replace(/&(colon|tab|newline);/gi, (_, name) => {
+        if (name.toLowerCase() === "colon")
+            return ":";
+        if (name.toLowerCase() === "tab")
+            return "\t";
+        return "\n";
+    });
+}
+function decodeCssSafetyEscapes(value) {
+    return value.replace(/\\([0-9a-fA-F]{1,6}\s?|.)/g, (_match, escaped) => {
+        const hex = String(escaped).match(/^[0-9a-fA-F]{1,6}/)?.[0];
+        if (hex) {
+            const point = Number.parseInt(hex, 16);
+            return Number.isFinite(point) ? String.fromCodePoint(point) : "";
+        }
+        return String(escaped)[0] ?? "";
+    });
+}
+function noActiveDiagramText(value) {
+    const decoded = decodeCssSafetyEscapes(decodeSafetyEntities(value));
+    const compact = decoded.toLowerCase().replace(/[\u0000-\u0020]+/g, "");
+    return (!unsafeDiagramHtmlPattern.test(value) &&
+        !unsafeDiagramHtmlPattern.test(decoded) &&
+        !unsafeViewportCssPattern.test(decoded) &&
+        !/(?:javascript|vbscript):|data:(?:text\/html|image\/svg\+xml)|expression\(|url\(['"]?(?:javascript|vbscript|data:(?:text\/html|image\/svg\+xml))/.test(compact));
+}
+const diagramNodeSchema = z.object({
+    id: idSchema,
+    label: z.string().trim().min(1).max(160),
+    detail: z.string().trim().max(500).optional(),
+    x: z.number().min(0).max(100).optional(),
+    y: z.number().min(0).max(100).optional(),
+});
+const diagramEdgeSchema = z.object({
+    from: idSchema,
+    to: idSchema,
+    label: z.string().trim().max(100).optional(),
+});
+const diagramNoteSchema = z.object({
+    id: idSchema,
+    text: z.string().trim().min(1).max(500),
+    x: z.number().min(0).max(100).optional(),
+    y: z.number().min(0).max(100).optional(),
+});
+/**
+ * The block can be a flexible HTML/SVG fragment or a legacy positional
+ * node/edge/note graph, so it ships a custom `Edit` rather than relying on the
+ * schema auto-editor. Editing stays comment/patch-driven.
+ */
+export const diagramSchema = z
+    .object({
+    html: z
+        .string()
+        .trim()
+        .max(100_000)
+        .refine(noActiveDiagramText, {
+        message: "Diagram html must be an inert fragment; SVG is allowed, scripts/events are not.",
+    })
+        .optional(),
+    css: z
+        .string()
+        .max(50_000)
+        .refine(noActiveDiagramText, {
+        message: "Diagram css must not include document or script tags.",
+    })
+        .optional(),
+    caption: z.string().trim().max(600).optional(),
+    nodes: z.array(diagramNodeSchema).max(80).optional(),
+    edges: z.array(diagramEdgeSchema).max(120).optional(),
+    notes: z.array(diagramNoteSchema).max(40).optional(),
+})
+    .superRefine((data, ctx) => {
+    if (data.html?.trim() || (data.nodes?.length ?? 0) > 0)
+        return;
+    ctx.addIssue({
+        code: "custom",
+        path: ["html"],
+        message: "Diagram block requires html or at least one node.",
+    });
+});
+/**
+ * MDX config: the entire `data` object is serialized as one JSON `data` prop and
+ * the element is self-closing — exactly the legacy `<Diagram id … data={…} />`
+ * form. `toAttrs` returns `{ data }`; `fromAttrs` reads the `data` object,
+ * mirroring the legacy `dataAttr(node, "data") ?? { nodes: [], edges: [] }`
+ * default so plans missing the prop still parse.
+ */
+export const diagramMdx = {
+    tag: "Diagram",
+    // The whole data object becomes one JSON `data` prop. Cast to the
+    // structured-attr member of `MdxAttrValue` — `DiagramData` is a closed
+    // interface without an index signature, which the union member requires.
+    toAttrs: (data) => ({ data: data }),
+    fromAttrs: (attrs) => (attrs.object("data") ?? {
+        nodes: [],
+        edges: [],
+    }),
+};
+//# sourceMappingURL=diagram.config.js.map

package/dist/client/blocks/library/diagram.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram.config.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/diagram.config.ts"],"names":[],"mappings":"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","sourcesContent":["import { z } from \"zod\";\nimport type { BlockMdxConfig } from \"../types.js\";\n\n/**\n * Pure (React-free) part of the shared `diagram` block: its data schema and MDX\n * round-trip config. Lives in core so BOTH apps' server/shared registries\n * (`plan-block-registry.ts`, `nfm-registry.ts`) and the client spec\n * (`diagram.tsx`) consume one definition. Keeping it React-free means importing\n * it into a server module never pulls React into the Nitro/SSR bundle.\n *\n * The MDX `tag` + attribute shape MUST match the legacy `<Diagram … data={…} />`\n * encoding — the whole `data` object is serialized as one JSON `data` prop — so\n * stored `.mdx` round-trips byte-compatibly (the block originated in the plan\n * template before moving here).\n */\n\nexport interface DiagramNode {\n  id: string;\n  label: string;\n  detail?: string;\n  x?: number;\n  y?: number;\n}\n\nexport interface DiagramEdge {\n  from: string;\n  to: string;\n  label?: string;\n}\n\nexport interface DiagramNote {\n  id: string;\n  text: string;\n  x?: number;\n  y?: number;\n}\n\nexport interface DiagramData {\n  /**\n   * Preferred authoring path for architecture/code diagrams: a scoped, inert\n   * HTML/SVG fragment. Use .diagram-* primitives and --wf-* tokens; the\n   * renderer supplies theme-token-backed styling plus sketch/clean style hooks.\n   */\n  html?: string;\n  css?: string;\n  caption?: string;\n  /**\n   * Legacy compatibility path for older/simple node graphs. New plans should use\n   * `html`/`css` when layout quality matters.\n   */\n  nodes?: DiagramNode[];\n  edges?: DiagramEdge[];\n  notes?: DiagramNote[];\n}\n\nconst idSchema = z.string().trim().min(1).max(120);\nconst unsafeDiagramHtmlPattern =\n  /(?:<!doctype|<\\/?(?:html|head|body|script|style|iframe|object|embed|link|meta|base|form|math|foreignObject|noscript|frame|frameset|applet|portal|marquee)[\\s>/]|@(?:import|font-face|keyframes|page|namespace|charset)\\b|\\b(?:java\\s*script|vb\\s*script|data\\s*:\\s*(?:text\\/html|image\\/svg\\+xml))\\s*:?\\s*|\\bsrcdoc\\s*=|(?:^|\\s)(?:on[a-z][\\w:-]*|@[\\w:.-]+|x-on:[\\w:.-]+|:on[a-z][\\w:-]*|x-bind:on[a-z][\\w:-]*|:style|x-bind:style)\\s*=|expression\\s*\\(|url\\s*\\(\\s*['\"]?\\s*(?:java\\s*script|vb\\s*script|data\\s*:\\s*(?:text\\/html|image\\/svg\\+xml)))/i;\nconst unsafeViewportCssPattern =\n  /(?:^|[;{\\s])position\\s*:\\s*(?:fixed|sticky)\\b|(?:^|[;{\\s])z-index\\s*:\\s*[1-9]\\d{4,}\\b/i;\n\nfunction decodeSafetyEntities(value: string): string {\n  return value\n    .replace(/&#(x[0-9a-f]+|\\d+);?/gi, (_, code: string) => {\n      const point = code.toLowerCase().startsWith(\"x\")\n        ? Number.parseInt(code.slice(1), 16)\n        : Number.parseInt(code, 10);\n      return Number.isFinite(point) ? String.fromCodePoint(point) : \"\";\n    })\n    .replace(/&(colon|tab|newline);/gi, (_, name: string) => {\n      if (name.toLowerCase() === \"colon\") return \":\";\n      if (name.toLowerCase() === \"tab\") return \"\\t\";\n      return \"\\n\";\n    });\n}\n\nfunction decodeCssSafetyEscapes(value: string): string {\n  return value.replace(/\\\\([0-9a-fA-F]{1,6}\\s?|.)/g, (_match, escaped) => {\n    const hex = String(escaped).match(/^[0-9a-fA-F]{1,6}/)?.[0];\n    if (hex) {\n      const point = Number.parseInt(hex, 16);\n      return Number.isFinite(point) ? String.fromCodePoint(point) : \"\";\n    }\n    return String(escaped)[0] ?? \"\";\n  });\n}\n\nfunction noActiveDiagramText(value: string) {\n  const decoded = decodeCssSafetyEscapes(decodeSafetyEntities(value));\n  const compact = decoded.toLowerCase().replace(/[\\u0000-\\u0020]+/g, \"\");\n  return (\n    !unsafeDiagramHtmlPattern.test(value) &&\n    !unsafeDiagramHtmlPattern.test(decoded) &&\n    !unsafeViewportCssPattern.test(decoded) &&\n    !/(?:javascript|vbscript):|data:(?:text\\/html|image\\/svg\\+xml)|expression\\(|url\\(['\"]?(?:javascript|vbscript|data:(?:text\\/html|image\\/svg\\+xml))/.test(\n      compact,\n    )\n  );\n}\n\nconst diagramNodeSchema = z.object({\n  id: idSchema,\n  label: z.string().trim().min(1).max(160),\n  detail: z.string().trim().max(500).optional(),\n  x: z.number().min(0).max(100).optional(),\n  y: z.number().min(0).max(100).optional(),\n}) as z.ZodType<DiagramNode>;\n\nconst diagramEdgeSchema = z.object({\n  from: idSchema,\n  to: idSchema,\n  label: z.string().trim().max(100).optional(),\n}) as z.ZodType<DiagramEdge>;\n\nconst diagramNoteSchema = z.object({\n  id: idSchema,\n  text: z.string().trim().min(1).max(500),\n  x: z.number().min(0).max(100).optional(),\n  y: z.number().min(0).max(100).optional(),\n}) as z.ZodType<DiagramNote>;\n\n/**\n * The block can be a flexible HTML/SVG fragment or a legacy positional\n * node/edge/note graph, so it ships a custom `Edit` rather than relying on the\n * schema auto-editor. Editing stays comment/patch-driven.\n */\nexport const diagramSchema = z\n  .object({\n    html: z\n      .string()\n      .trim()\n      .max(100_000)\n      .refine(noActiveDiagramText, {\n        message:\n          \"Diagram html must be an inert fragment; SVG is allowed, scripts/events are not.\",\n      })\n      .optional(),\n    css: z\n      .string()\n      .max(50_000)\n      .refine(noActiveDiagramText, {\n        message: \"Diagram css must not include document or script tags.\",\n      })\n      .optional(),\n    caption: z.string().trim().max(600).optional(),\n    nodes: z.array(diagramNodeSchema).max(80).optional(),\n    edges: z.array(diagramEdgeSchema).max(120).optional(),\n    notes: z.array(diagramNoteSchema).max(40).optional(),\n  })\n  .superRefine((data, ctx) => {\n    if (data.html?.trim() || (data.nodes?.length ?? 0) > 0) return;\n    ctx.addIssue({\n      code: \"custom\",\n      path: [\"html\"],\n      message: \"Diagram block requires html or at least one node.\",\n    });\n  }) as unknown as z.ZodType<DiagramData>;\n\n/**\n * MDX config: the entire `data` object is serialized as one JSON `data` prop and\n * the element is self-closing — exactly the legacy `<Diagram id … data={…} />`\n * form. `toAttrs` returns `{ data }`; `fromAttrs` reads the `data` object,\n * mirroring the legacy `dataAttr(node, \"data\") ?? { nodes: [], edges: [] }`\n * default so plans missing the prop still parse.\n */\nexport const diagramMdx: BlockMdxConfig<DiagramData> = {\n  tag: \"Diagram\",\n  // The whole data object becomes one JSON `data` prop. Cast to the\n  // structured-attr member of `MdxAttrValue` — `DiagramData` is a closed\n  // interface without an index signature, which the union member requires.\n  toAttrs: (data) => ({ data: data as unknown as Record<string, unknown> }),\n  fromAttrs: (attrs) =>\n    (attrs.object<DiagramData>(\"data\") ?? {\n      nodes: [],\n      edges: [],\n    }) as DiagramData,\n};\n"]}

package/dist/client/blocks/library/diagram.d.ts

@@ -0,0 +1,16 @@
+import type { BlockReadProps, BlockEditProps } from "../types.js";
+import { type DiagramData } from "./diagram.config.js";
+/** Read-only renderer: the diagram body wrapped in the standard titled block. */
+export declare function DiagramRead({ data, blockId, title, summary, ctx, }: BlockReadProps<DiagramData>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Edit form (panel surface). The block can be an HTML/SVG fragment or a legacy
+ * node/edge/note graph, so this exposes html/css/caption plus a collapsible
+ * legacy node-graph JSON editor, each with an AI-edit affordance via
+ * `ctx.renderAiFieldAction` (through `AiEditableFieldLabel`). `editSurface:
+ * "panel"` means the registry renders the `Read` view with a corner edit button
+ * that opens this form in the app-provided popover.
+ */
+export declare function DiagramEdit({ data, onChange, editable, blockId, title, summary, ctx, }: BlockEditProps<DiagramData>): import("react/jsx-runtime").JSX.Element;
+/** Full client spec for the shared `diagram` block (schema + MDX + Read/Edit). */
+export declare const diagramBlock: import("../types.js").BlockSpec<DiagramData>;
+//# sourceMappingURL=diagram.d.ts.map

package/dist/client/blocks/library/diagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/diagram.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EAEf,MAAM,aAAa,CAAC;AAQrB,OAAO,EAGL,KAAK,WAAW,EAGjB,MAAM,qBAAqB,CAAC;AAkX7B,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,WAAW,CAAC,2CAQ7B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,WAAW,CAAC,2CAkL7B;AAED,kFAAkF;AAClF,eAAO,MAAM,YAAY,8CAgBvB,CAAC"}

package/dist/client/blocks/library/diagram.js

@@ -0,0 +1,261 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { cn } from "../../utils.js";
+import { defineBlock } from "../types.js";
+import { AiEditableFieldLabel } from "../AiEditableField.js";
+import { RoughOverlay, useIsDark, useWireframeStyle } from "./wireframe-kit.js";
+import { sanitizeDiagramHtml, sanitizeWireframeCss, scopeDesignCss, } from "./sanitize-html.js";
+import { diagramMdx, diagramSchema, } from "./diagram.config.js";
+/**
+ * Read + Edit renderers for the shared `diagram` block — a flexible inline
+ * architecture/code diagram. The preferred authoring path is a scoped, inert
+ * HTML/SVG fragment that leans on `.diagram-*` primitives and `--wf-*` tokens;
+ * a legacy positional / sequence node-graph path is kept for older/simple plans.
+ * Lives in core so any app can register it (it originated in the plan template).
+ *
+ * DECOUPLING from the plan original (mirrors the sibling `wireframe.tsx` port):
+ * - Theme: `useIsDark()` reads `document.documentElement.classList` instead of
+ *   `next-themes`; `useWireframeStyle()` reads the viewer's sketchy/clean
+ *   preference from the shared `plan-wireframe-style` localStorage key — both
+ *   from `./wireframe-kit.js`, so core stays plan-free and shadcn-free.
+ * - HTML sanitize: the HTML/SVG fragment + CSS run through the app-injected
+ *   `ctx.sanitizeHtml` at the render point (defense-in-depth against stored
+ *   XSS). Without a sanitizer wired, the HTML path emits nothing — core never
+ *   injects unsanitized author HTML. The React-free `diagramSchema` already
+ *   rejects active markup before storage.
+ * - The rough.js sketch overlay reuses the kit's shared `RoughOverlay`, scoped
+ *   with the diagram selector and `drawFrame={false}` (the same call the plan
+ *   `HtmlDiagram` made). The `.plan-diagram-frame` / `.diagram-*` / `data-rough`
+ *   class contract is preserved exactly so the theme-token CSS in core's
+ *   `blocks.css` styles it in any app.
+ *
+ * The section carries the app-neutral `an-block` class plus the legacy
+ * `plan-block` class so plan renders byte-identically while any other app gets
+ * the theme-token treatment.
+ */
+/* -------------------------------------------------------------------------- */
+/* HTML/SVG diagram path                                                       */
+/* -------------------------------------------------------------------------- */
+/** The rough-overlay selector for diagram bordered boxes (mirrors the plan). */
+const DIAGRAM_ROUGH_SELECTOR = "[data-rough],.diagram-panel,.diagram-node,.diagram-box,.diagram-pill,.diagram-card,[class*='card'],[class*='box'],[class*='panel'],[class*='pill'],[class*='chip'],[class*='badge'],hr";
+function HtmlDiagram({ data, ctx, compact, }) {
+    const ref = useRef(null);
+    const isDark = useIsDark();
+    const style = useWireframeStyle();
+    const scopeId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    // Sanitize author HTML/CSS at the render point (defense-in-depth against
+    // stored XSS). Self-contained in core via the shared block sanitizer (DOM-based
+    // in the browser, regex fallback on the server) so diagrams render in any app
+    // without the host wiring a sanitizer hook.
+    const safeHtml = useMemo(() => sanitizeDiagramHtml(data.html), [data.html]);
+    const scopedCss = useMemo(() => {
+        const safeCss = sanitizeWireframeCss(data.css);
+        // Scope every author selector under this diagram instance so global
+        // selectors (body, *, .app-shell, :root) can't escape and restyle the page.
+        return safeCss
+            ? scopeDesignCss(safeCss, `[data-plan-diagram-scope="${scopeId}"]`)
+            : "";
+    }, [data.css, scopeId]);
+    return (_jsxs("div", { ref: ref, className: cn("plan-diagram-shell", compact && "plan-diagram-compact"), children: [_jsxs("div", { className: "plan-diagram-frame", "data-theme": isDark ? "dark" : "light", "data-style": style, "data-plan-diagram-scope": scopeId, children: [scopedCss && _jsx("style", { children: scopedCss }), _jsx("div", { className: "plan-diagram-frame-content", dangerouslySetInnerHTML: { __html: safeHtml } })] }), _jsx(RoughOverlay, { scopeRef: ref, enabled: style === "sketchy", drawFrame: false, selector: DIAGRAM_ROUGH_SELECTOR }), data.caption && !compact && (_jsx("p", { className: "mt-3 text-sm leading-6 text-muted-foreground", children: data.caption }))] }));
+}
+/* -------------------------------------------------------------------------- */
+/* Legacy node-graph paths                                                     */
+/* -------------------------------------------------------------------------- */
+function clampDiagramPercent(value) {
+    if (!Number.isFinite(value))
+        return 50;
+    return Math.max(4, Math.min(96, value));
+}
+function hasPositionedDiagramNodes(data) {
+    return (data.nodes ?? []).some((node) => typeof node.x === "number" && typeof node.y === "number");
+}
+function orderDiagramNodes(nodes, edges) {
+    if (nodes.length === 0)
+        return [];
+    const byId = new Map(nodes.map((node) => [node.id, node]));
+    const indegree = new Map(nodes.map((node) => [node.id, 0]));
+    for (const edge of edges) {
+        if (byId.has(edge.from) && byId.has(edge.to)) {
+            indegree.set(edge.to, (indegree.get(edge.to) ?? 0) + 1);
+        }
+    }
+    const start = nodes.find((node) => (indegree.get(node.id) ?? 0) === 0);
+    if (!start)
+        return nodes;
+    const ordered = [];
+    const seen = new Set();
+    let current = start;
+    while (current && !seen.has(current.id)) {
+        const node = current;
+        ordered.push(node);
+        seen.add(node.id);
+        const next = edges.find((edge) => edge.from === node.id);
+        current = next ? byId.get(next.to) : undefined;
+    }
+    for (const node of nodes)
+        if (!seen.has(node.id))
+            ordered.push(node);
+    return ordered;
+}
+function PositionedDiagram({ data, compact, markerId, }) {
+    const nodes = (data.nodes ?? []).map((node) => ({
+        ...node,
+        x: clampDiagramPercent(node.x ?? 50),
+        y: clampDiagramPercent(node.y ?? 50),
+    }));
+    const edges = data.edges ?? [];
+    const nodeById = new Map(nodes.map((node) => [node.id, node]));
+    const arrowId = `${markerId}-diagram-arrow`;
+    const nodeWidth = compact ? 150 : 190;
+    const canvasHeight = compact ? 280 : 430;
+    return (_jsxs("div", { className: "plan-sketch rounded-[16px] border border-border bg-muted p-5", children: [_jsxs("div", { className: "relative overflow-hidden rounded-xl border border-border bg-background", style: { minHeight: canvasHeight }, children: [_jsxs("svg", { className: "pointer-events-none absolute inset-0 z-0 h-full w-full", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [_jsx("defs", { children: _jsx("marker", { id: arrowId, viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "5", markerHeight: "5", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", className: "fill-muted-foreground" }) }) }), edges.map((edge, index) => {
+                                const from = nodeById.get(edge.from);
+                                const to = nodeById.get(edge.to);
+                                if (!from || !to)
+                                    return null;
+                                return (_jsx("line", { x1: from.x, y1: from.y, x2: to.x, y2: to.y, markerEnd: `url(#${arrowId})`, vectorEffect: "non-scaling-stroke", className: "stroke-border", strokeWidth: 2, strokeDasharray: edge.label ? "0" : "6 5" }, `${edge.from}-${edge.to}-${index}`));
+                            })] }), !compact &&
+                        edges.map((edge, index) => {
+                            const from = nodeById.get(edge.from);
+                            const to = nodeById.get(edge.to);
+                            if (!edge.label || !from || !to)
+                                return null;
+                            return (_jsx("span", { className: "absolute z-10 max-w-[130px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background px-2 py-0.5 text-center text-[11px] font-semibold text-muted-foreground shadow-sm", style: {
+                                    left: `${(from.x + to.x) / 2}%`,
+                                    top: `${(from.y + to.y) / 2}%`,
+                                }, children: edge.label }, `${edge.from}-${edge.to}-${index}-label`));
+                        }), nodes.map((node, index) => (_jsxs("article", { className: "absolute z-20 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 border-border bg-background p-3 text-foreground shadow-sm", style: {
+                            left: `${node.x}%`,
+                            top: `${node.y}%`,
+                            width: nodeWidth,
+                        }, children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: index + 1 }), _jsx("h3", { className: "mt-2 text-base font-semibold leading-tight", children: node.label }), node.detail && !compact && (_jsx("p", { className: "mt-2 text-xs leading-5 text-muted-foreground", children: node.detail }))] }, node.id)))] }), data.notes && data.notes.length > 0 && !compact && (_jsx("div", { className: "mt-4 grid gap-2 border-t border-border pt-4 text-sm text-muted-foreground md:grid-cols-2", children: data.notes.map((note) => (_jsx("p", { children: note.text }, note.id))) }))] }));
+}
+function SequenceDiagram({ data, compact, }) {
+    const edges = data.edges ?? [];
+    const nodes = orderDiagramNodes(data.nodes ?? [], edges);
+    if (nodes.length === 0) {
+        return (_jsx("div", { className: "rounded-[12px] border border-border bg-muted p-4 text-sm text-muted-foreground", children: "Diagram content is empty." }));
+    }
+    return (_jsxs("div", { className: "plan-sketch rounded-[16px] border border-border bg-muted p-5", children: [_jsx("div", { className: cn("flex gap-3 overflow-x-auto pb-2", compact ? "items-center" : "items-stretch"), children: nodes.map((node, index) => {
+                    const next = nodes[index + 1];
+                    const edge = next
+                        ? edges.find((candidate) => candidate.from === node.id && candidate.to === next.id)
+                        : undefined;
+                    return (_jsxs("div", { className: "flex min-w-max items-center gap-3", children: [_jsxs("article", { className: cn("w-[180px] rounded-xl border-2 border-border bg-background p-3 text-foreground", compact && "w-[150px]"), children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: index + 1 }), _jsx("h3", { className: "mt-2 text-base font-semibold leading-tight", children: node.label }), node.detail && !compact && (_jsx("p", { className: "mt-2 text-xs leading-5 text-muted-foreground", children: node.detail }))] }), next && (_jsxs("div", { className: "grid min-w-[72px] justify-items-center gap-1 text-muted-foreground", children: [edge?.label && (_jsx("span", { className: "max-w-[96px] truncate rounded-full border border-border px-2 py-0.5 text-[11px] font-semibold", children: edge.label })), _jsx("span", { className: "h-0.5 w-full rounded-full border-t-2 border-dashed border-border" })] }))] }, node.id));
+                }) }), data.notes && data.notes.length > 0 && !compact && (_jsx("div", { className: "mt-4 grid gap-2 border-t border-border pt-4 text-sm text-muted-foreground md:grid-cols-2", children: data.notes.map((note) => (_jsx("p", { children: note.text }, note.id))) }))] }));
+}
+/**
+ * The diagram body. Routes to the preferred HTML/SVG path (when `data.html` is
+ * set) and otherwise to a legacy node-graph path (positioned canvas when nodes
+ * carry x/y, else an ordered sequence).
+ */
+function DiagramBody({ data, ctx, compact, }) {
+    const markerId = useId().replace(/:/g, "");
+    if (data.html?.trim()) {
+        return _jsx(HtmlDiagram, { data: data, ctx: ctx, compact: compact });
+    }
+    if (hasPositionedDiagramNodes(data)) {
+        return (_jsx(PositionedDiagram, { data: data, compact: compact, markerId: markerId }));
+    }
+    return _jsx(SequenceDiagram, { data: data, compact: compact });
+}
+/* -------------------------------------------------------------------------- */
+/* Read + Edit                                                                 */
+/* -------------------------------------------------------------------------- */
+/** Read-only renderer: the diagram body wrapped in the standard titled block. */
+export function DiagramRead({ data, blockId, title, summary, ctx, }) {
+    return (_jsxs("section", { className: "an-block plan-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "an-block-label plan-block-label", children: title }), _jsx(DiagramBody, { data: data, ctx: ctx }), summary && _jsx("p", { className: "mt-5 text-muted-foreground", children: summary })] }));
+}
+/**
+ * Edit form (panel surface). The block can be an HTML/SVG fragment or a legacy
+ * node/edge/note graph, so this exposes html/css/caption plus a collapsible
+ * legacy node-graph JSON editor, each with an AI-edit affordance via
+ * `ctx.renderAiFieldAction` (through `AiEditableFieldLabel`). `editSurface:
+ * "panel"` means the registry renders the `Read` view with a corner edit button
+ * that opens this form in the app-provided popover.
+ */
+export function DiagramEdit({ data, onChange, editable, blockId, title, summary, ctx, }) {
+    const htmlId = useId();
+    const cssId = useId();
+    const captionId = useId();
+    const legacyId = useId();
+    const [html, setHtml] = useState(data.html ?? "");
+    const [css, setCss] = useState(data.css ?? "");
+    const [caption, setCaption] = useState(data.caption ?? "");
+    const [legacyJson, setLegacyJson] = useState(() => JSON.stringify({
+        nodes: data.nodes ?? [],
+        edges: data.edges ?? [],
+        notes: data.notes ?? [],
+    }, null, 2));
+    useEffect(() => {
+        setHtml(data.html ?? "");
+        setCss(data.css ?? "");
+        setCaption(data.caption ?? "");
+        setLegacyJson(JSON.stringify({
+            nodes: data.nodes ?? [],
+            edges: data.edges ?? [],
+            notes: data.notes ?? [],
+        }, null, 2));
+    }, [data]);
+    const saveHtmlDiagram = () => {
+        onChange({
+            html: html.trim() || undefined,
+            css: css.trim() || undefined,
+            caption: caption.trim() || undefined,
+            nodes: data.nodes,
+            edges: data.edges,
+            notes: data.notes,
+        });
+    };
+    const saveLegacyDiagram = () => {
+        const parsed = JSON.parse(legacyJson);
+        onChange({
+            ...data,
+            nodes: parsed.nodes ?? [],
+            edges: parsed.edges ?? [],
+            notes: parsed.notes ?? [],
+        });
+    };
+    const fieldAction = (field, value) => ({
+        blockId,
+        blockType: "diagram",
+        blockTitle: title,
+        blockSummary: summary,
+        fieldValue: value,
+        draftScope: `block:diagram:${blockId}:${field.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
+        disabled: !editable,
+        instructions: "Update the plan with update-visual-plan using a targeted update-block content patch for this diagram block id. Preserve unrelated diagram fields unless the requested edit requires changing them. Keep diagram HTML/CSS on renderer-owned .diagram-* primitives and --wf-* tokens; do not introduce custom font-family or hard-coded hex/rgb/hsl colors.",
+        companionFields: [
+            {
+                label: "HTML / SVG fragment",
+                value: html.trim() || "(empty)",
+                language: "html",
+            },
+            { label: "CSS", value: css.trim() || "(empty)", language: "css" },
+            {
+                label: "caption",
+                value: caption.trim() || "(empty)",
+                language: "text",
+            },
+        ],
+    });
+    return (_jsxs("div", { className: "grid gap-4", "data-plan-interactive": true, children: [_jsx("button", { type: "button", className: "inline-flex h-8 w-fit items-center justify-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground disabled:opacity-50", disabled: !editable, onClick: saveHtmlDiagram, children: "Save diagram" }), _jsxs("div", { className: "group/field grid gap-1.5", children: [_jsx(AiEditableFieldLabel, { htmlFor: htmlId, label: "HTML / SVG fragment", ctx: ctx, action: fieldAction("HTML / SVG fragment", html) }), _jsx("textarea", { id: htmlId, className: "min-h-48 w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-xs leading-5 text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", value: html, disabled: !editable, onChange: (event) => setHtml(event.target.value), placeholder: "<div class='diagram'>...</div>" })] }), _jsxs("div", { className: "group/field grid gap-1.5", children: [_jsx(AiEditableFieldLabel, { htmlFor: cssId, label: "CSS", ctx: ctx, action: fieldAction("CSS", css) }), _jsx("textarea", { id: cssId, className: "min-h-32 w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-xs leading-5 text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", value: css, disabled: !editable, onChange: (event) => setCss(event.target.value), placeholder: ".diagram { display: grid; }" })] }), _jsxs("div", { className: "group/field grid gap-1.5", children: [_jsx(AiEditableFieldLabel, { htmlFor: captionId, label: "Caption", ctx: ctx, action: fieldAction("caption", caption) }), _jsx("input", { id: captionId, className: "h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", value: caption, disabled: !editable, onChange: (event) => setCaption(event.target.value) })] }), !data.html && (_jsxs("details", { className: "rounded-md border border-border p-3", children: [_jsx("summary", { className: "cursor-pointer text-xs font-semibold text-muted-foreground", children: "Legacy node graph data" }), _jsxs("div", { className: "group/field mt-3 grid gap-1.5", children: [_jsx(AiEditableFieldLabel, { htmlFor: legacyId, label: "JSON", ctx: ctx, action: fieldAction("legacy node graph JSON", legacyJson) }), _jsx("textarea", { id: legacyId, className: "min-h-44 w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-xs leading-5 text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", value: legacyJson, disabled: !editable, onChange: (event) => setLegacyJson(event.target.value) })] }), _jsx("button", { type: "button", className: "mt-3 inline-flex h-8 items-center justify-center rounded-md border border-input px-3 text-xs font-medium text-foreground disabled:opacity-50", disabled: !editable, onClick: saveLegacyDiagram, children: "Save graph data" })] }))] }));
+}
+/** Full client spec for the shared `diagram` block (schema + MDX + Read/Edit). */
+export const diagramBlock = defineBlock({
+    type: "diagram",
+    schema: diagramSchema,
+    mdx: diagramMdx,
+    Read: DiagramRead,
+    Edit: DiagramEdit,
+    placement: ["block"],
+    // Config-driven: the rendered diagram differs from its raw html/css source, so
+    // edit from a corner button + panel rather than inline.
+    editSurface: "panel",
+    label: "Diagram",
+    description: "A flexible inline architecture/code diagram. Prefer html/css with SVG or semantic HTML for polished two-dimensional layouts; use .diagram-* primitives and --wf-* tokens for theme/sketch compatibility. Legacy nodes/edges are only for simple previews.",
+    // Seed the legacy fallback shape so a fresh block validates while agents can
+    // replace it with html/css when layout quality matters.
+    empty: () => ({ nodes: [{ id: "n1", label: "Module" }], edges: [] }),
+});
+//# sourceMappingURL=diagram.js.map