@kitn.ai/ui 0.28.0 → 0.30.0

package/src/components/screen.tsx

@@ -1,181 +0,0 @@
-import { createEffect, createSignal, onCleanup, Show, type Accessor, type JSX } from 'solid-js';
-import { ArrowLeft } from 'lucide-solid';
-import { cn } from '../utils/cn';
-import { createPresence } from '../ui/overlay';
-
-/** Imperative open controller, handed to a parent (the kai-screen facade) via
- *  `controllerRef` so it can drive/observe open state with `wireDisclosure`. */
-export interface ScreenController {
-  open: Accessor<boolean>;
-  setOpen: (v: boolean) => void;
-}
-
-export interface ScreenProps {
-  /** The screen body. */
-  children?: JSX.Element;
-  /** Header title text. A projected `title` slot overrides this. */
-  title?: JSX.Element;
-  /** Header title slot content (the facade's `<slot name="title" />`). Overrides `title`. */
-  titleSlot?: JSX.Element;
-  /** Header trailing cluster (the facade's `<slot name="actions" />`). */
-  actions?: JSX.Element;
-  /** Controlled open state. When set, the component never changes it itself;
-   *  drive it from `onOpenChange`. Omit for uncontrolled (internal) state. */
-  open?: boolean;
-  /** Initial open state when uncontrolled. */
-  defaultOpen?: boolean;
-  /** Show the back button (default true). */
-  back?: boolean;
-  /** Skip marking sibling elements inert/aria-hidden while open. */
-  noInert?: boolean;
-  /** The custom-element host, whose siblings get inert-ed while open. */
-  host?: () => HTMLElement | undefined;
-  /** Fires whenever open wants to change (back button / method). */
-  onOpenChange?: (open: boolean) => void;
-  /** Back navigation intent: the back button or Escape. */
-  onBack?: () => void;
-  /** Receive the open controller once mounted. */
-  controllerRef?: (api: ScreenController) => void;
-  /** Receive the focusable surface node so the facade's `focus()` can target it. */
-  surfaceRef?: (el: HTMLElement) => void;
-}
-
-/** A stable id seed for labelling the dialog by its title. */
-let idSeq = 0;
-
-/**
- * Screen is the presentational full-bleed overlay surface. It owns the hard parts
- * of being a takeover: it fills its mount point while open, marks sibling
- * elements `inert` + `aria-hidden` (the standard modal pattern), moves focus into
- * the surface on open and restores it on close, fires `onBack` on Escape, and
- * runs an enter/exit transition that honors `prefers-reduced-motion`. When closed
- * it is removed from layout (no space, not focusable). The developer owns the swap
- * (their own routing flips `open`); this owns being the overlay.
- */
-export function Screen(props: ScreenProps) {
-  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);
-  const titleId = `kai-screen-title-${++idSeq}`;
-
-  const isControlled = () => props.open !== undefined;
-  const isOpen = () => (isControlled() ? !!props.open : internalOpen());
-  const setOpen = (v: boolean) => {
-    if (!isControlled()) setInternalOpen(v);
-    props.onOpenChange?.(v);
-  };
-
-  props.controllerRef?.({ open: isOpen, setOpen });
-
-  const presence = createPresence(isOpen);
-
-  let surface: HTMLElement | undefined;
-  // The element that had focus before we opened, restored on close.
-  let restoreFocus: HTMLElement | null = null;
-  // Siblings we inert-ed, so we can undo exactly what we did.
-  let inerted: { el: HTMLElement; hadInert: boolean; hadAriaHidden: string | null }[] = [];
-
-  const back = () => props.back !== false;
-
-  const requestBack = () => props.onBack?.();
-
-  // Inert + aria-hide the host's siblings while open (skip when noInert). This is
-  // the one light-DOM touch: the standard modal pattern that makes the background
-  // non-interactive and removes it from the a11y tree, which is what justifies the
-  // dialog/aria-modal semantics on the surface.
-  const applyInert = () => {
-    if (props.noInert) return;
-    const host = props.host?.();
-    const parent = host?.parentElement;
-    if (!host || !parent) return;
-    for (const node of Array.from(parent.children)) {
-      if (node === host) continue;
-      const el = node as HTMLElement;
-      inerted.push({ el, hadInert: el.hasAttribute('inert'), hadAriaHidden: el.getAttribute('aria-hidden') });
-      el.setAttribute('inert', '');
-      el.setAttribute('aria-hidden', 'true');
-    }
-  };
-  const releaseInert = () => {
-    for (const { el, hadInert, hadAriaHidden } of inerted) {
-      if (!hadInert) el.removeAttribute('inert');
-      if (hadAriaHidden === null) el.removeAttribute('aria-hidden');
-      else el.setAttribute('aria-hidden', hadAriaHidden);
-    }
-    inerted = [];
-  };
-
-  // Drive inert + focus on the open/closed transition.
-  createEffect((wasOpen: boolean) => {
-    const open = isOpen();
-    if (open && !wasOpen) {
-      restoreFocus = (document.activeElement as HTMLElement) ?? null;
-      applyInert();
-      // Move focus into the surface once it has mounted.
-      queueMicrotask(() => surface?.focus());
-    } else if (!open && wasOpen) {
-      releaseInert();
-      // Return focus to the invoker if it's still in the document.
-      const target = restoreFocus;
-      restoreFocus = null;
-      if (target && target.isConnected) queueMicrotask(() => target.focus());
-    }
-    return open;
-    // Seed prev=false so a `defaultOpen` (open-at-mount) still runs the open branch.
-  }, false);
-
-  onCleanup(releaseInert);
-
-  // Escape fires the back intent (navigation), matching the back button.
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      e.stopPropagation();
-      requestBack();
-    }
-  };
-
-  return (
-    <Show when={presence.present()}>
-      <div
-        ref={(el) => { surface = el; presence.setRef(el); props.surfaceRef?.(el); }}
-        part="body"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={titleId}
-        tabindex="-1"
-        data-expanded={presence.state() === 'open' ? '' : undefined}
-        data-closed={presence.state() === 'closed' ? '' : undefined}
-        onKeyDown={onKeyDown}
-        // `outline-none` is DELIBERATE here and must stay: this is the
-        // `tabindex="-1"` screen container, focused programmatically on open so
-        // keyboard and screen-reader context follows the screen. It is not a
-        // tab stop, so a ring around the whole surface would be noise. Its
-        // interactive children carry their own.
-        class={cn(
-          'absolute inset-0 z-40 flex flex-col bg-background text-foreground outline-none',
-          'animate-in fade-in-0 slide-in-from-bottom-2 motion-reduce:animate-none',
-          'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:slide-out-to-bottom-2',
-        )}
-      >
-        <header part="header" class="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2">
-          <Show when={back()}>
-            <button
-              part="back"
-              type="button"
-              aria-label="Back"
-              class="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              onClick={requestBack}
-            >
-              <ArrowLeft size={16} aria-hidden="true" />
-            </button>
-          </Show>
-          <h2 part="title" id={titleId} class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
-            {/* Native shadow-slot fallback: a projected `title` slot wins; otherwise
-                the `title` prop renders as the slot's default content. */}
-            {props.titleSlot ?? props.title}
-          </h2>
-          <div class="flex shrink-0 items-center gap-1">{props.actions}</div>
-        </header>
-        <div class="min-h-0 flex-1 overflow-auto">{props.children}</div>
-      </div>
-    </Show>
-  );
-}

package/src/components/scroll-button.tsx

@@ -1,93 +0,0 @@
-import { Show } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Button } from '../ui/button';
-import { useChatContainer } from './chat-container';
-import { ArrowDown } from 'lucide-solid';
-
-/** The accessible name used when the consumer does not supply one. */
-const DEFAULT_LABEL = 'Scroll to bottom';
-
-export interface ScrollButtonProps {
-  class?: string;
-  variant?: 'outline' | 'ghost' | 'default';
-  size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
-  /**
-   * The button's accessible name. Used whether or not the label is visible, so
-   * the announced text is always localisable. Defaults to `"Scroll to bottom"`.
-   */
-  label?: string;
-  /**
-   * Also render `label` visibly beside the icon. Defaults to `false` (icon
-   * only). When it is visible the text IS the accessible name, so nothing is
-   * announced twice.
-   */
-  showLabel?: boolean;
-}
-
-/**
- * The floating chip surface.
- *
- * The shared `outline` button variant is `bg-muted/50` — half-transparent, so
- * message text showed through a control that floats over scrolling content, and
- * its edge measured 1.05:1 against the thread behind it (SC 1.4.11 wants 3:1).
- * `bg-card` is the same opaque surface popovers, dropdowns and hover cards sit
- * on; `border-input` is the kit's control edge and clears 3:1 in both themes;
- * `kai-elevation` is the shared, themeable float shadow (`--kai-shadow-color`),
- * which is what keeps an opaque button reading as ABOVE the content.
- *
- * `ghost` and `default` are explicit consumer choices about the fill, so they
- * keep theirs; every variant gets the elevation and the rounded-square radius.
- */
-function surfaceClasses(variant: ScrollButtonProps['variant']) {
-  return (variant ?? 'outline') === 'outline'
-    ? 'border border-input bg-card text-card-foreground kai-elevation'
-    : 'kai-elevation';
-}
-
-function ScrollButton(props: ScrollButtonProps) {
-  const { isAtBottom, scrollToBottom } = useChatContainer();
-  const label = () => props.label ?? DEFAULT_LABEL;
-  const showLabel = () => props.showLabel === true;
-
-  return (
-    <Button
-      variant={props.variant ?? 'outline'}
-      size={props.size ?? 'sm'}
-      // When the label is visible it IS the accessible name. An aria-label on
-      // top of it would override the visible text and leave the two able to
-      // disagree, so it is only set for the icon-only case.
-      aria-label={showLabel() ? undefined : label()}
-      // At the bottom of the thread this button is fully transparent and
-      // pointer-inert, but it stayed in the tab order — a keyboard user landed
-      // on a control they could not see, with a focus ring painted on nothing.
-      // Take it out of the tab order and hide it from assistive tech while it
-      // is invisible; both revert the moment it animates back in.
-      tabindex={isAtBottom() ? -1 : 0}
-      aria-hidden={isAtBottom() ? 'true' : undefined}
-      class={cn(
-        'rounded-lg transition-all duration-150 ease-out',
-        surfaceClasses(props.variant),
-        // Square while icon-only; a pill-ish labelled button once the text is in.
-        showLabel() ? 'h-10 w-auto gap-1.5 px-3.5 text-sm' : 'h-10 w-10 px-0',
-        !isAtBottom()
-          ? 'translate-y-0 scale-100 opacity-100'
-          : 'pointer-events-none translate-y-4 scale-95 opacity-0',
-        props.class
-      )}
-      onClick={() => scrollToBottom()}
-    >
-      {/* h-4, not the h-5 the chevron used. A ChevronDown only inks the lower
-          part of its 24px viewBox, so at a 20px box its visible mass is small;
-          ArrowDown inks the full height (stem + head), and at 20px inside a 40px
-          button it read as half the button wide and crowded the padding. 16px
-          balances the icon-only square and is the size lucide pairs with
-          text-sm, which is what the label renders at. */}
-      <ArrowDown class="h-4 w-4 shrink-0" aria-hidden="true" />
-      <Show when={showLabel()}>
-        <span>{label()}</span>
-      </Show>
-    </Button>
-  );
-}
-
-export { ScrollButton };

package/src/components/source.tsx

@@ -1,192 +0,0 @@
-import { type JSX, createContext, useContext, Show, splitProps } from 'solid-js';
-import { cn } from '../utils/cn';
-import { HoverCardRoot, HoverCardTrigger, HoverCardContent } from '../ui/hover-card';
-import { isRenderableLink } from '../primitives/link-preview';
-
-// --- Context ---
-
-interface SourceContextValue {
-  href: string;
-  domain: string;
-}
-
-const SourceContext = createContext<SourceContextValue>();
-
-function useSourceContext() {
-  const ctx = useContext(SourceContext);
-  if (!ctx) throw new Error('Source.* must be used inside <Source>');
-  return ctx;
-}
-
-// --- Source (Root) ---
-
-export interface SourceProps {
-  /** The citation's URL. OPTIONAL: every field of a model-produced citation is,
-   *  so a source can arrive with a title and no url. In that case the chip
-   *  renders as a plain, inert `<a>` with NO `href` attribute — which is valid
-   *  HTML and simply not a link — rather than `<a href="">`, which would
-   *  navigate to the current page. */
-  href?: string;
-  children: JSX.Element;
-}
-
-function Source(props: SourceProps) {
-  const raw = () => props.href ?? '';
-
-  /** The url actually put in `href`.
-   *
-   *  A citation url is MODEL-SUPPLIED: `wire/formats/openai.ts` (`sourcesOf`)
-   *  and `wire/formats/anthropic.ts` (`citations_delta`) both take it as an
-   *  arbitrary string. `javascript:`/`data:` in an href is script execution one
-   *  click away, and today the only thing stopping it is `target="_blank"` plus
-   *  current Chrome behaviour -- an accident of the browser, not a guard. Anyone
-   *  dropping `target="_blank"` for styling would silently make it live.
-   *
-   *  Filtered HERE, at render, rather than in `wire/`, for two reasons.
-   *  (1) The wire layer is OPTIONAL: a consumer with their own backend adapter
-   *  can set `messages` containing `source` parts directly and never touch
-   *  `wire/`, so a wire-side filter would leave that path exploitable while
-   *  looking fixed. Every path renders through here.
-   *  (2) `parts` should keep reporting what the model actually said, so a
-   *  consumer logging or auditing citations is not lied to. The kit refuses to
-   *  LINK the url; it does not pretend the url was never there.
-   *
-   *  `isRenderableLink` (absolute http(s) only) is the right guard rather than
-   *  `isSafeUrl` from card-routing: a citation is a reference to a page on the
-   *  web, so unlike a markdown body link it has no business being relative. */
-  const href = () => (isRenderableLink(raw()) ? raw() : '');
-
-  /** Display only, and deliberately derived from the RAW value: a blocked url
-   *  still has to label its chip, and dropping to an empty string here would
-   *  render a blank chip instead of showing the reader what arrived. The value
-   *  lands in a text node, which Solid escapes. */
-  const domain = () => {
-    const h = raw();
-    if (!h) return '';
-    try {
-      // `new URL('javascript:x')` parses fine and yields an EMPTY hostname, so
-      // a blocked citation would otherwise label an empty chip. Fall back to the
-      // raw string: the reader sees what arrived, just not as a link.
-      return new URL(h).hostname || h;
-    } catch {
-      return h.split('/').pop() || h;
-    }
-  };
-
-  return (
-    <SourceContext.Provider value={{ get href() { return href(); }, get domain() { return domain(); } }}>
-      <HoverCardRoot openDelay={150}>
-        {props.children}
-      </HoverCardRoot>
-    </SourceContext.Provider>
-  );
-}
-
-// --- SourceTrigger ---
-
-export interface SourceTriggerProps {
-  label?: string | number;
-  showFavicon?: boolean;
-  class?: string;
-}
-
-function SourceTrigger(props: SourceTriggerProps) {
-  const ctx = useSourceContext();
-  const labelToShow = () => props.label ?? ctx.domain.replace('www.', '');
-
-  return (
-    <HoverCardTrigger>
-      <a
-        // `undefined` OMITS the attribute — see SourceProps.href.
-        href={ctx.href || undefined}
-        target="_blank"
-        rel="noopener noreferrer"
-        class={cn(
-          'bg-muted text-foreground/80 hover:bg-muted-foreground/30 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150',
-          props.showFavicon ? 'pr-2 pl-1' : 'px-2',
-          props.class
-        )}
-      >
-        {/* No url, no favicon to look up. */}
-        <Show when={props.showFavicon && ctx.href}>
-          <img
-            src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(ctx.href)}`}
-            alt="favicon"
-            width={14}
-            height={14}
-            class="size-3.5 rounded-full"
-          />
-        </Show>
-        <span class="truncate tabular-nums text-center font-normal">{labelToShow()}</span>
-      </a>
-    </HoverCardTrigger>
-  );
-}
-
-// --- SourceContent ---
-
-export interface SourceContentProps {
-  title: string;
-  description: string;
-  class?: string;
-}
-
-function SourceContent(props: SourceContentProps) {
-  const ctx = useSourceContext();
-  return (
-    <HoverCardContent class={cn('w-80 p-0 shadow-xs', props.class)}>
-      <a
-        // `undefined` OMITS the attribute — see SourceProps.href.
-        href={ctx.href || undefined}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="flex flex-col gap-2 p-3"
-      >
-        {/* The domain header row only means anything when there IS a url. */}
-        <Show when={ctx.href}>
-          <div class="flex items-center gap-1.5">
-            <img
-              src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(ctx.href)}`}
-              alt="favicon"
-              class="size-4 rounded-full"
-              width={16}
-              height={16}
-            />
-            {/* Citation title/domain is CONTENT, not a control — was the BRAND
-                token. `text-foreground/80` matches how `SourceTrigger` above
-                already renders this same domain text (inherited from its `<a
-                class="... text-foreground/80 ...">`), so the hover-card header
-                and the trigger chip agree on the same domain's color. */}
-            <div class="text-foreground/80 truncate text-sm">
-              {ctx.domain.replace('www.', '')}
-            </div>
-          </div>
-        </Show>
-        <Show when={props.title}>
-          <div class="line-clamp-2 text-sm font-medium">{props.title}</div>
-        </Show>
-        <Show when={props.description}>
-          <div class="text-muted-foreground line-clamp-2 text-sm">
-            {props.description}
-          </div>
-        </Show>
-      </a>
-    </HoverCardContent>
-  );
-}
-
-// --- SourceList (convenience) ---
-
-export interface SourceListProps {
-  children: JSX.Element;
-  class?: string;
-  /** `::part` name(s) exposed on the row. The message body passes `"citations"`
-   *  so consumers can target the citation row from outside the shadow boundary. */
-  part?: string;
-}
-
-function SourceList(props: SourceListProps) {
-  return <div part={props.part} class={cn('flex flex-wrap gap-1.5 mt-3', props.class)}>{props.children}</div>;
-}
-
-export { Source, SourceTrigger, SourceContent, SourceList };