@elabs-ai/components-ai 4.0.0 → 4.2.0

package/src/{model-selector.stories.tsx → model-provider-logo.stories.tsx}

@@ -1,30 +1,39 @@
 /**
- * ModelSelector — a command-palette model picker.
+ * ModelProviderLogo — the mark of an AI model provider, sized for a list row.
  *
- * `ModelSelectorLogo` fetches provider marks from a **remote origin**
+ * It fetches provider marks from a **remote origin**
  * (`models.dev`) by default, so a restrictive `img-src` blocks them. Pass `src`
  * to self-host, or `fallback` to control what a blocked load renders — it is
  * never a broken-image glyph. See `docs/CSP-AND-NETWORK.md`.
  */
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { ModelSelectorLogo } from "./model-selector";
+import { ModelProviderLogo } from "./model-provider-logo";
 
 const meta = {
-  title: "AI/ModelSelectorLogo",
-  component: ModelSelectorLogo,
+  title: "AI/ModelProviderLogo",
+  component: ModelProviderLogo,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "Provider logo for the model selector. Defaults to fetching from models.dev; pass `src` for a self-hosted asset and `fallback` for the blocked/offline case. A failed load renders a neutral glyph, never a broken image.",
+          "The mark of an AI model provider, sized for a row in a model list. Defaults to " +
+          "fetching from models.dev; pass `src` for a self-hosted asset and `fallback` for the " +
+          "blocked/offline case. A failed load renders a neutral glyph, never a broken image.\n\n" +
+          "**`ModelProviderLogo` vs `ServiceLogo` (`@elabs-ai/components-icons`).** An AI " +
+          "provider mark with a zero-config remote default → this component. Any other " +
+          "third-party service mark, resolved from a registry the app supplies and never " +
+          "fetched → `ServiceLogo`.\n\n" +
+          "For the list this logo sits in: an inline pill in a composer footer → `ModelPicker` " +
+          "(`@elabs-ai/components-ui`); a full ⌘K palette → compose `CommandDialog` + " +
+          "`Command*` from `@elabs-ai/components-ui` directly.",
       },
     },
   },
   args: { provider: "anthropic" },
   tags: ["autodocs"],
-} satisfies Meta<typeof ModelSelectorLogo>;
+} satisfies Meta<typeof ModelProviderLogo>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -64,7 +73,7 @@ export const LiveRemoteLogos: Story = {
     <div className="flex items-center gap-4">
       {(["anthropic", "openai", "google", "mistral"] as const).map((provider) => (
         <figure className="flex flex-col items-center gap-2" key={provider}>
-          <ModelSelectorLogo provider={provider} />
+          <ModelProviderLogo provider={provider} />
           <figcaption className="text-meta text-muted-foreground">{provider}</figcaption>
         </figure>
       ))}

package/src/model-provider-logo.test.tsx

@@ -0,0 +1,109 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+
+import {
+  MODEL_PROVIDER_LOGO_BASE_URL,
+  ModelProviderLogo,
+  ModelProviderLogoGroup,
+} from "./model-provider-logo";
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.removeAttribute("data-theme");
+  document.documentElement.style.colorScheme = "";
+});
+
+describe("ModelProviderLogo — remote origin escape hatches", () => {
+  it("defaults to the models.dev logo for the provider", () => {
+    render(<ModelProviderLogo provider="anthropic" />);
+    expect(screen.getByRole("img", { name: "anthropic logo" })).toHaveAttribute(
+      "src",
+      `${MODEL_PROVIDER_LOGO_BASE_URL}/anthropic.svg`,
+    );
+  });
+
+  it("lets a caller override src for a self-hosted asset", () => {
+    // The old props type did `Omit<…, "src">` AND spread props before `src=`, so
+    // a self-hosting consumer had no way to win. Both are fixed.
+    render(<ModelProviderLogo provider="anthropic" src="/local/anthropic.svg" />);
+    expect(screen.getByRole("img", { name: "anthropic logo" })).toHaveAttribute(
+      "src",
+      "/local/anthropic.svg",
+    );
+  });
+
+  it("renders a neutral glyph instead of a broken image when the load fails", () => {
+    render(<ModelProviderLogo provider="anthropic" />);
+    fireEvent.error(screen.getByRole("img", { name: "anthropic logo" }));
+
+    const fallback = screen.getByRole("img", { name: "anthropic logo" });
+    expect(fallback.tagName.toLowerCase()).toBe("svg");
+    expect(fallback).not.toHaveAttribute("src");
+  });
+
+  it("renders a caller-supplied fallback when provided", () => {
+    render(<ModelProviderLogo provider="anthropic" fallback={<span data-testid="fb">AI</span>} />);
+    fireEvent.error(screen.getByRole("img", { name: "anthropic logo" }));
+    expect(screen.getByTestId("fb")).toBeInTheDocument();
+  });
+
+  it("still calls a caller's onError", () => {
+    const onError = vi.fn();
+    render(<ModelProviderLogo provider="anthropic" onError={onError} />);
+    fireEvent.error(screen.getByRole("img", { name: "anthropic logo" }));
+    expect(onError).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps an accessible name in both states", () => {
+    const { rerender } = render(<ModelProviderLogo provider="openai" />);
+    expect(screen.getByRole("img", { name: "openai logo" })).toBeInTheDocument();
+
+    fireEvent.error(screen.getByRole("img", { name: "openai logo" }));
+    rerender(<ModelProviderLogo provider="openai" />);
+    expect(screen.getByRole("img", { name: "openai logo" })).toBeInTheDocument();
+  });
+});
+
+// Was `dark:invert` — a bare Tailwind dark: variant, which per theming.md only
+// covers the two SHIPPED themes and misses any consumer-registered dark theme
+// (ADR 0029, open theme registry). Now driven by `resolveThemeIsDark`, the
+// same signal `Toaster` uses, so it follows the ACTIVE theme's own
+// `color-scheme`, not a hardcoded theme name (review #1).
+describe("ModelProviderLogo — theme-driven invert (review #1)", () => {
+  it("does not invert under the light theme", () => {
+    document.documentElement.setAttribute("data-theme", "light");
+    render(<ModelProviderLogo provider="anthropic" />);
+    expect(screen.getByRole("img", { name: "anthropic logo" })).not.toHaveClass("invert");
+  });
+
+  it("inverts under the dark theme", () => {
+    document.documentElement.setAttribute("data-theme", "dark");
+    render(<ModelProviderLogo provider="anthropic" />);
+    expect(screen.getByRole("img", { name: "anthropic logo" })).toHaveClass("invert");
+  });
+
+  it("also inverts under a consumer-registered dark theme, not only the shipped one", () => {
+    // A raw `dark:` utility only ever matches `data-theme="dark"` — this
+    // is exactly the gap `resolveThemeIsDark`'s `color-scheme` reading closes.
+    document.documentElement.setAttribute("data-theme", "midnight");
+    document.documentElement.style.colorScheme = "dark";
+    render(<ModelProviderLogo provider="anthropic" />);
+    expect(screen.getByRole("img", { name: "anthropic logo" })).toHaveClass("invert");
+  });
+});
+
+describe("ModelProviderLogoGroup — theme-driven backdrop (review #1)", () => {
+  it("backs logos with --background in the light theme", () => {
+    document.documentElement.setAttribute("data-theme", "light");
+    const { container } = render(<ModelProviderLogoGroup />);
+    expect(container.firstElementChild?.className).toContain("[&>img]:bg-background");
+    expect(container.firstElementChild?.className).not.toContain("[&>img]:bg-foreground");
+  });
+
+  it("backs logos with --foreground in the dark theme", () => {
+    document.documentElement.setAttribute("data-theme", "dark");
+    const { container } = render(<ModelProviderLogoGroup />);
+    expect(container.firstElementChild?.className).toContain("[&>img]:bg-foreground");
+    expect(container.firstElementChild?.className).not.toContain("[&>img]:bg-background");
+  });
+});

package/src/model-provider-logo.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { resolveThemeIsDark } from "@elabs-ai/components-tokens";
+import { BotIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { useEffect, useState } from "react";
+
+/**
+ * Tracks the ACTIVE theme's own `color-scheme` (`resolveThemeIsDark`), not the
+ * two shipped `light`/`dark` themes — a consumer-authored dark theme still
+ * gets an inverted (visible) logo with no registration step (theming.md:
+ * "Use semantic tokens, not `dark:` — `@custom-variant dark` covers only the
+ * themes shipped HERE"). Mirrors `Toaster`'s `useDocumentThemeMode`
+ * (`packages/ui/src/components/sonner/sonner.tsx`).
+ */
+function useIsDarkTheme(): boolean {
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const el = document.documentElement;
+    const read = () => setIsDark(resolveThemeIsDark(el));
+    read();
+    const obs = new MutationObserver(read);
+    obs.observe(el, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => obs.disconnect();
+  }, []);
+  return isDark;
+}
+
+/**
+ * Where provider logos are fetched from by default.
+ *
+ * This is a REMOTE origin: a deployment with a restrictive `img-src` blocks it.
+ * Self-host the SVGs and pass `src` (or set a `fallback`) — see
+ * `docs/CSP-AND-NETWORK.md`.
+ */
+export const MODEL_PROVIDER_LOGO_BASE_URL = "https://models.dev/logos";
+
+export type ModelProviderLogoProps = Omit<ComponentProps<"img">, "alt"> & {
+  /**
+   * Override the logo URL — point at a self-hosted or bundled asset when a CSP
+   * blocks `models.dev`. Defaults to `${MODEL_PROVIDER_LOGO_BASE_URL}/<provider>.svg`.
+   */
+  src?: string;
+  /**
+   * Rendered when the logo fails to load (blocked, offline, or unknown
+   * provider). Defaults to a neutral Lucide glyph, so the row never collapses
+   * to a broken image.
+   */
+  fallback?: ReactNode;
+  provider:
+    | "moonshotai-cn"
+    | "lucidquery"
+    | "moonshotai"
+    | "zai-coding-plan"
+    | "alibaba"
+    | "xai"
+    | "vultr"
+    | "nvidia"
+    | "upstage"
+    | "groq"
+    | "github-copilot"
+    | "mistral"
+    | "vercel"
+    | "nebius"
+    | "deepseek"
+    | "alibaba-cn"
+    | "google-vertex-anthropic"
+    | "venice"
+    | "chutes"
+    | "cortecs"
+    | "github-models"
+    | "togetherai"
+    | "azure"
+    | "baseten"
+    | "huggingface"
+    | "opencode"
+    | "fastrouter"
+    | "google"
+    | "google-vertex"
+    | "cloudflare-workers-ai"
+    | "inception"
+    | "wandb"
+    | "openai"
+    | "zhipuai-coding-plan"
+    | "perplexity"
+    | "openrouter"
+    | "zenmux"
+    | "v0"
+    | "iflowcn"
+    | "synthetic"
+    | "deepinfra"
+    | "zhipuai"
+    | "submodel"
+    | "zai"
+    | "inference"
+    | "requesty"
+    | "morph"
+    | "lmstudio"
+    | "anthropic"
+    | "aihubmix"
+    | "fireworks-ai"
+    | "modelscope"
+    | "llama"
+    | "scaleway"
+    | "amazon-bedrock"
+    | "cerebras"
+    // oxlint-disable-next-line typescript-eslint(ban-types) -- intentional pattern for autocomplete-friendly string union
+    | (string & {});
+};
+
+/**
+ * The mark of an AI model provider (`anthropic`, `openai`, `google`, …), sized
+ * for a row in a model list.
+ *
+ * **`ModelProviderLogo` vs `ServiceLogo` (`@elabs-ai/components-icons`).** An AI
+ * provider mark with a zero-config remote default — name the provider and a logo
+ * appears, no registration step — is this component. Any other third-party
+ * service mark, resolved from a registry the app supplies and never fetched, is
+ * `ServiceLogo`. The two are not interchangeable: `ServiceLogo` has no
+ * per-instance `src` and no `onError`, and this one reaches a remote origin by
+ * default (see `docs/CSP-AND-NETWORK.md`).
+ */
+export const ModelProviderLogo = ({
+  provider,
+  className,
+  src,
+  fallback,
+  onError,
+  ...props
+}: ModelProviderLogoProps) => {
+  const [failed, setFailed] = useState(false);
+  const isDark = useIsDarkTheme();
+
+  // A blocked/missing logo must not leave a broken-image glyph in the row.
+  if (failed) {
+    return (
+      <>
+        {fallback ?? (
+          <BotIcon aria-label={`${provider} logo`} className={cn("size-3", className)} role="img" />
+        )}
+      </>
+    );
+  }
+
+  return (
+    <img
+      {...props}
+      alt={`${provider} logo`}
+      className={cn("size-3", isDark && "invert", className)}
+      height={12}
+      onError={(event) => {
+        setFailed(true);
+        onError?.(event);
+      }}
+      // AFTER the spread, so the caller's `src` wins via the destructured
+      // default rather than being silently overwritten.
+      src={src ?? `${MODEL_PROVIDER_LOGO_BASE_URL}/${provider}.svg`}
+      width={12}
+    />
+  );
+};
+
+export type ModelProviderLogoGroupProps = ComponentProps<"div">;
+
+export const ModelProviderLogoGroup = ({ className, ...props }: ModelProviderLogoGroupProps) => {
+  // Same active-theme signal as the single logo above (not the two shipped
+  // `light`/`dark` themes) — the backdrop swaps to `--foreground` so a
+  // transparent-background SVG still reads against a dark chip in ANY dark
+  // theme a consumer registers.
+  const isDark = useIsDarkTheme();
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:p-px [&>img]:ring-1",
+        isDark ? "[&>img]:bg-foreground" : "[&>img]:bg-background",
+        className,
+      )}
+      {...props}
+    />
+  );
+};

package/src/open-in-chat.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@elabs-ai/components-ui";
+import { Button, useLocale } from "@elabs-ai/components-ui";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -23,11 +23,11 @@ const providers = {
       })}`,
     icon: (
       <svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <title>OpenAI</title>
+        <title>OpenAI</title> {/* i18n-exempt: brand name */}
         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
       </svg>
     ),
-    title: "Open in ChatGPT",
+    title: "ChatGPT", // i18n-exempt: brand name
   },
   claude: {
     createUrl: (q: string) =>
@@ -36,7 +36,7 @@ const providers = {
       })}`,
     icon: (
       <svg fill="currentColor" role="img" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-        <title>Claude</title>
+        <title>Claude</title> {/* i18n-exempt: brand name */}
         <path
           clipRule="evenodd"
           d="M2.3545 7.9775L4.7145 6.654L4.7545 6.539L4.7145 6.475H4.6L4.205 6.451L2.856 6.4145L1.6865 6.366L0.5535 6.305L0.268 6.2445L0 5.892L0.0275 5.716L0.2675 5.5555L0.6105 5.5855L1.3705 5.637L2.5095 5.716L3.3355 5.7645L4.56 5.892H4.7545L4.782 5.8135L4.715 5.7645L4.6635 5.716L3.4845 4.918L2.2085 4.074L1.5405 3.588L1.1785 3.3425L0.9965 3.1115L0.9175 2.6075L1.2455 2.2465L1.686 2.2765L1.7985 2.307L2.245 2.65L3.199 3.388L4.4445 4.3045L4.627 4.4565L4.6995 4.405L4.709 4.3685L4.627 4.2315L3.9495 3.0085L3.2265 1.7635L2.9045 1.2475L2.8195 0.938C2.78711 0.819128 2.76965 0.696687 2.7675 0.5735L3.1415 0.067L3.348 0L3.846 0.067L4.056 0.249L4.366 0.956L4.867 2.0705L5.6445 3.5855L5.8725 4.0345L5.994 4.4505L6.0395 4.578H6.1185V4.505L6.1825 3.652L6.301 2.6045L6.416 1.257L6.456 0.877L6.644 0.422L7.0175 0.176L7.3095 0.316L7.5495 0.6585L7.516 0.8805L7.373 1.806L7.0935 3.2575L6.9115 4.2285H7.0175L7.139 4.1075L7.6315 3.4545L8.4575 2.4225L8.8225 2.0125L9.2475 1.5605L9.521 1.345H10.0375L10.4175 1.9095L10.2475 2.4925L9.7155 3.166L9.275 3.737L8.643 4.587L8.248 5.267L8.2845 5.322L8.3785 5.312L9.8065 5.009L10.578 4.869L11.4985 4.7115L11.915 4.9055L11.9605 5.103L11.7965 5.5065L10.812 5.7495L9.6575 5.9805L7.938 6.387L7.917 6.402L7.9415 6.4325L8.716 6.5055L9.047 6.5235H9.858L11.368 6.636L11.763 6.897L12 7.216L11.9605 7.4585L11.353 7.7685L10.533 7.574L8.6185 7.119L7.9625 6.9545H7.8715V7.0095L8.418 7.5435L9.421 8.4485L10.6755 9.6135L10.739 9.9025L10.578 10.13L10.408 10.1055L9.3055 9.277L8.88 8.9035L7.917 8.0935H7.853V8.1785L8.075 8.503L9.2475 10.2635L9.3085 10.8035L9.2235 10.98L8.9195 11.0865L8.5855 11.0255L7.8985 10.063L7.191 8.9795L6.6195 8.008L6.5495 8.048L6.2125 11.675L6.0545 11.86L5.69 12L5.3865 11.7695L5.2255 11.396L5.3865 10.658L5.581 9.696L5.7385 8.931L5.8815 7.981L5.9665 7.665L5.9605 7.644L5.8905 7.653L5.1735 8.6365L4.0835 10.109L3.2205 11.0315L3.0135 11.1135L2.655 10.9285L2.6885 10.5975L2.889 10.303L4.083 8.785L4.803 7.844L5.268 7.301L5.265 7.222H5.2375L2.066 9.28L1.501 9.353L1.2575 9.125L1.288 8.752L1.4035 8.6305L2.3575 7.9745L2.3545 7.9775Z"
@@ -44,7 +44,7 @@ const providers = {
         />
       </svg>
     ),
-    title: "Open in Claude",
+    title: "Claude", // i18n-exempt: brand name
   },
   cursor: {
     createUrl: (text: string) => {
@@ -54,24 +54,24 @@ const providers = {
     },
     icon: (
       <svg version="1.1" viewBox="0 0 466.73 532.09" xmlns="http://www.w3.org/2000/svg">
-        <title>Cursor</title>
+        <title>Cursor</title> {/* i18n-exempt: brand name */}
         <path
           d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"
           fill="currentColor"
         />
       </svg>
     ),
-    title: "Open in Cursor",
+    title: "Cursor", // i18n-exempt: brand name
   },
   github: {
     createUrl: (url: string) => url,
     icon: (
       <svg fill="currentColor" role="img" viewBox="0 0 24 24">
-        <title>GitHub</title>
+        <title>GitHub</title> {/* i18n-exempt: brand name */}
         <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
       </svg>
     ),
-    title: "Open in GitHub",
+    title: "GitHub", // i18n-exempt: brand name
   },
   scira: {
     createUrl: (q: string) =>
@@ -86,7 +86,7 @@ const providers = {
         width="910"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <title>Scira AI</title>
+        <title>Scira AI</title> {/* i18n-exempt: brand name */}
         <path
           d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
           fill="currentColor"
@@ -136,7 +136,7 @@ const providers = {
         />
       </svg>
     ),
-    title: "Open in Scira",
+    title: "Scira", // i18n-exempt: brand name
   },
   t3: {
     createUrl: (q: string) =>
@@ -144,7 +144,7 @@ const providers = {
         q,
       })}`,
     icon: <MessageCircleIcon />,
-    title: "Open in T3 Chat",
+    title: "T3 Chat", // i18n-exempt: brand name
   },
   v0: {
     createUrl: (q: string) =>
@@ -158,7 +158,7 @@ const providers = {
         <path d="M147 56H133V23.9531L100.953 56H133V70H96.6875C85.8144 70 77 61.1856 77 50.3125V14H91V46.1562L123.156 14H91V0H127.312C138.186 0 147 8.81439 147 19.6875V56Z" />
       </svg>
     ),
-    title: "Open in v0",
+    title: "v0", // i18n-exempt: brand name
   },
 };
 
@@ -208,21 +208,25 @@ export const OpenInSeparator = (props: OpenInSeparatorProps) => (
 
 export type OpenInTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
 
-export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => (
-  <DropdownMenuTrigger {...props} asChild>
-    {children ?? (
-      <Button type="button" variant="outline">
-        Open in chat
-        <ChevronDownIcon className="size-4" />
-      </Button>
-    )}
-  </DropdownMenuTrigger>
-);
+export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => {
+  const { t } = useLocale();
+  return (
+    <DropdownMenuTrigger {...props} asChild>
+      {children ?? (
+        <Button type="button" variant="outline">
+          {t("ai.openInChat.trigger")}
+          <ChevronDownIcon className="size-4" />
+        </Button>
+      )}
+    </DropdownMenuTrigger>
+  );
+};
 
 export type OpenInChatGPTProps = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -232,7 +236,9 @@ export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.chatgpt.icon}</span>
-        <span className="flex-1">{providers.chatgpt.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.chatgpt.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>
@@ -243,6 +249,7 @@ export type OpenInClaudeProps = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInClaude = (props: OpenInClaudeProps) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -252,7 +259,9 @@ export const OpenInClaude = (props: OpenInClaudeProps) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.claude.icon}</span>
-        <span className="flex-1">{providers.claude.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.claude.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>
@@ -263,6 +272,7 @@ export type OpenInT3Props = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInT3 = (props: OpenInT3Props) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -272,7 +282,9 @@ export const OpenInT3 = (props: OpenInT3Props) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.t3.icon}</span>
-        <span className="flex-1">{providers.t3.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.t3.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>
@@ -283,6 +295,7 @@ export type OpenInSciraProps = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInScira = (props: OpenInSciraProps) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -292,7 +305,9 @@ export const OpenInScira = (props: OpenInSciraProps) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.scira.icon}</span>
-        <span className="flex-1">{providers.scira.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.scira.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>
@@ -303,6 +318,7 @@ export type OpenInv0Props = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInv0 = (props: OpenInv0Props) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -312,7 +328,9 @@ export const OpenInv0 = (props: OpenInv0Props) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.v0.icon}</span>
-        <span className="flex-1">{providers.v0.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.v0.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>
@@ -323,6 +341,7 @@ export type OpenInCursorProps = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInCursor = (props: OpenInCursorProps) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -332,7 +351,9 @@ export const OpenInCursor = (props: OpenInCursorProps) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.cursor.icon}</span>
-        <span className="flex-1">{providers.cursor.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.cursor.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>

package/src/package-info.tsx

@@ -35,17 +35,17 @@ export const PackageInfoName = ({ className, children, ...props }: PackageInfoNa
   return (
     <div className={cn("flex items-center gap-2", className)} {...props}>
       <PackageIcon className="size-4 text-muted-foreground" />
-      <span className="font-medium font-mono text-sm">{children ?? name}</span>
+      <span className="font-medium font-mono text-body">{children ?? name}</span>
     </div>
   );
 };
 
 const changeTypeStyles: Record<ChangeType, string> = {
-  added: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
-  major: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
-  minor: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
-  patch: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-  removed: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
+  added: "bg-info/10 text-info-text",
+  major: "bg-destructive/10 text-destructive-text",
+  minor: "bg-warning/10 text-warning-text",
+  patch: "bg-success/10 text-success-text",
+  removed: "bg-muted text-muted-foreground",
 };
 
 const changeTypeIcons: Record<ChangeType, React.ReactNode> = {
@@ -71,7 +71,7 @@ export const PackageInfoChangeType = ({
 
   return (
     <Badge
-      className={cn("gap-1 text-xs capitalize", changeTypeStyles[changeType], className)}
+      className={cn("gap-1 text-meta capitalize", changeTypeStyles[changeType], className)}
       variant="secondary"
       {...props}
     >
@@ -93,7 +93,7 @@ export const PackageInfoVersion = ({ className, children, ...props }: PackageInf
   return (
     <div
       className={cn(
-        "mt-2 flex items-center gap-2 font-mono text-muted-foreground text-sm",
+        "mt-2 flex items-center gap-2 font-mono text-muted-foreground text-body",
         className,
       )}
       {...props}
@@ -154,7 +154,7 @@ export const PackageInfoDescription = ({
   children,
   ...props
 }: PackageInfoDescriptionProps) => (
-  <p className={cn("mt-2 text-muted-foreground text-sm", className)} {...props}>
+  <p className={cn("mt-2 text-muted-foreground text-body", className)} {...props}>
     {children}
   </p>
 );
@@ -175,7 +175,7 @@ export const PackageInfoDependencies = ({
   ...props
 }: PackageInfoDependenciesProps) => (
   <div className={cn("space-y-2", className)} {...props}>
-    <span className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+    <span className="font-medium text-muted-foreground text-meta uppercase tracking-wide">
       Dependencies
     </span>
     <div className="space-y-1">{children}</div>
@@ -194,11 +194,11 @@ export const PackageInfoDependency = ({
   children,
   ...props
 }: PackageInfoDependencyProps) => (
-  <div className={cn("flex items-center justify-between text-sm", className)} {...props}>
+  <div className={cn("flex items-center justify-between text-body", className)} {...props}>
     {children ?? (
       <>
         <span className="font-mono text-muted-foreground">{name}</span>
-        {version && <span className="font-mono text-xs">{version}</span>}
+        {version && <span className="font-mono text-meta">{version}</span>}
       </>
     )}
   </div>