@ultrst-armada/floks 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultrst-armada/floks",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "private": false,
   "publishConfig": {
     "access": "public",

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

@@ -1,3 +1,9 @@
+import {
+  CanvasViewport,
+  InfiniteCanvas,
+  MiniMap,
+  useCanvas
+} from "./chunk-34YRDZPJ.js";
 import {
   DockBar,
   DockItem,
@@ -19,12 +25,6 @@ import {
   useCanvas2DCoordinates,
   useCanvas2DMagnetic
 } from "./chunk-XVAHT5WE.js";
-import {
-  CanvasViewport,
-  InfiniteCanvas,
-  MiniMap,
-  useCanvas
-} from "./chunk-34YRDZPJ.js";
 import {
   MonacoEditor,
   skipoDarkTheme,

package/packages/ui/dist/chunk-2SFOC7KZ.js

@@ -0,0 +1,266 @@
+import {
+  BaseInput
+} from "./chunk-W42SJGOJ.js";
+import {
+  BaseButton
+} from "./chunk-A2CDQISJ.js";
+
+// src/components/auth/AuthPage.tsx
+import { useState } from "react";
+import { LogIn, UserPlus, Eye, EyeOff, Shield, ArrowRight, AlertCircle } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AuthPage = ({
+  appName = "SKIPO",
+  appSubtitle = "WORKSPACE",
+  footerText,
+  onLogin,
+  onRegister,
+  onSuccess,
+  onSwitchToAdmin
+}) => {
+  const [mode, setMode] = useState("login");
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const submit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    const cleanEmail = email.trim();
+    if (!cleanEmail) return setError("Email address is required.");
+    if (!password) return setError("Password is required.");
+    if (mode === "register" && !name.trim()) return setError("Please enter your full name or display name.");
+    if (mode === "register" && password.length < 4) return setError("Password must be at least 4 characters long.");
+    setLoading(true);
+    try {
+      const result = mode === "login" ? await onLogin(cleanEmail, password) : await onRegister({ name: name.trim(), email: cleanEmail, password });
+      if (!result.success) throw new Error(result.error || "Authentication failed.");
+      onSuccess?.(result);
+    } catch (err) {
+      setError(err?.message || "An unexpected error occurred.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen w-full bg-[var(--skipo-bg)] text-[var(--skipo-text)] font-mono flex flex-col justify-between select-none", children: [
+    /* @__PURE__ */ jsxs("header", { className: "border-b-2 border-[var(--skipo-border-color)] bg-[var(--skipo-surface)] px-6 py-3.5 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-[var(--skipo-accent)] text-black font-black flex items-center justify-center border border-[var(--skipo-border-color)]", children: "\u25B2" }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-black uppercase tracking-wider", children: appName }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--skipo-text-muted)] font-bold", children: appSubtitle })
+        ] }) })
+      ] }),
+      onSwitchToAdmin && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onSwitchToAdmin, className: "px-3 py-1.5 text-xs font-black uppercase tracking-wider border-2 border-[#D4AF37] bg-[#D4AF37]/10 text-[#D4AF37] hover:bg-[#D4AF37] hover:text-black flex items-center gap-1.5 shadow-[2px_2px_0px_#D4AF37]", children: [
+        /* @__PURE__ */ jsx(Shield, { size: 13 }),
+        " ADMIN LOGIN ",
+        /* @__PURE__ */ jsx(ArrowRight, { size: 13 })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("main", { className: "flex-1 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md border-2 border-[var(--skipo-border-color)] bg-[var(--skipo-surface)] shadow-[6px_6px_0px_var(--skipo-border-color)] p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 mb-6 border-b border-[var(--skipo-border-color)] pb-3", children: ["login", "register"].map((next) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setMode(next);
+            setError(null);
+          },
+          className: `py-2 text-xs font-black uppercase tracking-wider flex items-center justify-center gap-1.5 border ${mode === next ? "bg-[var(--skipo-accent)] text-black border-[var(--skipo-border-color)]" : "bg-[var(--skipo-bg)] text-[var(--skipo-text-muted)] border-transparent"}`,
+          children: [
+            next === "login" ? /* @__PURE__ */ jsx(LogIn, { size: 13 }) : /* @__PURE__ */ jsx(UserPlus, { size: 13 }),
+            next === "login" ? "SIGN IN" : "CREATE ACCOUNT"
+          ]
+        },
+        next
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-black uppercase tracking-wider", children: mode === "login" ? "WORKSPACE SIGN IN" : "NEW DEVELOPER ACCOUNT" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--skipo-text-muted)] mt-1", children: mode === "login" ? "Sign in to access your workspaces and application control plane." : "Create an account to manage your workspaces and applications." })
+      ] }),
+      error && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 border-2 border-red-500/80 bg-red-950/40 text-red-300 text-xs flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(AlertCircle, { size: 15, className: "shrink-0 mt-0.5" }),
+        /* @__PURE__ */ jsx("div", { children: error })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-4", children: [
+        mode === "register" && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-[11px] font-bold text-[var(--skipo-text-muted)] uppercase tracking-wider mb-1", children: "Full Name" }),
+          /* @__PURE__ */ jsx("input", { value: name, onChange: (e) => setName(e.target.value), placeholder: "e.g. Jane Developer", required: true, className: "w-full bg-[var(--skipo-bg)] border border-[var(--skipo-border-color)] focus:border-[var(--skipo-accent)] text-[var(--skipo-text)] text-xs px-3 py-2.5 outline-none font-mono" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-[11px] font-bold text-[var(--skipo-text-muted)] uppercase tracking-wider mb-1", children: "Email Address or Username" }),
+          /* @__PURE__ */ jsx("input", { value: email, onChange: (e) => setEmail(e.target.value), placeholder: "e.g. developer@example.com", autoComplete: "username", required: true, className: "w-full bg-[var(--skipo-bg)] border border-[var(--skipo-border-color)] focus:border-[var(--skipo-accent)] text-[var(--skipo-text)] text-xs px-3 py-2.5 outline-none font-mono" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-[11px] font-bold text-[var(--skipo-text-muted)] uppercase tracking-wider mb-1", children: "Password" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx("input", { type: showPassword ? "text" : "password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: mode === "login" ? "current-password" : "new-password", required: true, className: "w-full bg-[var(--skipo-bg)] border border-[var(--skipo-border-color)] focus:border-[var(--skipo-accent)] text-[var(--skipo-text)] text-xs px-3 py-2.5 outline-none font-mono pr-10" }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setShowPassword((v) => !v), className: "absolute right-3 top-2.5 text-[var(--skipo-text-muted)]", children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { size: 14 }) : /* @__PURE__ */ jsx(Eye, { size: 14 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { type: "submit", disabled: loading, className: "w-full py-2.5 bg-[var(--skipo-accent)] hover:opacity-90 text-black font-black text-xs uppercase tracking-wider flex items-center justify-center gap-2 shadow-[2px_2px_0px_#000] disabled:opacity-50", children: [
+          /* @__PURE__ */ jsx(LogIn, { size: 14 }),
+          " ",
+          loading ? "PROCESSING..." : mode === "login" ? "SIGN IN TO WORKSPACE" : "CREATE ACCOUNT"
+        ] })
+      ] }),
+      onSwitchToAdmin && /* @__PURE__ */ jsxs("div", { className: "mt-6 pt-4 border-t border-[var(--skipo-border-color)] flex items-center justify-between text-[11px] text-[var(--skipo-text-muted)]", children: [
+        /* @__PURE__ */ jsx("span", { children: "System Administrator?" }),
+        /* @__PURE__ */ jsxs("button", { type: "button", onClick: onSwitchToAdmin, className: "text-[#D4AF37] hover:underline font-bold flex items-center gap-1", children: [
+          "Switch to Admin Portal ",
+          /* @__PURE__ */ jsx(ArrowRight, { size: 11 })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("footer", { className: "border-t border-[var(--skipo-border-color)] py-2 px-4 text-center text-[10px] text-[var(--skipo-text-muted)]", children: footerText || `${appName} WORKSPACE SYSTEM` })
+  ] });
+};
+
+// src/components/auth/LoginModal.tsx
+import { useState as useState2 } from "react";
+import { ArrowRight as ArrowRight2, ShieldCheck, AlertCircle as AlertCircle2 } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var LoginModal = ({
+  appName = "Ecosystem App",
+  onSuccess,
+  defaultEmail = ""
+}) => {
+  const [email, setEmail] = useState2(defaultEmail);
+  const [password, setPassword] = useState2("");
+  const [isRegister, setIsRegister] = useState2(false);
+  const [name, setName] = useState2("");
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const endpoint = isRegister ? "/api/auth/register" : "/api/auth/login";
+      const payload = isRegister ? { email, password, name } : { email, password };
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok || !data.success || !data.user) {
+        throw new Error(data.error || "Authentication failed. Please verify credentials.");
+      }
+      const token = data.token || `usr_${Date.now()}`;
+      if (typeof window !== "undefined") {
+        localStorage.setItem("skipo_auth_token", token);
+        localStorage.setItem("skipo_user", JSON.stringify(data.user));
+      }
+      onSuccess(data.user, token);
+    } catch (err) {
+      setError(err.message || "Server error. Authentication failed.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs font-mono p-4",
+      onWheel: (e) => e.stopPropagation(),
+      onPointerDown: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxs2("div", { className: "w-full max-w-md p-6 border-2 border-[var(--skipo-border-color)] bg-[var(--skipo-surface)] text-[var(--skipo-text)] shadow-2xl rounded-lg space-y-4", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between pb-3 border-b border-[var(--skipo-border-color)]", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx2("div", { className: "w-7 h-7 bg-[var(--skipo-accent)] text-black font-black flex items-center justify-center text-xs rounded", children: "\u25B2" }),
+            /* @__PURE__ */ jsxs2("span", { className: "font-black text-sm tracking-wider uppercase text-[var(--skipo-text)]", children: [
+              appName,
+              " Authentication"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { className: "text-[9px] px-2 py-0.5 border border-emerald-500/50 bg-emerald-500/10 text-emerald-300 font-bold rounded flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx2(ShieldCheck, { size: 10 }),
+            " SYSTEM DB"
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsxs2("div", { className: "p-3 border border-red-500/60 bg-red-500/10 text-red-300 text-xs rounded flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx2(AlertCircle2, { size: 14, className: "shrink-0 mt-0.5" }),
+          /* @__PURE__ */ jsx2("span", { children: error })
+        ] }),
+        /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
+          isRegister && /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "block text-[10px] font-black uppercase mb-1", children: "Full Name *" }),
+            /* @__PURE__ */ jsx2(
+              BaseInput,
+              {
+                type: "text",
+                value: name,
+                onChange: (e) => setName(e.target.value),
+                placeholder: "Developer Name",
+                required: isRegister
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "block text-[10px] font-black uppercase mb-1", children: "Email Address *" }),
+            /* @__PURE__ */ jsx2(
+              BaseInput,
+              {
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                placeholder: "user@example.com",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "block text-[10px] font-black uppercase mb-1", children: "Password *" }),
+            /* @__PURE__ */ jsx2(
+              BaseInput,
+              {
+                type: "password",
+                value: password,
+                onChange: (e) => setPassword(e.target.value),
+                placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("div", { className: "pt-2", children: /* @__PURE__ */ jsxs2(
+            BaseButton,
+            {
+              variant: "accent",
+              size: "md",
+              type: "submit",
+              disabled: loading,
+              className: "w-full flex items-center justify-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx2("span", { children: loading ? "AUTHENTICATING..." : isRegister ? "REGISTER & ENTER" : "SIGN IN" }),
+                /* @__PURE__ */ jsx2(ArrowRight2, { size: 14 })
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "pt-2 border-t border-[var(--skipo-border-color)]/60 flex items-center justify-between text-[11px]", children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setIsRegister(!isRegister);
+                setError(null);
+              },
+              className: "text-[var(--skipo-accent)] hover:underline cursor-pointer",
+              children: isRegister ? "Already have an account? Sign In" : "Create new account"
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: "ULTRST Identity" })
+        ] })
+      ] })
+    }
+  );
+};
+
+export {
+  AuthPage,
+  LoginModal
+};

package/packages/ui/dist/{chunk-ELZOBTWX.js → chunk-DT6DZU63.js}

@@ -415,140 +415,166 @@ var WorkspaceSecondaryClonesPanel = ({ workspace, onClonesUpdated, onClose }) =>
 
 // src/components/workspace/WorkspaceTilesMenu.tsx
 import React5 from "react";
+import { Search, Plus as Plus2, Trash2 as Trash22, Edit3, LogOut, ArrowRight, FolderOpen, Cloud as Cloud5, HardDrive as HardDrive5, FolderPlus, X } from "lucide-react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var WorkspaceTilesMenu = ({
   workspaces,
-  activeWorkspaceId,
+  activeWorkspaceId = null,
+  currentUser = null,
   onSelectWorkspace,
   onCreateWorkspace,
+  onUpdateWorkspace,
   onDeleteWorkspace,
-  appName = "app",
-  currentUser = null,
-  mode = "working-workspace"
+  onLogout,
+  appName = "APP",
+  mode = "working-workspace",
+  loading = false,
+  error = null,
+  onDismissError
 }) => {
-  const [isCreating, setIsCreating] = React5.useState(false);
-  const [newWsName, setNewWsName] = React5.useState("");
-  const [storageConfig, setStorageConfig] = React5.useState({
-    provider: "backblaze_b2",
-    b2BucketName: "ultrst-apps"
-  });
-  const [activeTab, setActiveTab] = React5.useState("workspaces");
-  const [activeWorkspaceForClones, setActiveWorkspaceForClones] = React5.useState(null);
-  const activeWs = workspaces.find((w) => w.id === activeWorkspaceId);
-  const handleCreate = async (e) => {
+  const [search, setSearch] = React5.useState("");
+  const [creating, setCreating] = React5.useState(false);
+  const [editing, setEditing] = React5.useState(null);
+  const [name, setName] = React5.useState("");
+  const [description, setDescription] = React5.useState("");
+  const [storage, setStorage] = React5.useState({ provider: "local_fs", localFolderName: "Local-Vault" });
+  const filtered = workspaces.filter(
+    (w) => w.name.toLowerCase().includes(search.toLowerCase()) || (w.description || "").toLowerCase().includes(search.toLowerCase())
+  );
+  const create = async (e) => {
     e.preventDefault();
-    if (!newWsName.trim()) return;
-    await onCreateWorkspace(newWsName.trim(), storageConfig);
-    setNewWsName("");
-    setIsCreating(false);
+    if (!name.trim()) return;
+    await onCreateWorkspace({ name: name.trim(), description: description.trim(), storage });
+    setName("");
+    setDescription("");
+    setCreating(false);
   };
-  return /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", height: "100%", background: "var(--skipo-bg-app, #0f172a)", color: "var(--skipo-text-primary, #f8fafc)", padding: "24px" }, children: [
-    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }, children: [
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsxs6("h2", { style: { fontSize: "18px", fontWeight: 600, margin: 0 }, children: [
-          "Workspaces (",
-          mode,
-          ")"
+  const update = async (e) => {
+    e.preventDefault();
+    if (!editing || !onUpdateWorkspace || !name.trim()) return;
+    await onUpdateWorkspace(editing.id, { name: name.trim(), description: description.trim() });
+    setEditing(null);
+  };
+  const beginEdit = (w) => {
+    setEditing(w);
+    setName(w.name);
+    setDescription(w.description || "");
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "fixed inset-0 z-50 overflow-y-auto bg-black/85 p-4 sm:p-8 backdrop-blur-md font-mono flex flex-col items-center select-none", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "w-full max-w-5xl my-4 sm:my-8", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "p-4 sm:p-5 mb-5 border-2 border-[var(--skipo-border-color)] bg-[var(--skipo-surface)] rounded-lg shadow-2xl", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx6("div", { className: "w-8 h-8 rounded bg-[var(--skipo-accent)] text-black font-black flex items-center justify-center text-sm", children: appName.slice(0, 2).toUpperCase() }),
+            /* @__PURE__ */ jsxs6("div", { children: [
+              /* @__PURE__ */ jsxs6("span", { className: "text-lg sm:text-xl font-black text-[var(--skipo-accent)] tracking-wider", children: [
+                appName.toUpperCase(),
+                " WORKSPACES"
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: [
+                currentUser?.email || "user",
+                " \xB7 ",
+                mode
+              ] })
+            ] })
+          ] }),
+          onLogout && /* @__PURE__ */ jsxs6("button", { type: "button", onClick: onLogout, className: "text-xs flex items-center gap-1.5 text-red-400 hover:bg-red-500/20 border border-red-500/50 px-2.5 py-1.5 rounded", children: [
+            /* @__PURE__ */ jsx6(LogOut, { size: 14 }),
+            " LOGOUT"
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs6("span", { style: { fontSize: "12px", color: "var(--skipo-text-muted, #94a3b8)" }, children: [
-          currentUser?.email || "user",
-          " \u2022 ",
-          appName
+        /* @__PURE__ */ jsxs6("div", { className: "mt-4 pt-4 border-t border-[var(--skipo-border-color)] flex flex-col sm:flex-row gap-3", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "relative flex-1", children: [
+            /* @__PURE__ */ jsx6(Search, { size: 14, className: "absolute left-3 top-1/2 -translate-y-1/2 text-[var(--skipo-text-muted)]" }),
+            /* @__PURE__ */ jsx6("input", { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search workspaces by name or description...", className: "w-full bg-[var(--skipo-bg)] border border-[var(--skipo-border-color)] rounded pl-9 pr-3 py-1.5 text-xs text-[var(--skipo-text)] outline-none focus:border-[var(--skipo-accent)]" })
+          ] }),
+          /* @__PURE__ */ jsxs6("button", { type: "button", onClick: () => {
+            setName("");
+            setDescription("");
+            setCreating(true);
+          }, className: "text-xs flex items-center justify-center gap-1.5 font-bold px-3 py-1.5 bg-[var(--skipo-accent)] text-black rounded", children: [
+            /* @__PURE__ */ jsx6(Plus2, { size: 14 }),
+            " NEW WORKSPACE"
+          ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: "8px" }, children: [
-        /* @__PURE__ */ jsx6(
-          "button",
-          {
-            onClick: () => setActiveTab("workspaces"),
-            style: { padding: "6px 14px", borderRadius: "6px", border: "1px solid #334155", background: activeTab === "workspaces" ? "#38bdf8" : "transparent", color: activeTab === "workspaces" ? "#0f172a" : "inherit", cursor: "pointer" },
-            children: "List"
-          }
-        ),
-        activeWs && /* @__PURE__ */ jsxs6(
-          "button",
-          {
-            onClick: () => {
-              setActiveWorkspaceForClones(activeWs);
-              setActiveTab("clones");
-            },
-            style: { padding: "6px 14px", borderRadius: "6px", border: "1px solid #334155", background: activeTab === "clones" ? "#38bdf8" : "transparent", color: activeTab === "clones" ? "#0f172a" : "inherit", cursor: "pointer" },
-            children: [
-              "Clones (",
-              activeWs.secondaryClones?.length || 0,
-              ")"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx6(
-          "button",
-          {
-            onClick: () => setIsCreating(!isCreating),
-            style: { padding: "6px 14px", borderRadius: "6px", border: "1px solid #38bdf8", background: isCreating ? "transparent" : "#38bdf8", color: isCreating ? "#38bdf8" : "#0f172a", cursor: "pointer" },
-            children: isCreating ? "Cancel" : "+ New Workspace"
-          }
-        )
-      ] })
-    ] }),
-    isCreating ? /* @__PURE__ */ jsxs6("form", { onSubmit: handleCreate, style: { display: "flex", flexDirection: "column", gap: "16px", background: "#1e293b", padding: "20px", borderRadius: "8px" }, children: [
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx6("label", { style: { display: "block", fontSize: "12px", marginBottom: "6px", color: "#94a3b8" }, children: "Workspace Name" }),
-        /* @__PURE__ */ jsx6(
-          "input",
-          {
-            type: "text",
-            value: newWsName,
-            onChange: (e) => setNewWsName(e.target.value),
-            placeholder: "e.g. Production Vault",
-            style: { width: "100%", padding: "8px 12px", background: "#0f172a", border: "1px solid #334155", borderRadius: "6px", color: "#fff" },
-            autoFocus: true
-          }
-        )
+      error && /* @__PURE__ */ jsxs6("div", { className: "mb-4 p-3 bg-red-500/15 border-2 border-red-500 text-red-400 text-xs flex items-center justify-between rounded", children: [
+        /* @__PURE__ */ jsx6("b", { children: error }),
+        onDismissError && /* @__PURE__ */ jsx6("button", { type: "button", onClick: onDismissError, className: "underline", children: "DISMISS" })
       ] }),
-      /* @__PURE__ */ jsx6(StorageOptionTiles, { currentUser, onSelectStorage: setStorageConfig }),
-      /* @__PURE__ */ jsx6("button", { type: "submit", style: { padding: "10px", background: "#38bdf8", color: "#0f172a", border: "none", borderRadius: "6px", fontWeight: 600, cursor: "pointer" }, children: "Create Workspace" })
-    ] }) : activeTab === "clones" && activeWorkspaceForClones ? /* @__PURE__ */ jsx6(
-      WorkspaceSecondaryClonesPanel,
-      {
-        workspace: activeWorkspaceForClones,
-        onClose: () => setActiveTab("workspaces")
-      }
-    ) : /* @__PURE__ */ jsx6("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "16px", overflowY: "auto" }, children: workspaces.map((ws) => {
-      const isActive = ws.id === activeWorkspaceId;
-      return /* @__PURE__ */ jsxs6(
-        "div",
-        {
-          onClick: () => onSelectWorkspace(ws),
-          style: { padding: "16px", borderRadius: "8px", background: isActive ? "rgba(56, 189, 248, 0.08)" : "#1e293b", border: isActive ? "1px solid #38bdf8" : "1px solid #334155", cursor: "pointer" },
-          children: [
-            /* @__PURE__ */ jsxs6("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx6("span", { style: { fontWeight: 600, fontSize: "14px" }, children: ws.name }),
-              /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: "6px" }, children: [
-                ws.secondaryClones && ws.secondaryClones.length > 0 && /* @__PURE__ */ jsxs6("span", { style: { fontSize: "10px", padding: "2px 6px", borderRadius: "4px", background: "rgba(56, 189, 248, 0.2)", color: "#38bdf8" }, children: [
-                  "+",
-                  ws.secondaryClones.length,
-                  " CLONES"
-                ] }),
-                isActive && /* @__PURE__ */ jsx6("span", { style: { fontSize: "10px", padding: "2px 6px", borderRadius: "4px", background: "#38bdf8", color: "#0f172a", fontWeight: 600 }, children: "ACTIVE" })
+      loading && /* @__PURE__ */ jsx6("div", { className: "mb-4 p-8 border border-dashed border-[var(--skipo-border-color)] text-center text-xs text-[var(--skipo-text-muted)]", children: "LOADING WORKSPACES..." }),
+      /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
+        filtered.map((w) => {
+          const active = w.id === activeWorkspaceId;
+          const isB2 = w.storageProvider === "backblaze_b2";
+          return /* @__PURE__ */ jsxs6("div", { onClick: () => onSelectWorkspace(w), className: `group p-4 border-2 bg-[var(--skipo-surface)] rounded-lg transition-all cursor-pointer ${active ? "border-[var(--skipo-accent)] shadow-[4px_4px_0px_var(--skipo-accent)]" : "border-[var(--skipo-border-color)] hover:border-[var(--skipo-accent)]"}`, children: [
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 text-[10px] font-bold uppercase text-[var(--skipo-text-muted)]", children: [
+                isB2 ? /* @__PURE__ */ jsx6(Cloud5, { size: 12 }) : /* @__PURE__ */ jsx6(HardDrive5, { size: 12 }),
+                " ",
+                w.storageProvider || "local_fs",
+                " ",
+                active && /* @__PURE__ */ jsx6("span", { className: "text-[var(--skipo-accent)]", children: "\u2605 ACTIVE" })
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: "flex gap-1", children: [
+                onUpdateWorkspace && /* @__PURE__ */ jsx6("button", { type: "button", onClick: (e) => {
+                  e.stopPropagation();
+                  beginEdit(w);
+                }, className: "p-1.5 border border-[var(--skipo-border-color)] rounded hover:bg-[var(--skipo-accent)] hover:text-black", children: /* @__PURE__ */ jsx6(Edit3, { size: 13 }) }),
+                onDeleteWorkspace && /* @__PURE__ */ jsx6("button", { type: "button", onClick: (e) => {
+                  e.stopPropagation();
+                  if (confirm(`Delete workspace "${w.name}"?`)) onDeleteWorkspace(w.id);
+                }, className: "p-1.5 border border-[var(--skipo-border-color)] rounded hover:bg-red-600 hover:text-white", children: /* @__PURE__ */ jsx6(Trash22, { size: 13 }) })
               ] })
             ] }),
-            /* @__PURE__ */ jsx6("div", { style: { marginTop: "10px" }, children: /* @__PURE__ */ jsx6(WorkspaceStorageReadonlyPanel, { workspace: ws }) }),
-            onDeleteWorkspace && /* @__PURE__ */ jsx6("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: "12px" }, children: /* @__PURE__ */ jsx6(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  if (confirm(`Delete workspace "${ws.name}"?`)) onDeleteWorkspace(ws.id);
-                },
-                style: { background: "transparent", border: "none", color: "#f87171", fontSize: "11px", cursor: "pointer" },
-                children: "Delete"
-              }
-            ) })
-          ]
-        },
-        ws.id
-      );
-    }) })
+            /* @__PURE__ */ jsx6("h3", { className: "mt-3 text-sm font-black uppercase text-[var(--skipo-text)] truncate", children: w.name }),
+            /* @__PURE__ */ jsxs6("div", { className: "mt-1 text-[10px] text-[var(--skipo-accent)] flex items-center gap-1 truncate", children: [
+              /* @__PURE__ */ jsx6(FolderOpen, { size: 11 }),
+              w.workspacePath || w.localFolderName || w.b2BucketName || w.id
+            ] }),
+            /* @__PURE__ */ jsx6("p", { className: "text-xs text-[var(--skipo-text-muted)] mt-2 line-clamp-2", children: w.description || "Workspace deployment and application control plane." }),
+            /* @__PURE__ */ jsx6("div", { className: "mt-3 pt-3 border-t border-[var(--skipo-border-color)]", children: /* @__PURE__ */ jsx6(WorkspaceStorageReadonlyPanel, { workspace: w }) }),
+            /* @__PURE__ */ jsx6("div", { className: "mt-3 flex justify-end", children: /* @__PURE__ */ jsxs6("button", { type: "button", onClick: (e) => {
+              e.stopPropagation();
+              onSelectWorkspace(w);
+            }, className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-black uppercase border rounded bg-[var(--skipo-bg)] hover:bg-[var(--skipo-accent)] hover:text-black", children: [
+              /* @__PURE__ */ jsx6("span", { children: "ENTER WORKSPACE" }),
+              /* @__PURE__ */ jsx6(ArrowRight, { size: 14 })
+            ] }) })
+          ] }, w.id);
+        }),
+        /* @__PURE__ */ jsxs6("button", { type: "button", onClick: () => {
+          setName("");
+          setDescription("");
+          setCreating(true);
+        }, className: "min-h-[220px] flex flex-col items-center justify-center p-6 border-2 border-dashed border-[var(--skipo-border-color)] bg-[var(--skipo-surface)]/50 hover:border-[var(--skipo-accent)] rounded-lg", children: [
+          /* @__PURE__ */ jsx6(FolderPlus, { size: 22, className: "mb-3 text-[var(--skipo-accent)]" }),
+          /* @__PURE__ */ jsx6("b", { className: "text-xs", children: "ADD NEW WORKSPACE" }),
+          /* @__PURE__ */ jsx6("span", { className: "text-[11px] text-[var(--skipo-text-muted)] mt-1 text-center", children: "Create an isolated workspace with dedicated storage." })
+        ] })
+      ] })
+    ] }),
+    (creating || editing) && /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 z-[60] flex items-center justify-center bg-black/75 p-4 backdrop-blur-sm", children: /* @__PURE__ */ jsxs6("div", { className: "w-full max-w-2xl p-6 border-2 border-[var(--skipo-border-color)] bg-[var(--skipo-surface)] rounded-lg shadow-2xl font-mono", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between pb-3 border-b border-[var(--skipo-border-color)] mb-4", children: [
+        /* @__PURE__ */ jsx6("b", { className: "text-sm uppercase", children: creating ? "CREATE NEW WORKSPACE" : "EDIT WORKSPACE SETTINGS" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => {
+          setCreating(false);
+          setEditing(null);
+        }, children: /* @__PURE__ */ jsx6(X, { size: 16 }) })
+      ] }),
+      /* @__PURE__ */ jsxs6("form", { onSubmit: creating ? create : update, className: "space-y-4", children: [
+        /* @__PURE__ */ jsx6("input", { value: name, onChange: (e) => setName(e.target.value), placeholder: "Workspace Name", required: true, className: "w-full bg-[var(--skipo-bg)] border border-[var(--skipo-border-color)] rounded px-3 py-2 text-xs" }),
+        /* @__PURE__ */ jsx6("textarea", { value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Description", rows: 2, className: "w-full bg-[var(--skipo-bg)] border border-[var(--skipo-border-color)] rounded px-3 py-2 text-xs" }),
+        creating && /* @__PURE__ */ jsx6(StorageOptionTiles, { currentUser, onSelectStorage: setStorage }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => {
+            setCreating(false);
+            setEditing(null);
+          }, className: "px-3 py-1.5 text-xs border rounded", children: "CANCEL" }),
+          /* @__PURE__ */ jsx6("button", { type: "submit", className: "px-3 py-1.5 text-xs font-black bg-[var(--skipo-accent)] text-black rounded", children: creating ? "CREATE & ENTER WORKSPACE" : "SAVE SETTINGS" })
+        ] })
+      ] })
+    ] }) })
   ] });
 };
 

package/packages/ui/dist/components/auth/index.d.ts

@@ -1,5 +1,39 @@
 import React__default from 'react';
 
+/**
+ * @public
+ * Canonical Auth Result contract.
+ */
+interface AuthResult {
+    success: boolean;
+    error?: string;
+    user?: unknown;
+    token?: string;
+}
+/**
+ * @public
+ * Canonical AuthPage Props for FLOKS reusable authentication page.
+ */
+interface AuthPageProps {
+    appName?: string;
+    appSubtitle?: string;
+    footerText?: string;
+    onLogin: (email: string, password: string) => Promise<AuthResult>;
+    onRegister: (input: {
+        name: string;
+        email: string;
+        password: string;
+    }) => Promise<AuthResult>;
+    onSuccess?: (result: AuthResult) => void;
+    onSwitchToAdmin?: () => void;
+}
+/**
+ * @public
+ * Canonical FLOKS AuthPage section/page component.
+ * Single source of truth for login/registration across DEPM, KRUSBL, and SKIPO apps.
+ */
+declare const AuthPage: React__default.FC<AuthPageProps>;
+
 interface LoginModalProps {
     appName?: string;
     onSuccess: (user: any, token: string) => void;
@@ -7,4 +41,4 @@ interface LoginModalProps {
 }
 declare const LoginModal: React__default.FC<LoginModalProps>;
 
-export { LoginModal, type LoginModalProps };
+export { AuthPage, type AuthPageProps, type AuthResult, LoginModal, type LoginModalProps };

package/packages/ui/dist/components/auth/index.js

@@ -1,8 +1,10 @@
 import {
+  AuthPage,
   LoginModal
-} from "../../chunk-S227WJ5E.js";
+} from "../../chunk-2SFOC7KZ.js";
 import "../../chunk-W42SJGOJ.js";
 import "../../chunk-A2CDQISJ.js";
 export {
+  AuthPage,
   LoginModal
 };

package/packages/ui/dist/components/workspace/index.d.ts

@@ -72,30 +72,56 @@ interface Props {
 }
 declare const WorkspaceSecondaryClonesPanel: React__default.FC<Props>;
 
+/**
+ * @public
+ * Canonical Workspace Record contract.
+ */
 interface WorkspaceRecord {
     id: string;
     name: string;
+    description?: string;
+    workspacePath?: string;
     storageProvider?: string;
     localFolderName?: string;
+    localFolderKey?: string;
     b2BucketName?: string;
-    secondaryClones?: WorkspaceSecondaryClone[];
-    createdAt?: string;
-    updatedAt?: string;
+    secondaryClones?: unknown[];
 }
+/**
+ * @public
+ * Canonical WorkspaceTilesMenu Props.
+ */
 interface WorkspaceTilesMenuProps {
     workspaces: WorkspaceRecord[];
-    activeWorkspaceId: string | null;
-    onSelectWorkspace: (workspace: WorkspaceRecord) => void;
-    onCreateWorkspace: (name: string, storage: StorageSelection) => Promise<void>;
-    onDeleteWorkspace?: (workspaceId: string) => Promise<void>;
-    appName?: string;
+    activeWorkspaceId?: string | null;
     currentUser?: {
         id: string;
         email: string;
         name?: string;
     } | null;
+    onSelectWorkspace: (workspace: WorkspaceRecord) => void;
+    onCreateWorkspace: (input: {
+        name: string;
+        description?: string;
+        storage: StorageSelection;
+    }) => Promise<void>;
+    onUpdateWorkspace?: (workspaceId: string, patch: {
+        name: string;
+        description?: string;
+    }) => Promise<void>;
+    onDeleteWorkspace?: (workspaceId: string) => Promise<void>;
+    onLogout?: () => void;
+    appName?: string;
     mode?: 'direct-vault' | 'working-workspace';
+    loading?: boolean;
+    error?: string | null;
+    onDismissError?: () => void;
 }
+/**
+ * @public
+ * Canonical FLOKS WorkspaceTilesMenu section/modal component.
+ * Single source of truth for workspace isolation, selection, and creation across DEPM, KRUSBL, and SKIPO apps.
+ */
 declare const WorkspaceTilesMenu: React__default.FC<WorkspaceTilesMenuProps>;
 
 export { type SrklBackblazeAccount, SrklBackblazeTile, StorageOptionTiles, StoragePresetTile, type StorageSelection, type WorkspaceRecord, type WorkspaceSecondaryClone, WorkspaceSecondaryClonesPanel, WorkspaceStorageReadonlyPanel, WorkspaceTilesMenu, type WorkspaceTilesMenuProps };

package/packages/ui/dist/components/workspace/index.js

@@ -5,7 +5,7 @@ import {
   WorkspaceSecondaryClonesPanel,
   WorkspaceStorageReadonlyPanel,
   WorkspaceTilesMenu
-} from "../../chunk-ELZOBTWX.js";
+} from "../../chunk-DT6DZU63.js";
 export {
   SrklBackblazeTile,
   StorageOptionTiles,

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

@@ -7,7 +7,7 @@ export { AppShell, AppShellProps, BreadcrumbNav, BreadcrumbNavProps, HeaderBar,
 export { ApiCallIndicator, ApiCallIndicatorProps, AutoSaveStatus, AutoSaveToggle, AutoSaveToggleProps, BottomStripContextValue, BottomStripProvider, BottomStripProviderProps, StatusLight, StatusLightProps, SystemMessage, SystemMessageDisplay, SystemMessageDisplayProps, SystemMessageType, useBottomStrip } from './components/bottom-strip/index.js';
 export { B as BottomStrip, a as BottomStripProps } from './BottomStrip-DYhAUQR4.js';
 export { AccountsSettingsSection, AccountsSettingsSectionProps, SettingsTab, SettingsTabProps, ThemeSettingsSection } from './components/settings/index.js';
-export { LoginModal, LoginModalProps } from './components/auth/index.js';
+export { AuthPage, AuthPageProps, AuthResult, LoginModal, LoginModalProps } from './components/auth/index.js';
 export { SrklBackblazeAccount, SrklBackblazeTile, StorageOptionTiles, StoragePresetTile, StorageSelection, WorkspaceRecord, WorkspaceSecondaryClone, WorkspaceSecondaryClonesPanel, WorkspaceStorageReadonlyPanel, WorkspaceTilesMenu, WorkspaceTilesMenuProps } from './components/workspace/index.js';
 export { DEFAULT_PALETTE_ID, THEME_STORAGE_KEY, ThemeContextValue, ThemeProvider, ThemeProviderProps, applyPaletteToDocument, getActivePalette, paletteToSkipoThemePack, subscribeToPalette, usePalette, useTheme } from './palette/index.js';
 export { ActionButton, Badge, BadgeModel, BadgeProps, BadgeTone, ButtonModel, ButtonParent, ButtonParentProps, ButtonProps, ButtonSize, ButtonVariant, CardPanel, CategoryCardTile, ChannelStripTile, ClipCardTile, DangerButton, GhostButton, IconButton, InputModel, InspectorPanel, ModalPanel, PanelModel, PanelParent, PanelParentProps, PanelProps, PanelVariant, SelectInput, SelectInputProps, SliderInput, SliderInputProps, SpawnOptionTile, StatusDot, StatusDotProps, TelemetryPill, TelemetryPillProps, TextInput, TextInputProps, TileModel, TileParent, TileParentProps, TileVariant, ToggleButton, ToggleInput, ToggleInputProps, ToolbarPanel, TooltipDirection, UIBaseProps, UIElementBase, UIInteractionState, UIModel, UIParent, UIParentProps, UIProps, UIRole, UISize, UIStyleTokens, UIVariant, registerPaletteResolver } from './hierarchy/index.js';

package/packages/ui/dist/index.js

@@ -1,3 +1,9 @@
+import {
+  AppShell,
+  BreadcrumbNav,
+  HeaderBar,
+  TopToolbar
+} from "./chunk-GWW3BGOB.js";
 import {
   DEFAULT_PANEL_GEOMETRY,
   DrawerContainer,
@@ -12,12 +18,6 @@ import {
   usePanelGeometry,
   usePanelInteraction
 } from "./chunk-TXKLROFC.js";
-import {
-  AppShell,
-  BreadcrumbNav,
-  HeaderBar,
-  TopToolbar
-} from "./chunk-GWW3BGOB.js";
 import {
   AccountsSettingsSection,
   SettingsTab,
@@ -30,7 +30,7 @@ import {
   WorkspaceSecondaryClonesPanel,
   WorkspaceStorageReadonlyPanel,
   WorkspaceTilesMenu
-} from "./chunk-ELZOBTWX.js";
+} from "./chunk-DT6DZU63.js";
 import {
   ActionButton,
   Badge,
@@ -128,15 +128,9 @@ import {
   BUILTIN_PALETTES
 } from "./chunk-XXIH2HWI.js";
 import {
+  AuthPage,
   LoginModal
-} from "./chunk-S227WJ5E.js";
-import {
-  BaseSelect,
-  BaseTextarea,
-  BaseToggle,
-  CredentialField,
-  KNOWN_CREDENTIAL_URLS
-} from "./chunk-KIFQA7L6.js";
+} from "./chunk-2SFOC7KZ.js";
 import "./chunk-5ZMXFCD4.js";
 import {
   ApiCallIndicator,
@@ -145,6 +139,13 @@ import {
   StatusLight,
   SystemMessageDisplay
 } from "./chunk-C3L53YN4.js";
+import {
+  BaseSelect,
+  BaseTextarea,
+  BaseToggle,
+  CredentialField,
+  KNOWN_CREDENTIAL_URLS
+} from "./chunk-KIFQA7L6.js";
 import {
   ConfirmDialog,
   CopyableErrorAlert,
@@ -184,6 +185,7 @@ export {
   ActionButton,
   ApiCallIndicator,
   AppShell,
+  AuthPage,
   AutoSaveToggle,
   BUILTIN_PALETTES,
   Badge,

package/packages/ui/floks.manifest.json

@@ -1,8 +1,17 @@
 {
   "$schema": "https://skipo.dev/schemas/floks-manifest.v1.json",
-  "package": "@floks/ui",
+  "package": "@ultrst-armada/floks/ui",
+  "alias": "@floks/ui",
+  "packageType": "frontend",
   "version": "1.0.0",
   "components": [
+    {
+      "id": "AuthPage",
+      "name": "AuthPage",
+      "export": "AuthPage",
+      "subpath": "auth",
+      "targetTypes": ["App.auth", "App.main-content"]
+    },
     {
       "id": "AppShell",
       "name": "AppShell",

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

@@ -1,152 +0,0 @@
-import {
-  BaseInput
-} from "./chunk-W42SJGOJ.js";
-import {
-  BaseButton
-} from "./chunk-A2CDQISJ.js";
-
-// src/components/auth/LoginModal.tsx
-import { useState } from "react";
-import { ArrowRight, ShieldCheck, AlertCircle } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var LoginModal = ({
-  appName = "Ecosystem App",
-  onSuccess,
-  defaultEmail = ""
-}) => {
-  const [email, setEmail] = useState(defaultEmail);
-  const [password, setPassword] = useState("");
-  const [isRegister, setIsRegister] = useState(false);
-  const [name, setName] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError(null);
-    setLoading(true);
-    try {
-      const endpoint = isRegister ? "/api/auth/register" : "/api/auth/login";
-      const payload = isRegister ? { email, password, name } : { email, password };
-      const res = await fetch(endpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload)
-      });
-      const data = await res.json().catch(() => ({}));
-      if (!res.ok || !data.success || !data.user) {
-        throw new Error(data.error || "Authentication failed. Please verify credentials.");
-      }
-      const token = data.token || `usr_${Date.now()}`;
-      if (typeof window !== "undefined") {
-        localStorage.setItem("skipo_auth_token", token);
-        localStorage.setItem("skipo_user", JSON.stringify(data.user));
-      }
-      onSuccess(data.user, token);
-    } catch (err) {
-      setError(err.message || "Server error. Authentication failed.");
-    } finally {
-      setLoading(false);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs font-mono p-4",
-      onWheel: (e) => e.stopPropagation(),
-      onPointerDown: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md p-6 border-2 border-[var(--skipo-border-color)] bg-[var(--skipo-surface)] text-[var(--skipo-text)] shadow-2xl rounded-lg space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-3 border-b border-[var(--skipo-border-color)]", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-7 h-7 bg-[var(--skipo-accent)] text-black font-black flex items-center justify-center text-xs rounded", children: "\u25B2" }),
-            /* @__PURE__ */ jsxs("span", { className: "font-black text-sm tracking-wider uppercase text-[var(--skipo-text)]", children: [
-              appName,
-              " Authentication"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("span", { className: "text-[9px] px-2 py-0.5 border border-emerald-500/50 bg-emerald-500/10 text-emerald-300 font-bold rounded flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(ShieldCheck, { size: 10 }),
-            " SYSTEM DB"
-          ] })
-        ] }),
-        error && /* @__PURE__ */ jsxs("div", { className: "p-3 border border-red-500/60 bg-red-500/10 text-red-300 text-xs rounded flex items-start gap-2", children: [
-          /* @__PURE__ */ jsx(AlertCircle, { size: 14, className: "shrink-0 mt-0.5" }),
-          /* @__PURE__ */ jsx("span", { children: error })
-        ] }),
-        /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
-          isRegister && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-black uppercase mb-1", children: "Full Name *" }),
-            /* @__PURE__ */ jsx(
-              BaseInput,
-              {
-                type: "text",
-                value: name,
-                onChange: (e) => setName(e.target.value),
-                placeholder: "Developer Name",
-                required: isRegister
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-black uppercase mb-1", children: "Email Address *" }),
-            /* @__PURE__ */ jsx(
-              BaseInput,
-              {
-                type: "email",
-                value: email,
-                onChange: (e) => setEmail(e.target.value),
-                placeholder: "user@example.com",
-                required: true
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-black uppercase mb-1", children: "Password *" }),
-            /* @__PURE__ */ jsx(
-              BaseInput,
-              {
-                type: "password",
-                value: password,
-                onChange: (e) => setPassword(e.target.value),
-                placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-                required: true
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxs(
-            BaseButton,
-            {
-              variant: "accent",
-              size: "md",
-              type: "submit",
-              disabled: loading,
-              className: "w-full flex items-center justify-center gap-2",
-              children: [
-                /* @__PURE__ */ jsx("span", { children: loading ? "AUTHENTICATING..." : isRegister ? "REGISTER & ENTER" : "SIGN IN" }),
-                /* @__PURE__ */ jsx(ArrowRight, { size: 14 })
-              ]
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "pt-2 border-t border-[var(--skipo-border-color)]/60 flex items-center justify-between text-[11px]", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setIsRegister(!isRegister);
-                setError(null);
-              },
-              className: "text-[var(--skipo-accent)] hover:underline cursor-pointer",
-              children: isRegister ? "Already have an account? Sign In" : "Create new account"
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: "ULTRST Identity" })
-        ] })
-      ] })
-    }
-  );
-};
-
-export {
-  LoginModal
-};