@signalsafe/tree-spec-editor-react 0.1.1 → 0.1.2
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.
- package/LICENSE +21 -0
- package/README.md +28 -7
- package/dist/GraphEditorCanvasContext.d.ts +26 -0
- package/dist/GraphEditorCanvasContext.d.ts.map +1 -0
- package/dist/GraphEditorCanvasContext.js +20 -0
- package/dist/TreeSpecGraphEditor.d.ts +22 -1
- package/dist/TreeSpecGraphEditor.d.ts.map +1 -1
- package/dist/TreeSpecGraphEditor.js +133 -260
- package/dist/canvas/constants.d.ts +41 -0
- package/dist/canvas/constants.d.ts.map +1 -0
- package/dist/canvas/constants.js +40 -0
- package/dist/canvas/edgeBuilders.d.ts +6 -0
- package/dist/canvas/edgeBuilders.d.ts.map +1 -0
- package/dist/canvas/edgeBuilders.js +57 -0
- package/dist/canvas/edgeStyle.d.ts +16 -0
- package/dist/canvas/edgeStyle.d.ts.map +1 -0
- package/dist/canvas/edgeStyle.js +44 -0
- package/dist/canvas/focusChoice.d.ts +3 -0
- package/dist/canvas/focusChoice.d.ts.map +1 -0
- package/dist/canvas/focusChoice.js +12 -0
- package/dist/canvas/typeGuards.d.ts +3 -0
- package/dist/canvas/typeGuards.d.ts.map +1 -0
- package/dist/canvas/typeGuards.js +16 -0
- package/dist/contextMenu/GraphCanvasContextMenu.d.ts +10 -0
- package/dist/contextMenu/GraphCanvasContextMenu.d.ts.map +1 -0
- package/dist/contextMenu/GraphCanvasContextMenu.js +39 -0
- package/dist/contextMenu/types.d.ts +11 -0
- package/dist/contextMenu/types.d.ts.map +1 -0
- package/dist/contextMenu/types.js +1 -0
- package/dist/hooks/keyboardShortcutDispatch.d.ts +30 -0
- package/dist/hooks/keyboardShortcutDispatch.d.ts.map +1 -0
- package/dist/hooks/keyboardShortcutDispatch.js +88 -0
- package/dist/hooks/types.d.ts +32 -2
- package/dist/hooks/types.d.ts.map +1 -1
- package/dist/hooks/useCanvasContextMenu.d.ts +15 -0
- package/dist/hooks/useCanvasContextMenu.d.ts.map +1 -0
- package/dist/hooks/useCanvasContextMenu.js +50 -0
- package/dist/hooks/useCanvasGraphState.d.ts +29 -0
- package/dist/hooks/useCanvasGraphState.d.ts.map +1 -0
- package/dist/hooks/useCanvasGraphState.js +150 -0
- package/dist/hooks/useCanvasIssueIndex.d.ts +12 -0
- package/dist/hooks/useCanvasIssueIndex.d.ts.map +1 -0
- package/dist/hooks/useCanvasIssueIndex.js +32 -0
- package/dist/hooks/useCanvasNodeResize.d.ts +17 -0
- package/dist/hooks/useCanvasNodeResize.d.ts.map +1 -0
- package/dist/hooks/useCanvasNodeResize.js +53 -0
- package/dist/hooks/useCanvasViewport.d.ts +12 -0
- package/dist/hooks/useCanvasViewport.d.ts.map +1 -0
- package/dist/hooks/useCanvasViewport.js +84 -0
- package/dist/hooks/useChoiceDragDrop.d.ts +25 -0
- package/dist/hooks/useChoiceDragDrop.d.ts.map +1 -0
- package/dist/hooks/useChoiceDragDrop.js +40 -0
- package/dist/hooks/useEditorAdapter.d.ts +46 -0
- package/dist/hooks/useEditorAdapter.d.ts.map +1 -0
- package/dist/hooks/useEditorAdapter.js +281 -0
- package/dist/hooks/useEditorAutosave.d.ts +18 -0
- package/dist/hooks/useEditorAutosave.d.ts.map +1 -0
- package/dist/hooks/useEditorAutosave.js +37 -0
- package/dist/hooks/useEditorHistory.d.ts +16 -0
- package/dist/hooks/useEditorHistory.d.ts.map +1 -0
- package/dist/hooks/useEditorHistory.js +103 -0
- package/dist/hooks/useEditorSelection.d.ts +22 -0
- package/dist/hooks/useEditorSelection.d.ts.map +1 -0
- package/dist/hooks/useEditorSelection.js +76 -0
- package/dist/hooks/useGraphConnect.d.ts +22 -0
- package/dist/hooks/useGraphConnect.d.ts.map +1 -0
- package/dist/hooks/useGraphConnect.js +75 -0
- package/dist/hooks/useTreeSpecEditor.d.ts +0 -8
- package/dist/hooks/useTreeSpecEditor.d.ts.map +1 -1
- package/dist/hooks/useTreeSpecEditor.js +231 -462
- package/dist/nodes/ChoiceCanvasRow.d.ts +10 -0
- package/dist/nodes/ChoiceCanvasRow.d.ts.map +1 -0
- package/dist/nodes/ChoiceCanvasRow.js +55 -0
- package/dist/nodes/EndNode.d.ts +3 -0
- package/dist/nodes/EndNode.d.ts.map +1 -0
- package/dist/nodes/EndNode.js +7 -0
- package/dist/nodes/PromptNode.d.ts +6 -0
- package/dist/nodes/PromptNode.d.ts.map +1 -0
- package/dist/nodes/PromptNode.js +51 -0
- package/dist/nodes/PromptNodeChoicesList.d.ts +14 -0
- package/dist/nodes/PromptNodeChoicesList.d.ts.map +1 -0
- package/dist/nodes/PromptNodeChoicesList.js +24 -0
- package/dist/nodes/PromptNodeHeader.d.ts +10 -0
- package/dist/nodes/PromptNodeHeader.d.ts.map +1 -0
- package/dist/nodes/PromptNodeHeader.js +6 -0
- package/dist/nodes/PromptNodeIssueBadges.d.ts +7 -0
- package/dist/nodes/PromptNodeIssueBadges.d.ts.map +1 -0
- package/dist/nodes/PromptNodeIssueBadges.js +6 -0
- package/dist/nodes/PromptNodeToolbar.d.ts +6 -0
- package/dist/nodes/PromptNodeToolbar.d.ts.map +1 -0
- package/dist/nodes/PromptNodeToolbar.js +5 -0
- package/dist/nodes/types.d.ts +13 -0
- package/dist/nodes/types.d.ts.map +1 -0
- package/dist/nodes/types.js +1 -0
- package/dist/utils/joinClasses.d.ts +2 -0
- package/dist/utils/joinClasses.d.ts.map +1 -0
- package/dist/utils/joinClasses.js +3 -0
- package/package.json +30 -12
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type EditorChoice } from '@signalsafe/tree-spec-editor-core';
|
|
2
|
+
export declare function ChoiceCanvasRow({ nodeId, choice, choiceIndex, focusChoiceId, choiceTextClass, readOnly, }: Readonly<{
|
|
3
|
+
nodeId: string;
|
|
4
|
+
choice: EditorChoice;
|
|
5
|
+
choiceIndex: number;
|
|
6
|
+
focusChoiceId: string | null;
|
|
7
|
+
choiceTextClass: string;
|
|
8
|
+
readOnly: boolean;
|
|
9
|
+
}>): import("react").JSX.Element;
|
|
10
|
+
//# sourceMappingURL=ChoiceCanvasRow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChoiceCanvasRow.d.ts","sourceRoot":"","sources":["../../src/nodes/ChoiceCanvasRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAkBtE,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,QAAQ,GACX,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,YAAY,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC,+BAqHD"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Handle, Position } from 'reactflow';
|
|
3
|
+
import { CANVAS_NODE_SELECTED_CLASS, CANVAS_NODE_SELECTED_TEXT_CLASS, CANVAS_CHOICE_SELECTED_CLASS, CHOICE_DRAG_HANDLE_CLASS, CHOICE_DRAG_HANDLE_SELECTOR, CHOICE_DROP_TARGET_CLASS, CHOICE_HANDLE_CLASS, CHOICE_ROW_CLASS, CHOICE_ROW_SELECT_CLASS, CHOICE_ROW_SELECTABLE_CLASS, CHOICE_HANDLE_PREFIX, } from '../canvas/constants';
|
|
4
|
+
import { useGraphEditorCanvas } from '../GraphEditorCanvasContext';
|
|
5
|
+
import { joinClasses } from '../utils/joinClasses';
|
|
6
|
+
export function ChoiceCanvasRow({ nodeId, choice, choiceIndex, focusChoiceId, choiceTextClass, readOnly, }) {
|
|
7
|
+
const { choiceDrag, choiceDropTarget, onSelectChoice, onChoiceDragStart, onChoiceDragEnd, onChoiceDragOver, onChoiceDrop, } = useGraphEditorCanvas();
|
|
8
|
+
const isFocused = focusChoiceId === choice.id;
|
|
9
|
+
const isDropTarget = Boolean(choiceDrag) &&
|
|
10
|
+
choiceDropTarget?.nodeId === nodeId &&
|
|
11
|
+
choiceDropTarget.index === choiceIndex;
|
|
12
|
+
const handleDragOver = (event) => {
|
|
13
|
+
if (readOnly || !choiceDrag)
|
|
14
|
+
return;
|
|
15
|
+
event.preventDefault();
|
|
16
|
+
event.stopPropagation();
|
|
17
|
+
event.dataTransfer.dropEffect = 'move';
|
|
18
|
+
onChoiceDragOver(nodeId, choiceIndex);
|
|
19
|
+
};
|
|
20
|
+
const handleDrop = (event) => {
|
|
21
|
+
if (readOnly || !choiceDrag)
|
|
22
|
+
return;
|
|
23
|
+
event.preventDefault();
|
|
24
|
+
event.stopPropagation();
|
|
25
|
+
onChoiceDrop(nodeId, choiceIndex);
|
|
26
|
+
};
|
|
27
|
+
const handleChoiceSelect = (event) => {
|
|
28
|
+
if (readOnly)
|
|
29
|
+
return;
|
|
30
|
+
const target = event.target;
|
|
31
|
+
if (target != null &&
|
|
32
|
+
typeof target === 'object' &&
|
|
33
|
+
'closest' in target &&
|
|
34
|
+
typeof target.closest === 'function' &&
|
|
35
|
+
target.closest(CHOICE_DRAG_HANDLE_SELECTOR)) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
event.stopPropagation();
|
|
39
|
+
onSelectChoice(nodeId, choice.id);
|
|
40
|
+
};
|
|
41
|
+
return (_jsx("li", { className: joinClasses('list-group-item p-0 border-0', isDropTarget && CHOICE_DROP_TARGET_CLASS), onDragOver: handleDragOver, onDrop: handleDrop, children: _jsxs("div", { className: joinClasses('d-flex align-items-center gap-1 min-w-0 py-2 px-2 w-100', CHOICE_ROW_CLASS, isFocused && CANVAS_CHOICE_SELECTED_CLASS, isFocused && CANVAS_NODE_SELECTED_CLASS, isFocused && CANVAS_NODE_SELECTED_TEXT_CLASS), children: [readOnly ? null : (_jsx("button", { type: "button", className: `${CHOICE_DRAG_HANDLE_CLASS} flex-shrink-0`, draggable: true, onDragStart: (event) => {
|
|
42
|
+
event.stopPropagation();
|
|
43
|
+
onChoiceDragStart(nodeId, choice.id);
|
|
44
|
+
event.dataTransfer.effectAllowed = 'move';
|
|
45
|
+
event.dataTransfer.setData('text/plain', `${nodeId}::${choice.id}`);
|
|
46
|
+
}, onDragEnd: () => onChoiceDragEnd(), onClick: (event) => event.stopPropagation(), title: "Drag to reorder or move to another node", "aria-label": "Drag choice", children: _jsx("i", { className: "bi bi-grip-vertical", "aria-hidden": true }) })), _jsxs("button", { type: "button", className: joinClasses(CHOICE_ROW_SELECT_CLASS, 'text-start flex-grow-1 min-w-0 d-flex align-items-center gap-1', readOnly ? '' : CHOICE_ROW_SELECTABLE_CLASS), disabled: readOnly, onClick: handleChoiceSelect, onKeyDown: (event) => {
|
|
47
|
+
if (readOnly)
|
|
48
|
+
return;
|
|
49
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
50
|
+
event.preventDefault();
|
|
51
|
+
event.stopPropagation();
|
|
52
|
+
onSelectChoice(nodeId, choice.id);
|
|
53
|
+
}
|
|
54
|
+
}, children: [_jsx("span", { className: joinClasses(choiceTextClass, 'flex-grow-1 min-w-0'), title: choice.label, children: choice.label }), _jsx("span", { className: "badge bg-light text-dark flex-shrink-0", children: choice.id })] }), _jsx(Handle, { type: "source", position: Position.Right, id: `${CHOICE_HANDLE_PREFIX}${choice.id}`, className: CHOICE_HANDLE_CLASS })] }) }));
|
|
55
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EndNode.d.ts","sourceRoot":"","sources":["../../src/nodes/EndNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAa7D,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAoB9C"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Handle, Position } from 'reactflow';
|
|
3
|
+
import { BORDER_DANGER_CLASS, CANVAS_NODE_CLASS, CANVAS_NODE_SELECTED_CLASS, CANVAS_NODE_SELECTED_TEXT_CLASS, END_NODE_WIDTH_CLASS, TARGET_HANDLE_CLASS_DANGER, TARGET_HANDLE_ID, } from '../canvas/constants';
|
|
4
|
+
import { joinClasses } from '../utils/joinClasses';
|
|
5
|
+
export function EndNode({ selected }) {
|
|
6
|
+
return (_jsxs("div", { className: joinClasses('card', 'rounded', CANVAS_NODE_CLASS, BORDER_DANGER_CLASS, END_NODE_WIDTH_CLASS, selected && CANVAS_NODE_SELECTED_CLASS, selected && CANVAS_NODE_SELECTED_TEXT_CLASS), children: [_jsx(Handle, { type: "target", position: Position.Left, id: TARGET_HANDLE_ID, className: TARGET_HANDLE_CLASS_DANGER }), _jsxs("div", { className: "card-body p-2 text-center", children: [_jsx("div", { className: "fw-bold text-danger", children: "END" }), _jsx("div", { className: "text-muted font-size-12", children: "Outcome required" })] })] }));
|
|
7
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { type NodeProps } from 'reactflow';
|
|
2
|
+
import type { PromptNodeData } from './types';
|
|
3
|
+
type PromptNodeProps = Readonly<NodeProps<PromptNodeData>>;
|
|
4
|
+
export declare function PromptNode({ data, selected, id }: PromptNodeProps): import("react").JSX.Element;
|
|
5
|
+
export {};
|
|
6
|
+
//# sourceMappingURL=PromptNode.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PromptNode.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyD,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AA2BlG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,eAAe,GAAG,QAAQ,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;AAE3D,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,eAAe,+BA+GjE"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect } from 'react';
|
|
3
|
+
import { Handle, NodeResizer, Position, useUpdateNodeInternals } from 'reactflow';
|
|
4
|
+
import { editorHintsToStyle, getEditorHints, nodeTextWrapClassName, resolveNodeTextWrap, } from '@signalsafe/tree-spec-editor-core';
|
|
5
|
+
import { CANVAS_NODE_BODY_CLASS, CANVAS_NODE_CLASS, CANVAS_NODE_SELECTED_CLASS, CANVAS_NODE_SELECTED_TEXT_CLASS, MIN_NODE_HEIGHT, MAX_NODE_HEIGHT, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TARGET_HANDLE_CLASS_DEFAULT, TARGET_HANDLE_ID, } from '../canvas/constants';
|
|
6
|
+
import { getPromptNodeBorderClass } from '../canvas/edgeStyle';
|
|
7
|
+
import { useGraphEditorCanvas } from '../GraphEditorCanvasContext';
|
|
8
|
+
import { joinClasses } from '../utils/joinClasses';
|
|
9
|
+
import { PromptNodeChoicesList } from './PromptNodeChoicesList';
|
|
10
|
+
import { PromptNodeHeader } from './PromptNodeHeader';
|
|
11
|
+
import { PromptNodeToolbar } from './PromptNodeToolbar';
|
|
12
|
+
export function PromptNode({ data, selected, id }) {
|
|
13
|
+
const n = data.node;
|
|
14
|
+
const choices = n.choices ?? [];
|
|
15
|
+
const updateNodeInternals = useUpdateNodeInternals();
|
|
16
|
+
const { readOnly, onDuplicateNode, onDeleteNode, onResizeNode, onResizeNodeStart, choiceDrag, choiceDropTarget, onChoiceDragOver, onChoiceDrop } = useGraphEditorCanvas();
|
|
17
|
+
const hasErrors = data.issuesErrors > 0;
|
|
18
|
+
const borderClass = getPromptNodeBorderClass(hasErrors, data.issuesWarnings);
|
|
19
|
+
const focusChoiceId = data.focusChoiceId ?? null;
|
|
20
|
+
const showNodeHighlight = selected && !focusChoiceId;
|
|
21
|
+
const editor = getEditorHints(n);
|
|
22
|
+
const appearanceStyle = editorHintsToStyle(editor);
|
|
23
|
+
const textWrap = resolveNodeTextWrap(editor);
|
|
24
|
+
const promptTextClass = nodeTextWrapClassName(textWrap, 'block');
|
|
25
|
+
const choiceTextClass = nodeTextWrapClassName(textWrap, 'flex');
|
|
26
|
+
const locked = editor.locked === true;
|
|
27
|
+
const canEditCanvas = selected && !readOnly && !locked;
|
|
28
|
+
const cardStyle = {
|
|
29
|
+
...appearanceStyle,
|
|
30
|
+
width: '100%',
|
|
31
|
+
height: '100%',
|
|
32
|
+
minWidth: 0,
|
|
33
|
+
boxSizing: 'border-box',
|
|
34
|
+
display: 'flex',
|
|
35
|
+
flexDirection: 'column',
|
|
36
|
+
};
|
|
37
|
+
const scrollBodyStyle = editor.height !== undefined || data.lockedResizeHeight !== undefined
|
|
38
|
+
? { flex: '1 1 auto', minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }
|
|
39
|
+
: undefined;
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
updateNodeInternals(id);
|
|
42
|
+
}, [id, choices.length, editor.height, editor.width, updateNodeInternals]);
|
|
43
|
+
const handleResize = useCallback(() => {
|
|
44
|
+
updateNodeInternals(id);
|
|
45
|
+
}, [id, updateNodeInternals]);
|
|
46
|
+
return (_jsxs(_Fragment, { children: [canEditCanvas ? (_jsx(PromptNodeToolbar, { nodeId: id, onDuplicateNode: onDuplicateNode, onDeleteNode: onDeleteNode })) : null, canEditCanvas ? (_jsx(NodeResizer, { minWidth: MIN_NODE_WIDTH, maxWidth: MAX_NODE_WIDTH, minHeight: MIN_NODE_HEIGHT, maxHeight: MAX_NODE_HEIGHT, onResizeStart: (_event, params) => {
|
|
47
|
+
onResizeNodeStart(id, params.width, params.height);
|
|
48
|
+
}, onResize: handleResize, onResizeEnd: (_event, params) => {
|
|
49
|
+
onResizeNode(id, params.width, params.height);
|
|
50
|
+
} })) : null, _jsxs("div", { className: joinClasses('card', 'rounded', CANVAS_NODE_CLASS, borderClass, showNodeHighlight && CANVAS_NODE_SELECTED_CLASS, showNodeHighlight && CANVAS_NODE_SELECTED_TEXT_CLASS), style: cardStyle, children: [_jsx(Handle, { type: "target", position: Position.Left, id: TARGET_HANDLE_ID, className: TARGET_HANDLE_CLASS_DEFAULT }), _jsx(PromptNodeHeader, { node: n, data: data, editor: editor, locked: locked, readOnly: readOnly }), _jsxs("div", { className: `${CANVAS_NODE_BODY_CLASS} min-w-0`, style: scrollBodyStyle, children: [_jsx("div", { className: "card-body py-2 px-2 min-w-0 nodrag", children: _jsx("div", { className: joinClasses('font-size-12 mb-0', promptTextClass), title: n.prompt || undefined, children: n.prompt || _jsx("em", { className: "text-muted", children: "(empty prompt)" }) }) }), _jsx(PromptNodeChoicesList, { nodeId: id, choices: choices, focusChoiceId: focusChoiceId, choiceTextClass: choiceTextClass, readOnly: readOnly, choiceDrag: choiceDrag, choiceDropTarget: choiceDropTarget, onChoiceDragOver: onChoiceDragOver, onChoiceDrop: onChoiceDrop })] })] })] }));
|
|
51
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type EditorChoice } from '@signalsafe/tree-spec-editor-core';
|
|
2
|
+
import { type GraphEditorCanvasContextValue } from '../GraphEditorCanvasContext';
|
|
3
|
+
export declare function PromptNodeChoicesList({ nodeId, choices, focusChoiceId, choiceTextClass, readOnly, choiceDrag, choiceDropTarget, onChoiceDragOver, onChoiceDrop, }: Readonly<{
|
|
4
|
+
nodeId: string;
|
|
5
|
+
choices: EditorChoice[];
|
|
6
|
+
focusChoiceId: string | null;
|
|
7
|
+
choiceTextClass: string;
|
|
8
|
+
readOnly: boolean;
|
|
9
|
+
choiceDrag: GraphEditorCanvasContextValue['choiceDrag'];
|
|
10
|
+
choiceDropTarget: GraphEditorCanvasContextValue['choiceDropTarget'];
|
|
11
|
+
onChoiceDragOver: GraphEditorCanvasContextValue['onChoiceDragOver'];
|
|
12
|
+
onChoiceDrop: GraphEditorCanvasContextValue['onChoiceDrop'];
|
|
13
|
+
}>): import("react").JSX.Element;
|
|
14
|
+
//# sourceMappingURL=PromptNodeChoicesList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PromptNodeChoicesList.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeChoicesList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAMtE,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAIjF,wBAAgB,qBAAqB,CAAC,EAClC,MAAM,EACN,OAAO,EACP,aAAa,EACb,eAAe,EACf,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,GACf,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,6BAA6B,CAAC,YAAY,CAAC,CAAC;IACxD,gBAAgB,EAAE,6BAA6B,CAAC,kBAAkB,CAAC,CAAC;IACpE,gBAAgB,EAAE,6BAA6B,CAAC,kBAAkB,CAAC,CAAC;IACpE,YAAY,EAAE,6BAA6B,CAAC,cAAc,CAAC,CAAC;CAC/D,CAAC,+BA2DD"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { CHOICE_DROP_APPEND_CLASS, CHOICE_DROP_TARGET_CLASS, } from '../canvas/constants';
|
|
3
|
+
import { joinClasses } from '../utils/joinClasses';
|
|
4
|
+
import { ChoiceCanvasRow } from './ChoiceCanvasRow';
|
|
5
|
+
export function PromptNodeChoicesList({ nodeId, choices, focusChoiceId, choiceTextClass, readOnly, choiceDrag, choiceDropTarget, onChoiceDragOver, onChoiceDrop, }) {
|
|
6
|
+
const handleListDragOver = (event) => {
|
|
7
|
+
if (readOnly || !choiceDrag)
|
|
8
|
+
return;
|
|
9
|
+
event.preventDefault();
|
|
10
|
+
event.stopPropagation();
|
|
11
|
+
event.dataTransfer.dropEffect = 'move';
|
|
12
|
+
onChoiceDragOver(nodeId, choices.length);
|
|
13
|
+
};
|
|
14
|
+
const handleListDrop = (event) => {
|
|
15
|
+
if (readOnly || !choiceDrag)
|
|
16
|
+
return;
|
|
17
|
+
event.preventDefault();
|
|
18
|
+
event.stopPropagation();
|
|
19
|
+
onChoiceDrop(nodeId, choices.length);
|
|
20
|
+
};
|
|
21
|
+
return (_jsxs("ul", { className: "list-group list-group-flush font-size-12 min-w-0 nodrag", "aria-label": "Node choices", onDragOver: handleListDragOver, onDrop: handleListDrop, children: [choices.length === 0 ? (_jsx("li", { className: joinClasses('list-group-item py-2 px-2 text-muted', choiceDrag && CHOICE_DROP_TARGET_CLASS), children: _jsx("em", { children: "No choices" }) })) : (choices.map((c, choiceIndex) => (_jsx(ChoiceCanvasRow, { nodeId: nodeId, choice: c, choiceIndex: choiceIndex, focusChoiceId: focusChoiceId, choiceTextClass: choiceTextClass, readOnly: readOnly }, c.id)))), choiceDrag && readOnly === false && choices.length > 0 ? (_jsx("li", { className: joinClasses(CHOICE_DROP_APPEND_CLASS, 'list-unstyled', choiceDropTarget?.nodeId === nodeId &&
|
|
22
|
+
choiceDropTarget.index === choices.length &&
|
|
23
|
+
CHOICE_DROP_TARGET_CLASS), "aria-hidden": true })) : null] }));
|
|
24
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { getEditorHints, type EditorNode } from '@signalsafe/tree-spec-editor-core';
|
|
2
|
+
import type { PromptNodeData } from './types';
|
|
3
|
+
export declare function PromptNodeHeader({ node, data, editor, locked, readOnly, }: Readonly<{
|
|
4
|
+
node: EditorNode;
|
|
5
|
+
data: PromptNodeData;
|
|
6
|
+
editor: ReturnType<typeof getEditorHints>;
|
|
7
|
+
locked: boolean;
|
|
8
|
+
readOnly: boolean;
|
|
9
|
+
}>): import("react").JSX.Element;
|
|
10
|
+
//# sourceMappingURL=PromptNodeHeader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PromptNodeHeader.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAIpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,gBAAgB,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,EACN,QAAQ,GACX,EAAE,QAAQ,CAAC;IACR,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC,+BAkCD"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { NODE_DRAG_HANDLE_CLASS } from '../canvas/constants';
|
|
3
|
+
import { PromptNodeIssueBadges } from './PromptNodeIssueBadges';
|
|
4
|
+
export function PromptNodeHeader({ node, data, editor, locked, readOnly, }) {
|
|
5
|
+
return (_jsx("div", { className: "card-header bg-body-secondary py-2 px-2 min-w-0 flex-shrink-0", children: _jsxs("div", { className: "d-flex justify-content-between align-items-start gap-2 min-w-0", children: [_jsxs("div", { className: "d-flex align-items-start gap-1 min-w-0 flex-grow-1 overflow-hidden", children: [locked || readOnly ? null : (_jsx("span", { className: `${NODE_DRAG_HANDLE_CLASS} flex-shrink-0`, title: "Drag node", "aria-label": "Drag node", children: _jsx("i", { className: "bi bi-grip-vertical", "aria-hidden": true }) })), _jsx("div", { className: "min-w-0 flex-grow-1 overflow-hidden", children: _jsxs("div", { className: "fw-bold font-size-13", children: [data.isStart ? '▶ ' : '', node.type, editor.locked ? (_jsx("i", { className: "bi bi-lock-fill ms-1 text-secondary", title: "Locked", "aria-hidden": true })) : null, _jsx(PromptNodeIssueBadges, { issuesTotal: data.issuesTotal, issuesErrors: data.issuesErrors, issuesWarnings: data.issuesWarnings, issuesInfo: data.issuesInfo })] }) })] }), _jsx("div", { className: "text-muted font-size-11 flex-shrink-0", children: node.id.slice(0, 8) })] }) }));
|
|
6
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare function PromptNodeIssueBadges({ issuesTotal, issuesErrors, issuesWarnings, issuesInfo, }: Readonly<{
|
|
2
|
+
issuesTotal: number;
|
|
3
|
+
issuesErrors: number;
|
|
4
|
+
issuesWarnings: number;
|
|
5
|
+
issuesInfo: number;
|
|
6
|
+
}>): import("react").JSX.Element | null;
|
|
7
|
+
//# sourceMappingURL=PromptNodeIssueBadges.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PromptNodeIssueBadges.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeIssueBadges.tsx"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,CAAC,EAClC,WAAW,EACX,YAAY,EACZ,cAAc,EACd,UAAU,GACb,EAAE,QAAQ,CAAC;IACR,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC,sCAcD"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export function PromptNodeIssueBadges({ issuesTotal, issuesErrors, issuesWarnings, issuesInfo, }) {
|
|
3
|
+
if (issuesTotal <= 0)
|
|
4
|
+
return null;
|
|
5
|
+
return (_jsxs("span", { className: "ms-2", title: `${issuesErrors} errors, ${issuesWarnings} warnings, ${issuesInfo} info`, children: [issuesErrors > 0 ? _jsx("span", { className: "badge bg-danger me-1", children: issuesErrors }) : null, issuesWarnings > 0 ? (_jsx("span", { className: "badge bg-warning text-dark me-1", children: issuesWarnings })) : null, issuesInfo > 0 ? _jsx("span", { className: "badge bg-info text-dark", children: issuesInfo }) : null] }));
|
|
6
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare function PromptNodeToolbar({ nodeId, onDuplicateNode, onDeleteNode, }: Readonly<{
|
|
2
|
+
nodeId: string;
|
|
3
|
+
onDuplicateNode: (id: string) => void;
|
|
4
|
+
onDeleteNode: (id: string) => void;
|
|
5
|
+
}>): import("react").JSX.Element;
|
|
6
|
+
//# sourceMappingURL=PromptNodeToolbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PromptNodeToolbar.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeToolbar.tsx"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,EAC9B,MAAM,EACN,eAAe,EACf,YAAY,GACf,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC,+BA0BD"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Position, NodeToolbar } from 'reactflow';
|
|
3
|
+
export function PromptNodeToolbar({ nodeId, onDuplicateNode, onDeleteNode, }) {
|
|
4
|
+
return (_jsx(NodeToolbar, { isVisible: true, position: Position.Bottom, offset: 8, align: "start", children: _jsxs("fieldset", { className: "btn-group btn-group-sm shadow-sm border-0 p-0 m-0", children: [_jsx("legend", { className: "visually-hidden", children: "Node actions" }), _jsx("button", { type: "button", className: "btn btn-light border", title: "Duplicate node", "aria-label": "Duplicate node", onClick: () => onDuplicateNode(nodeId), children: _jsx("i", { className: "bi bi-files", "aria-hidden": true }) }), _jsx("button", { type: "button", className: "btn btn-light border text-danger", title: "Delete node", "aria-label": "Delete node", onClick: () => onDeleteNode(nodeId), children: _jsx("i", { className: "bi bi-trash", "aria-hidden": true }) })] }) }));
|
|
5
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { EditorNode } from '@signalsafe/tree-spec-editor-core';
|
|
2
|
+
export type PromptNodeData = {
|
|
3
|
+
node: EditorNode;
|
|
4
|
+
isStart: boolean;
|
|
5
|
+
issuesTotal: number;
|
|
6
|
+
issuesErrors: number;
|
|
7
|
+
issuesWarnings: number;
|
|
8
|
+
issuesInfo: number;
|
|
9
|
+
focusChoiceId?: string | null;
|
|
10
|
+
/** Transient height lock while the user is dragging a resize handle. */
|
|
11
|
+
lockedResizeHeight?: number;
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/nodes/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEpE,MAAM,MAAM,cAAc,GAAG;IACzB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"joinClasses.d.ts","sourceRoot":"","sources":["../../src/utils/joinClasses.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAEnF"}
|
package/package.json
CHANGED
|
@@ -1,16 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@signalsafe/tree-spec-editor-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"description": "Headless React canvas for the SignalSafe TreeSpec graph editor (React Flow shell, no UI library)",
|
|
6
|
-
"license": "
|
|
5
|
+
"description": "Headless React canvas for the SignalSafe TreeSpec graph editor (React Flow shell, no UI library).",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/SignalSafeSoftware/tree-spec-editor-react.git"
|
|
10
|
+
},
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/SignalSafeSoftware/tree-spec-editor-react/issues"
|
|
13
|
+
},
|
|
14
|
+
"homepage": "https://github.com/SignalSafeSoftware/tree-spec-editor-react#readme",
|
|
7
15
|
"keywords": [
|
|
8
16
|
"tree-spec",
|
|
9
17
|
"tree-spec-editor",
|
|
10
18
|
"react-flow",
|
|
11
19
|
"react",
|
|
12
|
-
"
|
|
13
|
-
"
|
|
20
|
+
"graph-editor",
|
|
21
|
+
"decision-tree",
|
|
22
|
+
"headless-ui",
|
|
23
|
+
"typescript",
|
|
24
|
+
"signalsafe"
|
|
14
25
|
],
|
|
15
26
|
"sideEffects": false,
|
|
16
27
|
"main": "./dist/index.js",
|
|
@@ -24,10 +35,14 @@
|
|
|
24
35
|
},
|
|
25
36
|
"files": [
|
|
26
37
|
"dist",
|
|
27
|
-
"README.md"
|
|
38
|
+
"README.md",
|
|
39
|
+
"LICENSE"
|
|
28
40
|
],
|
|
41
|
+
"engines": {
|
|
42
|
+
"node": ">=18"
|
|
43
|
+
},
|
|
29
44
|
"publishConfig": {
|
|
30
|
-
"access": "
|
|
45
|
+
"access": "public"
|
|
31
46
|
},
|
|
32
47
|
"scripts": {
|
|
33
48
|
"build": "tsc -p tsconfig.build.json",
|
|
@@ -35,11 +50,12 @@
|
|
|
35
50
|
"pack:local": "npm pack --pack-destination ../../dist/reusable-npm",
|
|
36
51
|
"prepublishOnly": "npm run build",
|
|
37
52
|
"prepare": "npm run build",
|
|
38
|
-
"test": "
|
|
53
|
+
"test": "vitest run",
|
|
54
|
+
"test:monorepo": "cd ../../frontend && yarn vitest run --config vitest.tree-spec-editor-react.config.ts"
|
|
39
55
|
},
|
|
40
56
|
"dependencies": {
|
|
41
|
-
"@signalsafe/tree-spec": "^0.1
|
|
42
|
-
"@signalsafe/tree-spec-editor-core": "^0.1.
|
|
57
|
+
"@signalsafe/tree-spec": "^0.3.1",
|
|
58
|
+
"@signalsafe/tree-spec-editor-core": "^0.1.2"
|
|
43
59
|
},
|
|
44
60
|
"peerDependencies": {
|
|
45
61
|
"react": "^18.0.0",
|
|
@@ -49,10 +65,12 @@
|
|
|
49
65
|
"devDependencies": {
|
|
50
66
|
"@types/react": "^18.2.66",
|
|
51
67
|
"@types/react-dom": "^18.2.22",
|
|
68
|
+
"@types/react-test-renderer": "^18.3.0",
|
|
52
69
|
"react": "^18.3.1",
|
|
53
70
|
"react-dom": "^18.3.1",
|
|
54
|
-
"react-test-renderer": "18.3.1",
|
|
71
|
+
"react-test-renderer": "^18.3.1",
|
|
55
72
|
"reactflow": "^11.11.4",
|
|
56
|
-
"typescript": "^5.4.2"
|
|
73
|
+
"typescript": "^5.4.2",
|
|
74
|
+
"vitest": "^3.2.4"
|
|
57
75
|
}
|
|
58
76
|
}
|