@ultrst-armada/floks 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,2 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# Floks
+This will be the counterpart Kloks but for the frontend components. This will store the canonical frontend elements that we will use in our Skipo projects. 

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './packages/ui/dist/index.d.ts';
+export * from './packages/canvas-ui/dist/index.d.ts';

package/index.js

@@ -0,0 +1,2 @@
+export * from './packages/ui/dist/index.js';
+export * from './packages/canvas-ui/dist/index.js';

package/package.json

@@ -1,6 +1,71 @@
 {
   "name": "@ultrst-armada/floks",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.1",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "description": "Floks — Public Frontend, 2D Graph & UI Package Library (@floks/*)",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "packages/*/dist/**",
+    "packages/*/src/theme/tokens.css",
+    "packages/*/src/styles/**",
+    "packages/*/package.json",
+    "packages/*/floks.manifest.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./ui": {
+      "types": "./packages/ui/dist/index.d.ts",
+      "import": "./packages/ui/dist/index.js",
+      "default": "./packages/ui/dist/index.js"
+    },
+    "./ui/theme/tokens.css": "./packages/ui/src/theme/tokens.css",
+    "./ui/styles/*": "./packages/ui/src/styles/*",
+    "./canvas-ui": {
+      "types": "./packages/canvas-ui/dist/index.d.ts",
+      "import": "./packages/canvas-ui/dist/index.js",
+      "default": "./packages/canvas-ui/dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "pnpm -r run build",
+    "postbuild": "node -e \"import('fs').then(fs => { for (const pkg of fs.readdirSync('packages')) { const d = 'packages/' + pkg + '/dist'; if (!fs.existsSync(d)) continue; for (const f of fs.readdirSync(d, { recursive: true })) { const p = d + '/' + f; if (fs.statSync(p).isFile() && (p.endsWith('.js') || p.endsWith('.d.ts'))) { const c = fs.readFileSync(p, 'utf8'); const n = c.replaceAll('@kloks/', '@ultrst-armada/kloks/').replaceAll('@floks/', '@ultrst-armada/floks/').replaceAll('@ultrst/kloks/', '@ultrst-armada/kloks/').replaceAll('@ultrst/floks/', '@ultrst-armada/floks/').replaceAll('\\\"kloks/', '\\\"@ultrst-armada/kloks/').replaceAll('\\'kloks/', '\\'@ultrst-armada/kloks/').replaceAll('\\\"floks/', '\\\"@ultrst-armada/floks/').replaceAll('\\'floks/', '\\'@ultrst-armada/floks/'); if (c !== n) fs.writeFileSync(p, n); } } } })\"",
+    "test": "vitest run",
+    "typecheck": "pnpm -r run typecheck",
+    "clean": "pnpm -r run clean"
+  },
+  "dependencies": {
+    "zod": "^3.24.1"
+  },
+  "peerDependencies": {
+    "@ultrst-armada/kloks": "^1.0.2",
+    "lucide-react": ">=0.300.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@ultrst-armada/kloks": "^1.0.2",
+    "lucide-react": "^1.55.0",
+    "react": "^19.0.1",
+    "react-dom": "^19.0.1",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.3",
+    "vitest": "^3.1.0"
+  },
+  "packageManager": "pnpm@9.15.0"
+}

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import React__default from 'react';
+
+interface Transform {
+    x: number;
+    y: number;
+    scale: number;
+}
+interface CanvasItem {
+    id: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    content: React.ReactNode;
+}
+
+interface CanvasViewportProps {
+    children: React__default.ReactNode;
+    transform: Transform;
+    onChange: (t: Transform) => void;
+    minZoom?: number;
+    maxZoom?: number;
+}
+declare function CanvasViewport({ children, transform, onChange, minZoom, maxZoom }: CanvasViewportProps): React__default.JSX.Element;
+
+interface InfiniteCanvasProps {
+    items: CanvasItem[];
+    transform: Transform;
+    onTransformChange: (t: Transform) => void;
+    showGrid?: boolean;
+    showMiniMap?: boolean;
+    gridSize?: number;
+}
+declare function InfiniteCanvas({ items, transform, onTransformChange, showGrid, showMiniMap, gridSize }: InfiniteCanvasProps): React.JSX.Element;
+
+interface MiniMapProps {
+    items: CanvasItem[];
+    transform: Transform;
+    width?: number;
+    height?: number;
+}
+declare function MiniMap({ items, transform, width, height }: MiniMapProps): React.JSX.Element;
+
+declare function useCanvas(initialTransform?: Transform): {
+    transform: Transform;
+    setTransform: React.Dispatch<React.SetStateAction<Transform>>;
+    items: CanvasItem[];
+    setItems: React.Dispatch<React.SetStateAction<CanvasItem[]>>;
+    addItem: (item: CanvasItem) => void;
+    updateItemPosition: (id: string, x: number, y: number) => void;
+};
+
+export { type CanvasItem, CanvasViewport, InfiniteCanvas, MiniMap, type Transform, useCanvas };

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

@@ -0,0 +1,12 @@
+import {
+  CanvasViewport,
+  InfiniteCanvas,
+  MiniMap,
+  useCanvas
+} from "../chunk-34YRDZPJ.js";
+export {
+  CanvasViewport,
+  InfiniteCanvas,
+  MiniMap,
+  useCanvas
+};

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
+};