@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/SettingsPage.js

@@ -0,0 +1,655 @@
+import { useConfigureLLMProvider as e, useLLMModels as t, useLLMProviders as n } from "../hooks/useLLMProviders.js";
+import { cn as r } from "../utils/cn.js";
+import { PageLayout as i } from "../components/PageLayout.js";
+import { Card as a, CardContent as o, CardDescription as s, CardHeader as c, CardTitle as l } from "../components/Card.js";
+import { Button as u } from "../components/Button.js";
+import { Badge as d } from "../components/Badge.js";
+import { FormField as f, Input as p } from "../components/Input.js";
+import { toUnion as m } from "../utils/unions.js";
+import { useState as h } from "react";
+import { PagePurpose as g } from "@burdenoff/fe-libs/ui";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Bell as b, Brain as x, Database as S, ExternalLink as C, Key as w, Link2 as T, Palette as E, Save as D, Shield as O } from "lucide-react";
+import { toast as k } from "sonner";
+import { useTheme as A } from "@burdenoff/fe-libs/shared/providers/shell";
+//#region src/botlit/pages/SettingsPage.tsx
+var j = [
+	"OPENAI",
+	"ANTHROPIC",
+	"GOOGLE",
+	"AZURE_OPENAI",
+	"AWS_BEDROCK",
+	"CUSTOM"
+];
+function M(e) {
+	return m(e.toUpperCase(), j, "CUSTOM");
+}
+var N = () => {
+	let { data: m, refetch: j } = n(), { configureProvider: N, isConfiguring: P } = e(), { data: F } = t(), { mode: ee, setMode: I } = A(), [L, R] = h("providers"), [z, B] = h(""), [V, H] = h("openai"), [U, W] = h(null), [G, K] = h("apikey"), [q, J] = h(""), [Y, X] = h(""), [Z, Q] = h(""), [te, ne] = h("128000"), [re, ie] = h("4096"), [ae, oe] = h("2.5"), [$, se] = h("10"), [ce, le] = h("");
+	return /* @__PURE__ */ v(i, {
+		title: "Settings",
+		description: "Configure your Botlit workspace settings",
+		children: /* @__PURE__ */ y("div", {
+			className: "space-y-6",
+			children: [/* @__PURE__ */ v(g, {
+				icon: /* @__PURE__ */ v(w, { size: 18 }),
+				children: "Workspace-wide settings that affect every bot and agent you build. The most important is LLM Providers — connect at least one model provider (OpenAI, Anthropic, Google and others) so your agents have a brain to think with. From here you also manage models, notifications, security keys, storage retention and appearance."
+			}), /* @__PURE__ */ y("div", {
+				className: "grid grid-cols-12 gap-6",
+				children: [/* @__PURE__ */ v("div", {
+					className: "col-span-3",
+					children: /* @__PURE__ */ v(a, { children: /* @__PURE__ */ v(o, {
+						className: "p-2",
+						children: [
+							{
+								id: "providers",
+								label: "LLM Providers",
+								icon: /* @__PURE__ */ v(w, { size: 16 })
+							},
+							{
+								id: "notifications",
+								label: "Notifications",
+								icon: /* @__PURE__ */ v(b, { size: 16 })
+							},
+							{
+								id: "security",
+								label: "Security",
+								icon: /* @__PURE__ */ v(O, { size: 16 })
+							},
+							{
+								id: "storage",
+								label: "Storage",
+								icon: /* @__PURE__ */ v(S, { size: 16 })
+							},
+							{
+								id: "appearance",
+								label: "Appearance",
+								icon: /* @__PURE__ */ v(E, { size: 16 })
+							}
+						].map((e) => /* @__PURE__ */ y("button", {
+							onClick: () => R(e.id),
+							className: r("w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-colors", L === e.id ? "bg-action-primary-bg text-action-primary-text" : "hover:bg-accent"),
+							children: [e.icon, /* @__PURE__ */ v("span", {
+								className: "font-medium",
+								children: e.label
+							})]
+						}, e.id))
+					}) })
+				}), /* @__PURE__ */ y("div", {
+					className: "col-span-9 space-y-6",
+					children: [
+						L === "providers" && /* @__PURE__ */ y(_, { children: [
+							/* @__PURE__ */ y(a, {
+								treatment: "glass",
+								glow: !0,
+								children: [/* @__PURE__ */ y(c, { children: [/* @__PURE__ */ v(l, { children: "LLM Providers" }), /* @__PURE__ */ v(s, { children: "Configure API keys for AI model providers" })] }), /* @__PURE__ */ v(o, {
+									className: "space-y-4",
+									children: m?.map((e) => /* @__PURE__ */ y("div", {
+										className: "flex items-center justify-between p-4 border border-border-subtle rounded-lg",
+										children: [/* @__PURE__ */ y("div", {
+											className: "flex items-center gap-4",
+											children: [/* @__PURE__ */ v("div", {
+												className: "p-2 bg-action-primary-bg/10 rounded-lg",
+												children: e.connectionId ? /* @__PURE__ */ v(T, { className: "h-5 w-5 text-primary" }) : /* @__PURE__ */ v(w, { className: "h-5 w-5 text-primary" })
+											}), /* @__PURE__ */ y("div", { children: [
+												/* @__PURE__ */ v("p", {
+													className: "font-medium",
+													children: e.name
+												}),
+												/* @__PURE__ */ y("p", {
+													className: "text-sm text-text-secondary",
+													children: ["Type: ", e.type]
+												}),
+												e.connectionId && /* @__PURE__ */ v("p", {
+													className: "text-xs text-text-secondary mt-0.5",
+													children: "Connected via Integrations"
+												}),
+												!e.connectionId && e.credentialsHash && /* @__PURE__ */ v("p", {
+													className: "text-xs text-text-secondary mt-0.5",
+													children: "API key stored locally"
+												})
+											] })]
+										}), /* @__PURE__ */ y("div", {
+											className: "flex items-center gap-3",
+											children: [
+												e.connectionId && /* @__PURE__ */ v(d, {
+													variant: "default",
+													children: "Integration"
+												}),
+												/* @__PURE__ */ v(d, {
+													variant: e.isActive ? "success" : "secondary",
+													children: e.isActive ? "Active" : "Inactive"
+												}),
+												/* @__PURE__ */ v(u, {
+													variant: "outline",
+													size: "sm",
+													onClick: () => {
+														W(e.id), H(e.type.toLowerCase()), B(""), J(e.connectionId || ""), K(e.connectionId ? "integration" : "apikey"), document.getElementById("provider-form")?.scrollIntoView({ behavior: "smooth" });
+													},
+													children: "Configure"
+												})
+											]
+										})]
+									}, e.id))
+								})]
+							}),
+							/* @__PURE__ */ y(a, { children: [/* @__PURE__ */ y(c, { children: [/* @__PURE__ */ v(l, { children: "LLM Models" }), /* @__PURE__ */ v(s, { children: "Registered models across your providers" })] }), /* @__PURE__ */ v(o, {
+								className: "space-y-4",
+								children: F && F.length > 0 ? F.map((e) => {
+									let t = m?.find((t) => t.id === e.providerId)?.name;
+									return /* @__PURE__ */ y("div", {
+										className: "flex items-center justify-between p-4 border border-border-subtle rounded-lg",
+										children: [/* @__PURE__ */ y("div", {
+											className: "flex items-center gap-4",
+											children: [/* @__PURE__ */ v("div", {
+												className: "p-2 bg-purple-500/10 rounded-lg",
+												children: /* @__PURE__ */ v(x, { className: "h-5 w-5 text-purple-500" })
+											}), /* @__PURE__ */ y("div", { children: [
+												/* @__PURE__ */ v("p", {
+													className: "font-medium",
+													children: e.name
+												}),
+												/* @__PURE__ */ y("p", {
+													className: "text-sm text-text-secondary",
+													children: [e.modelId, t && ` · ${t}`]
+												}),
+												/* @__PURE__ */ y("div", {
+													className: "flex gap-3 mt-1 text-xs text-text-secondary",
+													children: [
+														e.contextWindow != null && /* @__PURE__ */ y("span", { children: [
+															"Context: ",
+															(e.contextWindow / 1e3).toFixed(0),
+															"K"
+														] }),
+														e.maxOutputTokens != null && /* @__PURE__ */ y("span", { children: [
+															"Max out: ",
+															(e.maxOutputTokens / 1e3).toFixed(0),
+															"K"
+														] }),
+														e.inputPricePerMToken != null && /* @__PURE__ */ y("span", { children: [
+															"$",
+															e.inputPricePerMToken,
+															"/M in"
+														] }),
+														e.outputPricePerMToken != null && /* @__PURE__ */ y("span", { children: [
+															"$",
+															e.outputPricePerMToken,
+															"/M out"
+														] })
+													]
+												})
+											] })]
+										}), /* @__PURE__ */ v(d, {
+											variant: e.isActive ? "success" : "secondary",
+											children: e.isActive ? "Active" : "Inactive"
+										})]
+									}, e.id);
+								}) : /* @__PURE__ */ v("p", {
+									className: "text-sm text-text-secondary text-center py-4",
+									children: "No models registered yet. Add a model below."
+								})
+							})] }),
+							/* @__PURE__ */ y(a, {
+								id: "provider-form",
+								children: [/* @__PURE__ */ y(c, { children: [/* @__PURE__ */ v(l, { children: U ? "Update Provider" : "Add Provider" }), /* @__PURE__ */ v(s, { children: U ? "Update credentials for this provider" : "Configure a new LLM provider" })] }), /* @__PURE__ */ y(o, {
+									className: "space-y-4",
+									children: [
+										/* @__PURE__ */ v(f, {
+											label: "Provider",
+											children: /* @__PURE__ */ y("select", {
+												className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+												value: V,
+												onChange: (e) => H(e.target.value),
+												children: [
+													/* @__PURE__ */ v("option", {
+														value: "openai",
+														children: "OpenAI"
+													}),
+													/* @__PURE__ */ v("option", {
+														value: "anthropic",
+														children: "Anthropic"
+													}),
+													/* @__PURE__ */ v("option", {
+														value: "google",
+														children: "Google AI"
+													}),
+													/* @__PURE__ */ v("option", {
+														value: "azure_openai",
+														children: "Azure OpenAI"
+													}),
+													/* @__PURE__ */ v("option", {
+														value: "aws_bedrock",
+														children: "AWS Bedrock"
+													}),
+													/* @__PURE__ */ v("option", {
+														value: "custom",
+														children: "Custom"
+													})
+												]
+											})
+										}),
+										/* @__PURE__ */ v(f, {
+											label: "Credential Method",
+											children: /* @__PURE__ */ y("div", {
+												className: "flex gap-3",
+												children: [/* @__PURE__ */ y("label", {
+													className: r("flex items-center gap-2 px-4 py-3 border rounded-lg cursor-pointer transition-colors flex-1", G === "integration" ? "border-primary bg-action-primary-bg/5" : "border-border-subtle hover:border-primary/50"),
+													children: [/* @__PURE__ */ v("input", {
+														type: "radio",
+														name: "credentialMethod",
+														value: "integration",
+														checked: G === "integration",
+														onChange: () => K("integration"),
+														className: "h-4 w-4"
+													}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+														className: "font-medium text-sm",
+														children: "Connect via Integrations"
+													}), /* @__PURE__ */ v("p", {
+														className: "text-xs text-text-secondary",
+														children: "Managed credentials (recommended)"
+													})] })]
+												}), /* @__PURE__ */ y("label", {
+													className: r("flex items-center gap-2 px-4 py-3 border rounded-lg cursor-pointer transition-colors flex-1", G === "apikey" ? "border-primary bg-action-primary-bg/5" : "border-border-subtle hover:border-primary/50"),
+													children: [/* @__PURE__ */ v("input", {
+														type: "radio",
+														name: "credentialMethod",
+														value: "apikey",
+														checked: G === "apikey",
+														onChange: () => K("apikey"),
+														className: "h-4 w-4"
+													}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+														className: "font-medium text-sm",
+														children: "Enter API Key"
+													}), /* @__PURE__ */ v("p", {
+														className: "text-xs text-text-secondary",
+														children: "Paste key directly (legacy)"
+													})] })]
+												})]
+											})
+										}),
+										G === "integration" && /* @__PURE__ */ y("div", {
+											className: "space-y-3",
+											children: [/* @__PURE__ */ v("div", {
+												className: "p-4 bg-bg-sunken/50 border border-border-subtle rounded-lg",
+												children: /* @__PURE__ */ y("div", {
+													className: "flex items-start gap-3",
+													children: [/* @__PURE__ */ v(T, { className: "h-5 w-5 text-primary mt-0.5 flex-shrink-0" }), /* @__PURE__ */ y("div", {
+														className: "space-y-2 flex-1",
+														children: [
+															/* @__PURE__ */ v("p", {
+																className: "text-sm font-medium",
+																children: "Integration Connection"
+															}),
+															/* @__PURE__ */ v("p", {
+																className: "text-xs text-text-secondary",
+																children: "Create a connection in the Integrations module, then paste the Connection ID here. This stores your API key securely in the Integrations vault."
+															}),
+															/* @__PURE__ */ v("div", {
+																className: "flex gap-2 mt-2",
+																children: /* @__PURE__ */ y(u, {
+																	variant: "outline",
+																	size: "sm",
+																	onClick: () => {
+																		window.open("/integrations/connections", "_blank");
+																	},
+																	children: [/* @__PURE__ */ v(C, {
+																		size: 14,
+																		className: "mr-1.5"
+																	}), "Open Integrations"]
+																})
+															})
+														]
+													})]
+												})
+											}), /* @__PURE__ */ v(f, {
+												label: "Connection ID",
+												children: /* @__PURE__ */ v(p, {
+													placeholder: "Paste connection ID from Integrations...",
+													value: q,
+													onChange: (e) => J(e.target.value)
+												})
+											})]
+										}),
+										G === "apikey" && /* @__PURE__ */ v(f, {
+											label: "API Key",
+											children: /* @__PURE__ */ v(p, {
+												type: "password",
+												placeholder: "sk-...",
+												value: z,
+												onChange: (e) => B(e.target.value)
+											})
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "flex gap-2",
+											children: [/* @__PURE__ */ v(u, {
+												leftIcon: /* @__PURE__ */ v(D, { size: 16 }),
+												isLoading: P,
+												disabled: G === "apikey" ? !z : !q,
+												onClick: async () => {
+													try {
+														let e = V.charAt(0).toUpperCase() + V.slice(1), t = G === "integration" ? void 0 : z ? { apiKey: z } : void 0, n = G === "integration" ? q : void 0;
+														U ? await N({
+															name: e,
+															type: M(V),
+															connectionId: n,
+															credentials: t
+														}, U) : await N({
+															name: e,
+															type: M(V),
+															connectionId: n,
+															credentials: t
+														}), B(""), J(""), W(null), await j();
+														let r = V.charAt(0).toUpperCase() + V.slice(1);
+														k.success(U ? `${r} provider updated successfully` : `${r} provider added successfully`);
+													} catch (e) {
+														let t = e instanceof Error ? e.message : "Failed to save provider";
+														k.error(t);
+													}
+												},
+												children: U ? "Update Provider" : "Save Provider"
+											}), U && /* @__PURE__ */ v(u, {
+												variant: "outline",
+												onClick: () => {
+													W(null), B(""), J(""), K("apikey"), H("openai");
+												},
+												children: "Cancel"
+											})]
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ y(a, { children: [/* @__PURE__ */ y(c, { children: [/* @__PURE__ */ v(l, { children: "Add Model" }), /* @__PURE__ */ v(s, { children: "Register a new LLM model for an existing provider" })] }), /* @__PURE__ */ y(o, {
+								className: "space-y-4",
+								children: [
+									/* @__PURE__ */ v(f, {
+										label: "Provider",
+										children: /* @__PURE__ */ y("select", {
+											className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+											value: ce,
+											onChange: (e) => le(e.target.value),
+											children: [/* @__PURE__ */ v("option", {
+												value: "",
+												children: "Select a provider..."
+											}), m?.map((e) => /* @__PURE__ */ v("option", {
+												value: e.id,
+												children: e.name
+											}, e.id))]
+										})
+									}),
+									/* @__PURE__ */ v(f, {
+										label: "Model Name",
+										children: /* @__PURE__ */ v(p, {
+											placeholder: "e.g., GPT-4o",
+											value: Y,
+											onChange: (e) => X(e.target.value)
+										})
+									}),
+									/* @__PURE__ */ v(f, {
+										label: "Model ID",
+										children: /* @__PURE__ */ v(p, {
+											placeholder: "e.g., gpt-4o",
+											value: Z,
+											onChange: (e) => Q(e.target.value)
+										})
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "grid grid-cols-2 gap-4",
+										children: [/* @__PURE__ */ v(f, {
+											label: "Context Window",
+											children: /* @__PURE__ */ v(p, {
+												type: "number",
+												value: te,
+												onChange: (e) => ne(e.target.value)
+											})
+										}), /* @__PURE__ */ v(f, {
+											label: "Max Output Tokens",
+											children: /* @__PURE__ */ v(p, {
+												type: "number",
+												value: re,
+												onChange: (e) => ie(e.target.value)
+											})
+										})]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "grid grid-cols-2 gap-4",
+										children: [/* @__PURE__ */ v(f, {
+											label: "Input Price / 1M tokens",
+											children: /* @__PURE__ */ v(p, {
+												type: "number",
+												step: "0.01",
+												value: ae,
+												onChange: (e) => oe(e.target.value)
+											})
+										}), /* @__PURE__ */ v(f, {
+											label: "Output Price / 1M tokens",
+											children: /* @__PURE__ */ v(p, {
+												type: "number",
+												step: "0.01",
+												value: $,
+												onChange: (e) => se(e.target.value)
+											})
+										})]
+									}),
+									/* @__PURE__ */ v(u, {
+										leftIcon: /* @__PURE__ */ v(D, { size: 16 }),
+										disabled: !0,
+										onClick: async () => {
+											k.error("Model creation not yet implemented");
+										},
+										children: "Add Model"
+									})
+								]
+							})] })
+						] }),
+						L === "notifications" && /* @__PURE__ */ y(a, { children: [/* @__PURE__ */ y(c, { children: [/* @__PURE__ */ v(l, { children: "Notification Settings" }), /* @__PURE__ */ v(s, { children: "Configure how you receive notifications" })] }), /* @__PURE__ */ v(o, {
+							className: "space-y-4",
+							children: [
+								{
+									label: "Agent errors",
+									description: "Get notified when an agent encounters an error"
+								},
+								{
+									label: "High usage alerts",
+									description: "Alerts when token usage exceeds thresholds"
+								},
+								{
+									label: "Weekly reports",
+									description: "Receive weekly usage summaries"
+								},
+								{
+									label: "New conversation",
+									description: "Notify when a new conversation starts"
+								}
+							].map((e) => /* @__PURE__ */ y("label", {
+								className: "flex items-center justify-between p-4 border border-border-subtle rounded-lg cursor-pointer",
+								children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+									className: "font-medium",
+									children: e.label
+								}), /* @__PURE__ */ v("p", {
+									className: "text-sm text-text-secondary",
+									children: e.description
+								})] }), /* @__PURE__ */ v("input", {
+									type: "checkbox",
+									className: "h-5 w-5 rounded",
+									defaultChecked: !0
+								})]
+							}, e.label))
+						})] }),
+						L === "security" && /* @__PURE__ */ y(a, { children: [/* @__PURE__ */ y(c, { children: [/* @__PURE__ */ v(l, { children: "Security Settings" }), /* @__PURE__ */ v(s, { children: "Manage security and access controls" })] }), /* @__PURE__ */ y(o, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ v(f, {
+									label: "API Key",
+									children: /* @__PURE__ */ y("div", {
+										className: "flex gap-2",
+										children: [/* @__PURE__ */ v(p, {
+											type: "password",
+											value: "••••••••••••••••",
+											readOnly: !0
+										}), /* @__PURE__ */ v(u, {
+											variant: "outline",
+											children: "Regenerate"
+										})]
+									})
+								}),
+								/* @__PURE__ */ v(f, {
+									label: "Webhook Secret",
+									children: /* @__PURE__ */ y("div", {
+										className: "flex gap-2",
+										children: [/* @__PURE__ */ v(p, {
+											type: "password",
+											value: "••••••••••••••••",
+											readOnly: !0
+										}), /* @__PURE__ */ v(u, {
+											variant: "outline",
+											children: "Regenerate"
+										})]
+									})
+								}),
+								/* @__PURE__ */ v(f, {
+									label: "Allowed Origins (CORS)",
+									children: /* @__PURE__ */ v(p, { placeholder: "https://example.com" })
+								})
+							]
+						})] }),
+						L === "storage" && /* @__PURE__ */ y(a, { children: [/* @__PURE__ */ y(c, { children: [/* @__PURE__ */ v(l, { children: "Storage Settings" }), /* @__PURE__ */ v(s, { children: "Configure data storage and retention" })] }), /* @__PURE__ */ y(o, {
+							className: "space-y-4",
+							children: [/* @__PURE__ */ y("div", {
+								className: "grid grid-cols-3 gap-4",
+								children: [
+									/* @__PURE__ */ y("div", {
+										className: "p-4 bg-bg-sunken rounded-lg text-center",
+										children: [/* @__PURE__ */ v("p", {
+											className: "text-2xl font-bold",
+											children: "45.2 GB"
+										}), /* @__PURE__ */ v("p", {
+											className: "text-sm text-text-secondary",
+											children: "Total Storage"
+										})]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "p-4 bg-bg-sunken rounded-lg text-center",
+										children: [/* @__PURE__ */ v("p", {
+											className: "text-2xl font-bold",
+											children: "12.8 GB"
+										}), /* @__PURE__ */ v("p", {
+											className: "text-sm text-text-secondary",
+											children: "Conversations"
+										})]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "p-4 bg-bg-sunken rounded-lg text-center",
+										children: [/* @__PURE__ */ v("p", {
+											className: "text-2xl font-bold",
+											children: "32.4 GB"
+										}), /* @__PURE__ */ v("p", {
+											className: "text-sm text-text-secondary",
+											children: "Knowledge Bases"
+										})]
+									})
+								]
+							}), /* @__PURE__ */ v(f, {
+								label: "Conversation Retention",
+								children: /* @__PURE__ */ y("select", {
+									className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+									children: [
+										/* @__PURE__ */ v("option", {
+											value: "30",
+											children: "30 days"
+										}),
+										/* @__PURE__ */ v("option", {
+											value: "90",
+											children: "90 days"
+										}),
+										/* @__PURE__ */ v("option", {
+											value: "180",
+											children: "180 days"
+										}),
+										/* @__PURE__ */ v("option", {
+											value: "365",
+											children: "1 year"
+										}),
+										/* @__PURE__ */ v("option", {
+											value: "forever",
+											children: "Forever"
+										})
+									]
+								})
+							})]
+						})] }),
+						L === "appearance" && /* @__PURE__ */ y(a, { children: [/* @__PURE__ */ y(c, { children: [/* @__PURE__ */ v(l, { children: "Appearance Settings" }), /* @__PURE__ */ v(s, { children: "Customize the look and feel" })] }), /* @__PURE__ */ y(o, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ v(f, {
+									label: "Theme",
+									children: /* @__PURE__ */ v("div", {
+										className: "flex gap-4",
+										children: [
+											"light",
+											"dark",
+											"system"
+										].map((e) => /* @__PURE__ */ y("label", {
+											className: "flex items-center gap-2 cursor-pointer",
+											children: [/* @__PURE__ */ v("input", {
+												type: "radio",
+												name: "theme",
+												value: e,
+												checked: ee === e,
+												onChange: () => I(e),
+												className: "h-4 w-4"
+											}), /* @__PURE__ */ v("span", {
+												className: "capitalize",
+												children: e
+											})]
+										}, e))
+									})
+								}),
+								/* @__PURE__ */ v(f, {
+									label: "Accent Color",
+									children: /* @__PURE__ */ v("div", {
+										className: "flex gap-2",
+										children: [
+											"#3b82f6",
+											"#8b5cf6",
+											"#22c55e",
+											"#f59e0b",
+											"#ef4444",
+											"#ec4899"
+										].map((e) => /* @__PURE__ */ v("button", {
+											className: "h-8 w-8 rounded-full border-2 border-transparent hover:border-foreground",
+											style: { backgroundColor: e }
+										}, e))
+									})
+								}),
+								/* @__PURE__ */ v(f, {
+									label: "Font Size",
+									children: /* @__PURE__ */ y("select", {
+										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+										children: [
+											/* @__PURE__ */ v("option", {
+												value: "sm",
+												children: "Small"
+											}),
+											/* @__PURE__ */ v("option", {
+												value: "md",
+												children: "Medium"
+											}),
+											/* @__PURE__ */ v("option", {
+												value: "lg",
+												children: "Large"
+											})
+										]
+									})
+								})
+							]
+						})] })
+					]
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { N as SettingsPage };
+
+//# sourceMappingURL=SettingsPage.js.map