@cueloop/client 0.1.0-alpha.0 → 0.1.0-alpha.100

package/src/app/launch-layout.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, test } from "bun:test";
+import {
+  defaultLayout,
+  layoutFromPanes,
+  pairLayout,
+  planLayout,
+  pullRequestReviewLayout,
+  reviewLayout,
+} from "./launch-layout";
+
+describe("launch layout factories", () => {
+  test("review opens the diff zoomed with the Changes panel", () => {
+    // Assert
+    expect(reviewLayout()).toEqual({ threads: true, rightSidebar: "changes", zoomChanges: true });
+  });
+
+  test("pair opens the Project tree focused beside a zoomed Changes editor", () => {
+    expect(pairLayout()).toEqual({
+      threads: true,
+      rightSidebar: "changes",
+      zoomChanges: true,
+      projectMode: "tree",
+      focusPane: "project",
+    });
+  });
+
+  test("pull request review keeps its brief beside the Changes panel", () => {
+    // Assert
+    expect(pullRequestReviewLayout()).toEqual({
+      threads: true,
+      rightSidebar: "changes",
+      zoomChanges: false,
+    });
+  });
+
+  test("plan fills the middle with the thread pane and no right region", () => {
+    // Assert
+    expect(planLayout()).toEqual({ threads: true, rightSidebar: "off", zoomChanges: false });
+  });
+
+  test("the first-run default lands on the inbox with the diff zoomed", () => {
+    // Assert
+    expect(defaultLayout()).toEqual({ threads: true, rightSidebar: "changes", zoomChanges: true });
+  });
+});
+
+describe("layoutFromPanes", () => {
+  test("the Changes editor wins the right region when open", () => {
+    // Assert
+    expect(
+      layoutFromPanes({ threads: true, changesOpen: true, projectOpen: true, zoomChanges: true }),
+    ).toEqual({ threads: true, rightSidebar: "changes", zoomChanges: true });
+  });
+
+  test("the Project tree holds the right region when the Changes editor is closed", () => {
+    // Assert
+    expect(
+      layoutFromPanes({
+        threads: false,
+        changesOpen: false,
+        projectOpen: true,
+        zoomChanges: false,
+      }),
+    ).toEqual({ threads: false, rightSidebar: "project", zoomChanges: false });
+  });
+
+  test("the right region is off when neither pane is open", () => {
+    // Assert
+    expect(
+      layoutFromPanes({
+        threads: true,
+        changesOpen: false,
+        projectOpen: false,
+        zoomChanges: false,
+      }),
+    ).toEqual({ threads: true, rightSidebar: "off", zoomChanges: false });
+  });
+});

package/src/app/launch-layout.ts

@@ -0,0 +1,57 @@
+/**
+ * The pane composition a launch opens with: whether the Threads sidebar is open,
+ * what the right region shows, and whether the Changes editor is zoomed. Each
+ * command picks a layout through a factory; a bare launch restores the last one
+ * the user left (persisted in config), falling back to the default.
+ */
+
+export interface LaunchLayout {
+  threads: boolean;
+  rightSidebar: "changes" | "project" | "off";
+  zoomChanges: boolean;
+  projectMode?: "changes" | "tree";
+  focusPane?: "threads" | "thread" | "changes" | "project";
+}
+
+/** `cueloop diff`: the diff front and center. */
+export function reviewLayout(): LaunchLayout {
+  return { threads: true, rightSidebar: "changes", zoomChanges: true };
+}
+
+/** `cueloop pair`: browse project files beside the zoomed Changes editor. */
+export function pairLayout(): LaunchLayout {
+  return {
+    threads: true,
+    rightSidebar: "changes",
+    zoomChanges: true,
+    projectMode: "tree",
+    focusPane: "project",
+  };
+}
+
+/** `cueloop review <pr>`: PR context beside the Changes panel. */
+export function pullRequestReviewLayout(): LaunchLayout {
+  return { threads: true, rightSidebar: "changes", zoomChanges: false };
+}
+
+/** `cueloop plan` / `cueloop reply`: the thread pane fills the middle; no Changes panel. */
+export function planLayout(): LaunchLayout {
+  return { threads: true, rightSidebar: "off", zoomChanges: false };
+}
+
+/** The first-run default, before any layout has been remembered: the inbox with the diff zoomed. */
+export function defaultLayout(): LaunchLayout {
+  return { threads: true, rightSidebar: "changes", zoomChanges: true };
+}
+
+/** Read back the layout the panes currently sit in, to remember it for the next bare launch. */
+export function layoutFromPanes(panes: {
+  threads: boolean;
+  changesOpen: boolean;
+  projectOpen: boolean;
+  zoomChanges: boolean;
+}): LaunchLayout {
+  const rightSidebar = panes.changesOpen ? "changes" : panes.projectOpen ? "project" : "off";
+
+  return { threads: panes.threads, rightSidebar, zoomChanges: panes.zoomChanges };
+}

package/src/app/ready-signal.test.ts

@@ -0,0 +1,85 @@
+/** The ready signal fires once, after a frame, and writes the ready file when the env names one. */
+
+import { afterEach, describe, expect, test } from "bun:test";
+import { existsSync, mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { createElement, useState } from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { READY_FILE_ENV, useReadySignal } from "./ready-signal";
+import { settle } from "../testing/test-support";
+
+const homes: string[] = [];
+
+afterEach(() => {
+  for (const home of homes.splice(0)) rmSync(home, { recursive: true, force: true });
+  delete process.env[READY_FILE_ENV];
+});
+
+/** Hands its readiness setter to the test, so a frame can be rendered before and after the flip. */
+function ReadyProbe(props: {
+  initiallyReady: boolean;
+  onReady: () => void;
+  exposeSetter?: (setReady: (ready: boolean) => void) => void;
+}) {
+  const [ready, setReady] = useState(props.initiallyReady);
+
+  props.exposeSetter?.(setReady);
+  useReadySignal(ready, props.onReady);
+
+  return createElement("text", null, ready ? "ready" : "booting");
+}
+
+describe("useReadySignal", () => {
+  test("fires once on the first frame after ready turns true", async () => {
+    // Arrange - not ready yet
+    let fired = 0;
+    let setReady: ((ready: boolean) => void) | null = null;
+    const onReady = () => {
+      fired += 1;
+    };
+    const setup = await testRender(
+      createElement(ReadyProbe, {
+        initiallyReady: false,
+        onReady,
+        exposeSetter: (setter) => {
+          setReady = setter;
+        },
+      }),
+      { width: 20, height: 3 },
+    );
+
+    await settle(setup);
+    expect(fired).toBe(0);
+
+    // Act - ready, then let the commit, the effect, and more frames than one signal needs run
+    setReady!(true);
+    await settle(setup);
+    await settle(setup);
+
+    // Assert - exactly one signal, and the screen shows the ready tree
+    expect(fired).toBe(1);
+    expect(setup.captureCharFrame()).toContain("ready");
+    setup.renderer.destroy();
+  });
+
+  test("writes the ready file through the env channel", async () => {
+    // Arrange
+    const home = mkdtempSync(join(tmpdir(), "cueloop-ready-"));
+    const readyFile = join(home, "ready");
+
+    homes.push(home);
+    process.env[READY_FILE_ENV] = readyFile;
+    const setup = await testRender(
+      createElement(ReadyProbe, { initiallyReady: true, onReady: () => {} }),
+      { width: 20, height: 3 },
+    );
+
+    // Act
+    await settle(setup);
+
+    // Assert
+    expect(existsSync(readyFile)).toBe(true);
+    setup.renderer.destroy();
+  });
+});

package/src/app/ready-signal.ts

@@ -0,0 +1,52 @@
+/**
+ * The app ready signal: fired once, after the first frame that paints a
+ * usable screen (a session, the no-thread shell, or an error) has been
+ * flushed. React runs child effects before parent effects, so by the time the
+ * App-level effect arms the frame listener every keyboard handler of that
+ * first screen is already subscribed - a key sent after the signal cannot be
+ * dropped. Surfaces that mount later (a composer, a lazily loaded tab) still
+ * need their own screen predicate. Tests wait on this instead of guessing
+ * from output silence. Two channels: an
+ * `onReady` callback for in-process suites, and the file named by
+ * CUELOOP_READY_FILE for subprocess and PTY suites. Users never see either.
+ */
+
+import { writeFileSync } from "node:fs";
+import { useEffect, useRef } from "react";
+import { useRenderer } from "@opentui/react";
+
+/** The env var naming the file the app writes once it is ready; unset in normal use. */
+export const READY_FILE_ENV = "CUELOOP_READY_FILE";
+
+/** Write the ready file when CUELOOP_READY_FILE names one; a no-op otherwise, so the signal costs nothing outside tests. */
+function announceReady(): void {
+  const path = process.env[READY_FILE_ENV];
+
+  if (!path) return;
+  writeFileSync(path, "ready\n");
+}
+
+/**
+ * Fire the ready signal once, on the first rendered frame after `ready`
+ * turns true. Call it after every keyboard hook of the component so their
+ * subscriptions are in place when the signal goes out.
+ */
+export function useReadySignal(ready: boolean, onReady?: () => void): void {
+  const renderer = useRenderer();
+  const fired = useRef(false);
+
+  useEffect(() => {
+    if (!ready || fired.current) return;
+    const emit = (): void => {
+      fired.current = true;
+      announceReady();
+      onReady?.();
+    };
+
+    renderer?.once("frame", emit);
+
+    return () => {
+      renderer?.off("frame", emit);
+    };
+  }, [ready, renderer, onReady]);
+}

package/src/app/run.ts

@@ -0,0 +1,109 @@
+/** Real-terminal entry: render the App and resolve when the user quits. */
+
+import React from "react";
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import { App } from "./App";
+import { closePrototypeBrowser } from "../prototype/prototype-browser";
+import type { Appearance } from "../appearance/theme-presets";
+import type { DiffFileContents, Thread } from "@cueloop/schema";
+import type { ThreadClient } from "@cueloop/daemon/client";
+import { loadConfig } from "../settings/config";
+import { perfMark } from "../performance/perf-timings";
+import { reportPerfMarks } from "../performance/perf-report";
+import { defaultLayout, type LaunchLayout } from "./launch-layout";
+import {
+  ClientExtensionRegistry,
+  loadInstalledClientExtensions,
+} from "../integrations/client-extension-registry";
+
+export interface RunClientOptions {
+  sessionId?: string;
+  initialReview?: { session: Thread; diff: { patch: string; files: DiffFileContents[] } };
+  initialClient?: ThreadClient;
+  home?: string;
+  layout?: LaunchLayout;
+}
+
+/** OSC background query budget: long enough for a terminal to answer, short enough that one that never
+ *  does not stall the launch; a non-answering terminal falls back to dark after this. */
+const THEME_QUERY_TIMEOUT_MS = 100;
+
+export async function runClient(options: RunClientOptions): Promise<number> {
+  // mouse movement reporting makes multiplexers forward drags to the app,
+  // so the renderer's native selection is the drag driver
+  // a create-command dictates its layout; a bare inbox launch restores the remembered one, then the
+  // default; opening a specific thread carries no layout, so its own pane sync drives the composition
+  const layout =
+    options.layout ??
+    (options.sessionId === undefined ? (loadConfig().ui.layout ?? defaultLayout()) : undefined);
+  const renderer = await createCliRenderer({ enableMouseMovement: true });
+  const extensionRegistry = new ClientExtensionRegistry();
+
+  void loadInstalledClientExtensions(extensionRegistry).catch((error) => {
+    extensionRegistry.reportError(`Client extension discovery: ${String(error)}`);
+  });
+  // a full screen of measured elements each holds a frame listener; lift the default-10 ceiling so a
+  // busy view does not trip a false leak warning, while a runaway subscription still would
+  renderer.setMaxListeners(64);
+  perfMark("renderer");
+  // re-assert mouse reporting on focus-in: a multiplexer can drop it, stranding the pointer in native selection
+  renderer.on("focus", () => {
+    renderer.useMouse = false;
+    renderer.useMouse = true;
+  });
+
+  return new Promise<number>((resolve) => {
+    let exited = false;
+    const shutdown = async (code: number): Promise<void> => {
+      if (exited) return;
+      exited = true;
+      renderer.destroy();
+      // close the warm prototype Chromium before exit so it never orphans; the
+      // await also gives the renderer time to flush its terminal-restore bytes
+      await closePrototypeBrowser();
+      resolve(code);
+      process.exit(code);
+    };
+
+    // a closed pane/terminal hangs up (or the parent kills us); exit instead of
+    // lingering as an orphan whose pty read loop keeps burning CPU
+    process.once("SIGHUP", () => void shutdown(0));
+    process.once("SIGTERM", () => void shutdown(0));
+
+    const root = createRoot(renderer);
+    const renderApp = (appearance: Appearance): void => {
+      root.render(
+        React.createElement(App, {
+          home: options.home,
+          sessionId: options.sessionId,
+          initialReview: options.initialReview,
+          initialClient: options.initialClient,
+          appearance,
+          layout,
+          extensionRegistry,
+          onExit: shutdown,
+          onReady: () => {
+            perfMark("firstFrame");
+            reportPerfMarks("startup");
+          },
+        }),
+      );
+    };
+
+    // Paint immediately with the default appearance; the OSC theme query resolves off the
+    // first-paint path and upgrades the theme in place when the terminal answers, so launch
+    // never blocks on it. A non-answering terminal simply stays dark.
+    renderApp("dark");
+    perfMark("render");
+
+    void renderer
+      .waitForThemeMode(THEME_QUERY_TIMEOUT_MS)
+      .then((mode) => {
+        perfMark("themeQuery");
+        // the query can answer after a fast quit; never render onto a destroyed renderer
+        if (!exited && mode && mode !== "dark") renderApp(mode);
+      })
+      .catch(() => {});
+  });
+}

package/src/{serve.test.ts → app/serve.test.ts}

@@ -10,14 +10,14 @@ import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { Client } from "ssh2";
 import { DaemonServer } from "@cueloop/daemon";
-import type { ReviewSession } from "@cueloop/schema";
+import type { Thread } from "@cueloop/schema";
 import { serveClient, type ServeHandle } from "./serve";
 
 const PLAN = "# Rollout Plan\n\nShip the store move behind a flag.\n";
 
 let home: string;
 let daemon: DaemonServer;
-let session: ReviewSession;
+let session: Thread;
 let handle: ServeHandle;
 
 beforeEach(async () => {
@@ -38,7 +38,11 @@ afterEach(async () => {
 });
 
 /** Connect, open a PTY shell, resolve with the bytes seen until `until` matches. */
-function sshCapture(port: number, until: (s: string) => boolean, timeoutMs = 8000): Promise<string> {
+function sshCapture(
+  port: number,
+  until: (frame: string) => boolean,
+  timeoutMs = 8000,
+): Promise<string> {
   return new Promise((resolve, reject) => {
     const conn = new Client();
     let out = "";
@@ -48,15 +52,17 @@ function sshCapture(port: number, until: (s: string) => boolean, timeoutMs = 800
       done = true;
       clearTimeout(timer);
       conn.end();
-      err ? reject(err) : resolve(out);
+      if (err) reject(err);
+      else resolve(out);
     };
     const timer = setTimeout(() => finish(new Error(`timed out; captured:\n${out}`)), timeoutMs);
+
     conn
       .on("ready", () => {
         conn.shell({ term: "xterm-256color", cols: 100, rows: 30 }, (err, stream) => {
           if (err) return finish(err);
-          stream.on("data", (d: Buffer) => {
-            out += d.toString("utf8");
+          stream.on("data", (chunk: Buffer) => {
+            out += chunk.toString("utf8");
             if (until(out)) finish();
           });
           stream.on("close", () => finish(new Error(`stream closed early; captured:\n${out}`)));
@@ -70,6 +76,7 @@ function sshCapture(port: number, until: (s: string) => boolean, timeoutMs = 800
 
 describe("cueloop serve", () => {
   test("listens on localhost, persists a host key under CUELOOP_HOME/ssh", () => {
+    // Assert
     expect(handle.host).toBe("127.0.0.1");
     expect(handle.port).toBeGreaterThan(0);
     expect(handle.fingerprints.length).toBe(1);
@@ -77,19 +84,24 @@ describe("cueloop serve", () => {
     expect(existsSync(join(home, "ssh", "host_key"))).toBe(true);
   });
 
-  test("an anonymous ssh client gets the observer TUI for the session", async () => {
-    const bytes = await sshCapture(handle.port, (s) => s.includes("Rollout Plan") && s.includes("observer"));
+  test("an anonymous ssh client gets the read-only TUI for the session", async () => {
+    // Act
+    const bytes = await sshCapture(handle.port, (frame) => frame.includes("Rollout Plan"));
+
+    // Assert - the viewer sees the session; read-only is enforced behaviorally
+    // (covered by the observer-primitives tests), not by a header badge
     expect(bytes).toContain("cueloop");
     expect(bytes).toContain("Rollout Plan");
-    // observer chrome, not the controller's mutating hint bar
-    expect(bytes).toContain("observer - read-only");
   });
 
   test("two observers can watch at once", async () => {
+    // Act
     const [a, b] = await Promise.all([
-      sshCapture(handle.port, (s) => s.includes("Rollout Plan")),
-      sshCapture(handle.port, (s) => s.includes("Rollout Plan")),
+      sshCapture(handle.port, (frame) => frame.includes("Rollout Plan")),
+      sshCapture(handle.port, (frame) => frame.includes("Rollout Plan")),
     ]);
+
+    // Assert
     expect(a).toContain("Rollout Plan");
     expect(b).toContain("Rollout Plan");
   });

package/src/app/serve.ts

@@ -0,0 +1,111 @@
+/**
+ * SSH-served TUI: `cueloop serve` lets teammates join a
+ * thread over plain ssh. Every SSH connection renders <App> in
+ * observer mode (readOnly) against the same local daemon; the one writable
+ * controller stays the local owner's own `cueloop` TUI.
+ *
+ * Trust model - tunnel of trust, no passwords, no keys:
+ * the server authenticates nobody ("open" auth). Access control is the act of
+ * sharing the address deliberately: it binds to 127.0.0.1 by default, so a
+ * remote teammate reaches it only through a channel the owner opened on
+ * purpose (an SSH tunnel, a tailnet address via --host). Anyone who can reach
+ * the port can watch - and only watch: observers cannot mutate the session.
+ * The host key is generated once under CUELOOP_HOME/ssh/host_key (0600) so
+ * fingerprints stay stable across restarts.
+ */
+
+import { mkdirSync } from "node:fs";
+import { join } from "node:path";
+import React from "react";
+import { createRoot } from "@opentui/react";
+import { createServer } from "@opentui/ssh";
+import { cueloopHome } from "@cueloop/daemon";
+import { DaemonClient } from "@cueloop/daemon/client";
+import type { Artifact } from "@cueloop/schema";
+import { App } from "./App";
+import { snapshotWorkbench } from "../workbench/workbench-snapshot";
+
+/** OSC background query budget: brief so a terminal that never answers falls back to dark. */
+const THEME_QUERY_TIMEOUT_MS = 200;
+
+/**
+ * The frozen diff an observer reads for a served workbench thread: captured once at serve time, so a
+ * late local edit never shifts it. Undefined when nothing is served or the thread is not a workbench.
+ */
+async function captureFrozenArtifact(
+  home: string,
+  sessionId: string | undefined,
+): Promise<Artifact | undefined> {
+  if (sessionId === undefined) return undefined;
+
+  const probe = await DaemonClient.connect({ home, autostart: true });
+
+  try {
+    const thread = await probe.sessionGet(sessionId).catch(() => undefined);
+
+    if (thread === undefined) return undefined;
+
+    const snapshot = await snapshotWorkbench(thread, (root, vcs) => probe.repoDiff(root, vcs));
+
+    return snapshot === thread ? undefined : snapshot.artifact;
+  } finally {
+    probe.close();
+  }
+}
+
+export interface ServeOptions {
+  port?: number;
+  host?: string;
+  sessionId?: string;
+  home?: string;
+  banner?: boolean;
+  onError?: (cause: unknown) => void;
+}
+
+export interface ServeHandle {
+  host: string;
+  port: number;
+  fingerprints: string[];
+  close(): Promise<void>;
+}
+
+export async function serveClient(options: ServeOptions = {}): Promise<ServeHandle> {
+  const home = options.home ?? cueloopHome();
+  const sshDir = join(home, "ssh");
+
+  mkdirSync(sshDir, { recursive: true, mode: 0o700 });
+
+  const servedArtifact = await captureFrozenArtifact(home, options.sessionId);
+
+  const server = createServer({
+    // password-less by design; see the trust model in the module comment
+    auth: "open",
+    hostKey: { path: join(sshDir, "host_key") },
+    startupBanner: options.banner ?? true,
+    idleTimeout: "2h",
+    onError: options.onError,
+  }).serve(async (session) => {
+    // the observer's terminal reports its own background, so a light-terminal
+    // watcher gets the readable variant too
+    const appearance =
+      (await session.renderer.waitForThemeMode(THEME_QUERY_TIMEOUT_MS).catch(() => null)) ?? "dark";
+    const root = createRoot(session.renderer);
+
+    root.render(
+      React.createElement(App, {
+        home,
+        sessionId: options.sessionId,
+        readOnly: true,
+        appearance,
+        servedArtifact,
+        // q disconnects only this observer, never the server
+        onExit: () => session.end(),
+      }),
+    );
+    session.onClose(() => root.unmount());
+  });
+
+  const info = await server.listen(options.port ?? 2222, options.host ?? "127.0.0.1");
+
+  return { ...info, close: () => server.close() };
+}

package/src/app/version.ts

@@ -0,0 +1,5 @@
+/** The published client version, read from the package manifest. */
+
+import manifest from "../../package.json" with { type: "json" };
+
+export const CLIENT_VERSION: string = manifest.version;

package/src/appearance/components/theme-context.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { ThemeProvider } from "./theme-context";
+import { Card } from "../../ui/components/primitives/Card";
+
+export const meta: StoryMeta = { title: "Foundations/Theme" };
+
+/** A high-contrast variant to prove tokens flow through the provider. */
+const HIGH_CONTRAST: Theme = { ...DARK, accent: "#00ffff", elevated: "#000000", border: "#ffffff" };
+
+export const ContextDefault: Story = {
+  render: () => (
+    <Card title=" default dark theme " contentRows={1}>
+      <text>no provider needed</text>
+    </Card>
+  ),
+  expectedColors: [DARK.elevated],
+};
+
+export const ProviderSwap: Story = {
+  render: () => (
+    <ThemeProvider theme={HIGH_CONTRAST}>
+      <Card title=" provider theme " contentRows={1} borderColor={HIGH_CONTRAST.accent}>
+        <text>tokens come from the provider</text>
+      </Card>
+    </ThemeProvider>
+  ),
+  expectedColors: ["#00ffff", "#000000"],
+};
+
+export const PropOverride: Story = {
+  render: () => (
+    <ThemeProvider theme={DARK}>
+      <Card
+        title=" prop-overridden theme "
+        contentRows={1}
+        theme={HIGH_CONTRAST}
+        borderColor={HIGH_CONTRAST.accent}
+      >
+        <text>the theme prop beats the context</text>
+      </Card>
+    </ThemeProvider>
+  ),
+  expectedColors: ["#00ffff"],
+};

package/src/appearance/components/theme-context.tsx

@@ -0,0 +1,37 @@
+/**
+ * Provider theming for the component system. The context default is the
+ * built-in dark theme, so embedding a component (or rendering a story) needs
+ * no provider at all. One ThemeProvider swap switches the live theme; every
+ * component also accepts an optional `theme` prop that overrides the context
+ * for explicit control. Components consume named tokens only - a hardcoded
+ * color inside components/ is a review rejection.
+ */
+
+import React, { createContext, useContext } from "react";
+import { DARK, type Theme } from "../theme";
+
+const ThemeContext = createContext<Theme>(DARK);
+
+export function ThemeProvider({
+  theme,
+  children,
+}: {
+  theme: Theme;
+  children: React.ReactNode;
+}): React.ReactNode {
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): Theme {
+  return useContext(ThemeContext);
+}
+
+/**
+ * Token resolution for a component: the explicit `theme` prop wins over the
+ * provider context, which defaults to the built-in dark theme.
+ */
+export function useComponentTheme(override?: Theme): Theme {
+  const contextTheme = useContext(ThemeContext);
+
+  return override ?? contextTheme;
+}