@tangle-network/ui 11.12.0 → 11.13.1

package/src/primitives/table-wrapper.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { focusRing } from "../lib/focus";
+import { Heading } from "./heading";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, type TableProps } from "./table";
+
+const meta = {
+  title: "Primitives/Table/Wrapper",
+  component: Table,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function WideTable(props: TableProps) {
+  return <Table className="min-w-[40rem]" {...props}>
+    <TableCaption>Build activity, including the full result identifier</TableCaption>
+    <TableHeader><TableRow><TableHead scope="col">Item</TableHead><TableHead scope="col">Result</TableHead><TableHead scope="col">Updated</TableHead></TableRow></TableHeader>
+    <TableBody><TableRow><TableHead scope="row">Documentation build</TableHead><TableCell>result_012345678901234567890123456789</TableCell><TableCell>Just now</TableCell></TableRow></TableBody>
+  </Table>;
+}
+
+const checkScrollOwner: NonNullable<Story["play"]> = ({ canvasElement }) => {
+  const regions = canvasElement.querySelectorAll<HTMLElement>('[role="region"]');
+  if (regions.length !== 1) throw new Error("Expected exactly one named scroll region");
+  const region = regions[0]!;
+  if (region.querySelector(".overflow-auto")) throw new Error("Table introduced a nested scroll container");
+  if (region.scrollWidth <= region.clientWidth) throw new Error("Wide-table fixture does not overflow");
+  region.focus();
+  if (region.ownerDocument.activeElement !== region) throw new Error("Scroll owner is not focusable");
+  region.scrollLeft = 24;
+  if (region.scrollLeft <= 0) throw new Error("Named scroll region cannot scroll");
+  region.scrollLeft = 0;
+  if (!region.querySelector("table > caption") || !region.querySelector('table > thead th[scope="col"]')) {
+    throw new Error("Native table semantics were lost");
+  }
+};
+
+export const AccessibleOverflow: Story = {
+  render: () => <div className="space-y-3" style={{ width: 320, maxWidth: "100%" }}>
+    <Heading variant="section">All activity columns</Heading>
+    <p className="text-sm text-muted-foreground">Tab to the named region and use the arrow keys to reveal the remaining columns.</p>
+    <WideTable wrapperProps={{ role: "region", "aria-label": "Activity columns", tabIndex: 0, className: focusRing }} />
+  </div>,
+  play: checkScrollOwner,
+};
+export const CallerOwnedScroll: Story = {
+  render: () => <div className="space-y-3" style={{ width: 320, maxWidth: "100%" }}>
+    <Heading variant="section">Caller-owned scrolling</Heading>
+    <div role="region" aria-label="Activity columns" tabIndex={0} className={`overflow-auto ${focusRing}`}>
+      <WideTable wrapper={false} />
+    </div>
+  </div>,
+  play: checkScrollOwner,
+};

package/src/primitives/table.test.tsx

@@ -0,0 +1,72 @@
+import { createRef } from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TableProps } from "./table";
+
+function UsageTable(props: TableProps) {
+  return <Table {...props}>
+    <TableCaption>Usage</TableCaption>
+    <TableHeader><TableRow><TableHead scope="col" id="resource">Resource</TableHead><TableHead scope="col" id="count">Count</TableHead></TableRow></TableHeader>
+    <TableBody><TableRow><TableHead scope="row" id="builds">Builds</TableHead><TableCell headers="builds count">3</TableCell></TableRow></TableBody>
+    <TableFooter><TableRow><TableCell colSpan={2}>One resource</TableCell></TableRow></TableFooter>
+  </Table>;
+}
+
+describe("Table", () => {
+  it("preserves the default wrapper without imposing an unnamed region or tab stop", () => {
+    render(<UsageTable />);
+    const table = screen.getByRole("table", { name: "Usage" });
+    expect(table.parentElement?.tagName).toBe("DIV");
+    expect(table.parentElement).toHaveClass("relative", "w-full", "overflow-auto");
+    expect(table.parentElement).not.toHaveAttribute("role");
+    expect(table.parentElement).not.toHaveAttribute("tabindex");
+  });
+
+  it("retains native caption, table sections, headers, scope and spans", () => {
+    render(<UsageTable />);
+    const table = screen.getByRole("table", { name: "Usage" });
+    expect(Array.from(table.children).map((node) => node.tagName)).toEqual(["CAPTION", "THEAD", "TBODY", "TFOOT"]);
+    expect(screen.getByRole("columnheader", { name: "Resource" })).toHaveAttribute("scope", "col");
+    expect(screen.getByRole("rowheader", { name: "Builds" })).toHaveAttribute("scope", "row");
+    expect(screen.getByRole("cell", { name: "3" })).toHaveAttribute("headers", "builds count");
+    expect(screen.getByRole("cell", { name: "One resource" })).toHaveAttribute("colspan", "2");
+    expect(screen.queryByRole("grid")).toBeNull();
+  });
+
+  it("allows a caller-named keyboard-focusable wrapper separately from table attributes", async () => {
+    const user = userEvent.setup();
+    render(<><h2 id="usage-title">Resource usage</h2><UsageTable id="usage-table" className="min-w-[40rem]" wrapperProps={{ role: "region", "aria-labelledby": "usage-title", tabIndex: 0, className: "max-h-80" }} /></>);
+    const region = screen.getByRole("region", { name: "Resource usage" });
+    const table = within(region).getByRole("table", { name: "Usage" });
+    expect(region).toHaveClass("max-h-80", "overflow-auto");
+    expect(table).toHaveAttribute("id", "usage-table");
+    expect(table).not.toHaveAttribute("tabindex");
+    expect(table).not.toHaveClass("max-h-80");
+    await user.tab();
+    expect(region).toHaveFocus();
+  });
+
+  it("returns a bare table for a caller-owned scroll region, without leaking wrapper props", () => {
+    render(<div role="region" aria-label="Outer" className="overflow-auto">
+      <UsageTable wrapper={false} wrapperProps={{ id: "unused-wrapper" }} />
+    </div>);
+    const outer = screen.getByRole("region", { name: "Outer" });
+    const table = screen.getByRole("table", { name: "Usage" });
+    expect(outer.firstElementChild).toBe(table);
+    expect(outer.querySelectorAll(".overflow-auto")).toHaveLength(0);
+    expect(table).not.toHaveAttribute("wrapper");
+    expect(table).not.toHaveAttribute("wrapperProps");
+    expect(table).not.toHaveAttribute("id", "unused-wrapper");
+  });
+
+  it("keeps the public ref and native attributes/handlers on the table", async () => {
+    const ref = createRef<HTMLTableElement>();
+    const onClick = vi.fn();
+    render(<Table ref={ref} cellPadding={0} onClick={onClick} aria-label="Details"><TableBody><TableRow><TableCell>Open</TableCell></TableRow></TableBody></Table>);
+    expect(ref.current).toBe(screen.getByRole("table", { name: "Details" }));
+    expect(ref.current).toHaveAttribute("cellpadding", "0");
+    await userEvent.setup().click(screen.getByRole("cell", { name: "Open" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

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 };