dev-process-kit 0.0.2-beta.1 → 0.0.2

package/README.md

@@ -19,6 +19,7 @@ browser, and the review comes back as structured change requests the agent can a
 - **Rich diagrams with almost no code.** Parts for the traditional diagrams a development process uses, ready to drop into your markup.
 - **No setup.** The components are made for a single-file HTML page and ship as Web Components: one `<script>` tag, and they are there.
 - **Feedback without leaving the page.** Operate the diagram and comment on individual elements in the UI, then copy the operations and the comments out as a hand-off to an agent.
+- **First-class support for Claude Artifacts.** Published from Claude Code as a Claude Artifact, the page follows the claude.ai theme and sends the review straight back to the Claude session with one click: no copy and paste.
 
 ## Why dev-process-kit?
 
@@ -50,6 +51,16 @@ Create a USM for this product.
 Follow https://raw.githubusercontent.com/d-kimuson/dev-process-kit/main/skills/dev-process-kit/SKILL.md.
 ```
 
+### Claude Artifacts
+
+Claude Code can publish the page as a Claude Artifact instead of a local file, and dev-process-kit supports that as a first-class target:
+
+- **One-click hand-off.** With the `comments` and `db` capabilities declared, the review rail offers **Send to Claude** in place of copying. The review arrives in the Claude Code session that published the page, which applies it and republishes to the same URL.
+- **Fits the viewer.** The template follows the reader's claude.ai light / dark theme and sizes itself to the viewer's frame.
+- **Nothing to configure.** The page detects the Artifact at runtime; outside one, or when a send cannot land, the copy hand-off stays as it is.
+
+The skill's [Claude Artifact reference](skills/dev-process-kit/references/claude-artifact.md) tells the agent how to write and publish such a page.
+
 ### Install the skill
 
 The `dev-process-kit` agent skill tells the agent when to reach for a page and how to keep it focused.
@@ -71,20 +82,21 @@ dev-process-kit ships **templates**, which make up a whole page, and **component
 
 ### Templates
 
-| Template           | Element                        | What it is                                                                                                                                                  |
-| ------------------ | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| UX Prototype       | `dpk-template-prototype`       | `Activity › UserStory › Step › Preview[]`: one step is one page or experience state, with previews per viewport                                             |
-| User Story Mapping | `dpk-template-usm`             | The backbone (activity › step) as columns, milestones as rows                                                                                               |
-| Event Storming     | `dpk-template-event-storming`  | Sticky notes on swimlanes in timeline order, with causality links between them                                                                              |
-| Example Mapping    | `dpk-template-example-mapping` | One story per column, rules beneath it, examples beneath each rule, questions pinned to any of them                                                         |
-| Grill              | `dpk-template-grill`           | A review of questions over whatever you put in the main area: the questions are base data, the answers are draft actions, the badges sit on your own markup |
-| Plain              | `dpk-template-plain`           | For a page no other template fits: only the header and the review (comments) pipeline around your own markup                                                |
+| Template           | Element                        | What it is                                                                                                                                                       |
+| ------------------ | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| UX Prototype       | `dpk-template-prototype`       | `Activity › UserStory › Step › Preview[]`: one step is one page or experience state, with previews per viewport                                                  |
+| User Story Mapping | `dpk-template-usm`             | The backbone (activity › step) as columns, milestones as rows                                                                                                    |
+| Event Storming     | `dpk-template-event-storming`  | Sticky notes on swimlanes in timeline order, with causality links between them                                                                                   |
+| Example Mapping    | `dpk-template-example-mapping` | One story per column, rules beneath it, examples beneath each rule, questions pinned to any of them                                                              |
+| Grill              | `dpk-template-grill`           | A review of questions over whatever you put in the main area: the questions are base data, the answers are draft actions, the badges sit on your own markup      |
+| Plain              | `dpk-template-plain`           | For a page no other template fits: only the header and the review (comments) pipeline around your own markup                                                     |
+| Slides             | `dpk-template-slides`          | A slide deck for explaining something step by step: slide titles and points are base data, richer bodies are your own markup, comments go on the slide on screen |
 
 ### Components
 
 | Component        | Element                          | What it is                                                                                   |
 | ---------------- | -------------------------------- | -------------------------------------------------------------------------------------------- |
-| Review rail      | `dpk-component-comment-panel`    | The draft actions and comments, stale markers, deletion, and the copy hand-off for the agent |
+| Review rail      | `dpk-component-comment-panel`    | Draft actions and comments, stale markers, deletion, and the copy or send-to-Claude hand-off |
 | Inline editing   | `dpk-component-inline-edit`      | A text/multiline editor that emits `dpk-commit`                                              |
 | State diagram    | `dpk-component-state-diagram`    | Which states exist, and what moves between them                                              |
 | Sequence diagram | `dpk-component-sequence-diagram` | In what order participants talk                                                              |

package/dist/chunks/shared-BXV4Dm_n.js

@@ -0,0 +1,522 @@
+import{q as m,an as E,v as A,au as D,at as b,ad as s,af as x,ag as f,as as I,a9 as Ue,aa as w,ab as q,ac as N,P as Pe,f as Qe,_ as Ce,V as O,R as g,m as Xe,a0 as H,a5 as Ye,k as Be,$ as Ve,a6 as ze,a1 as $,av as Ke,a2 as h,A as Fe,K as je,i as Je,a3 as z,T as Z}from"./shared-CcD4vDCE.js";import{s as K,D as We}from"./shared-BFAVBf4I.js";import{P as He,r as Ze,p as Ge,c as et}from"./shared-C4Y4jSXa.js";const u={SET_STORY_NAME:m("SET_STORY_NAME","story",E({name:x(s(),f(1))})),SET_STORY_DESCRIPTION:m("SET_STORY_DESCRIPTION","story",E({description:s()})),REORDER_STORY:m("REORDER_STORY","story",E({after:I(s())}),{mode:"sequence"}),ADD_STORY:m("ADD_STORY","page",E({id:D,name:x(s(),f(1)),description:b(s())}),{dedupeKey:A}),DELETE_STORY:m("DELETE_STORY","story",E({})),SET_RULE_NAME:m("SET_RULE_NAME","rule",E({name:x(s(),f(1))})),SET_RULE_DESCRIPTION:m("SET_RULE_DESCRIPTION","rule",E({description:s()})),MOVE_RULE:m("MOVE_RULE","rule",E({storyId:x(s(),f(1)),after:I(s())}),{mode:"sequence"}),REORDER_RULE:m("REORDER_RULE","rule",E({after:I(s())}),{mode:"sequence"}),ADD_RULE:m("ADD_RULE","story",E({id:D,name:x(s(),f(1)),description:b(s())}),{dedupeKey:A}),DELETE_RULE:m("DELETE_RULE","rule",E({})),SET_EXAMPLE_NAME:m("SET_EXAMPLE_NAME","example",E({name:x(s(),f(1))})),SET_EXAMPLE_DESCRIPTION:m("SET_EXAMPLE_DESCRIPTION","example",E({description:s()})),MOVE_EXAMPLE:m("MOVE_EXAMPLE","example",E({ruleId:x(s(),f(1)),after:I(s())}),{mode:"sequence"}),REORDER_EXAMPLE:m("REORDER_EXAMPLE","example",E({after:I(s())}),{mode:"sequence"}),ADD_EXAMPLE:m("ADD_EXAMPLE","rule",E({id:D,name:x(s(),f(1)),description:b(s())}),{dedupeKey:A}),DELETE_EXAMPLE:m("DELETE_EXAMPLE","example",E({})),SET_QUESTION_NAME:m("SET_QUESTION_NAME","question",E({name:x(s(),f(1))})),SET_QUESTION_DESCRIPTION:m("SET_QUESTION_DESCRIPTION","question",E({description:s()})),MOVE_QUESTION:m("MOVE_QUESTION","question",E({ruleId:x(s(),f(1)),after:I(s())}),{mode:"sequence"}),REORDER_QUESTION:m("REORDER_QUESTION","question",E({after:I(s())}),{mode:"sequence"}),ADD_QUESTION:m("ADD_QUESTION","rule",E({id:D,name:x(s(),f(1)),description:b(s())}),{dedupeKey:A}),DELETE_QUESTION:m("DELETE_QUESTION","question",E({}))},L={setStoryName:(e,t)=>({type:"SET_STORY_NAME",target:{type:"story",id:e},payload:{name:t}}),setStoryDescription:(e,t)=>({type:"SET_STORY_DESCRIPTION",target:{type:"story",id:e},payload:{description:t}}),reorderStory:(e,t)=>({type:"REORDER_STORY",target:{type:"story",id:e},payload:{after:t}}),addStory:(e,t)=>({type:"ADD_STORY",target:{type:"page",id:"example-mapping"},payload:{id:e,name:t}}),deleteStory:e=>({type:"DELETE_STORY",target:{type:"story",id:e},payload:{}}),setRuleName:(e,t)=>({type:"SET_RULE_NAME",target:{type:"rule",id:e},payload:{name:t}}),setRuleDescription:(e,t)=>({type:"SET_RULE_DESCRIPTION",target:{type:"rule",id:e},payload:{description:t}}),moveRule:(e,t,r)=>({type:"MOVE_RULE",target:{type:"rule",id:e},payload:{storyId:t,after:r}}),reorderRule:(e,t)=>({type:"REORDER_RULE",target:{type:"rule",id:e},payload:{after:t}}),addRule:(e,t,r)=>({type:"ADD_RULE",target:{type:"story",id:e},payload:{id:t,name:r}}),deleteRule:e=>({type:"DELETE_RULE",target:{type:"rule",id:e},payload:{}}),setExampleName:(e,t)=>({type:"SET_EXAMPLE_NAME",target:{type:"example",id:e},payload:{name:t}}),setExampleDescription:(e,t)=>({type:"SET_EXAMPLE_DESCRIPTION",target:{type:"example",id:e},payload:{description:t}}),moveExample:(e,t,r)=>({type:"MOVE_EXAMPLE",target:{type:"example",id:e},payload:{ruleId:t,after:r}}),reorderExample:(e,t)=>({type:"REORDER_EXAMPLE",target:{type:"example",id:e},payload:{after:t}}),addExample:(e,t,r)=>({type:"ADD_EXAMPLE",target:{type:"rule",id:e},payload:{id:t,name:r}}),deleteExample:e=>({type:"DELETE_EXAMPLE",target:{type:"example",id:e},payload:{}}),setQuestionName:(e,t)=>({type:"SET_QUESTION_NAME",target:{type:"question",id:e},payload:{name:t}}),setQuestionDescription:(e,t)=>({type:"SET_QUESTION_DESCRIPTION",target:{type:"question",id:e},payload:{description:t}}),moveQuestion:(e,t,r)=>({type:"MOVE_QUESTION",target:{type:"question",id:e},payload:{ruleId:t,after:r}}),reorderQuestion:(e,t)=>({type:"REORDER_QUESTION",target:{type:"question",id:e},payload:{after:t}}),addQuestion:(e,t,r)=>({type:"ADD_QUESTION",target:{type:"rule",id:e},payload:{id:t,name:r}}),deleteQuestion:e=>({type:"DELETE_QUESTION",target:{type:"question",id:e},payload:{}})},tt=w({id:D,name:x(s(),f(1)),description:b(s())}),rt=w({id:D,storyId:x(s(),f(1)),name:x(s(),f(1)),description:b(s())}),G=w({id:D,ruleId:x(s(),f(1)),name:x(s(),f(1)),description:b(s())}),ee=w({title:b(s()),stories:q(N(tt),[]),rules:q(N(rt),[]),examples:q(N(G),[]),questions:q(N(G),[])}),te=e=>{const t=Ue(ee,e),r=new Set,n=(i,d)=>{if(r.has(d))throw new Error(`duplicate id "${d}" in ${i}`);r.add(d)},a=new Set(t.stories.map(i=>i.id));for(const i of t.stories)n("stories",i.id);for(const i of t.rules)if(n("rules",i.id),!a.has(i.storyId))throw new Error(`rule "${i.id}" references unknown storyId "${i.storyId}"`);const o=new Map(t.rules.map(i=>[i.id,i]));for(const i of t.examples)if(n("examples",i.id),!o.has(i.ruleId))throw new Error(`example "${i.id}" references unknown ruleId "${i.ruleId}"`);for(const i of t.questions)if(n("questions",i.id),!o.has(i.ruleId))throw new Error(`question "${i.id}" references unknown ruleId "${i.ruleId}"`);return t},re=()=>({stories:[],rules:[],examples:[],questions:[]}),nt=e=>({...e,rules:K(e.rules,["storyId"]),examples:K(e.examples,["ruleId"]),questions:K(e.questions,["ruleId"])}),T=(e,t)=>{if(t!==void 0)return e.stories.find(r=>r.id===t)},y=(e,t)=>{if(t!==void 0)return e.rules.find(r=>r.id===t)},R=(e,t)=>{if(t!==void 0)return e.examples.find(r=>r.id===t)},S=(e,t)=>{if(t!==void 0)return e.questions.find(r=>r.id===t)},U=(e,t)=>{if(t===void 0)return;const r=T(e,t);if(r)return{kind:"story",id:r.id,name:r.name,...r.description===void 0?{}:{description:r.description}};const n=y(e,t);if(n)return{kind:"rule",id:n.id,name:n.name,...n.description===void 0?{}:{description:n.description}};const a=R(e,t);if(a)return{kind:"example",id:a.id,name:a.name,...a.description===void 0?{}:{description:a.description}};const o=S(e,t);if(o)return{kind:"question",id:o.id,name:o.name,...o.description===void 0?{}:{description:o.description}}},ne=(e,t)=>e.rules.filter(r=>r.storyId===t),ae=(e,t)=>e.examples.filter(r=>r.ruleId===t),oe=(e,t)=>e.questions.filter(r=>r.ruleId===t),at=(e,t)=>{if(T(e,t))return t;const r=y(e,t);if(r)return r.storyId;const n=R(e,t)?.ruleId??S(e,t)?.ruleId;return n===void 0?void 0:y(e,n)?.storyId},ie=e=>[...e.stories.map(t=>t.id),...e.rules.map(t=>t.id),...e.examples.map(t=>t.id),...e.questions.map(t=>t.id)],de=(e,t)=>y(e,t)?.storyId,ot=(e,t)=>{const r=R(e,t);return r?de(e,r.ruleId):void 0},se=(e,t)=>{const r=Pe(u,t);if(r===null)return null;const n=r.target.id;switch(r.type){case"SET_STORY_NAME":return le(e,n,a=>({...a,name:r.payload.name}));case"SET_STORY_DESCRIPTION":return le(e,n,a=>({...a,description:r.payload.description}));case"REORDER_STORY":{const a=Ee(e.stories,n,r.payload.after);return a===null?null:{...e,stories:a}}case"ADD_STORY":{const a=r.payload;return e.stories.some(o=>o.id===a.id)?e:P(e,a.id)?null:{...e,stories:[...e.stories,{id:a.id,name:a.name,...a.description===void 0?{}:{description:a.description}}]}}case"DELETE_STORY":{if(!e.stories.some(o=>o.id===n))return null;const a=new Set(e.rules.filter(o=>o.storyId===n).map(o=>o.id));return{...e,stories:e.stories.filter(o=>o.id!==n),rules:e.rules.filter(o=>o.storyId!==n),examples:e.examples.filter(o=>!a.has(o.ruleId)),questions:e.questions.filter(o=>!a.has(o.ruleId))}}case"SET_RULE_NAME":return pe(e,n,a=>({...a,name:r.payload.name}));case"SET_RULE_DESCRIPTION":return pe(e,n,a=>({...a,description:r.payload.description}));case"MOVE_RULE":{const a=r.payload,o=y(e,n);if(!o||!e.stories.some(d=>d.id===a.storyId))return null;const i=e.rules.filter(d=>d.storyId===a.storyId&&d.id!==n);return a.after!==null&&!i.some(d=>d.id===a.after)?null:{...e,rules:me(e.rules,{...o,storyId:a.storyId},a.after)}}case"REORDER_RULE":{const a=y(e,n);if(!a)return null;const o=e.rules.filter(i=>i.storyId===a.storyId);return r.payload.after!==null&&!o.some(i=>i.id===r.payload.after)?null:{...e,rules:me(e.rules,a,r.payload.after)}}case"ADD_RULE":{const a=r.payload,o=T(e,n);return o?e.rules.some(i=>i.id===a.id)?e:P(e,a.id)?null:{...e,rules:[...e.rules,{id:a.id,storyId:o.id,name:a.name,...a.description===void 0?{}:{description:a.description}}]}:null}case"DELETE_RULE":return y(e,n)?{...e,rules:e.rules.filter(a=>a.id!==n),examples:e.examples.filter(a=>a.ruleId!==n),questions:e.questions.filter(a=>a.ruleId!==n)}:null;case"SET_EXAMPLE_NAME":return ue(e,n,a=>({...a,name:r.payload.name}));case"SET_EXAMPLE_DESCRIPTION":return ue(e,n,a=>({...a,description:r.payload.description}));case"MOVE_EXAMPLE":{const a=r.payload,o=R(e,n);if(!o||!y(e,a.ruleId))return null;const i=e.examples.filter(d=>d.ruleId===a.ruleId&&d.id!==n);return a.after!==null&&!i.some(d=>d.id===a.after)?null:{...e,examples:Q(e.examples,{...o,ruleId:a.ruleId},a.after)}}case"REORDER_EXAMPLE":{const a=R(e,n);if(!a)return null;const o=e.examples.filter(i=>i.ruleId===a.ruleId);return r.payload.after!==null&&!o.some(i=>i.id===r.payload.after)?null:{...e,examples:Q(e.examples,a,r.payload.after)}}case"ADD_EXAMPLE":{const a=r.payload,o=y(e,n);return o?e.examples.some(i=>i.id===a.id)?e:P(e,a.id)?null:{...e,examples:[...e.examples,{id:a.id,ruleId:o.id,name:a.name,...a.description===void 0?{}:{description:a.description}}]}:null}case"DELETE_EXAMPLE":return R(e,n)?{...e,examples:e.examples.filter(a=>a.id!==n)}:null;case"SET_QUESTION_NAME":return ce(e,n,a=>({...a,name:r.payload.name}));case"SET_QUESTION_DESCRIPTION":return ce(e,n,a=>({...a,description:r.payload.description}));case"MOVE_QUESTION":{const a=r.payload,o=S(e,n);if(!o||!y(e,a.ruleId))return null;const i=e.questions.filter(d=>d.ruleId===a.ruleId&&d.id!==n);return a.after!==null&&!i.some(d=>d.id===a.after)?null:{...e,questions:Q(e.questions,{...o,ruleId:a.ruleId},a.after)}}case"REORDER_QUESTION":{const a=S(e,n);if(!a)return null;const o=e.questions.filter(i=>i.ruleId===a.ruleId);return r.payload.after!==null&&!o.some(i=>i.id===r.payload.after)?null:{...e,questions:Q(e.questions,a,r.payload.after)}}case"ADD_QUESTION":{const a=r.payload,o=y(e,n);return o?e.questions.some(i=>i.id===a.id)?e:P(e,a.id)?null:{...e,questions:[...e.questions,{id:a.id,ruleId:o.id,name:a.name,...a.description===void 0?{}:{description:a.description}}]}:null}case"DELETE_QUESTION":return S(e,n)?{...e,questions:e.questions.filter(a=>a.id!==n)}:null;default:return Qe(r)}},P=(e,t)=>e.stories.some(r=>r.id===t)||e.rules.some(r=>r.id===t)||e.examples.some(r=>r.id===t)||e.questions.some(r=>r.id===t),le=(e,t,r)=>e.stories.some(n=>n.id===t)?{...e,stories:e.stories.map(n=>n.id===t?r(n):n)}:null,pe=(e,t,r)=>e.rules.some(n=>n.id===t)?{...e,rules:e.rules.map(n=>n.id===t?r(n):n)}:null,ue=(e,t,r)=>e.examples.some(n=>n.id===t)?{...e,examples:e.examples.map(n=>n.id===t?r(n):n)}:null,ce=(e,t,r)=>e.questions.some(n=>n.id===t)?{...e,questions:e.questions.map(n=>n.id===t?r(n):n)}:null,me=(e,t,r)=>{const n=e.filter(l=>l.id!==t.id),a=n.filter(l=>l.storyId===t.storyId),o=r===null?[t,...a]:F(a,t,r),i=n.findIndex(l=>l.storyId===t.storyId),d=new Set(a.map(l=>l.id)),c=n.filter(l=>!d.has(l.id)),p=i<0?c.length:Math.min(i,c.length);return[...c.slice(0,p),...o,...c.slice(p)]},Q=(e,t,r)=>{const n=e.filter(l=>l.id!==t.id),a=n.filter(l=>l.ruleId===t.ruleId),o=r===null?[t,...a]:F(a,t,r),i=n.findIndex(l=>l.ruleId===t.ruleId),d=new Set(a.map(l=>l.id)),c=n.filter(l=>!d.has(l.id)),p=i<0?c.length:Math.min(i,c.length);return[...c.slice(0,p),...o,...c.slice(p)]},Ee=(e,t,r)=>{if(!e.some(o=>o.id===t)||r!==null&&!e.some(o=>o.id===r))return null;if(r===t)return[...e];const n=e.find(o=>o.id===t);if(n===void 0)return null;const a=e.filter(o=>o.id!==t);return F(a,n,r)},F=(e,t,r)=>{const n=[...e],a=r===null?-1:n.findIndex(o=>o.id===r);return n.splice(a+1,0,t),n},it={story:"Story",rule:"Rule",example:"Example",question:"Question"},dt={story:"\u30B9\u30C8\u30FC\u30EA\u30FC",rule:"\u30EB\u30FC\u30EB",example:"\u5177\u4F53\u4F8B",question:"\u8CEA\u554F"},st={empty:"No rules yet","open-questions":"Open questions","too-big":"Consider splitting",thin:"A rule has no example",ready:"Looks ready"},lt={empty:"\u30EB\u30FC\u30EB\u672A\u6574\u7406","open-questions":"\u672A\u89E3\u6C7A\u306E\u8CEA\u554F\u3042\u308A","too-big":"\u5206\u5272\u3092\u691C\u8A0E",thin:"\u5177\u4F53\u4F8B\u306E\u7121\u3044\u30EB\u30FC\u30EB\u3042\u308A",ready:"\u5408\u610F\u3067\u304D\u305D\u3046"},C=Ce({en:{kindLabel:e=>it[e],readinessLabel:e=>st[e],map:"Map",cardKinds:"Card kinds",noStoriesTitle:"No stories yet",noStoriesBody:"Place one story (yellow), then line up the rules (blue) that accept it beneath it. For each rule, stack examples (green) in the top area and open questions (red) in the bottom area.",firstStory:"+ First story",addStoryButton:"+ Story",noExamples:"No examples yet",noQuestions:"No open questions",commentButton:"Comment",deleteButton:"Delete",nameField:e=>`${e} name`,newStory:"New story",newRule:"New rule",newExample:"New example",newQuestion:"New question",storyRenamedTitle:"Renamed the story",storyDescriptionUpdatedTitle:"Updated the story\u2019s description",storyReorderedTitle:"Reordered the story",storyAddedTitle:"Added a story",storyDeletedTitle:"Deleted the story",ruleRenamedTitle:"Renamed the rule",ruleDescriptionUpdatedTitle:"Updated the rule\u2019s description",ruleMovedTitle:"Moved the rule",ruleReorderedTitle:"Reordered the rule",ruleAddedTitle:"Added a rule",ruleDeletedTitle:"Deleted the rule",exampleRenamedTitle:"Renamed the example",exampleDescriptionUpdatedTitle:"Updated the example\u2019s description",exampleMovedTitle:"Moved the example",exampleReorderedTitle:"Reordered the example",exampleAddedTitle:"Added an example",exampleDeletedTitle:"Deleted the example",questionRenamedTitle:"Renamed the question",questionDescriptionUpdatedTitle:"Updated the question\u2019s description",questionMovedTitle:"Moved the question",questionReorderedTitle:"Reordered the question",questionAddedTitle:"Added a question",questionDeletedTitle:"Deleted the question",arrowTo:e=>`\u2192 \u201C${e}\u201D`,arrowFrom:(e,t)=>`\u201C${e}\u201D \u2192 \u201C${t}\u201D`,added:e=>`+ \u201C${e}\u201D`,deleted:e=>`\u2212 \u201C${e}\u201D`,toTop:"\u2192 To the top",afterPlacement:e=>`\u2192 After \u201C${e}\u201D`,wholeMap:"Whole map"},ja:{kindLabel:e=>dt[e],readinessLabel:e=>lt[e],map:"\u30DE\u30C3\u30D7",cardKinds:"\u30AB\u30FC\u30C9\u306E\u7A2E\u985E",noStoriesTitle:"\u30B9\u30C8\u30FC\u30EA\u30FC\u304C\u307E\u3060\u3042\u308A\u307E\u305B\u3093",noStoriesBody:"\u30B9\u30C8\u30FC\u30EA\u30FC\uFF08\u9EC4\uFF09\u30921\u679A\u7F6E\u304D\u3001\u305D\u306E\u4E0B\u306B\u53D7\u3051\u5165\u308C\u6761\u4EF6\u3068\u306A\u308B\u30EB\u30FC\u30EB\uFF08\u9752\uFF09\u3092\u4E26\u3079\u307E\u3059\u3002\u30EB\u30FC\u30EB\u3054\u3068\u306B\u3001\u4E0A\u306E\u6B04\u3078\u5177\u4F53\u4F8B\uFF08\u7DD1\uFF09\u3092\u3001\u4E0B\u306E\u6B04\u3078\u7B54\u3048\u306E\u51FA\u306A\u3044\u8AD6\u70B9\u3092\u8CEA\u554F\uFF08\u8D64\uFF09\u3068\u3057\u3066\u7A4D\u307F\u307E\u3059\u3002",firstStory:"+ \u6700\u521D\u306E\u30B9\u30C8\u30FC\u30EA\u30FC",addStoryButton:"+ \u30B9\u30C8\u30FC\u30EA\u30FC",noExamples:"\u5177\u4F53\u4F8B\u304C\u307E\u3060\u3042\u308A\u307E\u305B\u3093",noQuestions:"\u672A\u89E3\u6C7A\u306E\u8CEA\u554F\u306F\u3042\u308A\u307E\u305B\u3093",commentButton:"\u30B3\u30E1\u30F3\u30C8",deleteButton:"\u524A\u9664",nameField:e=>`${e}\u540D`,newStory:"\u65B0\u3057\u3044\u30B9\u30C8\u30FC\u30EA\u30FC",newRule:"\u65B0\u3057\u3044\u30EB\u30FC\u30EB",newExample:"\u65B0\u3057\u3044\u5177\u4F53\u4F8B",newQuestion:"\u65B0\u3057\u3044\u8CEA\u554F",storyRenamedTitle:"\u30B9\u30C8\u30FC\u30EA\u30FC\u540D\u3092\u5909\u66F4",storyDescriptionUpdatedTitle:"\u30B9\u30C8\u30FC\u30EA\u30FC\u306E\u8AAC\u660E\u3092\u66F4\u65B0",storyReorderedTitle:"\u30B9\u30C8\u30FC\u30EA\u30FC\u306E\u9806\u5E8F\u3092\u5909\u66F4",storyAddedTitle:"\u30B9\u30C8\u30FC\u30EA\u30FC\u3092\u8FFD\u52A0",storyDeletedTitle:"\u30B9\u30C8\u30FC\u30EA\u30FC\u3092\u524A\u9664",ruleRenamedTitle:"\u30EB\u30FC\u30EB\u540D\u3092\u5909\u66F4",ruleDescriptionUpdatedTitle:"\u30EB\u30FC\u30EB\u306E\u8AAC\u660E\u3092\u66F4\u65B0",ruleMovedTitle:"\u30EB\u30FC\u30EB\u3092\u79FB\u52D5",ruleReorderedTitle:"\u30EB\u30FC\u30EB\u306E\u9806\u5E8F\u3092\u5909\u66F4",ruleAddedTitle:"\u30EB\u30FC\u30EB\u3092\u8FFD\u52A0",ruleDeletedTitle:"\u30EB\u30FC\u30EB\u3092\u524A\u9664",exampleRenamedTitle:"\u5177\u4F53\u4F8B\u540D\u3092\u5909\u66F4",exampleDescriptionUpdatedTitle:"\u5177\u4F53\u4F8B\u306E\u8AAC\u660E\u3092\u66F4\u65B0",exampleMovedTitle:"\u5177\u4F53\u4F8B\u3092\u79FB\u52D5",exampleReorderedTitle:"\u5177\u4F53\u4F8B\u306E\u9806\u5E8F\u3092\u5909\u66F4",exampleAddedTitle:"\u5177\u4F53\u4F8B\u3092\u8FFD\u52A0",exampleDeletedTitle:"\u5177\u4F53\u4F8B\u3092\u524A\u9664",questionRenamedTitle:"\u8CEA\u554F\u540D\u3092\u5909\u66F4",questionDescriptionUpdatedTitle:"\u8CEA\u554F\u306E\u8AAC\u660E\u3092\u66F4\u65B0",questionMovedTitle:"\u8CEA\u554F\u3092\u79FB\u52D5",questionReorderedTitle:"\u8CEA\u554F\u306E\u9806\u5E8F\u3092\u5909\u66F4",questionAddedTitle:"\u8CEA\u554F\u3092\u8FFD\u52A0",questionDeletedTitle:"\u8CEA\u554F\u3092\u524A\u9664",arrowTo:e=>`\u2192 \u300C${e}\u300D`,arrowFrom:(e,t)=>`\u300C${e}\u300D\u2192\u300C${t}\u300D`,added:e=>`+ \u300C${e}\u300D`,deleted:e=>`\u2212 \u300C${e}\u300D`,toTop:"\u2192 \u5148\u982D\u3078",afterPlacement:e=>`\u2192 \u300C${e}\u300D\u306E\u76F4\u5F8C\u3078`,wholeMap:"\u30DE\u30C3\u30D7\u5168\u4F53"}}),X=(e,t,r)=>{const n=typeof r=="string"?r:"",a=typeof t=="string"?t:void 0;return a===void 0?e.arrowTo(n):e.arrowFrom(a,n)},pt={SET_STORY_NAME:(e,t,r)=>({title:e.storyRenamedTitle,tone:"update",body:X(e,T(r,t.target.id)?.name,g(u.SET_STORY_NAME,t).name??"")}),SET_STORY_DESCRIPTION:(e,t)=>({title:e.storyDescriptionUpdatedTitle,tone:"update",body:e.arrowTo(String(g(u.SET_STORY_DESCRIPTION,t).description??"").slice(0,90))}),REORDER_STORY:(e,t)=>({title:e.storyReorderedTitle,tone:"move",body:Y(e,g(u.REORDER_STORY,t).after)}),ADD_STORY:(e,t)=>({title:e.storyAddedTitle,tone:"create",body:e.added(String(g(u.ADD_STORY,t).name??""))}),DELETE_STORY:(e,t,r)=>({title:e.storyDeletedTitle,tone:"delete",body:e.deleted(T(r,t.target.id)?.name??t.target.id)}),SET_RULE_NAME:(e,t,r)=>({title:e.ruleRenamedTitle,tone:"update",body:X(e,y(r,t.target.id)?.name,g(u.SET_RULE_NAME,t).name??"")}),SET_RULE_DESCRIPTION:(e,t)=>({title:e.ruleDescriptionUpdatedTitle,tone:"update",body:e.arrowTo(String(g(u.SET_RULE_DESCRIPTION,t).description??"").slice(0,90))}),MOVE_RULE:(e,t,r)=>({title:e.ruleMovedTitle,tone:"move",body:e.arrowTo(T(r,String(g(u.MOVE_RULE,t).storyId))?.name??String(g(u.MOVE_RULE,t).storyId??""))}),REORDER_RULE:(e,t)=>({title:e.ruleReorderedTitle,tone:"move",body:Y(e,g(u.REORDER_RULE,t).after)}),ADD_RULE:(e,t)=>({title:e.ruleAddedTitle,tone:"create",body:e.added(String(g(u.ADD_RULE,t).name??""))}),DELETE_RULE:(e,t,r)=>({title:e.ruleDeletedTitle,tone:"delete",body:e.deleted(y(r,t.target.id)?.name??t.target.id)}),SET_EXAMPLE_NAME:(e,t,r)=>({title:e.exampleRenamedTitle,tone:"update",body:X(e,R(r,t.target.id)?.name,g(u.SET_EXAMPLE_NAME,t).name??"")}),SET_EXAMPLE_DESCRIPTION:(e,t)=>({title:e.exampleDescriptionUpdatedTitle,tone:"update",body:e.arrowTo(String(g(u.SET_EXAMPLE_DESCRIPTION,t).description??"").slice(0,90))}),MOVE_EXAMPLE:(e,t,r)=>({title:e.exampleMovedTitle,tone:"move",body:e.arrowTo(y(r,String(g(u.MOVE_EXAMPLE,t).ruleId))?.name??String(g(u.MOVE_EXAMPLE,t).ruleId??""))}),REORDER_EXAMPLE:(e,t)=>({title:e.exampleReorderedTitle,tone:"move",body:Y(e,g(u.REORDER_EXAMPLE,t).after)}),ADD_EXAMPLE:(e,t)=>({title:e.exampleAddedTitle,tone:"create",body:e.added(String(g(u.ADD_EXAMPLE,t).name??""))}),DELETE_EXAMPLE:(e,t,r)=>({title:e.exampleDeletedTitle,tone:"delete",body:e.deleted(R(r,t.target.id)?.name??t.target.id)}),SET_QUESTION_NAME:(e,t,r)=>({title:e.questionRenamedTitle,tone:"update",body:X(e,S(r,t.target.id)?.name,g(u.SET_QUESTION_NAME,t).name??"")}),SET_QUESTION_DESCRIPTION:(e,t)=>({title:e.questionDescriptionUpdatedTitle,tone:"update",body:e.arrowTo(String(g(u.SET_QUESTION_DESCRIPTION,t).description??"").slice(0,90))}),MOVE_QUESTION:(e,t,r)=>({title:e.questionMovedTitle,tone:"move",body:e.arrowTo(y(r,String(g(u.MOVE_QUESTION,t).ruleId))?.name??String(g(u.MOVE_QUESTION,t).ruleId??""))}),REORDER_QUESTION:(e,t)=>({title:e.questionReorderedTitle,tone:"move",body:Y(e,g(u.REORDER_QUESTION,t).after)}),ADD_QUESTION:(e,t)=>({title:e.questionAddedTitle,tone:"create",body:e.added(String(g(u.ADD_QUESTION,t).name??""))}),DELETE_QUESTION:(e,t,r)=>({title:e.questionDeletedTitle,tone:"delete",body:e.deleted(S(r,t.target.id)?.name??t.target.id)})},Y=(e,t)=>t==null?e.toTop:e.afterPlacement(t),ge=(e,t,r,n)=>{let a;try{const o=pt[t.type];a=o?o(e,t,n??r):{title:t.type,tone:"meta"}}catch{a={title:t.type,tone:"meta"}}return{title:a.title,targetLabel:xe(e,r,t.target),tone:a.tone,...a.body===void 0?{}:{summary:a.body}}},ye=e=>`${e.type} ${O(e.target)} ${JSON.stringify(e.payload)}`,xe=(e,t,r)=>{try{switch(r.type){case"story":{const n=T(t,r.id);return n?`${e.kindLabel("story")} \xB7 ${n.name}`:`${e.kindLabel("story")} \xB7 ${r.id} (missing)`}case"rule":{const n=y(t,r.id);return n?`${e.kindLabel("rule")} \xB7 ${n.name}`:`${e.kindLabel("rule")} \xB7 ${r.id} (missing)`}case"example":{const n=R(t,r.id);return n?`${e.kindLabel("example")} \xB7 ${n.name}`:`${e.kindLabel("example")} \xB7 ${r.id} (missing)`}case"question":{const n=S(t,r.id);return n?`${e.kindLabel("question")} \xB7 ${n.name}`:`${e.kindLabel("question")} \xB7 ${r.id} (missing)`}case"page":return`${e.map} \xB7 ${j(t)}`;default:return`${r.type} \xB7 ${r.id}`}}catch{return`${r.type} \xB7 ${r.id}`}},fe=(e,t,r)=>{const n=[{value:"page:example-mapping",label:e.wholeMap,group:e.map}];for(const a of t.stories)n.push({value:O({type:"story",id:a.id}),label:a.name,group:e.kindLabel("story")});for(const a of t.rules){const o=T(t,a.storyId);n.push({value:O({type:"rule",id:a.id}),label:o?`${o.name} \u203A ${a.name}`:a.name,group:e.kindLabel("rule")})}for(const a of t.examples){const o=y(t,a.ruleId);n.push({value:O({type:"example",id:a.id}),label:o?`${o.name} \u203A ${a.name}`:a.name,group:e.kindLabel("example")})}for(const a of t.questions){const o=y(t,a.ruleId);n.push({value:O({type:"question",id:a.id}),label:o?`${o.name} \u203A ${a.name}`:a.name,group:e.kindLabel("question")})}return n},he=(e,t,r)=>{const n=U(t,r.card);return n?{value:O({type:n.kind,id:n.id}),label:n.name,group:e.kindLabel(n.kind)}:null},ut=4,Te=(e,t,r)=>{const n=t.rules.filter(p=>p.storyId===r),a=new Set(n.map(p=>p.id)),o=t.examples.filter(p=>a.has(p.ruleId)),i=t.questions.filter(p=>a.has(p.ruleId)).length,d=n.some(p=>!o.some(l=>l.ruleId===p.id)),c=n.length===0?"empty":i>0?"open-questions":n.length>ut?"too-big":d?"thin":"ready";return{rules:n.length,examples:o.length,questions:i,readiness:c,label:e.readinessLabel(c)}},j=e=>e.title??"Example Mapping",Re=(e,t)=>{const r=U(e,t.card),n={...t};return r?n.card=r.id:delete n.card,n},Se=(e,t)=>{switch(t.type){case"story":case"rule":case"example":case"question":return U(e,t.id)?.kind===t.type;case"page":return!0;default:return!1}},be=e=>{const t=C(e);return{name:"example-mapping",label:"Example Mapping",parseBase:te,emptyBase:re,actions:u,apply:se,canonicalState:nt,hasTarget:Se,describe:(r,n,a)=>ge(t,r,n,a),serialize:ye,resolveNavigation:Re,commentTargets:(r,n)=>fe(t,r),currentTarget:(r,n)=>he(t,r,n),title:j}},B=(e,t,r)=>{const n=Xe(t,ie(e.state));return e.dispatch(r(n)).ok?(e.navigate({card:n}),n):null},ct=(e,t)=>B(e,"new-story",r=>L.addStory(r,t.newStory)),mt=(e,t,r)=>B(e,"new-rule",n=>L.addRule(r,n,t.newRule)),Et=(e,t,r)=>B(e,"new-example",n=>L.addExample(r,n,t.newExample)),gt=(e,t,r)=>B(e,"new-question",n=>L.addQuestion(r,n,t.newQuestion)),yt={width:300,height:260},_e=["story","rule","example","question"],ve={story:{bg:"linear-gradient(178deg, #fff3a6, #fde77a)",ink:"#4a3a06"},rule:{bg:"linear-gradient(178deg, #a3d1f5, #7cb8ea)",ink:"#0e2c4b"},example:{bg:"linear-gradient(178deg, #c9eb95, #a8dc63)",ink:"#22380a"},question:{bg:"linear-gradient(178deg, #fbc6d9, #f4a0c0)",ink:"#4b1029"}},k=e=>{const{bg:t,ink:r}=ve[e];return`--em-card-bg:${t};--em-card-ink:${r}`},xt=H`
+  :host {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    box-sizing: border-box;
+    min-height: 76px;
+    padding: 17px 11px 11px;
+    border-radius: 3px;
+    background: var(--em-card-bg, var(--dpk-paper-raised));
+    color: var(--em-card-ink, var(--dpk-ink));
+    box-shadow:
+      0 1px 2px rgba(30, 24, 10, 0.14),
+      0 5px 10px -4px rgba(30, 24, 10, 0.24);
+    cursor: grab;
+    transform: rotate(var(--em-tilt, 0deg));
+    transition:
+      transform 180ms ease,
+      box-shadow 180ms ease,
+      opacity 180ms ease;
+  }
+
+  :host(:hover) {
+    z-index: 6;
+    transform: rotate(0deg) translateY(-2px);
+    box-shadow:
+      0 2px 4px rgba(30, 24, 10, 0.16),
+      0 12px 22px -6px rgba(30, 24, 10, 0.3);
+  }
+
+  :host([focused]) {
+    z-index: 5;
+    outline: 2px solid var(--dpk-blue);
+    outline-offset: 2px;
+    transform: rotate(0deg);
+  }
+
+  :host([data-mode='editing']),
+  :host([data-mode='commenting']) {
+    z-index: 7;
+    transform: rotate(0deg);
+  }
+
+  :host([dragging]) {
+    opacity: 0.4;
+  }
+
+  :host([data-kind='story']) {
+    min-height: 68px;
+    padding: 19px 14px 13px;
+  }
+
+  /* Small, faint, top-left: readable when looked for, quiet when not. */
+  .card-kind {
+    position: absolute;
+    top: 5px;
+    left: 8px;
+    font-family: var(--dpk-mono);
+    font-size: 8px;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    opacity: 0.5;
+  }
+
+  .card-name {
+    min-width: 0;
+    font-size: 13px;
+    font-weight: 680;
+    line-height: 1.35;
+    letter-spacing: -0.01em;
+    overflow-wrap: anywhere;
+    cursor: text;
+  }
+
+  :host([data-kind='story']) .card-name {
+    font-size: 15.5px;
+    line-height: 1.3;
+  }
+
+  .card-text {
+    font-size: 11.5px;
+    line-height: 1.5;
+    opacity: 0.72;
+    white-space: pre-wrap;
+  }
+
+  /* Comments already left: a corner flag, readable without hover. */
+  .card-flag {
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    min-width: 17px;
+    height: 17px;
+    padding: 0 4px;
+    box-sizing: border-box;
+    border-radius: 999px;
+    background: var(--dpk-accent);
+    color: var(--dpk-accent-ink);
+    font-family: var(--dpk-mono);
+    font-size: 9.5px;
+    font-weight: 650;
+    line-height: 17px;
+    text-align: center;
+    box-shadow: 0 1px 4px rgba(217, 73, 32, 0.35);
+  }
+
+  /* A side rail of round buttons that fades in on hover, like Event Storming:
+     nothing crosses the card's face. */
+  .card-tools {
+    position: absolute;
+    top: 9px;
+    right: -11px;
+    z-index: 8;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 140ms ease;
+  }
+
+  :host(:hover) .card-tools,
+  :host([data-mode='commenting']) .card-tools,
+  .card-tools:focus-within {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .card-tools .dpk-icon-btn {
+    width: 22px;
+    height: 22px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--dpk-paper-raised) 94%, transparent);
+    box-shadow: var(--dpk-shadow-xs);
+  }
+`;class ft extends Ye{static{this.styles=[Be,xt,Ve]}static{this.properties={card:{attribute:!1},notes:{attribute:!1},tilt:{attribute:!1},mode:{type:String,reflect:!0,attribute:"data-mode"},focused:{type:Boolean,reflect:!0},dragging:{type:Boolean,reflect:!0},onIntent:{attribute:!1}}}#r="";#a=new He(this);#e=new ze(this);constructor(){super(),this.card=null,this.notes=[],this.tilt=0,this.mode="view",this.focused=!1,this.dragging=!1,this.onIntent=null,this.addEventListener("click",()=>this.#t({kind:"select"})),this.addEventListener("focusin",()=>this.draggable=!1),this.addEventListener("focusout",()=>this.draggable=!0)}updated(t){if(t.has("card")&&this.card){const{bg:a,ink:o}=ve[this.card.kind];this.setAttribute("data-kind",this.card.kind),this.style.setProperty("--em-card-bg",a),this.style.setProperty("--em-card-ink",o)}if(t.has("tilt")&&this.style.setProperty("--em-tilt",`${this.tilt}deg`),t.has("mode")&&(this.mode!=="commenting"&&(this.#r=""),this.mode==="editing"&&this.renderRoot.querySelector("dpk-component-inline-edit")?.startEditing()),this.mode!=="commenting")return;const r=this.renderRoot.querySelector(".comment-pop"),n=this.renderRoot.querySelector('[data-role="comment"]');r&&n&&this.#a.open(r,n,yt)}render(){const t=this.card;if(!t)return $;const r=C(this.#e.locale),n=r.kindLabel(t.kind);return h`
+      <div class="card-kind">${n}</div>
+      <dpk-component-inline-edit
+        class="card-name"
+        ?wrap=${!0}
+        ?seamless=${!0}
+        .value=${t.name}
+        .label=${r.nameField(n)}
+        @dpk-commit=${Ke(a=>this.#t({kind:"rename",name:a}))}
+      ></dpk-component-inline-edit>
+      ${t.description?h`<div class="card-text">${t.description}</div>`:$}
+      ${this.notes.length>0?h`<span class="card-flag">${this.notes.length}</span>`:$}
+      <div class="card-tools">
+        <button
+          class="dpk-icon-btn"
+          type="button"
+          data-role="comment"
+          aria-label=${r.commentButton}
+          data-active=${String(this.mode==="commenting")}
+          @click=${this.#n({kind:"toggle-comment"})}
+        >
+          ${Fe()}
+        </button>
+        <button
+          class="dpk-icon-btn"
+          type="button"
+          data-role="delete"
+          aria-label=${r.deleteButton}
+          @click=${this.#n({kind:"delete"})}
+        >
+          ${je()}
+        </button>
+      </div>
+      ${this.mode==="commenting"?this.#o(t):$}
+    `}#o(t){return Ze(et(this.#e.locale),Ge(this.#r,this.notes.map(Je),{label:t.name}),r=>{r.kind==="input"?(this.#r=r.body,this.requestUpdate()):this.#t(r)})}#n(t){return r=>{r.stopPropagation(),this.#t(t)}}#t(t){this.onIntent?.(t)}}const ht=()=>{customElements.get("dpk-internal-example-mapping-card")||customElements.define("dpk-internal-example-mapping-card",ft)},M=(e,t,r)=>{const n=e.at(-1)??null;if(t===null||r==="end")return n;const a=e.indexOf(t);return a<0?n:r==="after"?t:a===0?null:e.at(a-1)??null},De=(e,t,r,n)=>{if(!T(e,t))return null;const a=e.stories.filter(o=>o.id!==t).map(o=>o.id);return{type:"REORDER_STORY",target:{type:"story",id:t},payload:{after:M(a,r,n)}}},Ie=(e,t,r,n,a)=>{if(!T(e,t)||!y(e,r))return null;const o=e.rules.filter(i=>i.storyId===t&&i.id!==r).map(i=>i.id);return{type:"MOVE_RULE",target:{type:"rule",id:r},payload:{storyId:t,after:M(o,n,a)}}},Oe=(e,t,r,n,a)=>{if(!y(e,t)||!R(e,r))return null;const o=e.examples.filter(i=>i.ruleId===t&&i.id!==r).map(i=>i.id);return{type:"MOVE_EXAMPLE",target:{type:"example",id:r},payload:{ruleId:t,after:M(o,n,a)}}},ke=(e,t,r,n,a)=>{if(!y(e,t)||!S(e,r))return null;const o=e.questions.filter(i=>i.ruleId===t&&i.id!==r).map(i=>i.id);return{type:"MOVE_QUESTION",target:{type:"question",id:r},payload:{ruleId:t,after:M(o,n,a)}}},V={kind:"idle"},J=(e,t)=>e.kind!=="idle"&&e.cardId===t,$e=(e,t)=>J(e,t)&&(e.kind==="editing"||e.kind==="commenting")?e.kind:"view",Le=(e,t,r)=>{switch(r.kind){case"toggle-comment":return e.kind==="commenting"&&e.cardId===t?V:{kind:"commenting",cardId:t};case"rename":case"comment":case"dismiss":case"delete":return J(e,t)?V:e;case"select":return e}},Tt=(e,t)=>{if(e==="story")return 0;let r=0;for(const n of t)r=r*31+n.charCodeAt(0)|0;return(Math.abs(r)%5-2)*.45},Rt=e=>h`<ul class="legend" aria-label=${e.cardKinds}>
+    ${_e.map(t=>h`<li><span class="legend-swatch" style=${k(t)}></span>${e.kindLabel(t)}</li>`)}
+  </ul>`,St=e=>{const{context:t,handlers:r,m:n}=e;return t.state.stories.length===0?h`
+      <div class="empty">
+        <h2>${n.noStoriesTitle}</h2>
+        <p>${n.noStoriesBody}</p>
+        <button class="dpk-btn dpk-btn--accent" type="button" @click=${r.addStory}>${n.firstStory}</button>
+      </div>
+    `:h`
+    <div class="board" data-testid="example-mapping-board">
+      ${z(t.state.stories,a=>a.id,a=>bt(e,a))}
+      <button class="add-story" type="button" @click=${r.addStory}>${n.addStoryButton}</button>
+    </div>
+  `},W=(e,t,r)=>{const{context:n,mode:a,drag:o,handlers:i}=e,d=n.comments.filter(p=>p.target.type===t&&p.target.id===r.id),c=o.source({type:t,id:r.id});return h`<dpk-internal-example-mapping-card
+    data-card=${r.id}
+    data-card-kind=${t}
+    draggable="true"
+    .card=${{kind:t,id:r.id,name:r.name,...r.description===void 0?{}:{description:r.description}}}
+    .notes=${d}
+    .tilt=${Tt(t,r.id)}
+    .mode=${$e(a,r.id)}
+    .onIntent=${p=>i.cardIntent(r.id,t,p)}
+    ?focused=${n.navigation.card===r.id}
+    ?dragging=${o.isDragging(t,r.id)}
+    @dragstart=${c.dragstart}
+    @dragend=${c.dragend}
+  ></dpk-internal-example-mapping-card>`},bt=(e,t)=>{const{context:r,drag:n,handlers:a,m:o}=e,i=Te(o,r.state,t.id),d=`story:${t.id}`,c=n.target({key:d,accepts:"story",hovered:we(".story-section","story"),onDrop:a.dropStory}),p=`rules:${t.id}`,l=n.target({key:p,accepts:"rule",hovered:we(".rule-col","rule"),onDrop:_=>a.dropRule(t.id,_)});return h`
+    <section
+      class="story-section"
+      data-story=${t.id}
+      data-drop=${String(n.isOver(d))}
+      @dragenter=${c.dragenter}
+      @dragover=${c.dragover}
+      @dragleave=${c.dragleave}
+      @drop=${c.drop}
+    >
+      <header class="story-row">
+        <div class="story-slot">${W(e,"story",t)}</div>
+        <div class="story-meta">
+          <span class="readiness" data-readiness=${i.readiness}>${i.label}</span>
+          <span class="tally"
+            ><i class="tally-dot" style=${k("rule")}></i>${o.kindLabel("rule")} ${i.rules}</span
+          >
+          <span class="tally"
+            ><i class="tally-dot" style=${k("example")}></i>${o.kindLabel("example")}
+            ${i.examples}</span
+          >
+          <span class="tally"
+            ><i class="tally-dot" style=${k("question")}></i>${o.kindLabel("question")}
+            ${i.questions}</span
+          >
+        </div>
+      </header>
+      <div
+        class="rules-row"
+        data-testid=${`rules-${t.id}`}
+        data-drop=${String(n.isOver(p))}
+        @dragenter=${l.dragenter}
+        @dragover=${l.dragover}
+        @dragleave=${l.dragleave}
+        @drop=${l.drop}
+      >
+        ${z(ne(r.state,t.id),_=>_.id,_=>_t(e,_))}
+        <button class="add-rule" type="button" @click=${()=>a.addRule(t.id)}>
+          <span class="add-plus">+</span>${o.kindLabel("rule")}
+        </button>
+      </div>
+    </section>
+  `},_t=(e,t)=>{const{drag:r}=e;return h`
+    <div class="rule-col" data-rule=${t.id} ?data-dragging=${r.isDragging("rule",t.id)}>
+      ${W(e,"rule",t)} ${Me(e,t.id,"example")}
+      ${Me(e,t.id,"question")}
+    </div>
+  `},vt={example:"examples",question:"questions"},Dt=(e,t)=>({testid:vt[t],label:e.kindLabel(t),empty:t==="example"?e.noExamples:e.noQuestions,add:`+ ${e.kindLabel(t)}`}),Me=(e,t,r)=>{const{context:n,drag:a,handlers:o,m:i}=e,d=Dt(i,r),c=`${d.testid}:${t}`,p=r==="example"?a.target({key:c,accepts:"example",hovered:Ae("example"),onDrop:v=>o.dropExample(t,v)}):a.target({key:c,accepts:"question",hovered:Ae("question"),onDrop:v=>o.dropQuestion(t,v)}),l=r==="example"?ae(n.state,t):oe(n.state,t),_=r==="example"?o.addExample:o.addQuestion;return h`<div
+    class="card-area card-area--${r}"
+    data-testid=${`${d.testid}-${t}`}
+    data-drop=${String(a.isOver(c))}
+    @dragenter=${p.dragenter}
+    @dragover=${p.dragover}
+    @dragleave=${p.dragleave}
+    @drop=${p.drop}
+  >
+    <h3 class="area-label"><i class="tally-dot" style=${k(r)}></i>${d.label}</h3>
+    ${z(l,v=>v.id,v=>W(e,r,v))}
+    ${l.length===0?h`<p class="stack-hint">${d.empty}</p>`:$}
+    <button class="add-card add-${r}" type="button" @click=${()=>_(t)}>${d.add}</button>
+  </div>`},Ae=e=>t=>{const r=t.target instanceof Element?t.target.closest("dpk-internal-example-mapping-card"):null;return!r||r.getAttribute("data-card-kind")!==e?null:{id:r.getAttribute("data-card"),element:r}},we=(e,t)=>r=>{const n=r.target instanceof Element?r.target.closest(e):null;return n?{id:n.getAttribute(`data-${t}`),element:n}:null},It=H`
+  /* ------------------------------------------------------------ legend */
+
+  .legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 14px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 11.5px;
+    color: var(--dpk-ink-soft);
+  }
+
+  .legend li {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .legend-swatch {
+    width: 14px;
+    height: 11px;
+    border-radius: 2px;
+    background: var(--em-card-bg);
+    box-shadow: 0 1px 2px rgba(30, 24, 10, 0.18);
+  }
+
+  /* ------------------------------------------------------------- board */
+
+  .board {
+    display: grid;
+    gap: 22px;
+    align-content: start;
+  }
+
+  .story-section {
+    display: grid;
+    gap: 18px;
+    min-width: 0;
+    padding: 20px 22px 24px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-lg);
+    background:
+      radial-gradient(circle, var(--dpk-rule) 1px, transparent 1.2px) 0 0 / 18px 18px,
+      var(--dpk-paper-raised);
+    box-shadow: var(--dpk-shadow);
+    transition: outline-color 150ms ease;
+  }
+
+  .story-section[data-drop='true'] {
+    outline: 2px dashed var(--dpk-blue);
+    outline-offset: 4px;
+  }
+
+  /* The story heads the table: one wide card, with where it stands beside it. */
+  .story-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 14px 20px;
+  }
+
+  .story-slot {
+    width: min(420px, 100%);
+  }
+
+  .story-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .readiness {
+    padding: 4px 11px;
+    border-radius: 999px;
+    font-size: 11.5px;
+    font-weight: 650;
+    background: var(--dpk-paper-sunken);
+    color: var(--dpk-ink-soft);
+  }
+
+  .readiness[data-readiness='ready'] {
+    background: var(--dpk-green-soft);
+    color: var(--dpk-green);
+  }
+
+  .readiness[data-readiness='open-questions'],
+  .readiness[data-readiness='too-big'] {
+    background: var(--dpk-danger-soft);
+    color: var(--dpk-danger);
+  }
+
+  .readiness[data-readiness='thin'] {
+    background: var(--dpk-amber-soft);
+    color: var(--dpk-amber);
+  }
+
+  .tally {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 9px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: 999px;
+    background: var(--dpk-paper-raised);
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+    font-variant-numeric: tabular-nums;
+    color: var(--dpk-ink-soft);
+  }
+
+  .tally-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    background: var(--em-card-bg);
+  }
+
+  /* ------------------------------------------------- rules and examples */
+
+  /* Rules side by side under the story; the row scrolls, never the page. */
+  .rules-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    min-width: 0;
+    overflow-x: auto;
+    padding: 4px 4px 16px;
+    border-radius: var(--dpk-radius);
+  }
+
+  .rules-row[data-drop='true'] {
+    background: var(--dpk-blue-soft);
+  }
+
+  /* A rule and its examples read as one lane: a soft tint, no side border. */
+  .rule-col {
+    flex: 0 0 204px;
+    display: grid;
+    gap: 16px;
+    align-content: start;
+    padding: 10px 10px 14px;
+    border-radius: var(--dpk-radius-lg);
+    background: linear-gradient(180deg, rgba(51, 102, 204, 0.09), rgba(51, 102, 204, 0.03) 70%, transparent);
+  }
+
+  .rule-col[data-dragging] {
+    opacity: 0.45;
+  }
+
+  /* Examples on top, questions below: two areas, each its own drop target. */
+  .card-area {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+    min-height: 44px;
+    padding: 8px 8px 10px;
+    border-radius: var(--dpk-radius);
+  }
+
+  .card-area--example {
+    background: var(--dpk-green-soft);
+  }
+
+  .card-area--question {
+    background: var(--dpk-danger-soft);
+  }
+
+  .card-area--question dpk-internal-example-mapping-card {
+    min-height: 56px;
+  }
+
+  .card-area[data-drop='true'] {
+    outline: 2px dashed var(--dpk-blue);
+    outline-offset: 2px;
+  }
+
+  .area-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: var(--dpk-ink-soft);
+  }
+
+  .stack-hint {
+    margin: 0;
+    font-size: 11px;
+    color: var(--dpk-ink-faint);
+    text-align: center;
+  }
+
+  /* -------------------------------------------------------- add buttons */
+
+  .add-card,
+  .add-rule,
+  .add-story {
+    border: 1px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: color-mix(in srgb, var(--dpk-paper-raised) 60%, transparent);
+    color: var(--dpk-ink-faint);
+    font: inherit;
+    font-size: 11.5px;
+    cursor: pointer;
+    transition:
+      background 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease;
+  }
+
+  .add-card {
+    padding: 6px 8px;
+  }
+
+  .add-rule {
+    flex: 0 0 120px;
+    display: grid;
+    place-items: center;
+    align-content: center;
+    gap: 2px;
+    min-height: 96px;
+  }
+
+  .add-plus {
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  .add-story {
+    justify-self: start;
+    padding: 10px 18px;
+    font-size: 12.5px;
+  }
+
+  .add-card:hover,
+  .add-rule:hover,
+  .add-story:hover {
+    border-color: var(--dpk-blue);
+    background: var(--dpk-blue-soft);
+    color: var(--dpk-blue);
+  }
+
+  .empty {
+    display: grid;
+    gap: 10px;
+    max-width: 620px;
+    padding: 28px 24px;
+    border: 1px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-lg);
+    background: var(--dpk-paper-raised);
+  }
+
+  .empty p {
+    margin: 0;
+    color: var(--dpk-ink-soft);
+    line-height: 1.7;
+  }
+`,Ot={story:"SET_STORY_NAME",rule:"SET_RULE_NAME",example:"SET_EXAMPLE_NAME",question:"SET_QUESTION_NAME"},kt={story:"DELETE_STORY",rule:"DELETE_RULE",example:"DELETE_EXAMPLE",question:"DELETE_QUESTION"};class qe extends Z{static{this.styles=[Z.styles,It]}definitionFor(t){return be(t)}static{this.properties={mode:{state:!0}}}#r=new We(this);constructor(){super(),this.mode=V}renderRegions(t){const r=C(this.locale);return{header:Rt(r),main:this.#a(t,r)}}#a(t,r){return h`
+      ${St({context:t,mode:this.mode,drag:this.#r,m:r,handlers:{cardIntent:(n,a,o)=>this.#o(n,a,o),addStory:()=>this.#e(ct(t,r)),addRule:n=>this.#e(mt(t,r,n)),addExample:n=>this.#e(Et(t,r,n)),addQuestion:n=>this.#e(gt(t,r,n)),dropStory:n=>this.#n(n),dropRule:(n,a)=>this.#t(n,a),dropExample:(n,a)=>this.#d(n,a),dropQuestion:(n,a)=>this.#s(n,a)}})}
+    `}#e(t){t!==null&&(this.mode={kind:"editing",cardId:t})}#o(t,r,n){const a=this.context();switch(n.kind){case"select":a.navigate({card:t});break;case"rename":a.dispatch({type:Ot[r],target:{type:r,id:t},payload:{name:n.name}});break;case"comment":a.dispatch({type:"comment",target:`${r}:${t}`,payload:{body:n.body}});break;case"delete":a.dispatch({type:kt[r],target:{type:r,id:t},payload:{}}),a.navigation.card===t&&a.navigate({card:null});break}this.mode=Le(this.mode,t,n)}#n(t){const r=this.context(),n=De(r.state,t.item.id,t.hoveredId,t.place);n&&r.dispatch(n)}#t(t,r){const n=this.context(),a=this.#i(r.hoveredId,r.event.clientX,r.place),o=Ie(n.state,t,r.item.id,r.hoveredId,a);o&&n.dispatch(o)}#i(t,r,n){if(t===null)return n;const a=this.renderRoot.querySelector(`.rule-col[data-rule="${t}"]`);if(!a)return n;const o=a.getBoundingClientRect();return r<=o.left+o.width/2?"before":"after"}#d(t,r){const n=this.context(),a=Oe(n.state,t,r.item.id,r.hoveredId,r.place);a&&n.dispatch(a)}#s(t,r){const n=this.context(),a=ke(n.state,t,r.item.id,r.hoveredId,r.place);a&&n.dispatch(a)}}const Ne=()=>{ht(),customElements.get("dpk-template-example-mapping")||customElements.define("dpk-template-example-mapping",qe)},$t=Object.freeze(Object.defineProperty({__proto__:null,CARD_KINDS:_e,DpkTemplateExampleMapping:qe,IDLE_MODE:V,allMappingIds:ie,applyExampleMappingAction:se,cardModeOf:$e,cardPaletteStyle:k,defineExampleMappingElement:Ne,describeExampleMappingAction:ge,dropAfter:M,emptyExampleMappingBase:re,exampleMappingAction:L,exampleMappingActions:u,exampleMappingBaseSchema:ee,exampleMappingCommentTargets:fe,exampleMappingCurrentTarget:he,exampleMappingDefinitionFor:be,exampleMappingHasTarget:Se,exampleMappingMessages:C,exampleMappingTargetLabel:xe,exampleMappingTitle:j,examplesOfRule:ae,findCard:U,findExample:R,findQuestion:S,findRule:y,findStory:T,modeConcerns:J,parseExampleMappingBase:te,presentStorySummary:Te,questionsOfRule:oe,reduceCardIntent:Le,reorderById:Ee,resolveExampleDrop:Oe,resolveExampleMappingNavigation:Re,resolveQuestionDrop:ke,resolveRuleDrop:Ie,resolveStoryDrop:De,rulesOfStory:ne,serializeExampleMappingAction:ye,storyIdOfCard:at,storyIdOfExample:ot,storyIdOfRule:de},Symbol.toStringTag,{value:"Module"}));export{Ne as d,$t as i};