@kitn.ai/ui 0.16.0 → 0.18.0

package/src/ui/tooltip.tsx

@@ -1,45 +1,95 @@
-import { createSignal, createUniqueId, onCleanup, Show, type JSX, splitProps } from 'solid-js';
+import { createSignal, createUniqueId, onCleanup, Show, type JSX, type Accessor, splitProps } from 'solid-js';
 import { Portal } from 'solid-js/web';
+import { type Placement } from '@floating-ui/dom';
 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; openDelay?: number; }
+/** Imperative open controller, handed to a parent (e.g. the kai-tooltip facade)
+ *  via `controllerRef` so it can drive/observe open state. */
+export interface TooltipController { open: Accessor<boolean>; setOpen: (v: boolean) => void; }
+
+export interface TooltipProps {
+  content: string;
+  children: JSX.Element;
+  class?: string;
+  openDelay?: number;
+  /** Delay (ms) before it hides after the pointer leaves. Defaults to 0 (hides
+   *  immediately). */
+  closeDelay?: number;
+  /** Preferred placement (post flip/shift). Defaults to `'top'`. */
+  placement?: Placement;
+  /** Initial open state on mount (uncontrolled seed). */
+  defaultOpen?: boolean;
+  /** When true, hover/focus (and `show()`) never opens the tooltip. */
+  disabled?: boolean;
+  /** Receive the open controller (open accessor + setOpen) once mounted. */
+  controllerRef?: (api: TooltipController) => void;
+  dismissOnClick?: boolean;
+}
 
 export function Tooltip(props: TooltipProps) {
-  const [local] = splitProps(props, ['content', 'children', 'class', 'openDelay']);
+  const [local] = splitProps(props, ['content', 'children', 'class', 'openDelay', 'closeDelay', 'placement', 'defaultOpen', 'disabled', 'controllerRef', 'dismissOnClick']);
   const config = useChatConfig();
   const id = createUniqueId();
-  const [open, setOpen] = createSignal(false);
+  const [open, setOpen] = createSignal(local.defaultOpen ?? false);
   const [triggerEl, setTriggerEl] = createSignal<HTMLElement>();
   const [contentEl, setContentEl] = createSignal<HTMLElement>();
+  // Hand the open controller up so a facade (kai-tooltip) can drive/observe it.
+  // setOpen is gated on `disabled` so the disclosure surface (show/hide/toggle)
+  // can never force the tooltip open while disabled.
+  local.controllerRef?.({ open, setOpen: (v) => setOpen(v && !local.disabled) });
   let timer: number | undefined;
+  // True for the span of a click (pointerdown → focus → click). Suppresses the
+  // focus-show so clicking a hovered trigger DISMISSES it instead of flickering
+  // hide→show→hide (pointerdown hid it, the click-induced focus re-showed it,
+  // then click hid it again). Keyboard focus has no preceding pointerdown, so it
+  // still shows the tooltip normally.
+  let pointerDown = false;
 
   const [pointerInside, setPointerInside] = createSignal(false);
   const [focusInside, setFocusInside] = createSignal(false);
 
   const show = (delay = 0) => {
+    if (local.disabled) return;
     clearTimeout(timer);
     if (delay) timer = window.setTimeout(() => setOpen(true), delay);
     else setOpen(true);
   };
-  const hide = () => { clearTimeout(timer); setOpen(false); };
+  const hide = () => {
+    clearTimeout(timer);
+    const delay = local.closeDelay ?? 0;
+    if (delay) timer = window.setTimeout(() => setOpen(false), delay);
+    else setOpen(false);
+  };
   const maybeHide = () => { if (!pointerInside() && !focusInside()) hide(); };
+  // Action-style tooltips should dismiss when their trigger is clicked: the pointer
+  // never "leaves", so reset the inside flags and force-close until the next genuine
+  // hover/focus. Opt out with dismissOnClick={false}.
+  const dismiss = () => { if (local.dismissOnClick === false) return; setPointerInside(false); setFocusInside(false); hide(); };
   onCleanup(() => clearTimeout(timer));
 
   const presence = createPresence(open);
-  const position = usePosition(triggerEl, contentEl, { placement: 'top', gutter: 6 });
+  const position = usePosition(triggerEl, contentEl, {
+    placement: local.placement ?? 'top',
+    gutter: 6,
+    // Trigger removed from the DOM -> close so the tooltip portal doesn't orphan.
+    onDisconnect: () => setOpen(false),
+  });
   useDismiss({ enabled: open, onDismiss: hide, refs: () => [triggerEl(), contentEl()] });
 
   return (
     <>
       <As
         as="span"
+        class="inline-flex"
         ref={setTriggerEl}
         aria-describedby={open() ? id : undefined}
         onPointerEnter={() => { setPointerInside(true); show(local.openDelay ?? 600); }}
         onPointerLeave={() => { setPointerInside(false); maybeHide(); }}
-        onFocusIn={() => { setFocusInside(true); show(); }}
+        onPointerDown={() => { pointerDown = true; dismiss(); window.setTimeout(() => { pointerDown = false; }, 0); }}
+        onClick={dismiss}
+        onFocusIn={() => { setFocusInside(true); if (!pointerDown) show(); }}
         onFocusOut={(e: FocusEvent) => { const t = triggerEl(); if (t && t.contains(e.relatedTarget as Node)) return; setFocusInside(false); maybeHide(); }}
       >
         {local.children}

package/theme.css

@@ -23,10 +23,57 @@
   --color-secondary-foreground: var(--kai-color-secondary-foreground, hsl(240 5.9% 10%));
   --color-muted: var(--kai-color-muted, hsl(240 4.8% 95.9%));
   --color-muted-foreground: var(--kai-color-muted-foreground, hsl(240 3.8% 43%));
+  /* Subtle SURFACE — an opaque "muted panel" for things that sit OVER content
+     (the prompt input, message bubbles, artifact/card headers, chips). CALCULATED
+     from existing tokens — `--color-muted` blended 40% onto `--color-background`
+     — so it tracks the theme (incl. dark) automatically and needs no hand-picked
+     value. SOLID (no alpha), so nothing behind it bleeds through. This replaces
+     ad-hoc `bg-muted/40` surfaces. Retint via the --kai-color-surface knob (or a
+     bare value); --color-surface-strong is the stronger step (hover/raised) and
+     --color-surface-sunken is recessed BELOW the base surface (wells, or a banner
+     that sits behind a card). Sunken is theme-specific: "darker than the card"
+     means a LOWER muted% in dark but a HIGHER one in light, so the two scopes
+     can't share a number — see the .dark block. */
+  --color-surface: var(--kai-color-surface, color-mix(in srgb, var(--color-muted) 40%, var(--color-background)));
+  --color-surface-strong: var(--kai-color-surface-strong, color-mix(in srgb, var(--color-muted) 60%, var(--color-background)));
+  --color-surface-sunken: var(--kai-color-surface-sunken, color-mix(in srgb, var(--color-muted) 85%, var(--color-background)));
   --color-accent: var(--kai-color-accent, hsl(240 4.8% 95.9%));
   --color-accent-foreground: var(--kai-color-accent-foreground, hsl(240 5.9% 10%));
   --color-destructive: var(--kai-color-destructive, hsl(0 72% 45%));
   --color-destructive-foreground: var(--kai-color-destructive-foreground, hsl(0 0% 98%));
+  /* Semantic status colors - solid fills with a legible foreground, matched to
+     the kit's tool-green / -amber / -blue hues so they read on-brand. Use
+     bg-success / bg-warning / bg-info with the matching -foreground for badges,
+     banners, and buttons; or text-success / -warning / -info on a soft tint
+     (below). destructive (above) is the danger/error member of the same family.
+     Light uses darker hues so the color carries a light foreground AND stays
+     legible as text on a pale tint; dark (see .dark) flips to brighter hues over
+     a near-black foreground. Override via --kai-color-success / -warning / -info
+     (+ -foreground). */
+  --color-success: var(--kai-color-success, hsl(142 71% 30%));
+  --color-success-foreground: var(--kai-color-success-foreground, hsl(0 0% 98%));
+  --color-warning: var(--kai-color-warning, hsl(38 92% 30%));
+  --color-warning-foreground: var(--kai-color-warning-foreground, hsl(0 0% 98%));
+  --color-info: var(--kai-color-info, hsl(217 91% 42%));
+  --color-info-foreground: var(--kai-color-info-foreground, hsl(0 0% 98%));
+  /* Soft tinted status surfaces - OPAQUE, theme-tracking fills derived as ~14% of
+     the status hue blended onto the background. Use these for subtle callouts /
+     banners instead of an eyeballed bg-success/10; pair with text-success /
+     -warning / -info / -destructive. Derived, so declared in BOTH light and dark
+     (a color-mix resolves where it's declared - see the surface tokens above). A
+     bare bg- utility for a color-mix token is added at the bottom (see bg-surface). */
+  --color-success-soft: var(--kai-color-success-soft, color-mix(in oklab, var(--color-success) 14%, var(--color-background)));
+  --color-warning-soft: var(--kai-color-warning-soft, color-mix(in oklab, var(--color-warning) 14%, var(--color-background)));
+  --color-info-soft: var(--kai-color-info-soft, color-mix(in oklab, var(--color-info) 14%, var(--color-background)));
+  --color-destructive-soft: var(--kai-color-destructive-soft, color-mix(in oklab, var(--color-destructive) 14%, var(--color-background)));
+  /* Interaction-state backgrounds - opaque, theme-tracking fills for row/control
+     states so consumers stop eyeballing /10 opacities. --color-hover is a subtle
+     neutral (a little --color-muted on the background); --color-selected is a
+     faint --color-primary tint so a selected row tracks the brand. Use bg-hover /
+     bg-selected. Derived, so declared in BOTH light and dark; bare bg- utilities
+     added at the bottom. */
+  --color-hover: var(--kai-color-hover, color-mix(in oklab, var(--color-muted) 60%, var(--color-background)));
+  --color-selected: var(--kai-color-selected, color-mix(in oklab, var(--color-primary) 8%, var(--color-background)));
   --color-border: var(--kai-color-border, hsl(240 5.9% 90%));
   --color-input: var(--kai-color-input, hsl(240 5.9% 90%));
   /* Focus ring — a deliberate blue (not a neutral) so keyboard focus is always
@@ -103,10 +150,36 @@
   --color-secondary-foreground: var(--kai-color-secondary-foreground, hsl(0 0% 98%));
   --color-muted: var(--kai-color-muted, hsl(45 4% 17%));
   --color-muted-foreground: var(--kai-color-muted-foreground, hsl(45 4% 64%));
+  /* Re-declared in the dark scope so the color-mix recomputes with the DARK
+     muted/background (a derived token is computed where it's declared, not where
+     it's used — see the light --color-surface for the full note). */
+  --color-surface: var(--kai-color-surface, color-mix(in srgb, var(--color-muted) 40%, var(--color-background)));
+  --color-surface-strong: var(--kai-color-surface-strong, color-mix(in srgb, var(--color-muted) 60%, var(--color-background)));
+  /* Sunken: in dark a LOWER muted% is darker (blends toward the dark background). */
+  --color-surface-sunken: var(--kai-color-surface-sunken, color-mix(in srgb, var(--color-muted) 18%, var(--color-background)));
   --color-accent: var(--kai-color-accent, hsl(45 4% 17%));
   --color-accent-foreground: var(--kai-color-accent-foreground, hsl(0 0% 98%));
   --color-destructive: var(--kai-color-destructive, hsl(0 62.8% 30.6%));
   --color-destructive-foreground: var(--kai-color-destructive-foreground, hsl(0 0% 98%));
+  /* Semantic status colors - dark mode flips to the brighter tool-* dark hues
+     (matching the chip values) carried over a near-black foreground, so the color
+     both reads as text on a dark soft tint AND backs a legible foreground. See
+     the light @theme note. */
+  --color-success: var(--kai-color-success, hsl(142 71% 45%));
+  --color-success-foreground: var(--kai-color-success-foreground, hsl(45 4% 11%));
+  --color-warning: var(--kai-color-warning, hsl(38 92% 50%));
+  --color-warning-foreground: var(--kai-color-warning-foreground, hsl(45 4% 11%));
+  --color-info: var(--kai-color-info, hsl(217 91% 70%));
+  --color-info-foreground: var(--kai-color-info-foreground, hsl(45 4% 11%));
+  /* Soft status surfaces + interaction states - re-declared so each color-mix
+     recomputes with the DARK hues/background (a derived token resolves where it's
+     declared; see the light block for the full note). */
+  --color-success-soft: var(--kai-color-success-soft, color-mix(in oklab, var(--color-success) 14%, var(--color-background)));
+  --color-warning-soft: var(--kai-color-warning-soft, color-mix(in oklab, var(--color-warning) 14%, var(--color-background)));
+  --color-info-soft: var(--kai-color-info-soft, color-mix(in oklab, var(--color-info) 14%, var(--color-background)));
+  --color-destructive-soft: var(--kai-color-destructive-soft, color-mix(in oklab, var(--color-destructive) 14%, var(--color-background)));
+  --color-hover: var(--kai-color-hover, color-mix(in oklab, var(--color-muted) 60%, var(--color-background)));
+  --color-selected: var(--kai-color-selected, color-mix(in oklab, var(--color-primary) 8%, var(--color-background)));
   --color-border: var(--kai-color-border, hsl(45 4% 17%));
   --color-input: var(--kai-color-input, hsl(45 4% 17%));
   --color-ring: var(--kai-color-ring, hsl(217 91% 68%));
@@ -187,3 +260,43 @@
 }
 .scrollbar-thin::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); }
 .scrollbar-thin::-webkit-scrollbar-corner { background: transparent; }
+
+/* Surface utilities — `bg-surface` / `bg-surface-strong` paint the opaque,
+   theme-derived surface tokens (see --color-surface above). Defined explicitly
+   because a color-mix-valued @theme token does NOT emit a bare `bg-` utility on
+   its own (only opacity variants). Use these for panels that sit OVER content
+   instead of `bg-muted/NN`. */
+@utility bg-surface {
+  background-color: var(--color-surface);
+}
+@utility bg-surface-strong {
+  background-color: var(--color-surface-strong);
+}
+@utility bg-surface-sunken {
+  background-color: var(--color-surface-sunken);
+}
+
+/* Soft-status + interaction-state utilities. Same reason as bg-surface above: a
+   color-mix-valued @theme token does NOT emit a bare `bg-` utility on its own, so
+   bg-success-soft / bg-warning-soft / bg-info-soft / bg-destructive-soft and
+   bg-hover / bg-selected are declared here. (The SOLID tokens - success / warning
+   / info + their -foreground - are plain hsl values, so bg-success / text-success
+   etc. ARE auto-generated by @theme and need no explicit utility.) */
+@utility bg-success-soft {
+  background-color: var(--color-success-soft);
+}
+@utility bg-warning-soft {
+  background-color: var(--color-warning-soft);
+}
+@utility bg-info-soft {
+  background-color: var(--color-info-soft);
+}
+@utility bg-destructive-soft {
+  background-color: var(--color-destructive-soft);
+}
+@utility bg-hover {
+  background-color: var(--color-hover);
+}
+@utility bg-selected {
+  background-color: var(--color-selected);
+}

package/dist/components/slash-command.d.ts

@@ -1,15 +0,0 @@
-export interface SlashCommandItem {
-    id: string;
-    label: string;
-    description?: string;
-    category?: string;
-}
-export interface SlashCommandProps {
-    commands: SlashCommandItem[];
-    activeIds?: string[];
-    onSelect: (command: SlashCommandItem) => void;
-    compact?: boolean;
-    class?: string;
-}
-declare function SlashCommand(props: SlashCommandProps): import("solid-js").JSX.Element;
-export { SlashCommand };

package/dist/kitn-chat.es.js

@@ -1 +0,0 @@
-import{c as i,i as g}from"./register-ujhr1nBS.js";export{i as configureCodeHighlighting,g as isCodeHighlightingEnabled};