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

package/src/components/panels/keymaps/index.tsx

@@ -0,0 +1,167 @@
+import { useSystem } from '@/system/provider';
+import {
+  VscodeButton,
+  VscodeLabel,
+  VscodeTextfield,
+  VscodeTable,
+  VscodeTableBody,
+  VscodeTableCell,
+  VscodeTableHeader,
+  VscodeTableHeaderCell,
+  VscodeTableRow
+} from '@vscode-elements/react-elements';
+import { useState } from 'react';
+import { useStore } from 'zustand';
+import styles from './index.module.css';
+import { BasePanel } from '../base';
+
+export const KeymapsPanel = () => {
+  const system = useSystem();
+  const keymap = useStore(system.hotKeyStore, (s) => s.keymap);
+  const descriptions = useStore(system.hotKeyStore, (s) => s.descriptions);
+  const register = useStore(system.hotKeyStore, (s) => s.register);
+
+  const [editingKey, setEditingKey] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState('');
+
+  const handleEdit = (action: string) => {
+    const current = keymap[action];
+    setEditingKey(action);
+    setEditValue(Array.isArray(current) ? current.join(', ') : current || '');
+  };
+
+  const handleSave = (action: string) => {
+    const trimmedValue = editValue.trim();
+    if (trimmedValue) {
+      // Parse the input - if it contains commas, treat as array
+      const newValue = trimmedValue.includes(',')
+        ? trimmedValue
+            .split(',')
+            .map((k) => k.trim())
+            .filter((k) => k.length > 0)
+        : trimmedValue;
+
+      register({
+        action,
+        trigger: newValue
+      });
+    }
+    setEditingKey(null);
+    setEditValue('');
+  };
+
+  const handleCancel = () => {
+    setEditingKey(null);
+    setEditValue('');
+  };
+
+  const handleReset = (action: string) => {
+    // Reset to default - you might want to store defaults separately
+    // For now, this just clears the binding
+    const confirmed = confirm(`Reset keybinding for ${action}?`);
+    if (confirmed) {
+      register({
+        action,
+        trigger: ''
+      });
+      setEditingKey(null);
+    }
+  };
+
+  const formatKeymap = (value: string | string[] | undefined): string => {
+    if (!value) {
+      return 'Not set';
+    }
+    if (Array.isArray(value)) {
+      return value.join(', ');
+    }
+    return value;
+  };
+
+  const getDescription = (action: string): string => {
+    return descriptions[action] || action;
+  };
+
+  // Get all actions from keymap
+  const actions = Object.keys(keymap).sort();
+
+  return (
+    <BasePanel>
+      <div className={styles.content}>
+        <div className={styles.header}>
+          <VscodeLabel>Keyboard Shortcuts</VscodeLabel>
+          <span className={styles.helpText}>
+            Customize keyboard shortcuts for various actions. Use commas to
+            separate multiple key combinations.
+          </span>
+        </div>
+
+        <VscodeTable className={styles.table} zebra>
+          <VscodeTableHeader slot="header">
+            <VscodeTableHeaderCell>Command</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Key Binding</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Actions</VscodeTableHeaderCell>
+          </VscodeTableHeader>
+          <VscodeTableBody slot="body">
+            {actions.map((action) => (
+              <VscodeTableRow key={action}>
+                <VscodeTableCell className={styles.actionCell}>
+                  <div className={styles.actionInfo}>
+                    <div className={styles.actionLabel}>
+                      {getDescription(action)}
+                    </div>
+                    <code className={styles.actionId}>{action}</code>
+                  </div>
+                </VscodeTableCell>
+
+                <VscodeTableCell className={styles.keybindingCell}>
+                  {editingKey === action ? (
+                    <VscodeTextfield
+                      value={editValue}
+                      onChange={(e) => {
+                        const target = e.target as HTMLInputElement;
+                        setEditValue(target.value);
+                      }}
+                      placeholder="e.g., ctrl+k or ctrl+k, command+k"
+                      className={styles.textfield}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          handleSave(action);
+                        } else if (e.key === 'Escape') {
+                          handleCancel();
+                        }
+                      }}
+                      autoFocus
+                    />
+                  ) : (
+                    <span className={styles.keyBadge}>
+                      {formatKeymap(keymap[action])}
+                    </span>
+                  )}
+                </VscodeTableCell>
+
+                <VscodeTableCell className={styles.actionsCell}>
+                  {editingKey === action ? (
+                    <div className={styles.buttonGroup}>
+                      <VscodeButton onClick={() => handleSave(action)}>
+                        Save
+                      </VscodeButton>
+                      <VscodeButton onClick={handleCancel}>Cancel</VscodeButton>
+                      <VscodeButton onClick={() => handleReset(action)}>
+                        Reset
+                      </VscodeButton>
+                    </div>
+                  ) : (
+                    <VscodeButton onClick={() => handleEdit(action)}>
+                      Edit
+                    </VscodeButton>
+                  )}
+                </VscodeTableCell>
+              </VscodeTableRow>
+            ))}
+          </VscodeTableBody>
+        </VscodeTable>
+      </div>
+    </BasePanel>
+  );
+};

package/src/components/panels/layers/index.tsx

@@ -0,0 +1,240 @@
+import { BasePanel } from '@/components/panels/base';
+import { layerId } from '@/annotations';
+import { useSystem } from '@/system/provider';
+import { VscodeButton, VscodeDivider } from '@vscode-elements/react-elements';
+import { useMemo, useState } from 'react';
+import { useStore } from 'zustand';
+import styles from './styles.module.css';
+
+type NodeWithAnnotations = {
+  id: string;
+  selected?: boolean;
+  data?: {
+    annotations?: Record<string, unknown>;
+  };
+};
+
+const getAnnotatedLayerId = (node: NodeWithAnnotations): string | undefined => {
+  const value = node.data?.annotations?.[layerId];
+  return typeof value === 'string' ? value : undefined;
+};
+
+const clampOpacityFromPercent = (percent: number): number => {
+  if (Number.isNaN(percent)) return 1;
+  return Math.max(0, Math.min(100, percent)) / 100;
+};
+
+export function LayersPanel() {
+  const system = useSystem();
+
+  const layers = useStore(system.layerStore, (state) => state.layers);
+  const nodeLayers = useStore(system.layerStore, (state) => state.nodeLayers);
+  const defaultLayerId = useStore(
+    system.layerStore,
+    (state) => state.defaultLayerId
+  );
+
+  const nodes = useStore(system.nodeStore, (state) => state.nodes);
+
+  const [newLayerName, setNewLayerName] = useState('');
+
+  const selectedNodeIds = useMemo(() => {
+    return nodes.filter((node) => node.selected).map((node) => node.id);
+  }, [nodes]);
+
+  const layerRows = useMemo(() => {
+    const entries = Object.values(layers);
+    return entries.sort((a, b) => {
+      if (a.id === defaultLayerId) return -1;
+      if (b.id === defaultLayerId) return 1;
+      return a.name.localeCompare(b.name);
+    });
+  }, [defaultLayerId, layers]);
+
+  const selectedLayerId = useMemo(() => {
+    if (selectedNodeIds.length === 0) return undefined;
+
+    const effectiveLayerIds = selectedNodeIds.map((nodeId) => {
+      const node = nodes.find((candidate) => candidate.id === nodeId);
+      if (!node) return defaultLayerId;
+      return (
+        nodeLayers[nodeId] ??
+        getAnnotatedLayerId(node as NodeWithAnnotations) ??
+        defaultLayerId
+      );
+    });
+
+    const first = effectiveLayerIds[0];
+    const sameLayer = effectiveLayerIds.every((id) => id === first);
+    return sameLayer ? first : undefined;
+  }, [defaultLayerId, nodeLayers, nodes, selectedNodeIds]);
+
+  const updateNodeAnnotationsForLayer = (
+    nodeIds: string[],
+    nextLayerId: string
+  ): void => {
+    system.nodeStore.getState().setNodes((existing) =>
+      existing.map((node) => {
+        if (!nodeIds.includes(node.id)) return node;
+
+        const dataRecord =
+          node.data && typeof node.data === 'object'
+            ? (node.data as Record<string, unknown>)
+            : {};
+
+        const annotationsRecord =
+          dataRecord.annotations && typeof dataRecord.annotations === 'object'
+            ? (dataRecord.annotations as Record<string, unknown>)
+            : {};
+
+        return {
+          ...node,
+          data: {
+            ...dataRecord,
+            annotations: {
+              ...annotationsRecord,
+              [layerId]: nextLayerId
+            }
+          }
+        };
+      })
+    );
+  };
+
+  const handleCreateLayer = (): void => {
+    const nextName = newLayerName.trim();
+    if (!nextName) return;
+
+    system.layerStore.getState().createLayer(nextName);
+    setNewLayerName('');
+  };
+
+  const handleAssignSelected = (targetLayerId: string): void => {
+    if (selectedNodeIds.length === 0) return;
+
+    selectedNodeIds.forEach((nodeId) => {
+      system.layerStore.getState().setNodeLayer(nodeId, targetLayerId);
+    });
+    updateNodeAnnotationsForLayer(selectedNodeIds, targetLayerId);
+  };
+
+  const handleRemoveLayer = (targetLayerId: string): void => {
+    if (targetLayerId === defaultLayerId) return;
+
+    const affectedNodeIds = Object.entries(nodeLayers)
+      .filter(([, mappedLayerId]) => mappedLayerId === targetLayerId)
+      .map(([nodeId]) => nodeId);
+
+    system.layerStore.getState().removeLayer(targetLayerId);
+
+    if (affectedNodeIds.length > 0) {
+      updateNodeAnnotationsForLayer(affectedNodeIds, defaultLayerId);
+    }
+  };
+
+  return (
+    <BasePanel>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <span className={styles.title}>Layers</span>
+          <span className={styles.subtitle}>
+            {selectedNodeIds.length} selected node
+            {selectedNodeIds.length === 1 ? '' : 's'}
+          </span>
+        </div>
+
+        <div className={styles.addRow}>
+          <input
+            className={styles.nameInput}
+            value={newLayerName}
+            onChange={(event) => setNewLayerName(event.target.value)}
+            placeholder="New layer name"
+          />
+          <VscodeButton onClick={handleCreateLayer}>Add Layer</VscodeButton>
+        </div>
+
+        <VscodeDivider />
+
+        <div className={styles.list}>
+          {layerRows.map((layer) => {
+            const isDefault = layer.id === defaultLayerId;
+            const isSelectedLayer = selectedLayerId === layer.id;
+
+            return (
+              <div className={styles.row} key={layer.id}>
+                <div className={styles.rowTop}>
+                  <input
+                    className={styles.layerName}
+                    value={layer.name}
+                    onChange={(event) =>
+                      system.layerStore
+                        .getState()
+                        .renameLayer(layer.id, event.target.value)
+                    }
+                    aria-label={`Layer name ${layer.name}`}
+                  />
+                  {isDefault && <span className={styles.badge}>default</span>}
+                  {isSelectedLayer && (
+                    <span className={styles.badge}>selected</span>
+                  )}
+                </div>
+
+                <div className={styles.controls}>
+                  <label className={styles.checkboxLabel}>
+                    <input
+                      type="checkbox"
+                      checked={layer.visible}
+                      onChange={(event) =>
+                        system.layerStore
+                          .getState()
+                          .setLayerVisibility(layer.id, event.target.checked)
+                      }
+                    />
+                    Visible
+                  </label>
+
+                  <label className={styles.opacityLabel}>
+                    Opacity
+                    <input
+                      type="range"
+                      min={0}
+                      max={100}
+                      value={Math.round(layer.opacity * 100)}
+                      onChange={(event) =>
+                        system.layerStore
+                          .getState()
+                          .setLayerOpacity(
+                            layer.id,
+                            clampOpacityFromPercent(
+                              Number.parseInt(event.target.value, 10)
+                            )
+                          )
+                      }
+                    />
+                    <span>{Math.round(layer.opacity * 100)}%</span>
+                  </label>
+                </div>
+
+                <div className={styles.actions}>
+                  <VscodeButton
+                    onClick={() => handleAssignSelected(layer.id)}
+                    disabled={selectedNodeIds.length === 0}
+                  >
+                    Assign Selected
+                  </VscodeButton>
+                  <VscodeButton
+                    secondary
+                    disabled={isDefault}
+                    onClick={() => handleRemoveLayer(layer.id)}
+                  >
+                    Delete
+                  </VscodeButton>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </BasePanel>
+  );
+}

package/src/components/panels/layers/styles.module.css

@@ -0,0 +1,110 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 0.75rem;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}
+
+.title {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.subtitle {
+    font-size: 0.85rem;
+    color: var(--vscode-descriptionForeground);
+}
+
+.addRow {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.nameInput {
+    flex: 1;
+    background: var(--vscode-input-background);
+    color: var(--vscode-input-foreground);
+    border: 1px solid var(--vscode-input-border);
+    border-radius: 4px;
+    padding: 0.35rem 0.5rem;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow: auto;
+}
+
+.row {
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    padding: 0.6rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.rowTop {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.layerName {
+    flex: 1;
+    background: transparent;
+    color: var(--vscode-editor-foreground);
+    border: 1px solid transparent;
+    border-radius: 4px;
+    padding: 0.2rem 0.3rem;
+}
+
+.layerName:focus {
+    border-color: var(--vscode-focusBorder);
+    outline: none;
+}
+
+.badge {
+    font-size: 0.7rem;
+    color: var(--vscode-badge-foreground);
+    background: var(--vscode-badge-background);
+    border-radius: 99px;
+    padding: 0.1rem 0.45rem;
+}
+
+.controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.checkboxLabel {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.85rem;
+}
+
+.opacityLabel {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.85rem;
+}
+
+.opacityLabel input[type='range'] {
+    width: 110px;
+}
+
+.actions {
+    display: flex;
+    gap: 0.4rem;
+}

package/src/components/panels/legend/index.module.css

@@ -0,0 +1,6 @@
+.legendCol {
+  height: 1rem;
+  width: 1rem;
+  border-radius: 0.125rem;
+  border: 1px solid;
+}

package/src/components/panels/legend/index.tsx

@@ -0,0 +1,76 @@
+import cx from 'classnames';
+import React from 'react';
+import { useStore } from 'zustand';
+
+import { useSystem } from '@/system/provider';
+import {
+  VscodeTable,
+  VscodeTableBody,
+  VscodeTableCell,
+  VscodeTableHeader,
+  VscodeTableHeaderCell,
+  VscodeTableRow
+} from '@vscode-elements/react-elements';
+import { BasePanel } from '../base';
+import klasses from './index.module.css';
+
+export function LegendPanel() {
+  const system = useSystem();
+  const { valueTypeColors, icons, defaultIcon } = useStore(system.legendStore);
+
+  const entries = React.useMemo(() => {
+    const keys = new Set<string>([
+      ...Object.keys(valueTypeColors),
+      ...Object.keys(icons)
+    ]);
+
+    return [...keys]
+      .sort((a, b) => a.localeCompare(b))
+      .map((valueType) => {
+        const Icon = icons[valueType] ?? defaultIcon;
+        const color = valueTypeColors[valueType];
+        const [bgClass, borderClass] = [color, color];
+
+        return {
+          valueType,
+          Icon,
+          bgClass,
+          borderClass
+        };
+      });
+  }, [defaultIcon, icons, valueTypeColors]);
+
+  return (
+    <BasePanel>
+      <div className="flex flex-col gap-1">
+        <VscodeTable zebra columns={['50', '50', 'auto']}>
+          <VscodeTableHeader>
+            <VscodeTableHeaderCell>Color</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Icon</VscodeTableHeaderCell>
+            <VscodeTableHeaderCell>Type</VscodeTableHeaderCell>
+          </VscodeTableHeader>
+          <VscodeTableBody>
+            {entries.map(({ valueType, Icon, bgClass, borderClass }) => (
+              <VscodeTableRow key={valueType}>
+                <VscodeTableCell>
+                  <div
+                    style={{
+                      border: borderClass,
+                      background: bgClass
+                    }}
+                    className={cx(klasses.legendCol, bgClass, borderClass)}
+                    title={valueType}
+                  />
+                </VscodeTableCell>
+                <VscodeTableCell>
+                  <Icon />
+                </VscodeTableCell>
+                <VscodeTableCell>{valueType}</VscodeTableCell>
+              </VscodeTableRow>
+            ))}
+          </VscodeTableBody>
+        </VscodeTable>
+      </div>
+    </BasePanel>
+  );
+}