@kitnai/chat 0.3.0 → 0.4.0

package/src/ui/overlay.tsx

@@ -0,0 +1,151 @@
+import {
+  createSignal, createEffect, onCleanup, splitProps, type Accessor, type JSX,
+} from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import {
+  computePosition, autoUpdate, offset, flip, shift, arrow, type Placement,
+} from '@floating-ui/dom';
+
+/**
+ * Keep a node mounted through its CSS exit animation.
+ * Open  -> present=true, state='open'  (enter animation via base classes)
+ * Close -> state='closed' (data-closed triggers tw-animate-css animate-out),
+ *          then unmount on `animationend`. If no animation is defined
+ *          (e.g. jsdom), unmount on the next microtask.
+ */
+export function createPresence(show: Accessor<boolean>) {
+  const [present, setPresent] = createSignal(show());
+  const [state, setState] = createSignal<'open' | 'closed'>(show() ? 'open' : 'closed');
+  let node: Element | undefined;
+  let generation = 0;
+  const setRef = (el: Element) => { node = el; };
+
+  createEffect((prev: boolean | undefined) => {
+    const visible = show();
+    if (visible) {
+      generation++;
+      setPresent(true);
+      setState('open');
+    } else if (prev) {
+      setState('closed');
+      const el = node;
+      const hasAnim = el && (() => {
+        const cs = getComputedStyle(el);
+        return cs.animationName !== 'none' && parseFloat(cs.animationDuration || '0') > 0;
+      })();
+      if (!el || !hasAnim) {
+        const gen = ++generation;
+        queueMicrotask(() => { if (gen === generation) setPresent(false); });
+        return visible;
+      }
+      const animEl = el as HTMLElement;
+      const onEnd = (e: AnimationEvent) => {
+        if (e.target !== animEl) return;
+        animEl.removeEventListener('animationend', onEnd);
+        setPresent(false);
+      };
+      animEl.addEventListener('animationend', onEnd);
+      onCleanup(() => animEl.removeEventListener('animationend', onEnd));
+    }
+    return visible;
+  });
+
+  return { present, state, setRef };
+}
+
+export type AsTag = string | ((props: Record<string, any>) => JSX.Element);
+
+/**
+ * Polymorphic element. `as` may be a tag name (default 'span') or a render
+ * function that receives the forwarded props (Kobalte-compatible `as={fn}`).
+ * Uses splitProps (NOT destructuring) so reactive forwarded props such as
+ * aria-expanded stay reactive. All extra props (incl. `ref`, event handlers,
+ * aria-*) are forwarded. `children` is left in `rest` so it forwards naturally.
+ */
+export function As(props: { as?: AsTag; children?: JSX.Element; [k: string]: any }) {
+  const [local, rest] = splitProps(props, ['as']);
+  if (typeof local.as === 'function') return local.as(rest);
+  return <Dynamic component={local.as ?? 'span'} {...rest} />;
+}
+
+export interface UsePositionOptions {
+  placement?: Placement;
+  gutter?: number;
+  arrowEl?: Accessor<HTMLElement | undefined>;
+}
+
+/**
+ * Position `floating` relative to `reference` using fixed strategy + autoUpdate,
+ * so the element tracks the trigger on scroll/resize (fix DD-2). Writes
+ * position into the returned `pos` signal; caller applies it as inline style.
+ *
+ * `options` (placement/gutter) are read at setup time — pass static values;
+ * reactive option changes won't reposition until the next autoUpdate tick.
+ */
+export function usePosition(
+  reference: Accessor<HTMLElement | undefined>,
+  floating: Accessor<HTMLElement | undefined>,
+  options: UsePositionOptions = {},
+) {
+  const [pos, setPos] = createSignal<{ x: number; y: number; placement: Placement }>(
+    { x: 0, y: 0, placement: options.placement ?? 'bottom' },
+  );
+  const [arrowPos, setArrowPos] = createSignal<{ x?: number; y?: number }>({});
+
+  createEffect(() => {
+    const ref = reference();
+    const float = floating();
+    if (!ref || !float) return;
+    const update = () => {
+      const middleware = [offset(options.gutter ?? 8), flip(), shift({ padding: 8 })];
+      const aEl = options.arrowEl?.();
+      if (aEl) middleware.push(arrow({ element: aEl }));
+      computePosition(ref, float, {
+        placement: options.placement ?? 'bottom',
+        strategy: 'fixed',
+        middleware,
+      }).then(({ x, y, placement, middlewareData }) => {
+        setPos({ x, y, placement });
+        if (middlewareData.arrow) setArrowPos({ x: middlewareData.arrow.x, y: middlewareData.arrow.y });
+      });
+    };
+    const cleanup = autoUpdate(ref, float, update);
+    onCleanup(cleanup);
+  });
+
+  return { pos, arrowPos };
+}
+
+export type DismissReason = 'escape' | 'outside';
+
+export interface UseDismissOptions {
+  enabled: Accessor<boolean>;
+  onDismiss: (reason: DismissReason) => void;
+  /** Elements considered "inside" (trigger + content). Pointerdown outside all of them dismisses. */
+  refs: () => (HTMLElement | undefined)[];
+}
+
+/**
+ * Escape key + outside-pointerdown dismissal. Does NOT lock page scroll (fix DD-1).
+ *
+ * `onDismiss` and `refs` are captured at call time (component setup), which is
+ * fine in SolidJS since components don't re-run — ensure they close over mutable
+ * variables, not stale values.
+ */
+export function useDismiss(opts: UseDismissOptions) {
+  createEffect(() => {
+    if (!opts.enabled()) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') opts.onDismiss('escape'); };
+    const onPointer = (e: PointerEvent) => {
+      const target = e.target as Node;
+      const inside = opts.refs().some((el) => el && el.contains(target));
+      if (!inside) opts.onDismiss('outside');
+    };
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('pointerdown', onPointer, true);
+    onCleanup(() => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('pointerdown', onPointer, true);
+    });
+  });
+}

package/src/ui/textarea.tsx

@@ -13,7 +13,7 @@ export function Textarea(props: TextareaProps) {
   return (
     <textarea
       ref={local.autoResize !== false ? ref : undefined}
-      class={cn('w-full resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none', local.class)}
+      class={cn('w-full resize-none rounded-md bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', local.class)}
       rows={1}
       {...rest}
     />

package/src/ui/tooltip.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
     docs: {
       description: {
         component: [
-          'A small floating label that appears on hover/focus of its trigger element, built on Kobalte `Tooltip` with an arrow.',
+          'A small floating label that appears on hover/focus of its trigger element, built with a DIY overlay-core implementation (no third-party dependency, no arrow).',
           '**When to use:** to clarify the purpose of icon-only buttons or terse controls — short, supplementary hints that are not essential to complete the action.',
           '**How to use:** wrap a single interactive `children` element and set `content` to the hint text. The child becomes the trigger.',
           '**Placement:** toolbars, message action rows, and any compact icon control where a label would not otherwise fit.',

package/src/ui/tooltip.tsx

@@ -1,22 +1,68 @@
-import { Tooltip as KTooltip } from '@kobalte/core/tooltip';
-import { type JSX, splitProps } from 'solid-js';
+import { createSignal, createUniqueId, onCleanup, Show, type JSX, splitProps } from 'solid-js';
+import { Portal } from 'solid-js/web';
 import { cn } from '../utils/cn';
 import { useChatConfig } from '../primitives/chat-config';
+import { createPresence, usePosition, useDismiss, As } from './overlay';
 
-export interface TooltipProps { content: string; children: JSX.Element; class?: string; }
+export interface TooltipProps { content: string; children: JSX.Element; class?: string; openDelay?: number; }
 
 export function Tooltip(props: TooltipProps) {
-  const [local] = splitProps(props, ['content', 'children', 'class']);
+  const [local] = splitProps(props, ['content', 'children', 'class', 'openDelay']);
   const config = useChatConfig();
+  const id = createUniqueId();
+  const [open, setOpen] = createSignal(false);
+  const [triggerEl, setTriggerEl] = createSignal<HTMLElement>();
+  const [contentEl, setContentEl] = createSignal<HTMLElement>();
+  let timer: number | undefined;
+
+  const [pointerInside, setPointerInside] = createSignal(false);
+  const [focusInside, setFocusInside] = createSignal(false);
+
+  const show = (delay = 0) => {
+    clearTimeout(timer);
+    if (delay) timer = window.setTimeout(() => setOpen(true), delay);
+    else setOpen(true);
+  };
+  const hide = () => { clearTimeout(timer); setOpen(false); };
+  const maybeHide = () => { if (!pointerInside() && !focusInside()) hide(); };
+  onCleanup(() => clearTimeout(timer));
+
+  const presence = createPresence(open);
+  const position = usePosition(triggerEl, contentEl, { placement: 'top', gutter: 6 });
+  useDismiss({ enabled: open, onDismiss: hide, refs: () => [triggerEl(), contentEl()] });
+
   return (
-    <KTooltip>
-      <KTooltip.Trigger as="span">{local.children}</KTooltip.Trigger>
-      <KTooltip.Portal mount={config.portalMount()}>
-        <KTooltip.Content class={cn('z-50 rounded-md bg-foreground px-2.5 py-1 text-xs text-background shadow-md animate-in fade-in-0 zoom-in-95', local.class)}>
-          <KTooltip.Arrow />
-          {local.content}
-        </KTooltip.Content>
-      </KTooltip.Portal>
-    </KTooltip>
+    <>
+      <As
+        as="span"
+        ref={setTriggerEl}
+        aria-describedby={open() ? id : undefined}
+        onPointerEnter={() => { setPointerInside(true); show(local.openDelay ?? 600); }}
+        onPointerLeave={() => { setPointerInside(false); maybeHide(); }}
+        onFocusIn={() => { setFocusInside(true); show(); }}
+        onFocusOut={(e: FocusEvent) => { const t = triggerEl(); if (t && t.contains(e.relatedTarget as Node)) return; setFocusInside(false); maybeHide(); }}
+      >
+        {local.children}
+      </As>
+      <Show when={presence.present()}>
+        <Portal mount={config.portalMount()}>
+          <div
+            ref={(el) => { setContentEl(el); presence.setRef(el); }}
+            id={id}
+            role="tooltip"
+            data-expanded={presence.state() === 'open' ? '' : undefined}
+            data-closed={presence.state() === 'closed' ? '' : undefined}
+            style={{ position: 'fixed', left: `${position.pos().x}px`, top: `${position.pos().y}px`, 'pointer-events': 'none' }}
+            class={cn(
+              'z-50 rounded-md bg-foreground px-2.5 py-1 text-xs text-background shadow-md',
+              'animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',
+              local.class,
+            )}
+          >
+            {local.content}
+          </div>
+        </Portal>
+      </Show>
+    </>
   );
 }

package/src/utils/cn.ts

@@ -1,5 +1,23 @@
 import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+// The kit defines custom font-size utilities via @theme tokens in theme.css:
+// text-caption / text-meta / text-body / text-title. tailwind-merge has no way
+// to know these are font sizes, so by default it buckets e.g. `text-body` with
+// text COLORS and drops a real color (`text-transparent`, `text-foreground`, …)
+// whenever both appear in the same cn() call — which silently broke TextShimmer
+// inside the web components (the element adds `text-body`, dropping
+// `text-transparent`, so the gradient stayed hidden behind opaque text).
+//
+// Register them in the `font-size` group so they conflict only with other font
+// sizes (text-xs/sm/base/lg/…) and never with text colors.
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': [{ text: ['caption', 'meta', 'body', 'title'] }],
+    },
+  },
+});
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));

package/theme.css

@@ -9,36 +9,59 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --color-background: hsl(0 0% 100%);
-  --color-foreground: hsl(240 10% 3.9%);
-  --color-card: hsl(0 0% 100%);
-  --color-card-foreground: hsl(240 10% 3.9%);
-  --color-popover: hsl(0 0% 100%);
-  --color-popover-foreground: hsl(240 10% 3.9%);
-  --color-primary: hsl(240 5.9% 10%);
-  --color-primary-foreground: hsl(0 0% 98%);
-  --color-secondary: hsl(240 4.8% 95.9%);
-  --color-secondary-foreground: hsl(240 5.9% 10%);
-  --color-muted: hsl(240 4.8% 95.9%);
-  --color-muted-foreground: hsl(240 3.8% 46.1%);
-  --color-accent: hsl(240 4.8% 95.9%);
-  --color-accent-foreground: hsl(240 5.9% 10%);
-  --color-destructive: hsl(0 84.2% 60.2%);
-  --color-destructive-foreground: hsl(0 0% 98%);
-  --color-border: hsl(240 5.9% 90%);
-  --color-input: hsl(240 5.9% 90%);
-  --color-ring: hsl(240 10% 3.9%);
-  --color-sidebar: hsl(0 0% 100%);
+  --color-background: var(--kitn-color-background, hsl(0 0% 100%));
+  --color-foreground: var(--kitn-color-foreground, hsl(240 10% 3.9%));
+  --color-card: var(--kitn-color-card, hsl(0 0% 100%));
+  --color-card-foreground: var(--kitn-color-card-foreground, hsl(240 10% 3.9%));
+  --color-popover: var(--kitn-color-popover, hsl(0 0% 100%));
+  --color-popover-foreground: var(--kitn-color-popover-foreground, hsl(240 10% 3.9%));
+  --color-primary: var(--kitn-color-primary, hsl(240 5.9% 10%));
+  --color-primary-foreground: var(--kitn-color-primary-foreground, hsl(0 0% 98%));
+  --color-secondary: var(--kitn-color-secondary, hsl(240 4.8% 95.9%));
+  --color-secondary-foreground: var(--kitn-color-secondary-foreground, hsl(240 5.9% 10%));
+  --color-muted: var(--kitn-color-muted, hsl(240 4.8% 95.9%));
+  --color-muted-foreground: var(--kitn-color-muted-foreground, hsl(240 3.8% 43%));
+  --color-accent: var(--kitn-color-accent, hsl(240 4.8% 95.9%));
+  --color-accent-foreground: var(--kitn-color-accent-foreground, hsl(240 5.9% 10%));
+  --color-destructive: var(--kitn-color-destructive, hsl(0 84.2% 60.2%));
+  --color-destructive-foreground: var(--kitn-color-destructive-foreground, hsl(0 0% 98%));
+  --color-border: var(--kitn-color-border, hsl(240 5.9% 90%));
+  --color-input: var(--kitn-color-input, hsl(240 5.9% 90%));
+  --color-ring: var(--kitn-color-ring, hsl(240 10% 3.9%));
+  --color-sidebar: var(--kitn-color-sidebar, hsl(0 0% 100%));
 
   /* Inline `code` accent. Blue text on a translucent blue chip. */
-  --color-code-foreground: hsl(224.3 76.3% 48%);
+  --color-code-foreground: var(--kitn-color-code-foreground, hsl(224.3 76.3% 48%));
 
-  --radius: 0.6rem;
+  /* Tool/status chip hues. Each chip is hue text over a 15% translucent fill of
+     the SAME hue (set in tool.tsx). The bare hue is too light to reach WCAG AA
+     (4.5:1) on the faint fill in LIGHT mode, so the light values are darkened;
+     dark mode keeps brighter hues for AA on the dark fill. Override via
+     --kitn-color-tool-* to retheme. */
+  --color-tool-blue: var(--kitn-color-tool-blue, hsl(217 91% 38%));
+  --color-tool-amber: var(--kitn-color-tool-amber, hsl(38 92% 28%));
+  --color-tool-green: var(--kitn-color-tool-green, hsl(142 71% 26%));
+  --color-tool-red: var(--kitn-color-tool-red, hsl(0 72% 42%));
+
+  --radius: var(--kitn-radius, 0.6rem);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 
+  /* Typography scale — semantic sizes shared by all components. Each generates a
+     Tailwind utility (text-caption / text-meta / text-body / text-title). To
+     restyle the kit's typography, override the namespaced --kitn-text-* token on
+     :root (e.g. `--kitn-text-body: 0.9375rem`) — it pierces the Shadow DOM via the
+     var() fallback, exactly like the --kitn-color-* tokens. The bare --text-*
+     names stay internal so a host's own --text-* can't collide. (Message/markdown/
+     input reading size also scales with the `proseSize` prop; these tokens cover
+     the fixed chrome & controls.) */
+  --text-caption: var(--kitn-text-caption, 0.6875rem);  --text-caption--line-height: 1rem;      /* 11px — micro labels, badges, sub-counts */
+  --text-meta: var(--kitn-text-meta, 0.75rem);     --text-meta--line-height: 1.1rem;       /* 12px — controls, toggles, switchers, captions */
+  --text-body: var(--kitn-text-body, 0.875rem);    --text-body--line-height: 1.45rem;      /* 14px — primary reading text */
+  --text-title: var(--kitn-text-title, 1rem);        --text-title--line-height: 1.5rem;      /* 16px — emphasis / headers */
+
   @keyframes typing { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-2px); opacity: 1 } }
   @keyframes loading-dots { 0%,100% { opacity: 0 } 50% { opacity: 1 } }
   @keyframes wave { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.6) } }
@@ -56,27 +79,33 @@
 }
 
 .dark {
-  --color-background: hsl(50 2% 9%);
-  --color-foreground: hsl(0 0% 98%);
-  --color-card: hsl(240 10% 3.9%);
-  --color-card-foreground: hsl(0 0% 98%);
-  --color-popover: hsl(240 10% 3.9%);
-  --color-popover-foreground: hsl(0 0% 98%);
-  --color-primary: hsl(0 0% 98%);
-  --color-primary-foreground: hsl(240 5.9% 10%);
-  --color-secondary: hsl(240 3.7% 15.9%);
-  --color-secondary-foreground: hsl(0 0% 98%);
-  --color-muted: hsl(240 3.7% 15.9%);
-  --color-muted-foreground: hsl(240 5% 64.9%);
-  --color-accent: hsl(240 3.7% 15.9%);
-  --color-accent-foreground: hsl(0 0% 98%);
-  --color-destructive: hsl(0 62.8% 30.6%);
-  --color-destructive-foreground: hsl(0 0% 98%);
-  --color-border: hsl(240 3.7% 15.9%);
-  --color-input: hsl(240 3.7% 15.9%);
-  --color-ring: hsl(240 4.9% 83.9%);
-  --color-sidebar: hsl(50 2% 7%);
-  --color-code-foreground: hsl(213 94% 78%);
+  --color-background: var(--kitn-color-background, hsl(50 2% 9%));
+  --color-foreground: var(--kitn-color-foreground, hsl(0 0% 98%));
+  --color-card: var(--kitn-color-card, hsl(45 4% 12%));
+  --color-card-foreground: var(--kitn-color-card-foreground, hsl(0 0% 98%));
+  --color-popover: var(--kitn-color-popover, hsl(45 4% 12%));
+  --color-popover-foreground: var(--kitn-color-popover-foreground, hsl(0 0% 98%));
+  --color-primary: var(--kitn-color-primary, hsl(0 0% 98%));
+  --color-primary-foreground: var(--kitn-color-primary-foreground, hsl(45 4% 11%));
+  --color-secondary: var(--kitn-color-secondary, hsl(45 4% 17%));
+  --color-secondary-foreground: var(--kitn-color-secondary-foreground, hsl(0 0% 98%));
+  --color-muted: var(--kitn-color-muted, hsl(45 4% 17%));
+  --color-muted-foreground: var(--kitn-color-muted-foreground, hsl(45 4% 64%));
+  --color-accent: var(--kitn-color-accent, hsl(45 4% 17%));
+  --color-accent-foreground: var(--kitn-color-accent-foreground, hsl(0 0% 98%));
+  --color-destructive: var(--kitn-color-destructive, hsl(0 62.8% 30.6%));
+  --color-destructive-foreground: var(--kitn-color-destructive-foreground, hsl(0 0% 98%));
+  --color-border: var(--kitn-color-border, hsl(45 4% 17%));
+  --color-input: var(--kitn-color-input, hsl(45 4% 17%));
+  --color-ring: var(--kitn-color-ring, hsl(45 5% 72%));
+  --color-sidebar: var(--kitn-color-sidebar, hsl(50 2% 7%));
+  --color-code-foreground: var(--kitn-color-code-foreground, hsl(213 94% 78%));
+
+  /* Tool/status chip hues — dark mode. Brighter hues reach AA on the dark fill. */
+  --color-tool-blue: var(--kitn-color-tool-blue, hsl(217 91% 70%));
+  --color-tool-amber: var(--kitn-color-tool-amber, hsl(38 92% 50%));
+  --color-tool-green: var(--kitn-color-tool-green, hsl(142 71% 45%));
+  --color-tool-red: var(--kitn-color-tool-red, hsl(0 84% 70%));
 }
 
 /* Self-contained markdown styling — replaces the typography plugin's `prose`.

package/src/ui/dialog.tsx

@@ -1,21 +0,0 @@
-import { Dialog as KDialog } from '@kobalte/core/dialog';
-import { type JSX } from 'solid-js';
-import { cn } from '../utils/cn';
-import { useChatConfig } from '../primitives/chat-config';
-
-export const Dialog = KDialog;
-export const DialogTrigger = KDialog.Trigger;
-
-export function DialogContent(props: { children: JSX.Element; class?: string; title: string }) {
-  const config = useChatConfig();
-  return (
-    <KDialog.Portal mount={config.portalMount()}>
-      <KDialog.Overlay class="fixed inset-0 z-50 bg-black/50 animate-in fade-in-0" />
-      <KDialog.Content class={cn('fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-xl bg-card p-6 shadow-xl animate-in fade-in-0 zoom-in-95 w-full max-w-md', props.class)}>
-        <KDialog.Title class="text-lg font-semibold">{props.title}</KDialog.Title>
-        {props.children}
-        <KDialog.CloseButton class="absolute right-4 top-4 text-muted-foreground hover:text-foreground" />
-      </KDialog.Content>
-    </KDialog.Portal>
-  );
-}