{title ?? result.title}

{problem.msg}

","\t\t\t\t\t{result.problems.map((problem, index) => (","\t\t\t\t

Unable to render diagram

","\t\treturn (","\tif (!result.ok) {","\tlet result = useMemo(() => renderDiagram(spec), [spec]);","export function Diagram({ spec, ...props }: DiagramProps) {","\t\t","\t\t\t{status &&

{status}

}","\t\t\t)}","\t\t\t\t","\t\t\t\t\t)}","\t\t\t\t\t\t

","\t\t\t\t\t\t\t})}","\t\t\t\t\t\t\t\t);","\t\t\t\t\t\t\t\t\t","\t\t\t\t\t\t\t\t\t\t","\t\t\t\t\t\t\t\t\t\t\t{edge.from === selectedNode?.id ? \"To\" : \"From\"} {labelFor(other)}","\t\t\t\t\t\t\t\t\t\t","\t\t\t\t\t\t\tClose","\t\t\t\t\t\t>","\t\t\t\t\t\t\taria-label=\"Close diagram details\"","\t\t\t\t\t\t\tonClick={() => setSelected(null)}","\t\t\t\t\t\t\ttype=\"button\"","\t\t\t\t\t\t","\t\t\t\t\t\t\t","\t\t\t\t\t\t\t\t\t: selected.id)}","\t\t\t\t\t\t\t\t\t? `${labelFor(selectedEdge.from)} → ${labelFor(selectedEdge.to)}`","\t\t\t\t\t\t\t\t{selectedNode?.label ?? (selectedEdge","\t\t\t\t\t\t\t

","\t\t\t\t\t\t\t
{selected.kind === \"node\" ? \"Node\" : \"Connection\"}
","\t\t\t\t\t\t
","\t\t\t\t\t
","\t\t\t\t
","\t\t\t{selected && (","\t\t\t\t","\t\t\t\t\t","\t\t\t\t\t{description ?? result.description}","\t\t\t\t\t{title ?? result.title}","\t\t\t\t>","\t\t\t\t\tonKeyDown={onKeyDown}","\t\t\t\t\tonClick={onClick}","\t\t\t\t\tonBlurCapture={onBlur}","\t\t\t\t\tonFocusCapture={onFocus}","\t\t\t\t\tonPointerOut={onPointerOut}","\t\t\t\t\tonPointerOver={onPointerOver}","\t\t\t\t\tdata-sc-steps={maxStep}","\t\t\t\t\tdata-sc-motion={motion ?? undefined}","\t\t\t\t\tdata-sc-type={result.type}","\t\t\t\t\taria-labelledby={`${titleId} ${descriptionId}`}","\t\t\t\t\trole={interactive ? \"group\" : \"img\"}","\t\t\t\t\tviewBox={result.viewBox.join(\" \")}","\t\t\t\t\tclassName=\"sc-svg\"","\t\t\t\t\tref={svgRef}","\t\t\t\t","\t\t\t\t
","\t\t\t\t\t","\t\t\t\t\t\t","\t\t\t\t\t\t\t)}","\t\t\t\t\t\t\t\t","\t\t\t\t\t\t\t{!reduced && (","\t\t\t\t\t\t\t","\t\t\t\t\t\t\t\tNext","\t\t\t\t\t\t\t>","\t\t\t\t\t\t\t\taria-label=\"Next step\"","\t\t\t\t\t\t\t\tdisabled={step === maxStep}","\t\t\t\t\t\t\t\t\tshowStep((step ?? 0) + 1)}","\t\t\t\t\t\t\t\tonClick={() =>","\t\t\t\t\t\t\t\ttype=\"button\"","\t\t\t\t\t\t\t showStep((step ?? maxStep) - 1)}","\t\t\t\t\t\t<>","\t\t\t\t\t{maxStep > 0 && (","\t\t\t\t
","\t\t\t{(maxStep > 0 || selected) && (","\t\t
","\t\t: \"\";","\t\t? `${labelFor(selectedEdge.from)} to ${labelFor(selectedEdge.to)}`","\t\t: selectedEdge","\t\t? `${selectedNode.label}: ${related.length} connection${related.length === 1 ? \"\" : \"s\"}`","\t\t: selectedNode","\t\t? `Step ${step} of ${maxStep}`","\tlet status = step !== null","\tlet labelFor = (nodeId: string) => nodes.find((node) => node.id === nodeId)?.label ?? nodeId;","\t\t: [];","\t\t? edges.filter((edge) => edge.from === selectedNode.id || edge.to === selectedNode.id)","\tlet related = selectedNode","\t\t: null;","\t\t? edges.find((edge) => edge.id === selected.id)","\tlet selectedEdge = selected?.kind === \"edge\"","\t\t? nodes.find((node) => node.id === selected.id)","\tlet selectedNode = selected?.kind === \"node\"","\t};","\t\tsetPlayback((current) => current + 1);","\t\tsetLive(true);","\t\tsetStep(null);","\t\tsetPreview(null);","\tlet replay = () => {","\t\tsetLive(false);","\t\tsetSelected(null);","\tlet reset = () => {","\t\tsetStep(Math.max(0, Math.min(maxStep, next)));","\tlet showStep = (next: number) => {","\t\tselect(item);","\t\tevent.preventDefault();","\t\tif (!item) return;","\t\tlet item = itemAt(svgRef.current, event.target);","\t\tif (event.key !== \"Enter\" && event.key !== \" \") return;","\tlet onKeyDown = (event: KeyboardEvent) => {","\t\tif (item) select(item);","\tlet onClick = (event: MouseEvent) => {","\tlet onBlur = (event: FocusEvent) => leave(event.target, event.relatedTarget);","\tlet onFocus = (event: FocusEvent) => enter(itemAt(svgRef.current, event.target));","\t\tleave(event.target, event.relatedTarget);","\tlet onPointerOut = (event: PointerEvent) =>","\t\tif (event.pointerType !== \"touch\") enter(itemAt(svgRef.current, event.target));","\tlet onPointerOver = (event: PointerEvent) => {","\t\tif (current && !sameItem(current, next)) setPreview(null);","\t\tlet next = itemAt(svgRef.current, related);","\t\tlet current = itemAt(svgRef.current, target);","\tlet leave = (target: EventTarget | null, related: EventTarget | null) => {","\t\tif (item) setPreview(item);","\tlet enter = (item: Item | null) => {","\t\tsetSelected((current) => sameItem(current, item) ? null : item);","\tlet select = (item: Item | null) => {","\t}, [step, playback]);","\t\t}","\t\t\telement.classList.toggle(\"is-shown\", step !== null && elementStep <= step);","\t\t\tlet elementStep = Number(element.getAttribute(\"data-sc-step\"));","\t\tfor (let element of svg.querySelectorAll(\"[data-sc-step]\")) {","\t\tif (!svg) return;","\t\tlet svg = svgRef.current;","\tuseEffect(() => {","\t}, [active, playback, edges]);","\t\t\t);","\t\t\t\t\t: active?.kind === \"edge\" && active.id === edgeId,","\t\t\t\t\t? active?.kind === \"node\" && active.id === nodeId","\t\t\t\tnodeId !== null","\t\t\t\t\"is-current\",","\t\t\telement.classList.toggle(","\t\t\t\tnodeId !== null ? litNodes.has(nodeId) : litEdges.has(edgeId ?? \"\"),","\t\t\t\t\"is-lit\",","\t\t\tlet edgeId = element.getAttribute(\"data-sc-edge\");","\t\t\tlet nodeId = element.getAttribute(\"data-sc-node\");","\t\tfor (let element of svg.querySelectorAll(\"[data-sc-node], [data-sc-edge]\")) {","\t\tsvg.classList.toggle(\"is-dim\", active !== null);","\t\t\t}","\t\t\t\tlitNodes.add(edge.to);","\t\t\t\tlitNodes.add(edge.from);","\t\t\tif (edge) {","\t\t\tlet edge = edges.find((entry) => entry.id === active.id);","\t\t\tlitEdges.add(active.id);","\t\t} else if (active?.kind === \"edge\") {","\t\t\t\tlitEdges.add(edge.id);","\t\t\t\tif (edge.from !== active.id && edge.to !== active.id) continue;","\t\t\tfor (let edge of edges) {","\t\t\tlitNodes.add(active.id);","\t\tif (active?.kind === \"node\") {","\t\tlet litEdges = new Set();","\t\tlet litNodes = new Set();","\t}, [body, playback, edges, nodes]);","\t\t\telement.setAttribute(\"aria-label\", `${from} to ${to}`);","\t\t\telement.setAttribute(\"role\", \"button\");","\t\t\telement.setAttribute(\"tabindex\", \"0\");","\t\t\tlet to = nodes.find((entry) => entry.id === edge.to)?.label ?? edge.to;","\t\t\tlet from = nodes.find((entry) => entry.id === edge.from)?.label ?? edge.from;","\t\t\tif (!edge) continue;","\t\t\tlet edge = edges.find((entry) => entry.id === edgeId);","\t\tfor (let element of svg.querySelectorAll(\"[data-sc-edge]\")) {","\t\t\t\telement.setAttribute(\"aria-label\", node?.label ?? `Node ${nodeId}`);","\t\t\tif (!element.hasAttribute(\"aria-label\")) {","\t\t\tlet node = nodes.find((entry) => entry.id === nodeId);","\t\tfor (let element of svg.querySelectorAll(\"[data-sc-node]\")) {","\t}, []);","\t\treturn () => query.removeEventListener(\"change\", update);","\t\tquery.addEventListener(\"change\", update);","\t\tupdate();","\t\tlet update = () => setReduced(query.matches);","\t\tlet query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");","\t\tif (typeof window.matchMedia !== \"function\") return;","\t}, [live, step]);","\t\tsvg.classList.toggle(\"sc-stepping\", step !== null);","\t\tsvg.classList.toggle(\"sc-still\", !live || step !== null);","\tlet active = preview ?? selected;","\tlet body = useMemo(() => namespaceSvgIds(result.body, prefix), [result.body, prefix]);","\tlet maxStep = motion ? Math.max(0, result.steps ?? 0) : 0;","\tlet motion = result.motion && result.motion !== \"none\" ? result.motion : null;","\tlet interactive = nodes.length > 0;","\tlet edges = graph?.edges ?? [];","\tlet nodes = graph?.nodes ?? [];","\tlet graph = result.graph;","\tlet [reduced, setReduced] = useState(false);","\tlet [playback, setPlayback] = useState(0);","\tlet [live, setLive] = useState(true);","\tlet [step, setStep] = useState(null);","\tlet [selected, setSelected] = useState(null);","\tlet [preview, setPreview] = useState(null);","\tlet svgRef = useRef(null);","\tlet descriptionId = `${prefix}-description`;","\tlet titleId = `${prefix}-title`;","\tlet prefix = `chd-${idPrefix?.replace(/[^a-zA-Z0-9_-]/g, \"\") || \"view\"}-${id}`;","\tlet id = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");","}: Omit & { result: ReadyDiagram }) {","\tidPrefix,","\tdescription,","\ttitle,","\tresult,","function DiagramView({","\treturn a?.kind === b?.kind && a?.id === b?.id;","function sameItem(a: Item | null, b: Item | null): boolean {","\treturn id === null ? null : { kind: \"edge\", id };","\tid = element.getAttribute(\"data-sc-edge\");","\tif (id !== null) return { kind: \"node\", id };","\tlet id = element.getAttribute(\"data-sc-node\");","\tif (!element || !svg.contains(element)) return null;","\tlet element = target.closest(\"[data-sc-node], [data-sc-edge]\");","\tif (!(target instanceof Element) || !svg?.contains(target)) return null;","function itemAt(svg: SVGSVGElement | null, target: EventTarget | null): Item | null {","\treturn ;","const DiagramBody = memo(function DiagramBody({ body }: { body: string }) {","type Item = { kind: \"node\" | \"edge\"; id: string };","type ReadyDiagram = Extract;","};","\tidPrefix?: string;","\t/** Supply a distinct prefix when rendering diagrams in separate React roots. */","\tdescription?: string;","\ttitle?: string;","\tspec: unknown;","export type DiagramProps = {","import { namespaceSvgIds } from \"./viewer/namespace\";","import { type DiagramResult, renderDiagram } from \"./render\";","import type { FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from \"react\";","import { memo, useEffect, useId, useMemo, useRef, useState } from \"react\";","09076706","parents",[20],"author",{"_2981":2982,"_2983":2984,"_2989":2991},"committer",{"_2981":2982,"_2983":2984,"_2989":2990},"message","feat: add scoped interactive diagram viewer","signature","subject","authors",[2980],{"_2981":2982,"_2983":2984,"_2985":2986,"_2987":2988},"name","Maggie Appleton","email","5599295+MaggieAppleton@users.noreply.github.com","login","MaggieAppleton","avatarUrl","https://avatars.githubusercontent.com/u/5599295?v=4","time",1791462348,1791457890,"documentNavigation","repo","githubnext/chopin","repoId","7d1a8ac3-35b0-4dea-85d4-06a980f3bada","ownerId","org:89615882","site","nexthub","private","admin","settings","maintainer","triage","starred","stars","watchers","watching","pinned","notify","views",[3138,3139,3140,3141,3142,3143,3144,3145,3146,3147,3148,3149,3150],"navigation",{"_3012":3013,"_3096":3097,"_3098":3099,"_3100":3101,"_3102":3103,"_3104":3105,"_77":3106},"sources",[],"viewer","meta",{"_3089":3090,"_3091":3092,"_3093":92,"_3001":26,"_3094":3084,"_3095":26,"_3007":40,"_3008":40},"branches",[3031,3032,3033,3034,3035,3036,3037,3038,3039,3040,3041,3042,3043,3044,3045,3046,3047,3048,3049,3050,3051,3052,3053,3054,3055,3056,3057,3058,3059,3060,3061,3062,3063,3064,3065,3066,3067,3068,3069,3070,3071,3072,3073,3074,3075,3076,3077,3078,3079,3080,3081,3082,3083,3084,3085,3086,3087,3088],"tags",[3027,3028,3029,3030],"cloneUrl","https://git.nexthub.sh/githubnext/chopin.git","color-controls-slice-1","color-controls-slice-2","color-controls-slice-3","color-controls-slice-4","Krzysztof-Cieslak-patch-1","Krzysztof-Cieslak-patch-2","Maggie/app-preview-toolkit","Maggie/ci-playwright-install-timeout","Maggie/collaborative-visual-decision","Maggie/design-audit","Maggie/generic-visual-decision-runtime","Maggie/impeccable-chopin-metadata","Maggie/jev-chat-product","Maggie/jev-composed-assessment","Maggie/native-document-layouts","Maggie/openui-composition-product","Maggie/openui-composition-trial","Maggie/planner-visual-authoring","Maggie/planner-visual-requests","Maggie/visual-selection-eval","artifacts/pr-419-live-preview-20261009","automation/pr-maintenance-state","automation/use-effect/callout-disabled-picker-8cf9e49ba5c09471","automation/use-effect/collaboration-options-ref-4e3a5a08a879a5ae","automation/use-effect/room-workspace-effective-access-a57d40866c71bed0","chore/bun-1.4.2","color-controls","color-controls-plan","comments","design-pr-assets","design/archived-decisions-badge","design/channel-route-remount","design/chat-decision-entry","design/conversation-analysis-markers","design/decision-evidence","design/settled-line-icon","dev/integration","diagram-step-controls","feat/liveapp-frontend-pilot","feat/local-experiments","feat/local-launcher-tracer","fix/autolink-mdx-crash","github-pills/2-pills","github-pills/3-hover-card","maggie/app-preview-toolkit","maggie/ci-playwright-install-timeout","maggie/collaborative-visual-decision","maggie/design-audit","maggie/generic-visual-decision-runtime","maggie/impeccable-chopin-metadata","maggie/jev-composed-assessment","maggie/native-document-layouts","maggie/openui-composition-product","maggie/openui-composition-trial","maggie/planner-visual-authoring","maggie/planner-visual-requests","maggie/visual-selection-eval","main","plain-text-fence-chrome","tokens/09-copy","wireframes/2-renderer","wireframes/3-planner","description","Let's compose rich plans together","owner","githubnext","section","head","empty","pins",[3121,3122,3123],"documents",{"_3116":3117,"_3118":3119},"code",{"_3112":3113,"_3114":3115},"automations",{"_3109":3110,"_3111":-5},"delivery",{"_3107":40,"_3108":-5},"04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows",3,"deployments","commits",1000,"changes",13,"counts",{"_3120":3119},"total",11,"issue",{"_3124":3114,"_2981":3136,"_32":3114,"_3127":3137,"_3010":3129,"_3130":26,"_3131":3129,"_3132":3115},{"_3124":3133,"_2981":3134,"_32":3133,"_3127":3135,"_3010":3129,"_3130":26,"_3131":3129,"_3132":40},{"_3124":3125,"_2981":3126,"_32":3125,"_3127":3128,"_3010":3129,"_3130":26,"_3131":3129,"_3132":3119},"id","issues","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_3124":3114,"_2981":3136,"_32":3114,"_3127":3181,"_3010":3129,"_3130":26,"_3131":3129},{"_3124":3133,"_2981":3134,"_32":3133,"_3127":3180,"_3010":3129,"_3130":26,"_3131":3129},{"_3124":3125,"_2981":3126,"_32":3125,"_3127":3179,"_3010":3129,"_3130":26,"_3131":3129},{"_3124":3176,"_2981":3177,"_32":3176,"_3127":3178,"_3010":26,"_3130":26,"_3131":3129},{"_3124":3173,"_2981":3174,"_32":3173,"_3127":3175,"_3010":26,"_3130":26,"_3131":3129},{"_3124":3109,"_2981":3171,"_32":3102,"_3127":3172,"_3010":26,"_3130":26,"_3131":3129},{"_3124":3111,"_2981":3168,"_32":3169,"_3127":3170,"_3010":26,"_3130":26,"_3131":3129},{"_3124":3107,"_2981":3166,"_32":3107,"_3127":3167,"_3010":26,"_3130":26,"_3131":3129},{"_3124":3162,"_2981":3163,"_32":3164,"_3127":3165,"_3010":26,"_3130":26,"_3131":3129},{"_3124":3098,"_2981":3160,"_32":3098,"_3127":3161,"_3010":26,"_3130":26,"_3131":26},{"_3124":3157,"_2981":3158,"_32":3157,"_3127":3159,"_3010":26,"_3130":26,"_3131":26},{"_3124":3154,"_2981":3155,"_32":3154,"_3127":3156,"_3010":26,"_3130":26,"_3131":26},{"_3124":3151,"_2981":3152,"_32":3151,"_3127":3153,"_3010":26,"_3130":26,"_3131":26},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794435722669,"sidebar","expanded"]