@ultrst-armada/floks 0.0.0-stage → 1.0.0

package/packages/canvas-ui/dist/dock/index.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import React__default from 'react';
+
+type DockPosition = 'top' | 'bottom' | 'left' | 'right';
+interface DockItemConfig {
+    id: string;
+    icon: string | React.ReactNode;
+    label: string;
+    badge?: number | string;
+    onClick?: () => void;
+}
+
+interface DockItemProps {
+    item: DockItemConfig;
+    isActive?: boolean;
+    onClick?: () => void;
+}
+declare function DockItem({ item, isActive, onClick }: DockItemProps): React.JSX.Element;
+
+interface DockBarProps {
+    items: DockItemConfig[];
+    position?: DockPosition;
+    activeId?: string;
+    onItemClick?: (id: string) => void;
+    autoHide?: boolean;
+}
+declare function DockBar({ items, position, activeId, onItemClick, autoHide }: DockBarProps): React__default.JSX.Element;
+
+declare function useDock(initialItems?: DockItemConfig[]): {
+    items: DockItemConfig[];
+    activeId: string;
+    setActiveId: React.Dispatch<React.SetStateAction<string>>;
+    updateBadge: (id: string, badge: number | string | undefined) => void;
+    setItems: React.Dispatch<React.SetStateAction<DockItemConfig[]>>;
+};
+
+export { DockBar, DockItem, type DockItemConfig, type DockPosition, useDock };

package/packages/canvas-ui/dist/dock/index.js

@@ -0,0 +1,10 @@
+import {
+  DockBar,
+  DockItem,
+  useDock
+} from "../chunk-6VB74RCH.js";
+export {
+  DockBar,
+  DockItem,
+  useDock
+};

package/packages/canvas-ui/dist/editor/index.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+interface EditorConfig {
+    value: string;
+    language?: string;
+    readOnly?: boolean;
+    minimap?: boolean;
+    theme?: string;
+    fontSize?: number;
+}
+
+declare const skipoDarkTheme: {
+    base: "vs-dark";
+    inherit: boolean;
+    rules: ({
+        token: string;
+        foreground: string;
+        fontStyle?: undefined;
+    } | {
+        token: string;
+        foreground: string;
+        fontStyle: string;
+    })[];
+    colors: {
+        'editor.background': string;
+        'editor.foreground': string;
+        'editorLineNumber.foreground': string;
+        'editor.selectionBackground': string;
+        'editor.lineHighlightBackground': string;
+        'editorCursor.foreground': string;
+        'editorIndentGuide.background': string;
+    };
+};
+
+declare function useMonaco(): any;
+
+interface MonacoEditorProps extends EditorConfig {
+    onChange?: (value: string) => void;
+    height?: string | number;
+    width?: string | number;
+}
+declare function MonacoEditor({ value, language, readOnly, minimap, theme, fontSize, onChange, height, width }: MonacoEditorProps): React.JSX.Element;
+
+export { type EditorConfig, MonacoEditor, skipoDarkTheme, useMonaco };

package/packages/canvas-ui/dist/editor/index.js

@@ -0,0 +1,10 @@
+import {
+  MonacoEditor,
+  skipoDarkTheme,
+  useMonaco
+} from "../chunk-QTTWWBNN.js";
+export {
+  MonacoEditor,
+  skipoDarkTheme,
+  useMonaco
+};

package/packages/canvas-ui/dist/graph-2d/index.d.ts

@@ -0,0 +1,270 @@
+import { a as CameraState } from '../types-D3RRfQUo.js';
+export { B as BIOME_CONFIGS, C as COORD_SCALE, b as Canvas2DViewerProps, c as ConnectingWireState } from '../types-D3RRfQUo.js';
+import { UniversalSocketDefinition, SpaceNode, NodeConnection, MagneticGraphManager, Trace, Landmark, Node2DSpriteSetting, NodeSocketsResult, NodeSocketDescriptor, GraphWireParent, RecorderNode } from '@ultrst-armada/kloks/state-graph';
+import * as React from 'react';
+import React__default, { ReactNode, ErrorInfo } from 'react';
+
+interface SocketScreenPosition {
+    x: number;
+    y: number;
+    socket: UniversalSocketDefinition;
+    isOutput: boolean;
+    localOffset: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Calculates the local pixel offset of a socket handle relative to node card center,
+ * enforcing that handles always spawn just outside the node body and cannot be pushed
+ * into the node body area.
+ */
+declare function getSocketLocalOffset(node: SpaceNode, socketId: string, isOutput: boolean, index: number, totalSockets: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Computes exact viewport screen coordinates for a given socket on a node.
+ */
+declare function getSocketScreenPosition(node: SpaceNode, socketId: string | undefined, isOutput: boolean, worldToScreen: (x: number, z: number) => {
+    x: number;
+    y: number;
+}, camera: CameraState): {
+    x: number;
+    y: number;
+};
+
+declare function useCanvas2DCoordinates(): {
+    camera: CameraState;
+    setCamera: React.Dispatch<React.SetStateAction<CameraState>>;
+    setCameraPosition: (x: number, y: number, zoom?: number) => void;
+    containerSize: {
+        width: number;
+        height: number;
+    };
+    containerRef: React.RefObject<HTMLDivElement>;
+    worldToScreen: (wx: number, wz: number) => {
+        x: number;
+        y: number;
+    };
+    screenToWorld: (sx: number, sy: number) => [number, number, number];
+};
+
+interface UseViewer2DMagneticProps {
+    nodes: SpaceNode[];
+    connections: NodeConnection[];
+    camera: CameraState;
+    setCameraPosition: (x: number, y: number, zoom?: number) => void;
+    onMoveNode: (nodeId: string, position: [number, number, number]) => void;
+    onConnectRequest: (fromNodeId: string, toNodeId: string, fromPort?: string, toPort?: string) => void;
+}
+declare function useCanvas2DMagnetic({ nodes, connections, camera, setCameraPosition, onMoveNode, onConnectRequest, }: UseViewer2DMagneticProps): {
+    manager: MagneticGraphManager;
+    magneticEnabled: boolean;
+    setMagneticEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+    autoSolidifyEnabled: boolean;
+    setAutoSolidifyEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+    activeTraces: Trace[];
+    solidifyTrace: (trace: Trace) => void;
+    landmarks: Landmark[];
+    saveLandmark: (name: string) => Landmark;
+    jumpToLandmark: (landmark: Landmark) => void;
+};
+
+declare const NODE_CARD_WIDTH = 210;
+declare const SOCKET_ROW_HEIGHT = 24;
+interface Node2DBaseProps {
+    node: SpaceNode;
+    sprite: Node2DSpriteSetting;
+    sockets: NodeSocketsResult;
+    screenPos: {
+        x: number;
+        y: number;
+    };
+    zoom: number;
+    isSelected: boolean;
+    isHovered: boolean;
+    isPlaying?: boolean;
+    extraHeaderBadge?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    onNodeMouseDown?: (e: React__default.MouseEvent) => void;
+    onNodeDoubleClick?: (e: React__default.MouseEvent) => void;
+    onNodeMouseEnter?: () => void;
+    onNodeMouseLeave?: () => void;
+    onSocketHover?: (info: {
+        nodeId: string;
+        socket: NodeSocketDescriptor;
+        screenX: number;
+        screenY: number;
+    } | null) => void;
+    onSocketMouseDown?: (nodeId: string, socket: NodeSocketDescriptor, e: React__default.MouseEvent) => void;
+    onSocketMouseUp?: (nodeId: string, socket: NodeSocketDescriptor, e: React__default.MouseEvent) => void;
+}
+declare const renderSpriteIcon: (iconName: string, color: string, className?: string) => React__default.JSX.Element;
+/**
+ * ══════════════════════════════════════════════════════════════════════════════════════════
+ * 2. Node2DBase: Master Presentation Frame for 2D Node Cards
+ * ══════════════════════════════════════════════════════════════════════════════════════════
+ */
+declare const Node2DBase: React__default.FC<Node2DBaseProps>;
+
+interface NodeRenderer2DProps {
+    node: SpaceNode;
+    sprite: Node2DSpriteSetting;
+    sockets: NodeSocketsResult;
+    screenPos: {
+        x: number;
+        y: number;
+    };
+    zoom: number;
+    isSelected: boolean;
+    isHovered: boolean;
+    isPlaying?: boolean;
+    onNodeMouseDown?: (e: React__default.MouseEvent) => void;
+    onNodeDoubleClick?: (e: React__default.MouseEvent) => void;
+    onNodeMouseEnter?: () => void;
+    onNodeMouseLeave?: () => void;
+    onSocketHover?: (info: {
+        nodeId: string;
+        socket: NodeSocketDescriptor;
+        screenX: number;
+        screenY: number;
+    } | null) => void;
+    onSocketMouseDown?: (nodeId: string, socket: NodeSocketDescriptor, e: React__default.MouseEvent) => void;
+    onSocketMouseUp?: (nodeId: string, socket: NodeSocketDescriptor, e: React__default.MouseEvent) => void;
+}
+declare const TriggerNode2D: React__default.FC<NodeRenderer2DProps>;
+declare const ContainerNode2D: React__default.FC<NodeRenderer2DProps>;
+declare const ModuleNode2D: React__default.FC<NodeRenderer2DProps>;
+declare const EffectNode2D: React__default.FC<NodeRenderer2DProps>;
+declare const NodeRenderer2D: React__default.FC<NodeRenderer2DProps>;
+
+interface Socket2DProps {
+    nodeId: string;
+    socket: NodeSocketDescriptor;
+    direction?: 'in' | 'out';
+    isConnected?: boolean;
+    onSocketHover?: (info: {
+        nodeId: string;
+        socket: NodeSocketDescriptor;
+        screenX: number;
+        screenY: number;
+    } | null) => void;
+    onSocketMouseDown?: (nodeId: string, socket: NodeSocketDescriptor, e: React__default.MouseEvent) => void;
+    onSocketMouseUp?: (nodeId: string, socket: NodeSocketDescriptor, e: React__default.MouseEvent) => void;
+    onHover?: (info: {
+        nodeId: string;
+        socket: NodeSocketDescriptor;
+        screenX: number;
+        screenY: number;
+    } | null) => void;
+    onMouseDown?: (nodeId: string, socket: NodeSocketDescriptor, e: React__default.MouseEvent) => void;
+    onMouseUp?: (nodeId: string, socket: NodeSocketDescriptor, e: React__default.MouseEvent) => void;
+}
+/**
+ * ══════════════════════════════════════════════════════════════════════════════════════════
+ * 2. Socket2D: Interactive 2D Socket Component
+ * ══════════════════════════════════════════════════════════════════════════════════════════
+ */
+declare const Socket2D: React__default.FC<Socket2DProps>;
+
+interface Wire2DProps {
+    wire: GraphWireParent;
+    p1: {
+        x: number;
+        y: number;
+    };
+    p2: {
+        x: number;
+        y: number;
+    };
+    isSelected?: boolean;
+    isEnveloped?: boolean;
+    isPlaying?: boolean;
+    bpm?: number;
+    pulseAnimTick?: number;
+    zoom?: number;
+    onSelect?: (wireId: string) => void;
+}
+/**
+ * ══════════════════════════════════════════════════════════════════════════════════════════
+ * 2. Wire2D: High-Performance 2D SVG Conduit Wire Component
+ * ══════════════════════════════════════════════════════════════════════════════════════════
+ */
+declare const Wire2D: React__default.FC<Wire2DProps>;
+
+interface CanvasBackground2DProps {
+    currentBiome?: string;
+    camera: CameraState;
+    containerSize: {
+        width: number;
+        height: number;
+    };
+    nodes: SpaceNode[];
+    worldToScreen: (x: number, z: number) => {
+        x: number;
+        y: number;
+    };
+}
+declare const CanvasBackground2D: React__default.FC<CanvasBackground2DProps>;
+
+interface Props {
+    children?: ReactNode;
+}
+interface State {
+    hasError: boolean;
+    errorMessage: string;
+}
+declare const CanvasErrorBoundary_base: {
+    new (props: Props): any;
+};
+declare class CanvasErrorBoundary extends CanvasErrorBoundary_base {
+    props: Props;
+    state: State;
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): ReactNode;
+}
+
+interface MagneticTraces2DProps {
+    nodes: SpaceNode[];
+    connections?: NodeConnection[];
+    traces: Trace[];
+    worldToScreen: (x: number, z: number) => {
+        x: number;
+        y: number;
+    };
+    camera: CameraState;
+    onSolidify: (trace: Trace) => void;
+}
+declare const MagneticTraces2D: React__default.FC<MagneticTraces2DProps>;
+
+interface RotaryKnobProps {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    defaultValue?: number;
+    onChange: (value: number) => void;
+    size?: number;
+    color?: string;
+    trackColor?: string;
+    label?: string;
+    unit?: string;
+    formatValue?: (val: number) => string;
+    title?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare function RotaryKnob({ value, min, max, step, defaultValue, onChange, size, color, trackColor, label, unit, formatValue, title, disabled, className, }: RotaryKnobProps): React__default.JSX.Element;
+
+interface RecorderWaveformDisplayProps {
+    node: RecorderNode;
+    connections?: NodeConnection[];
+    allNodes?: SpaceNode[];
+    width?: number;
+}
+declare const RecorderWaveformDisplay: React__default.FC<RecorderWaveformDisplayProps>;
+
+export { CameraState, CanvasBackground2D, CanvasErrorBoundary, ContainerNode2D, EffectNode2D, MagneticTraces2D, ModuleNode2D, NODE_CARD_WIDTH, Node2DBase, type Node2DBaseProps, NodeRenderer2D, type NodeRenderer2DProps, RecorderWaveformDisplay, type RecorderWaveformDisplayProps, RotaryKnob, type RotaryKnobProps, SOCKET_ROW_HEIGHT, Socket2D, type Socket2DProps, type SocketScreenPosition, TriggerNode2D, Wire2D, type Wire2DProps, getSocketLocalOffset, getSocketScreenPosition, renderSpriteIcon, useCanvas2DCoordinates, useCanvas2DMagnetic };

package/packages/canvas-ui/dist/graph-2d/index.js

@@ -0,0 +1,50 @@
+import {
+  BIOME_CONFIGS,
+  COORD_SCALE,
+  CanvasBackground2D,
+  CanvasErrorBoundary,
+  ContainerNode2D,
+  EffectNode2D,
+  MagneticTraces2D,
+  ModuleNode2D,
+  NodeRenderer2D,
+  RotaryKnob,
+  TriggerNode2D,
+  Wire2D,
+  useCanvas2DCoordinates,
+  useCanvas2DMagnetic
+} from "../chunk-QWQ4PCXQ.js";
+import {
+  NODE_CARD_WIDTH,
+  Node2DBase,
+  RecorderWaveformDisplay,
+  SOCKET_ROW_HEIGHT,
+  Socket2D,
+  getSocketLocalOffset,
+  getSocketScreenPosition,
+  renderSpriteIcon
+} from "../chunk-2GLR35UM.js";
+export {
+  BIOME_CONFIGS,
+  COORD_SCALE,
+  CanvasBackground2D,
+  CanvasErrorBoundary,
+  ContainerNode2D,
+  EffectNode2D,
+  MagneticTraces2D,
+  ModuleNode2D,
+  NODE_CARD_WIDTH,
+  Node2DBase,
+  NodeRenderer2D,
+  RecorderWaveformDisplay,
+  RotaryKnob,
+  SOCKET_ROW_HEIGHT,
+  Socket2D,
+  TriggerNode2D,
+  Wire2D,
+  getSocketLocalOffset,
+  getSocketScreenPosition,
+  renderSpriteIcon,
+  useCanvas2DCoordinates,
+  useCanvas2DMagnetic
+};

package/packages/canvas-ui/dist/index.d.ts

@@ -0,0 +1,176 @@
+export { CanvasItem, CanvasViewport, InfiniteCanvas, MiniMap, Transform, useCanvas } from './canvas/index.js';
+export { DockBar, DockItem, DockItemConfig, DockPosition, useDock } from './dock/index.js';
+export { Tile, TileAction, TileConfig, TileCreateButton, TileGrid, useTileMenu } from './tile-menu/index.js';
+export { EditorConfig, MonacoEditor, skipoDarkTheme, useMonaco } from './editor/index.js';
+import * as React from 'react';
+import React__default from 'react';
+import { NodeDefinition, GraphSettings, BaseNode, SolidConnection, Trace, ViewLink, BaseViewWindow, Socket, GraphNode } from '@ultrst-armada/kloks/state-graph';
+export { B as BIOME_CONFIGS, C as COORD_SCALE, a as CameraState, b as Canvas2DViewerProps, c as ConnectingWireState } from './types-D3RRfQUo.js';
+export { CanvasBackground2D, CanvasErrorBoundary, ContainerNode2D, EffectNode2D, MagneticTraces2D, ModuleNode2D, NODE_CARD_WIDTH, Node2DBase, Node2DBaseProps, NodeRenderer2D, NodeRenderer2DProps, RecorderWaveformDisplay, RecorderWaveformDisplayProps, RotaryKnob, RotaryKnobProps, SOCKET_ROW_HEIGHT, Socket2D, Socket2DProps, SocketScreenPosition, TriggerNode2D, Wire2D, Wire2DProps, getSocketLocalOffset, getSocketScreenPosition, renderSpriteIcon, useCanvas2DCoordinates, useCanvas2DMagnetic } from './graph-2d/index.js';
+export { PredictiveGhostNodeCard, PredictiveGhostNodeCardProps, PredictiveHudToolbar, PredictiveLayer2D, usePredictiveGraph2D } from './predictive/index.js';
+
+interface MidpointWidgetsProps {
+    x: number;
+    y: number;
+    locked: boolean;
+    onDelete?: () => void;
+    onInspect?: () => void;
+    onToggleLock?: () => void;
+}
+declare function MidpointWidgets({ x, y, locked, onDelete, onInspect, onToggleLock }: MidpointWidgetsProps): React.JSX.Element;
+
+interface SolidifyWidgetProps {
+    x: number;
+    y: number;
+    onSolidify: () => void;
+}
+declare function SolidifyWidget({ x, y, onSolidify }: SolidifyWidgetProps): React.JSX.Element;
+
+interface CompatibleNodePickerProps {
+    x: number;
+    y: number;
+    sourceHandle: {
+        nodeId: string;
+        socketId: string;
+        direction: 'input' | 'output';
+        dataType?: string;
+        label?: string;
+    };
+    availableNodeTypes?: NodeDefinition[];
+    onSelect: (selectedTypes: string[]) => void;
+    onClose: () => void;
+}
+declare function CompatibleNodePicker({ x, y, sourceHandle, availableNodeTypes, onSelect, onClose }: CompatibleNodePickerProps): React.JSX.Element;
+
+interface NodeSearchPaletteProps {
+    x: number;
+    y: number;
+    availableNodeTypes?: NodeDefinition[];
+    onSpawnNode: (type: string) => void;
+    onClose: () => void;
+}
+declare function NodeSearchPalette({ x, y, availableNodeTypes, onSpawnNode, onClose }: NodeSearchPaletteProps): React.JSX.Element;
+
+interface CanvasContextMenuProps {
+    x: number;
+    y: number;
+    availableNodeTypes?: NodeDefinition[];
+    hasSelection: boolean;
+    onSpawnNode: (type: string) => void;
+    onOpenSpawnMenu?: () => void;
+    onSelectAll: () => void;
+    onDeleteSelected: () => void;
+    onClearSelection: () => void;
+    onClose: () => void;
+}
+declare function CanvasContextMenu({ x, y, availableNodeTypes, hasSelection, onSpawnNode, onOpenSpawnMenu, onSelectAll, onDeleteSelected, onClearSelection, onClose }: CanvasContextMenuProps): React__default.JSX.Element;
+
+interface GraphToolbarProps {
+    settings: GraphSettings;
+    onUpdateSettings: (updates: Partial<GraphSettings>) => void;
+    onRefreshTraces: () => void;
+    onLockAllConnections: () => void;
+    onSaveView?: () => void;
+    onLoadView?: () => void;
+    className?: string;
+}
+declare function GraphToolbar({ settings, onUpdateSettings, onRefreshTraces, onLockAllConnections, onSaveView, onLoadView, className }: GraphToolbarProps): React__default.JSX.Element;
+
+interface ReactFlowNodeData {
+    nodeId: string;
+    label: string;
+    type: string;
+    handles: {
+        id: string;
+        direction: 'INPUT' | 'OUTPUT';
+        category: 'DATA' | 'VIEW';
+        dataType: string;
+        offset: {
+            x: number;
+            y: number;
+        };
+    }[];
+    positionLocked: boolean;
+    customData?: Record<string, unknown>;
+}
+interface ReactFlowEdgeData {
+    connectionId: string;
+    sourceNodeId: string;
+    sourceHandleId: string;
+    targetNodeId: string;
+    targetHandleId: string;
+    wireType: string;
+    locked: boolean;
+    isTrace?: boolean;
+    isViewLink?: boolean;
+}
+declare class ReactFlowAdapter {
+    static toReactFlowNodes(nodes: BaseNode[]): Array<{
+        id: string;
+        type: string;
+        position: {
+            x: number;
+            y: number;
+        };
+        data: ReactFlowNodeData;
+    }>;
+    static toReactFlowEdges(connections: SolidConnection[], traces?: Trace[], viewLinks?: ViewLink[]): Array<{
+        id: string;
+        source: string;
+        sourceHandle: string;
+        target: string;
+        targetHandle: string;
+        type: string;
+        animated?: boolean;
+        data: ReactFlowEdgeData;
+    }>;
+    static toReactFlowViewWindows(windows: BaseViewWindow[]): Array<{
+        id: string;
+        type: string;
+        position: {
+            x: number;
+            y: number;
+        };
+        data: {
+            windowId: string;
+            viewType: string;
+            sourceNodeId: string;
+            dynamicState: string;
+            pinnedLive: boolean;
+            size: {
+                width: number;
+                height: number;
+            };
+        };
+    }>;
+}
+
+interface Viewer2DNodesProps {
+    key?: React__default.Key;
+    node: GraphNode;
+    selected?: boolean;
+    onMouseDown?: (e: React__default.MouseEvent, nodeId: string) => void;
+    onDoubleClick?: (nodeId: string) => void;
+    onSocketMouseDown?: (e: React__default.MouseEvent, nodeId: string, socketId: string, type: 'input' | 'output') => void;
+    onSocketNudgeChange?: (nodeId: string, socketId: string, nudge: {
+        x: number;
+        y: number;
+    }) => void;
+}
+declare function Viewer2DNodes({ node, selected, onMouseDown, onDoubleClick, onSocketMouseDown, onSocketNudgeChange }: Viewer2DNodesProps): React__default.JSX.Element;
+interface MovableSocketHandleProps {
+    key?: React__default.Key;
+    socket: Socket;
+    nodeId: string;
+    cardWidth: number;
+    isOutput: boolean;
+    baseY: number;
+    onSocketMouseDown?: (e: React__default.MouseEvent, nodeId: string, socketId: string, type: 'input' | 'output') => void;
+    onSocketNudgeChange?: (nodeId: string, socketId: string, nudge: {
+        x: number;
+        y: number;
+    }) => void;
+}
+declare function MovableSocketHandle({ socket, nodeId, cardWidth, isOutput, baseY, onSocketMouseDown, onSocketNudgeChange }: MovableSocketHandleProps): React__default.JSX.Element;
+
+export { CanvasContextMenu, type CanvasContextMenuProps, CompatibleNodePicker, type CompatibleNodePickerProps, GraphToolbar, type GraphToolbarProps, MidpointWidgets, type MidpointWidgetsProps, MovableSocketHandle, NodeSearchPalette, type NodeSearchPaletteProps, ReactFlowAdapter, type ReactFlowEdgeData, type ReactFlowNodeData, SolidifyWidget, type SolidifyWidgetProps, Viewer2DNodes, type Viewer2DNodesProps };