@kiberon-labs/behave-graph-flow 1.0.0 → 3.0.0

package/dist/noteImpl-KkrrWgJd.js

@@ -0,0 +1,242 @@
+import { t as useChangeNodeData } from "./useChangeNodeData-ChQGK7AI.js";
+import { useState } from "react";
+import { NodeResizer } from "reactflow";
+import { Bold, Code, Italic, List, NumberedListLeft, Quote, Strikethrough, Youtube } from "iconoir-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ErrorBoundary } from "react-error-boundary";
+import { VscodeButton, VscodeTextfield } from "@vscode-elements/react-elements";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { Markdown } from "tiptap-markdown";
+import Youtube$1 from "@tiptap/extension-youtube";
+
+//#region src/plugin/notes/FormatToolbar.tsx
+/**
+* Formatting actions for the note editor. Buttons are the same VscodeButton
+* component the FloatingToolbar uses, so the note toolbar stays visually
+* consistent with the rest of the editor chrome; the active format renders as
+* a primary (accent) button.
+*
+* The button row swallows mousedown so clicking a formatting button keeps the
+* editor's text selection instead of blurring it. The video row must NOT: its
+* text field needs focus. Video embedding uses an inline URL field rather than
+* `window.prompt`, which is blocked in VS Code webviews.
+*/
+const FormatToolbar = ({ editor }) => {
+	const [videoUrl, setVideoUrl] = useState(null);
+	const active = useEditorState({
+		editor,
+		selector: ({ editor: editor$1 }) => ({
+			bold: editor$1.isActive("bold"),
+			italic: editor$1.isActive("italic"),
+			strike: editor$1.isActive("strike"),
+			code: editor$1.isActive("code"),
+			h1: editor$1.isActive("heading", { level: 1 }),
+			h2: editor$1.isActive("heading", { level: 2 }),
+			h3: editor$1.isActive("heading", { level: 3 }),
+			bulletList: editor$1.isActive("bulletList"),
+			orderedList: editor$1.isActive("orderedList"),
+			codeBlock: editor$1.isActive("codeBlock"),
+			blockquote: editor$1.isActive("blockquote")
+		})
+	});
+	const embedVideo = () => {
+		const src = videoUrl?.trim();
+		if (src) editor.chain().focus().setYoutubeVideo({ src }).run();
+		setVideoUrl(null);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "notes-toolbar nodrag nopan",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "notes-toolbar__row",
+			onMouseDown: (e) => e.preventDefault(),
+			children: [
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.bold,
+					iconOnly: true,
+					title: "Bold",
+					onClick: () => editor.chain().focus().toggleBold().run(),
+					children: /* @__PURE__ */ jsx(Bold, {})
+				}),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.italic,
+					iconOnly: true,
+					title: "Italic",
+					onClick: () => editor.chain().focus().toggleItalic().run(),
+					children: /* @__PURE__ */ jsx(Italic, {})
+				}),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.strike,
+					iconOnly: true,
+					title: "Strikethrough",
+					onClick: () => editor.chain().focus().toggleStrike().run(),
+					children: /* @__PURE__ */ jsx(Strikethrough, {})
+				}),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.code,
+					iconOnly: true,
+					title: "Code",
+					onClick: () => editor.chain().focus().toggleCode().run(),
+					children: /* @__PURE__ */ jsx(Code, {})
+				}),
+				/* @__PURE__ */ jsx("div", { className: "notes-toolbar__separator" }),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.h1,
+					title: "Heading 1",
+					onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+					children: "H1"
+				}),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.h2,
+					title: "Heading 2",
+					onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+					children: "H2"
+				}),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.h3,
+					title: "Heading 3",
+					onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+					children: "H3"
+				}),
+				/* @__PURE__ */ jsx("div", { className: "notes-toolbar__separator" }),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.bulletList,
+					iconOnly: true,
+					title: "Bullet List",
+					onClick: () => editor.chain().focus().toggleBulletList().run(),
+					children: /* @__PURE__ */ jsx(List, {})
+				}),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.orderedList,
+					iconOnly: true,
+					title: "Numbered List",
+					onClick: () => editor.chain().focus().toggleOrderedList().run(),
+					children: /* @__PURE__ */ jsx(NumberedListLeft, {})
+				}),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.codeBlock,
+					iconOnly: true,
+					title: "Code Block",
+					onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+					children: /* @__PURE__ */ jsx(Code, {})
+				}),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: !active.blockquote,
+					iconOnly: true,
+					title: "Quote",
+					onClick: () => editor.chain().focus().toggleBlockquote().run(),
+					children: /* @__PURE__ */ jsx(Quote, {})
+				}),
+				/* @__PURE__ */ jsx("div", { className: "notes-toolbar__separator" }),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: videoUrl === null,
+					iconOnly: true,
+					title: "Embed YouTube Video",
+					onClick: () => setVideoUrl(videoUrl === null ? "" : null),
+					children: /* @__PURE__ */ jsx(Youtube, {})
+				})
+			]
+		}), videoUrl !== null && /* @__PURE__ */ jsxs("div", {
+			className: "notes-toolbar__embed",
+			onKeyDown: (e) => {
+				e.stopPropagation();
+				if (e.key === "Enter") embedVideo();
+				if (e.key === "Escape") setVideoUrl(null);
+			},
+			children: [
+				/* @__PURE__ */ jsx(VscodeTextfield, {
+					type: "text",
+					placeholder: "YouTube video URL",
+					value: videoUrl,
+					onInput: (e) => setVideoUrl(e.target.value)
+				}),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					title: "Embed",
+					onClick: embedVideo,
+					children: "Embed"
+				}),
+				/* @__PURE__ */ jsx(VscodeButton, {
+					secondary: true,
+					title: "Cancel",
+					onClick: () => setVideoUrl(null),
+					children: "Cancel"
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+//#region src/plugin/notes/noteImpl.tsx
+const NOTE_MIN_WIDTH = 160;
+const NOTE_MIN_HEIGHT = 80;
+/**
+* The actual note node, pulling in tiptap/prosemirror (~320 KB). It is loaded
+* lazily by `note.tsx` so that weight only lands in the bundle when a note
+* node is actually rendered.
+*
+* The note draws its own frame directly against the React Flow node bounds.
+* It must NOT use BaseNodeWrapper: that adds behave-node chrome (a second
+* bordered box) and breaks the height chain, so the frame sizes to content
+* instead of the node and drifts out of the NodeResizer bounds.
+*
+* Layout: the root div only positions the NodeResizer and floating toolbar (it
+* must not clip, or the toolbar disappears); the frame inside it clips. Only
+* the header drags the node (`dragHandle` set by `addNote`) — the body is
+* `nodrag nopan` so selecting text neither moves the node nor pans the canvas.
+* The editor is always editable: a single click gives a caret; the format
+* toolbar shows while the node is selected.
+*
+* Font size cascades from a React `style` on the root — never write to
+* `editor.view.dom` in an effect; tiptap v3 throws if the view has not mounted.
+*/
+const NoteNodeImpl = ({ data, selected, id }) => {
+	const handleNodeChange = useChangeNodeData(id);
+	const editor = useEditor({
+		extensions: [
+			StarterKit,
+			Markdown,
+			Youtube$1.configure({ nocookie: true })
+		],
+		content: data.text || "New note",
+		editorProps: { attributes: { class: "nodrag nopan" } },
+		onUpdate: ({ editor: editor$1 }) => {
+			const markdown = editor$1.storage.markdown;
+			if (markdown) handleNodeChange("text", markdown.getMarkdown());
+		}
+	});
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback: /* @__PURE__ */ jsx("div", { children: "Error rendering note" }),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "notes-node-root",
+			style: { fontSize: data.fontSize || "medium" },
+			children: [
+				/* @__PURE__ */ jsx(NodeResizer, {
+					minWidth: NOTE_MIN_WIDTH,
+					minHeight: NOTE_MIN_HEIGHT,
+					color: "#ff0071",
+					isVisible: selected || false
+				}),
+				editor && selected && /* @__PURE__ */ jsx(FormatToolbar, { editor }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "notes-node",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "notes-node__header",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "notes-node__grip",
+							"aria-hidden": true,
+							children: "⠿"
+						}), /* @__PURE__ */ jsx("span", { children: "Note" })]
+					}), /* @__PURE__ */ jsx(EditorContent, {
+						editor,
+						className: "notes-node__editor nodrag nopan"
+					})]
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+export { NoteNodeImpl };
+//# sourceMappingURL=noteImpl-KkrrWgJd.js.map

package/dist/noteImpl-KkrrWgJd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"noteImpl-KkrrWgJd.js","names":["editor","Youtube","editor"],"sources":["../src/plugin/notes/FormatToolbar.tsx","../src/plugin/notes/noteImpl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useEditorState, type Editor } from '@tiptap/react';\nimport { VscodeButton, VscodeTextfield } from '@vscode-elements/react-elements';\nimport {\n  Bold,\n  Code,\n  Italic,\n  List,\n  NumberedListLeft,\n  Quote,\n  Strikethrough,\n  Youtube\n} from 'iconoir-react';\n\ninterface FormatToolbarProps {\n  editor: Editor;\n}\n\n/**\n * Formatting actions for the note editor. Buttons are the same VscodeButton\n * component the FloatingToolbar uses, so the note toolbar stays visually\n * consistent with the rest of the editor chrome; the active format renders as\n * a primary (accent) button.\n *\n * The button row swallows mousedown so clicking a formatting button keeps the\n * editor's text selection instead of blurring it. The video row must NOT: its\n * text field needs focus. Video embedding uses an inline URL field rather than\n * `window.prompt`, which is blocked in VS Code webviews.\n */\nexport const FormatToolbar = ({ editor }: FormatToolbarProps) => {\n  // null = embed row closed; a string = the URL being typed.\n  const [videoUrl, setVideoUrl] = useState<string | null>(null);\n\n  const active = useEditorState({\n    editor,\n    selector: ({ editor }) => ({\n      bold: editor.isActive('bold'),\n      italic: editor.isActive('italic'),\n      strike: editor.isActive('strike'),\n      code: editor.isActive('code'),\n      h1: editor.isActive('heading', { level: 1 }),\n      h2: editor.isActive('heading', { level: 2 }),\n      h3: editor.isActive('heading', { level: 3 }),\n      bulletList: editor.isActive('bulletList'),\n      orderedList: editor.isActive('orderedList'),\n      codeBlock: editor.isActive('codeBlock'),\n      blockquote: editor.isActive('blockquote')\n    })\n  });\n\n  const embedVideo = () => {\n    const src = videoUrl?.trim();\n    if (src) {\n      editor.chain().focus().setYoutubeVideo({ src }).run();\n    }\n    setVideoUrl(null);\n  };\n\n  return (\n    <div className=\"notes-toolbar nodrag nopan\">\n      <div\n        className=\"notes-toolbar__row\"\n        onMouseDown={(e) => e.preventDefault()}\n      >\n        <VscodeButton\n          secondary={!active.bold}\n          iconOnly\n          title=\"Bold\"\n          onClick={() => editor.chain().focus().toggleBold().run()}\n        >\n          <Bold />\n        </VscodeButton>\n        <VscodeButton\n          secondary={!active.italic}\n          iconOnly\n          title=\"Italic\"\n          onClick={() => editor.chain().focus().toggleItalic().run()}\n        >\n          <Italic />\n        </VscodeButton>\n        <VscodeButton\n          secondary={!active.strike}\n          iconOnly\n          title=\"Strikethrough\"\n          onClick={() => editor.chain().focus().toggleStrike().run()}\n        >\n          <Strikethrough />\n        </VscodeButton>\n        <VscodeButton\n          secondary={!active.code}\n          iconOnly\n          title=\"Code\"\n          onClick={() => editor.chain().focus().toggleCode().run()}\n        >\n          <Code />\n        </VscodeButton>\n        <div className=\"notes-toolbar__separator\" />\n        <VscodeButton\n          secondary={!active.h1}\n          title=\"Heading 1\"\n          onClick={() =>\n            editor.chain().focus().toggleHeading({ level: 1 }).run()\n          }\n        >\n          H1\n        </VscodeButton>\n        <VscodeButton\n          secondary={!active.h2}\n          title=\"Heading 2\"\n          onClick={() =>\n            editor.chain().focus().toggleHeading({ level: 2 }).run()\n          }\n        >\n          H2\n        </VscodeButton>\n        <VscodeButton\n          secondary={!active.h3}\n          title=\"Heading 3\"\n          onClick={() =>\n            editor.chain().focus().toggleHeading({ level: 3 }).run()\n          }\n        >\n          H3\n        </VscodeButton>\n        <div className=\"notes-toolbar__separator\" />\n        <VscodeButton\n          secondary={!active.bulletList}\n          iconOnly\n          title=\"Bullet List\"\n          onClick={() => editor.chain().focus().toggleBulletList().run()}\n        >\n          <List />\n        </VscodeButton>\n        <VscodeButton\n          secondary={!active.orderedList}\n          iconOnly\n          title=\"Numbered List\"\n          onClick={() => editor.chain().focus().toggleOrderedList().run()}\n        >\n          <NumberedListLeft />\n        </VscodeButton>\n        <VscodeButton\n          secondary={!active.codeBlock}\n          iconOnly\n          title=\"Code Block\"\n          onClick={() => editor.chain().focus().toggleCodeBlock().run()}\n        >\n          <Code />\n        </VscodeButton>\n        <VscodeButton\n          secondary={!active.blockquote}\n          iconOnly\n          title=\"Quote\"\n          onClick={() => editor.chain().focus().toggleBlockquote().run()}\n        >\n          <Quote />\n        </VscodeButton>\n        <div className=\"notes-toolbar__separator\" />\n        <VscodeButton\n          secondary={videoUrl === null}\n          iconOnly\n          title=\"Embed YouTube Video\"\n          onClick={() => setVideoUrl(videoUrl === null ? '' : null)}\n        >\n          <Youtube />\n        </VscodeButton>\n      </div>\n\n      {videoUrl !== null && (\n        <div\n          className=\"notes-toolbar__embed\"\n          // Keep keystrokes (e.g. Backspace) from reaching React Flow, which\n          // would delete the selected note while the URL is being typed.\n          onKeyDown={(e) => {\n            e.stopPropagation();\n            if (e.key === 'Enter') embedVideo();\n            if (e.key === 'Escape') setVideoUrl(null);\n          }}\n        >\n          <VscodeTextfield\n            type=\"text\"\n            placeholder=\"YouTube video URL\"\n            value={videoUrl}\n            onInput={(e: any) => setVideoUrl(e.target.value)}\n          />\n          <VscodeButton title=\"Embed\" onClick={embedVideo}>\n            Embed\n          </VscodeButton>\n          <VscodeButton\n            secondary\n            title=\"Cancel\"\n            onClick={() => setVideoUrl(null)}\n          >\n            Cancel\n          </VscodeButton>\n        </div>\n      )}\n    </div>\n  );\n};\n","import { NodeResizer } from 'reactflow';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport { useEditor, EditorContent } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\nimport Youtube from '@tiptap/extension-youtube';\nimport { useChangeNodeData } from '@/hooks/useChangeNodeData';\nimport { Markdown } from 'tiptap-markdown';\nimport type { INoteNode } from '@/types/nodes';\nimport { FormatToolbar } from './FormatToolbar';\nimport type { NodeProps } from 'reactflow';\n\nconst NOTE_MIN_WIDTH = 160;\nconst NOTE_MIN_HEIGHT = 80;\n\n/**\n * The actual note node, pulling in tiptap/prosemirror (~320 KB). It is loaded\n * lazily by `note.tsx` so that weight only lands in the bundle when a note\n * node is actually rendered.\n *\n * The note draws its own frame directly against the React Flow node bounds.\n * It must NOT use BaseNodeWrapper: that adds behave-node chrome (a second\n * bordered box) and breaks the height chain, so the frame sizes to content\n * instead of the node and drifts out of the NodeResizer bounds.\n *\n * Layout: the root div only positions the NodeResizer and floating toolbar (it\n * must not clip, or the toolbar disappears); the frame inside it clips. Only\n * the header drags the node (`dragHandle` set by `addNote`) — the body is\n * `nodrag nopan` so selecting text neither moves the node nor pans the canvas.\n * The editor is always editable: a single click gives a caret; the format\n * toolbar shows while the node is selected.\n *\n * Font size cascades from a React `style` on the root — never write to\n * `editor.view.dom` in an effect; tiptap v3 throws if the view has not mounted.\n */\nexport const NoteNodeImpl = ({\n  data,\n  selected,\n  id\n}: NodeProps<INoteNode['data']>) => {\n  const handleNodeChange = useChangeNodeData(id);\n\n  const editor = useEditor({\n    extensions: [StarterKit, Markdown, Youtube.configure({ nocookie: true })],\n    content: data.text || 'New note',\n    editorProps: {\n      attributes: {\n        class: 'nodrag nopan'\n      }\n    },\n    onUpdate: ({ editor }) => {\n      const markdown = (\n        editor.storage as { markdown?: { getMarkdown(): string } }\n      ).markdown;\n      if (markdown) {\n        handleNodeChange('text', markdown.getMarkdown());\n      }\n    }\n  });\n\n  return (\n    <ErrorBoundary fallback={<div>Error rendering note</div>}>\n      <div\n        className=\"notes-node-root\"\n        style={{ fontSize: data.fontSize || 'medium' }}\n      >\n        <NodeResizer\n          minWidth={NOTE_MIN_WIDTH}\n          minHeight={NOTE_MIN_HEIGHT}\n          color=\"#ff0071\"\n          isVisible={selected || false}\n        />\n        {editor && selected && <FormatToolbar editor={editor} />}\n\n        <div className=\"notes-node\">\n          <div className=\"notes-node__header\">\n            <span className=\"notes-node__grip\" aria-hidden>\n              ⠿\n            </span>\n            <span>Note</span>\n          </div>\n          <EditorContent\n            editor={editor}\n            className=\"notes-node__editor nodrag nopan\"\n          />\n        </div>\n      </div>\n    </ErrorBoundary>\n  );\n};\n"],"mappings":"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"}

package/dist/styles.module-CvmpDkZj.css

@@ -0,0 +1,3 @@
+.hf8PDW_container{background:var(--colors-bgCanvas);width:100%;height:100%;color:var(--colors-fg);flex-direction:column;display:flex;overflow:hidden}.hf8PDW_header{border-bottom:1px solid var(--ds-input-border,var(--colors-borderSubtle));background:var(--colors-bgPanel);padding:1rem}.hf8PDW_titleSection{align-items:flex-start;gap:.75rem;margin-bottom:.75rem;display:flex}.hf8PDW_iconLarge{border:1px solid var(--ds-input-border,var(--colors-borderSubtle));background:var(--colors-bgCanvas);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.hf8PDW_iconLarge svg{width:32px;height:32px}.hf8PDW_title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.3}.hf8PDW_nodeType{opacity:.7;margin-top:.25rem;font-family:monospace;font-size:.75rem}.hf8PDW_tags{flex-wrap:wrap;gap:.5rem;display:flex}.hf8PDW_tag{background:var(--ds-badge-bg,#4d4d4d);color:var(--ds-badge-fg,#fff);border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem}.hf8PDW_content{flex:1;padding:1rem;overflow-y:auto}.hf8PDW_description{background:var(--ds-blockquote-bg,#7f7f7f1a);border-left:4px solid var(--ds-blockquote-border,#007acc);border-radius:.25rem;margin-bottom:1.5rem;padding:.75rem;font-size:1rem;line-height:1.5}.hf8PDW_noContent{text-align:center;opacity:.6;padding:2rem}.hf8PDW_section{margin-top:2rem}.hf8PDW_sectionTitle{border-bottom:1px solid var(--ds-input-border,var(--colors-borderSubtle));margin-bottom:.75rem;padding-bottom:.25rem;font-size:1rem;font-weight:600}.hf8PDW_socketList{flex-direction:column;gap:.5rem;display:flex}.hf8PDW_socketItem{background:var(--colors-bgPanel);border:1px solid var(--ds-input-border,var(--colors-borderSubtle));border-radius:.25rem;align-items:center;gap:.75rem;padding:.5rem;display:flex}.hf8PDW_socketIcon{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.hf8PDW_socketIcon svg{width:16px;height:16px}.hf8PDW_socketName{flex:1;font-weight:500}.hf8PDW_socketType{background:#0003;border-radius:.25rem;padding:.125rem .5rem;font-family:monospace;font-size:.85rem;font-weight:500}.hf8PDW_empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;display:flex}.hf8PDW_emptyIcon{opacity:.3;margin-bottom:1rem;font-size:4rem}.hf8PDW_emptyText{opacity:.8;margin-bottom:.5rem;font-size:1.25rem;font-weight:500}.hf8PDW_emptySub{opacity:.6;font-size:.9rem}
+
+/*# sourceMappingURL=styles.module-CvmpDkZj.css.map*/

package/dist/styles.module-CvmpDkZj.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module-CvmpDkZj.css","names":[],"sources":["../src/plugin/docs/panel/styles.module_built.css"],"sourcesContent":[".hf8PDW_container{background:var(--colors-bgCanvas);width:100%;height:100%;color:var(--colors-fg);flex-direction:column;display:flex;overflow:hidden}.hf8PDW_header{border-bottom:1px solid var(--ds-input-border,var(--colors-borderSubtle));background:var(--colors-bgPanel);padding:1rem}.hf8PDW_titleSection{align-items:flex-start;gap:.75rem;margin-bottom:.75rem;display:flex}.hf8PDW_iconLarge{border:1px solid var(--ds-input-border,var(--colors-borderSubtle));background:var(--colors-bgCanvas);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.hf8PDW_iconLarge svg{width:32px;height:32px}.hf8PDW_title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.3}.hf8PDW_nodeType{opacity:.7;margin-top:.25rem;font-family:monospace;font-size:.75rem}.hf8PDW_tags{flex-wrap:wrap;gap:.5rem;display:flex}.hf8PDW_tag{background:var(--ds-badge-bg,#4d4d4d);color:var(--ds-badge-fg,#fff);border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem}.hf8PDW_content{flex:1;padding:1rem;overflow-y:auto}.hf8PDW_description{background:var(--ds-blockquote-bg,#7f7f7f1a);border-left:4px solid var(--ds-blockquote-border,#007acc);border-radius:.25rem;margin-bottom:1.5rem;padding:.75rem;font-size:1rem;line-height:1.5}.hf8PDW_noContent{text-align:center;opacity:.6;padding:2rem}.hf8PDW_section{margin-top:2rem}.hf8PDW_sectionTitle{border-bottom:1px solid var(--ds-input-border,var(--colors-borderSubtle));margin-bottom:.75rem;padding-bottom:.25rem;font-size:1rem;font-weight:600}.hf8PDW_socketList{flex-direction:column;gap:.5rem;display:flex}.hf8PDW_socketItem{background:var(--colors-bgPanel);border:1px solid var(--ds-input-border,var(--colors-borderSubtle));border-radius:.25rem;align-items:center;gap:.75rem;padding:.5rem;display:flex}.hf8PDW_socketIcon{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.hf8PDW_socketIcon svg{width:16px;height:16px}.hf8PDW_socketName{flex:1;font-weight:500}.hf8PDW_socketType{background:#0003;border-radius:.25rem;padding:.125rem .5rem;font-family:monospace;font-size:.85rem;font-weight:500}.hf8PDW_empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;display:flex}.hf8PDW_emptyIcon{opacity:.3;margin-bottom:1rem;font-size:4rem}.hf8PDW_emptyText{opacity:.8;margin-bottom:.5rem;font-size:1.25rem;font-weight:500}.hf8PDW_emptySub{opacity:.6;font-size:.9rem}"],"mappings":"AAAA"}

package/dist/styles.module-DZxg8aW9.js

@@ -0,0 +1,271 @@
+import React, { createContext, useContext, useEffect } from "react";
+import { useStore } from "zustand";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/system/provider.tsx
+const SystemContext = createContext(void 0);
+/**
+* Provides the editor-level {@link System} to the React tree.
+*/
+function SystemProvider({ children, value }) {
+	return /* @__PURE__ */ jsx(SystemContext, {
+		value,
+		children
+	});
+}
+/** Alias for {@link SystemProvider} expressing its editor-level role. */
+const EditorProvider = SystemProvider;
+/**
+* Access the editor-level {@link System}.
+*/
+function useSystem() {
+	const context = useContext(SystemContext);
+	if (context === void 0) throw new Error("useSystem must be used within a SystemProvider");
+	return context;
+}
+/** Alias for {@link useSystem}. */
+const useEditor = useSystem;
+const GraphContext = createContext(void 0);
+/**
+* Provides a single {@link GraphSession} to the subtree rendered inside a graph
+* tab. Components within use {@link useGraph} to read per-graph state bound to
+* their own tab, regardless of which tab is currently focused.
+*/
+function GraphProvider({ children, value }) {
+	return /* @__PURE__ */ jsx(GraphContext, {
+		value,
+		children
+	});
+}
+/**
+* Access the {@link GraphSession} of the surrounding graph tab.
+*/
+function useGraph() {
+	const context = useContext(GraphContext);
+	if (context === void 0) throw new Error("useGraph must be used within a GraphProvider");
+	return context;
+}
+/**
+* Access the currently focused {@link GraphSession}, or undefined when no graph
+* is open. Subscribes to the editor's active-graph store, so panels rendered
+* outside of a graph tab re-render when the focused graph changes.
+*/
+function useActiveGraph() {
+	return useStore(useSystem().activeGraph, (s) => s.activeGraphId ? s.sessions[s.activeGraphId] : void 0);
+}
+
+//#endregion
+//#region src/components/layoutController/utils.ts
+/**
+* Tab-id convention for graph tabs. The default graph uses the bare id `graph`
+* (session id `graph`); every other graph uses `graph:<sessionId>`. These three
+* helpers are the single source of truth for the convention.
+*/
+const GRAPH_TAB_PREFIX = "graph:";
+const DEFAULT_GRAPH_ID = "graph";
+function isGraphTabId(id) {
+	return !!id && (id === DEFAULT_GRAPH_ID || id.startsWith(GRAPH_TAB_PREFIX));
+}
+function sessionIdFromTabId(tabId) {
+	return tabId === DEFAULT_GRAPH_ID ? DEFAULT_GRAPH_ID : tabId.slice(6);
+}
+function tabIdForSession(sessionId) {
+	return sessionId === DEFAULT_GRAPH_ID ? DEFAULT_GRAPH_ID : `${GRAPH_TAB_PREFIX}${sessionId}`;
+}
+/** Collect the session ids of every graph tab present in a layout. */
+function collectGraphSessionIds(layout) {
+	const ids = /* @__PURE__ */ new Set();
+	const visit = (base) => {
+		if (!base) return;
+		const panel = base;
+		if (panel.tabs) {
+			for (const tab of panel.tabs) if (isGraphTabId(tab.id)) ids.add(sessionIdFromTabId(tab.id));
+		}
+		const box = base;
+		if (box.children) box.children.forEach(visit);
+	};
+	visit(layout.dockbox);
+	visit(layout.floatbox);
+	visit(layout.maxbox);
+	visit(layout.windowbox);
+	return ids;
+}
+function recurseFindGraphPanel(base) {
+	if (base.id === "graphs") return base;
+	if (base.children) for (const child of base.children) {
+		const found = recurseFindGraphPanel(child);
+		if (found) return found;
+	}
+	return null;
+}
+function findGraphPanel(layout) {
+	const dockbox = recurseFindGraphPanel(layout.dockbox);
+	if (dockbox) return dockbox;
+	if (layout.floatbox) {
+		const floatBox = recurseFindGraphPanel(layout.floatbox);
+		if (floatBox) return floatBox;
+	} else if (layout.maxbox) {
+		const tab = recurseFindGraphPanel(layout.maxbox);
+		if (tab) return tab;
+	} else if (layout.windowbox) {
+		const tab = recurseFindGraphPanel(layout.windowbox);
+		if (tab) return tab;
+	}
+	return null;
+}
+function recurseFindTab(base, tabId) {
+	if (base.tabs) {
+		const panel = base;
+		if (panel.tabs?.some((tab) => tab.id === tabId)) return panel;
+	}
+	if (base.children) for (const child of base.children) {
+		const found = recurseFindTab(child, tabId);
+		if (found) return found;
+	}
+	return null;
+}
+function findTabInLayout(layout, tabId) {
+	if (layout.dockbox) {
+		const found = recurseFindTab(layout.dockbox, tabId);
+		if (found) return found;
+	}
+	if (layout.floatbox) {
+		const found = recurseFindTab(layout.floatbox, tabId);
+		if (found) return found;
+	}
+	if (layout.maxbox) {
+		const found = recurseFindTab(layout.maxbox, tabId);
+		if (found) return found;
+	}
+	if (layout.windowbox) {
+		const found = recurseFindTab(layout.windowbox, tabId);
+		if (found) return found;
+	}
+	return null;
+}
+function removeTabFromPanel(panel, tabId) {
+	return {
+		...panel,
+		tabs: panel.tabs?.filter((tab) => tab.id !== tabId)
+	};
+}
+function recursiveRemoveTab(base, tabId) {
+	if (base.tabs) {
+		const panel = base;
+		if (panel.tabs?.some((tab) => tab.id === tabId)) {
+			const updatedPanel = removeTabFromPanel(panel, tabId);
+			if (!updatedPanel.tabs || updatedPanel.tabs.length === 0) return null;
+			return updatedPanel;
+		}
+		return panel;
+	}
+	if (base.children) {
+		const box = base;
+		const updatedChildren = box.children.map((child) => recursiveRemoveTab(child, tabId)).filter((child) => child !== null);
+		if (updatedChildren.length === 0) return null;
+		return {
+			...box,
+			children: updatedChildren
+		};
+	}
+	return base;
+}
+function removeTabFromLayout(layout, tabId) {
+	const newLayout = { ...layout };
+	if (newLayout.dockbox) {
+		const updated = recursiveRemoveTab(newLayout.dockbox, tabId);
+		if (updated) newLayout.dockbox = updated;
+	}
+	if (newLayout.floatbox) {
+		const updated = recursiveRemoveTab(newLayout.floatbox, tabId);
+		if (updated) newLayout.floatbox = updated;
+		else delete newLayout.floatbox;
+	}
+	return newLayout;
+}
+function addFloatingTab(layout, tabData, position) {
+	const newLayout = { ...layout };
+	const newPanel = {
+		x: position.left,
+		y: position.top,
+		w: position.width,
+		h: position.height,
+		tabs: [tabData],
+		group: tabData.group || "popout"
+	};
+	if (!newLayout.floatbox) newLayout.floatbox = {
+		mode: "float",
+		children: [newPanel]
+	};
+	else newLayout.floatbox = {
+		...newLayout.floatbox,
+		children: [...newLayout.floatbox.children || [], newPanel]
+	};
+	return newLayout;
+}
+
+//#endregion
+//#region src/hooks/useOnPressKey.ts
+const useOnPressKey = (key, callback) => {
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.code === key) callback(e);
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [key, callback]);
+};
+
+//#endregion
+//#region src/plugin/docs/panel/styles.module.css?css_module
+const classes = {
+	"emptyText": "hf8PDW_emptyText",
+	"socketType": "hf8PDW_socketType",
+	"header": "hf8PDW_header",
+	"socketItem": "hf8PDW_socketItem",
+	"emptyIcon": "hf8PDW_emptyIcon",
+	"emptySub": "hf8PDW_emptySub",
+	"noContent": "hf8PDW_noContent",
+	"socketIcon": "hf8PDW_socketIcon",
+	"titleSection": "hf8PDW_titleSection",
+	"container": "hf8PDW_container",
+	"sectionTitle": "hf8PDW_sectionTitle",
+	"iconLarge": "hf8PDW_iconLarge",
+	"tags": "hf8PDW_tags",
+	"content": "hf8PDW_content",
+	"section": "hf8PDW_section",
+	"title": "hf8PDW_title",
+	"socketList": "hf8PDW_socketList",
+	"description": "hf8PDW_description",
+	"socketName": "hf8PDW_socketName",
+	"empty": "hf8PDW_empty",
+	"nodeType": "hf8PDW_nodeType",
+	"tag": "hf8PDW_tag"
+};
+var styles_module_default = classes;
+const _emptyText0 = classes["emptyText"];
+const _socketType0 = classes["socketType"];
+const _header0 = classes["header"];
+const _socketItem0 = classes["socketItem"];
+const _emptyIcon0 = classes["emptyIcon"];
+const _emptySub0 = classes["emptySub"];
+const _noContent0 = classes["noContent"];
+const _socketIcon0 = classes["socketIcon"];
+const _titleSection0 = classes["titleSection"];
+const _container0 = classes["container"];
+const _sectionTitle0 = classes["sectionTitle"];
+const _iconLarge0 = classes["iconLarge"];
+const _tags0 = classes["tags"];
+const _content0 = classes["content"];
+const _section0 = classes["section"];
+const _title0 = classes["title"];
+const _socketList0 = classes["socketList"];
+const _description0 = classes["description"];
+const _socketName0 = classes["socketName"];
+const _empty0 = classes["empty"];
+const _nodeType0 = classes["nodeType"];
+const _tag0 = classes["tag"];
+
+//#endregion
+export { useEditor as _, collectGraphSessionIds as a, isGraphTabId as c, tabIdForSession as d, EditorProvider as f, useActiveGraph as g, SystemProvider as h, addFloatingTab as i, removeTabFromLayout as l, SystemContext as m, useOnPressKey as n, findGraphPanel as o, GraphProvider as p, DEFAULT_GRAPH_ID as r, findTabInLayout as s, styles_module_default as t, sessionIdFromTabId as u, useGraph as v, useSystem as y };
+//# sourceMappingURL=styles.module-DZxg8aW9.js.map

package/dist/styles.module-DZxg8aW9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module-DZxg8aW9.js","names":["newPanel: PanelBase"],"sources":["../src/system/provider.tsx","../src/components/layoutController/utils.ts","../src/hooks/useOnPressKey.ts","../src/plugin/docs/panel/styles.module.css?css_module"],"sourcesContent":["import React, { createContext, useContext, type ReactNode } from 'react';\nimport { useStore } from 'zustand';\nimport type { System } from './system';\nimport type { GraphSession } from './graphSession';\n\n// ---------------------------------------------------------------------------\n// Editor system context\n// ---------------------------------------------------------------------------\n\nexport const SystemContext = createContext<System | undefined>(undefined);\n\nexport type SystemProviderProps = {\n  children: ReactNode;\n  value: System;\n};\n\n/**\n * Provides the editor-level {@link System} to the React tree.\n */\nexport function SystemProvider({ children, value }: SystemProviderProps) {\n  return <SystemContext value={value}>{children}</SystemContext>;\n}\n\n/** Alias for {@link SystemProvider} expressing its editor-level role. */\nexport const EditorProvider = SystemProvider;\n\n/**\n * Access the editor-level {@link System}.\n */\nexport function useSystem(): System {\n  const context = useContext(SystemContext);\n\n  if (context === undefined) {\n    throw new Error('useSystem must be used within a SystemProvider');\n  }\n\n  return context;\n}\n\n/** Alias for {@link useSystem}. */\nexport const useEditor = useSystem;\n\n// ---------------------------------------------------------------------------\n// Per-graph session context\n// ---------------------------------------------------------------------------\n\nconst GraphContext = createContext<GraphSession | undefined>(undefined);\n\nexport type GraphProviderProps = {\n  children: ReactNode;\n  value: GraphSession;\n};\n\n/**\n * Provides a single {@link GraphSession} to the subtree rendered inside a graph\n * tab. Components within use {@link useGraph} to read per-graph state bound to\n * their own tab, regardless of which tab is currently focused.\n */\nexport function GraphProvider({ children, value }: GraphProviderProps) {\n  return <GraphContext value={value}>{children}</GraphContext>;\n}\n\n/**\n * Access the {@link GraphSession} of the surrounding graph tab.\n */\nexport function useGraph(): GraphSession {\n  const context = useContext(GraphContext);\n\n  if (context === undefined) {\n    throw new Error('useGraph must be used within a GraphProvider');\n  }\n\n  return context;\n}\n\n/**\n * Access the currently focused {@link GraphSession}, or undefined when no graph\n * is open. Subscribes to the editor's active-graph store, so panels rendered\n * outside of a graph tab re-render when the focused graph changes.\n */\nexport function useActiveGraph(): GraphSession | undefined {\n  const editor = useSystem();\n  return useStore(editor.activeGraph, (s) =>\n    s.activeGraphId ? s.sessions[s.activeGraphId] : undefined\n  );\n}\n","import type { BoxBase, LayoutBase, PanelBase, TabData } from 'rc-dock';\n\n/**\n * Tab-id convention for graph tabs. The default graph uses the bare id `graph`\n * (session id `graph`); every other graph uses `graph:<sessionId>`. These three\n * helpers are the single source of truth for the convention.\n */\nconst GRAPH_TAB_PREFIX = 'graph:';\nexport const DEFAULT_GRAPH_ID = 'graph';\n\nexport function isGraphTabId(id: string | undefined): id is string {\n  return !!id && (id === DEFAULT_GRAPH_ID || id.startsWith(GRAPH_TAB_PREFIX));\n}\n\nexport function sessionIdFromTabId(tabId: string): string {\n  return tabId === DEFAULT_GRAPH_ID\n    ? DEFAULT_GRAPH_ID\n    : tabId.slice(GRAPH_TAB_PREFIX.length);\n}\n\nexport function tabIdForSession(sessionId: string): string {\n  return sessionId === DEFAULT_GRAPH_ID\n    ? DEFAULT_GRAPH_ID\n    : `${GRAPH_TAB_PREFIX}${sessionId}`;\n}\n\n/** Collect the session ids of every graph tab present in a layout. */\nexport function collectGraphSessionIds(layout: LayoutBase): Set<string> {\n  const ids = new Set<string>();\n  const visit = (base?: BoxBase | PanelBase) => {\n    if (!base) return;\n    const panel = base as PanelBase;\n    if (panel.tabs) {\n      for (const tab of panel.tabs) {\n        if (isGraphTabId(tab.id)) ids.add(sessionIdFromTabId(tab.id!));\n      }\n    }\n    const box = base as BoxBase;\n    if (box.children) box.children.forEach(visit);\n  };\n  visit(layout.dockbox);\n  visit(layout.floatbox);\n  visit(layout.maxbox);\n  visit(layout.windowbox);\n  return ids;\n}\n\nfunction recurseFindGraphPanel(base: BoxBase | PanelBase): PanelBase | null {\n  if (base.id === 'graphs') {\n    return base as PanelBase;\n  }\n  //Check if it has children\n  if ((base as BoxBase).children) {\n    for (const child of (base as BoxBase).children) {\n      const found = recurseFindGraphPanel(child);\n      if (found) {\n        return found;\n      }\n    }\n  }\n  return null;\n}\n\nexport function findGraphPanel(layout: LayoutBase): PanelBase | null {\n  //We need to recursively search for the graph panel\n  // It is most likely in the dockbox\n  const dockbox = recurseFindGraphPanel(layout.dockbox);\n  if (dockbox) {\n    return dockbox;\n  }\n  if (layout.floatbox) {\n    const floatBox = recurseFindGraphPanel(layout.floatbox);\n    if (floatBox) {\n      return floatBox;\n    }\n  } else if (layout.maxbox) {\n    const tab = recurseFindGraphPanel(layout.maxbox);\n    if (tab) {\n      return tab;\n    }\n  } else if (layout.windowbox) {\n    const tab = recurseFindGraphPanel(layout.windowbox);\n    if (tab) {\n      return tab;\n    }\n  }\n  return null;\n}\n\nfunction recurseFindTab(\n  base: BoxBase | PanelBase,\n  tabId: string\n): PanelBase | null {\n  // Check if this is a panel with tabs\n  if ((base as PanelBase).tabs) {\n    const panel = base as PanelBase;\n    const hasTab = panel.tabs?.some((tab) => tab.id === tabId);\n    if (hasTab) {\n      return panel;\n    }\n  }\n\n  // Check if it has children\n  if ((base as BoxBase).children) {\n    for (const child of (base as BoxBase).children) {\n      const found = recurseFindTab(child, tabId);\n      if (found) {\n        return found;\n      }\n    }\n  }\n  return null;\n}\n\nexport function findTabInLayout(\n  layout: LayoutBase,\n  tabId: string\n): PanelBase | null {\n  // Search in dockbox\n  if (layout.dockbox) {\n    const found = recurseFindTab(layout.dockbox, tabId);\n    if (found) return found;\n  }\n\n  // Search in floatbox\n  if (layout.floatbox) {\n    const found = recurseFindTab(layout.floatbox, tabId);\n    if (found) return found;\n  }\n\n  // Search in maxbox\n  if (layout.maxbox) {\n    const found = recurseFindTab(layout.maxbox, tabId);\n    if (found) return found;\n  }\n\n  // Search in windowbox\n  if (layout.windowbox) {\n    const found = recurseFindTab(layout.windowbox, tabId);\n    if (found) return found;\n  }\n\n  return null;\n}\n\nfunction removeTabFromPanel(panel: PanelBase, tabId: string): PanelBase {\n  return {\n    ...panel,\n    tabs: panel.tabs?.filter((tab) => tab.id !== tabId)\n  };\n}\n\nfunction recursiveRemoveTab(\n  base: BoxBase | PanelBase,\n  tabId: string\n): BoxBase | PanelBase | null {\n  // If this is a panel with tabs, remove the tab\n  if ((base as PanelBase).tabs) {\n    const panel = base as PanelBase;\n    const hasTab = panel.tabs?.some((tab) => tab.id === tabId);\n    if (hasTab) {\n      const updatedPanel = removeTabFromPanel(panel, tabId);\n      // If panel has no more tabs, return null to remove it\n      if (!updatedPanel.tabs || updatedPanel.tabs.length === 0) {\n        return null;\n      }\n      return updatedPanel;\n    }\n    return panel;\n  }\n\n  // If it has children, recursively update them\n  if ((base as BoxBase).children) {\n    const box = base as BoxBase;\n    const updatedChildren = box.children\n      .map((child) => recursiveRemoveTab(child, tabId))\n      .filter((child) => child !== null) as (BoxBase | PanelBase)[];\n\n    // If no children left, return null\n    if (updatedChildren.length === 0) {\n      return null;\n    }\n\n    return {\n      ...box,\n      children: updatedChildren\n    };\n  }\n\n  return base;\n}\n\nexport function removeTabFromLayout(\n  layout: LayoutBase,\n  tabId: string\n): LayoutBase {\n  const newLayout = { ...layout };\n\n  if (newLayout.dockbox) {\n    const updated = recursiveRemoveTab(newLayout.dockbox, tabId);\n    if (updated) {\n      newLayout.dockbox = updated as BoxBase;\n    }\n  }\n\n  if (newLayout.floatbox) {\n    const updated = recursiveRemoveTab(newLayout.floatbox, tabId);\n    if (updated) {\n      newLayout.floatbox = updated as BoxBase;\n    } else {\n      delete newLayout.floatbox;\n    }\n  }\n\n  return newLayout;\n}\n\nexport function addFloatingTab(\n  layout: LayoutBase,\n  tabData: Partial<TabData>,\n  position: { left: number; top: number; width: number; height: number }\n): LayoutBase {\n  const newLayout = { ...layout };\n\n  // Create or update floatbox\n  const newPanel: PanelBase = {\n    x: position.left,\n    y: position.top,\n    w: position.width,\n    h: position.height,\n    tabs: [tabData],\n    group: tabData.group || 'popout'\n  };\n\n  if (!newLayout.floatbox) {\n    newLayout.floatbox = {\n      mode: 'float',\n      children: [newPanel]\n    };\n  } else {\n    newLayout.floatbox = {\n      ...newLayout.floatbox,\n      children: [...(newLayout.floatbox.children || []), newPanel]\n    };\n  }\n\n  return newLayout;\n}\n","import { useEffect } from 'react';\n\nexport const useOnPressKey = (\n  key: string,\n  callback: (e: KeyboardEvent) => void\n) => {\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.code === key) {\n        callback(e);\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [key, callback]);\n};\n","import \"/home/runner/work/behave-graph/behave-graph/packages/flow/src/plugin/docs/panel/styles.module_built.css\";\nconst classes = {\"emptyText\":\"hf8PDW_emptyText\",\"socketType\":\"hf8PDW_socketType\",\"header\":\"hf8PDW_header\",\"socketItem\":\"hf8PDW_socketItem\",\"emptyIcon\":\"hf8PDW_emptyIcon\",\"emptySub\":\"hf8PDW_emptySub\",\"noContent\":\"hf8PDW_noContent\",\"socketIcon\":\"hf8PDW_socketIcon\",\"titleSection\":\"hf8PDW_titleSection\",\"container\":\"hf8PDW_container\",\"sectionTitle\":\"hf8PDW_sectionTitle\",\"iconLarge\":\"hf8PDW_iconLarge\",\"tags\":\"hf8PDW_tags\",\"content\":\"hf8PDW_content\",\"section\":\"hf8PDW_section\",\"title\":\"hf8PDW_title\",\"socketList\":\"hf8PDW_socketList\",\"description\":\"hf8PDW_description\",\"socketName\":\"hf8PDW_socketName\",\"empty\":\"hf8PDW_empty\",\"nodeType\":\"hf8PDW_nodeType\",\"tag\":\"hf8PDW_tag\"}\nexport default classes\n\nconst _emptyText0 = classes[\"emptyText\"]\nexport { _emptyText0 as \"emptyText\" }\n\nconst _socketType0 = classes[\"socketType\"]\nexport { _socketType0 as \"socketType\" }\n\nconst _header0 = classes[\"header\"]\nexport { _header0 as \"header\" }\n\nconst _socketItem0 = classes[\"socketItem\"]\nexport { _socketItem0 as \"socketItem\" }\n\nconst _emptyIcon0 = classes[\"emptyIcon\"]\nexport { _emptyIcon0 as \"emptyIcon\" }\n\nconst _emptySub0 = classes[\"emptySub\"]\nexport { _emptySub0 as \"emptySub\" }\n\nconst _noContent0 = classes[\"noContent\"]\nexport { _noContent0 as \"noContent\" }\n\nconst _socketIcon0 = classes[\"socketIcon\"]\nexport { _socketIcon0 as \"socketIcon\" }\n\nconst _titleSection0 = classes[\"titleSection\"]\nexport { _titleSection0 as \"titleSection\" }\n\nconst _container0 = classes[\"container\"]\nexport { _container0 as \"container\" }\n\nconst _sectionTitle0 = classes[\"sectionTitle\"]\nexport { _sectionTitle0 as \"sectionTitle\" }\n\nconst _iconLarge0 = classes[\"iconLarge\"]\nexport { _iconLarge0 as \"iconLarge\" }\n\nconst _tags0 = classes[\"tags\"]\nexport { _tags0 as \"tags\" }\n\nconst _content0 = classes[\"content\"]\nexport { _content0 as \"content\" }\n\nconst _section0 = classes[\"section\"]\nexport { _section0 as \"section\" }\n\nconst _title0 = classes[\"title\"]\nexport { _title0 as \"title\" }\n\nconst _socketList0 = classes[\"socketList\"]\nexport { _socketList0 as \"socketList\" }\n\nconst _description0 = classes[\"description\"]\nexport { _description0 as \"description\" }\n\nconst _socketName0 = classes[\"socketName\"]\nexport { _socketName0 as \"socketName\" }\n\nconst _empty0 = classes[\"empty\"]\nexport { _empty0 as \"empty\" }\n\nconst _nodeType0 = classes[\"nodeType\"]\nexport { _nodeType0 as \"nodeType\" }\n\nconst _tag0 = classes[\"tag\"]\nexport { _tag0 as \"tag\" }\n"],"mappings":"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"}

package/dist/useChangeNodeData-ChQGK7AI.js

@@ -0,0 +1,23 @@
+import { useCallback } from "react";
+import { useReactFlow } from "reactflow";
+
+//#region src/hooks/useChangeNodeData.ts
+const useChangeNodeData = (id) => {
+	const instance = useReactFlow();
+	return useCallback((key, value) => {
+		instance.setNodes((nodes) => nodes.map((n) => {
+			if (n.id !== id) return n;
+			return {
+				...n,
+				data: {
+					...n.data,
+					[key]: value
+				}
+			};
+		}));
+	}, [instance, id]);
+};
+
+//#endregion
+export { useChangeNodeData as t };
+//# sourceMappingURL=useChangeNodeData-ChQGK7AI.js.map

package/dist/useChangeNodeData-ChQGK7AI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChangeNodeData-ChQGK7AI.js","names":[],"sources":["../src/hooks/useChangeNodeData.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useReactFlow } from 'reactflow';\n\nexport const useChangeNodeData = (id: string) => {\n  const instance = useReactFlow();\n\n  return useCallback(\n    (key: string, value: any) => {\n      instance.setNodes((nodes) =>\n        nodes.map((n) => {\n          if (n.id !== id) return n;\n          return {\n            ...n,\n            data: {\n              ...n.data,\n              [key]: value\n            }\n          };\n        })\n      );\n    },\n    [instance, id]\n  );\n};\n"],"mappings":";;;;AAGA,MAAa,qBAAqB,OAAe;CAC/C,MAAM,WAAW,cAAc;AAE/B,QAAO,aACJ,KAAa,UAAe;AAC3B,WAAS,UAAU,UACjB,MAAM,KAAK,MAAM;AACf,OAAI,EAAE,OAAO,GAAI,QAAO;AACxB,UAAO;IACL,GAAG;IACH,MAAM;KACJ,GAAG,EAAE;MACJ,MAAM;KACR;IACF;IACD,CACH;IAEH,CAAC,UAAU,GAAG,CACf"}