@signalsafe/tree-spec-editor 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -45,10 +45,10 @@ export default function NodesPanel({ tree, nodeSearch, selection, focusNodeId =
|
|
|
45
45
|
return hitPrompt || hitId || hitType || hitChoices;
|
|
46
46
|
})
|
|
47
47
|
.sort(compareNodesByTypeThenId);
|
|
48
|
-
return (_jsxs("div", { className: joinClasses(EDITOR_CARD, EDITOR_SPACING_MT_3), children: [_jsxs("div", { className: joinClasses(EDITOR_CARD_HEADER, EDITOR_FLEX_BETWEEN), children: [_jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_MIN_W_0), children: [_jsx("span", { className: "graph-editor-text--semibold", children: "Nodes" }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })] }), onAddNode ? (_jsx(EditorIconButton, { className: joinClasses(EDITOR_FLEX_SHRINK_0, 'graph-editor-btn--primary'), "aria-label": "Add node", title: "Add node", onClick: onAddNode, children: "+" })) : null] }), _jsxs("div", { className:
|
|
48
|
+
return (_jsxs("div", { className: joinClasses(EDITOR_CARD, EDITOR_SPACING_MT_3), children: [_jsxs("div", { className: joinClasses(EDITOR_CARD_HEADER, EDITOR_FLEX_BETWEEN), children: [_jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_MIN_W_0), children: [_jsx("span", { className: "graph-editor-text--semibold", children: "Nodes" }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })] }), onAddNode ? (_jsx(EditorIconButton, { className: joinClasses(EDITOR_FLEX_SHRINK_0, 'graph-editor-btn--primary'), "aria-label": "Add node", title: "Add node", onClick: onAddNode, children: "+" })) : null] }), _jsxs("div", { className: expanded ? undefined : EDITOR_HIDDEN, "aria-hidden": expanded ? undefined : true, children: [_jsx(EditorInput, { className: "graph-editor-input--list-search", placeholder: searchPlaceholder, value: nodeSearch, onChange: (e) => onNodeSearchChange(e.target.value) }), _jsx("div", { className: joinClasses(EDITOR_SCROLL, 'overflow-auto-max-h-320'), children: filteredNodes.length === 0 ? (_jsx("div", { className: EDITOR_LIST, children: _jsx("div", { className: joinClasses(EDITOR_LIST_ITEM, EDITOR_MUTED, 'graph-editor-text--sm'), children: "No matching nodes." }) })) : (_jsx("div", { className: EDITOR_LIST, children: filteredNodes.map((n) => {
|
|
49
49
|
const isSelected = isNodeRowSelected(n.id, selection, focusNodeId);
|
|
50
50
|
const typeLabel = n.type || 'unknown';
|
|
51
|
-
return (_jsx("div", { className: joinClasses(EDITOR_LIST_ITEM, isSelected && LIST_SELECTION_CLASS, isSelected && LIST_SELECTION_TEXT_CLASS), "aria-current": isSelected ? 'true' : undefined, children: _jsxs("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_MIN_W_0), children: [_jsxs("button", { type: "button", className: joinClasses('graph-editor-list__item-action', EDITOR_FLEX_GROW_1, EDITOR_TEXT_START, EDITOR_MIN_W_0), onClick: () => onNodeSelect(n.id), children: [_jsx("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_SPACING_MB_1, EDITOR_MIN_W_0), children: _jsxs("div", { className: joinClasses(EDITOR_MIN_W_0, EDITOR_FLEX_GROW_1, EDITOR_TEXT_BREAK, EDITOR_TEXT_START), title: `${n.id}, ${typeLabel}`, children: [_jsx("span", { className: joinClasses('graph-editor-text--uppercase', 'graph-editor-text--semibold', !isSelected && EDITOR_MUTED), children: n.id }), _jsx("span", { className: joinClasses('graph-editor-text--uppercase', !isSelected && EDITOR_MUTED), children: `, ${typeLabel}` })] }) }), _jsx("p", { className: joinClasses('graph-editor-text--sm', EDITOR_TEXT_BREAK, EDITOR_SPACING_MB_1, !isSelected && EDITOR_MUTED), children: n.prompt || '(empty)' }), _jsx("small", { className:
|
|
51
|
+
return (_jsx("div", { className: joinClasses(EDITOR_LIST_ITEM, isSelected && LIST_SELECTION_CLASS, isSelected && LIST_SELECTION_TEXT_CLASS), "aria-current": isSelected ? 'true' : undefined, children: _jsxs("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_MIN_W_0), children: [_jsxs("button", { type: "button", className: joinClasses('graph-editor-list__item-action', EDITOR_FLEX_GROW_1, EDITOR_TEXT_START, EDITOR_MIN_W_0), onClick: () => onNodeSelect(n.id), children: [_jsx("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_SPACING_MB_1, EDITOR_MIN_W_0), children: _jsxs("div", { className: joinClasses(EDITOR_MIN_W_0, EDITOR_FLEX_GROW_1, EDITOR_TEXT_BREAK, EDITOR_TEXT_START), title: `${n.id}, ${typeLabel}`, children: [_jsx("span", { className: joinClasses('graph-editor-text--uppercase', 'graph-editor-text--semibold', !isSelected && EDITOR_MUTED), children: n.id }), _jsx("span", { className: joinClasses('graph-editor-text--uppercase', !isSelected && EDITOR_MUTED), children: `, ${typeLabel}` })] }) }), _jsx("p", { className: joinClasses('graph-editor-text--sm', EDITOR_TEXT_BREAK, EDITOR_SPACING_MB_1, !isSelected && EDITOR_MUTED), children: n.prompt || '(empty)' }), _jsx("small", { className: isSelected ? undefined : EDITOR_MUTED, children: choiceLine(n) })] }), onDeleteNode ? (_jsx(EditorIconButton, { className: joinClasses(EDITOR_FLEX_SHRINK_0, isPublished
|
|
52
52
|
? 'graph-editor-btn--disabled'
|
|
53
53
|
: 'graph-editor-btn--danger'), "aria-label": `Delete node ${n.id}`, title: "Delete node", disabled: isPublished, onClick: () => onDeleteNode(n.id), children: "\uD83D\uDDD1" })) : null] }) }, n.id));
|
|
54
54
|
}) })) }), _jsx("div", { className: joinClasses(EDITOR_CARD_FOOTER, 'graph-editor-card__footer--border-top'), children: _jsxs("div", { className: EDITOR_FLEX_BETWEEN, children: [_jsx("div", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_TEXT_BREAK, EDITOR_MIN_W_0, EDITOR_FLEX_GROW_1, EDITOR_SPACING_ME_2), children: tipText }), _jsx(EditorSwitch, { id: "showMiniMapToggle", label: "Mini-map", checked: showMiniMap, onChange: (e) => onShowMiniMapChange(e.target.checked), className: "graph-editor-text--sm" })] }) })] })] }));
|
|
@@ -22,7 +22,7 @@ function renderItem(item) {
|
|
|
22
22
|
return (_jsxs("details", { className: joinClasses(EDITOR_DROPDOWN, item.className), children: [_jsx("summary", { className: joinClasses(editorBtnToneClass(item.variant), item.disabled && 'graph-editor-btn--disabled'), children: item.label }), _jsx("div", { className: EDITOR_DROPDOWN_MENU, role: "menu", children: item.entries.map((entry, idx) => {
|
|
23
23
|
const entryKey = entry.id ?? `entry-${idx}`;
|
|
24
24
|
if (entry.divider) {
|
|
25
|
-
return _jsx("
|
|
25
|
+
return _jsx("hr", { className: EDITOR_DROPDOWN_DIVIDER }, entryKey);
|
|
26
26
|
}
|
|
27
27
|
return (_jsx("button", { type: "button", role: "menuitem", className: EDITOR_DROPDOWN_ITEM, onClick: entry.disabled || !entry.onClick
|
|
28
28
|
? undefined
|
package/dist/ui/primitives.d.ts
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import type { ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
2
|
-
export declare function EditorButton({ tone, className, children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
2
|
+
export declare function EditorButton({ tone, className, children, ...rest }: Readonly<ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
3
3
|
tone?: string;
|
|
4
|
-
}): import("react").JSX.Element;
|
|
5
|
-
export declare function EditorIconButton({ className, children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement
|
|
6
|
-
export declare function EditorCloseButton({ className, label, ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
4
|
+
}>): import("react").JSX.Element;
|
|
5
|
+
export declare function EditorIconButton({ className, children, ...rest }: Readonly<ButtonHTMLAttributes<HTMLButtonElement>>): import("react").JSX.Element;
|
|
6
|
+
export declare function EditorCloseButton({ className, label, ...rest }: Readonly<ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
7
7
|
label?: string;
|
|
8
|
-
}): import("react").JSX.Element;
|
|
9
|
-
export declare function EditorInput({ className, ...rest }: InputHTMLAttributes<HTMLInputElement
|
|
10
|
-
export declare function EditorSelect({ className, children, ...rest }: SelectHTMLAttributes<HTMLSelectElement
|
|
11
|
-
export declare function EditorTextarea({ className, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement
|
|
12
|
-
export declare function EditorField({ className, children, }: {
|
|
8
|
+
}>): import("react").JSX.Element;
|
|
9
|
+
export declare function EditorInput({ className, ...rest }: Readonly<InputHTMLAttributes<HTMLInputElement>>): import("react").JSX.Element;
|
|
10
|
+
export declare function EditorSelect({ className, children, ...rest }: Readonly<SelectHTMLAttributes<HTMLSelectElement>>): import("react").JSX.Element;
|
|
11
|
+
export declare function EditorTextarea({ className, ...rest }: Readonly<TextareaHTMLAttributes<HTMLTextAreaElement>>): import("react").JSX.Element;
|
|
12
|
+
export declare function EditorField({ className, children, }: Readonly<{
|
|
13
13
|
className?: string;
|
|
14
14
|
children: ReactNode;
|
|
15
|
-
}): import("react").JSX.Element;
|
|
16
|
-
export declare function EditorLabel({ className, children, ...rest }: LabelHTMLAttributes<HTMLLabelElement
|
|
17
|
-
export declare function EditorCheckbox({ className, label, ...rest }: InputHTMLAttributes<HTMLInputElement> & {
|
|
15
|
+
}>): import("react").JSX.Element;
|
|
16
|
+
export declare function EditorLabel({ className, children, ...rest }: Readonly<LabelHTMLAttributes<HTMLLabelElement>>): import("react").JSX.Element;
|
|
17
|
+
export declare function EditorCheckbox({ className, label, ...rest }: Readonly<InputHTMLAttributes<HTMLInputElement> & {
|
|
18
18
|
label?: ReactNode;
|
|
19
|
-
}): import("react").JSX.Element;
|
|
20
|
-
export declare function EditorSwitch({ className, label, ...rest }: InputHTMLAttributes<HTMLInputElement> & {
|
|
19
|
+
}>): import("react").JSX.Element;
|
|
20
|
+
export declare function EditorSwitch({ className, label, ...rest }: Readonly<InputHTMLAttributes<HTMLInputElement> & {
|
|
21
21
|
label?: ReactNode;
|
|
22
|
-
}): import("react").JSX.Element;
|
|
22
|
+
}>): import("react").JSX.Element;
|
|
23
23
|
//# sourceMappingURL=primitives.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/ui/primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/ui/primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,SAAS,EACT,oBAAoB,EACpB,sBAAsB,EACzB,MAAM,OAAO,CAAC;AAcf,wBAAgB,YAAY,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,QAAQ,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,+BAMvE;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,QAAQ,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,+BAMnD;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,SAAS,EACT,KAAe,EACf,GAAG,IAAI,EACV,EAAE,QAAQ,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,+BAWxE;AAED,wBAAgB,WAAW,CAAC,EACxB,SAAS,EACT,GAAG,IAAI,EACV,EAAE,QAAQ,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,+BAEjD;AAED,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,QAAQ,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,+BAMnD;AAED,wBAAgB,cAAc,CAAC,EAC3B,SAAS,EACT,GAAG,IAAI,EACV,EAAE,QAAQ,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC,+BAEvD;AAED,wBAAgB,WAAW,CAAC,EACxB,SAAS,EACT,QAAQ,GACX,EAAE,QAAQ,CAAC;IACR,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC,+BAED;AAED,wBAAgB,WAAW,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,QAAQ,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,+BAMjD;AAED,wBAAgB,cAAc,CAAC,EAC3B,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,QAAQ,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,+BAOzE;AAED,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,QAAQ,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,+BAOzE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@signalsafe/tree-spec-editor",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "UI-kit agnostic TreeSpec graph editor shell (React Flow canvas, panels, modals, toolbar).",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"dependencies": {
|
|
68
68
|
"@signalsafe/tree-spec": "^0.3.3",
|
|
69
69
|
"@signalsafe/tree-spec-editor-core": "^0.1.4",
|
|
70
|
-
"@signalsafe/tree-spec-editor-react": "^0.2.
|
|
70
|
+
"@signalsafe/tree-spec-editor-react": "^0.2.1"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
73
|
"react": "^18.0.0",
|