@agents24/chat-react 0.5.29 → 0.5.31

package/scaffold/src/components/theme-provider.tsx

@@ -9,12 +9,28 @@ export type Agents24ChatAppearanceController = {
 }
 
 type ThemeContextValue = {
+  inherited: boolean
   appearance: Agents24ChatAppearance
   portalContainer: HTMLElement | null
   setAppearance: (appearance: Agents24ChatAppearance) => void
 }
 
 const ThemeContext = React.createContext<ThemeContextValue | null>(null)
+const appearanceEvent = "agents24-chat-appearance-change"
+const subscribeAppearance = (notify: () => void) => {
+  window.addEventListener("storage", notify)
+  window.addEventListener(appearanceEvent, notify)
+  return () => {
+    window.removeEventListener("storage", notify)
+    window.removeEventListener(appearanceEvent, notify)
+  }
+}
+const subscribeDarkMode = (notify: () => void) => {
+  const media = window.matchMedia?.("(prefers-color-scheme: dark)")
+  media?.addEventListener("change", notify)
+  return () => media?.removeEventListener("change", notify)
+}
+const getDarkMode = () => window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false
 const storageKey = "agents24-chat-appearance"
 
 function storedAppearance(): Agents24ChatAppearance {
@@ -30,47 +46,36 @@ export function ThemeProvider({
   children,
   controller,
   theme = "soft",
+  mode = "isolated",
 }: {
   children: React.ReactNode
   controller?: Agents24ChatAppearanceController
   theme?: Agents24ChatTheme
+  mode?: "isolated" | "inherit"
 }) {
-  const [internalAppearance, setInternalAppearance] = React.useState<Agents24ChatAppearance>("system")
-  const [resolvedAppearance, setResolvedAppearance] = React.useState<"light" | "dark">("light")
-  const [mounted, setMounted] = React.useState(false)
+  const [sessionAppearance, setSessionAppearance] = React.useState<Agents24ChatAppearance | null>(null)
+  const stored = React.useSyncExternalStore(subscribeAppearance, storedAppearance, () => "system" as const)
+  const systemDark = React.useSyncExternalStore(subscribeDarkMode, getDarkMode, () => false)
   const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null)
-  const appearance = controller?.appearance ?? internalAppearance
-
-  React.useEffect(() => {
-    if (!controller) setInternalAppearance(storedAppearance())
-    setMounted(true)
-  }, [controller])
-
-  React.useEffect(() => {
-    if (!mounted || typeof window === "undefined" || typeof window.matchMedia !== "function") return
-    const media = window.matchMedia("(prefers-color-scheme: dark)")
-    const apply = () => setResolvedAppearance(
-      appearance === "system" ? media.matches ? "dark" : "light" : appearance,
-    )
-    apply()
-    media.addEventListener("change", apply)
-    return () => media.removeEventListener("change", apply)
-  }, [appearance, mounted])
+  const appearance = controller?.appearance ?? sessionAppearance ?? stored
+  const resolvedAppearance = appearance === "system" ? (systemDark ? "dark" : "light") : appearance
 
   const change = React.useCallback((next: Agents24ChatAppearance) => {
     if (controller) {
       controller.setAppearance(next)
       return
     }
+    setSessionAppearance(next)
     try { window.localStorage.setItem(storageKey, next) } catch { /* storage is optional */ }
-    setInternalAppearance(next)
+    window.dispatchEvent(new Event(appearanceEvent))
   }, [controller])
 
   return (
-    <ThemeContext.Provider value={{ appearance, portalContainer, setAppearance: change }}>
+    <ThemeContext.Provider value={{ appearance, portalContainer, setAppearance: change, inherited: mode === "inherit" }}>
       <div
         ref={setPortalContainer}
-        className={`${resolvedAppearance} size-full`}
+        className={mode === "inherit" ? "size-full" : `${resolvedAppearance} size-full`}
+        data-agents24-theme-mode={mode}
         data-agents24-theme={theme}
         data-agents24-theme-root=""
       >

package/scaffold/src/components/ui/tooltip.tsx

@@ -21,6 +21,7 @@ function TooltipTrigger({
   asChild: _asChild,
   ...props
 }: React.ComponentProps<typeof Slot.Root> & { asChild?: boolean }) {
+  void _asChild
   return <Slot.Root data-slot="tooltip-trigger" {...props} />
 }
 
@@ -35,6 +36,8 @@ function TooltipContent({
   sideOffset?: number
   align?: "start" | "center" | "end"
 }) {
+  void _align
+  void _sideOffset
   return (
     <span
       role="tooltip"

package/scaffold/src/host.css

@@ -0,0 +1,11 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "tw-animate-css";
+@import "@fontsource-variable/jetbrains-mono";
+@import "@fontsource-variable/merriweather";
+@import "@fontsource-variable/inter";
+
+@source "./**/*.{ts,tsx}";
+
+@import "./theme.css";

package/scaffold/src/index.css

@@ -6,216 +6,4 @@
 
 @source "./**/*.{ts,tsx}";
 
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --font-heading: var(--a24-font-heading);
-  --font-sans: var(--a24-font-sans);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-  --a24-composer-single-row-radius: 9999px;
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --font-serif: var(--a24-font-heading);
-  --font-mono: var(--a24-font-mono);
-}
-
-[data-agents24-theme-root] {
-  color-scheme: light;
-  --a24-font-heading: 'Inter Variable', sans-serif;
-  --a24-font-sans: 'Inter Variable', sans-serif;
-  --a24-font-mono: 'JetBrains Mono Variable', monospace;
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.147 0.004 49.25);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.147 0.004 49.25);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.147 0.004 49.25);
-  --primary: oklch(0.52 0.105 223.128);
-  --primary-foreground: oklch(0.984 0.019 200.873);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.97 0.001 106.424);
-  --muted-foreground: oklch(0.553 0.013 58.071);
-  --accent: oklch(0.97 0.001 106.424);
-  --accent-foreground: oklch(0.216 0.006 56.043);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.923 0.003 48.717);
-  --input: oklch(0.923 0.003 48.717);
-  --ring: oklch(0.709 0.01 56.259);
-  --radius: 0.875rem;
-  --sidebar: oklch(0.985 0.001 106.423);
-  --sidebar-foreground: oklch(0.147 0.004 49.25);
-  --sidebar-primary: oklch(0.609 0.126 221.723);
-  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
-  --sidebar-accent: oklch(0.97 0.001 106.424);
-  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
-  --sidebar-border: oklch(0.923 0.003 48.717);
-  --sidebar-ring: oklch(0.709 0.01 56.259);
-  --chart-1: oklch(0.845 0.143 164.978);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.596 0.145 163.225);
-  --chart-4: oklch(0.508 0.118 165.612);
-  --chart-5: oklch(0.432 0.095 166.913);
-}
-
-[data-agents24-theme-root].dark {
-  color-scheme: dark;
-  --background: oklch(0.147 0.004 49.25);
-  --foreground: oklch(0.985 0.001 106.423);
-  --card: oklch(0.216 0.006 56.043);
-  --card-foreground: oklch(0.985 0.001 106.423);
-  --popover: oklch(0.216 0.006 56.043);
-  --popover-foreground: oklch(0.985 0.001 106.423);
-  --primary: oklch(0.45 0.085 224.283);
-  --primary-foreground: oklch(0.984 0.019 200.873);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.268 0.007 34.298);
-  --muted-foreground: oklch(0.709 0.01 56.259);
-  --accent: oklch(0.268 0.007 34.298);
-  --accent-foreground: oklch(0.985 0.001 106.423);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.553 0.013 58.071);
-  --sidebar: oklch(0.216 0.006 56.043);
-  --sidebar-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-primary: oklch(0.715 0.143 215.221);
-  --sidebar-primary-foreground: oklch(0.302 0.056 229.695);
-  --sidebar-accent: oklch(0.268 0.007 34.298);
-  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.553 0.013 58.071);
-  --chart-1: oklch(0.845 0.143 164.978);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.596 0.145 163.225);
-  --chart-4: oklch(0.508 0.118 165.612);
-  --chart-5: oklch(0.432 0.095 166.913);
-}
-
-[data-agents24-theme-root][data-agents24-theme="sharp"] {
-  --a24-composer-single-row-radius: 0;
-  --a24-font-heading: 'Merriweather Variable', serif;
-  --a24-font-sans: 'JetBrains Mono Variable', monospace;
-  --a24-font-mono: 'JetBrains Mono Variable', monospace;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --radius: 0;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.865 0.127 207.078);
-  --chart-2: oklch(0.715 0.143 215.221);
-  --chart-3: oklch(0.609 0.126 221.723);
-  --chart-4: oklch(0.52 0.105 223.128);
-  --chart-5: oklch(0.45 0.085 224.283);
-}
-
-[data-agents24-theme-root][data-agents24-theme="sharp"].dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.865 0.127 207.078);
-  --chart-2: oklch(0.715 0.143 215.221);
-  --chart-3: oklch(0.609 0.126 221.723);
-  --chart-4: oklch(0.52 0.105 223.128);
-  --chart-5: oklch(0.45 0.085 224.283);
-}
-
-@layer base {
-  [data-agents24-theme-root], [data-agents24-theme-root] * {
-    @apply border-border outline-ring/50;
-    box-sizing: border-box;
-  }
-  [data-agents24-theme-root] {
-    @apply size-full overflow-hidden bg-background font-sans text-foreground antialiased;
-  }
-  [data-agents24-theme-root] button,
-  [data-agents24-theme-root] textarea { font: inherit; }
-}
+@import "./theme.css";

package/scaffold/src/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 
 import { App, type Agents24ChatAppProps } from "./app"
@@ -11,11 +13,12 @@ import { TooltipProvider } from "./components/ui/tooltip"
 export type Agents24ChatScaffoldProps = Agents24ChatAppProps & {
   appearanceController?: Agents24ChatAppearanceController
   theme?: Agents24ChatTheme
+  themeMode?: "isolated" | "inherit"
 }
 
-export function Agents24ChatScaffold({ appearanceController, theme, ...props }: Agents24ChatScaffoldProps) {
+export function Agents24ChatScaffold({ appearanceController, theme, themeMode, ...props }: Agents24ChatScaffoldProps) {
   return (
-    <ThemeProvider controller={appearanceController} theme={theme}>
+    <ThemeProvider controller={appearanceController} theme={theme} mode={themeMode}>
       <TooltipProvider>
         <App {...props} />
       </TooltipProvider>
@@ -35,5 +38,9 @@ export type {
   ChatHitlResponse,
   Agents24ChatScaffoldComponents,
   Agents24ChatTimelineSlotProps,
+  Agents24ChatComposerSlotProps,
 } from "./app"
 export { TooltipProvider as Agents24ChatTooltipProvider }
+
+export { ChatComposer as Agents24ChatComposer } from "./components/chat/chat-composer"
+export type { Agents24ChatComposerProps } from "./components/chat/chat-composer"

package/scaffold/src/theme.css

@@ -0,0 +1,215 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--a24-font-heading);
+  --font-sans: var(--a24-font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --a24-composer-single-row-radius: 9999px;
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --font-serif: var(--a24-font-heading);
+  --font-mono: var(--a24-font-mono);
+}
+
+[data-agents24-theme-root] {
+  color-scheme: light;
+  --a24-font-heading: 'Inter Variable', sans-serif;
+  --a24-font-sans: 'Inter Variable', sans-serif;
+  --a24-font-mono: 'JetBrains Mono Variable', monospace;
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.52 0.105 223.128);
+  --primary-foreground: oklch(0.984 0.019 200.873);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --radius: 0.875rem;
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.609 0.126 221.723);
+  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.845 0.143 164.978);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.596 0.145 163.225);
+  --chart-4: oklch(0.508 0.118 165.612);
+  --chart-5: oklch(0.432 0.095 166.913);
+}
+
+[data-agents24-theme-root].dark,
+.dark [data-agents24-theme-root][data-agents24-theme-mode="inherit"] {
+  color-scheme: dark;
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.45 0.085 224.283);
+  --primary-foreground: oklch(0.984 0.019 200.873);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.715 0.143 215.221);
+  --sidebar-primary-foreground: oklch(0.302 0.056 229.695);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.845 0.143 164.978);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.596 0.145 163.225);
+  --chart-4: oklch(0.508 0.118 165.612);
+  --chart-5: oklch(0.432 0.095 166.913);
+}
+
+[data-agents24-theme-root][data-agents24-theme="sharp"] {
+  --a24-composer-single-row-radius: 0;
+  --a24-font-heading: 'Merriweather Variable', serif;
+  --a24-font-sans: 'JetBrains Mono Variable', monospace;
+  --a24-font-mono: 'JetBrains Mono Variable', monospace;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --radius: 0;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.865 0.127 207.078);
+  --chart-2: oklch(0.715 0.143 215.221);
+  --chart-3: oklch(0.609 0.126 221.723);
+  --chart-4: oklch(0.52 0.105 223.128);
+  --chart-5: oklch(0.45 0.085 224.283);
+}
+
+[data-agents24-theme-root][data-agents24-theme="sharp"].dark,
+.dark [data-agents24-theme-root][data-agents24-theme="sharp"][data-agents24-theme-mode="inherit"] {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.865 0.127 207.078);
+  --chart-2: oklch(0.715 0.143 215.221);
+  --chart-3: oklch(0.609 0.126 221.723);
+  --chart-4: oklch(0.52 0.105 223.128);
+  --chart-5: oklch(0.45 0.085 224.283);
+}
+
+@layer base {
+  [data-agents24-theme-root], [data-agents24-theme-root] * {
+    @apply border-border outline-ring/50;
+    box-sizing: border-box;
+  }
+  [data-agents24-theme-root] {
+    @apply size-full overflow-hidden bg-background font-sans text-foreground antialiased;
+  }
+  [data-agents24-theme-root] button,
+  [data-agents24-theme-root] textarea { font: inherit; }
+}