@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/README.md

@@ -1 +1,53 @@
 # Flikkui
+
+A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. 150+ components following the shadcn philosophy with complete `className` override support.
+
+## MCP Server
+
+Flikkui ships with an MCP (Model Context Protocol) server that gives AI coding tools full knowledge of the component library — component APIs, props, theme tokens, and code generation.
+
+### What It Does
+
+| Tool | Description |
+|------|-------------|
+| `get_component` | Look up any component's full API — props, types, sub-components, theme tokens, and code examples |
+| `search_components` | Find components by name, category (`core`, `forms`, `charts`, etc.), or pattern type (`compound`, `simple`, etc.) |
+| `get_theme_tokens` | Get all CSS variables with correct Tailwind syntax (`bg-[var(--color-primary)]`) |
+| `generate_code` | Generate production-ready Flikkui code from a description |
+
+### Setup for Claude Code
+
+Add the following to your project's `.mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "flikkui": {
+      "command": "npx",
+      "args": ["@flikk/mcp"]
+    }
+  }
+}
+```
+
+Or if you're working from a local clone of this repo:
+
+```json
+{
+  "mcpServers": {
+    "flikkui": {
+      "command": "node",
+      "args": ["./packages/mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+### Building from Source
+
+```bash
+cd packages/mcp
+npm install
+npm run extract   # Parse component source files into registry.json
+npm run build     # Compile TypeScript
+```

package/dist/components/ai/AgentStatus/AgentStatus.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { AgentStatusProps } from "./AgentStatus.types";
+export declare const AgentStatus: React.ForwardRefExoticComponent<AgentStatusProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/AgentStatus/AgentStatus.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useMemo, useId, useState, useEffect } from 'react';
+import { CaretRight } from '@phosphor-icons/react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useElapsedTime } from '../../../hooks/useElapsedTime.js';
+import { Shimmer } from '../../effects/Shimmer/Shimmer.js';
+import { AIStatusIndicator } from '../shared/StatusIndicator.js';
+import { createTriggerIconVariants, accordionAnimations, accordionContentAnimations } from '../../core/Accordion/Accordion.animations.js';
+import { agentStatusTheme } from './AgentStatus.theme.js';
+
+const formatDuration = (duration) => {
+    const safe = Math.max(0, duration);
+    // Round once, up front. Rounding the minutes and seconds halves independently
+    // lets a value like 119.7 render as "1m 60s".
+    const rounded = safe < 60 ? Math.round(safe * 10) / 10 : Math.round(safe);
+    if (rounded < 60) {
+        return `${rounded.toFixed(Number.isInteger(rounded) ? 0 : 1)}s`;
+    }
+    return `${Math.floor(rounded / 60)}m ${rounded % 60}s`;
+};
+// The indicator + shimmering label + duration, without a root element. Both the
+// standalone status row (a <div role="status">) and the reasoning summary (a
+// phrasing <span> inside the trigger <button>) render this, so the visual row is
+// identical while each host picks a content-model-valid wrapper — a <div> may not
+// nest inside a <button>.
+const StatusRowInner = ({ theme, status, label, isActive, indicator, icon, wrap, activeSuffix, shimmerDuration, shimmerSpread, shimmerColor, shimmerHighlightColor, shownDuration, }) => {
+    const labelClass = cn(theme.labelStyle, wrap ? "" : "truncate");
+    return (jsxs(Fragment, { children: [indicator && (jsx("span", { className: theme.iconStyle, "aria-hidden": "true", children: icon !== null && icon !== void 0 ? icon : (jsx(AIStatusIndicator, { state: status, className: theme.indicatorStyles[status] })) })), isActive ? (jsx(Shimmer, { active: true, duration: shimmerDuration, spread: shimmerSpread, color: shimmerColor, highlightColor: shimmerHighlightColor, className: labelClass, children: jsxs(Fragment, { children: [label, activeSuffix] }) })) : (jsx("span", { className: labelClass, children: label })), shownDuration !== undefined && (
+            // aria-hidden: inside an aria-atomic live region a ticking timer would
+            // re-announce the whole label on every tick.
+            jsx("span", { className: theme.durationStyle, "aria-hidden": "true", children: formatDuration(shownDuration) }))] }));
+};
+const AgentStatus = React__default.forwardRef(({ mode = "status", status = "active", label, duration, startedAt, icon, indicator, wrap = false, activeSuffix = "…", shimmerDuration = 2, shimmerSpread = 16, shimmerColor = "color-mix(in oklab, var(--color-text-muted) 75%, transparent)", shimmerHighlightColor = "var(--color-text-primary)", live = "polite", steps, children, open, defaultOpen = false, onOpenChange, divider = true, className, theme: themeOverrides, ...rest }, ref) => {
+    // All hooks run unconditionally, before the mode branch.
+    const theme = useMemo(() => ({
+        ...agentStatusTheme,
+        ...themeOverrides,
+        stateStyles: {
+            ...agentStatusTheme.stateStyles,
+            ...themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.stateStyles,
+        },
+        indicatorStyles: {
+            ...agentStatusTheme.indicatorStyles,
+            ...themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.indicatorStyles,
+        },
+    }), [themeOverrides]);
+    const isReasoning = mode === "reasoning";
+    const isActive = status === "active";
+    // Ticks while active, freezes on settle. An explicit `duration` wins outright, so
+    // don't read the clock at all in that case — passing `startedAt` anyway would leave
+    // an interval re-rendering this row 10x/second only to discard every reading.
+    const ticked = useElapsedTime(duration === undefined ? startedAt : undefined, {
+        active: isActive,
+    });
+    const shownDuration = duration !== null && duration !== void 0 ? duration : ticked;
+    // A status row always carries an indicator; a reasoning summary drops it once
+    // settled, because the chevron carries the affordance from there. Either default
+    // yields to an explicit `indicator`, and a custom `icon` opts back in — you only
+    // pass an icon in order to see it.
+    const showIndicator = indicator !== null && indicator !== void 0 ? indicator : (isReasoning ? isActive || icon !== undefined : true);
+    const reactId = useId();
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const shouldReduceMotion = useReducedMotion();
+    const isControlled = open !== undefined;
+    const hasOnOpenChange = onOpenChange !== undefined;
+    const hasSteps = steps !== undefined;
+    const hasChildren = children !== undefined;
+    // Dev warnings belong in an effect, not the render body: `startedAt` re-renders this
+    // component ten times a second, and a render-body warning reprints on every tick.
+    // The deps are booleans on purpose — depending on `steps`/`children`/`onOpenChange`
+    // directly would re-fire on every parent render and bring the flood back.
+    useEffect(() => {
+        if (process.env.NODE_ENV === "production" || !isReasoning)
+            return;
+        /* eslint-disable no-console */
+        if (isControlled && defaultOpen) {
+            console.warn("[AgentStatus]: both `open` and `defaultOpen` were provided — `open` (controlled) wins.");
+        }
+        if (isControlled && !hasOnOpenChange) {
+            console.warn("[AgentStatus]: `open` was provided without `onOpenChange`, so the reasoning block can never be toggled. Pass `defaultOpen` for uncontrolled usage.");
+        }
+        if (hasSteps && hasChildren) {
+            console.warn("[AgentStatus]: both `steps` and `children` were provided — `steps` takes precedence.");
+        }
+        /* eslint-enable no-console */
+    }, [
+        isReasoning,
+        isControlled,
+        defaultOpen,
+        hasOnOpenChange,
+        hasSteps,
+        hasChildren,
+    ]);
+    // Shimmer + theme config shared with the nested rows a reasoning block renders.
+    // Memoized so a ticking summary duration doesn't churn the step list's props.
+    const sharedRowProps = useMemo(() => ({
+        activeSuffix,
+        shimmerDuration,
+        shimmerSpread,
+        shimmerColor,
+        shimmerHighlightColor,
+        theme: themeOverrides,
+    }), [
+        activeSuffix,
+        shimmerDuration,
+        shimmerSpread,
+        shimmerColor,
+        shimmerHighlightColor,
+        themeOverrides,
+    ]);
+    // steps => structured list of rows; otherwise raw children (prose / markdown
+    // / mixed). Memoized so it survives the 100ms duration ticks while active —
+    // only the summary row's duration should re-render, not the whole step list.
+    const reasoningBody = useMemo(() => {
+        if (steps) {
+            return (jsx("ol", { className: theme.stepsStyle, children: steps.map((step, index) => {
+                    var _a, _b;
+                    return (jsx("li", { className: theme.stepItemStyle, children: jsx(AgentStatus, { mode: "status", status: (_a = step.status) !== null && _a !== void 0 ? _a : "complete", label: step.label, duration: step.duration, wrap: true, live: "off", ...sharedRowProps }) }, (_b = step.id) !== null && _b !== void 0 ? _b : index));
+                }) }));
+        }
+        return children !== undefined ? (jsx("div", { className: theme.proseStyle, children: children })) : null;
+    }, [steps, children, theme, sharedRowProps]);
+    // ===== STATUS MODE: a single activity row =====
+    if (!isReasoning) {
+        return (jsx("div", { ref: ref, role: "status", "aria-live": live, "aria-atomic": "true", "data-state": status, className: cn(theme.baseStyle, theme.stateStyles[status], className), ...rest, children: jsx(StatusRowInner, { theme: theme, status: status, label: label, isActive: isActive, indicator: showIndicator, icon: icon, wrap: wrap, activeSuffix: activeSuffix, shimmerDuration: shimmerDuration, shimmerSpread: shimmerSpread, shimmerColor: shimmerColor, shimmerHighlightColor: shimmerHighlightColor, shownDuration: shownDuration }) }));
+    }
+    // ===== REASONING MODE: a collapsible disclosure of the same rows =====
+    const contentId = `${reactId}-reasoning`;
+    const triggerId = `${contentId}-trigger`;
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const instantTransition = shouldReduceMotion ? { duration: 0 } : undefined;
+    const toggle = () => {
+        const next = !isOpen;
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    };
+    return (jsxs("div", { ref: ref, "data-state": isOpen ? "open" : "closed", className: cn(theme.reasoningRootStyle, className), ...rest, children: [jsx("button", { id: triggerId, type: "button", className: theme.triggerStyle, "aria-expanded": isOpen, "aria-controls": isOpen ? contentId : undefined, onClick: toggle, children: jsxs("span", { className: theme.triggerContentStyle, children: [jsx("span", { className: cn(theme.baseStyle, theme.stateStyles[status]), "aria-live": live, "aria-atomic": "true", children: jsx(StatusRowInner, { theme: theme, status: status, label: label, isActive: isActive, indicator: showIndicator, icon: icon, wrap: false, activeSuffix: activeSuffix, shimmerDuration: shimmerDuration, shimmerSpread: shimmerSpread, shimmerColor: shimmerColor, shimmerHighlightColor: shimmerHighlightColor, shownDuration: shownDuration }) }), jsx(motion.span, { className: theme.chevronStyle, initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(90), transition: instantTransition, "aria-hidden": "true", children: jsx(CaretRight, { className: "size-full" }) })] }) }), divider && jsx("div", { className: theme.dividerStyle, "aria-hidden": "true" }), jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { id: contentId, role: "region", "aria-labelledby": triggerId, className: theme.contentStyle, "data-state": "open", initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, children: jsx(motion.div, { className: theme.contentInnerStyle, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionContentAnimations, transition: instantTransition, children: reasoningBody }) })) })] }));
+});
+AgentStatus.displayName = "AgentStatus";
+
+export { AgentStatus };

package/dist/components/ai/AgentStatus/AgentStatus.theme.d.ts

@@ -0,0 +1,2 @@
+import type { AgentStatusTheme } from "./AgentStatus.types";
+export declare const agentStatusTheme: AgentStatusTheme;

package/dist/components/ai/AgentStatus/AgentStatus.theme.js

@@ -0,0 +1,37 @@
+const agentStatusTheme = {
+    baseStyle: "inline-flex min-w-0 items-center gap-2 text-sm",
+    iconStyle: "flex size-4 shrink-0 items-center justify-center",
+    // truncate is applied at the call site (only when `wrap` is off) so steps can wrap.
+    labelStyle: "min-w-0 font-medium",
+    durationStyle: "shrink-0 text-sm tabular-nums text-[var(--color-text-muted)]",
+    stateStyles: {
+        idle: "text-[var(--color-text-muted)]",
+        active: "text-[var(--color-text-secondary)]",
+        complete: "text-[var(--color-text-muted)]",
+        pending: "text-[var(--color-text-placeholder)]",
+        error: "text-[var(--color-danger)]",
+    },
+    indicatorStyles: {
+        idle: "text-[var(--color-text-muted)]",
+        active: "text-[var(--color-primary)]",
+        complete: "text-[var(--color-success)]",
+        pending: "text-[var(--color-text-placeholder)]",
+        error: "text-[var(--color-danger)]",
+    },
+    // --- reasoning mode: borderless inline disclosure ---
+    reasoningRootStyle: "w-full min-w-0",
+    triggerStyle: "flex w-full items-center py-2 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-primary)]",
+    triggerContentStyle: "inline-flex min-w-0 items-center gap-1.5",
+    chevronStyle: "inline-flex size-3.5 shrink-0 items-center justify-center text-[var(--color-text-muted)]",
+    dividerStyle: "h-px w-full bg-[var(--color-border)]",
+    contentStyle: "w-full min-w-0 overflow-hidden",
+    contentInnerStyle: "w-full min-w-0 pt-3",
+    stepsStyle: "space-y-2",
+    stepItemStyle: "min-w-0",
+    // Raw children (prose / markdown / mixed). flex-col so any child — a <p>, a
+    // MarkdownRenderer, or an inline-flex AgentStatus row — stacks vertically; the
+    // gap lives on the container, so it survives child margin resets.
+    proseStyle: "flex flex-col gap-3 text-sm leading-relaxed text-[var(--color-text-secondary)] [&_p]:m-0",
+};
+
+export { agentStatusTheme };

package/dist/components/ai/AgentStatus/AgentStatus.types.d.ts

@@ -0,0 +1,116 @@
+import React from "react";
+export type AgentStatusState = "idle" | "active" | "complete" | "pending" | "error";
+/**
+ * Presentation mode. `status` is a single activity row; `reasoning` turns that
+ * same row into a collapsible disclosure whose body holds steps and/or prose.
+ * The two axes are independent — a `reasoning` block is itself `active`,
+ * `complete`, etc.
+ */
+export type AgentStatusMode = "status" | "reasoning";
+/** A single reasoning step — a serializable AgentStatus row. */
+export interface AgentStatusStepData {
+    id?: React.Key;
+    label: React.ReactNode;
+    status?: AgentStatusState;
+    /** Elapsed or final step duration in seconds. */
+    duration?: number;
+}
+export interface AgentStatusTheme {
+    baseStyle: string;
+    iconStyle: string;
+    labelStyle: string;
+    durationStyle: string;
+    stateStyles: Record<AgentStatusState, string>;
+    indicatorStyles: Record<AgentStatusState, string>;
+    reasoningRootStyle: string;
+    triggerStyle: string;
+    triggerContentStyle: string;
+    chevronStyle: string;
+    dividerStyle: string;
+    contentStyle: string;
+    contentInnerStyle: string;
+    stepsStyle: string;
+    stepItemStyle: string;
+    proseStyle: string;
+}
+export interface AgentStatusThemeOverrides extends Omit<Partial<AgentStatusTheme>, "stateStyles" | "indicatorStyles"> {
+    stateStyles?: Partial<AgentStatusTheme["stateStyles"]>;
+    indicatorStyles?: Partial<AgentStatusTheme["indicatorStyles"]>;
+}
+export interface AgentStatusProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Single status row (default) or a collapsible reasoning disclosure. @default "status" */
+    mode?: AgentStatusMode;
+    /** Current execution state. Active labels shimmer; settled labels are static. */
+    status?: AgentStatusState;
+    /** Human-readable activity, for example "Thinking" or "Searching sources". */
+    label: React.ReactNode;
+    /**
+     * Elapsed or final duration in seconds. Takes precedence over `startedAt`, so
+     * pass it when the duration is authoritative (for example, returned by the server).
+     */
+    duration?: number;
+    /**
+     * Epoch milliseconds the activity began. The duration then ticks on its own
+     * while `status` is `"active"` and freezes the moment it settles — no timer
+     * wiring in the consumer. Ignored when `duration` is supplied.
+     */
+    startedAt?: number;
+    /** Optional icon. When omitted, the animated semantic indicator is rendered. */
+    icon?: React.ReactNode;
+    /**
+     * Show the leading status indicator (or custom `icon`). Set `false` for an
+     * icon-less, text-only row — the label then sits flush left.
+     *
+     * Defaults differ by mode: a `status` row always shows one, while a `reasoning`
+     * summary shows one only while active (the chevron carries the affordance once
+     * settled) — unless an `icon` is supplied, which opts back in. Pass explicitly
+     * to override either default.
+     * @default true in `status` mode; active-only in `reasoning` mode
+     */
+    indicator?: boolean;
+    /**
+     * Let the label wrap onto multiple lines instead of truncating. Steps render
+     * with this on; the standalone/summary row truncates by default.
+     * @default false
+     */
+    wrap?: boolean;
+    /** Text appended while active. @default "…" */
+    activeSuffix?: React.ReactNode;
+    /** Active shimmer cycle duration in seconds. @default 2 */
+    shimmerDuration?: number;
+    /** Width of the active shimmer highlight band. @default 16 */
+    shimmerSpread?: number;
+    /** Base color for the active shimmer text. */
+    shimmerColor?: string;
+    /** Highlight color for the active shimmer sweep. */
+    shimmerHighlightColor?: string;
+    /**
+     * Accessible announcement behavior. `"polite"` waits for a pause rather than
+     * interrupting, which is what a background activity warrants.
+     * @default "polite"
+     */
+    live?: "off" | "polite" | "assertive";
+    /**
+     * Structured reasoning steps. Rendered as a list of AgentStatus rows.
+     * Ignored unless `mode="reasoning"`.
+     */
+    steps?: AgentStatusStepData[];
+    /**
+     * Free-form reasoning body — prose, a `<MarkdownRenderer>`, or a mix of prose
+     * and `<AgentStatus>` rows. Rendered raw (not wrapped in a list), so paragraphs
+     * are valid. `steps` takes precedence when both are supplied.
+     */
+    children?: React.ReactNode;
+    /** Controlled expanded state (reasoning mode). */
+    open?: boolean;
+    /** Initial expanded state for uncontrolled reasoning usage. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Render the full-width hairline under the reasoning trigger.
+     * @default true
+     */
+    divider?: boolean;
+    className?: string;
+    theme?: AgentStatusThemeOverrides;
+}

package/dist/components/ai/AgentStatus/index.d.ts

@@ -0,0 +1,3 @@
+export { AgentStatus } from "./AgentStatus";
+export { agentStatusTheme } from "./AgentStatus.theme";
+export type { AgentStatusProps, AgentStatusState, AgentStatusMode, AgentStatusStepData, AgentStatusTheme, AgentStatusThemeOverrides, } from "./AgentStatus.types";

package/dist/components/ai/CodeBlock/CodeBlock.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useState, useMemo, useCallback } from 'react';
+import React__default, { useState, useMemo, useCallback, useRef } from 'react';
 import { Prism } from 'react-syntax-highlighter';
 import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { DocumentTextIcon, DocumentCheckIcon, DocumentDuplicateIcon } from '@heroicons/react/24/outline';
+import { FileText, ListChecks, Copy } from '@phosphor-icons/react';
 import { codeBlockTheme } from './CodeBlock.theme.js';
 import { LanguageIcon } from './LanguageIcon.js';
 import { cn } from '../../../utils/cn.js';
@@ -49,7 +50,6 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
         filename: customTheme.filename || codeBlockTheme.filename,
         languageLabel: customTheme.languageLabel || codeBlockTheme.languageLabel,
         codeWrapper: customTheme.codeWrapper || codeBlockTheme.codeWrapper,
-        lineNumber: customTheme.lineNumber || codeBlockTheme.lineNumber,
         highlightedLine: customTheme.highlightedLine || codeBlockTheme.highlightedLine,
         diffAddition: customTheme.diffAddition || codeBlockTheme.diffAddition,
         diffDeletion: customTheme.diffDeletion || codeBlockTheme.diffDeletion,
@@ -140,8 +140,21 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
     const showHeader = filename || showLanguage;
     // Pre-split code lines for lineProps
     const codeLines = useMemo(() => code.split("\n"), [code]);
-    // Custom line props for highlighting
-    const lineProps = useCallback((lineNumber) => {
+    // Custom line props for highlighting/diff styling.
+    //
+    // react-syntax-highlighter only computes a real (1-indexed) `lineNumber`
+    // argument when `showLineNumbers` is truthy — otherwise every line is
+    // called with `lineNumber={false}` (see its `highlight.js`:
+    // `lineNumber = showLineNumbers && newTree.length + startingLineNumber`).
+    // `highlightLines`/`diffMode` must work regardless of whether line
+    // numbers are shown, so we don't trust that argument — instead we keep
+    // our own sequential counter, reset right before each render pass (see
+    // below), since `lineProps` is invoked once per line, in source order,
+    // synchronously during that render.
+    const lineCounterRef = useRef(0);
+    const lineProps = useCallback(() => {
+        lineCounterRef.current += 1;
+        const lineNumber = lineCounterRef.current;
         const lineContent = codeLines[lineNumber - 1] || "";
         const diffStyle = getDiffStyle(lineContent, lineNumber);
         const highlighted = isLineHighlighted(lineNumber);
@@ -160,7 +173,11 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
             className: lineClassName,
         };
     }, [codeLines, getDiffStyle, isLineHighlighted, mergedTheme]);
-    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [showHeader && (jsxs("div", { className: mergedTheme.header, children: [jsx("div", { className: mergedTheme.headerLeft, children: filename && (jsxs(Fragment, { children: [jsx(DocumentTextIcon, { className: "size-4 text-[var(--color-text-muted)]" }), jsx("span", { className: mergedTheme.filename, children: filename })] })) }), jsxs("div", { className: mergedTheme.headerRight, children: [showLanguage && (jsxs("div", { className: "flex items-center gap-2", children: [jsx(LanguageIcon, { language: language, className: "size-4" }), jsx("span", { className: mergedTheme.languageLabel, children: displayLanguage })] })), copyable && (jsx("button", { onClick: handleCopy, className: cn(mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", children: copied ? (jsx(DocumentCheckIcon, { className: "size-4" })) : (jsx(DocumentDuplicateIcon, { className: "size-4" })) }))] })] })), jsx("div", { className: mergedTheme.codeWrapper, style: {
+    // Reset the sequential counter immediately before each render pass so
+    // `lineProps` starts counting from line 1 every time, regardless of
+    // `showLineNumbers`.
+    lineCounterRef.current = 0;
+    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [showHeader && (jsxs("div", { className: mergedTheme.header, children: [jsx("div", { className: mergedTheme.headerLeft, children: filename && (jsxs(Fragment, { children: [jsx(FileText, { className: "size-4 text-[var(--color-text-muted)]" }), jsx("span", { className: mergedTheme.filename, children: filename })] })) }), jsxs("div", { className: mergedTheme.headerRight, children: [showLanguage && (jsxs("div", { className: "flex items-center gap-2", children: [jsx(LanguageIcon, { language: language, className: "size-4" }), jsx("span", { className: mergedTheme.languageLabel, children: displayLanguage })] })), copyable && (jsx("button", { onClick: handleCopy, className: cn(mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", children: copied ? (jsx(ListChecks, { className: "size-4" })) : (jsx(Copy, { className: "size-4" })) }))] })] })), jsx("div", { className: mergedTheme.codeWrapper, style: {
                     maxHeight: maxHeight,
                     overflowY: maxHeight ? "auto" : undefined,
                 }, children: jsx(Prism, { language: language, style: syntaxTheme === "dark" ? oneDark : oneLight, showLineNumbers: showLineNumbers, wrapLines: true, wrapLongLines: wrapLines, lineProps: lineProps, lineNumberStyle: {
@@ -175,7 +192,7 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
                         fontSize: "0.875rem",
                         lineHeight: "1.5",
                         background: "transparent",
-                    }, children: code }) }), !showHeader && copyable && (jsx("button", { onClick: handleCopy, className: cn("absolute top-2 right-2", mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", children: copied ? (jsx(DocumentCheckIcon, { className: "size-4" })) : (jsx(DocumentDuplicateIcon, { className: "size-4" })) }))] }));
+                    }, children: code }) }), !showHeader && copyable && (jsx("button", { onClick: handleCopy, className: cn("absolute top-2 right-2", mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", children: copied ? (jsx(ListChecks, { className: "size-4" })) : (jsx(Copy, { className: "size-4" })) }))] }));
 });
 CodeBlock.displayName = "CodeBlock";
 

package/dist/components/ai/CodeBlock/CodeBlock.theme.js

@@ -1,16 +1,15 @@
 const codeBlockTheme = {
-    baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-background)]",
+    baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface-sunken)] shadow-inner-real-sm",
     header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-background-secondary)] border-b border-[var(--color-border)]",
     headerLeft: "flex items-center gap-2 min-w-0 flex-1 ",
     headerRight: "flex items-center gap-2 flex-shrink-0",
     filename: "text-sm font-medium text-[var(--color-text-secondary)] truncate",
     languageLabel: "text-xs uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
     codeWrapper: "overflow-x-auto",
-    lineNumber: "text-[var(--color-text-muted)] select-none text-right tabular-nums min-w-[2.5rem] pr-4 opacity-50",
-    highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-neutral-400/5 dark:border-l-neutral-200",
+    highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-[var(--color-mono-400)]/5 dark:border-l-[var(--color-mono-200)]",
     diffAddition: "-mx-4 px-4 bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] dark:bg-[var(--color-success-600)]/20 dark:border-l-[var(--color-success-700)]",
     diffDeletion: "-mx-4 px-4 bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] dark:bg-[var(--color-danger-600)]/20 dark:border-l-[var(--color-danger-700)]",
-    copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     copySuccess: "text-[var(--color-success)]",
 };
 

package/dist/components/ai/CodeBlock/CodeBlock.types.d.ts

@@ -81,7 +81,6 @@ export interface CodeBlockTheme {
     filename: string;
     languageLabel: string;
     codeWrapper: string;
-    lineNumber: string;
     highlightedLine: string;
     diffAddition: string;
     diffDeletion: string;
@@ -99,7 +98,6 @@ export interface CodeBlockThemeOverrides {
     filename?: string;
     languageLabel?: string;
     codeWrapper?: string;
-    lineNumber?: string;
     highlightedLine?: string;
     diffAddition?: string;
     diffDeletion?: string;

package/dist/components/ai/CodeBlock/LanguageIcon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/ai/PromptInput/PromptInput.animations.d.ts

@@ -0,0 +1,25 @@
+import type { Variants } from "motion/react";
+/**
+ * Voice recorder enter/exit animation (replaces textarea area)
+ */
+export declare const voiceRecorderVariants: Variants;
+/**
+ * Textarea enter/exit animation (when swapping with voice recorder)
+ */
+export declare const textareaSwapVariants: Variants;
+/**
+ * Submit/Stop icon swap animation
+ */
+export declare const iconSwapVariants: Variants;
+/**
+ * Enhanced dropzone container animation
+ */
+export declare const dropzoneContainerVariants: Variants;
+/**
+ * Dropzone child elements stagger animation
+ */
+export declare const dropzoneChildVariants: Variants;
+/**
+ * Dropzone action icons stagger animation
+ */
+export declare const dropzoneActionIconVariants: Variants;

package/dist/components/ai/PromptInput/PromptInput.animations.js

@@ -0,0 +1,61 @@
+/**
+ * Voice recorder enter/exit animation (replaces textarea area)
+ */
+/**
+ * Textarea enter/exit animation (when swapping with voice recorder)
+ */
+const textareaSwapVariants = {
+    initial: { opacity: 0, y: -8 },
+    animate: { opacity: 1, y: 0, transition: { duration: 0.2, ease: "easeOut" } },
+    exit: { opacity: 0, y: 8, transition: { duration: 0.15, ease: "easeIn" } },
+};
+/**
+ * Submit/Stop icon swap animation
+ */
+const iconSwapVariants = {
+    initial: { opacity: 0, scale: 0.5, rotate: -90 },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        rotate: 0,
+        transition: { duration: 0.2, ease: "easeOut" },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.5,
+        rotate: 90,
+        transition: { duration: 0.15, ease: "easeIn" },
+    },
+};
+/**
+ * Enhanced dropzone container animation
+ */
+const dropzoneContainerVariants = {
+    initial: { opacity: 0 },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.2,
+            staggerChildren: 0.05,
+        },
+    },
+    exit: { opacity: 0, transition: { duration: 0.15 } },
+};
+/**
+ * Dropzone child elements stagger animation
+ */
+const dropzoneChildVariants = {
+    initial: { opacity: 0, y: 8 },
+    animate: { opacity: 1, y: 0, transition: { duration: 0.2, ease: "easeOut" } },
+    exit: { opacity: 0, transition: { duration: 0.1 } },
+};
+/**
+ * Dropzone action icons stagger animation
+ */
+const dropzoneActionIconVariants = {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: { opacity: 1, scale: 1, transition: { duration: 0.15 } },
+    exit: { opacity: 0, scale: 0.8, transition: { duration: 0.1 } },
+};
+
+export { dropzoneActionIconVariants, dropzoneChildVariants, dropzoneContainerVariants, iconSwapVariants, textareaSwapVariants };