@nadicodeai/ui 0.1.0 → 0.2.0

package/AGENTS.md

@@ -6,9 +6,10 @@ When this file is read from an installed package, use it as the consumer agent
 contract: import `@nadicodeai/ui/globals.css` and
 `@nadicodeai/design-system/css` once at the app root, import components from
 `@nadicodeai/ui/components/*` or `@nadicodeai/ui/ai-elements`, and keep all
-new UI token-only. Dark mode is a `.dark` selector remap of semantic roles and
-UI-local product aliases in `globals.css`; components must not add `dark:` utilities,
-OS dark-mode branching, or raw palette values. The package also ships `llms.txt`,
+new UI token-only. Dark mode is a `.dark` selector remap: the design-system
+theme owns standard shadcn roles, while `globals.css` owns UI-local product
+aliases. Components must not add `dark:` utilities, OS dark-mode branching, or
+raw palette values. The package also ships `llms.txt`,
 `docs/agents/nadicodeai-ui.md`, `docs/migration/`, and
 `skills/nadicodeai-ui/SKILL.md` for agents that index package documentation or
 skills.
@@ -16,9 +17,10 @@ skills.
 ## Invariants
 
 - **Token-only, no raw literals.** Components style through brand tokens only — the `nadicode.theme.css` role vars bridged into Tailwind utilities (`bg-background`, `text-foreground`, `border-input`, …) plus UI-local product aliases defined in `globals.css` such as `--nc-app-surface`, `--nc-chat-tool-surface`, and `--nc-terminal-bg`. No raw `#hex` / `rgb()` / `hsl()` in any `.tsx`; a new source value goes to `design-system/DESIGN.md` first and flows through generated tokens. Enforced by `tests/no-raw-literal.test.ts` and `tests/token-reference-integrity.test.ts`.
-- **Dark-ready roles, no component `dark:` styling.** `globals.css` owns the `:root` and `.dark` remaps for shadcn roles and UI-local product aliases. Components consume semantic utilities or product aliases such as `var(--nc-app-surface)`; they must not ship `dark:` Tailwind utilities, OS dark-mode branching, or raw dark palette utilities such as `dark:bg-slate-950` / `dark:text-white`. Enforced by `tests/no-dark.test.ts` and `tests/dark-semantic-roles.test.ts`.
+- **Dark-ready roles, no component `dark:` styling.** The generated design-system Tailwind theme owns the standard shadcn `:root` and `.dark` role maps; `globals.css` owns the Tailwind `@theme inline` bridge and UI-local product aliases. Components consume semantic utilities or product aliases such as `var(--nc-app-surface)`; they must not ship `dark:` Tailwind utilities, OS dark-mode branching, or raw dark palette utilities such as `dark:bg-slate-950` / `dark:text-white`. Enforced by `tests/no-dark.test.ts`, `tests/dark-semantic-roles.test.ts`, and `tests/token-reference-integrity.test.ts`.
 - **Components inherit the brand theme.** Consumers import `@nadicodeai/ui/globals.css` (Tailwind + the generated brand `@theme` + semantic role/alias maps) and `@nadicodeai/design-system/css` (kept `nc-*` geometry, type scale, chat CSS components, motion, and display components). Components carry no theme of their own — they resolve every color/radius from bridged brand tokens, UI-local aliases, and design-system CSS.
 - **Source-authored, built package.** Components are authored as shadcn-style source in this workspace, then emitted to `dist/` for consumption by other apps. Package exports must point at built JS/declarations/CSS, not raw `src/*.tsx`, and `npm pack --dry-run` must include only intentional consumer artifacts.
+- **Public surface changes require a release decision.** Any change to exported components, `src/index.ts`, `src/ai-elements.ts`, package `exports`, `globals.css`, UI-local semantic aliases, theme behavior, package docs, package skills, or design-system token/CSS/theme output consumed by this package must end with an explicit npm release decision before handoff. If the change should reach external consumers, bump the relevant package version(s), run `npm pack --dry-run -w @nadicodeai/ui`, and follow `../docs/agents/npm-publishing.md`. When the UI change depends on modified `@nadicodeai/design-system` output, bump/publish `@nadicodeai/design-system` first, then update `@nadicodeai/ui`'s dependency and publish UI. Never claim a UI package change is shipped to npm until `npm view @nadicodeai/ui version` reports the intended published version.
 - **shadcn and AI Elements are package surface.** The installed shadcn source components under `src/components/` and all 48 Vercel AI Elements under `src/components/ai-elements/` are intentional ready-to-use exports. Keep `src/index.ts`, `src/ai-elements.ts`, package `exports`, README/agent docs, and `website/app/ui-check/elements` synchronized whenever this surface changes.
 - **Named shadcn blocks stay named.** When a user, plan, or issue selects a shadcn block/example such as `login-02`, `signup-02`, `dashboard-01`, or `sidebar-*`, use that registry item as the source of truth through shadcn CLI/MCP. Do not replace it with a package-authored abstraction unless the plan explicitly records the substitution, the reason, and the true consumer route that proves it.
 - **Package surface is source-backed.** `src/components/` is intentionally flat shadcn-style source. Do not document folders or package namespaces that do not exist. Do not add top-level exports for recipes, blocks, agent, or terminal groupings unless a later package API decision adds concrete source, built files, docs, and tests in the same change.
@@ -111,4 +113,5 @@ through `docs/terminal-tui-semantics.md`.
 | Command | When |
 | --- | --- |
 | `npm run build -w @nadicodeai/ui` | Emit the consumable `dist/` package surface before packing or app builds |
+| `npm pack --dry-run -w @nadicodeai/ui` | Verify exactly what external npm consumers would receive after package surface, export, CSS, docs, or skill changes |
 | `npm run test -w @nadicodeai/ui` | Run this workspace's guards (browser-free; also runs inside the root `npm run test` gate) |

package/README.md

@@ -20,7 +20,8 @@ The package ships:
 - React adapters over the design-system grammar and assets
 - reusable marketing/section compositions
 - presentational product components such as `SettingsSection`,
-  `DashboardShell`, `AgentChat`, `InstallerShell`, and `PluginSlotBoundary`
+  `DashboardShell`, `AgentChat`, `InstallerShell`, `PluginSlotBoundary`, and
+  `ThemeModeSwitcher`
 - package-local agent guidance: `AGENTS.md`, `llms.txt`,
   `docs/agents/nadicodeai-ui.md`, `docs/migration/`, and
   `skills/nadicodeai-ui/SKILL.md`
@@ -56,11 +57,12 @@ import "@nadicodeai/design-system/css";
 
 `@nadicodeai/ui/globals.css` imports Tailwind v4, the generated NadicodeAI
 Tailwind theme, the shadcn role bridge, and the package-local semantic
-`:root`/`.dark` maps. The `.dark` selector remaps shadcn roles plus UI-local
-product aliases for app shell/surface, chat/tool/composer, approval, diff/code,
-terminal/ANSI, trace/status, provider/model, and plugin permission UI. Those
-aliases reference generated `--nc-*` tokens or semantic roles; they are not a
-new source-token group. `@nadicodeai/design-system/css` provides the kept
+`:root`/`.dark` product aliases. The design-system theme owns the standard
+shadcn light and dark role maps; the UI package owns app shell/surface,
+chat/tool/composer, approval, diff/code, terminal/ANSI, trace/status,
+provider/model, and plugin permission aliases. Those aliases reference
+generated `--nc-*` tokens or semantic roles; they are not a new source-token
+group. `@nadicodeai/design-system/css` provides the kept
 `nc-*` page grammar, type scale, geometry, chat CSS components, motion, and
 brand display components that many UI components compose.
 
@@ -71,7 +73,9 @@ needed. Do not add component-level Tailwind `dark:` utilities, OS dark-mode
 branching, raw color literals, or raw palette utilities.
 
 For Next.js App Router apps, place both imports in the root layout. The app still
-owns its PostCSS setup; this package does not export a PostCSS config.
+owns its PostCSS setup, theme provider, and persisted light/dark/system
+preference. `ThemeModeSwitcher` is controlled and app-agnostic; the app decides
+how to set `.dark` on the document. This package does not export a PostCSS config.
 
 ## Imports
 
@@ -128,6 +132,7 @@ Current product subpaths:
 - `@nadicodeai/ui/components/installer-shell`
 - `@nadicodeai/ui/components/plugin-slot-boundary`
 - `@nadicodeai/ui/components/settings-section`
+- `@nadicodeai/ui/components/theme-mode-switcher`
 
 Recommended migration order is documented in
 `docs/migration/nadia-consumer-readiness.md`: web admin or portal first,

package/dist/components/ai-elements/code-block.d.ts

@@ -2,15 +2,22 @@ import { Button } from "../button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select";
 import type { ComponentProps, HTMLAttributes } from "react";
 import type { BundledLanguage, ThemedToken } from "shiki";
+type CodeThemeToken = ThemedToken & {
+    darkBgColor?: string;
+    darkColor?: string;
+    darkFontStyle?: ThemedToken["fontStyle"];
+};
 type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
     code: string;
     language: BundledLanguage;
     showLineNumbers?: boolean;
 };
 interface TokenizedCode {
-    tokens: ThemedToken[][];
+    tokens: CodeThemeToken[][];
     fg: string;
     bg: string;
+    darkFg: string;
+    darkBg: string;
 }
 export declare const highlightCode: (code: string, language: BundledLanguage, callback?: (result: TokenizedCode) => void) => TokenizedCode | null;
 export declare const CodeBlockContainer: ({ className, language, style, ...props }: HTMLAttributes<HTMLDivElement> & {

package/dist/components/ai-elements/code-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/code-block.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAG7B,OAAO,KAAK,EAAE,cAAc,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AAW3E,OAAO,KAAK,EACV,eAAe,EAGf,WAAW,EACZ,MAAM,OAAO,CAAC;AAiFf,KAAK,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,eAAe,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,UAAU,aAAa;IACrB,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AA+DD,eAAO,MAAM,aAAa,GACxB,MAAM,MAAM,EACZ,UAAU,eAAe,EAEzB,WAAW,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,KACzC,aAAa,GAAG,IAsDlB,CAAC;AA0DF,eAAO,MAAM,kBAAkB,GAAI,0CAKhC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,gCAcvD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,mCAI7B,cAAc,CAAC,cAAc,CAAC,gCAUhC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,mCAI5B,cAAc,CAAC,cAAc,CAAC,gCAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,mCAI/B,cAAc,CAAC,eAAe,CAAC,gCAIjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,mCAI9B,cAAc,CAAC,cAAc,CAAC,gCAOhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,sCAI9B;IACD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,eAAe,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,gCAiCA,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,oEAOvB,cAAc,gCAehB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,6DAOjC,wBAAwB,gCA8C1B,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAE3E,eAAO,MAAM,yBAAyB,GACpC,OAAO,8BAA8B,gCACb,CAAC;AAE3B,MAAM,MAAM,qCAAqC,GAAG,cAAc,CAChE,OAAO,aAAa,CACrB,CAAC;AAEF,eAAO,MAAM,gCAAgC,GAAI,yBAG9C,qCAAqC,gCASvC,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,cAAc,CAC9D,OAAO,WAAW,CACnB,CAAC;AAEF,eAAO,MAAM,8BAA8B,GACzC,OAAO,mCAAmC,gCACb,CAAC;AAEhC,MAAM,MAAM,qCAAqC,GAAG,cAAc,CAChE,OAAO,aAAa,CACrB,CAAC;AAEF,eAAO,MAAM,gCAAgC,GAAI,qBAG9C,qCAAqC,gCAEvC,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,cAAc,CAC7D,OAAO,UAAU,CAClB,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,OAAO,kCAAkC,gCACb,CAAC"}
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/code-block.tsx"],"names":[],"mappings":"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"}

package/dist/components/ai-elements/code-block.js

@@ -21,15 +21,45 @@ const addKeysToTokens = (lines) => lines.map((line, lineIdx) => ({
         token,
     })),
 }));
-// Token rendering component
-const TokenSpan = ({ token }) => (_jsx("span", { style: {
-        backgroundColor: token.bgColor,
-        color: token.color,
-        fontStyle: isItalic(token.fontStyle) ? "italic" : undefined,
-        fontWeight: isBold(token.fontStyle) ? "bold" : undefined,
-        textDecoration: isUnderline(token.fontStyle) ? "underline" : undefined,
-        ...token.htmlStyle,
-    }, children: token.content }));
+const tokenStyle = (token) => {
+    const htmlStyle = { ...token.htmlStyle };
+    delete htmlStyle.background;
+    delete htmlStyle.backgroundColor;
+    delete htmlStyle.color;
+    delete htmlStyle.fontStyle;
+    delete htmlStyle.fontWeight;
+    delete htmlStyle.textDecoration;
+    const darkFontStyle = token.darkFontStyle ?? token.fontStyle;
+    return {
+        ...htmlStyle,
+        "--shiki-code-token-dark-bg": token.darkBgColor ?? token.bgColor,
+        "--shiki-code-token-dark-color": token.darkColor ?? token.color,
+        "--shiki-code-token-dark-font-style": isItalic(darkFontStyle)
+            ? "italic"
+            : "normal",
+        "--shiki-code-token-dark-font-weight": isBold(darkFontStyle)
+            ? "bold"
+            : "normal",
+        "--shiki-code-token-dark-text-decoration": isUnderline(darkFontStyle)
+            ? "underline"
+            : "none",
+        "--shiki-code-token-light-bg": token.bgColor,
+        "--shiki-code-token-light-color": token.color,
+        "--shiki-code-token-light-font-style": isItalic(token.fontStyle)
+            ? "italic"
+            : "normal",
+        "--shiki-code-token-light-font-weight": isBold(token.fontStyle)
+            ? "bold"
+            : "normal",
+        "--shiki-code-token-light-text-decoration": isUnderline(token.fontStyle)
+            ? "underline"
+            : "none",
+    };
+};
+// Syntax colors are resolved by the shared UI globals stylesheet so light/dark
+// can switch without re-tokenizing. Importing that stylesheet is part of the
+// package contract for CodeBlock consumers.
+const TokenSpan = ({ token }) => (_jsx("span", { "data-nc-code-token": "", style: tokenStyle(token), children: token.content }));
 // Line number styles using CSS counters
 const LINE_NUMBER_CLASSES = cn("block", "before:content-[counter(line)]", "before:inline-block", "before:[counter-increment:line]", "before:w-8", "before:mr-4", "before:text-right", "before:text-muted-foreground/50", "before:font-mono", "before:select-none");
 // Line rendering component
@@ -58,14 +88,31 @@ const getHighlighter = (language) => {
     }
     const highlighterPromise = createHighlighter({
         langs: [language],
-        themes: ["github-light"],
+        themes: ["github-light", "github-dark"],
     });
     highlighterCache.set(language, highlighterPromise);
     return highlighterPromise;
 };
+const tokenFromThemeVariants = (token) => {
+    const light = token.variants.light ?? {};
+    const dark = token.variants.dark ?? light;
+    return {
+        bgColor: light.bgColor,
+        color: light.color,
+        content: token.content,
+        darkBgColor: dark.bgColor,
+        darkColor: dark.color,
+        darkFontStyle: dark.fontStyle,
+        fontStyle: light.fontStyle,
+        htmlStyle: light.htmlStyle,
+        offset: token.offset,
+    };
+};
 // Create raw tokens for immediate display while highlighting loads
 const createRawTokens = (code) => ({
     bg: "transparent",
+    darkBg: "transparent",
+    darkFg: "inherit",
     fg: "inherit",
     tokens: code.split("\n").map((line) => line === ""
         ? []
@@ -73,6 +120,8 @@ const createRawTokens = (code) => ({
             {
                 color: "inherit",
                 content: line,
+                darkColor: "inherit",
+                darkFontStyle: undefined,
             },
         ]),
 });
@@ -99,14 +148,21 @@ callback) => {
         .then((highlighter) => {
         const availableLangs = highlighter.getLoadedLanguages();
         const langToUse = availableLangs.includes(language) ? language : "text";
-        const result = highlighter.codeToTokens(code, {
+        const tokens = highlighter.codeToTokensWithThemes(code, {
             lang: langToUse,
-            theme: "github-light",
+            themes: {
+                dark: "github-dark",
+                light: "github-light",
+            },
         });
+        const lightTheme = highlighter.getTheme("github-light");
+        const darkTheme = highlighter.getTheme("github-dark");
         const tokenized = {
-            bg: result.bg ?? "transparent",
-            fg: result.fg ?? "inherit",
-            tokens: result.tokens,
+            bg: lightTheme.bg ?? "transparent",
+            darkBg: darkTheme.bg ?? "transparent",
+            darkFg: darkTheme.fg ?? "inherit",
+            fg: lightTheme.fg ?? "inherit",
+            tokens: tokens.map((line) => line.map(tokenFromThemeVariants)),
         };
         // Cache the result
         tokensCache.set(tokensCacheKey, tokenized);
@@ -128,11 +184,13 @@ callback) => {
 };
 const CodeBlockBody = memo(({ tokenized, showLineNumbers, className, }) => {
     const preStyle = useMemo(() => ({
-        backgroundColor: tokenized.bg,
-        color: tokenized.fg,
-    }), [tokenized.bg, tokenized.fg]);
+        "--shiki-code-block-dark-bg": tokenized.darkBg,
+        "--shiki-code-block-dark-fg": tokenized.darkFg,
+        "--shiki-code-block-light-bg": tokenized.bg,
+        "--shiki-code-block-light-fg": tokenized.fg,
+    }), [tokenized.bg, tokenized.darkBg, tokenized.darkFg, tokenized.fg]);
     const keyedLines = useMemo(() => addKeysToTokens(tokenized.tokens), [tokenized.tokens]);
-    return (_jsx("pre", { className: cn("m-0 p-4 text-sm", className), style: preStyle, children: _jsx("code", { className: cn("font-mono text-sm", showLineNumbers && "[counter-increment:line_0] [counter-reset:line]"), children: keyedLines.map((keyedLine) => (_jsx(LineSpan, { keyedLine: keyedLine, showLineNumbers: showLineNumbers }, keyedLine.key))) }) }));
+    return (_jsx("pre", { className: cn("m-0 p-4 text-sm", className), "data-nc-code-block-body": "", style: preStyle, children: _jsx("code", { className: cn("font-mono text-sm", showLineNumbers && "[counter-increment:line_0] [counter-reset:line]"), children: keyedLines.map((keyedLine) => (_jsx(LineSpan, { keyedLine: keyedLine, showLineNumbers: showLineNumbers }, keyedLine.key))) }) }));
 }, (prevProps, nextProps) => prevProps.tokenized === nextProps.tokenized &&
     prevProps.showLineNumbers === nextProps.showLineNumbers &&
     prevProps.className === nextProps.className);

package/dist/components/ai-elements/model-selector.d.ts

@@ -26,7 +26,7 @@ export declare const ModelSelectorShortcut: (props: ModelSelectorShortcutProps)
 export type ModelSelectorSeparatorProps = ComponentProps<typeof CommandSeparator>;
 export declare const ModelSelectorSeparator: (props: ModelSelectorSeparatorProps) => import("react").JSX.Element;
 export type ModelSelectorLogoProps = Omit<ComponentProps<"img">, "src" | "alt"> & {
-    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" | (string & {});
+    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" | "iflowcn" | "synthetic" | "deepinfra" | "zhipuai" | "submodel" | "zai" | "inference" | "requesty" | "morph" | "lmstudio" | "anthropic" | "aihubmix" | "fireworks-ai" | "modelscope" | "llama" | "scaleway" | "amazon-bedrock" | "cerebras" | (string & {});
 };
 export declare const ModelSelectorLogo: ({ provider, className, ...props }: ModelSelectorLogoProps) => import("react").JSX.Element;
 export type ModelSelectorLogoGroupProps = ComponentProps<"div">;

package/dist/components/ai-elements/model-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-selector.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/model-selector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"model-selector.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/model-selector.tsx"],"names":[],"mappings":"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"}

package/dist/components/ai-elements/open-in-chat.d.ts

@@ -22,8 +22,6 @@ export type OpenInT3Props = ComponentProps<typeof DropdownMenuItem>;
 export declare const OpenInT3: (props: OpenInT3Props) => import("react").JSX.Element;
 export type OpenInSciraProps = ComponentProps<typeof DropdownMenuItem>;
 export declare const OpenInScira: (props: OpenInSciraProps) => import("react").JSX.Element;
-export type OpenInv0Props = ComponentProps<typeof DropdownMenuItem>;
-export declare const OpenInv0: (props: OpenInv0Props) => import("react").JSX.Element;
 export type OpenInCursorProps = ComponentProps<typeof DropdownMenuItem>;
 export declare const OpenInCursor: (props: OpenInCursorProps) => import("react").JSX.Element;
 //# sourceMappingURL=open-in-chat.d.ts.map

package/dist/components/ai-elements/open-in-chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"open-in-chat.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/open-in-chat.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,4BAA4B,CAAC;AAOpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAmL5C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,qBAAqB,WAAW,gCAQtD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAE5E,eAAO,MAAM,aAAa,GAAI,yBAAyB,kBAAkB,gCAMxE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEtE,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAEhD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAExE,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAElD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEhF,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCAE1D,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAE5E,eAAO,MAAM,aAAa,GAAI,wBAAwB,kBAAkB,gCASvE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEzE,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAgBtD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAExE,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAgBpD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCAgB5C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAgBlD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCAgB5C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAExE,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAgBpD,CAAC"}
+{"version":3,"file":"open-in-chat.d.ts","sourceRoot":"","sources":["../../../src/components/ai-elements/open-in-chat.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,4BAA4B,CAAC;AAOpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAiK5C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,qBAAqB,WAAW,gCAQtD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAE5E,eAAO,MAAM,aAAa,GAAI,yBAAyB,kBAAkB,gCAMxE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEtE,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAEhD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAExE,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAElD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEhF,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCAE1D,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAE5E,eAAO,MAAM,aAAa,GAAI,wBAAwB,kBAAkB,gCASvE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEzE,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAgBtD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAExE,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAgBpD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCAgB5C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAgBlD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAExE,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAgBpD,CAAC"}

package/dist/components/ai-elements/open-in-chat.js

@@ -49,13 +49,6 @@ const providers = {
         icon: _jsx(MessageCircleIcon, {}),
         title: "Open in T3 Chat",
     },
-    v0: {
-        createUrl: (q) => `https://v0.app?${new URLSearchParams({
-            q,
-        })}`,
-        icon: (_jsxs("svg", { fill: "currentColor", viewBox: "0 0 147 70", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { children: "v0" }), _jsx("path", { d: "M56 50.2031V14H70V60.1562C70 65.5928 65.5928 70 60.1562 70C57.5605 70 54.9982 68.9992 53.1562 67.1573L0 14H19.7969L56 50.2031Z" }), _jsx("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" })] })),
-        title: "Open in v0",
-    },
 };
 const OpenInContext = createContext(undefined);
 const useOpenInContext = () => {
@@ -90,10 +83,6 @@ export const OpenInScira = (props) => {
     const { query } = useOpenInContext();
     return (_jsx(DropdownMenuItem, { asChild: true, ...props, children: _jsxs("a", { className: "flex items-center gap-2", href: providers.scira.createUrl(query), rel: "noopener", target: "_blank", children: [_jsx("span", { className: "shrink-0", children: providers.scira.icon }), _jsx("span", { className: "flex-1", children: providers.scira.title }), _jsx(ExternalLinkIcon, { className: "size-4 shrink-0" })] }) }));
 };
-export const OpenInv0 = (props) => {
-    const { query } = useOpenInContext();
-    return (_jsx(DropdownMenuItem, { asChild: true, ...props, children: _jsxs("a", { className: "flex items-center gap-2", href: providers.v0.createUrl(query), rel: "noopener", target: "_blank", children: [_jsx("span", { className: "shrink-0", children: providers.v0.icon }), _jsx("span", { className: "flex-1", children: providers.v0.title }), _jsx(ExternalLinkIcon, { className: "size-4 shrink-0" })] }) }));
-};
 export const OpenInCursor = (props) => {
     const { query } = useOpenInContext();
     return (_jsx(DropdownMenuItem, { asChild: true, ...props, children: _jsxs("a", { className: "flex items-center gap-2", href: providers.cursor.createUrl(query), rel: "noopener", target: "_blank", children: [_jsx("span", { className: "shrink-0", children: providers.cursor.icon }), _jsx("span", { className: "flex-1", children: providers.cursor.title }), _jsx(ExternalLinkIcon, { className: "size-4 shrink-0" })] }) }));

package/dist/components/chart.d.ts

@@ -3,8 +3,12 @@ import * as RechartsPrimitive from "recharts";
 import type { TooltipValueType } from "recharts";
 declare const THEMES: {
     readonly light: "";
+    readonly dark: ".dark";
 };
 type TooltipNameType = number | string;
+type ChartTheme = Partial<Record<keyof typeof THEMES, string>> & {
+    light: string;
+};
 export type ChartConfig = Record<string, {
     label?: React.ReactNode;
     icon?: React.ComponentType;
@@ -13,7 +17,7 @@ export type ChartConfig = Record<string, {
     theme?: never;
 } | {
     color?: never;
-    theme: Record<keyof typeof THEMES, string>;
+    theme: ChartTheme;
 })>;
 declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
     config: ChartConfig;

package/dist/components/chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAA;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAIhD,QAAA,MAAM,MAAM;;CAAyB,CAAA;AAGrC,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAEtC,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,MAAM,EACN;IACE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC3B,GAAG,CACA;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACjC;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,OAAO,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,CAChE,CACF,CAAA;AAkBD,iBAAS,cAAc,CAAC,EACtB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,MAAM,EACN,gBAAoC,EACpC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,cAAc,CAC5B,OAAO,iBAAiB,CAAC,mBAAmB,CAC7C,CAAC,UAAU,CAAC,CAAA;IACb,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF,qBAwBA;AAED,QAAA,MAAM,UAAU,GAAI,gBAAgB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,6BA+BtE,CAAA;AAED,QAAA,MAAM,YAAY,kCAA4B,CAAA;AAE9C,iBAAS,mBAAmB,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,aAAqB,EACrB,KAAK,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,OAAO,CAAC,GACvD,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,IAAI,CACN,iBAAiB,CAAC,0BAA0B,CAC1C,gBAAgB,EAChB,eAAe,CAChB,EACD,oBAAoB,CACrB,4BA6HF;AAED,QAAA,MAAM,WAAW,sGAA2B,CAAA;AAE5C,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,aAAwB,EACxB,OAAO,GACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,GAAG,iBAAiB,CAAC,yBAAyB,4BA4C9C;AAuCD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,UAAU,GACX,CAAA"}
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAA;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAIhD,QAAA,MAAM,MAAM;;;CAAwC,CAAA;AAGpD,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AACtC,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG;IAC/D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAyBD,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,MAAM,EACN;IACE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC3B,GAAG,CACA;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACjC;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,CACvC,CACF,CAAA;AAkBD,iBAAS,cAAc,CAAC,EACtB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,MAAM,EACN,gBAAoC,EACpC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,cAAc,CAC5B,OAAO,iBAAiB,CAAC,mBAAmB,CAC7C,CAAC,UAAU,CAAC,CAAA;IACb,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF,qBA0BA;AAED,QAAA,MAAM,UAAU,GAAI,gBAAgB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,6BAiCtE,CAAA;AAED,QAAA,MAAM,YAAY,kCAA4B,CAAA;AAE9C,iBAAS,mBAAmB,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,aAAqB,EACrB,KAAK,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,OAAO,CAAC,GACvD,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,IAAI,CACN,iBAAiB,CAAC,0BAA0B,CAC1C,gBAAgB,EAChB,eAAe,CAChB,EACD,oBAAoB,CACrB,4BA6HF;AAED,QAAA,MAAM,WAAW,sGAA2B,CAAA;AAE5C,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,aAAwB,EACxB,OAAO,GACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,GAAG,iBAAiB,CAAC,yBAAyB,4BA4C9C;AAuCD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,UAAU,GACX,CAAA"}

package/dist/components/chart.js

@@ -3,8 +3,25 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import { cn } from "../lib/utils.js";
-const THEMES = { light: "" };
+const THEMES = { light: "", dark: ".dark" };
 const INITIAL_DIMENSION = { width: 320, height: 200 };
+function sanitizeChartToken(value) {
+    const sanitized = value
+        .trim()
+        .replace(/[^A-Za-z0-9_-]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+    return sanitized || "chart";
+}
+function isSafeChartColor(value) {
+    const color = value.trim();
+    return color.length > 0 && !/[;{}]/.test(color) && !/\burl\s*\(/i.test(color);
+}
+function chartColorDeclaration(key, color) {
+    if (!color || !isSafeChartColor(color)) {
+        return null;
+    }
+    return `  --color-${sanitizeChartToken(key)}: ${color.trim()};`;
+}
 const ChartContext = React.createContext(null);
 function useChart() {
     const context = React.useContext(ChartContext);
@@ -15,10 +32,11 @@ function useChart() {
 }
 function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
     const uniqueId = React.useId();
-    const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+    const chartId = sanitizeChartToken(`chart-${id ?? uniqueId.replace(/:/g, "")}`);
     return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-layer]:outline-hidden [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
 }
 const ChartStyle = ({ id, config }) => {
+    const chartId = sanitizeChartToken(id);
     const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
     if (!colorConfig.length) {
         return null;
@@ -26,12 +44,13 @@ const ChartStyle = ({ id, config }) => {
     return (_jsx("style", { dangerouslySetInnerHTML: {
             __html: Object.entries(THEMES)
                 .map(([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
+${prefix} [data-chart="${chartId}"] {
 ${colorConfig
                 .map(([key, itemConfig]) => {
                 const color = itemConfig.theme?.[theme] ??
+                    itemConfig.theme?.light ??
                     itemConfig.color;
-                return color ? ` --color-${key}: ${color};` : null;
+                return chartColorDeclaration(key, color);
             })
                 .join("\n")}
 }

package/dist/components/sonner.d.ts

@@ -1,4 +1,4 @@
 import { type ToasterProps } from "sonner";
-declare const Toaster: ({ ...props }: ToasterProps) => import("react").JSX.Element;
+declare const Toaster: ({ theme, ...props }: ToasterProps) => import("react").JSX.Element;
 export { Toaster };
 //# sourceMappingURL=sonner.d.ts.map

package/dist/components/sonner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/components/sonner.tsx"],"names":[],"mappings":"AASA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AAE7D,QAAA,MAAM,OAAO,GAAI,cAAc,YAAY,gCAuB1C,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/components/sonner.tsx"],"names":[],"mappings":"AASA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AAE7D,QAAA,MAAM,OAAO,GAAI,qBAA+B,YAAY,gCAuB3D,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/sonner.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, } from "lucide-react";
 import { Toaster as Sonner } from "sonner";
-const Toaster = ({ ...props }) => {
+const Toaster = ({ theme = "light", ...props }) => {
     return (_jsx(Sonner, { className: "toaster group", icons: {
             success: _jsx(CircleCheckIcon, { className: "size-4" }),
             info: _jsx(InfoIcon, { className: "size-4" }),
@@ -14,6 +14,6 @@ const Toaster = ({ ...props }) => {
             "--normal-text": "var(--popover-foreground)",
             "--normal-border": "var(--border)",
             "--border-radius": "var(--radius)",
-        }, ...props, theme: "light" }));
+        }, ...props, theme: theme }));
 };
 export { Toaster };

package/dist/components/theme-mode-switcher.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { ToggleGroup } from "./toggle-group";
+import { isThemeMode, themeModes, type ThemeMode } from "../lib/theme-mode";
+export { isThemeMode, themeModes };
+export type { ThemeMode };
+export type ThemeModeOptionLabels = Record<ThemeMode, string>;
+export type ThemeModeSwitcherProps = Omit<React.ComponentProps<typeof ToggleGroup>, "children" | "defaultValue" | "onValueChange" | "type" | "value"> & {
+    "aria-label": string;
+    compact?: boolean;
+    itemClassName?: string;
+    labels: ThemeModeOptionLabels;
+    onValueChange: (value: ThemeMode) => void;
+    value: ThemeMode;
+};
+declare function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact, disabled, itemClassName, labels, onValueChange, value, ...props }: ThemeModeSwitcherProps): React.JSX.Element;
+export { ThemeModeSwitcher };
+//# sourceMappingURL=theme-mode-switcher.d.ts.map

package/dist/components/theme-mode-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,WAAW,EAAmB,MAAM,2BAA2B,CAAA;AACxE,OAAO,EACL,WAAW,EACX,UAAU,EACV,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAA;AAClC,YAAY,EAAE,SAAS,EAAE,CAAA;AAEzB,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAE7D,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,MAAM,GAAG,OAAO,CACjE,GAAG;IACF,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,MAAM,EAAE,qBAAqB,CAAA;IAC7B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IACzC,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAQD,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBAuCxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/theme-mode-switcher.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+import { isThemeMode, themeModes, } from "../lib/theme-mode.js";
+import { cn } from "../lib/utils.js";
+export { isThemeMode, themeModes };
+const themeModeIcons = {
+    light: SunIcon,
+    dark: MoonIcon,
+    system: MonitorIcon,
+};
+function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false, disabled, itemClassName, labels, onValueChange, value, ...props }) {
+    return (_jsx(ToggleGroup, { "aria-label": ariaLabel, className: cn("max-w-full", className), disabled: disabled, onValueChange: (nextValue) => {
+            if (isThemeMode(nextValue)) {
+                onValueChange(nextValue);
+            }
+        }, type: "single", value: value, variant: "outline", ...props, children: themeModes.map((mode) => {
+            const Icon = themeModeIcons[mode];
+            const label = labels[mode];
+            return (_jsxs(ToggleGroupItem, { "aria-label": label, className: cn("min-w-0 gap-1.5 px-2.5", compact ? "h-8 text-xs" : "h-9", itemClassName), disabled: disabled, value: mode, children: [_jsx(Icon, { "aria-hidden": "true", className: "size-4", "data-icon": true }), _jsx("span", { className: "min-w-0 truncate", children: label })] }, mode));
+        }) }));
+}
+export { ThemeModeSwitcher };

package/dist/index.d.ts

@@ -93,6 +93,7 @@ export * from "./components/table";
 export * from "./components/tabs";
 export * from "./components/testimonials";
 export * from "./components/textarea";
+export * from "./components/theme-mode-switcher";
 export * from "./components/toggle";
 export * from "./components/toggle-group";
 export * from "./components/tooltip";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -93,6 +93,7 @@ export * from "./components/table.js";
 export * from "./components/tabs.js";
 export * from "./components/testimonials.js";
 export * from "./components/textarea.js";
+export * from "./components/theme-mode-switcher.js";
 export * from "./components/toggle.js";
 export * from "./components/toggle-group.js";
 export * from "./components/tooltip.js";

package/dist/lib/theme-mode.d.ts

@@ -0,0 +1,4 @@
+export declare const themeModes: readonly ["light", "dark", "system"];
+export type ThemeMode = (typeof themeModes)[number];
+export declare function isThemeMode(value: string | undefined): value is ThemeMode;
+//# sourceMappingURL=theme-mode.d.ts.map

package/dist/lib/theme-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-mode.d.ts","sourceRoot":"","sources":["../../src/lib/theme-mode.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,sCAAuC,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,SAAS,CAEzE"}

package/dist/lib/theme-mode.js

@@ -0,0 +1,4 @@
+export const themeModes = ["light", "dark", "system"];
+export function isThemeMode(value) {
+    return typeof value === "string" && themeModes.includes(value);
+}

package/dist/styles/globals.css

@@ -1,20 +1,18 @@
 /*
  * @nadicodeai/ui — Tailwind v4 + shadcn entry stylesheet.
  *
- * Import order is load-bearing: Tailwind first, then the design-system token
- * bridge (the brand @theme + the :root shadcn role map, generated from
- * DESIGN.md by Style Dictionary — ADR 0006). The @theme inline block below
+ * Import order is load-bearing: Tailwind first, then the design-system theme
+ * bridge (the brand @theme + the :root/.dark shadcn role maps, generated from
+ * DESIGN.md by Style Dictionary). The @theme inline block below
  * lifts semantic role vars into Tailwind's --color-* utility namespace so
  * shadcn utilities (bg-background, text-foreground, border-border, …) resolve
  * to brand tokens.
  *
- * Dark readiness is selector remapping only: :root and .dark assign shadcn
- * roles and package-local product aliases from generated --nc-* tokens or from
- * semantic roles. Product aliases intentionally live here, not in DESIGN.md:
- * their --nc-* names are package-local declarations, while source tokens remain
- * the generated --nc-* declarations imported above. Components consume those
- * roles/aliases and do not carry raw palette utilities or dark: utility classes.
- * DESIGN.md remains the only source of literal values.
+ * Standard shadcn roles are generated by @nadicodeai/design-system. This file
+ * keeps package-local product aliases only; their --nc-* names are package-local
+ * declarations, while source values remain generated tokens or semantic roles.
+ * Components consume those roles/aliases and do not carry raw palette utilities
+ * or dark: utility classes. DESIGN.md remains the only source of literal values.
  */
 @import "tailwindcss";
 @import "@nadicodeai/design-system/tailwind/theme.css";
@@ -22,9 +20,10 @@
 @import "@xyflow/react/dist/style.css";
 
 /*
- * Tailwind v4's dark: variant defaults to an OS media query. Keep it class
- * gated so a consuming app must opt in with a .dark ancestor. Shared components
- * still do not ship dark: utilities; the semantic remap below carries dark mode.
+ * Tailwind v4's dark: variant defaults to an OS media query. Match shadcn's
+ * class strategy so apps can drive light/dark/system from the root `.dark`
+ * class, usually through next-themes. Shared components still do not ship
+ * dark: color utilities; semantic role remaps carry dark mode.
  */
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -74,40 +73,6 @@
 }
 
 :root {
-  --radius: var(--nc-rounded-md);
-  --background: var(--nc-canvas);
-  --foreground: var(--nc-ink);
-  --card: var(--nc-canvas);
-  --card-foreground: var(--nc-ink);
-  --popover: var(--nc-canvas);
-  --popover-foreground: var(--nc-ink);
-  --primary: var(--nc-primary);
-  --primary-foreground: var(--nc-on-primary);
-  --secondary: var(--nc-canvas-soft);
-  --secondary-foreground: var(--nc-ink);
-  --muted: var(--nc-canvas-soft);
-  --muted-foreground: var(--nc-muted);
-  --accent: var(--nc-canvas-soft-2);
-  --accent-foreground: var(--nc-ink);
-  --destructive: var(--nc-error);
-  --destructive-foreground: var(--nc-on-primary);
-  --border: var(--nc-line);
-  --input: var(--nc-line);
-  --ring: var(--nc-link);
-  --chart-1: var(--nc-link);
-  --chart-2: var(--nc-cyan);
-  --chart-3: var(--nc-flag-red);
-  --chart-4: var(--nc-gradient-ship-end);
-  --chart-5: var(--nc-error);
-  --sidebar: var(--nc-canvas-soft);
-  --sidebar-foreground: var(--nc-ink);
-  --sidebar-primary: var(--nc-primary);
-  --sidebar-primary-foreground: var(--nc-on-primary);
-  --sidebar-accent: var(--nc-canvas-soft-2);
-  --sidebar-accent-foreground: var(--nc-ink);
-  --sidebar-border: var(--nc-line);
-  --sidebar-ring: var(--nc-link);
-
   --nc-app-surface: var(--background);
   --nc-app-surface-chrome: var(--sidebar);
   --nc-app-surface-sidebar: var(--sidebar);
@@ -217,40 +182,6 @@
 }
 
 .dark {
-  --radius: var(--nc-rounded-md);
-  --background: var(--nc-ink);
-  --foreground: var(--nc-on-primary);
-  --card: var(--nc-primary);
-  --card-foreground: var(--nc-on-primary);
-  --popover: var(--nc-primary);
-  --popover-foreground: var(--nc-on-primary);
-  --primary: var(--nc-on-primary);
-  --primary-foreground: var(--nc-ink);
-  --secondary: var(--nc-body);
-  --secondary-foreground: var(--nc-on-primary);
-  --muted: var(--nc-body);
-  --muted-foreground: var(--nc-cross);
-  --accent: var(--nc-body);
-  --accent-foreground: var(--nc-on-primary);
-  --destructive: var(--nc-error);
-  --destructive-foreground: var(--nc-on-primary);
-  --border: var(--nc-body);
-  --input: var(--nc-body);
-  --ring: var(--nc-cyan);
-  --chart-1: var(--nc-cyan);
-  --chart-2: var(--nc-link-bg-soft);
-  --chart-3: var(--nc-warning);
-  --chart-4: var(--nc-flag-red);
-  --chart-5: var(--nc-link);
-  --sidebar: var(--nc-primary);
-  --sidebar-foreground: var(--nc-on-primary);
-  --sidebar-primary: var(--nc-cyan);
-  --sidebar-primary-foreground: var(--nc-ink);
-  --sidebar-accent: var(--nc-body);
-  --sidebar-accent-foreground: var(--nc-on-primary);
-  --sidebar-border: var(--nc-body);
-  --sidebar-ring: var(--nc-cyan);
-
   --nc-app-surface: var(--background);
   --nc-app-surface-chrome: var(--sidebar);
   --nc-app-surface-sidebar: var(--sidebar);
@@ -359,4 +290,77 @@
   --nc-plugin-permission-foreground: var(--foreground);
 }
 
+[data-nc-code-block-body] {
+  background-color: var(--shiki-code-block-light-bg, var(--background));
+  color: var(--shiki-code-block-light-fg, var(--foreground));
+}
+
+.dark [data-nc-code-block-body] {
+  background-color: var(
+    --shiki-code-block-dark-bg,
+    var(--shiki-code-block-light-bg, var(--background))
+  );
+  color: var(
+    --shiki-code-block-dark-fg,
+    var(--shiki-code-block-light-fg, var(--foreground))
+  );
+}
+
+[data-nc-code-token] {
+  background-color: var(--shiki-code-token-light-bg, transparent);
+  color: var(--shiki-code-token-light-color, var(--foreground));
+  font-style: var(--shiki-code-token-light-font-style, normal);
+  font-weight: var(--shiki-code-token-light-font-weight, normal);
+  text-decoration: var(--shiki-code-token-light-text-decoration, none);
+}
+
+.dark [data-nc-code-token] {
+  background-color: var(
+    --shiki-code-token-dark-bg,
+    var(--shiki-code-token-light-bg, transparent)
+  );
+  color: var(
+    --shiki-code-token-dark-color,
+    var(--shiki-code-token-light-color, var(--foreground))
+  );
+  font-style: var(
+    --shiki-code-token-dark-font-style,
+    var(--shiki-code-token-light-font-style, normal)
+  );
+  font-weight: var(
+    --shiki-code-token-dark-font-weight,
+    var(--shiki-code-token-light-font-weight, normal)
+  );
+  text-decoration: var(
+    --shiki-code-token-dark-text-decoration,
+    var(--shiki-code-token-light-text-decoration, none)
+  );
+}
+
+.toaster [data-sonner-toast][data-styled="true"] [data-description] {
+  color: var(--muted-foreground);
+}
+
+.toaster [data-sonner-toast][data-styled="true"] [data-button] {
+  background: var(--popover-foreground);
+  color: var(--popover);
+}
+
+.toaster [data-sonner-toast][data-styled="true"] [data-cancel] {
+  background: var(--muted);
+  color: var(--popover-foreground);
+}
+
+.toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
+  background: var(--popover);
+  border-color: var(--border);
+  color: var(--popover-foreground);
+}
+
+.toaster [data-sonner-toast][data-styled="true"] [data-close-button]:hover {
+  background: var(--accent);
+  border-color: var(--border);
+  color: var(--accent-foreground);
+}
+
 @source "../components";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -23,6 +23,10 @@
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
     },
+    "./lib/theme-mode": {
+      "types": "./dist/lib/theme-mode.d.ts",
+      "import": "./dist/lib/theme-mode.js"
+    },
     "./components/*": {
       "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js"
@@ -37,13 +41,13 @@
     "skills"
   ],
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-dist-imports.mjs && cp -R src/styles dist/styles",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-dist-imports.mjs && rm -rf dist/styles && cp -R src/styles dist/styles",
     "prepack": "npm run build",
     "test": "vitest run"
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "@nadicodeai/design-system": "0.1.0",
+    "@nadicodeai/design-system": "0.2.0",
     "@radix-ui/react-use-controllable-state": "^1.2.3",
     "@rive-app/react-webgl2": "^4.29.1",
     "@streamdown/cjk": "^1.0.3",

package/skills/nadicodeai-ui/SKILL.md

@@ -68,7 +68,8 @@ import { AgentChat } from "@nadicodeai/ui/components/agent-chat";
 - Use token-backed shadcn utilities: `bg-background`, `text-foreground`, `border-border`, `text-muted-foreground`, `text-destructive`.
 - Use UI-local product aliases when a product role is needed: `bg-[var(--nc-app-surface)]`, `ring-[var(--nc-composer-ring)]`.
 - Use brand tokens through arbitrary values when needed: `text-[var(--nc-link-deep)]`.
-- Dark mode is owned by `@nadicodeai/ui/globals.css` through `:root` and `.dark` remaps of shadcn roles and UI-local product aliases. Do not add component-level `dark:` utilities, `.dark` CSS outside package globals/theme files, OS dark-mode branching, raw color literals, or raw Tailwind palette utilities.
+- Dark mode uses generated design-system `:root` and `.dark` shadcn roles plus UI-local product aliases in `@nadicodeai/ui/globals.css`. Consuming apps own the runtime `.dark` class and persisted light/dark/system preference. Do not add component-level `dark:` utilities, `.dark` CSS outside package globals/theme files, OS dark-mode branching, raw color literals, or raw Tailwind palette utilities.
+- Use `ThemeModeSwitcher` only as a controlled, app-agnostic control; do not import `next-themes` or app persistence into the UI package.
 - Compose app pages/screens from existing package components; extract new shared UI only after a second concrete consumer, a plan-approved shared component, or a named validation slice proves the package boundary.
 - For source maintenance, run shadcn commands with `--dry-run` before writing and do not use `--overwrite` without explicit maintainer approval.