veryfront 0.1.996 → 0.1.998

package/esm/src/react/components/chat/theme.js

@@ -11,73 +11,91 @@ import { clsx } from "../../../utils/clsx.js";
 // CSS Custom Property tokens
 // ---------------------------------------------------------------------------
 /**
- * Light-mode defaults that match the Veryfront Studio `:root` values.
- * Uses OKLch for perceptual uniformity.
+ * Light-mode defaults copied from Veryfront Studio `styles/styles.css`.
+ * Keep these values aligned with Studio so standalone chat renders with the
+ * same surface, edge, and text hierarchy before a host app provides tokens.
  */
 const TOKENS_LIGHT = {
-    "--background": "oklch(0.9512 0.008 98.88)",
-    "--foreground": "oklch(0.2768 0 0)",
-    "--card": "oklch(1 0 0)",
-    "--card-foreground": "oklch(0.2768 0 0)",
-    "--popover": "oklch(1 0 0)",
-    "--popover-foreground": "oklch(0.2768 0 0)",
-    "--primary": "oklch(0.2768 0 0)",
-    "--primary-foreground": "oklch(1 0 0)",
-    "--muted": "oklch(0.9422 0.0081 98.88)",
-    "--muted-foreground": "oklch(0.55 0.005 95.11)",
-    "--accent": "oklch(0.93 0 0)",
-    "--accent-foreground": "oklch(0.15 0 0)",
-    "--destructive": "oklch(0.55 0.22 27)",
-    "--destructive-foreground": "oklch(1 0 0)",
-    "--border": "oklch(0.84 0.0055 95.11)",
-    "--input": "oklch(1 0 0)",
-    "--input-border": "oklch(0.88 0 0)",
-    "--input-placeholder": "oklch(0.7025 0 0)",
-    "--ring": "oklch(0.2768 0 0 / 0.3)",
-    "--success": "oklch(0.52 0.15 145)",
-    "--chat-bubble": "oklch(0.2768 0 0)",
-    "--chat-bubble-foreground": "oklch(1 0 0)",
-    "--tab-background": "oklch(1 0 0)",
-    "--tab-foreground": "oklch(0.7025 0 0)",
-    "--tab-active-background": "oklch(0.9422 0.0081 98.88)",
-    "--tab-active-foreground": "oklch(0.2768 0 0)",
-    "--sidebar-background": "oklch(0.9512 0.008 98.88)",
-    "--sidebar-foreground": "oklch(0.07 0 0)",
-    "--sidebar-border": "oklch(0.9 0.006 98.88)",
+    "--background": "#F0EFE9",
+    "--foreground": "#010101",
+    "--primary": "#282828",
+    "--secondary": "#FFFFFF",
+    "--tertiary": "#F0EFE9",
+    "--accent": "#E8E6DB",
+    "--muted": "#F7F6F4",
+    "--destructive": "#D40C1A",
+    "--outline-border": "#DCDAD0",
+    "--status-neutral": "#9F9F9F",
+    "--status-info": "#0071DF",
+    "--status-success": "#098926",
+    "--status-warning": "#F99100",
+    "--status-error": "#D40924",
+    "--alert-warning-bg": "#F1E3CD",
+    "--alert-error-bg": "#ECD3D1",
+    "--alert-success-bg": "#D4E2D2",
+    "--alert-info-bg": "#E6E6E0",
+    "--faint": "oklch(from var(--foreground) l c h / 0.25)",
+    "--soft": "oklch(from var(--foreground) l c h / 0.7)",
+    "--tint": "oklch(from var(--foreground) l c h / 0.04)",
+    "--edge": "oklch(from var(--foreground) l c h / 0.06)",
+    "--edge-medium": "oklch(from var(--foreground) l c h / 0.1)",
+    "--separator": "#EEEEED",
+    "--shadow-sm": "0 1.5px 3px rgba(0, 0, 0, 0.08)",
+    "--code-bg": "var(--secondary)",
+    "--input-bg": "var(--secondary)",
+    "--popover": "var(--secondary)",
+    "--dialog": "var(--background)",
+    "--drawer": "var(--background)",
+    "--overlay": "rgba(0, 0, 0, 0.5)",
+    "--card": "var(--secondary)",
+    "--card-foreground": "var(--foreground)",
+    "--popover-foreground": "var(--foreground)",
+    "--primary-foreground": "var(--secondary)",
+    "--muted-foreground": "var(--faint)",
+    "--accent-foreground": "var(--foreground)",
+    "--destructive-foreground": "#FFFFFF",
+    "--border": "var(--outline-border)",
+    "--input": "var(--input-bg)",
+    "--input-border": "var(--edge-medium)",
+    "--input-placeholder": "var(--faint)",
+    "--ring": "var(--edge-medium)",
+    "--success": "var(--status-success)",
+    "--chat-bubble": "var(--primary)",
+    "--chat-bubble-foreground": "var(--secondary)",
+    "--tab-background": "var(--secondary)",
+    "--tab-foreground": "var(--faint)",
+    "--tab-active-background": "var(--accent)",
+    "--tab-active-foreground": "var(--foreground)",
+    "--sidebar-background": "var(--background)",
+    "--sidebar-foreground": "var(--foreground)",
+    "--sidebar-border": "var(--edge-medium)",
+    "--radius-xs": "4px",
+    "--radius-sm": "8px",
+    "--radius-md": "12px",
+    "--radius-lg": "20px",
+    "--radius-xl": "35px",
+    "--font-weight-normal": "400",
+    "--font-weight-medium": "500",
 };
 /**
- * Dark-mode defaults that match the Studio `[data-theme="dark"]` values.
+ * Dark-mode defaults copied from Studio `[data-theme="dark"]`.
  */
 const TOKENS_DARK = {
-    "--background": "oklch(0.2768 0 0)",
-    "--foreground": "oklch(0.9512 0.008 98.88)",
-    "--card": "oklch(0.3211 0 0)",
-    "--card-foreground": "oklch(0.9512 0.008 98.88)",
-    "--popover": "oklch(0.21 0.01 220)",
-    "--popover-foreground": "oklch(0.9512 0.008 98.88)",
-    "--primary": "oklch(0.9512 0.008 98.88)",
-    "--primary-foreground": "oklch(0.2768 0 0)",
-    "--muted": "oklch(0.5338 0.0046 106.55)",
-    "--muted-foreground": "oklch(0.9512 0.008 98.88)",
-    "--accent": "oklch(0.25 0.01 220)",
-    "--accent-foreground": "oklch(1 0 0)",
-    "--destructive": "oklch(0.55 0.22 27)",
-    "--destructive-foreground": "oklch(1 0 0)",
-    "--border": "oklch(0.42 0.0017 106.48)",
-    "--input": "oklch(0.3211 0 0)",
-    "--input-border": "oklch(0.38 0.01 220)",
-    "--input-placeholder": "oklch(0.8975 0 0)",
-    "--ring": "oklch(0.6 0.01 220 / 0.5)",
-    "--success": "oklch(0.52 0.14 143)",
-    "--chat-bubble": "oklch(0.9512 0.008 98.88)",
-    "--chat-bubble-foreground": "oklch(0.2768 0 0)",
-    "--tab-background": "oklch(0.3211 0 0)",
-    "--tab-foreground": "oklch(0.8975 0 0)",
-    "--tab-active-background": "oklch(0.5338 0.0046 106.55)",
-    "--tab-active-foreground": "oklch(0.9512 0.008 98.88)",
-    "--sidebar-background": "oklch(0.18 0.01 220)",
-    "--sidebar-foreground": "oklch(0.9512 0.008 98.88)",
-    "--sidebar-border": "oklch(0.3 0.01 220)",
+    ...TOKENS_LIGHT,
+    "--background": "#282828",
+    "--foreground": "#F0EFE9",
+    "--primary": "#F1F0EA",
+    "--secondary": "#333333",
+    "--tertiary": "#262626",
+    "--accent": "#303030",
+    "--muted": "#0D1315",
+    "--outline-border": "#3A3A3A",
+    "--separator": "oklch(from var(--foreground) l c h / 0.06)",
+    "--code-bg": "oklch(0.08 0.005 280)",
+    "--input-bg": "#40403F",
+    "--primary-foreground": "var(--secondary)",
+    "--chat-bubble": "var(--primary)",
+    "--chat-bubble-foreground": "var(--secondary)",
 };
 function tokensToCSS(tokens) {
     return Object.entries(tokens).map(([k, v]) => `${k}:${v}`).join(";");
@@ -94,38 +112,66 @@ function tokensToCSS(tokens) {
  *
  * Dark mode: supports prefers-color-scheme, .dark, and [data-theme="dark"].
  */
+/**
+ * Animation CSS for the chat UI primitives (Spinner, Shimmer, ProgressBar,
+ * LoadingButton). Copied from Studio `styles/animations.css`. Since
+ * `veryfront/chat` ships as a self-contained npm package, it carries both the
+ * `@keyframes` AND the named `animate-*` utility classes itself — components
+ * use Studio's clean class names (`animate-bounce-spin`) without requiring the
+ * consumer's Tailwind to register them. `shimmer-sweep` stays an arbitrary
+ * `animate-[…]` utility (its duration is set inline), so only its keyframes are
+ * needed here. Keep in sync with `storybook/.storybook/preview.css`.
+ */
+const ANIMATION_CSS = "@keyframes bounce-spin{0%,100%{transform:translateY(0) rotate(0deg);animation-timing-function:ease-in-out}25%{transform:translateY(-30%) rotate(90deg);animation-timing-function:ease-in}50%{transform:translateY(0) rotate(180deg);animation-timing-function:ease-out}75%{transform:translateY(-15%) rotate(270deg);animation-timing-function:ease-in}}" +
+    "@keyframes button-loading{0%,100%{opacity:1}50%{opacity:.55}}" +
+    "@keyframes shimmer-sweep{0%{background-position:100% center}100%{background-position:0% center}}" +
+    "@keyframes progress-indeterminate{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}" +
+    ".animate-bounce-spin{animation:bounce-spin 2.5s cubic-bezier(0.25,1,0.5,1) infinite}" +
+    ".animate-button-loading{animation:button-loading 1.4s cubic-bezier(0.4,0,0.2,1) infinite}" +
+    ".animate-progress-indeterminate{animation:progress-indeterminate 1.2s ease-in-out infinite}";
 export function generateTokenCSS() {
     const light = tokensToCSS(TOKENS_LIGHT);
     const dark = tokensToCSS(TOKENS_DARK);
+    // The design tokens stay scoped to `[data-vf-chat]`, never `:root`: the
+    // names (`--primary`, `--background`, `--accent`, …) are the same generic
+    // convention host apps use for their own themes, and these style tags render
+    // in the body — after a host's <head> stylesheets — so a `:root` rule here
+    // would override the host's tokens page-wide (and the dark media query would
+    // repaint light-only host pages for OS-dark users). Surfaces that render
+    // *outside* `<Chat>` (`<ChatSidebar>`, `<AttachmentsPanel>`, `<AppShell>`)
+    // establish their own `data-vf-chat` scope and inject `<ChatTokens>`;
+    // portalled content re-anchors via `closest("[data-vf-chat]")`.
     return [
-        `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');`,
-        `[data-vf-chat]{font-family:'Inter',ui-sans-serif,system-ui,sans-serif;${light}}`,
+        `[data-vf-chat]{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:var(--font-weight-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;${light}}`,
         `[data-vf-chat] button{cursor:pointer;}`,
         `@media(prefers-color-scheme:dark){[data-vf-chat]:not([data-vf-theme]){${dark}}}`,
-        `.dark [data-vf-chat]:not([data-vf-theme]),[data-theme="dark"] [data-vf-chat]:not([data-vf-theme]){${dark}}`,
+        `.dark [data-vf-chat]:not([data-vf-theme]),[data-theme="dark"] [data-vf-chat]:not([data-vf-theme]),.dark[data-vf-chat]:not([data-vf-theme]),[data-theme="dark"][data-vf-chat]:not([data-vf-theme]){${dark}}`,
+        ANIMATION_CSS,
     ].join("");
 }
 /**
  * Default theme using CSS custom properties from the design system.
  */
 export const defaultChatTheme = {
-    container: "flex flex-col h-full overflow-hidden bg-[var(--background)]",
+    container: "flex flex-col h-full overflow-hidden bg-[var(--background)] text-[var(--foreground)]",
     message: {
-        user: "bg-[var(--chat-bubble)] text-[var(--chat-bubble-foreground)] rounded-[22px] px-5 py-3 max-w-[80%] shadow-sm",
-        assistant: "text-[var(--card-foreground)] max-w-none",
-        system: "text-[var(--muted-foreground)] text-sm mx-auto text-center py-2",
-        tool: "bg-[var(--card)] text-[var(--card-foreground)] rounded-xl px-3 py-2 text-sm font-mono border border-[var(--border)]",
+        // Plain right-aligned user turn (no bubble) — the Root handles alignment +
+        // max-width. A consumer can opt into a bubble via `theme.message.user`.
+        user: "text-[15px] leading-relaxed text-[var(--foreground)]",
+        assistant: "max-w-none text-[var(--foreground)] [overflow-wrap:anywhere]",
+        system: "text-[var(--faint)] text-sm mx-auto text-center py-2",
+        tool: "rounded-[var(--radius-md)] border border-[var(--outline-border)] bg-transparent px-4 py-3 text-sm font-mono text-[var(--foreground)]",
     },
-    input: "w-full bg-transparent border-none focus:outline-none focus:ring-0 text-[var(--foreground)] placeholder:text-[var(--input-placeholder)] text-[15px] leading-normal",
-    button: "size-9 shrink-0 flex items-center justify-center rounded-full transition-all bg-[var(--foreground)] text-[var(--background)] hover:bg-[var(--card)] hover:text-[var(--foreground)] active:scale-95 disabled:opacity-100",
-    loading: "size-2 bg-[var(--border)] rounded-full animate-pulse",
+    input: "w-full bg-transparent border-none text-[15px] leading-6 text-[var(--foreground)] placeholder:text-[var(--faint)] focus:outline-none focus:ring-0",
+    button: "flex size-8 shrink-0 items-center justify-center rounded-full bg-[var(--primary)] text-[var(--secondary)] transition-[background-color,color] hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+    loading: "size-2 bg-[var(--edge-medium)] rounded-full animate-pulse",
 };
 export const defaultAgentTheme = {
-    container: "border border-[var(--border)] rounded-2xl p-6 space-y-4 bg-[var(--card)]",
-    status: "inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium",
-    thinking: "bg-amber-500/10 rounded-xl px-4 py-3 italic text-[var(--foreground)] border border-amber-500/20",
-    tool: "rounded-xl px-4 py-3 bg-blue-500/10 border border-blue-500/20",
-    toolResult: "mt-2 p-3 bg-[var(--accent)] rounded-xl font-mono text-sm overflow-x-auto",
+    container: "space-y-4 rounded-[var(--radius-lg)] bg-[var(--secondary)] p-5 text-[var(--foreground)]",
+    status: "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium",
+    thinking: "rounded-[var(--radius-md)] border border-[var(--outline-border)] bg-transparent px-4 py-3 text-sm text-[var(--foreground)]",
+    tool: "rounded-[var(--radius-md)] border border-[var(--outline-border)] bg-transparent px-4 py-3",
+    toolResult: "mt-2 overflow-x-auto rounded-[var(--radius-sm)] bg-[var(--tertiary)] p-3 font-mono text-xs",
 };
 function isPlainObject(value) {
     return !!value && typeof value === "object" && !Array.isArray(value);
@@ -154,6 +200,14 @@ export function mergeThemes(defaultTheme, userTheme) {
 }
 /**
  * Utility to combine class names.
+ *
+ * NOTE: this is `clsx` only — it does NOT tailwind-merge. A `className` passed by
+ * a consumer is *appended*, not deduped, so it does not automatically beat a base
+ * utility of the same property (both end up in the class list, last-wins by
+ * CSS-source order, which is usually the base). To override a base utility from
+ * userland, use the `!` important suffix — e.g. `px-8!`, `rounded-xl!`, `size-6!`.
+ * Every cva-based primitive (Button, Card, Input, Textarea, Badge, Pill, Select,
+ * Tabs) inherits this behaviour.
  */
 export function cn(...inputs) {
     return clsx(inputs);
@@ -177,10 +231,10 @@ function variantClasses(base, config) {
 export const messageVariants = variantClasses("", {
     variants: {
         role: {
-            user: "bg-[var(--chat-bubble)] text-[var(--chat-bubble-foreground)] rounded-[22px] px-5 py-3 max-w-[80%] shadow-sm",
-            assistant: "text-[var(--card-foreground)] max-w-none",
-            system: "text-[var(--muted-foreground)] text-sm mx-auto text-center py-2",
-            tool: "bg-[var(--card)] text-[var(--card-foreground)] rounded-xl px-3 py-2 text-sm font-mono border border-[var(--border)]",
+            user: "max-w-[80%] rounded-[var(--radius-lg)] bg-[var(--chat-bubble)] px-4 py-3 text-base leading-relaxed text-[var(--chat-bubble-foreground)] shadow-sm",
+            assistant: "max-w-none text-[var(--foreground)] [overflow-wrap:anywhere]",
+            system: "text-[var(--faint)] text-sm mx-auto text-center py-2",
+            tool: "rounded-[var(--radius-md)] border border-[var(--outline-border)] bg-transparent px-4 py-3 text-sm font-mono text-[var(--foreground)]",
         },
     },
     defaultVariants: {
@@ -188,25 +242,27 @@ export const messageVariants = variantClasses("", {
     },
 });
 export const chatButtonVariants = variantClasses([
+    "relative",
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
-    "font-medium rounded-full transition-all duration-150",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
-    "disabled:pointer-events-none disabled:opacity-50",
+    "font-normal rounded-full transition-[background-color,color,border-color] duration-150 ease-in",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]",
+    "disabled:pointer-events-none",
     "[&_svg]:shrink-0",
 ], {
     variants: {
         variant: {
-            primary: "bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90 active:scale-95",
-            ghost: "bg-transparent text-[var(--foreground)] hover:bg-[var(--foreground)]/5",
-            outline: "border border-[var(--border)] bg-transparent text-[var(--foreground)] hover:bg-[var(--foreground)]/5",
-            "icon-ghost": "bg-transparent text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 !p-0 !gap-0",
+            primary: "bg-[var(--primary)] text-[var(--secondary)] shadow-sm hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+            ghost: "bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)]",
+            outline: "border border-[var(--outline-border)] bg-transparent text-[var(--foreground)] hover:border-transparent hover:bg-[var(--accent)]",
+            "icon-ghost": "bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)] !p-0 !gap-0",
         },
         size: {
-            sm: "h-[38px] px-4 text-sm [&_svg]:size-4",
-            default: "h-[42px] px-5 text-base [&_svg]:size-5",
+            sm: "h-[32px] px-3.5 text-sm [&_svg]:size-4",
+            default: "h-[38px] px-[1.125rem] text-base [&_svg]:size-4",
             "icon-xs": "size-7 [&_svg]:size-4",
-            "icon-sm": "size-9 [&_svg]:size-5",
-            "icon-default": "size-10 [&_svg]:size-5",
+            "icon-sm": "size-7 [&_svg]:size-4",
+            "icon-default": "size-8 [&_svg]:size-[1.125rem]",
+            "icon-lg": "size-9 [&_svg]:size-5",
         },
     },
     defaultVariants: {
@@ -219,7 +275,7 @@ export const chatContainerVariants = variantClasses("flex flex-col overflow-hidd
         variant: {
             default: "h-full bg-[var(--background)]",
             embedded: "h-full bg-transparent",
-            floating: "h-[600px] w-[400px] rounded-2xl border border-[var(--border)] bg-[var(--background)] shadow-xl",
+            floating: "h-[600px] w-[400px] rounded-[var(--radius-lg)] border border-[var(--outline-border)] bg-[var(--background)] shadow-sm",
         },
     },
     defaultVariants: {

package/esm/src/react/components/chat/ui/alert.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Alert — soft-fill status callout, forked dependency-light from Veryfront
+ * Studio's `Alert`. Studio uses `--alert-{variant}-bg` + `--alert-{variant}-border`
+ * tokens; we only ship the `-bg` tokens, so the 1px border is derived from the
+ * fill via `color-mix` (no new tokens needed). The fill is a mode-invariant light
+ * pastel, so text stays dark in both themes (`dark:text-[var(--background)]`).
+ *
+ * @module react/components/chat/ui/alert
+ */
+import * as React from "../../../../../react/react.js";
+declare const alertVariants: {
+    readonly default: "bg-[var(--alert-info-bg)] border-[color-mix(in_oklch,var(--alert-info-bg),black_10%)]";
+    readonly warning: "bg-[var(--alert-warning-bg)] border-[color-mix(in_oklch,var(--alert-warning-bg),black_10%)]";
+    readonly error: "bg-[var(--alert-error-bg)] border-[color-mix(in_oklch,var(--alert-error-bg),black_10%)]";
+    readonly success: "bg-[var(--alert-success-bg)] border-[color-mix(in_oklch,var(--alert-success-bg),black_10%)]";
+};
+/** Props accepted by `<Alert>`. */
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Colour scheme. @default "default" */
+    variant?: keyof typeof alertVariants;
+}
+export declare function Alert({ children, className, variant, ...props }: AlertProps): React.ReactElement;
+/** Leading icon slot for `<Alert>` (size-4 recommended). */
+export declare function AlertIcon({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Message body for `<Alert>`. */
+export declare function AlertContent({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.ReactElement;
+/** Trailing action slot for `<Alert>` (button or link). */
+export declare function AlertAction({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+export {};
+//# sourceMappingURL=alert.d.ts.map

package/esm/src/react/components/chat/ui/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/alert.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAGvD,QAAA,MAAM,aAAa;;;;;CAOT,CAAC;AAEX,mCAAmC;AACnC,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;CACtC;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CAejC;AAED,4DAA4D;AAC5D,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,CAY3D;AAED,kCAAkC;AAClC,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,YAAY,CAYjE;AAED,2DAA2D;AAC3D,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,CAS3D"}

package/esm/src/react/components/chat/ui/alert.js

@@ -0,0 +1,35 @@
+/**
+ * Alert — soft-fill status callout, forked dependency-light from Veryfront
+ * Studio's `Alert`. Studio uses `--alert-{variant}-bg` + `--alert-{variant}-border`
+ * tokens; we only ship the `-bg` tokens, so the 1px border is derived from the
+ * fill via `color-mix` (no new tokens needed). The fill is a mode-invariant light
+ * pastel, so text stays dark in both themes (`dark:text-[var(--background)]`).
+ *
+ * @module react/components/chat/ui/alert
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+const alertVariants = {
+    default: "bg-[var(--alert-info-bg)] border-[color-mix(in_oklch,var(--alert-info-bg),black_10%)]",
+    warning: "bg-[var(--alert-warning-bg)] border-[color-mix(in_oklch,var(--alert-warning-bg),black_10%)]",
+    error: "bg-[var(--alert-error-bg)] border-[color-mix(in_oklch,var(--alert-error-bg),black_10%)]",
+    success: "bg-[var(--alert-success-bg)] border-[color-mix(in_oklch,var(--alert-success-bg),black_10%)]",
+};
+export function Alert({ children, className, variant = "default", ...props }) {
+    return (React.createElement("div", { className: cn(
+        // 14px: Inter renders larger than Studio's Söhne, so `vf-type-base`
+        // (16px) reads too big here — step down to `text-sm`.
+        "flex items-center gap-3 rounded-md border px-4 py-2.5 text-sm text-[var(--foreground)] dark:text-[var(--background)]", alertVariants[variant], className), ...props }, children));
+}
+/** Leading icon slot for `<Alert>` (size-4 recommended). */
+export function AlertIcon({ children, className, ...props }) {
+    return (React.createElement("div", { className: cn("shrink-0 text-[var(--foreground)] dark:text-[var(--background)]", className), ...props }, children));
+}
+/** Message body for `<Alert>`. */
+export function AlertContent({ children, className, ...props }) {
+    return (React.createElement("p", { className: cn("flex-1 text-sm text-[var(--foreground)] dark:text-[var(--background)]", className), ...props }, children));
+}
+/** Trailing action slot for `<Alert>` (button or link). */
+export function AlertAction({ children, className, ...props }) {
+    return (React.createElement("div", { className: cn("-my-1 -mr-1 flex shrink-0 items-center", className), ...props }, children));
+}

package/esm/src/react/components/chat/ui/app-shell.d.ts

@@ -0,0 +1,155 @@
+/**
+ * AppShell — a chat-independent layout primitive modeled on the shadcn sidebar
+ * (https://ui.shadcn.com/blocks). It owns the *layout + sidebar visibility*;
+ * everything else is slots. The sidebar is binary — visible or hidden (no
+ * collapse/icon-rail mode). Supports a left AND a right sidebar, each with its
+ * own toggle and persisted state.
+ *
+ * Desktop: sidebars are inline flex columns (mounted only while open).
+ * Mobile (< sm): sidebars become a focus-trapped off-canvas overlay + backdrop
+ * that slides in from the relevant edge, with Escape-to-close, scroll-lock, and
+ * focus restore.
+ *
+ * Purely structural: it injects no theme/token CSS — the host owns theming.
+ * Zero external deps (uses the local `cn` + `ui/button`). Built in `chat/ui`
+ * for now; designed for a clean `git mv` to a top-level `/ui`.
+ *
+ * @module react/components/chat/ui/app-shell
+ */
+import * as React from "../../../../../react/react.js";
+import { type ButtonProps } from "./button.js";
+/** Which edge a sidebar docks to. */
+export type AppShellSide = "left" | "right";
+interface AppShellContextValue {
+    /** Viewport is below the `sm` breakpoint (< 640px). */
+    isMobile: boolean;
+    /** Effective visibility of a side for the current viewport. */
+    isOpen: (side: AppShellSide) => boolean;
+    /** Flip a side's visibility. */
+    toggle: (side: AppShellSide) => void;
+    /** Set a side's visibility explicitly. */
+    setOpen: (side: AppShellSide, open: boolean) => void;
+    /** Stable DOM id for a side's sidebar (for `aria-controls`). */
+    sidebarId: (side: AppShellSide) => string;
+}
+/** Access the enclosing {@link AppShell}'s state (external triggers, etc.). */
+export declare function useAppShell(): AppShellContextValue;
+/** Per-side visibility map. */
+export interface AppShellOpenState {
+    left?: boolean;
+    right?: boolean;
+}
+/** Props accepted by {@link AppShell}. */
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Controlled desktop visibility per side. Omit a side to leave it uncontrolled. */
+    open?: AppShellOpenState;
+    /** Uncontrolled initial desktop visibility. Defaults: left `true`, right `false`. */
+    defaultOpen?: AppShellOpenState;
+    /** Fires when a side is toggled (desktop). Receives the requested next value. */
+    onOpenChange?: (side: AppShellSide, open: boolean) => void;
+    /** localStorage key prefix for persisting uncontrolled desktop visibility. */
+    storageKey?: string;
+    /** Toggle the left sidebar with ⌘/Ctrl+B. Default `true`. */
+    keyboardShortcut?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** Root — provides sidebar state and the flex layout container. */
+declare function AppShellRoot({ open, defaultOpen, onOpenChange, storageKey, keyboardShortcut, className, children, ref, ...props }: AppShellProps): React.ReactElement;
+declare namespace AppShellRoot {
+    var displayName: string;
+}
+/** Props accepted by {@link AppShellSidebar}. */
+export interface AppShellSidebarProps extends React.HTMLAttributes<HTMLElement> {
+    /** Edge to dock to. Default `left`. */
+    side?: AppShellSide;
+    /** Sidebar width in px (desktop column + mobile overlay panel). Default `240`. */
+    width?: number;
+}
+/** A dockable sidebar. Renders inline on desktop, as an overlay on mobile. */
+declare function AppShellSidebar({ side, width, className, children, ...props }: AppShellSidebarProps): React.ReactElement | null;
+declare namespace AppShellSidebar {
+    var displayName: string;
+}
+/** Optional border-carrying section. */
+interface BorderedProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Draw a divider on the section's inner edge. Default `false`. */
+    border?: boolean;
+}
+/** Sidebar header slot — optional bottom border. */
+declare function AppShellSidebarHeader({ border, className, ...props }: BorderedProps): React.ReactElement;
+declare namespace AppShellSidebarHeader {
+    var displayName: string;
+}
+/** Sidebar scroll region — grows to fill and scrolls. */
+declare function AppShellSidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+declare namespace AppShellSidebarContent {
+    var displayName: string;
+}
+/** Sidebar footer slot — optional top border. */
+declare function AppShellSidebarFooter({ border, className, ...props }: BorderedProps): React.ReactElement;
+declare namespace AppShellSidebarFooter {
+    var displayName: string;
+}
+/** The main content column, between/beside the sidebars. */
+declare function AppShellMain({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+declare namespace AppShellMain {
+    var displayName: string;
+}
+/** Props accepted by {@link AppShellHeader}. */
+export interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /** Draw a bottom divider. Default `false`. */
+    border?: boolean;
+}
+/** Optional top bar inside the main column — with or without a bottom border. */
+declare function AppShellHeader({ border, className, ...props }: AppShellHeaderProps): React.ReactElement;
+declare namespace AppShellHeader {
+    var displayName: string;
+}
+/** The main content region — grows to fill, host owns overflow. */
+declare function AppShellContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+declare namespace AppShellContent {
+    var displayName: string;
+}
+/** Props accepted by {@link AppShellTrigger}. */
+export interface AppShellTriggerProps extends ButtonProps {
+    /** Which sidebar to toggle. Default `left`. */
+    side?: AppShellSide;
+    /** Override the default panel icon (`PanelLeft` / `PanelRight`). */
+    icon?: React.ReactNode;
+}
+/** Toggle button — built on the shared `Button`, defaults its icon by `side`. */
+declare function AppShellTrigger({ side, icon, variant, size, className, onClick, "aria-label": ariaLabel, ...props }: AppShellTriggerProps): React.ReactElement;
+declare namespace AppShellTrigger {
+    var displayName: string;
+}
+/**
+ * Compound AppShell. Compose:
+ *
+ * ```tsx
+ * <AppShell storageKey="vf-shell">
+ *   <AppShell.Sidebar side="left">
+ *     <AppShell.SidebarHeader border>…</AppShell.SidebarHeader>
+ *     <AppShell.SidebarContent>…</AppShell.SidebarContent>
+ *   </AppShell.Sidebar>
+ *   <AppShell.Main>
+ *     <AppShell.Header border>
+ *       <AppShell.Trigger side="left" />
+ *     </AppShell.Header>
+ *     <AppShell.Content>…</AppShell.Content>
+ *   </AppShell.Main>
+ *   <AppShell.Sidebar side="right">…</AppShell.Sidebar>
+ * </AppShell>
+ * ```
+ */
+export declare const AppShell: typeof AppShellRoot & {
+    Sidebar: typeof AppShellSidebar;
+    SidebarHeader: typeof AppShellSidebarHeader;
+    SidebarContent: typeof AppShellSidebarContent;
+    SidebarFooter: typeof AppShellSidebarFooter;
+    Main: typeof AppShellMain;
+    Header: typeof AppShellHeader;
+    Content: typeof AppShellContent;
+    Trigger: typeof AppShellTrigger;
+};
+export {};
+//# sourceMappingURL=app-shell.d.ts.map

package/esm/src/react/components/chat/ui/app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/app-shell.tsx"],"names":[],"mappings":"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"}