@ultrst-armada/floks 0.0.0-stage → 1.0.0

package/packages/canvas-ui/dist/chunk-34YRDZPJ.js

@@ -0,0 +1,189 @@
+// src/canvas/CanvasViewport.tsx
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function CanvasViewport({
+  children,
+  transform,
+  onChange,
+  minZoom = 0.1,
+  maxZoom = 5
+}) {
+  const containerRef = useRef(null);
+  const [isPanning, setIsPanning] = useState(false);
+  const handleWheel = (e) => {
+    e.preventDefault();
+    if (!containerRef.current) return;
+    const zoomDelta = e.deltaY * -1e-3;
+    let newScale = transform.scale + zoomDelta;
+    newScale = Math.max(minZoom, Math.min(maxZoom, newScale));
+    const rect = containerRef.current.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const graphX = (mouseX - transform.x) / transform.scale;
+    const graphY = (mouseY - transform.y) / transform.scale;
+    const x = mouseX - graphX * newScale;
+    const y = mouseY - graphY * newScale;
+    onChange({ x, y, scale: newScale });
+  };
+  const handleMouseDown = (e) => {
+    if (e.button === 1 || e.button === 0 && (e.altKey || e.metaKey)) {
+      setIsPanning(true);
+      e.preventDefault();
+    }
+  };
+  const handleMouseMove = (e) => {
+    if (isPanning) {
+      onChange({
+        ...transform,
+        x: transform.x + e.movementX,
+        y: transform.y + e.movementY
+      });
+    }
+  };
+  const handleMouseUp = () => {
+    setIsPanning(false);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      style: { width: "100%", height: "100%", overflow: "hidden", position: "relative" },
+      onWheel: handleWheel,
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseUp,
+      children: /* @__PURE__ */ jsx("div", { style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        transformOrigin: "0 0",
+        transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
+        willChange: "transform"
+      }, children })
+    }
+  );
+}
+
+// src/canvas/MiniMap.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function MiniMap({ items, transform, width = 150, height = 100 }) {
+  let minX = 0, minY = 0, maxX = 1e3, maxY = 1e3;
+  if (items.length > 0) {
+    minX = Math.min(...items.map((i) => i.x));
+    minY = Math.min(...items.map((i) => i.y));
+    maxX = Math.max(...items.map((i) => i.x + (i.width || 100)));
+    maxY = Math.max(...items.map((i) => i.y + (i.height || 100)));
+  }
+  minX -= 200;
+  minY -= 200;
+  maxX += 200;
+  maxY += 200;
+  const contentWidth = maxX - minX;
+  const contentHeight = maxY - minY;
+  const scaleX = width / contentWidth;
+  const scaleY = height / contentHeight;
+  const scale = Math.min(scaleX, scaleY);
+  const offsetX = (width - contentWidth * scale) / 2 - minX * scale;
+  const offsetY = (height - contentHeight * scale) / 2 - minY * scale;
+  return /* @__PURE__ */ jsxs("div", { style: {
+    width,
+    height,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    border: "1px solid rgba(255,255,255,0.2)",
+    borderRadius: "8px",
+    position: "relative",
+    overflow: "hidden"
+  }, children: [
+    items.map((item) => /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: item.x * scale + offsetX,
+          top: item.y * scale + offsetY,
+          width: (item.width || 100) * scale,
+          height: (item.height || 100) * scale,
+          backgroundColor: "rgba(97, 175, 239, 0.5)",
+          borderRadius: "2px"
+        }
+      },
+      item.id
+    )),
+    /* @__PURE__ */ jsx2("div", { style: {
+      position: "absolute",
+      left: -transform.x / transform.scale * scale + offsetX,
+      top: -transform.y / transform.scale * scale + offsetY,
+      width: 1e3 / transform.scale * scale,
+      // Approximation of viewport width
+      height: 800 / transform.scale * scale,
+      border: "1px solid #d4af37",
+      backgroundColor: "rgba(212, 175, 55, 0.1)"
+    } })
+  ] });
+}
+
+// src/canvas/InfiniteCanvas.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function InfiniteCanvas({
+  items,
+  transform,
+  onTransformChange,
+  showGrid = true,
+  showMiniMap = true,
+  gridSize = 40
+}) {
+  const gridBackground = showGrid ? {
+    backgroundImage: `
+      linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px)
+    `,
+    backgroundSize: `${gridSize * transform.scale}px ${gridSize * transform.scale}px`,
+    backgroundPosition: `${transform.x}px ${transform.y}px`
+  } : {};
+  return /* @__PURE__ */ jsxs2("div", { style: { width: "100%", height: "100%", position: "relative", backgroundColor: "#16161a", ...gridBackground }, children: [
+    /* @__PURE__ */ jsx3(CanvasViewport, { transform, onChange: onTransformChange, children: items.map((item) => /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: item.x,
+          top: item.y,
+          width: item.width,
+          height: item.height
+        },
+        children: item.content
+      },
+      item.id
+    )) }),
+    showMiniMap && /* @__PURE__ */ jsx3("div", { style: { position: "absolute", bottom: 16, right: 16, zIndex: 100 }, children: /* @__PURE__ */ jsx3(MiniMap, { items, transform }) })
+  ] });
+}
+
+// src/canvas/useCanvas.ts
+import { useState as useState2, useCallback } from "react";
+function useCanvas(initialTransform = { x: 0, y: 0, scale: 1 }) {
+  const [transform, setTransform] = useState2(initialTransform);
+  const [items, setItems] = useState2([]);
+  const addItem = useCallback((item) => {
+    setItems((prev) => [...prev, item]);
+  }, []);
+  const updateItemPosition = useCallback((id, x, y) => {
+    setItems((prev) => prev.map((item) => item.id === id ? { ...item, x, y } : item));
+  }, []);
+  return {
+    transform,
+    setTransform,
+    items,
+    setItems,
+    addItem,
+    updateItemPosition
+  };
+}
+
+export {
+  CanvasViewport,
+  MiniMap,
+  InfiniteCanvas,
+  useCanvas
+};

package/packages/canvas-ui/dist/chunk-6VB74RCH.js

@@ -0,0 +1,147 @@
+// src/dock/DockItem.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DockItem({ item, isActive, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "48px",
+        height: "48px",
+        borderRadius: "12px",
+        cursor: "pointer",
+        backgroundColor: isActive ? "rgba(255, 255, 255, 0.15)" : "transparent",
+        transition: "background-color 0.2s, transform 0.1s",
+        color: "#fff"
+      },
+      onClick: () => {
+        onClick?.();
+        item.onClick?.();
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+        e.currentTarget.style.transform = "scale(1.05)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = isActive ? "rgba(255, 255, 255, 0.15)" : "transparent";
+        e.currentTarget.style.transform = "scale(1)";
+      },
+      title: item.label,
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "24px" }, children: item.icon }),
+        item.badge && /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          top: "0",
+          right: "0",
+          backgroundColor: "#ff4d4f",
+          color: "white",
+          fontSize: "10px",
+          fontWeight: "bold",
+          padding: "2px 6px",
+          borderRadius: "10px",
+          transform: "translate(25%, -25%)",
+          border: "2px solid #1e1e1e"
+        }, children: item.badge }),
+        isActive && /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          bottom: "-6px",
+          width: "6px",
+          height: "6px",
+          borderRadius: "50%",
+          backgroundColor: "#d4af37"
+        } })
+      ]
+    }
+  );
+}
+
+// src/dock/DockBar.tsx
+import { useState } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DockBar({ items, position = "bottom", activeId, onItemClick, autoHide = false }) {
+  const [isHovered, setIsHovered] = useState(false);
+  const isVertical = position === "left" || position === "right";
+  const positionStyles = {
+    position: "fixed",
+    ...position === "bottom" ? { bottom: "16px", left: "50%", transform: "translateX(-50%)" } : {},
+    ...position === "top" ? { top: "16px", left: "50%", transform: "translateX(-50%)" } : {},
+    ...position === "left" ? { left: "16px", top: "50%", transform: "translateY(-50%)" } : {},
+    ...position === "right" ? { right: "16px", top: "50%", transform: "translateY(-50%)" } : {}
+  };
+  const hiddenTransform = position === "bottom" ? "translate(-50%, 150%)" : position === "top" ? "translate(-50%, -150%)" : position === "left" ? "translate(-150%, -50%)" : "translate(150%, -50%)";
+  const baseTransform = position === "bottom" || position === "top" ? "translateX(-50%)" : "translateY(-50%)";
+  const containerStyle = {
+    ...positionStyles,
+    display: "flex",
+    flexDirection: isVertical ? "column" : "row",
+    gap: "8px",
+    padding: "8px",
+    backgroundColor: "rgba(25, 25, 25, 0.7)",
+    backdropFilter: "blur(16px)",
+    border: "1px solid rgba(212, 175, 55, 0.3)",
+    borderRadius: "16px",
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+    zIndex: 9999,
+    transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    transform: autoHide && !isHovered ? hiddenTransform : baseTransform
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    autoHide && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          ...position === "bottom" ? { bottom: 0, left: 0, right: 0, height: "24px" } : {},
+          ...position === "top" ? { top: 0, left: 0, right: 0, height: "24px" } : {},
+          ...position === "left" ? { left: 0, top: 0, bottom: 0, width: "24px" } : {},
+          ...position === "right" ? { right: 0, top: 0, bottom: 0, width: "24px" } : {},
+          zIndex: 9998
+        },
+        onMouseEnter: () => setIsHovered(true)
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: containerStyle,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: items.map((item) => /* @__PURE__ */ jsx2(
+          DockItem,
+          {
+            item,
+            isActive: activeId === item.id,
+            onClick: () => onItemClick?.(item.id)
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+
+// src/dock/useDock.ts
+import { useState as useState2, useCallback } from "react";
+function useDock(initialItems = []) {
+  const [items, setItems] = useState2(initialItems);
+  const [activeId, setActiveId] = useState2();
+  const updateBadge = useCallback((id, badge) => {
+    setItems((prev) => prev.map((item) => item.id === id ? { ...item, badge } : item));
+  }, []);
+  return {
+    items,
+    activeId,
+    setActiveId,
+    updateBadge,
+    setItems
+  };
+}
+
+export {
+  DockItem,
+  DockBar,
+  useDock
+};

package/packages/canvas-ui/dist/chunk-QTTWWBNN.js

@@ -0,0 +1,114 @@
+// src/editor/themes.ts
+var skipoDarkTheme = {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    { token: "keyword", foreground: "d4af37" },
+    // Gold
+    { token: "string", foreground: "98c379" },
+    // Olive
+    { token: "number", foreground: "d19a66" },
+    // Orange
+    { token: "comment", foreground: "5c6370", fontStyle: "italic" },
+    { token: "type", foreground: "56b6c2" }
+    // Cyan
+  ],
+  colors: {
+    "editor.background": "#16161e",
+    "editor.foreground": "#a9b1d6",
+    "editorLineNumber.foreground": "#363b54",
+    "editor.selectionBackground": "#28324a",
+    "editor.lineHighlightBackground": "#1c1c26",
+    "editorCursor.foreground": "#d4af37",
+    "editorIndentGuide.background": "#222222"
+  }
+};
+
+// src/editor/useMonaco.ts
+import { useEffect, useState } from "react";
+function useMonaco() {
+  const [monaco, setMonaco] = useState(null);
+  useEffect(() => {
+    let isMounted = true;
+    const monacoPkg = "monaco-editor";
+    import(
+      /* @vite-ignore */
+      monacoPkg
+    ).then((monacoModule) => {
+      if (!isMounted) return;
+      monacoModule.editor.defineTheme("skipo-dark", skipoDarkTheme);
+      setMonaco(monacoModule);
+    }).catch((err) => {
+      console.warn("Failed to load monaco-editor", err);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  return monaco;
+}
+
+// src/editor/MonacoEditor.tsx
+import { useEffect as useEffect2, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function MonacoEditor({
+  value,
+  language = "javascript",
+  readOnly = false,
+  minimap = false,
+  theme = "skipo-dark",
+  fontSize = 14,
+  onChange,
+  height = "100%",
+  width = "100%"
+}) {
+  const containerRef = useRef(null);
+  const editorRef = useRef(null);
+  const monaco = useMonaco();
+  useEffect2(() => {
+    if (!monaco || !containerRef.current) return;
+    if (!editorRef.current) {
+      editorRef.current = monaco.editor.create(containerRef.current, {
+        value,
+        language,
+        theme,
+        readOnly,
+        fontSize,
+        minimap: { enabled: minimap },
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        padding: { top: 16, bottom: 16 }
+      });
+      if (onChange) {
+        editorRef.current.onDidChangeModelContent(() => {
+          onChange(editorRef.current.getValue());
+        });
+      }
+    }
+    return () => {
+      if (editorRef.current) {
+        editorRef.current.dispose();
+        editorRef.current = null;
+      }
+    };
+  }, [monaco]);
+  useEffect2(() => {
+    if (editorRef.current && value !== editorRef.current.getValue()) {
+      editorRef.current.setValue(value);
+    }
+  }, [value]);
+  useEffect2(() => {
+    if (editorRef.current) {
+      monaco?.editor.setModelLanguage(editorRef.current.getModel(), language);
+      editorRef.current.updateOptions({ readOnly, fontSize, minimap: { enabled: minimap } });
+      if (theme) monaco?.editor.setTheme(theme);
+    }
+  }, [language, readOnly, fontSize, minimap, theme, monaco]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width, height, overflow: "hidden", borderRadius: "8px" } });
+}
+
+export {
+  skipoDarkTheme,
+  useMonaco,
+  MonacoEditor
+};