@ultrst-armada/floks 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,75 @@
+import * as _kloks_state_graph from '@ultrst-armada/kloks/state-graph';
+import { PredictiveGhostNode, SpaceNode, PredictiveTrace, NodeConnection } from '@ultrst-armada/kloks/state-graph';
+import React__default from 'react';
+import { a as CameraState } from '../types-D3RRfQUo.js';
+
+interface PredictiveGhostNodeCardProps {
+    ghost: PredictiveGhostNode;
+    screenPos: {
+        x: number;
+        y: number;
+    };
+    zoom: number;
+    onSolidify: (ghost: PredictiveGhostNode) => void;
+    isHovered?: boolean;
+    onHoverChange?: (hovered: boolean) => void;
+}
+
+declare const PredictiveGhostNodeCard: React__default.FC<PredictiveGhostNodeCardProps>;
+
+interface PredictiveHudToolbarProps {
+    isActive: boolean;
+    scenarioIndex: number;
+    totalGhosts: number;
+    selectedCount: number;
+    onToggleActive: () => void;
+    onNextScenario: () => void;
+    onPrevScenario: () => void;
+    onSolidifyAll: () => void;
+    onClose: () => void;
+}
+declare const PredictiveHudToolbar: React__default.FC<PredictiveHudToolbarProps>;
+
+interface PredictiveLayer2DProps {
+    nodes: SpaceNode[];
+    ghostNodes: PredictiveGhostNode[];
+    traces: PredictiveTrace[];
+    selectedNodesWithGhosts: Map<string, PredictiveGhostNode[]>;
+    worldToScreen: (x: number, z: number) => {
+        x: number;
+        y: number;
+    };
+    camera: CameraState;
+    onSolidifyGhost: (ghost: PredictiveGhostNode) => void;
+    onSolidifyAllForNode: (parentNodeId: string) => void;
+    isActive?: boolean;
+    targetNodes?: SpaceNode[];
+    onToggleActive?: () => void;
+}
+declare const PredictiveLayer2D: React__default.FC<PredictiveLayer2DProps>;
+
+interface UsePredictiveGraph2DProps {
+    nodes: SpaceNode[];
+    connections: NodeConnection[];
+    selectedNodeId: string | null;
+    selectedNodeIds?: string[];
+    onSolidifyPredictiveNodes?: (ghosts: PredictiveGhostNode[]) => void;
+}
+type UseViewer2DPredictiveProps = UsePredictiveGraph2DProps;
+declare function usePredictiveGraph2D({ nodes, connections, selectedNodeId, selectedNodeIds, onSolidifyPredictiveNodes, }: UsePredictiveGraph2DProps): {
+    isActive: boolean;
+    scenarioIndex: number;
+    targetNodes: SpaceNode[];
+    ghostNodes: PredictiveGhostNode[];
+    traces: _kloks_state_graph.PredictiveTrace[];
+    selectedNodesWithGhosts: Map<string, PredictiveGhostNode[]>;
+    toggleActive: () => void;
+    nextScenario: () => void;
+    prevScenario: () => void;
+    solidifyGhost: (ghost: PredictiveGhostNode) => void;
+    solidifyAllForNode: (parentNodeId: string) => void;
+    solidifyAll: () => void;
+    close: () => void;
+};
+
+export { PredictiveGhostNodeCard, type PredictiveGhostNodeCardProps, PredictiveHudToolbar, PredictiveLayer2D, type PredictiveLayer2DProps, type UsePredictiveGraph2DProps, type UseViewer2DPredictiveProps, usePredictiveGraph2D };

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

@@ -0,0 +1,13 @@
+import {
+  PredictiveGhostNodeCard,
+  PredictiveHudToolbar,
+  PredictiveLayer2D,
+  usePredictiveGraph2D
+} from "../chunk-OOTTFWXA.js";
+import "../chunk-U2SC3RMJ.js";
+export {
+  PredictiveGhostNodeCard,
+  PredictiveHudToolbar,
+  PredictiveLayer2D,
+  usePredictiveGraph2D
+};

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import React__default from 'react';
+
+interface TileConfig {
+    id: string;
+    title: string;
+    subtitle?: string;
+    icon?: string;
+    badges?: string[];
+    data?: Record<string, unknown>;
+}
+interface TileAction {
+    id: string;
+    label: string;
+    icon?: string;
+    onClick: (tileId: string) => void;
+}
+
+interface TileProps {
+    tile: TileConfig;
+    onClick?: (id: string) => void;
+    onContextMenu?: (e: React__default.MouseEvent, id: string) => void;
+    dragHandleProps?: Record<string, any>;
+    isDragging?: boolean;
+}
+declare function Tile({ tile, onClick, onContextMenu, dragHandleProps, isDragging }: TileProps): React__default.JSX.Element;
+
+declare function TileGrid({ tiles, onReorder: _onReorder, onTileClick }: {
+    tiles: TileConfig[];
+    onReorder?: (tiles: TileConfig[]) => void;
+    onTileClick?: (id: string) => void;
+}): React.JSX.Element;
+
+declare function TileCreateButton({ onClick }: {
+    onClick: () => void;
+}): React.JSX.Element;
+
+declare function useTileMenu(initialTiles?: TileConfig[]): {
+    tiles: TileConfig[];
+    addTile: (tile: TileConfig) => void;
+    removeTile: (id: string) => void;
+    reorderTiles: (newOrder: TileConfig[]) => void;
+};
+
+export { Tile, type TileAction, type TileConfig, TileCreateButton, TileGrid, useTileMenu };

package/packages/canvas-ui/dist/tile-menu/index.js

@@ -0,0 +1,12 @@
+import {
+  Tile,
+  TileCreateButton,
+  TileGrid,
+  useTileMenu
+} from "../chunk-SA3JADUG.js";
+export {
+  Tile,
+  TileCreateButton,
+  TileGrid,
+  useTileMenu
+};

package/packages/canvas-ui/dist/types-D3RRfQUo.d.ts

@@ -0,0 +1,46 @@
+import { SpaceNode, NodeConnection } from '@ultrst-armada/kloks/state-graph';
+
+interface CameraState {
+    x: number;
+    y: number;
+    zoom: number;
+}
+interface ConnectingWireState {
+    sourceNodeId: string;
+    direction: 'out' | 'in';
+    portId: string;
+    socketIndex?: number;
+    signalType: string;
+    startX: number;
+    startY: number;
+    currentX: number;
+    currentY: number;
+}
+interface Canvas2DViewerProps {
+    nodes: SpaceNode[];
+    connections: NodeConnection[];
+    selectedNodeId: string | null;
+    selectedNodeIds?: string[];
+    selectedConnectionId?: string | null;
+    currentBiome?: string;
+    isPlaying?: boolean;
+    bpm?: number;
+    onSelectNode: (nodeId: string | null, skipFocus?: boolean) => void;
+    onSelectConnection?: (connId: string | null) => void;
+    onMoveNode: (nodeId: string, position: [number, number, number]) => void;
+    onConnectRequest: (fromNodeId: string, toNodeId: string, fromPort?: string, toPort?: string, fromSocketIndex?: number, toSocketIndex?: number) => void;
+    onInspectNode?: ((node: SpaceNode) => void) | ((nodeId: string) => void);
+    onManualTriggerNode?: ((node: SpaceNode) => void) | ((nodeId: string) => void);
+    onMapRightClick?: (screenX: number, screenY: number, worldPosition: [number, number, number], targetNodeId?: string | null, targetSocket?: any) => void;
+    onWireReleaseEmptySpace?: (screenX: number, screenY: number, worldPos: [number, number, number], pendingWire: any) => void;
+    onSolidifyPredictiveNodes?: (ghosts: any[]) => void;
+    [key: string]: any;
+}
+declare const COORD_SCALE = 40;
+declare const BIOME_CONFIGS: Record<string, {
+    bg: string;
+    gridColor: string;
+    aoeColor: string;
+}>;
+
+export { BIOME_CONFIGS as B, COORD_SCALE as C, type CameraState as a, type Canvas2DViewerProps as b, type ConnectingWireState as c };

package/packages/canvas-ui/floks.manifest.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://skipo.dev/schemas/floks-manifest.v1.json",
+  "package": "@floks/canvas-ui",
+  "version": "1.0.0",
+  "components": [
+    {
+      "id": "InfiniteCanvas",
+      "name": "InfiniteCanvas",
+      "export": "InfiniteCanvas",
+      "subpath": "canvas",
+      "targetTypes": ["App.main-content"]
+    },
+    {
+      "id": "DockBar",
+      "name": "DockBar",
+      "export": "DockBar",
+      "subpath": "dock",
+      "targetTypes": ["App.footer", "App.main-content"]
+    },
+    {
+      "id": "TileGrid",
+      "name": "TileGrid",
+      "export": "TileGrid",
+      "subpath": "tile-menu",
+      "targetTypes": ["App.main-content"]
+    },
+    {
+      "id": "MonacoEditor",
+      "name": "MonacoEditor",
+      "export": "MonacoEditor",
+      "subpath": "editor",
+      "targetTypes": ["App.main-content"]
+    }
+  ]
+}

package/packages/canvas-ui/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@floks/canvas-ui",
+  "version": "1.0.0",
+  "description": "Floks Canvas UI — Reusable React Visual Components for Infinite Canvas, Dock, Tile Menus, Code Editor, and Node Cards",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "skipoManifest": "./floks.manifest.json",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./canvas": {
+      "import": "./dist/canvas/index.js",
+      "types": "./dist/canvas/index.d.ts",
+      "default": "./dist/canvas/index.js"
+    },
+    "./dock": {
+      "import": "./dist/dock/index.js",
+      "types": "./dist/dock/index.d.ts",
+      "default": "./dist/dock/index.js"
+    },
+    "./tile-menu": {
+      "import": "./dist/tile-menu/index.js",
+      "types": "./dist/tile-menu/index.d.ts",
+      "default": "./dist/tile-menu/index.js"
+    },
+    "./editor": {
+      "import": "./dist/editor/index.js",
+      "types": "./dist/editor/index.d.ts",
+      "default": "./dist/editor/index.js"
+    },
+    "./graph-2d": {
+      "import": "./dist/graph-2d/index.js",
+      "types": "./dist/graph-2d/index.d.ts",
+      "default": "./dist/graph-2d/index.js"
+    },
+    "./predictive": {
+      "import": "./dist/predictive/index.js",
+      "types": "./dist/predictive/index.d.ts",
+      "default": "./dist/predictive/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/canvas/index.ts src/dock/index.ts src/tile-menu/index.ts src/editor/index.ts src/graph-2d/index.ts src/predictive/index.ts --format esm --dts --clean --external react --external react-dom --external lucide-react --external @floks/ui --external @kloks/state-graph --external @kloks/audio-midi --external monaco-editor --external @dnd-kit/core --external @dnd-kit/sortable --external @dnd-kit/utilities",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@floks/ui": "workspace:*"
+  },
+  "peerDependencies": {
+    "@dnd-kit/core": "^6.0.0",
+    "@dnd-kit/sortable": "^8.0.0 || ^9.0.0",
+    "@dnd-kit/utilities": "^3.0.0",
+    "monaco-editor": "^0.50.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
+    "@dnd-kit/utilities": {
+      "optional": true
+    },
+    "monaco-editor": {
+      "optional": true
+    }
+  }
+}

package/packages/ui/dist/BottomStrip-DYhAUQR4.d.ts

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+interface BottomStripProps extends React__default.HTMLAttributes<HTMLElement> {
+    leftSlot?: React__default.ReactNode;
+    centerSlot?: React__default.ReactNode;
+    rightSlot?: React__default.ReactNode;
+    hideDefaultLeft?: boolean;
+    hideDefaultRight?: boolean;
+}
+declare const BottomStrip: React__default.ForwardRefExoticComponent<BottomStripProps & React__default.RefAttributes<HTMLElement>>;
+
+export { BottomStrip as B, type BottomStripProps as a };

package/packages/ui/dist/chunk-62ITRDJX.js

@@ -0,0 +1,141 @@
+// src/components/bottom-strip/BottomStripContext.tsx
+import { createContext, useContext, useState, useCallback, useMemo, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+var BottomStripContext = createContext(null);
+function useAutoSaveController(initialEnabled) {
+  const [enabled, setEnabled] = useState(initialEnabled);
+  const [status, setStatus] = useState("idle");
+  const toggle = useCallback(() => setEnabled((prev) => !prev), []);
+  return { enabled, status, toggle, setStatus, setEnabled };
+}
+function useApiActivityController() {
+  const [activeCount, setActiveCount] = useState(0);
+  const [lastEndpoint, setLastEndpoint] = useState(void 0);
+  const [lastMethod, setLastMethod] = useState(void 0);
+  const recordRequestStart = useCallback((endpoint, method = "GET") => {
+    const id = `req_${Date.now()}_${Math.random().toString(36).substring(2, 6)}`;
+    setActiveCount((prev) => prev + 1);
+    setLastEndpoint(endpoint);
+    setLastMethod(method);
+    return id;
+  }, []);
+  const recordRequestEnd = useCallback((_requestId) => {
+    setActiveCount((prev) => Math.max(0, prev - 1));
+  }, []);
+  return { activeCount, lastEndpoint, lastMethod, recordRequestStart, recordRequestEnd };
+}
+function useSystemMessageController() {
+  const [systemMessages, setSystemMessages] = useState([]);
+  const clearSystemMessage = useCallback((id) => {
+    setSystemMessages((prev) => prev.filter((m) => m.id !== id));
+  }, []);
+  const showSystemMessage = useCallback((message, type = "info", durationMs = 5e3) => {
+    const id = `msg_${Date.now()}_${Math.random().toString(36).substring(2, 6)}`;
+    const newMsg = { id, type, message, timestamp: Date.now() };
+    setSystemMessages((prev) => [...prev.slice(-4), newMsg]);
+    if (durationMs > 0) {
+      setTimeout(() => clearSystemMessage(id), durationMs);
+    }
+  }, [clearSystemMessage]);
+  return { systemMessages, showSystemMessage, clearSystemMessage };
+}
+function BottomStripProvider({
+  children,
+  initialAutoSave = true
+}) {
+  const [inspectionText, setInspectionTextState] = useState(null);
+  const [inspectionDescription, setInspectionDescription] = useState(null);
+  const [isDKeyPressed, setIsDKeyPressed] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const isEditable = (el) => {
+      const tag = el?.tagName?.toLowerCase();
+      return tag === "input" || tag === "textarea" || el?.isContentEditable;
+    };
+    const handleKeyDown = (e) => {
+      if ((e.key === "d" || e.key === "D") && !isEditable(e.target)) {
+        setIsDKeyPressed(true);
+      }
+    };
+    const handleKeyUp = (e) => {
+      if (e.key === "d" || e.key === "D") {
+        setIsDKeyPressed(false);
+      }
+    };
+    const handleBlur = () => setIsDKeyPressed(false);
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", handleBlur);
+    };
+  }, []);
+  const setInspectionText = useCallback(
+    (text, description) => {
+      if (text && typeof text === "object") {
+        setInspectionTextState(text.label || null);
+        setInspectionDescription(text.description || null);
+      } else {
+        setInspectionTextState(typeof text === "string" ? text : null);
+        setInspectionDescription(description || null);
+      }
+    },
+    []
+  );
+  const autoSave = useAutoSaveController(initialAutoSave);
+  const apiActivity = useApiActivityController();
+  const { systemMessages, showSystemMessage, clearSystemMessage } = useSystemMessageController();
+  const value = useMemo(() => ({
+    inspectionText,
+    inspectionDescription,
+    isDKeyPressed,
+    setInspectionText,
+    autoSave,
+    apiActivity,
+    systemMessages,
+    showSystemMessage,
+    clearSystemMessage
+  }), [inspectionText, inspectionDescription, isDKeyPressed, setInspectionText, autoSave, apiActivity, systemMessages, showSystemMessage, clearSystemMessage]);
+  return /* @__PURE__ */ jsx(BottomStripContext.Provider, { value, children });
+}
+function useBottomStrip() {
+  const ctx = useContext(BottomStripContext);
+  if (!ctx) {
+    return {
+      inspectionText: null,
+      inspectionDescription: null,
+      isDKeyPressed: false,
+      setInspectionText: () => {
+      },
+      autoSave: {
+        enabled: true,
+        status: "idle",
+        toggle: () => {
+        },
+        setStatus: () => {
+        },
+        setEnabled: () => {
+        }
+      },
+      apiActivity: {
+        activeCount: 0,
+        recordRequestStart: () => "noop",
+        recordRequestEnd: () => {
+        }
+      },
+      systemMessages: [],
+      showSystemMessage: () => {
+      },
+      clearSystemMessage: () => {
+      }
+    };
+  }
+  return ctx;
+}
+
+export {
+  BottomStripProvider,
+  useBottomStrip
+};

package/packages/ui/dist/chunk-A2CDQISJ.js

@@ -0,0 +1,32 @@
+// src/components/base/BaseButton.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BaseButton = forwardRef(({
+  variant = "secondary",
+  size = "md",
+  loading,
+  icon,
+  children,
+  className = "",
+  disabled,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      className: `skipo-btn skipo-btn--${variant} skipo-btn--${size} ${className}`,
+      disabled: disabled || loading,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx("span", { className: "skipo-spinner" }) : icon,
+        children
+      ]
+    }
+  );
+});
+BaseButton.displayName = "BaseButton";
+
+export {
+  BaseButton
+};