@miragon/mcp-toolkit-ui 2.6.0 → 2.8.0

package/src/components/feedback-states.test.tsx

@@ -0,0 +1,314 @@
+import type { ReactNode } from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { CircleCheck } from "lucide-react"
+import { describe, expect, it } from "vitest"
+import { LocaleProvider } from "../locale/locale-provider.js"
+import { TOOLKIT_MESSAGES } from "../locale/toolkit-messages.js"
+import { FOCUS_RING } from "../lib/focus-ring.js"
+import { createToast } from "../lib/toast-model.js"
+import { TONE_BORDER, TONE_ICON, TONE_SOFT } from "../lib/tone-utils.js"
+import { attribute, openingTags } from "../render-scan.js"
+import { EmptyState, type EmptyStateProps } from "./EmptyState.js"
+import { ErrorState, type ErrorStateTone } from "./ErrorState.js"
+import { ToastProvider, ToastViewport, useToast, type ToastApi } from "./Toast.js"
+
+/**
+ * Accessibility contract of the feedback primitives, pinned on their SSR
+ * markup (the house render path — no jsdom): roles, live regions, accessible
+ * names in the active locale, native focusable controls, nothing that steals
+ * focus.
+ */
+
+const de = TOOLKIT_MESSAGES.de
+const inGerman = (node: ReactNode) =>
+  renderToStaticMarkup(<LocaleProvider locale="de-DE">{node}</LocaleProvider>)
+const noop = (): void => {}
+
+/** No positive tabindex and no autofocus anywhere — feedback never steals focus. */
+function expectNoFocusTheft(html: string) {
+  expect(html).not.toMatch(/autofocus/i)
+  for (const value of html.match(/tabindex="(-?\d+)"/gi) ?? []) {
+    expect(Number(/"(-?\d+)"/.exec(value)?.[1])).toBeLessThanOrEqual(0)
+  }
+}
+
+describe("Toast", () => {
+  const toasts = [
+    createToast(1, { tone: "success", title: "Job retried." }),
+    createToast(2, { tone: "danger", title: "Retry failed.", description: "Engine down (503)" }),
+  ]
+
+  /** The stack's region, found by its slot (it has no role to query by). */
+  const regionOf = (html: string) =>
+    openingTags(html, "div").find((t) => attribute(t, "data-slot") === "toast-viewport") ?? ""
+
+  it("renders ONE persistent live region: aria-live=polite, each toast on its own", () => {
+    const html = inGerman(<ToastViewport toasts={toasts} onDismiss={noop} />)
+    const [region, ...others] = openingTags(html, "div").filter((t) => /aria-live=/.test(t))
+    expect(others).toHaveLength(0)
+    expect(attribute(region ?? "", "data-slot")).toBe("toast-viewport")
+    expect(attribute(region ?? "", "aria-live")).toBe("polite")
+    // Each new toast is announced on its own, not the whole stack again.
+    expect(attribute(region ?? "", "aria-atomic")).toBe("false")
+    expect(html).not.toContain('role="status"')
+  })
+
+  it("keeps the region's attributes fixed from idle to the first toast", () => {
+    // An empty stack keeps the live region, so the first toast is announced.
+    // A role or name that switched on with that toast would make the browser
+    // rebuild the region in the same commit, with the toast already inside:
+    // not announced. So idle and busy carry exactly the same attributes…
+    const idle = regionOf(inGerman(<ToastViewport toasts={[]} onDismiss={noop} />))
+    const busy = regionOf(inGerman(<ToastViewport toasts={toasts} onDismiss={noop} />))
+    expect(idle).not.toBe("")
+    expect(busy).toBe(idle)
+    // …and no role or name at all: an idle stack is no second "status" beside
+    // a view's own loading status (a generic element takes no aria-label).
+    expect(attribute(idle, "role")).toBeUndefined()
+    expect(attribute(idle, "aria-label")).toBeUndefined()
+    const loading = inGerman(
+      <ToastProvider>
+        <p role="status">Ansicht wird geladen…</p>
+      </ToastProvider>,
+    )
+    expect(loading.match(/role="status"/g)).toHaveLength(1)
+    expect(loading.match(/aria-live="polite"/g)).toHaveLength(1)
+  })
+
+  it("shows the status as edge + icon next to plain text, never as coloured text", () => {
+    const html = inGerman(<ToastViewport toasts={toasts} onDismiss={noop} />)
+    const cards = openingTags(html, "div").filter((t) => /data-slot="toast"/.test(t))
+    expect(cards.map((t) => attribute(t, "data-tone"))).toEqual(["success", "danger"])
+    expect(cards[0]).toMatch(/border-l-success/)
+    expect(cards[1]).toMatch(/border-l-danger/)
+    for (const card of cards) expect(card).not.toMatch(/\btext-(success|danger|warning|info)\b/)
+    // The edge survives the dark 3:1 rim (a later dark: rule would paint over it).
+    expect(cards[0]).toMatch(/dark:border-input/)
+    expect(cards[0]).toMatch(/dark:border-l-success/)
+    // Icons are decorative and drawn in the tone colour; the text carries the message.
+    const svgs = openingTags(html, "svg")
+    for (const svg of svgs) expect(attribute(svg, "aria-hidden")).toBe("true")
+    expect(attribute(svgs[0] ?? "", "class")).toContain(TONE_ICON.success)
+    expect(attribute(svgs[2] ?? "", "class")).toContain(TONE_ICON.danger)
+    expect(html).toContain("Job retried.")
+    expect(html).toContain("Engine down (503)")
+  })
+
+  it("sets its words as running text (16 px), not in the dense-table size", () => {
+    const html = inGerman(<ToastViewport toasts={toasts} onDismiss={noop} />)
+    for (const card of openingTags(html, "div").filter((t) => /data-slot="toast"/.test(t))) {
+      expect(attribute(card, "class")).toMatch(/(^| )text-body( |$)/)
+      expect(attribute(card, "class")).not.toMatch(/\btext-dense\b/)
+    }
+  })
+
+  it("gives every toast a native close button named in the locale, and steals no focus", () => {
+    const html = inGerman(<ToastViewport toasts={toasts} onDismiss={noop} />)
+    const buttons = openingTags(html, "button")
+    expect(buttons).toHaveLength(2)
+    for (const b of buttons) {
+      expect(attribute(b, "type")).toBe("button")
+      expect(attribute(b, "aria-label")).toBe(de.common.dismiss)
+      expect(attribute(b, "class")).toContain(FOCUS_RING)
+    }
+    expectNoFocusTheft(html)
+  })
+
+  it("nests idempotently: one provider, one viewport", () => {
+    const html = renderToStaticMarkup(
+      <ToastProvider>
+        <ToastProvider>
+          <p>body</p>
+        </ToastProvider>
+      </ToastProvider>,
+    )
+    expect(html.match(/data-slot="toast-viewport"/g)).toHaveLength(1)
+    expect(html).toContain("<p>body</p>")
+  })
+
+  it("useToast outside a provider is a safe no-op", () => {
+    let api: ToastApi | undefined
+    function Probe() {
+      api = useToast()
+      return null
+    }
+    renderToStaticMarkup(<Probe />)
+    expect(api?.show({ title: "x" })).toBe(-1)
+    expect(() => api?.dismiss(1)).not.toThrow()
+  })
+})
+
+describe("EmptyState", () => {
+  it("is static (no live region), titles with h3 by default, hides its icon from AT", () => {
+    const html = inGerman(
+      <EmptyState
+        icon={<CircleCheck />}
+        tone="success"
+        title="Keine offenen Incidents"
+        description="Alles erledigt."
+      />,
+    )
+    expect(html).not.toMatch(/role="(status|alert)"|aria-live/)
+    expect(html).toMatch(/<h3[^>]*>Keine offenen Incidents<\/h3>/)
+    const iconSlot = openingTags(html, "div").find((t) => /aria-hidden="true"/.test(t))
+    // The success tone on the icon (TONE_ICON), never on the words.
+    expect(iconSlot).toContain(TONE_ICON.success)
+    expect(html).not.toMatch(/text-success-ink/)
+    expect(html).toContain("Alles erledigt.")
+  })
+
+  it("sizes an icon to 24 px but lets a mark keep its own size-* class (the Komet needs room)", () => {
+    const html = renderToStaticMarkup(
+      <EmptyState icon={<svg className="size-12" aria-label="mark" />} title="Willkommen" />,
+    )
+    const slot = openingTags(html, "div").find((t) => /aria-hidden="true"/.test(t)) ?? ""
+    const slotClass = attribute(slot, "class") ?? ""
+    // The default applies only to an SVG without its own size class…
+    expect(slotClass).toContain("[&_svg:not([class*='size-'])]:size-6")
+    // …and never as a clamp that outranks the mark's class (0,1,1 beats 0,1,0).
+    expect(slotClass).not.toMatch(/\[&_svg\]:size-/)
+    expect(html).toContain('<svg class="size-12"')
+  })
+
+  it("takes the heading level of its surface and at most two actions", () => {
+    const html = renderToStaticMarkup(
+      <EmptyState
+        titleAs="h2"
+        title="Nothing here"
+        action={<button type="button">First</button>}
+        secondaryAction={<button type="button">Second</button>}
+      />,
+    )
+    expect(html).toMatch(/<h2[^>]*>Nothing here<\/h2>/)
+    expect(openingTags(html, "button")).toHaveLength(2)
+    expect(renderToStaticMarkup(<EmptyState title="Bare" />)).not.toContain("<button")
+  })
+
+  it("sets its help line as running text (16 px), not in the dense-table size", () => {
+    const html = renderToStaticMarkup(<EmptyState title="Nothing" description="Add one." />)
+    const line = openingTags(html, "p").find((t) => /max-w-prose/.test(t)) ?? ""
+    expect(attribute(line, "class")).toMatch(/(^| )text-body( |$)/)
+    expect(html).not.toMatch(/\btext-dense\b/)
+  })
+
+  it("resolves an untyped tone: a retired success name colours the icon, anything else stays quiet", () => {
+    const iconClass = (tone: string) => {
+      const html = renderToStaticMarkup(
+        <EmptyState
+          icon={<CircleCheck />}
+          tone={tone as unknown as EmptyStateProps["tone"]}
+          title="x"
+        />,
+      )
+      return openingTags(html, "div").find((t) => /aria-hidden="true"/.test(t)) ?? ""
+    }
+    expect(iconClass("ok")).toContain(TONE_ICON.success)
+    expect(iconClass("danger")).toContain(TONE_ICON.neutral)
+    expect(iconClass("purple")).toContain(TONE_ICON.neutral)
+  })
+})
+
+describe("ErrorState", () => {
+  it("announces itself (role=alert) with a heading, the hint, details and a retry in the locale", () => {
+    const html = inGerman(
+      <ErrorState
+        title="Die Ansicht konnte nicht geladen werden"
+        description="Versuch es noch mal."
+        details="[503 ProcessEngineException] Engine is shutting down"
+        onRetry={noop}
+      />,
+    )
+    const root = openingTags(html, "div")[0] ?? ""
+    expect(attribute(root, "role")).toBe("alert")
+    expect(attribute(root, "data-variant")).toBe("block")
+    expect(html).toMatch(/<h2[^>]*>Die Ansicht konnte nicht geladen werden<\/h2>/)
+    // The raw reason sits collapsed in a native disclosure (keyboard-ready).
+    expect(html).toMatch(/<details[^>]*><summary[^>]*>Details<\/summary>/)
+    expect(html).not.toMatch(/<details[^>]*\sopen/)
+    const [retry] = openingTags(html, "button")
+    expect(attribute(retry ?? "", "type")).toBe("button")
+    expect(html).toContain(`${de.common.retry}</button>`)
+    expectNoFocusTheft(html)
+  })
+
+  it("supports a quieter status role, no role at all, and the inline alert form", () => {
+    const status = renderToStaticMarkup(<ErrorState title="Notice" role="status" tone="info" />)
+    expect(attribute(openingTags(status, "div")[0] ?? "", "role")).toBe("status")
+    const none = renderToStaticMarkup(<ErrorState title="Static" role="none" />)
+    expect(attribute(openingTags(none, "div")[0] ?? "", "role")).toBeUndefined()
+    const inline = renderToStaticMarkup(
+      <ErrorState variant="inline" title="Partial" tone="warning" />,
+    )
+    expect(inline).toMatch(/<p[^>]*>Partial<\/p>/)
+    expect(attribute(openingTags(inline, "div")[0] ?? "", "data-tone")).toBe("warning")
+  })
+
+  it.each(["danger", "warning", "info"] as const)(
+    "shows the %s tone as rim, tint and icon; every word on the tint is the foreground (CI §3.3)",
+    (tone) => {
+      const html = renderToStaticMarkup(
+        <ErrorState title="x" description="what to do" details="raw" tone={tone} onRetry={noop} />,
+      )
+      const rootClass = attribute(openingTags(html, "div")[0] ?? "", "class") ?? ""
+      expect(rootClass).toContain(TONE_SOFT[tone])
+      expect(rootClass).toContain(TONE_BORDER[tone])
+      expect(attribute(openingTags(html, "svg")[0] ?? "", "class")).toContain(TONE_ICON[tone])
+      // No quiet text, no ink and no status colour as text anywhere on the tint
+      // (the icons, which carry the tone colour, set aside).
+      const words = html.replace(/<svg[\s\S]*?<\/svg>/g, "")
+      expect(words).not.toMatch(/text-muted-foreground|text-\w+-ink|text-(danger|warning|info)\b/)
+      // The disclosure is a kit control: the kit's opaque focus ring.
+      expect(attribute(openingTags(html, "summary")[0] ?? "", "class")).toContain(FOCUS_RING)
+    },
+  )
+
+  it("has no retry without onRetry, and takes custom labels", () => {
+    expect(renderToStaticMarkup(<ErrorState title="x" />)).not.toContain("<button")
+    const html = renderToStaticMarkup(
+      <ErrorState
+        title="x"
+        details="raw"
+        detailsLabel="Technical"
+        onRetry={noop}
+        retryLabel="Reload"
+        actions={<a href="#help">Help</a>}
+      />,
+    )
+    expect(html).toContain("Technical</summary>")
+    expect(html).toContain("Reload</button>")
+    expect(html).toContain('<a href="#help">Help</a>')
+  })
+
+  it("sets the block's description as running text (16 px); the inline alert box stays dense", () => {
+    const descriptionClass = (html: string) =>
+      /<div class="([^"]*)">what to do<\/div>/.exec(html)?.[1] ?? ""
+    const block = renderToStaticMarkup(<ErrorState title="x" description="what to do" />)
+    expect(descriptionClass(block)).toMatch(/(^| )text-body( |$)/)
+    const inline = renderToStaticMarkup(
+      <ErrorState variant="inline" title="x" description="what to do" />,
+    )
+    expect(descriptionClass(inline)).toMatch(/(^| )text-dense( |$)/)
+  })
+
+  it.each([
+    ["error", "danger"],
+    ["critical", "danger"],
+    ["warn", "warning"],
+    ["notice", "info"],
+    ["success", "danger"],
+    ["purple", "danger"],
+  ])(
+    "resolves an untyped tone %j to its %s state instead of crashing on a missing icon",
+    (name, tone) => {
+      const html = renderToStaticMarkup(
+        <ErrorState title="x" tone={name as unknown as ErrorStateTone} />,
+      )
+      const root = openingTags(html, "div")[0] ?? ""
+      expect(attribute(root, "data-tone")).toBe(tone)
+      expect(attribute(root, "class")).toContain(TONE_BORDER[tone as ErrorStateTone])
+      expect(attribute(openingTags(html, "svg")[0] ?? "", "class")).toContain(
+        TONE_ICON[tone as ErrorStateTone],
+      )
+    },
+  )
+})

package/src/components/tone-figures.test.tsx

@@ -0,0 +1,58 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import { describe, expect, it } from "vitest"
+import type { ToneVariant } from "../lib/tone-utils.js"
+import { KpiGrid } from "./KpiGrid.js"
+import { CountPill, LivePill } from "./Pills.js"
+
+/**
+ * Status model (owner decision 2e-f, CI §3.3): coloured digits are retired.
+ * A figure — a KPI value, a trend, a count — stays in the foreground; the tone
+ * shows as a dot, a border or a tint next to it. These components carry
+ * figures, so no tone colour may reach their text (SSR, the house render path).
+ */
+
+const STATUS = ["info", "success", "warning", "danger"] as const
+const TONES: ToneVariant[] = ["neutral", ...STATUS]
+/** Any tone used as a TEXT colour: the raw status colour or its -ink role. */
+const TONE_AS_TEXT = /\btext-(?:success|warning|danger|info)(?:-ink)?\b/
+
+describe("figures never take a tone colour", () => {
+  it("KpiGrid: trend lines and toned cells keep their text in the foreground", () => {
+    const html = renderToStaticMarkup(
+      <KpiGrid
+        cells={[
+          { label: "Up", value: "12", trend: "+12% vs last week", trendDirection: "up" },
+          { label: "Down", value: "3", trend: "-4% vs last week", trendDirection: "down" },
+          { label: "Flat", value: "7", trend: "±0", trendDirection: "flat" },
+          ...STATUS.map((tone) => ({ label: tone, value: "1", tone })),
+        ]}
+      />,
+    )
+    // Icons draw in the tone (SVG currentColor, TONE_ICON); no WORD or digit does.
+    const words = html.replace(/<svg[\s\S]*?<\/svg>/g, "")
+    expect(words).not.toMatch(TONE_AS_TEXT)
+    // The tone is still there — as a dot next to a label, an icon next to a trend.
+    expect(html).toMatch(/bg-danger\b/)
+    expect(html).toMatch(/bg-success\b/)
+    expect(html).toMatch(/<svg[^>]*class="lucide lucide-trending-up[^"]*text-danger"/)
+    expect(html).toMatch(/<svg[^>]*class="lucide lucide-trending-down[^"]*text-success"/)
+    // A toned trend reads in the foreground, an untoned one stays quiet.
+    expect(html).toMatch(/<span class="text-foreground">\+12% vs last week<\/span>/)
+    expect(html).toMatch(/<span class="text-muted-foreground">±0<\/span>/)
+  })
+
+  it.each(TONES)(
+    "CountPill and LivePill (%s): number and label in the foreground, tone on the rim",
+    (tone) => {
+      const count = renderToStaticMarkup(<CountPill tone={tone}>42</CountPill>)
+      const live = renderToStaticMarkup(<LivePill tone={tone}>Live</LivePill>)
+      for (const html of [count, live]) {
+        expect(html).not.toMatch(TONE_AS_TEXT)
+        if (tone !== "neutral") {
+          expect(html).toContain("text-foreground")
+          expect(html).toContain(`border-${tone}`)
+        }
+      }
+    },
+  )
+})

package/src/fonts.css

@@ -0,0 +1,19 @@
+/*
+ * @miragon/mcp-toolkit-ui/fonts.css — OPT-IN: Geist and Geist Mono, self-hosted
+ * through your bundler (no CDN). Import it next to globals.css/theme.css:
+ *
+ *   @import "@miragon/mcp-toolkit-ui/globals.css";
+ *   @import "@miragon/mcp-toolkit-ui/fonts.css";
+ *
+ * Cost: a bundler that inlines assets (vite-plugin-singlefile, MCP App views)
+ * embeds the woff2 files as base64 in every view. When a server can serve the
+ * files, prefer `fontFaces({ baseUrl })`, which references them by URL (and
+ * allow that origin in the view's CSP resourceDomains). The token stacks
+ * (--font-sans, --font-mono) name both families first, so either path works.
+ * A host's own font stays the fallback behind them: McpToolkitApp moves it
+ * to --host-font-sans/--host-font-mono (adoptHostFontVariables); an app with
+ * its own host-document layer calls that helper after applying the host's
+ * style variables, or the host's --font-sans replaces the whole stack.
+ */
+@import "@fontsource-variable/geist/wght.css";
+@import "@fontsource-variable/geist-mono/wght.css";

package/src/globals.css

@@ -1,168 +1,12 @@
+/*
+ * @miragon/mcp-toolkit-ui/globals.css — the one-line stylesheet for an app
+ * entry: Tailwind, the toolkit's design tokens (./theme.css, Miragon by
+ * default) and the toolkit's own class sources. Fonts are opt-in: add
+ * `@import "@miragon/mcp-toolkit-ui/fonts.css"` or serve them with
+ * `fontFaces()`. A brand overrides the role variables after this import —
+ * see docs/guides/white-labeling.md.
+ */
 @import "tailwindcss";
-@import "tw-animate-css";
-@import "@fontsource-variable/geist";
+@import "./theme.css";
 
 @source "../**/*.{ts,tsx}";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --font-heading: var(--font-sans);
-  --font-sans: "Geist Variable", sans-serif;
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  /* Semantic status tones — the token surface behind ToneVariant/TONE_* maps.
-     Each tone exposes a readable foreground (`text-danger`) and a tinted
-     surface (`bg-danger-soft`); both carry light + dark values so tone-based
-     components (Pills, KpiGrid, WidgetHeader, FilterBar) re-theme automatically. */
-  --color-danger: var(--danger);
-  --color-danger-soft: var(--danger-soft);
-  --color-warning: var(--warning);
-  --color-warning-soft: var(--warning-soft);
-  --color-success: var(--success);
-  --color-success-soft: var(--success-soft);
-  --color-info: var(--info);
-  --color-info-soft: var(--info-soft);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-}
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  /* Semantic status tones (light). Foreground = readable on a card; *-soft =
-     a tinted surface for badges/dots/icon tiles. Neutral tone reuses the
-     muted ramp and needs no dedicated token. */
-  --danger: oklch(0.55 0.21 27.3);
-  --danger-soft: oklch(0.95 0.04 27.3);
-  --warning: oklch(0.62 0.16 70);
-  --warning-soft: oklch(0.95 0.05 80);
-  --success: oklch(0.58 0.15 152);
-  --success-soft: oklch(0.95 0.05 152);
-  --info: oklch(0.55 0.2 255);
-  --info-soft: oklch(0.95 0.04 255);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-  /* Semantic status tones (dark). Brighter foregrounds for contrast on the
-     dark surface; *-soft is a low-alpha tint of the same hue. */
-  --danger: oklch(0.7 0.19 22.2);
-  --danger-soft: oklch(0.7 0.19 22.2 / 18%);
-  --warning: oklch(0.78 0.15 75);
-  --warning-soft: oklch(0.78 0.15 75 / 18%);
-  --success: oklch(0.72 0.17 152);
-  --success-soft: oklch(0.72 0.17 152 / 18%);
-  --info: oklch(0.7 0.16 255);
-  --info-soft: oklch(0.7 0.16 255 / 18%);
-}
-
-* {
-  font-family: "Geist Variable", ui-sans-serif, system-ui, sans-serif !important;
-}
-
-@layer base {
-  *,
-  *::before,
-  *::after {
-    @apply border-border outline-ring/50;
-  }
-  html,
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/src/hooks/index.ts

@@ -1,17 +1,20 @@
 export { useIsMobile } from "./use-mobile.js"
 export { useDebouncedValue } from "./use-debounced-value.js"
-export { useToolQuery, useToolMutation } from "./use-tool-query.js"
-export type { UseToolQueryOptions } from "./use-tool-query.js"
+export { useToolQuery, useToolQueryKey, useToolMutation } from "./use-tool-query.js"
+export type { UseToolQueryOptions, UseToolMutationOptions } from "./use-tool-query.js"
 export { useViewToolQuery } from "./use-view-tool-query.js"
 export type { UseViewToolQueryOptions } from "./use-view-tool-query.js"
 export { useViewData } from "./use-view-data.js"
-export type { ViewDataResult } from "./use-view-data.js"
+export type { ViewDataResult, UseViewDataOptions, ViewDataMode } from "./use-view-data.js"
 export {
   useToolResultRecovery,
   resolveRecoveryToolName,
   decodeRecoveredResult,
 } from "./use-tool-result-recovery.js"
 export type {
+  RecoveryBlockReason,
+  RecoveryPolicy,
   ToolResultRecoveryOptions,
   ToolResultRecoveryState,
+  ToolSafety,
 } from "./use-tool-result-recovery.js"