@ultrst-armada/floks 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,238 @@
+import {
+  DEFAULT_DARK_THEME_PACK,
+  DEFAULT_LIGHT_THEME_PACK,
+  useSkipoTheme
+} from "./chunk-DZJ3NSCX.js";
+import {
+  CopyableLogViewer
+} from "./chunk-RLQ2ALJG.js";
+import {
+  BaseBadge,
+  BaseCard
+} from "./chunk-UOR4P6PO.js";
+import {
+  BaseButton
+} from "./chunk-A2CDQISJ.js";
+
+// src/components/settings/ThemeSettingsSection.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AVAILABLE_PACKS = [
+  { id: "skipo-dark-neo", name: "Dark Neo", mode: "dark", pack: DEFAULT_DARK_THEME_PACK },
+  { id: "skipo-light-neo", name: "Light Neo", mode: "light", pack: DEFAULT_LIGHT_THEME_PACK }
+];
+var ACCENT_COLORS = [
+  { name: "Gold", value: "#d4af37" },
+  { name: "Blue", value: "#3b82f6" },
+  { name: "Emerald", value: "#10b981" },
+  { name: "Cyan", value: "#00d9ff" },
+  { name: "Purple", value: "#a855f7" }
+];
+var ThemeSettingsSection = () => {
+  const { theme, themePack, setTheme, setThemePack } = useSkipoTheme();
+  const handleAccentChange = (hex) => {
+    if (typeof document !== "undefined") {
+      document.documentElement.style.setProperty("--skipo-accent", hex);
+      document.documentElement.style.setProperty("--skipo-accent-glow", `0 0 14px ${hex}66`);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    BaseCard,
+    {
+      variant: "surface",
+      depth: "sm",
+      style: {
+        padding: "16px",
+        border: "1px solid var(--skipo-border-color, #333)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "13px", fontWeight: 800, textTransform: "uppercase", color: "var(--skipo-text)" }, children: "Appearance & Theming" }),
+            /* @__PURE__ */ jsx("p", { style: { margin: "2px 0 0", fontSize: "11px", color: "var(--skipo-text-muted)" }, children: "Configure theme packs, display mode, and custom accent highlights." })
+          ] }),
+          /* @__PURE__ */ jsxs(BaseBadge, { variant: "neutral", style: { fontSize: "10px" }, children: [
+            theme.toUpperCase(),
+            " MODE"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", fontWeight: 700, marginBottom: "6px", color: "var(--skipo-text)" }, children: "Color Mode" }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx(
+              BaseButton,
+              {
+                size: "sm",
+                variant: theme === "dark" ? "accent" : "secondary",
+                onClick: () => setTheme("dark"),
+                type: "button",
+                children: "Dark Mode"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              BaseButton,
+              {
+                size: "sm",
+                variant: theme === "light" ? "accent" : "secondary",
+                onClick: () => setTheme("light"),
+                type: "button",
+                children: "Light Mode"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", fontWeight: 700, marginBottom: "6px", color: "var(--skipo-text)" }, children: "Theme Pack Preset" }),
+          /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(130px, 1fr))", gap: "8px" }, children: AVAILABLE_PACKS.map((p) => {
+            const isSelected = themePack?.metadata?.id === p.id;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onClick: () => setThemePack(p.pack),
+                style: {
+                  padding: "8px 10px",
+                  borderRadius: "6px",
+                  border: isSelected ? "2px solid var(--skipo-accent, #d4af37)" : "1px solid var(--skipo-border-color, #444)",
+                  backgroundColor: isSelected ? "rgba(212, 175, 55, 0.12)" : "var(--skipo-bg, #16181d)",
+                  cursor: "pointer",
+                  transition: "all 0.15s ease"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", fontWeight: 700, color: isSelected ? "var(--skipo-accent)" : "var(--skipo-text)" }, children: p.name }),
+                  /* @__PURE__ */ jsxs("div", { style: { fontSize: "9px", color: "var(--skipo-text-muted)", textTransform: "capitalize" }, children: [
+                    p.mode,
+                    " Preset"
+                  ] })
+                ]
+              },
+              p.id
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", fontWeight: 700, marginBottom: "6px", color: "var(--skipo-text)" }, children: "Accent Highlight" }),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: ACCENT_COLORS.map((c) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: c.name,
+              "aria-label": c.name,
+              onClick: () => handleAccentChange(c.value),
+              style: {
+                width: "24px",
+                height: "24px",
+                borderRadius: "50%",
+                backgroundColor: c.value,
+                border: "2px solid rgba(255, 255, 255, 0.8)",
+                cursor: "pointer",
+                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.4)",
+                transition: "transform 0.1s ease"
+              }
+            },
+            c.name
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+ThemeSettingsSection.displayName = "ThemeSettingsSection";
+
+// src/components/settings/SettingsTab.tsx
+import { useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SettingsTab = ({
+  appName = "Skipo Application",
+  version = "1.0.0",
+  systemLogs = [
+    "System initialization verified.",
+    "Theme engine loaded default tokens.",
+    "Ready for user operations."
+  ],
+  activeWorkspaceName = "Default Workspace",
+  onResetDefaults
+}) => {
+  const [resetStatus, setResetStatus] = useState(false);
+  const handleReset = () => {
+    if (onResetDefaults) onResetDefaults();
+    setResetStatus(true);
+    setTimeout(() => setResetStatus(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+        padding: "24px",
+        maxWidth: "840px",
+        margin: "0 auto",
+        width: "100%",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid var(--skipo-border-color, #333)", paddingBottom: "12px" }, children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 900, textTransform: "uppercase", color: "var(--skipo-text)" }, children: "Application Settings" }),
+            /* @__PURE__ */ jsx2("p", { style: { margin: "4px 0 0", fontSize: "12px", color: "var(--skipo-text-muted)" }, children: "Manage appearance themes, workspace diagnostics, and runtime telemetry." })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsxs2(BaseBadge, { variant: "neutral", children: [
+              "v",
+              version
+            ] }),
+            /* @__PURE__ */ jsx2(BaseButton, { size: "sm", variant: resetStatus ? "success" : "secondary", onClick: handleReset, type: "button", children: resetStatus ? "Reset Done" : "Reset Defaults" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(ThemeSettingsSection, {}),
+        /* @__PURE__ */ jsxs2(
+          BaseCard,
+          {
+            variant: "surface",
+            depth: "sm",
+            style: {
+              padding: "16px",
+              border: "1px solid var(--skipo-border-color, #333)",
+              display: "flex",
+              flexDirection: "column",
+              gap: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx2("h3", { style: { margin: 0, fontSize: "13px", fontWeight: 800, textTransform: "uppercase", color: "var(--skipo-text)" }, children: "Workspace & Runtime" }),
+                /* @__PURE__ */ jsx2(BaseBadge, { variant: "success", children: "ONLINE" })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px", fontSize: "11px" }, children: [
+                /* @__PURE__ */ jsxs2("div", { style: { padding: "8px 10px", backgroundColor: "var(--skipo-bg, #16181d)", borderRadius: "4px", border: "1px solid var(--skipo-border-color, #333)" }, children: [
+                  /* @__PURE__ */ jsx2("span", { style: { color: "var(--skipo-text-muted)", display: "block", marginBottom: "2px" }, children: "App Target" }),
+                  /* @__PURE__ */ jsx2("span", { style: { fontWeight: 700, color: "var(--skipo-text)" }, children: appName })
+                ] }),
+                /* @__PURE__ */ jsxs2("div", { style: { padding: "8px 10px", backgroundColor: "var(--skipo-bg, #16181d)", borderRadius: "4px", border: "1px solid var(--skipo-border-color, #333)" }, children: [
+                  /* @__PURE__ */ jsx2("span", { style: { color: "var(--skipo-text-muted)", display: "block", marginBottom: "2px" }, children: "Active Context" }),
+                  /* @__PURE__ */ jsx2("span", { style: { fontWeight: 700, color: "var(--skipo-accent, #d4af37)" }, children: activeWorkspaceName })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
+          CopyableLogViewer,
+          {
+            title: "Runtime Event Logs",
+            logs: systemLogs,
+            maxHeight: "160px"
+          }
+        ) })
+      ]
+    }
+  );
+};
+SettingsTab.displayName = "SettingsTab";
+
+export {
+  ThemeSettingsSection,
+  SettingsTab
+};