@ultrst-armada/floks 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ultrst-armada/floks",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public",
@@ -3,17 +3,6 @@ import {
3
3
  DockItem,
4
4
  useDock
5
5
  } from "./chunk-6VB74RCH.js";
6
- import {
7
- CanvasViewport,
8
- InfiniteCanvas,
9
- MiniMap,
10
- useCanvas
11
- } from "./chunk-34YRDZPJ.js";
12
- import {
13
- MonacoEditor,
14
- skipoDarkTheme,
15
- useMonaco
16
- } from "./chunk-QTTWWBNN.js";
17
6
  import {
18
7
  BIOME_CONFIGS,
19
8
  COORD_SCALE,
@@ -30,6 +19,17 @@ import {
30
19
  useCanvas2DCoordinates,
31
20
  useCanvas2DMagnetic
32
21
  } from "./chunk-XVAHT5WE.js";
22
+ import {
23
+ CanvasViewport,
24
+ InfiniteCanvas,
25
+ MiniMap,
26
+ useCanvas
27
+ } from "./chunk-34YRDZPJ.js";
28
+ import {
29
+ MonacoEditor,
30
+ skipoDarkTheme,
31
+ useMonaco
32
+ } from "./chunk-QTTWWBNN.js";
33
33
  import {
34
34
  Tile,
35
35
  TileCreateButton,
@@ -0,0 +1,407 @@
1
+ import {
2
+ DEFAULT_DARK_THEME_PACK,
3
+ DEFAULT_LIGHT_THEME_PACK,
4
+ useSkipoTheme
5
+ } from "./chunk-DZJ3NSCX.js";
6
+ import {
7
+ CopyableLogViewer
8
+ } from "./chunk-RLQ2ALJG.js";
9
+ import {
10
+ BaseBadge,
11
+ BaseCard
12
+ } from "./chunk-UOR4P6PO.js";
13
+ import {
14
+ BaseInput
15
+ } from "./chunk-W42SJGOJ.js";
16
+ import {
17
+ BaseButton
18
+ } from "./chunk-A2CDQISJ.js";
19
+
20
+ // src/components/settings/ThemeSettingsSection.tsx
21
+ import { jsx, jsxs } from "react/jsx-runtime";
22
+ var AVAILABLE_PACKS = [
23
+ { id: "skipo-dark-neo", name: "Dark Neo", mode: "dark", pack: DEFAULT_DARK_THEME_PACK },
24
+ { id: "skipo-light-neo", name: "Light Neo", mode: "light", pack: DEFAULT_LIGHT_THEME_PACK }
25
+ ];
26
+ var ACCENT_COLORS = [
27
+ { name: "Gold", value: "#d4af37" },
28
+ { name: "Blue", value: "#3b82f6" },
29
+ { name: "Emerald", value: "#10b981" },
30
+ { name: "Cyan", value: "#00d9ff" },
31
+ { name: "Purple", value: "#a855f7" }
32
+ ];
33
+ var ThemeSettingsSection = () => {
34
+ const { theme, themePack, setTheme, setThemePack } = useSkipoTheme();
35
+ const handleAccentChange = (hex) => {
36
+ if (typeof document !== "undefined") {
37
+ document.documentElement.style.setProperty("--skipo-accent", hex);
38
+ document.documentElement.style.setProperty("--skipo-accent-glow", `0 0 14px ${hex}66`);
39
+ }
40
+ };
41
+ return /* @__PURE__ */ jsxs(
42
+ BaseCard,
43
+ {
44
+ variant: "surface",
45
+ depth: "sm",
46
+ style: {
47
+ padding: "16px",
48
+ border: "1px solid var(--skipo-border-color, #333)",
49
+ display: "flex",
50
+ flexDirection: "column",
51
+ gap: "16px"
52
+ },
53
+ children: [
54
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
55
+ /* @__PURE__ */ jsxs("div", { children: [
56
+ /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "13px", fontWeight: 800, textTransform: "uppercase", color: "var(--skipo-text)" }, children: "Appearance & Theming" }),
57
+ /* @__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." })
58
+ ] }),
59
+ /* @__PURE__ */ jsxs(BaseBadge, { variant: "neutral", style: { fontSize: "10px" }, children: [
60
+ theme.toUpperCase(),
61
+ " MODE"
62
+ ] })
63
+ ] }),
64
+ /* @__PURE__ */ jsxs("div", { children: [
65
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", fontWeight: 700, marginBottom: "6px", color: "var(--skipo-text)" }, children: "Color Mode" }),
66
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
67
+ /* @__PURE__ */ jsx(
68
+ BaseButton,
69
+ {
70
+ size: "sm",
71
+ variant: theme === "dark" ? "accent" : "secondary",
72
+ onClick: () => setTheme("dark"),
73
+ type: "button",
74
+ children: "Dark Mode"
75
+ }
76
+ ),
77
+ /* @__PURE__ */ jsx(
78
+ BaseButton,
79
+ {
80
+ size: "sm",
81
+ variant: theme === "light" ? "accent" : "secondary",
82
+ onClick: () => setTheme("light"),
83
+ type: "button",
84
+ children: "Light Mode"
85
+ }
86
+ )
87
+ ] })
88
+ ] }),
89
+ /* @__PURE__ */ jsxs("div", { children: [
90
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", fontWeight: 700, marginBottom: "6px", color: "var(--skipo-text)" }, children: "Theme Pack Preset" }),
91
+ /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(130px, 1fr))", gap: "8px" }, children: AVAILABLE_PACKS.map((p) => {
92
+ const isSelected = themePack?.metadata?.id === p.id;
93
+ return /* @__PURE__ */ jsxs(
94
+ "div",
95
+ {
96
+ onClick: () => setThemePack(p.pack),
97
+ style: {
98
+ padding: "8px 10px",
99
+ borderRadius: "6px",
100
+ border: isSelected ? "2px solid var(--skipo-accent, #d4af37)" : "1px solid var(--skipo-border-color, #444)",
101
+ backgroundColor: isSelected ? "rgba(212, 175, 55, 0.12)" : "var(--skipo-bg, #16181d)",
102
+ cursor: "pointer",
103
+ transition: "all 0.15s ease"
104
+ },
105
+ children: [
106
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", fontWeight: 700, color: isSelected ? "var(--skipo-accent)" : "var(--skipo-text)" }, children: p.name }),
107
+ /* @__PURE__ */ jsxs("div", { style: { fontSize: "9px", color: "var(--skipo-text-muted)", textTransform: "capitalize" }, children: [
108
+ p.mode,
109
+ " Preset"
110
+ ] })
111
+ ]
112
+ },
113
+ p.id
114
+ );
115
+ }) })
116
+ ] }),
117
+ /* @__PURE__ */ jsxs("div", { children: [
118
+ /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", fontWeight: 700, marginBottom: "6px", color: "var(--skipo-text)" }, children: "Accent Highlight" }),
119
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: ACCENT_COLORS.map((c) => /* @__PURE__ */ jsx(
120
+ "button",
121
+ {
122
+ type: "button",
123
+ title: c.name,
124
+ "aria-label": c.name,
125
+ onClick: () => handleAccentChange(c.value),
126
+ style: {
127
+ width: "24px",
128
+ height: "24px",
129
+ borderRadius: "50%",
130
+ backgroundColor: c.value,
131
+ border: "2px solid rgba(255, 255, 255, 0.8)",
132
+ cursor: "pointer",
133
+ boxShadow: "0 2px 4px rgba(0, 0, 0, 0.4)",
134
+ transition: "transform 0.1s ease"
135
+ }
136
+ },
137
+ c.name
138
+ )) })
139
+ ] })
140
+ ]
141
+ }
142
+ );
143
+ };
144
+ ThemeSettingsSection.displayName = "ThemeSettingsSection";
145
+
146
+ // src/components/settings/AccountsSettingsSection.tsx
147
+ import { useState, useEffect, useCallback } from "react";
148
+ import { GitBranch, Cloud, Package, RefreshCw, CheckCircle, Database } from "lucide-react";
149
+ import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
150
+ var AccountsSettingsSection = ({
151
+ relevantServices = ["github", "backblaze", "npm"],
152
+ userId = "usr-admin"
153
+ }) => {
154
+ const [activeService, setActiveService] = useState(relevantServices[0] || "github");
155
+ const [accounts, setAccounts] = useState([]);
156
+ const [loading, setLoading] = useState(false);
157
+ const [tokenInput, setTokenInput] = useState("");
158
+ const [keyInput, setKeyInput] = useState("");
159
+ const [bucketInput, setBucketInput] = useState("");
160
+ const [message, setMessage] = useState(null);
161
+ const [testResult, setTestResult] = useState(null);
162
+ const fetchAccounts = useCallback(async () => {
163
+ setLoading(true);
164
+ try {
165
+ const res = await fetch(`/api/srkl/accounts?service=${encodeURIComponent(activeService)}&userId=${encodeURIComponent(userId)}`);
166
+ const data = await res.json().catch(() => ({}));
167
+ if (data.success && Array.isArray(data.accounts)) {
168
+ setAccounts(data.accounts);
169
+ } else {
170
+ setAccounts([]);
171
+ }
172
+ } catch {
173
+ setAccounts([]);
174
+ } finally {
175
+ setLoading(false);
176
+ }
177
+ }, [activeService, userId]);
178
+ useEffect(() => {
179
+ fetchAccounts();
180
+ setMessage(null);
181
+ setTestResult(null);
182
+ }, [fetchAccounts]);
183
+ const handleConnect = async (e) => {
184
+ e.preventDefault();
185
+ setLoading(true);
186
+ try {
187
+ const endpoint = `/api/providers/${activeService === "backblaze" ? "b2" : activeService}/connect`;
188
+ let payload = {};
189
+ if (activeService === "github") payload = { token: tokenInput.trim(), username: keyInput.trim() || void 0 };
190
+ else if (activeService === "backblaze") payload = { keyId: keyInput.trim(), applicationKey: tokenInput.trim(), bucketName: bucketInput.trim() || "ultrst-apps" };
191
+ else if (activeService === "npm") payload = { scope: keyInput.trim() || "@ultrst-armada", token: tokenInput.trim() };
192
+ const res = await fetch(endpoint, {
193
+ method: "POST",
194
+ headers: { "Content-Type": "application/json" },
195
+ body: JSON.stringify(payload)
196
+ });
197
+ const data = await res.json().catch(() => ({}));
198
+ if (data.success) {
199
+ setMessage(`Connected ${activeService.toUpperCase()} account successfully`);
200
+ setTokenInput("");
201
+ setKeyInput("");
202
+ setBucketInput("");
203
+ await fetchAccounts();
204
+ }
205
+ } finally {
206
+ setLoading(false);
207
+ }
208
+ };
209
+ const handleTest = async (accountId) => {
210
+ setLoading(true);
211
+ try {
212
+ const res = await fetch(`/api/providers/accounts/${encodeURIComponent(accountId)}/test`, { method: "POST" });
213
+ setTestResult(await res.json().catch(() => ({})));
214
+ } finally {
215
+ setLoading(false);
216
+ }
217
+ };
218
+ const getServiceIcon = (s) => {
219
+ if (s === "github") return /* @__PURE__ */ jsx2(GitBranch, { size: 13 });
220
+ if (s === "backblaze") return /* @__PURE__ */ jsx2(Cloud, { size: 13 });
221
+ if (s === "npm") return /* @__PURE__ */ jsx2(Package, { size: 13 });
222
+ return /* @__PURE__ */ jsx2(Database, { size: 13 });
223
+ };
224
+ return /* @__PURE__ */ jsxs2(BaseCard, { className: "flex flex-col gap-3 p-4 border border-[var(--skipo-border-color)] bg-[var(--skipo-surface)] font-mono text-xs select-none", children: [
225
+ /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-b border-[var(--skipo-border-color)] pb-2 shrink-0", children: [
226
+ /* @__PURE__ */ jsxs2("div", { children: [
227
+ /* @__PURE__ */ jsx2("h3", { className: "text-xs font-bold uppercase tracking-wider text-[var(--skipo-text)]", children: "Connected Accounts (SRKL)" }),
228
+ /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: "Active federated credentials dynamically resolved from SRKL Vault." })
229
+ ] }),
230
+ /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1", children: relevantServices.map((svc) => /* @__PURE__ */ jsxs2(
231
+ "button",
232
+ {
233
+ onClick: () => setActiveService(svc),
234
+ className: `px-2.5 py-1 text-xs font-bold uppercase tracking-wider flex items-center gap-1.5 border cursor-pointer ${activeService === svc ? "border-[var(--skipo-accent)] bg-[var(--skipo-accent)] text-black" : "border-[var(--skipo-border-color)] bg-[var(--skipo-bg)] text-[var(--skipo-text-muted)] hover:text-white"}`,
235
+ children: [
236
+ getServiceIcon(svc),
237
+ /* @__PURE__ */ jsx2("span", { children: svc })
238
+ ]
239
+ },
240
+ svc
241
+ )) })
242
+ ] }),
243
+ message && /* @__PURE__ */ jsxs2("div", { className: "p-2 bg-[var(--skipo-bg)] border border-[var(--skipo-accent)] text-[var(--skipo-accent)] text-[10px] flex items-center gap-1.5", children: [
244
+ /* @__PURE__ */ jsx2(CheckCircle, { size: 12 }),
245
+ /* @__PURE__ */ jsx2("span", { children: message })
246
+ ] }),
247
+ /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
248
+ /* @__PURE__ */ jsxs2("form", { onSubmit: handleConnect, className: "flex flex-col gap-2 p-3 border border-[var(--skipo-border-color)] bg-[var(--skipo-bg)]", children: [
249
+ /* @__PURE__ */ jsxs2("span", { className: "font-bold text-[11px] uppercase text-[var(--skipo-accent)]", children: [
250
+ "Link New ",
251
+ activeService.toUpperCase(),
252
+ " Credentials"
253
+ ] }),
254
+ activeService === "github" && /* @__PURE__ */ jsxs2(Fragment, { children: [
255
+ /* @__PURE__ */ jsx2("label", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: "GitHub PAT Token" }),
256
+ /* @__PURE__ */ jsx2(BaseInput, { type: "password", value: tokenInput, onChange: (e) => setTokenInput(e.target.value), placeholder: "ghp_***", required: true }),
257
+ /* @__PURE__ */ jsx2("label", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: "Username (Optional)" }),
258
+ /* @__PURE__ */ jsx2(BaseInput, { value: keyInput, onChange: (e) => setKeyInput(e.target.value), placeholder: "octocat" })
259
+ ] }),
260
+ activeService === "backblaze" && /* @__PURE__ */ jsxs2(Fragment, { children: [
261
+ /* @__PURE__ */ jsx2("label", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: "Key ID" }),
262
+ /* @__PURE__ */ jsx2(BaseInput, { value: keyInput, onChange: (e) => setKeyInput(e.target.value), placeholder: "004b2key001a", required: true }),
263
+ /* @__PURE__ */ jsx2("label", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: "Application Key" }),
264
+ /* @__PURE__ */ jsx2(BaseInput, { type: "password", value: tokenInput, onChange: (e) => setTokenInput(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", required: true }),
265
+ /* @__PURE__ */ jsx2("label", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: "Bucket Target" }),
266
+ /* @__PURE__ */ jsx2(BaseInput, { value: bucketInput, onChange: (e) => setBucketInput(e.target.value), placeholder: "ultrst-apps" })
267
+ ] }),
268
+ activeService === "npm" && /* @__PURE__ */ jsxs2(Fragment, { children: [
269
+ /* @__PURE__ */ jsx2("label", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: "NPM Scope / Org" }),
270
+ /* @__PURE__ */ jsx2(BaseInput, { value: keyInput, onChange: (e) => setKeyInput(e.target.value), placeholder: "@ultrst-armada", required: true }),
271
+ /* @__PURE__ */ jsx2("label", { className: "text-[10px] text-[var(--skipo-text-muted)]", children: "Automation Token" }),
272
+ /* @__PURE__ */ jsx2(BaseInput, { type: "password", value: tokenInput, onChange: (e) => setTokenInput(e.target.value), placeholder: "npm_***", required: true })
273
+ ] }),
274
+ /* @__PURE__ */ jsxs2(BaseButton, { type: "submit", variant: "accent", size: "sm", disabled: loading, className: "font-bold uppercase tracking-wider mt-1", children: [
275
+ "Authorize ",
276
+ activeService.toUpperCase()
277
+ ] })
278
+ ] }),
279
+ /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2 p-3 border border-[var(--skipo-border-color)] bg-[var(--skipo-bg)]", children: [
280
+ /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between pb-1 border-b border-[var(--skipo-border-color)]", children: [
281
+ /* @__PURE__ */ jsxs2("span", { className: "font-bold text-[11px] uppercase text-[var(--skipo-text)]", children: [
282
+ activeService.toUpperCase(),
283
+ " Enclave"
284
+ ] }),
285
+ /* @__PURE__ */ jsxs2(BaseBadge, { variant: "success", children: [
286
+ accounts.length,
287
+ " ACTIVE"
288
+ ] })
289
+ ] }),
290
+ /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-1.5 max-h-40 overflow-y-auto", children: accounts.map((a) => /* @__PURE__ */ jsxs2("div", { className: "p-2 bg-[var(--skipo-surface)] border border-[var(--skipo-border-color)] flex items-center justify-between text-[10px]", children: [
291
+ /* @__PURE__ */ jsxs2("div", { className: "truncate max-w-[200px]", children: [
292
+ /* @__PURE__ */ jsx2("div", { className: "font-bold truncate text-[var(--skipo-text)]", children: a.displayName || a.name || a.identifier }),
293
+ /* @__PURE__ */ jsx2("div", { className: "text-[9px] text-[var(--skipo-text-muted)] truncate", children: a.identifier || a.credentials?.keyId || a.id })
294
+ ] }),
295
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => handleTest(a.id), className: "p-1 border border-[var(--skipo-border-color)] hover:border-[var(--skipo-accent)] text-[var(--skipo-accent)] cursor-pointer", title: "Test Latency", children: /* @__PURE__ */ jsx2(RefreshCw, { size: 11, className: loading ? "animate-spin" : "" }) })
296
+ ] }, a.id)) }),
297
+ testResult && /* @__PURE__ */ jsxs2("div", { className: "p-2 border border-[var(--skipo-accent)] bg-[var(--skipo-surface)] text-[9px]", children: [
298
+ /* @__PURE__ */ jsxs2("div", { className: "font-bold text-[var(--skipo-accent)]", children: [
299
+ testResult.provider?.toUpperCase(),
300
+ " Verified (",
301
+ testResult.latencyMs || 22,
302
+ "ms)"
303
+ ] }),
304
+ /* @__PURE__ */ jsx2("div", { children: testResult.message || "Connected successfully" })
305
+ ] })
306
+ ] })
307
+ ] })
308
+ ] });
309
+ };
310
+
311
+ // src/components/settings/SettingsTab.tsx
312
+ import { useState as useState2 } from "react";
313
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
314
+ var SettingsTab = ({
315
+ appName = "Skipo Application",
316
+ version = "1.0.0",
317
+ systemLogs = [
318
+ "System initialization verified.",
319
+ "Theme engine loaded default tokens.",
320
+ "Ready for user operations."
321
+ ],
322
+ activeWorkspaceName = "Default Workspace",
323
+ onResetDefaults
324
+ }) => {
325
+ const [resetStatus, setResetStatus] = useState2(false);
326
+ const handleReset = () => {
327
+ if (onResetDefaults) onResetDefaults();
328
+ setResetStatus(true);
329
+ setTimeout(() => setResetStatus(false), 2e3);
330
+ };
331
+ return /* @__PURE__ */ jsxs3(
332
+ "div",
333
+ {
334
+ style: {
335
+ display: "flex",
336
+ flexDirection: "column",
337
+ gap: "20px",
338
+ padding: "24px",
339
+ maxWidth: "840px",
340
+ margin: "0 auto",
341
+ width: "100%",
342
+ boxSizing: "border-box"
343
+ },
344
+ children: [
345
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid var(--skipo-border-color, #333)", paddingBottom: "12px" }, children: [
346
+ /* @__PURE__ */ jsxs3("div", { children: [
347
+ /* @__PURE__ */ jsx3("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 900, textTransform: "uppercase", color: "var(--skipo-text)" }, children: "Application Settings" }),
348
+ /* @__PURE__ */ jsx3("p", { style: { margin: "4px 0 0", fontSize: "12px", color: "var(--skipo-text-muted)" }, children: "Manage appearance themes, workspace diagnostics, and runtime telemetry." })
349
+ ] }),
350
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
351
+ /* @__PURE__ */ jsxs3(BaseBadge, { variant: "neutral", children: [
352
+ "v",
353
+ version
354
+ ] }),
355
+ /* @__PURE__ */ jsx3(BaseButton, { size: "sm", variant: resetStatus ? "success" : "secondary", onClick: handleReset, type: "button", children: resetStatus ? "Reset Done" : "Reset Defaults" })
356
+ ] })
357
+ ] }),
358
+ /* @__PURE__ */ jsx3(ThemeSettingsSection, {}),
359
+ /* @__PURE__ */ jsxs3(
360
+ BaseCard,
361
+ {
362
+ variant: "surface",
363
+ depth: "sm",
364
+ style: {
365
+ padding: "16px",
366
+ border: "1px solid var(--skipo-border-color, #333)",
367
+ display: "flex",
368
+ flexDirection: "column",
369
+ gap: "12px"
370
+ },
371
+ children: [
372
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
373
+ /* @__PURE__ */ jsx3("h3", { style: { margin: 0, fontSize: "13px", fontWeight: 800, textTransform: "uppercase", color: "var(--skipo-text)" }, children: "Workspace & Runtime" }),
374
+ /* @__PURE__ */ jsx3(BaseBadge, { variant: "success", children: "ONLINE" })
375
+ ] }),
376
+ /* @__PURE__ */ jsxs3("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px", fontSize: "11px" }, children: [
377
+ /* @__PURE__ */ jsxs3("div", { style: { padding: "8px 10px", backgroundColor: "var(--skipo-bg, #16181d)", borderRadius: "4px", border: "1px solid var(--skipo-border-color, #333)" }, children: [
378
+ /* @__PURE__ */ jsx3("span", { style: { color: "var(--skipo-text-muted)", display: "block", marginBottom: "2px" }, children: "App Target" }),
379
+ /* @__PURE__ */ jsx3("span", { style: { fontWeight: 700, color: "var(--skipo-text)" }, children: appName })
380
+ ] }),
381
+ /* @__PURE__ */ jsxs3("div", { style: { padding: "8px 10px", backgroundColor: "var(--skipo-bg, #16181d)", borderRadius: "4px", border: "1px solid var(--skipo-border-color, #333)" }, children: [
382
+ /* @__PURE__ */ jsx3("span", { style: { color: "var(--skipo-text-muted)", display: "block", marginBottom: "2px" }, children: "Active Context" }),
383
+ /* @__PURE__ */ jsx3("span", { style: { fontWeight: 700, color: "var(--skipo-accent, #d4af37)" }, children: activeWorkspaceName })
384
+ ] })
385
+ ] })
386
+ ]
387
+ }
388
+ ),
389
+ /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
390
+ CopyableLogViewer,
391
+ {
392
+ title: "Runtime Event Logs",
393
+ logs: systemLogs,
394
+ maxHeight: "160px"
395
+ }
396
+ ) })
397
+ ]
398
+ }
399
+ );
400
+ };
401
+ SettingsTab.displayName = "SettingsTab";
402
+
403
+ export {
404
+ ThemeSettingsSection,
405
+ AccountsSettingsSection,
406
+ SettingsTab
407
+ };
@@ -2,6 +2,12 @@ import React__default from 'react';
2
2
 
3
3
  declare const ThemeSettingsSection: React__default.FC;
4
4
 
5
+ interface AccountsSettingsSectionProps {
6
+ relevantServices?: string[];
7
+ userId?: string;
8
+ }
9
+ declare const AccountsSettingsSection: React__default.FC<AccountsSettingsSectionProps>;
10
+
5
11
  interface SettingsTabProps {
6
12
  appName?: string;
7
13
  version?: string;
@@ -11,4 +17,4 @@ interface SettingsTabProps {
11
17
  }
12
18
  declare const SettingsTab: React__default.FC<SettingsTabProps>;
13
19
 
14
- export { SettingsTab, type SettingsTabProps, ThemeSettingsSection };
20
+ export { AccountsSettingsSection, type AccountsSettingsSectionProps, SettingsTab, type SettingsTabProps, ThemeSettingsSection };
@@ -1,12 +1,15 @@
1
1
  import {
2
+ AccountsSettingsSection,
2
3
  SettingsTab,
3
4
  ThemeSettingsSection
4
- } from "../../chunk-ATQPZLJX.js";
5
+ } from "../../chunk-ROILFUZW.js";
5
6
  import "../../chunk-DZJ3NSCX.js";
6
7
  import "../../chunk-RLQ2ALJG.js";
7
8
  import "../../chunk-UOR4P6PO.js";
9
+ import "../../chunk-W42SJGOJ.js";
8
10
  import "../../chunk-A2CDQISJ.js";
9
11
  export {
12
+ AccountsSettingsSection,
10
13
  SettingsTab,
11
14
  ThemeSettingsSection
12
15
  };
@@ -6,7 +6,7 @@ export { ConfirmDialog, ConfirmDialogProps, CopyableErrorAlert, CopyableErrorAle
6
6
  export { AppShell, AppShellProps, BreadcrumbNav, BreadcrumbNavProps, HeaderBar, HeaderBarProps, TopToolbar, TopToolbarProps, TopToolbarTab } from './components/layout/index.js';
7
7
  export { ApiCallIndicator, ApiCallIndicatorProps, AutoSaveStatus, AutoSaveToggle, AutoSaveToggleProps, BottomStripContextValue, BottomStripProvider, BottomStripProviderProps, StatusLight, StatusLightProps, SystemMessage, SystemMessageDisplay, SystemMessageDisplayProps, SystemMessageType, useBottomStrip } from './components/bottom-strip/index.js';
8
8
  export { B as BottomStrip, a as BottomStripProps } from './BottomStrip-DYhAUQR4.js';
9
- export { SettingsTab, SettingsTabProps, ThemeSettingsSection } from './components/settings/index.js';
9
+ export { AccountsSettingsSection, AccountsSettingsSectionProps, SettingsTab, SettingsTabProps, ThemeSettingsSection } from './components/settings/index.js';
10
10
  export { LoginModal, LoginModalProps } from './components/auth/index.js';
11
11
  export { SrklBackblazeAccount, SrklBackblazeTile, StorageOptionTiles, StoragePresetTile, StorageSelection, WorkspaceRecord, WorkspaceSecondaryClone, WorkspaceSecondaryClonesPanel, WorkspaceStorageReadonlyPanel, WorkspaceTilesMenu, WorkspaceTilesMenuProps } from './components/workspace/index.js';
12
12
  export { DEFAULT_PALETTE_ID, THEME_STORAGE_KEY, ThemeContextValue, ThemeProvider, ThemeProviderProps, applyPaletteToDocument, getActivePalette, paletteToSkipoThemePack, subscribeToPalette, usePalette, useTheme } from './palette/index.js';
@@ -19,9 +19,10 @@ import {
19
19
  TopToolbar
20
20
  } from "./chunk-GWW3BGOB.js";
21
21
  import {
22
+ AccountsSettingsSection,
22
23
  SettingsTab,
23
24
  ThemeSettingsSection
24
- } from "./chunk-ATQPZLJX.js";
25
+ } from "./chunk-ROILFUZW.js";
25
26
  import {
26
27
  SrklBackblazeTile,
27
28
  StorageOptionTiles,
@@ -179,6 +180,7 @@ import {
179
180
  BaseButton
180
181
  } from "./chunk-A2CDQISJ.js";
181
182
  export {
183
+ AccountsSettingsSection,
182
184
  ActionButton,
183
185
  ApiCallIndicator,
184
186
  AppShell,
@@ -1,238 +0,0 @@
1
- import {
2
- DEFAULT_DARK_THEME_PACK,
3
- DEFAULT_LIGHT_THEME_PACK,
4
- useSkipoTheme
5
- } from "./chunk-DZJ3NSCX.js";
6
- import {
7
- CopyableLogViewer
8
- } from "./chunk-RLQ2ALJG.js";
9
- import {
10
- BaseBadge,
11
- BaseCard
12
- } from "./chunk-UOR4P6PO.js";
13
- import {
14
- BaseButton
15
- } from "./chunk-A2CDQISJ.js";
16
-
17
- // src/components/settings/ThemeSettingsSection.tsx
18
- import { jsx, jsxs } from "react/jsx-runtime";
19
- var AVAILABLE_PACKS = [
20
- { id: "skipo-dark-neo", name: "Dark Neo", mode: "dark", pack: DEFAULT_DARK_THEME_PACK },
21
- { id: "skipo-light-neo", name: "Light Neo", mode: "light", pack: DEFAULT_LIGHT_THEME_PACK }
22
- ];
23
- var ACCENT_COLORS = [
24
- { name: "Gold", value: "#d4af37" },
25
- { name: "Blue", value: "#3b82f6" },
26
- { name: "Emerald", value: "#10b981" },
27
- { name: "Cyan", value: "#00d9ff" },
28
- { name: "Purple", value: "#a855f7" }
29
- ];
30
- var ThemeSettingsSection = () => {
31
- const { theme, themePack, setTheme, setThemePack } = useSkipoTheme();
32
- const handleAccentChange = (hex) => {
33
- if (typeof document !== "undefined") {
34
- document.documentElement.style.setProperty("--skipo-accent", hex);
35
- document.documentElement.style.setProperty("--skipo-accent-glow", `0 0 14px ${hex}66`);
36
- }
37
- };
38
- return /* @__PURE__ */ jsxs(
39
- BaseCard,
40
- {
41
- variant: "surface",
42
- depth: "sm",
43
- style: {
44
- padding: "16px",
45
- border: "1px solid var(--skipo-border-color, #333)",
46
- display: "flex",
47
- flexDirection: "column",
48
- gap: "16px"
49
- },
50
- children: [
51
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
52
- /* @__PURE__ */ jsxs("div", { children: [
53
- /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "13px", fontWeight: 800, textTransform: "uppercase", color: "var(--skipo-text)" }, children: "Appearance & Theming" }),
54
- /* @__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." })
55
- ] }),
56
- /* @__PURE__ */ jsxs(BaseBadge, { variant: "neutral", style: { fontSize: "10px" }, children: [
57
- theme.toUpperCase(),
58
- " MODE"
59
- ] })
60
- ] }),
61
- /* @__PURE__ */ jsxs("div", { children: [
62
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", fontWeight: 700, marginBottom: "6px", color: "var(--skipo-text)" }, children: "Color Mode" }),
63
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
64
- /* @__PURE__ */ jsx(
65
- BaseButton,
66
- {
67
- size: "sm",
68
- variant: theme === "dark" ? "accent" : "secondary",
69
- onClick: () => setTheme("dark"),
70
- type: "button",
71
- children: "Dark Mode"
72
- }
73
- ),
74
- /* @__PURE__ */ jsx(
75
- BaseButton,
76
- {
77
- size: "sm",
78
- variant: theme === "light" ? "accent" : "secondary",
79
- onClick: () => setTheme("light"),
80
- type: "button",
81
- children: "Light Mode"
82
- }
83
- )
84
- ] })
85
- ] }),
86
- /* @__PURE__ */ jsxs("div", { children: [
87
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", fontWeight: 700, marginBottom: "6px", color: "var(--skipo-text)" }, children: "Theme Pack Preset" }),
88
- /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(130px, 1fr))", gap: "8px" }, children: AVAILABLE_PACKS.map((p) => {
89
- const isSelected = themePack?.metadata?.id === p.id;
90
- return /* @__PURE__ */ jsxs(
91
- "div",
92
- {
93
- onClick: () => setThemePack(p.pack),
94
- style: {
95
- padding: "8px 10px",
96
- borderRadius: "6px",
97
- border: isSelected ? "2px solid var(--skipo-accent, #d4af37)" : "1px solid var(--skipo-border-color, #444)",
98
- backgroundColor: isSelected ? "rgba(212, 175, 55, 0.12)" : "var(--skipo-bg, #16181d)",
99
- cursor: "pointer",
100
- transition: "all 0.15s ease"
101
- },
102
- children: [
103
- /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", fontWeight: 700, color: isSelected ? "var(--skipo-accent)" : "var(--skipo-text)" }, children: p.name }),
104
- /* @__PURE__ */ jsxs("div", { style: { fontSize: "9px", color: "var(--skipo-text-muted)", textTransform: "capitalize" }, children: [
105
- p.mode,
106
- " Preset"
107
- ] })
108
- ]
109
- },
110
- p.id
111
- );
112
- }) })
113
- ] }),
114
- /* @__PURE__ */ jsxs("div", { children: [
115
- /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", fontWeight: 700, marginBottom: "6px", color: "var(--skipo-text)" }, children: "Accent Highlight" }),
116
- /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: ACCENT_COLORS.map((c) => /* @__PURE__ */ jsx(
117
- "button",
118
- {
119
- type: "button",
120
- title: c.name,
121
- "aria-label": c.name,
122
- onClick: () => handleAccentChange(c.value),
123
- style: {
124
- width: "24px",
125
- height: "24px",
126
- borderRadius: "50%",
127
- backgroundColor: c.value,
128
- border: "2px solid rgba(255, 255, 255, 0.8)",
129
- cursor: "pointer",
130
- boxShadow: "0 2px 4px rgba(0, 0, 0, 0.4)",
131
- transition: "transform 0.1s ease"
132
- }
133
- },
134
- c.name
135
- )) })
136
- ] })
137
- ]
138
- }
139
- );
140
- };
141
- ThemeSettingsSection.displayName = "ThemeSettingsSection";
142
-
143
- // src/components/settings/SettingsTab.tsx
144
- import { useState } from "react";
145
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
146
- var SettingsTab = ({
147
- appName = "Skipo Application",
148
- version = "1.0.0",
149
- systemLogs = [
150
- "System initialization verified.",
151
- "Theme engine loaded default tokens.",
152
- "Ready for user operations."
153
- ],
154
- activeWorkspaceName = "Default Workspace",
155
- onResetDefaults
156
- }) => {
157
- const [resetStatus, setResetStatus] = useState(false);
158
- const handleReset = () => {
159
- if (onResetDefaults) onResetDefaults();
160
- setResetStatus(true);
161
- setTimeout(() => setResetStatus(false), 2e3);
162
- };
163
- return /* @__PURE__ */ jsxs2(
164
- "div",
165
- {
166
- style: {
167
- display: "flex",
168
- flexDirection: "column",
169
- gap: "20px",
170
- padding: "24px",
171
- maxWidth: "840px",
172
- margin: "0 auto",
173
- width: "100%",
174
- boxSizing: "border-box"
175
- },
176
- children: [
177
- /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid var(--skipo-border-color, #333)", paddingBottom: "12px" }, children: [
178
- /* @__PURE__ */ jsxs2("div", { children: [
179
- /* @__PURE__ */ jsx2("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 900, textTransform: "uppercase", color: "var(--skipo-text)" }, children: "Application Settings" }),
180
- /* @__PURE__ */ jsx2("p", { style: { margin: "4px 0 0", fontSize: "12px", color: "var(--skipo-text-muted)" }, children: "Manage appearance themes, workspace diagnostics, and runtime telemetry." })
181
- ] }),
182
- /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
183
- /* @__PURE__ */ jsxs2(BaseBadge, { variant: "neutral", children: [
184
- "v",
185
- version
186
- ] }),
187
- /* @__PURE__ */ jsx2(BaseButton, { size: "sm", variant: resetStatus ? "success" : "secondary", onClick: handleReset, type: "button", children: resetStatus ? "Reset Done" : "Reset Defaults" })
188
- ] })
189
- ] }),
190
- /* @__PURE__ */ jsx2(ThemeSettingsSection, {}),
191
- /* @__PURE__ */ jsxs2(
192
- BaseCard,
193
- {
194
- variant: "surface",
195
- depth: "sm",
196
- style: {
197
- padding: "16px",
198
- border: "1px solid var(--skipo-border-color, #333)",
199
- display: "flex",
200
- flexDirection: "column",
201
- gap: "12px"
202
- },
203
- children: [
204
- /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
205
- /* @__PURE__ */ jsx2("h3", { style: { margin: 0, fontSize: "13px", fontWeight: 800, textTransform: "uppercase", color: "var(--skipo-text)" }, children: "Workspace & Runtime" }),
206
- /* @__PURE__ */ jsx2(BaseBadge, { variant: "success", children: "ONLINE" })
207
- ] }),
208
- /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px", fontSize: "11px" }, children: [
209
- /* @__PURE__ */ jsxs2("div", { style: { padding: "8px 10px", backgroundColor: "var(--skipo-bg, #16181d)", borderRadius: "4px", border: "1px solid var(--skipo-border-color, #333)" }, children: [
210
- /* @__PURE__ */ jsx2("span", { style: { color: "var(--skipo-text-muted)", display: "block", marginBottom: "2px" }, children: "App Target" }),
211
- /* @__PURE__ */ jsx2("span", { style: { fontWeight: 700, color: "var(--skipo-text)" }, children: appName })
212
- ] }),
213
- /* @__PURE__ */ jsxs2("div", { style: { padding: "8px 10px", backgroundColor: "var(--skipo-bg, #16181d)", borderRadius: "4px", border: "1px solid var(--skipo-border-color, #333)" }, children: [
214
- /* @__PURE__ */ jsx2("span", { style: { color: "var(--skipo-text-muted)", display: "block", marginBottom: "2px" }, children: "Active Context" }),
215
- /* @__PURE__ */ jsx2("span", { style: { fontWeight: 700, color: "var(--skipo-accent, #d4af37)" }, children: activeWorkspaceName })
216
- ] })
217
- ] })
218
- ]
219
- }
220
- ),
221
- /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
222
- CopyableLogViewer,
223
- {
224
- title: "Runtime Event Logs",
225
- logs: systemLogs,
226
- maxHeight: "160px"
227
- }
228
- ) })
229
- ]
230
- }
231
- );
232
- };
233
- SettingsTab.displayName = "SettingsTab";
234
-
235
- export {
236
- ThemeSettingsSection,
237
- SettingsTab
238
- };