@tangle-network/ui 11.11.8 → 11.13.0

package/src/primitives/table.tsx

@@ -1,18 +1,39 @@
 import * as React from "react";
 import { cn } from "../lib/utils";
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-));
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+  /** Keep the existing scroll wrapper by default; false returns only the native table. */
+  wrapper?: boolean;
+  /**
+   * Attributes for the wrapper, not the table (ignored when wrapper is false).
+   * For an overflowing table, supply tabIndex and an accessible region name.
+   * No extra tab stop or unnamed landmark is imposed on every small table.
+   */
+  wrapperProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML">;
+}
+
+const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  ({ className, wrapper = true, wrapperProps, ...props }, ref) => {
+    const table = (
+      <table
+        ref={ref}
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    );
+    if (!wrapper) return table;
+
+    const { className: wrapperClassName, ...attributes } = wrapperProps ?? {};
+    return (
+      <div
+        {...attributes}
+        className={cn("relative w-full overflow-auto", wrapperClassName)}
+      >
+        {table}
+      </div>
+    );
+  },
+);
 Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<

package/src/primitives/theme-toggle.test.tsx

@@ -0,0 +1,167 @@
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { hydrateRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+let ThemeToggle: typeof import("./theme-toggle").ThemeToggle;
+let useTheme: typeof import("./theme-toggle").useTheme;
+let dark = false;
+let listeners: Set<() => void>;
+
+beforeEach(async () => {
+  vi.resetModules();
+  for (const attr of ["class", "data-theme", "data-sandbox-theme"]) document.documentElement.removeAttribute(attr);
+  window.localStorage.clear();
+  dark = false;
+  listeners = new Set();
+  vi.stubGlobal("matchMedia", vi.fn(() => ({
+    get matches() { return dark; },
+    media: "(prefers-color-scheme: dark)",
+    addEventListener: (_: string, handler: () => void) => listeners.add(handler),
+    removeEventListener: (_: string, handler: () => void) => listeners.delete(handler),
+  })));
+  ({ ThemeToggle, useTheme } = await import("./theme-toggle"));
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  for (const attr of ["class", "data-theme", "data-sandbox-theme"]) document.documentElement.removeAttribute(attr);
+});
+
+function systemMode(next: boolean) {
+  act(() => { dark = next; listeners.forEach((notify) => notify()); });
+}
+
+function PreferenceControl() {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  return <button onClick={() => setTheme("system")}>{theme}:{resolvedTheme}</button>;
+}
+
+describe("root mode preference", () => {
+  it("tracks system changes in the DOM, icon label and click behavior", () => {
+    render(<ThemeToggle />);
+    expect(screen.getByRole("button", { name: "Switch to dark mode" })).toBeTruthy();
+    expect(document.documentElement.classList.contains("light")).toBe(true);
+    systemMode(true);
+    fireEvent.click(screen.getByRole("button", { name: "Switch to light mode" }));
+    expect(window.localStorage.getItem("theme")).toBe("light");
+    expect(document.documentElement.className).toBe("light");
+    systemMode(false); systemMode(true);
+    expect(screen.getByRole("button", { name: "Switch to dark mode" })).toBeTruthy();
+  });
+
+  it("shares explicit choices and a return to system across mounted consumers", () => {
+    window.localStorage.setItem("theme", "dark");
+    render(<><ThemeToggle /><PreferenceControl /></>);
+    fireEvent.click(screen.getByRole("button", { name: "Switch to light mode" }));
+    expect(screen.getByRole("button", { name: "light:light" })).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "light:light" }));
+    expect(window.localStorage.getItem("theme")).toBeNull();
+    systemMode(true);
+    expect(screen.getByRole("button", { name: "system:dark" })).toBeTruthy();
+  });
+
+  it("remains usable when storage reads, writes and removals throw", () => {
+    for (const method of ["getItem", "setItem", "removeItem"] as const) {
+      vi.spyOn(Storage.prototype, method).mockImplementation(() => { throw new Error("denied"); });
+    }
+    render(<><ThemeToggle /><PreferenceControl /></>);
+    fireEvent.click(screen.getByRole("button", { name: "Switch to dark mode" }));
+    expect(screen.getByRole("button", { name: "dark:dark" })).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "dark:dark" }));
+    expect(screen.getByRole("button", { name: "system:light" })).toBeTruthy();
+  });
+
+  it("ignores invalid stored values and handles cross-tab preference changes", () => {
+    window.localStorage.setItem("theme", "not-a-theme");
+    render(<ThemeToggle />);
+    expect(document.documentElement.className).toBe("light");
+    act(() => window.dispatchEvent(new StorageEvent("storage", { key: "theme", newValue: "dark" })));
+    expect(screen.getByRole("button", { name: "Switch to light mode" })).toBeTruthy();
+    act(() => window.dispatchEvent(new StorageEvent("storage", { key: "theme", newValue: null })));
+    expect(document.documentElement.className).toBe("light");
+  });
+
+  it.each(["light", "dark"])("honors explicit data-theme=%s and keeps it in sync", (mode) => {
+    document.documentElement.dataset.theme = mode;
+    dark = mode !== "dark";
+    render(<ThemeToggle />);
+    expect(document.documentElement.className).toBe(mode);
+    fireEvent.click(screen.getByRole("button"));
+    expect(document.documentElement.dataset.theme).toBe(mode === "light" ? "dark" : "light");
+  });
+
+  it.each(["light", "dark"])("honors an explicit .%s class without a saved preference", (mode) => {
+    document.documentElement.className = mode;
+    dark = mode !== "dark";
+    render(<ThemeToggle />);
+    expect(document.documentElement.className).toBe(mode);
+  });
+
+  it.each([
+    ["aubergine", "aubergine-light"], ["arena", "arena-light"], ["tangle-dark", "tangle-light"],
+  ])("keeps the %s named family in both directions", (name, lightName) => {
+    document.documentElement.dataset.theme = name;
+    render(<ThemeToggle />);
+    fireEvent.click(screen.getByRole("button", { name: "Switch to light mode" }));
+    expect(document.documentElement.dataset.theme).toBe(lightName);
+    fireEvent.click(screen.getByRole("button", { name: "Switch to dark mode" }));
+    expect(document.documentElement.dataset.theme).toBe(name);
+  });
+
+  it.each(["intelligence", "custom-product"])("does not overwrite unpaired identity %s", (name) => {
+    document.documentElement.dataset.theme = name;
+    document.documentElement.className = "dark";
+    render(<ThemeToggle />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(document.documentElement.dataset.theme).toBe(name);
+    expect(document.documentElement.className).toBe("light");
+  });
+
+  it.each(["vault", "dawn"])("preserves legacy %s identity while changing mode", (name) => {
+    document.documentElement.dataset.sandboxTheme = name;
+    render(<ThemeToggle />);
+    fireEvent.click(screen.getByRole("button", { name: "Switch to dark mode" }));
+    expect(document.documentElement.dataset.sandboxTheme).toBe(name);
+    expect(document.documentElement.className).toBe("dark");
+  });
+
+  it("uses the dark fallback without matchMedia and cleans subscriptions on unmount", () => {
+    const view = render(<ThemeToggle />);
+    expect(listeners.size).toBe(1);
+    view.unmount();
+    expect(listeners.size).toBe(0);
+    vi.stubGlobal("matchMedia", undefined);
+    render(<ThemeToggle />);
+    expect(screen.getByRole("button", { name: "Switch to light mode" })).toBeTruthy();
+  });
+});
+
+describe("server rendering and hydration", () => {
+  it("renders without window, document, matchMedia or storage", () => {
+    vi.stubGlobal("window", undefined);
+    vi.stubGlobal("document", undefined);
+    expect(renderToString(<ThemeToggle />)).toContain("Switch to light mode");
+    vi.unstubAllGlobals();
+  });
+
+  it("hydrates the server snapshot then resolves saved light without a dark write", async () => {
+    const html = renderToString(<ThemeToggle />);
+    window.localStorage.setItem("theme", "light");
+    document.documentElement.className = "light";
+    const host = document.createElement("div");
+    host.innerHTML = html;
+    document.body.append(host);
+    const recoverable = vi.fn();
+    const toggle = vi.spyOn(document.documentElement.classList, "toggle");
+    let root: ReturnType<typeof hydrateRoot>;
+    await act(async () => { root = hydrateRoot(host, <ThemeToggle />, { onRecoverableError: recoverable }); });
+    expect(host.querySelector("button")?.getAttribute("aria-label")).toBe("Switch to dark mode");
+    expect(recoverable).not.toHaveBeenCalled();
+    expect(toggle).not.toHaveBeenCalledWith("dark", true);
+    await act(async () => root.unmount());
+    host.remove();
+  });
+});

package/src/primitives/theme-toggle.tsx

@@ -1,44 +1,117 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useSyncExternalStore } from "react";
 
 type Theme = "light" | "dark" | "system";
+type Mode = Exclude<Theme, "system">;
 
-function getSystemTheme(): "light" | "dark" {
-  return window.matchMedia("(prefers-color-scheme: dark)").matches
-    ? "dark"
-    : "light";
+const preferenceEvent = "tangle:theme-preference";
+const systemQuery = "(prefers-color-scheme: dark)";
+// Only existing, paired Brand themes. Never turn an arbitrary product identity
+// (notably Intelligence) into data-theme="light" or data-theme="dark".
+const namedModes = [
+  { dark: "aubergine", light: "aubergine-light" },
+  { dark: "arena", light: "arena-light" },
+  { dark: "tangle-dark", light: "tangle-light" },
+] as const;
+
+// Client-only preference cache also keeps the control usable when storage is
+// denied, and lets multiple useTheme consumers share the same preference.
+// Server renders ONLY read getServerTheme; no request state is stored here.
+let preference: Theme | undefined;
+
+function isTheme(value: unknown): value is Theme {
+  return value === "light" || value === "dark" || value === "system";
 }
 
-function applyTheme(theme: Theme) {
-  const resolved = theme === "system" ? getSystemTheme() : theme;
-  document.documentElement.classList.toggle("dark", resolved === "dark");
+function getSystemTheme(): Mode {
+  if (typeof window === "undefined" || !window.matchMedia) return "dark";
+  return window.matchMedia(systemQuery).matches ? "dark" : "light";
 }
 
-export function useTheme() {
-  const [theme, setThemeState] = useState<Theme>(() => {
-    if (typeof window === "undefined") return "system";
-    return (localStorage.getItem("theme") as Theme) ?? "system";
-  });
-
-  const setTheme = useCallback((next: Theme) => {
-    setThemeState(next);
-    if (next === "system") {
-      localStorage.removeItem("theme");
-    } else {
-      localStorage.setItem("theme", next);
-    }
-    applyTheme(next);
-  }, []);
+function getServerTheme(): Theme { return "system"; }
+function getServerMode(): Mode { return "dark"; }
+
+function readInitialTheme(): Theme {
+  try {
+    const stored = window.localStorage.getItem("theme");
+    if (isTheme(stored)) return stored;
+  } catch { /* Storage is optional, not a prerequisite for changing mode. */ }
+
+  const root = document.documentElement;
+  const named = root.getAttribute("data-theme");
+  if (named === "light" || named === "dark") return named;
+  for (const pair of namedModes) {
+    if (named === pair.light) return "light";
+    if (named === pair.dark) return "dark";
+  }
+  if (root.classList.contains("light")) return "light";
+  if (root.classList.contains("dark")) return "dark";
+  const legacy = root.getAttribute("data-sandbox-theme");
+  if (legacy === "vault" || legacy === "dawn") return "light";
+  return "system";
+}
+
+function getTheme(): Theme {
+  if (typeof window === "undefined") return "system";
+  return preference ??= readInitialTheme();
+}
+
+function applyMode(mode: Mode) {
+  const root = document.documentElement;
+  root.classList.toggle("dark", mode === "dark");
+  root.classList.toggle("light", mode === "light");
+  const named = root.getAttribute("data-theme");
+  if (named === "dark" || named === "light") {
+    root.setAttribute("data-theme", mode);
+  } else {
+    const pair = namedModes.find((pair) => named === pair.dark || named === pair.light);
+    if (pair) root.setAttribute("data-theme", pair[mode]);
+  }
+}
+
+function setTheme(next: Theme) {
+  if (!isTheme(next) || typeof window === "undefined") return;
+  preference = next;
+  try {
+    if (next === "system") window.localStorage.removeItem("theme");
+    else window.localStorage.setItem("theme", next);
+  } catch { /* Keep the in-memory preference when storage is unavailable. */ }
+  applyMode(next === "system" ? getSystemTheme() : next);
+  window.dispatchEvent(new Event(preferenceEvent));
+}
+
+function subscribeTheme(notify: () => void) {
+  const onStorage = (event: StorageEvent) => {
+    if (event.key !== "theme" && event.key !== null) return;
+    preference = isTheme(event.newValue) ? event.newValue : "system";
+    notify();
+  };
+  window.addEventListener(preferenceEvent, notify);
+  window.addEventListener("storage", onStorage);
+  return () => {
+    window.removeEventListener(preferenceEvent, notify);
+    window.removeEventListener("storage", onStorage);
+  };
+}
 
+function subscribeSystem(notify: () => void) {
+  if (!window.matchMedia) return () => {};
+  const media = window.matchMedia(systemQuery);
+  media.addEventListener("change", notify);
+  return () => media.removeEventListener("change", notify);
+}
+
+export function useTheme() {
+  const theme = useSyncExternalStore(subscribeTheme, getTheme, getServerTheme);
+  const system = useSyncExternalStore(subscribeSystem, getSystemTheme, getServerMode);
+  const resolvedTheme = theme === "system" ? system : theme;
   useEffect(() => {
-    applyTheme(theme);
-    if (theme !== "system") return;
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = () => applyTheme("system");
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [theme]);
-
-  return { theme, setTheme };
+    // Hydration first renders the stable server snapshot. Apply the real client
+    // preference, not that placeholder, so we never repaint a persisted light
+    // page dark while React is catching up.
+    const selected = getTheme();
+    applyMode(selected === "system" ? getSystemTheme() : selected);
+  }, [resolvedTheme]);
+  return { theme, setTheme, resolvedTheme };
 }
 
 const iconClass = "h-4 w-4";
@@ -54,6 +127,7 @@ function SunIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={iconClass}
+      aria-hidden="true"
     >
       <circle cx={12} cy={12} r={5} />
       <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
@@ -72,6 +146,7 @@ function MoonIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={iconClass}
+      aria-hidden="true"
     >
       <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
     </svg>
@@ -79,18 +154,15 @@ function MoonIcon() {
 }
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
-  const resolved =
-    theme === "system" ? getSystemTheme() : theme;
-
+  const { resolvedTheme, setTheme } = useTheme();
   return (
     <button
       type="button"
-      onClick={() => setTheme(resolved === "dark" ? "light" : "dark")}
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
       className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
-      aria-label={`Switch to ${resolved === "dark" ? "light" : "dark"} mode`}
+      aria-label={`Switch to ${resolvedTheme === "dark" ? "light" : "dark"} mode`}
     >
-      {resolved === "dark" ? <SunIcon /> : <MoonIcon />}
+      {resolvedTheme === "dark" ? <SunIcon /> : <MoonIcon />}
     </button>
   );
 }

package/dist/active-sessions-store-nl70ZnMC.d.ts

@@ -1,84 +0,0 @@
-//#region src/stores/active-sessions-store.d.ts
-type SessionProjectKey = string | number;
-type ActiveSessionStatus = "idle" | "running" | "attention-needed" | "error";
-type ActiveSessionReconnectState = "idle" | "reconnecting" | "failed";
-type ActiveSessionConnectionState = "disconnected" | "connecting" | "connected" | "reconnecting" | "error";
-type ActiveSessionTransportMode = "websocket" | "sse" | "polling" | "custom";
-interface ActiveSessionRecord {
-  sessionId: string;
-  projectId: SessionProjectKey | null;
-  projectLabel?: string;
-  title?: string;
-  href?: string;
-  registeredAt: number;
-  lastActivityAt: number;
-  lastEventAt: number | null;
-  status: ActiveSessionStatus;
-  isRunning: boolean;
-  isForeground: boolean;
-  needsAttention: boolean;
-  connectionState: ActiveSessionConnectionState;
-  reconnectState: ActiveSessionReconnectState;
-  transportMode: ActiveSessionTransportMode | null;
-  lastError: string | null;
-  metadata?: Record<string, unknown>;
-}
-interface ActiveSessionsState {
-  sessions: Record<string, ActiveSessionRecord>;
-  lastUpdatedAt: number;
-}
-interface RegisterActiveSessionOptions {
-  sessionId: string;
-  projectId?: SessionProjectKey | null;
-  projectLabel?: string;
-  title?: string;
-  href?: string;
-  metadata?: Record<string, unknown>;
-}
-interface ActiveSessionConnectionOptions {
-  connectionState: ActiveSessionConnectionState;
-  reconnectState?: ActiveSessionReconnectState;
-  transportMode?: ActiveSessionTransportMode | null;
-  lastError?: string | null;
-  lastEventAt?: number | null;
-}
-interface ActiveSessionActivityOptions {
-  lastEventAt?: number | null;
-}
-interface ActiveProjectActivity {
-  projectId: SessionProjectKey;
-  projectLabel?: string;
-  activeSessionCount: number;
-  runningSessionIds: string[];
-  lastActivityAt: number;
-}
-declare const activeSessionsAtom: import("nanostores").PreinitializedWritableAtom<ActiveSessionsState> & object;
-declare function registerActiveSession(options: RegisterActiveSessionOptions): void;
-declare function unregisterActiveSession(sessionId: string): void;
-declare function setForegroundActiveSession(sessionId: string | null): void;
-declare function updateActiveSessionMeta(sessionId: string, meta: Partial<Pick<ActiveSessionRecord, "title" | "href" | "projectId" | "projectLabel" | "metadata">>): void;
-declare function setActiveSessionConnection(sessionId: string, options: ActiveSessionConnectionOptions): void;
-declare function setActiveSessionRunning(sessionId: string, isRunning: boolean, options?: ActiveSessionActivityOptions): void;
-declare function setActiveSessionAttention(sessionId: string, needsAttention: boolean, options?: ActiveSessionActivityOptions): void;
-declare function setActiveSessionError(sessionId: string, error: string | null): void;
-declare function bumpActiveSessionActivity(sessionId: string, options?: ActiveSessionActivityOptions): void;
-declare function resetActiveSessions(): void;
-declare function getAllActiveSessions(state: ActiveSessionsState): ActiveSessionRecord[];
-declare function getActiveSession(state: ActiveSessionsState, sessionId: string): ActiveSessionRecord | null;
-declare function getSessionsForProject(state: ActiveSessionsState, projectId: SessionProjectKey): ActiveSessionRecord[];
-declare function getSessionsForNavbar(state: ActiveSessionsState, projectId?: SessionProjectKey | null): ActiveSessionRecord[];
-declare function getSessionsByActivity(state: ActiveSessionsState): ActiveSessionRecord[];
-declare function getTotalRunningSessionCount(state: ActiveSessionsState): number;
-declare function hasBackgroundRunningSessions(state: ActiveSessionsState): boolean;
-declare function getAllProjectActivity(state: ActiveSessionsState): ActiveProjectActivity[];
-declare function useActiveSessionsState(): ActiveSessionsState;
-declare function useActiveSessions(): ActiveSessionRecord[];
-declare function useActiveSession(sessionId: string | null): ActiveSessionRecord | null;
-declare function useProjectSessions(projectId: SessionProjectKey | null): ActiveSessionRecord[];
-declare function useNavbarSessions(projectId?: SessionProjectKey | null): ActiveSessionRecord[];
-declare function useSessionsByActivity(): ActiveSessionRecord[];
-declare function useProjectActivity(): ActiveProjectActivity[];
-declare function useTotalRunningSessions(): number;
-declare function useHasBackgroundRunningSessions(): boolean;
-//#endregion
-export { updateActiveSessionMeta as A, resetActiveSessions as C, setActiveSessionRunning as D, setActiveSessionError as E, useNavbarSessions as F, useProjectActivity as I, useProjectSessions as L, useActiveSessions as M, useActiveSessionsState as N, setForegroundActiveSession as O, useHasBackgroundRunningSessions as P, useSessionsByActivity as R, registerActiveSession as S, setActiveSessionConnection as T, getSessionsByActivity as _, ActiveSessionReconnectState as a, getTotalRunningSessionCount as b, ActiveSessionTransportMode as c, SessionProjectKey as d, activeSessionsAtom as f, getAllProjectActivity as g, getAllActiveSessions as h, ActiveSessionConnectionState as i, useActiveSession as j, unregisterActiveSession as k, ActiveSessionsState as l, getActiveSession as m, ActiveSessionActivityOptions as n, ActiveSessionRecord as o, bumpActiveSessionActivity as p, ActiveSessionConnectionOptions as r, ActiveSessionStatus as s, ActiveProjectActivity as t, RegisterActiveSessionOptions as u, getSessionsForNavbar as v, setActiveSessionAttention as w, hasBackgroundRunningSessions as x, getSessionsForProject as y, useTotalRunningSessions as z };

package/dist/button-C87nEe2R.js

@@ -1,78 +0,0 @@
-import { i as focusRing } from "./focus-BcE_SHqz.js";
-import { t as cn } from "./utils-C_uf36nf.js";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/primitives/button.tsx
-const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
-	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] duration-[var(--transition-fast)]",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] duration-[var(--transition-fast)]",
-			outline: "border border-border bg-card hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] text-foreground",
-			secondary: "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] duration-[var(--transition-fast)]",
-			ghost: "hover:bg-muted hover:text-foreground duration-[var(--transition-fast)] text-muted-foreground border border-transparent",
-			link: "text-primary underline-offset-4 hover:underline",
-			sandbox: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]"
-		},
-		size: {
-			default: "h-[var(--control-height)] px-4 py-2",
-			sm: "h-8 rounded-md px-3 text-xs",
-			lg: "h-11 rounded-lg px-7 text-sm",
-			xl: "h-13 rounded-xl px-9 text-base",
-			icon: "h-[var(--control-height)] w-[var(--control-height)]"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
-const Button = React.forwardRef(({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
-	const Comp = asChild ? Slot : "button";
-	if (asChild) return /* @__PURE__ */ jsx(Comp, {
-		className: cn(buttonVariants({
-			variant,
-			size,
-			className
-		})),
-		ref,
-		...props,
-		children
-	});
-	return /* @__PURE__ */ jsxs(Comp, {
-		className: cn(buttonVariants({
-			variant,
-			size,
-			className
-		})),
-		ref,
-		disabled: disabled || loading,
-		...props,
-		children: [loading && /* @__PURE__ */ jsxs("svg", {
-			className: "mr-2 -ml-1 h-4 w-4 animate-spin",
-			fill: "none",
-			viewBox: "0 0 24 24",
-			children: [
-				/* @__PURE__ */ jsx("title", { children: "Loading spinner" }),
-				/* @__PURE__ */ jsx("circle", {
-					className: "opacity-25",
-					cx: "12",
-					cy: "12",
-					r: "10",
-					stroke: "currentColor",
-					strokeWidth: "4"
-				}),
-				/* @__PURE__ */ jsx("path", {
-					className: "opacity-75",
-					fill: "currentColor",
-					d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-				})
-			]
-		}), children]
-	});
-});
-Button.displayName = "Button";
-//#endregion
-export { buttonVariants as n, Button as t };