@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.mjs","names":[],"sources":["../src/chart.tsx"],"sourcesContent":["import type {ECharts, EChartsOption} from \"echarts\";\n\nimport {cssColorToRgb, getChartColors, getCssVarAsRgb} from \"@corensystem/coren-utils\";\nimport * as echarts from \"echarts\";\nimport * as React from \"react\";\n\nimport {WidgetCard, WidgetCardActions, WidgetCardBody, WidgetCardHeader, WidgetCardTitle} from \"./widget-card\";\n\nexport type ChartConfig = {\n\t[k in string]: {\n\t\tlabel?: React.ReactNode;\n\t\ticon?: React.ComponentType;\n\t} & ({color?: string; theme?: never} | {color?: never; theme: Record<\"light\" | \"dark\", string>});\n};\n\nexport type ChartSemanticTone =\n\t| \"primary\"\n\t| \"success\"\n\t| \"warning\"\n\t| \"destructive\"\n\t| \"muted\"\n\t| \"chart-1\"\n\t| \"chart-2\"\n\t| \"chart-3\"\n\t| \"chart-4\"\n\t| \"chart-5\";\n\nexport type ChartSeriesTheme = {tone: ChartSemanticTone; colorIndex?: never} | {tone?: never; colorIndex: number};\n\nconst TONE_VARIABLES: Record<ChartSemanticTone, string> = {\n\tprimary: \"--primary\",\n\tsuccess: \"--success\",\n\twarning: \"--warning\",\n\tdestructive: \"--destructive\",\n\tmuted: \"--muted-foreground\",\n\t\"chart-1\": \"--chart-1\",\n\t\"chart-2\": \"--chart-2\",\n\t\"chart-3\": \"--chart-3\",\n\t\"chart-4\": \"--chart-4\",\n\t\"chart-5\": \"--chart-5\",\n};\n\nconst CANVAS_UNSAFE_COLOR = /(?:var\\(|oklch\\(|oklab\\(|lab\\(|lch\\(|color\\()/i;\n\nfunction themedSeriesColor(theme: ChartSeriesTheme): string {\n\tif (theme.tone) return getCssVarAsRgb(TONE_VARIABLES[theme.tone]);\n\tconst colors = getChartColors();\n\treturn colors[((theme.colorIndex % colors.length) + colors.length) % colors.length];\n}\n\nfunction normalizeColorValue(value: unknown, key?: string): unknown {\n\tif (Array.isArray(value)) return value.map((item) => normalizeColorValue(item, key));\n\tif (value && typeof value === \"object\")\n\t\treturn Object.fromEntries(\n\t\t\tObject.entries(value).map(([childKey, childValue]) => [childKey, normalizeColorValue(childValue, childKey)]),\n\t\t);\n\tif (typeof value === \"string\" && key && /(?:^color$|color$)/i.test(key) && CANVAS_UNSAFE_COLOR.test(value))\n\t\treturn cssColorToRgb(value);\n\treturn value;\n}\n\n/**\n * Returns an ECharts option whose CSS Color 4 values are converted to canvas-safe RGB strings.\n * Optional series themes let consumers use Core semantic tones or palette indexes without\n * reading CSS variables or introducing raw color literals.\n *\n * Colors are resolved against the theme that is live **at call time** — the returned option holds\n * concrete RGB strings, so a memoised result goes stale the moment the theme is switched. Prefer\n * `<ChartContainer seriesThemes={...} />`, which re-resolves them on every theme change; call this\n * directly only when you need the option object itself, and key your memo on {@link useThemeVersion}.\n */\nexport function createThemedChartOption(option: EChartsOption, seriesThemes: ChartSeriesTheme[] = []): EChartsOption {\n\tconst normalized = normalizeColorValue(option) as EChartsOption;\n\tif (!seriesThemes.length || !Array.isArray(normalized.series)) return normalized;\n\treturn {\n\t\t...normalized,\n\t\tseries: normalized.series.map((series, index) => {\n\t\t\tconst theme = seriesThemes[index];\n\t\t\tif (!theme || !series || typeof series !== \"object\") return series;\n\t\t\tconst color = themedSeriesColor(theme);\n\t\t\tconst record = series as Record<string, unknown>;\n\t\t\treturn {\n\t\t\t\t...record,\n\t\t\t\tlineStyle: {...(record.lineStyle as Record<string, unknown> | undefined), color},\n\t\t\t\titemStyle: {...(record.itemStyle as Record<string, unknown> | undefined), color},\n\t\t\t};\n\t\t}),\n\t};\n}\n\n/**\n * A counter that changes whenever the live theme does, so anything resolved from a CSS variable can\n * be read again.\n *\n * Every color here comes out of `getComputedStyle(document.documentElement)`, which returns a\n * concrete RGB string for whichever theme was live when it ran. Toggling `.dark` (or `.wwc-invert`,\n * or `data-theme`) on `<html>` swaps the variables underneath but recomputes nothing — a chart\n * memoised on mount keeps painting light-mode colors on a dark card until something invalidates it.\n * That is what this hook is: an attribute observer over `<html>` plus the system-preference media\n * query, both of which mean \"read the variables again\".\n *\n * Use it as a dependency of any memo that resolves theme colors itself.\n */\nexport function useThemeVersion(): number {\n\tconst [version, setVersion] = React.useState(0);\n\n\tReact.useEffect(() => {\n\t\tconst bump = () => setVersion((current) => current + 1);\n\n\t\tconst observer = new MutationObserver(bump);\n\t\tobserver.observe(document.documentElement, {attributes: true, attributeFilter: [\"class\", \"data-theme\"]});\n\n\t\tconst media = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\t\tmedia.addEventListener(\"change\", bump);\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t\tmedia.removeEventListener(\"change\", bump);\n\t\t};\n\t}, []);\n\n\treturn version;\n}\n\n/**\n * Hook that returns theme-aware colors derived from CSS variables.\n * Returns chart colors (--chart-1 through --chart-5) and common UI colors.\n * Recomputes on every theme change, so an option built from these values is never stale.\n */\nexport function useChartTheme() {\n\tconst themeVersion = useThemeVersion();\n\n\t// The version is taken as an argument rather than closed over: it is a real input here, since\n\t// every value below reads the live CSS variables and the version is what says they moved.\n\treturn React.useMemo(() => readChartTheme(themeVersion), [themeVersion]);\n}\n\n/** Reads the whole palette from the document. The version argument only dates the answer. */\nfunction readChartTheme(_themeVersion: number) {\n\treturn {\n\t\tcolors: getChartColors(),\n\t\ttextColor: getCssVarAsRgb(\"--foreground\"),\n\t\tmutedColor: getCssVarAsRgb(\"--muted-foreground\"),\n\t\tborderColor: getCssVarAsRgb(\"--border\"),\n\t\tbackgroundColor: getCssVarAsRgb(\"--background\"),\n\t};\n}\n\ntype ChartPalette = {textColor: string; mutedColor: string; borderColor: string};\n\n/**\n * Defaults a `color` on a text-ish ECharts node. The caller's own value wins — spreading the\n * existing record last is what makes this a default rather than an override.\n */\nfunction withTextColor(node: unknown, color: string): Record<string, unknown> {\n\treturn {color, ...((node ?? {}) as Record<string, unknown>)};\n}\n\n/** The same, for the `lineStyle.color` of an axis line, tick, or gridline. */\nfunction withLineColor(node: unknown, color: string): Record<string, unknown> {\n\tconst record = (node ?? {}) as Record<string, unknown>;\n\treturn {...record, lineStyle: {color, ...((record.lineStyle ?? {}) as Record<string, unknown>)}};\n}\n\nfunction themedAxis(axis: unknown, palette: ChartPalette): unknown {\n\tif (Array.isArray(axis)) return axis.map((entry) => themedAxis(entry, palette));\n\tif (!axis || typeof axis !== \"object\") return axis;\n\tconst record = axis as Record<string, unknown>;\n\treturn {\n\t\t...record,\n\t\taxisLabel: withTextColor(record.axisLabel, palette.mutedColor),\n\t\taxisLine: withLineColor(record.axisLine, palette.borderColor),\n\t\taxisTick: withLineColor(record.axisTick, palette.borderColor),\n\t\tsplitLine: withLineColor(record.splitLine, palette.borderColor),\n\t};\n}\n\nfunction themedTextNode(node: unknown, color: string): unknown {\n\tif (Array.isArray(node)) return node.map((entry) => themedTextNode(entry, color));\n\tif (!node || typeof node !== \"object\") return node;\n\tconst record = node as Record<string, unknown>;\n\treturn {...record, textStyle: withTextColor(record.textStyle, color)};\n}\n\n/**\n * Fills in the chart's own furniture — label text, axis lines, gridlines — from the live theme.\n *\n * Left unset, ECharts falls back to its built-in `#333` text and `#ccc` lines, which are literals\n * and stay put when the page inverts. Anything the option already states is kept, so this only ever\n * colors what the caller left to chance. Axes absent from the option are not invented.\n */\nfunction withThemeDefaults(option: EChartsOption): EChartsOption {\n\tif (typeof document === \"undefined\") return option;\n\n\tconst palette: ChartPalette = {\n\t\ttextColor: getCssVarAsRgb(\"--foreground\"),\n\t\tmutedColor: getCssVarAsRgb(\"--muted-foreground\"),\n\t\tborderColor: getCssVarAsRgb(\"--border\"),\n\t};\n\tconst record = option as Record<string, unknown>;\n\tconst themed: Record<string, unknown> = {...record, textStyle: withTextColor(record.textStyle, palette.textColor)};\n\n\tif (record.xAxis) themed.xAxis = themedAxis(record.xAxis, palette);\n\tif (record.yAxis) themed.yAxis = themedAxis(record.yAxis, palette);\n\tif (record.radiusAxis) themed.radiusAxis = themedAxis(record.radiusAxis, palette);\n\tif (record.angleAxis) themed.angleAxis = themedAxis(record.angleAxis, palette);\n\tif (record.legend) themed.legend = themedTextNode(record.legend, palette.mutedColor);\n\tif (record.title) themed.title = themedTextNode(record.title, palette.textColor);\n\n\treturn themed as EChartsOption;\n}\n\ninterface ChartContainerProps {\n\tconfig?: ChartConfig;\n\toption: EChartsOption;\n\t/**\n\t * Core semantic tones or palette indexes applied to `option.series` in order. Prefer this over\n\t * calling {@link createThemedChartOption} yourself: the colors are resolved here, on every theme\n\t * change, so the series survive a switch to dark mode.\n\t */\n\tseriesThemes?: ChartSeriesTheme[];\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\theight?: number | string;\n\tonEvents?: Record<string, (params: unknown) => void>;\n\t/** When set, the chart is framed in a WidgetCard with this name in the grey header band. */\n\ttitle?: React.ReactNode;\n\t/** Right-aligned header slot (info icon, menu, ...). Only rendered alongside a `title`. */\n\tactions?: React.ReactNode;\n\t/** Headline figure rendered above the chart, inside the card body. */\n\tvalue?: React.ReactNode;\n}\n\n/**\n * ECharts wrapper that manages its own instance to prevent hover/tooltip issues.\n * Uses echarts directly instead of echarts-for-react to avoid re-render problems.\n * Passing `title` frames the chart in the shared analytics container (grey header band + body).\n *\n * Colors are re-resolved and re-applied on every theme change, not only when `option` changes\n * identity — a memoised option is the normal thing for a caller to pass, and it must not freeze the\n * chart in the theme it was first painted in.\n */\nconst ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(\n\t({config: _config, option, seriesThemes, className, style, height, onEvents, title, actions, value}, ref) => {\n\t\tconst chartRef = React.useRef<HTMLDivElement>(null);\n\t\tconst instanceRef = React.useRef<ECharts | null>(null);\n\t\tconst themeVersion = useThemeVersion();\n\n\t\t// Initialize chart on mount\n\t\tReact.useEffect(() => {\n\t\t\tif (!chartRef.current) return;\n\n\t\t\tconst instance = echarts.init(chartRef.current);\n\t\t\tinstanceRef.current = instance;\n\n\t\t\t// Bind events\n\t\t\tif (onEvents) {\n\t\t\t\tfor (const [event, handler] of Object.entries(onEvents)) {\n\t\t\t\t\tinstance.on(event, handler as (...args: unknown[]) => void);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Handle resize\n\t\t\tconst observer = new ResizeObserver(() => {\n\t\t\t\tinstance.resize();\n\t\t\t});\n\t\t\tobserver.observe(chartRef.current);\n\n\t\t\treturn () => {\n\t\t\t\tobserver.disconnect();\n\t\t\t\tinstance.dispose();\n\t\t\t\tinstanceRef.current = null;\n\t\t\t};\n\t\t}, []);\n\n\t\t// A caller writing `seriesThemes={[{tone: \"primary\"}]}` inline hands us a new array every render;\n\t\t// its contents are what matter, so the effect keys on those and reads the latest array by ref.\n\t\tconst seriesThemesRef = React.useRef(seriesThemes);\n\t\tseriesThemesRef.current = seriesThemes;\n\t\tconst seriesThemesKey = JSON.stringify(seriesThemes ?? []);\n\n\t\t// Update option without destroying chart — on a new option, and on a theme change.\n\t\tReact.useEffect(() => {\n\t\t\tif (instanceRef.current) {\n\t\t\t\tconst themed = withThemeDefaults(createThemedChartOption(option, seriesThemesRef.current));\n\t\t\t\tinstanceRef.current.setOption(themed, {notMerge: false, lazyUpdate: true});\n\t\t\t}\n\t\t}, [option, seriesThemesKey, themeVersion]);\n\n\t\t// Merge refs\n\t\tReact.useImperativeHandle(ref, () => chartRef.current!, []);\n\n\t\tconst chartStyle: React.CSSProperties = {\n\t\t\t...style,\n\t\t\theight: height ?? style?.height ?? 300,\n\t\t\twidth: \"100%\",\n\t\t};\n\n\t\tconst canvas = <div ref={chartRef} style={chartStyle} />;\n\n\t\tif (title === undefined) {\n\t\t\treturn <div className={className}>{canvas}</div>;\n\t\t}\n\n\t\treturn (\n\t\t\t<WidgetCard className={className}>\n\t\t\t\t<WidgetCardHeader>\n\t\t\t\t\t<WidgetCardTitle>{title}</WidgetCardTitle>\n\t\t\t\t\t{actions && <WidgetCardActions>{actions}</WidgetCardActions>}\n\t\t\t\t</WidgetCardHeader>\n\t\t\t\t<WidgetCardBody>\n\t\t\t\t\t{value !== undefined && <div className=\"wwc:text-3xl wwc:font-semibold wwc:tracking-tight\">{value}</div>}\n\t\t\t\t\t{canvas}\n\t\t\t\t</WidgetCardBody>\n\t\t\t</WidgetCard>\n\t\t);\n\t},\n);\nChartContainer.displayName = \"ChartContainer\";\n\nexport {ChartContainer};\n"],"mappings":"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"}

package/dist/chat/core-ai-chat-header.d.mts

@@ -0,0 +1,95 @@
+import * as React from "react";
+//#region src/chat/core-ai-chat-header.d.ts
+export type AIChatHeaderVariant = "header" | "toolbar";
+export interface AIChatModel {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  description?: string;
+}
+export interface AIChatMode {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  description?: string;
+}
+export interface AIChatHeaderAction {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  onSelect: () => void;
+  disabled?: boolean;
+  tone?: "default" | "destructive";
+}
+export interface AIChatHeaderContext {
+  /** Primary usage line, e.g. "Context used: 0.2%" or "12k / 200k tokens". */
+  usage?: React.ReactNode;
+  /** Background process line — automatically prefixed with a small spinner. */
+  status?: React.ReactNode;
+}
+export interface AIChatHeaderProps {
+  /**
+   * Layout variant.
+   * - `"toolbar"` (default): left pane toggle + context (usage + spinner status) on the left.
+   *   Right cluster leads with a hamburger overflow when more than `maxVisibleActions` actions
+   *   (or any `menuActions`) are passed.
+   * - `"header"`: model/mode dropdowns on the left. Right cluster trails with a kebab for `menuActions`.
+   */
+  variant?: AIChatHeaderVariant;
+  /** When provided, renders the left pane toggle button. */
+  onTogglePane?: () => void;
+  /** Current state of the left pane — flips the icon between PanelLeft / PanelLeftClose. */
+  paneOpen?: boolean;
+  /** aria-label for the pane toggle. Defaults to "Toggle side panel". */
+  paneToggleLabel?: string;
+  /** Context block rendered between the pane toggle and the action cluster. */
+  context?: AIChatHeaderContext;
+  models?: AIChatModel[];
+  selectedModelId?: string;
+  onSelectModel?: (id: string) => void;
+  modes?: AIChatMode[];
+  selectedModeId?: string;
+  onSelectMode?: (id: string) => void;
+  /**
+   * When set, the left cluster collapses to a back button plus `backTitle`, hiding the variant's
+   * own left content. Used for drill-ins like the history list, so returning restores the view
+   * underneath untouched.
+   */
+  onBack?: () => void;
+  /** Title shown next to the back button. */
+  backTitle?: React.ReactNode;
+  /** aria-label for the back button. Defaults to "Back". */
+  backLabel?: string;
+  /**
+   * Conversation name shown in the header. Pass it (even as `""`) to render the name slot;
+   * omit it to leave the header as it was. With `onSessionNameChange` it becomes click-to-edit.
+   */
+  sessionName?: string;
+  /** Commit handler for the edited name. Omit to render the name as static text. */
+  onSessionNameChange?: (next: string) => void;
+  /** Shown when `sessionName` is empty — the untitled state. Defaults to "New chat". */
+  sessionNamePlaceholder?: string;
+  /** aria-label for the rename control. Defaults to "Rename chat". */
+  sessionNameLabel?: string;
+  /** Right-side icon-button actions. Defaults: toolbar caps at 4; header has no cap. */
+  actions?: AIChatHeaderAction[];
+  /** Cap on directly-rendered actions before overflow kicks in. Overrides the variant default. */
+  maxVisibleActions?: number;
+  /** Additional actions hidden behind the overflow menu. */
+  menuActions?: AIChatHeaderAction[];
+  /** aria-label for the overflow trigger. Defaults to "More actions". */
+  menuLabel?: string;
+  /** Slot rendered after the variant's left content. */
+  leftExtra?: React.ReactNode;
+  /** Slot rendered before the right action cluster. */
+  rightExtra?: React.ReactNode;
+  className?: string;
+}
+/**
+ * Bar above the AI chat conversation. Two variants share the same right-side action cluster:
+ *   - `toolbar` (default) — pane toggle + context info on the left, hamburger-led overflow on the right.
+ *   - `header`             — model/mode dropdowns on the left, kebab-trailing overflow on the right.
+ */
+export declare function AIChatHeader({ variant, onTogglePane, paneOpen, paneToggleLabel, context, models, selectedModelId, onSelectModel, modes, selectedModeId, onSelectMode, onBack, backTitle, backLabel, sessionName, onSessionNameChange, sessionNamePlaceholder, sessionNameLabel, actions, maxVisibleActions, menuActions, menuLabel, leftExtra, rightExtra, className }: AIChatHeaderProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=core-ai-chat-header.d.mts.map

package/dist/chat/core-ai-chat-header.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-ai-chat-header.d.mts","names":[],"sources":["../../src/chat/core-ai-chat-header.tsx"],"mappings":";;YAQY;iBAEK;EAChB;EACA;EACA,OAAO,MAAM;EACb;;iBAGgB;EAChB;EACA;EACA,OAAO,MAAM;EACb;;iBAGgB;EAChB;EACA;EACA,MAAM,MAAM;EACZ;EACA;EACA;;iBAGgB;;EAEhB,QAAQ,MAAM;;EAEd,SAAS,MAAM;;iBAGC;;;;;;;;EAQhB,UAAU;;EAIV;;EAEA;;EAEA;;EAEA,UAAU;EAGV,SAAS;EACT;EACA,iBAAiB;EACjB,QAAQ;EACR;EACA,gBAAgB;;;;;;EAQhB;;EAEA,YAAY,MAAM;;EAElB;;;;;EAOA;;EAEA,uBAAuB;;EAEvB;;EAEA;;EAEA,UAAU;;EAEV;;EAEA,cAAc;;EAEd;;EAEA,YAAY,MAAM;;EAElB,aAAa,MAAM;EAEnB;;;;;;;wBAQe,eACf,SACA,cACA,UACA,iBACA,SACA,QACA,iBACA,eACA,OACA,gBACA,cACA,QACA,WACA,WACA,aACA,qBACA,wBACA,kBACA,SACA,mBACA,aACA,WACA,WACA,YACA,aACE,gDAAiB,IAAA"}

package/dist/chat/core-ai-chat-header.mjs

@@ -0,0 +1,237 @@
+import { HoverTooltip } from "../tooltip.mjs";
+import { Button } from "../button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ArrowLeft, Loader2, Menu, MoreVertical, PanelLeft, PanelLeftClose } from "lucide-react";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/core-ai-chat-header.tsx
+/**
+* Bar above the AI chat conversation. Two variants share the same right-side action cluster:
+*   - `toolbar` (default) — pane toggle + context info on the left, hamburger-led overflow on the right.
+*   - `header`             — model/mode dropdowns on the left, kebab-trailing overflow on the right.
+*/
+function AIChatHeader({ variant = "toolbar", onTogglePane, paneOpen, paneToggleLabel = "Toggle side panel", context, models, selectedModelId, onSelectModel, modes, selectedModeId, onSelectMode, onBack, backTitle, backLabel = "Back", sessionName, onSessionNameChange, sessionNamePlaceholder = "New chat", sessionNameLabel = "Rename chat", actions, maxVisibleActions, menuActions, menuLabel = "More actions", leftExtra, rightExtra, className }) {
+	const isToolbar = variant === "toolbar";
+	const effectiveCap = maxVisibleActions ?? (isToolbar ? 4 : Number.POSITIVE_INFINITY);
+	const allActions = actions ?? [];
+	const visibleActions = allActions.slice(0, effectiveCap);
+	const combinedMenuActions = [...allActions.slice(effectiveCap), ...menuActions ?? []];
+	const hasOverflow = combinedMenuActions.length > 0;
+	const OverflowIcon = isToolbar ? Menu : MoreVertical;
+	const showModelDropdown = models !== void 0 && models.length > 0 && onSelectModel !== void 0;
+	const showModeDropdown = modes !== void 0 && modes.length > 0 && onSelectMode !== void 0;
+	const selectedModel = showModelDropdown ? models.find((m) => m.id === selectedModelId) ?? models[0] : void 0;
+	const selectedMode = showModeDropdown ? modes.find((m) => m.id === selectedModeId) ?? modes[0] : void 0;
+	const hasUsage = context?.usage !== void 0;
+	const hasStatus = context?.status !== void 0;
+	const hasContext = hasUsage || hasStatus;
+	const hasPaneToggle = onTogglePane !== void 0;
+	const showSessionName = sessionName !== void 0;
+	const canRename = showSessionName && onSessionNameChange !== void 0;
+	const [isRenaming, setIsRenaming] = React.useState(false);
+	const [draft, setDraft] = React.useState(sessionName ?? "");
+	const renameInputRef = React.useRef(null);
+	React.useEffect(() => {
+		if (!isRenaming) setDraft(sessionName ?? "");
+	}, [sessionName, isRenaming]);
+	React.useEffect(() => {
+		if (isRenaming) renameInputRef.current?.select();
+	}, [isRenaming]);
+	const commitRename = () => {
+		const next = draft.trim();
+		setIsRenaming(false);
+		if (next !== (sessionName ?? "")) onSessionNameChange?.(next);
+	};
+	const cancelRename = () => {
+		setDraft(sessionName ?? "");
+		setIsRenaming(false);
+	};
+	const sessionNameNode = !showSessionName ? null : isRenaming ? /* @__PURE__ */ jsx("input", {
+		ref: renameInputRef,
+		value: draft,
+		autoFocus: true,
+		"aria-label": sessionNameLabel,
+		placeholder: sessionNamePlaceholder,
+		onChange: (e) => setDraft(e.target.value),
+		onBlur: commitRename,
+		onKeyDown: (e) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				commitRename();
+			} else if (e.key === "Escape") {
+				e.preventDefault();
+				cancelRename();
+			}
+		},
+		size: Math.max(8, Math.min((draft || sessionNamePlaceholder).length, 28)),
+		className: "wwc:min-w-0 wwc:max-w-44 wwc:rounded wwc:border wwc:border-input wwc:bg-background wwc:px-1.5 wwc:py-0.5 wwc:text-sm wwc:font-medium wwc:text-foreground wwc:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring"
+	}) : canRename ? /* @__PURE__ */ jsx(HoverTooltip, {
+		content: sessionNameLabel,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setIsRenaming(true),
+			"aria-label": sessionNameLabel,
+			className: cn("wwc:min-w-0 wwc:max-w-44 wwc:truncate wwc:rounded wwc:px-1.5 wwc:py-0.5 wwc:text-sm wwc:font-medium wwc:transition-colors wwc:hover:bg-muted wwc:focus-visible:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring", sessionName ? "wwc:text-foreground" : "wwc:text-muted-foreground"),
+			children: sessionName || sessionNamePlaceholder
+		})
+	}) : /* @__PURE__ */ jsx("span", {
+		className: cn("wwc:min-w-0 wwc:max-w-44 wwc:truncate wwc:px-1.5 wwc:text-sm wwc:font-medium", sessionName ? "wwc:text-foreground" : "wwc:text-muted-foreground"),
+		children: sessionName || sessionNamePlaceholder
+	});
+	const overflowMenu = hasOverflow ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(HoverTooltip, {
+		content: menuLabel,
+		children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				icon: true,
+				"aria-label": menuLabel,
+				children: /* @__PURE__ */ jsx(OverflowIcon, {})
+			})
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		className: "wwc:min-w-40",
+		children: combinedMenuActions.map((action) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onSelect: action.onSelect,
+			disabled: action.disabled,
+			className: cn("wwc:gap-2 wwc:[&_svg]:h-3.5 wwc:[&_svg]:w-3.5 wwc:[&_svg]:shrink-0", action.tone === "destructive" && "wwc:text-destructive wwc:focus:text-destructive wwc:focus:bg-destructive/10"),
+			children: [action.icon, /* @__PURE__ */ jsx("span", { children: action.label })]
+		}, action.id))
+	})] }) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:min-h-12 wwc:w-full wwc:items-center wwc:justify-between wwc:gap-3 wwc:border-b wwc:bg-card wwc:px-2 wwc:py-1.5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-center wwc:gap-2",
+			children: [onBack !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HoverTooltip, {
+				content: backLabel,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					icon: true,
+					onClick: onBack,
+					"aria-label": backLabel,
+					className: "wwc:flex-shrink-0",
+					children: /* @__PURE__ */ jsx(ArrowLeft, {})
+				})
+			}), backTitle !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "wwc:min-w-0 wwc:truncate wwc:text-sm wwc:font-medium wwc:text-foreground",
+				children: backTitle
+			})] }) : isToolbar ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				hasPaneToggle && /* @__PURE__ */ jsx(HoverTooltip, {
+					content: paneToggleLabel,
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						icon: true,
+						onClick: onTogglePane,
+						"aria-label": paneToggleLabel,
+						"aria-pressed": paneOpen,
+						className: "wwc:flex-shrink-0 wwc:text-primary",
+						children: paneOpen ? /* @__PURE__ */ jsx(PanelLeftClose, {}) : /* @__PURE__ */ jsx(PanelLeft, {})
+					})
+				}),
+				sessionNameNode,
+				hasContext && /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:min-w-0 wwc:flex-col wwc:gap-0.5 wwc:text-xs wwc:text-muted-foreground",
+					children: [hasUsage && /* @__PURE__ */ jsx("div", {
+						className: "wwc:truncate wwc:leading-tight",
+						children: context.usage
+					}), hasStatus && /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-1.5 wwc:truncate wwc:leading-tight",
+						children: [/* @__PURE__ */ jsx(Loader2, { className: "wwc:h-3 wwc:w-3 wwc:flex-shrink-0 wwc:animate-spin wwc:text-primary" }), /* @__PURE__ */ jsx("span", {
+							className: "wwc:truncate",
+							children: context.status
+						})]
+					})]
+				})
+			] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				sessionNameNode,
+				showModelDropdown && selectedModel && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						className: "wwc:gap-1.5 wwc:px-2",
+						children: [selectedModel.icon, /* @__PURE__ */ jsx("span", {
+							className: "wwc:font-medium",
+							children: selectedModel.label
+						})]
+					})
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					align: "start",
+					className: "wwc:min-w-44",
+					children: models.map((model) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onSelect: () => onSelectModel?.(model.id),
+						className: cn("wwc:gap-2 wwc:[&_svg]:h-3.5 wwc:[&_svg]:w-3.5 wwc:[&_svg]:shrink-0", model.id === selectedModel.id && "wwc:bg-accent"),
+						children: [model.icon, /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:flex-col",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "wwc:font-medium",
+								children: model.label
+							}), model.description && /* @__PURE__ */ jsx("span", {
+								className: "wwc:text-[11px] wwc:text-muted-foreground",
+								children: model.description
+							})]
+						})]
+					}, model.id))
+				})] }),
+				showModeDropdown && selectedMode && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						className: "wwc:gap-1.5 wwc:px-2",
+						children: [selectedMode.icon, /* @__PURE__ */ jsx("span", {
+							className: "wwc:font-medium",
+							children: selectedMode.label
+						})]
+					})
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					align: "start",
+					className: "wwc:min-w-40",
+					children: modes.map((mode) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onSelect: () => onSelectMode?.(mode.id),
+						className: cn("wwc:gap-2 wwc:[&_svg]:h-3.5 wwc:[&_svg]:w-3.5 wwc:[&_svg]:shrink-0", mode.id === selectedMode.id && "wwc:bg-accent"),
+						children: [mode.icon, /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:flex-col",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "wwc:font-medium",
+								children: mode.label
+							}), mode.description && /* @__PURE__ */ jsx("span", {
+								className: "wwc:text-[11px] wwc:text-muted-foreground",
+								children: mode.description
+							})]
+						})]
+					}, mode.id))
+				})] })
+			] }), leftExtra]
+		}), (rightExtra !== void 0 || visibleActions.length > 0 || hasOverflow) && /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:flex-shrink-0 wwc:items-center wwc:gap-0.5",
+			children: [
+				rightExtra,
+				isToolbar && overflowMenu,
+				visibleActions.map((action) => /* @__PURE__ */ jsx(HoverTooltip, {
+					content: action.label,
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						icon: true,
+						onClick: action.onSelect,
+						disabled: action.disabled,
+						"aria-label": action.label,
+						className: cn(action.tone === "destructive" && "wwc:text-destructive wwc:hover:text-destructive"),
+						children: action.icon
+					})
+				}, action.id)),
+				!isToolbar && overflowMenu
+			]
+		})]
+	});
+}
+//#endregion
+export { AIChatHeader };
+
+//# sourceMappingURL=core-ai-chat-header.mjs.map

package/dist/chat/core-ai-chat-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-ai-chat-header.mjs","names":[],"sources":["../../src/chat/core-ai-chat-header.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ArrowLeft, Loader2, Menu, MoreVertical, PanelLeft, PanelLeftClose} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"../button\";\nimport {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from \"../dropdown-menu\";\nimport {HoverTooltip} from \"../tooltip\";\n\nexport type AIChatHeaderVariant = \"header\" | \"toolbar\";\n\nexport interface AIChatModel {\n\tid: string;\n\tlabel: string;\n\ticon?: React.ReactNode;\n\tdescription?: string;\n}\n\nexport interface AIChatMode {\n\tid: string;\n\tlabel: string;\n\ticon?: React.ReactNode;\n\tdescription?: string;\n}\n\nexport interface AIChatHeaderAction {\n\tid: string;\n\tlabel: string;\n\ticon: React.ReactNode;\n\tonSelect: () => void;\n\tdisabled?: boolean;\n\ttone?: \"default\" | \"destructive\";\n}\n\nexport interface AIChatHeaderContext {\n\t/** Primary usage line, e.g. \"Context used: 0.2%\" or \"12k / 200k tokens\". */\n\tusage?: React.ReactNode;\n\t/** Background process line — automatically prefixed with a small spinner. */\n\tstatus?: React.ReactNode;\n}\n\nexport interface AIChatHeaderProps {\n\t/**\n\t * Layout variant.\n\t * - `\"toolbar\"` (default): left pane toggle + context (usage + spinner status) on the left.\n\t *   Right cluster leads with a hamburger overflow when more than `maxVisibleActions` actions\n\t *   (or any `menuActions`) are passed.\n\t * - `\"header\"`: model/mode dropdowns on the left. Right cluster trails with a kebab for `menuActions`.\n\t */\n\tvariant?: AIChatHeaderVariant;\n\n\t// --- toolbar variant ---\n\t/** When provided, renders the left pane toggle button. */\n\tonTogglePane?: () => void;\n\t/** Current state of the left pane — flips the icon between PanelLeft / PanelLeftClose. */\n\tpaneOpen?: boolean;\n\t/** aria-label for the pane toggle. Defaults to \"Toggle side panel\". */\n\tpaneToggleLabel?: string;\n\t/** Context block rendered between the pane toggle and the action cluster. */\n\tcontext?: AIChatHeaderContext;\n\n\t// --- header variant ---\n\tmodels?: AIChatModel[];\n\tselectedModelId?: string;\n\tonSelectModel?: (id: string) => void;\n\tmodes?: AIChatMode[];\n\tselectedModeId?: string;\n\tonSelectMode?: (id: string) => void;\n\n\t// --- back mode ---\n\t/**\n\t * When set, the left cluster collapses to a back button plus `backTitle`, hiding the variant's\n\t * own left content. Used for drill-ins like the history list, so returning restores the view\n\t * underneath untouched.\n\t */\n\tonBack?: () => void;\n\t/** Title shown next to the back button. */\n\tbackTitle?: React.ReactNode;\n\t/** aria-label for the back button. Defaults to \"Back\". */\n\tbackLabel?: string;\n\n\t// --- shared ---\n\t/**\n\t * Conversation name shown in the header. Pass it (even as `\"\"`) to render the name slot;\n\t * omit it to leave the header as it was. With `onSessionNameChange` it becomes click-to-edit.\n\t */\n\tsessionName?: string;\n\t/** Commit handler for the edited name. Omit to render the name as static text. */\n\tonSessionNameChange?: (next: string) => void;\n\t/** Shown when `sessionName` is empty — the untitled state. Defaults to \"New chat\". */\n\tsessionNamePlaceholder?: string;\n\t/** aria-label for the rename control. Defaults to \"Rename chat\". */\n\tsessionNameLabel?: string;\n\t/** Right-side icon-button actions. Defaults: toolbar caps at 4; header has no cap. */\n\tactions?: AIChatHeaderAction[];\n\t/** Cap on directly-rendered actions before overflow kicks in. Overrides the variant default. */\n\tmaxVisibleActions?: number;\n\t/** Additional actions hidden behind the overflow menu. */\n\tmenuActions?: AIChatHeaderAction[];\n\t/** aria-label for the overflow trigger. Defaults to \"More actions\". */\n\tmenuLabel?: string;\n\t/** Slot rendered after the variant's left content. */\n\tleftExtra?: React.ReactNode;\n\t/** Slot rendered before the right action cluster. */\n\trightExtra?: React.ReactNode;\n\n\tclassName?: string;\n}\n\n/**\n * Bar above the AI chat conversation. Two variants share the same right-side action cluster:\n *   - `toolbar` (default) — pane toggle + context info on the left, hamburger-led overflow on the right.\n *   - `header`             — model/mode dropdowns on the left, kebab-trailing overflow on the right.\n */\nexport function AIChatHeader({\n\tvariant = \"toolbar\",\n\tonTogglePane,\n\tpaneOpen,\n\tpaneToggleLabel = \"Toggle side panel\",\n\tcontext,\n\tmodels,\n\tselectedModelId,\n\tonSelectModel,\n\tmodes,\n\tselectedModeId,\n\tonSelectMode,\n\tonBack,\n\tbackTitle,\n\tbackLabel = \"Back\",\n\tsessionName,\n\tonSessionNameChange,\n\tsessionNamePlaceholder = \"New chat\",\n\tsessionNameLabel = \"Rename chat\",\n\tactions,\n\tmaxVisibleActions,\n\tmenuActions,\n\tmenuLabel = \"More actions\",\n\tleftExtra,\n\trightExtra,\n\tclassName,\n}: AIChatHeaderProps) {\n\tconst isToolbar = variant === \"toolbar\";\n\n\t// Toolbar caps at 4 by default; header has no cap.\n\tconst effectiveCap = maxVisibleActions ?? (isToolbar ? 4 : Number.POSITIVE_INFINITY);\n\tconst allActions = actions ?? [];\n\tconst visibleActions = allActions.slice(0, effectiveCap);\n\tconst overflowedActions = allActions.slice(effectiveCap);\n\tconst combinedMenuActions = [...overflowedActions, ...(menuActions ?? [])];\n\tconst hasOverflow = combinedMenuActions.length > 0;\n\tconst OverflowIcon = isToolbar ? Menu : MoreVertical;\n\n\tconst showModelDropdown = models !== undefined && models.length > 0 && onSelectModel !== undefined;\n\tconst showModeDropdown = modes !== undefined && modes.length > 0 && onSelectMode !== undefined;\n\tconst selectedModel = showModelDropdown ? (models.find((m) => m.id === selectedModelId) ?? models[0]) : undefined;\n\tconst selectedMode = showModeDropdown ? (modes.find((m) => m.id === selectedModeId) ?? modes[0]) : undefined;\n\n\tconst hasUsage = context?.usage !== undefined;\n\tconst hasStatus = context?.status !== undefined;\n\tconst hasContext = hasUsage || hasStatus;\n\tconst hasPaneToggle = onTogglePane !== undefined;\n\n\tconst showSessionName = sessionName !== undefined;\n\tconst canRename = showSessionName && onSessionNameChange !== undefined;\n\tconst [isRenaming, setIsRenaming] = React.useState(false);\n\tconst [draft, setDraft] = React.useState(sessionName ?? \"\");\n\tconst renameInputRef = React.useRef<HTMLInputElement>(null);\n\n\t// Re-seed the draft whenever the committed name changes underneath us — the name is expected to be\n\t// set from the conversation itself, which can land while the field is untouched.\n\tReact.useEffect(() => {\n\t\tif (!isRenaming) setDraft(sessionName ?? \"\");\n\t}, [sessionName, isRenaming]);\n\n\tReact.useEffect(() => {\n\t\tif (isRenaming) renameInputRef.current?.select();\n\t}, [isRenaming]);\n\n\tconst commitRename = () => {\n\t\tconst next = draft.trim();\n\t\tsetIsRenaming(false);\n\t\tif (next !== (sessionName ?? \"\")) onSessionNameChange?.(next);\n\t};\n\n\tconst cancelRename = () => {\n\t\tsetDraft(sessionName ?? \"\");\n\t\tsetIsRenaming(false);\n\t};\n\n\tconst sessionNameNode = !showSessionName ? null : isRenaming ? (\n\t\t<input\n\t\t\tref={renameInputRef}\n\t\t\tvalue={draft}\n\t\t\tautoFocus\n\t\t\taria-label={sessionNameLabel}\n\t\t\tplaceholder={sessionNamePlaceholder}\n\t\t\tonChange={(e) => setDraft(e.target.value)}\n\t\t\tonBlur={commitRename}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif (e.key === \"Enter\") {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tcommitRename();\n\t\t\t\t} else if (e.key === \"Escape\") {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tcancelRename();\n\t\t\t\t}\n\t\t\t}}\n\t\t\t// Sized to its own text rather than `flex-1` or a fixed width: either would shove the model/mode\n\t\t\t// dropdowns sideways the moment the field opens.\n\t\t\tsize={Math.max(8, Math.min((draft || sessionNamePlaceholder).length, 28))}\n\t\t\tclassName=\"wwc:min-w-0 wwc:max-w-44 wwc:rounded wwc:border wwc:border-input wwc:bg-background wwc:px-1.5 wwc:py-0.5 wwc:text-sm wwc:font-medium wwc:text-foreground wwc:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring\"\n\t\t/>\n\t) : canRename ? (\n\t\t<HoverTooltip content={sessionNameLabel}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={() => setIsRenaming(true)}\n\t\t\t\taria-label={sessionNameLabel}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:min-w-0 wwc:max-w-44 wwc:truncate wwc:rounded wwc:px-1.5 wwc:py-0.5 wwc:text-sm wwc:font-medium wwc:transition-colors wwc:hover:bg-muted wwc:focus-visible:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring\",\n\t\t\t\t\tsessionName ? \"wwc:text-foreground\" : \"wwc:text-muted-foreground\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{sessionName || sessionNamePlaceholder}\n\t\t\t</button>\n\t\t</HoverTooltip>\n\t) : (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:min-w-0 wwc:max-w-44 wwc:truncate wwc:px-1.5 wwc:text-sm wwc:font-medium\",\n\t\t\t\tsessionName ? \"wwc:text-foreground\" : \"wwc:text-muted-foreground\",\n\t\t\t)}\n\t\t>\n\t\t\t{sessionName || sessionNamePlaceholder}\n\t\t</span>\n\t);\n\n\tconst overflowMenu = hasOverflow ? (\n\t\t<DropdownMenu>\n\t\t\t<HoverTooltip content={menuLabel}>\n\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t<Button type=\"button\" variant=\"ghost\" icon aria-label={menuLabel}>\n\t\t\t\t\t\t<OverflowIcon />\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownMenuTrigger>\n\t\t\t</HoverTooltip>\n\t\t\t<DropdownMenuContent align=\"end\" className=\"wwc:min-w-40\">\n\t\t\t\t{combinedMenuActions.map((action) => (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={action.id}\n\t\t\t\t\t\tonSelect={action.onSelect}\n\t\t\t\t\t\tdisabled={action.disabled}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:gap-2 wwc:[&_svg]:h-3.5 wwc:[&_svg]:w-3.5 wwc:[&_svg]:shrink-0\",\n\t\t\t\t\t\t\taction.tone === \"destructive\" &&\n\t\t\t\t\t\t\t\t\"wwc:text-destructive wwc:focus:text-destructive wwc:focus:bg-destructive/10\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{action.icon}\n\t\t\t\t\t\t<span>{action.label}</span>\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t))}\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t) : null;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:flex wwc:min-h-12 wwc:w-full wwc:items-center wwc:justify-between wwc:gap-3 wwc:border-b wwc:bg-card wwc:px-2 wwc:py-1.5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-center wwc:gap-2\">\n\t\t\t\t{onBack !== undefined ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<HoverTooltip content={backLabel}>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\tonClick={onBack}\n\t\t\t\t\t\t\t\taria-label={backLabel}\n\t\t\t\t\t\t\t\tclassName=\"wwc:flex-shrink-0\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ArrowLeft />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</HoverTooltip>\n\t\t\t\t\t\t{backTitle !== undefined && (\n\t\t\t\t\t\t\t<span className=\"wwc:min-w-0 wwc:truncate wwc:text-sm wwc:font-medium wwc:text-foreground\">\n\t\t\t\t\t\t\t\t{backTitle}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t) : isToolbar ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{hasPaneToggle && (\n\t\t\t\t\t\t\t<HoverTooltip content={paneToggleLabel}>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\t\tonClick={onTogglePane}\n\t\t\t\t\t\t\t\t\taria-label={paneToggleLabel}\n\t\t\t\t\t\t\t\t\taria-pressed={paneOpen}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:flex-shrink-0 wwc:text-primary\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{paneOpen ? <PanelLeftClose /> : <PanelLeft />}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</HoverTooltip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{sessionNameNode}\n\t\t\t\t\t\t{hasContext && (\n\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:flex-col wwc:gap-0.5 wwc:text-xs wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t{hasUsage && <div className=\"wwc:truncate wwc:leading-tight\">{context!.usage}</div>}\n\t\t\t\t\t\t\t\t{hasStatus && (\n\t\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-1.5 wwc:truncate wwc:leading-tight\">\n\t\t\t\t\t\t\t\t\t\t<Loader2 className=\"wwc:h-3 wwc:w-3 wwc:flex-shrink-0 wwc:animate-spin wwc:text-primary\" />\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:truncate\">{context!.status}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{sessionNameNode}\n\t\t\t\t\t\t{showModelDropdown && selectedModel && (\n\t\t\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" className=\"wwc:gap-1.5 wwc:px-2\">\n\t\t\t\t\t\t\t\t\t\t{selectedModel.icon}\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:font-medium\">{selectedModel.label}</span>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t\t\t\t\t<DropdownMenuContent align=\"start\" className=\"wwc:min-w-44\">\n\t\t\t\t\t\t\t\t\t{models!.map((model) => (\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\t\tkey={model.id}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={() => onSelectModel?.(model.id)}\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"wwc:gap-2 wwc:[&_svg]:h-3.5 wwc:[&_svg]:w-3.5 wwc:[&_svg]:shrink-0\",\n\t\t\t\t\t\t\t\t\t\t\t\tmodel.id === selectedModel.id && \"wwc:bg-accent\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{model.icon}\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-col\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:font-medium\">{model.label}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{model.description && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:text-[11px] wwc:text-muted-foreground\">{model.description}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{showModeDropdown && selectedMode && (\n\t\t\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" className=\"wwc:gap-1.5 wwc:px-2\">\n\t\t\t\t\t\t\t\t\t\t{selectedMode.icon}\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:font-medium\">{selectedMode.label}</span>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t\t\t\t\t<DropdownMenuContent align=\"start\" className=\"wwc:min-w-40\">\n\t\t\t\t\t\t\t\t\t{modes!.map((mode) => (\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\t\tkey={mode.id}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={() => onSelectMode?.(mode.id)}\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"wwc:gap-2 wwc:[&_svg]:h-3.5 wwc:[&_svg]:w-3.5 wwc:[&_svg]:shrink-0\",\n\t\t\t\t\t\t\t\t\t\t\t\tmode.id === selectedMode.id && \"wwc:bg-accent\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{mode.icon}\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-col\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:font-medium\">{mode.label}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{mode.description && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:text-[11px] wwc:text-muted-foreground\">{mode.description}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{leftExtra}\n\t\t\t</div>\n\n\t\t\t{(rightExtra !== undefined || visibleActions.length > 0 || hasOverflow) && (\n\t\t\t\t<div className=\"wwc:flex wwc:flex-shrink-0 wwc:items-center wwc:gap-0.5\">\n\t\t\t\t\t{rightExtra}\n\t\t\t\t\t{/* Toolbar: overflow leads. Header: overflow trails. */}\n\t\t\t\t\t{isToolbar && overflowMenu}\n\t\t\t\t\t{visibleActions.map((action) => (\n\t\t\t\t\t\t<HoverTooltip key={action.id} content={action.label}>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\tonClick={action.onSelect}\n\t\t\t\t\t\t\t\tdisabled={action.disabled}\n\t\t\t\t\t\t\t\taria-label={action.label}\n\t\t\t\t\t\t\t\tclassName={cn(action.tone === \"destructive\" && \"wwc:text-destructive wwc:hover:text-destructive\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{action.icon}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</HoverTooltip>\n\t\t\t\t\t))}\n\t\t\t\t\t{!isToolbar && overflowMenu}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;AAiHA,SAAgB,aAAa,EAC5B,UAAU,WACV,cACA,UACA,kBAAkB,qBAClB,SACA,QACA,iBACA,eACA,OACA,gBACA,cACA,QACA,WACA,YAAY,QACZ,aACA,qBACA,yBAAyB,YACzB,mBAAmB,eACnB,SACA,mBACA,aACA,YAAY,gBACZ,WACA,YACA,aACqB;CACrB,MAAM,YAAY,YAAY;CAG9B,MAAM,eAAe,sBAAsB,YAAY,IAAI,OAAO;CAClE,MAAM,aAAa,WAAW,CAAC;CAC/B,MAAM,iBAAiB,WAAW,MAAM,GAAG,YAAY;CAEvD,MAAM,sBAAsB,CAAC,GADH,WAAW,MAAM,YACK,GAAG,GAAI,eAAe,CAAC,CAAE;CACzE,MAAM,cAAc,oBAAoB,SAAS;CACjD,MAAM,eAAe,YAAY,OAAO;CAExC,MAAM,oBAAoB,WAAW,KAAA,KAAa,OAAO,SAAS,KAAK,kBAAkB,KAAA;CACzF,MAAM,mBAAmB,UAAU,KAAA,KAAa,MAAM,SAAS,KAAK,iBAAiB,KAAA;CACrF,MAAM,gBAAgB,oBAAqB,OAAO,MAAM,MAAM,EAAE,OAAO,eAAe,KAAK,OAAO,KAAM,KAAA;CACxG,MAAM,eAAe,mBAAoB,MAAM,MAAM,MAAM,EAAE,OAAO,cAAc,KAAK,MAAM,KAAM,KAAA;CAEnG,MAAM,WAAW,SAAS,UAAU,KAAA;CACpC,MAAM,YAAY,SAAS,WAAW,KAAA;CACtC,MAAM,aAAa,YAAY;CAC/B,MAAM,gBAAgB,iBAAiB,KAAA;CAEvC,MAAM,kBAAkB,gBAAgB,KAAA;CACxC,MAAM,YAAY,mBAAmB,wBAAwB,KAAA;CAC7D,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,eAAe,EAAE;CAC1D,MAAM,iBAAiB,MAAM,OAAyB,IAAI;CAI1D,MAAM,gBAAgB;EACrB,IAAI,CAAC,YAAY,SAAS,eAAe,EAAE;CAC5C,GAAG,CAAC,aAAa,UAAU,CAAC;CAE5B,MAAM,gBAAgB;EACrB,IAAI,YAAY,eAAe,SAAS,OAAO;CAChD,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,qBAAqB;EAC1B,MAAM,OAAO,MAAM,KAAK;EACxB,cAAc,KAAK;EACnB,IAAI,UAAU,eAAe,KAAK,sBAAsB,IAAI;CAC7D;CAEA,MAAM,qBAAqB;EAC1B,SAAS,eAAe,EAAE;EAC1B,cAAc,KAAK;CACpB;CAEA,MAAM,kBAAkB,CAAC,kBAAkB,OAAO,aACjD,oBAAC,SAAD;EACC,KAAK;EACL,OAAO;EACP,WAAA;EACA,cAAY;EACZ,aAAa;EACb,WAAW,MAAM,SAAS,EAAE,OAAO,KAAK;EACxC,QAAQ;EACR,YAAY,MAAM;GACjB,IAAI,EAAE,QAAQ,SAAS;IACtB,EAAE,eAAe;IACjB,aAAa;GACd,OAAO,IAAI,EAAE,QAAQ,UAAU;IAC9B,EAAE,eAAe;IACjB,aAAa;GACd;EACD;EAGA,MAAM,KAAK,IAAI,GAAG,KAAK,KAAK,SAAS,uBAAA,CAAwB,QAAQ,EAAE,CAAC;EACxE,WAAU;CACV,CAAA,IACE,YACH,oBAAC,cAAD;EAAc,SAAS;EACtB,UAAA,oBAAC,UAAD;GACC,MAAK;GACL,eAAe,cAAc,IAAI;GACjC,cAAY;GACZ,WAAW,GACV,oOACA,cAAc,wBAAwB,2BACvC;GAEC,UAAA,eAAe;EACT,CAAA;CACK,CAAA,IAEd,oBAAC,QAAD;EACC,WAAW,GACV,gFACA,cAAc,wBAAwB,2BACvC;EAEC,UAAA,eAAe;CACX,CAAA;CAGP,MAAM,eAAe,cACpB,qBAAC,cAAD,EAAA,UAAA,CACC,oBAAC,cAAD;EAAc,SAAS;EACtB,UAAA,oBAAC,qBAAD;GAAqB,SAAA;GACpB,UAAA,oBAAC,QAAD;IAAQ,MAAK;IAAS,SAAQ;IAAQ,MAAA;IAAK,cAAY;IACtD,UAAA,oBAAC,cAAD,CAAe,CAAA;GACR,CAAA;EACY,CAAA;CACR,CAAA,GACd,oBAAC,qBAAD;EAAqB,OAAM;EAAM,WAAU;EACzC,UAAA,oBAAoB,KAAK,WACzB,qBAAC,kBAAD;GAEC,UAAU,OAAO;GACjB,UAAU,OAAO;GACjB,WAAW,GACV,sEACA,OAAO,SAAS,iBACf,6EACF;GARD,UAAA,CAUE,OAAO,MACR,oBAAC,QAAD,EAAA,UAAO,OAAO,MAAY,CAAA,CACT;EAXZ,GAAA,OAAO,EAWK,CAClB;CACmB,CAAA,CACR,EAAA,CAAA,IACX;CAEJ,OACC,qBAAC,OAAD;EACC,WAAW,GACV,gIACA,SACD;EAJD,UAAA,CAMC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,WAAW,KAAA,IACX,qBAAA,YAAA,EAAA,UAAA,CACC,oBAAC,cAAD;IAAc,SAAS;IACtB,UAAA,oBAAC,QAAD;KACC,MAAK;KACL,SAAQ;KACR,MAAA;KACA,SAAS;KACT,cAAY;KACZ,WAAU;KAEV,UAAA,oBAAC,WAAD,CAAY,CAAA;IACL,CAAA;GACK,CAAA,GACb,cAAc,KAAA,KACd,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA;GACI,CAAA,CAEN,EAAA,CAAA,IACC,YACH,qBAAA,YAAA,EAAA,UAAA;IACE,iBACA,oBAAC,cAAD;KAAc,SAAS;KACtB,UAAA,oBAAC,QAAD;MACC,MAAK;MACL,SAAQ;MACR,MAAA;MACA,SAAS;MACT,cAAY;MACZ,gBAAc;MACd,WAAU;MAET,UAAA,WAAW,oBAAC,gBAAD,CAAiB,CAAA,IAAI,oBAAC,WAAD,CAAY,CAAA;KACtC,CAAA;IACK,CAAA;IAEd;IACA,cACA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,YAAY,oBAAC,OAAD;MAAK,WAAU;MAAkC,UAAA,QAAS;KAAW,CAAA,GACjF,aACA,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACC,oBAAC,SAAD,EAAS,WAAU,sEAAuE,CAAA,GAC1F,oBAAC,QAAD;OAAM,WAAU;OAAgB,UAAA,QAAS;MAAa,CAAA,CAClD;KAEF,CAAA,CAAA;;GAEL,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;IACE;IACA,qBAAqB,iBACrB,qBAAC,cAAD,EAAA,UAAA,CACC,oBAAC,qBAAD;KAAqB,SAAA;KACpB,UAAA,qBAAC,QAAD;MAAQ,SAAQ;MAAQ,MAAK;MAAK,WAAU;MAA5C,UAAA,CACE,cAAc,MACf,oBAAC,QAAD;OAAM,WAAU;OAAmB,UAAA,cAAc;MAAY,CAAA,CACtD;;IACY,CAAA,GACrB,oBAAC,qBAAD;KAAqB,OAAM;KAAQ,WAAU;KAC3C,UAAA,OAAQ,KAAK,UACb,qBAAC,kBAAD;MAEC,gBAAgB,gBAAgB,MAAM,EAAE;MACxC,WAAW,GACV,sEACA,MAAM,OAAO,cAAc,MAAM,eAClC;MAND,UAAA,CAQE,MAAM,MACP,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACC,oBAAC,QAAD;QAAM,WAAU;QAAmB,UAAA,MAAM;OAAY,CAAA,GACpD,MAAM,eACN,oBAAC,QAAD;QAAM,WAAU;QAA6C,UAAA,MAAM;OAAkB,CAAA,CAElF;MACY,CAAA,CAAA;KAdZ,GAAA,MAAM,EAcM,CAClB;IACmB,CAAA,CACR,EAAA,CAAA;IAEd,oBAAoB,gBACpB,qBAAC,cAAD,EAAA,UAAA,CACC,oBAAC,qBAAD;KAAqB,SAAA;KACpB,UAAA,qBAAC,QAAD;MAAQ,SAAQ;MAAQ,MAAK;MAAK,WAAU;MAA5C,UAAA,CACE,aAAa,MACd,oBAAC,QAAD;OAAM,WAAU;OAAmB,UAAA,aAAa;MAAY,CAAA,CACrD;;IACY,CAAA,GACrB,oBAAC,qBAAD;KAAqB,OAAM;KAAQ,WAAU;KAC3C,UAAA,MAAO,KAAK,SACZ,qBAAC,kBAAD;MAEC,gBAAgB,eAAe,KAAK,EAAE;MACtC,WAAW,GACV,sEACA,KAAK,OAAO,aAAa,MAAM,eAChC;MAND,UAAA,CAQE,KAAK,MACN,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACC,oBAAC,QAAD;QAAM,WAAU;QAAmB,UAAA,KAAK;OAAY,CAAA,GACnD,KAAK,eACL,oBAAC,QAAD;QAAM,WAAU;QAA6C,UAAA,KAAK;OAAkB,CAAA,CAEjF;MACY,CAAA,CAAA;KAdZ,GAAA,KAAK,EAcO,CAClB;IACmB,CAAA,CACR,EAAA,CAAA;GAEd,EAAA,CAAA,GAEF,SACG;EAEH,CAAA,IAAA,eAAe,KAAA,KAAa,eAAe,SAAS,KAAK,gBAC1D,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE;IAEA,aAAa;IACb,eAAe,KAAK,WACpB,oBAAC,cAAD;KAA8B,SAAS,OAAO;KAC7C,UAAA,oBAAC,QAAD;MACC,MAAK;MACL,SAAQ;MACR,MAAA;MACA,SAAS,OAAO;MAChB,UAAU,OAAO;MACjB,cAAY,OAAO;MACnB,WAAW,GAAG,OAAO,SAAS,iBAAiB,iDAAiD;MAE/F,UAAA,OAAO;KACD,CAAA;IACK,GAZK,OAAO,EAYZ,CACd;IACA,CAAC,aAAa;GACX;EAEF,CAAA,CAAA;;AAEP"}

package/dist/chat/core-ai-chat-message.d.mts

@@ -0,0 +1,18 @@
+import { Message } from "../types/chat.mjs";
+//#region src/chat/core-ai-chat-message.d.ts
+export interface AIChatMessageProps {
+  message: Message;
+}
+/**
+ * AI-style chat message:
+ * - User messages: small grey rounded pill, right-aligned
+ * - Assistant messages: full-width plain text/content, no bubble
+ * - No timestamps, no sender names
+ */
+export declare function AIChatMessage({ message }: AIChatMessageProps): import("react/jsx-runtime").JSX.Element;
+/** Three-dot typing indicator, full-width assistant style. */
+export declare function AIChatTypingIndicator({ className }: {
+  className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=core-ai-chat-message.d.mts.map

package/dist/chat/core-ai-chat-message.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-ai-chat-message.d.mts","names":[],"sources":["../../src/chat/core-ai-chat-message.tsx"],"mappings":";;iBAOiB;EAChB,SAAS;;;;;;;;wBASM,gBAAe,WAAU,iDAAkB,IAAA;;wBAiD3C,wBAAuB;EAAa;gCAAmB,IAAA"}

package/dist/chat/core-ai-chat-message.mjs

@@ -0,0 +1,82 @@
+import { Card, CardContent } from "../card.mjs";
+import { ChartRenderer } from "./core-chart-renderer.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { AtSign, Paperclip } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/core-ai-chat-message.tsx
+/**
+* AI-style chat message:
+* - User messages: small grey rounded pill, right-aligned
+* - Assistant messages: full-width plain text/content, no bubble
+* - No timestamps, no sender names
+*/
+function AIChatMessage({ message }) {
+	const isUser = message.role === "user";
+	const isChart = message.type === "chart";
+	const attachments = message.attachments ?? [];
+	if (isUser) return /* @__PURE__ */ jsx("div", {
+		className: "wwc:flex wwc:justify-end",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "wwc:max-w-[80%] wwc:rounded-2xl wwc:rounded-br-md wwc:bg-muted wwc:px-4 wwc:py-2 wwc:text-sm wwc:text-foreground",
+			children: [attachments.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "wwc:mb-1.5 wwc:flex wwc:flex-wrap wwc:justify-end wwc:gap-1",
+				children: attachments.map((attachment) => /* @__PURE__ */ jsxs("span", {
+					className: "wwc:inline-flex wwc:max-w-full wwc:items-center wwc:gap-1 wwc:rounded-md wwc:border wwc:bg-card wwc:px-1.5 wwc:py-0.5 wwc:text-xs wwc:text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:flex wwc:h-3 wwc:w-3 wwc:flex-shrink-0 wwc:items-center wwc:justify-center wwc:[&_svg]:h-3 wwc:[&_svg]:w-3",
+						children: attachment.icon ?? (attachment.type === "file" ? /* @__PURE__ */ jsx(Paperclip, {}) : /* @__PURE__ */ jsx(AtSign, {}))
+					}), /* @__PURE__ */ jsx("span", {
+						className: "wwc:truncate",
+						children: attachment.label
+					})]
+				}, attachment.id))
+			}), /* @__PURE__ */ jsx("p", {
+				className: "wwc:whitespace-pre-wrap wwc:leading-relaxed",
+				children: message.content
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "wwc:w-full",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "wwc:text-sm wwc:leading-relaxed wwc:text-foreground",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "wwc:whitespace-pre-wrap",
+				children: message.content
+			}), isChart && /* @__PURE__ */ jsx(Card, {
+				className: "wwc:mt-3 wwc:overflow-hidden",
+				children: /* @__PURE__ */ jsx(CardContent, {
+					className: "wwc:p-3",
+					children: /* @__PURE__ */ jsx(ChartRenderer, {
+						chartData: message.chartData,
+						height: 220
+					})
+				})
+			})]
+		})
+	});
+}
+/** Three-dot typing indicator, full-width assistant style. */
+function AIChatTypingIndicator({ className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:w-full wwc:items-center wwc:gap-1.5", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-muted-foreground/50 wwc:animate-bounce",
+				style: { animationDelay: "0ms" }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-muted-foreground/50 wwc:animate-bounce",
+				style: { animationDelay: "150ms" }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-muted-foreground/50 wwc:animate-bounce",
+				style: { animationDelay: "300ms" }
+			})
+		]
+	});
+}
+//#endregion
+export { AIChatMessage, AIChatTypingIndicator };
+
+//# sourceMappingURL=core-ai-chat-message.mjs.map

package/dist/chat/core-ai-chat-message.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-ai-chat-message.mjs","names":[],"sources":["../../src/chat/core-ai-chat-message.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {AtSign, Paperclip} from \"lucide-react\";\n\nimport {Card, CardContent} from \"../card\";\nimport type {Message} from \"../types/chat\";\nimport {ChartRenderer} from \"./core-chart-renderer\";\n\nexport interface AIChatMessageProps {\n\tmessage: Message;\n}\n\n/**\n * AI-style chat message:\n * - User messages: small grey rounded pill, right-aligned\n * - Assistant messages: full-width plain text/content, no bubble\n * - No timestamps, no sender names\n */\nexport function AIChatMessage({message}: AIChatMessageProps) {\n\tconst isUser = message.role === \"user\";\n\tconst isChart = message.type === \"chart\";\n\n\tconst attachments = message.attachments ?? [];\n\n\tif (isUser) {\n\t\treturn (\n\t\t\t<div className=\"wwc:flex wwc:justify-end\">\n\t\t\t\t<div className=\"wwc:max-w-[80%] wwc:rounded-2xl wwc:rounded-br-md wwc:bg-muted wwc:px-4 wwc:py-2 wwc:text-sm wwc:text-foreground\">\n\t\t\t\t\t{attachments.length > 0 && (\n\t\t\t\t\t\t<div className=\"wwc:mb-1.5 wwc:flex wwc:flex-wrap wwc:justify-end wwc:gap-1\">\n\t\t\t\t\t\t\t{attachments.map((attachment) => (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tkey={attachment.id}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:inline-flex wwc:max-w-full wwc:items-center wwc:gap-1 wwc:rounded-md wwc:border wwc:bg-card wwc:px-1.5 wwc:py-0.5 wwc:text-xs wwc:text-muted-foreground\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"wwc:flex wwc:h-3 wwc:w-3 wwc:flex-shrink-0 wwc:items-center wwc:justify-center wwc:[&_svg]:h-3 wwc:[&_svg]:w-3\">\n\t\t\t\t\t\t\t\t\t\t{attachment.icon ?? (attachment.type === \"file\" ? <Paperclip /> : <AtSign />)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"wwc:truncate\">{attachment.label}</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<p className=\"wwc:whitespace-pre-wrap wwc:leading-relaxed\">{message.content}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Assistant — full width, no bubble\n\treturn (\n\t\t<div className=\"wwc:w-full\">\n\t\t\t<div className=\"wwc:text-sm wwc:leading-relaxed wwc:text-foreground\">\n\t\t\t\t<p className=\"wwc:whitespace-pre-wrap\">{message.content}</p>\n\t\t\t\t{isChart && (\n\t\t\t\t\t<Card className=\"wwc:mt-3 wwc:overflow-hidden\">\n\t\t\t\t\t\t<CardContent className=\"wwc:p-3\">\n\t\t\t\t\t\t\t<ChartRenderer chartData={message.chartData} height={220} />\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t</Card>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/** Three-dot typing indicator, full-width assistant style. */\nexport function AIChatTypingIndicator({className}: {className?: string}) {\n\treturn (\n\t\t<div className={cn(\"wwc:flex wwc:w-full wwc:items-center wwc:gap-1.5\", className)}>\n\t\t\t<span\n\t\t\t\tclassName=\"wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-muted-foreground/50 wwc:animate-bounce\"\n\t\t\t\tstyle={{animationDelay: \"0ms\"}}\n\t\t\t/>\n\t\t\t<span\n\t\t\t\tclassName=\"wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-muted-foreground/50 wwc:animate-bounce\"\n\t\t\t\tstyle={{animationDelay: \"150ms\"}}\n\t\t\t/>\n\t\t\t<span\n\t\t\t\tclassName=\"wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-muted-foreground/50 wwc:animate-bounce\"\n\t\t\t\tstyle={{animationDelay: \"300ms\"}}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAgB,cAAc,EAAC,WAA8B;CAC5D,MAAM,SAAS,QAAQ,SAAS;CAChC,MAAM,UAAU,QAAQ,SAAS;CAEjC,MAAM,cAAc,QAAQ,eAAe,CAAC;CAE5C,IAAI,QACH,OACC,oBAAC,OAAD;EAAK,WAAU;EACd,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,YAAY,SAAS,KACrB,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,YAAY,KAAK,eACjB,qBAAC,QAAD;KAEC,WAAU;KAFX,UAAA,CAIC,oBAAC,QAAD;MAAM,WAAU;MACd,UAAA,WAAW,SAAS,WAAW,SAAS,SAAS,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,QAAD,CAAS,CAAA;KACtE,CAAA,GACN,oBAAC,QAAD;MAAM,WAAU;MAAgB,UAAA,WAAW;KAAY,CAAA,CAClD;IAPA,GAAA,WAAW,EAOX,CACN;GACG,CAAA,GAEN,oBAAC,KAAD;IAAG,WAAU;IAA+C,UAAA,QAAQ;GAAW,CAAA,CAC3E;;CACD,CAAA;CAKP,OACC,oBAAC,OAAD;EAAK,WAAU;EACd,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,oBAAC,KAAD;IAAG,WAAU;IAA2B,UAAA,QAAQ;GAAW,CAAA,GAC1D,WACA,oBAAC,MAAD;IAAM,WAAU;IACf,UAAA,oBAAC,aAAD;KAAa,WAAU;KACtB,UAAA,oBAAC,eAAD;MAAe,WAAW,QAAQ;MAAW,QAAQ;KAAM,CAAA;IAC/C,CAAA;GACR,CAAA,CAEH;;CACD,CAAA;AAEP;;AAGA,SAAgB,sBAAsB,EAAC,aAAkC;CACxE,OACC,qBAAC,OAAD;EAAK,WAAW,GAAG,oDAAoD,SAAS;EAAhF,UAAA;GACC,oBAAC,QAAD;IACC,WAAU;IACV,OAAO,EAAC,gBAAgB,MAAK;GAC7B,CAAA;GACD,oBAAC,QAAD;IACC,WAAU;IACV,OAAO,EAAC,gBAAgB,QAAO;GAC/B,CAAA;GACD,oBAAC,QAAD;IACC,WAAU;IACV,OAAO,EAAC,gBAAgB,QAAO;GAC/B,CAAA;EACG;;AAEP"}