@kitn.ai/ui 0.17.0 → 0.18.0

package/src/components/card.tsx

@@ -1,6 +1,7 @@
-import { type JSX, Show, splitProps, mergeProps, createUniqueId } from 'solid-js';
+import { type JSX, Show, splitProps, mergeProps, createSignal, createUniqueId } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
 import { cn } from '../utils/cn';
-import { AlertTriangle } from 'lucide-solid';
+import { AlertTriangle, X } from 'lucide-solid';
 
 export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /** Heading rendered in the card chrome (the contract's CardEnvelope.title).
@@ -19,6 +20,25 @@ export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /** Stable id for the heading (so composing cards can `aria-labelledby` it).
    *  Auto-generated when omitted. */
   headingId?: string;
+  /** Render a dismiss (×) button that hides the card and calls `onDismiss`.
+   *  Opt-in, OFF by default — the contract cards never set it, so they are
+   *  unaffected. */
+  dismissible?: boolean;
+  /** Called after the card is dismissed via its ×. */
+  onDismiss?: () => void;
+  /** Render the whole card as a link (`<a>`). Wins over `clickable`. */
+  href?: string;
+  /** `target` for the `href` anchor. */
+  target?: string;
+  /** `rel` for the `href` anchor (default `noopener noreferrer` when `target="_blank"`). */
+  rel?: string;
+  /** Make the whole card behave like a button: `role="button"`, a tabindex, and
+   *  Enter/Space activation, firing `onCardClick`. Ignored when `href` is set.
+   *  A clickable/href card must NOT also contain footer action buttons — that
+   *  nests interactive elements. Use `actions` OR clickable, never both. */
+  clickable?: boolean;
+  /** Called when a `clickable` (or `href`) card is activated (click, or Enter/Space). */
+  onCardClick?: (event: MouseEvent | KeyboardEvent) => void;
 }
 
 /**
@@ -28,6 +48,14 @@ export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * "never a broken/partial card" rule). It is intentionally chrome-only: it reads
  * no `CardContext` and emits no `CardEvent` — the cards that compose it (e.g.
  * `kai-form`) own the contract interaction.
+ *
+ * The optional `dismissible` / `href` / `clickable` behaviors are all OFF by
+ * default, so the contract cards (which set none of them) keep their original
+ * presentational behavior unchanged.
+ *
+ * a11y: a `clickable` or `href` card MUST NOT also contain footer action buttons
+ * — that nests interactive controls inside a button/link. Use `actions` OR
+ * make the card clickable, never both.
  */
 export function Card(props: CardProps): JSX.Element {
   const merged = mergeProps({ dense: false }, props);
@@ -39,6 +67,13 @@ export function Card(props: CardProps): JSX.Element {
     'errorMessage',
     'dense',
     'headingId',
+    'dismissible',
+    'onDismiss',
+    'href',
+    'target',
+    'rel',
+    'clickable',
+    'onCardClick',
     'class',
     'children',
   ]);
@@ -48,19 +83,36 @@ export function Card(props: CardProps): JSX.Element {
   const hasError = () => local.errorMessage !== undefined && local.errorMessage !== '';
   const hasHeader = () => Boolean(local.heading) || Boolean(local.description);
 
-  return (
-    <div
-      class={cn(
-        'flex flex-col rounded-xl border border-border bg-card text-card-foreground kai-elevation-sm',
-        local.dense ? 'gap-2.5 p-3.5' : 'gap-4 p-5',
-        local.class,
-      )}
-      {...rest}
-    >
-      <Show when={local.media}>
-        <div class="overflow-hidden rounded-lg">{local.media}</div>
-      </Show>
+  const [open, setOpen] = createSignal(true);
+  const dismiss = (event: MouseEvent) => {
+    // Don't let the × activate a clickable/href card underneath it.
+    event.stopPropagation();
+    setOpen(false);
+    local.onDismiss?.();
+  };
+
+  const isLink = () => Boolean(local.href);
+  const isButton = () => !isLink() && Boolean(local.clickable);
+  const isInteractive = () => isLink() || isButton();
 
+  const activate = (event: MouseEvent | KeyboardEvent) => local.onCardClick?.(event);
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (!isButton()) return;
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+      event.preventDefault();
+      activate(event);
+    }
+  };
+
+  // The interactive elements (`<a>` / role="button") get keyboard + hover/focus
+  // affordances; the plain card is a `<div>`. Anchors carry a safe default `rel`
+  // when opening a new tab.
+  const rel = () =>
+    local.rel ?? (local.target === '_blank' ? 'noopener noreferrer' : undefined);
+
+  // The card's heading + body + actions column.
+  const inner = (
+    <>
       <Show when={hasHeader()}>
         <div
           class={cn(
@@ -105,6 +157,48 @@ export function Card(props: CardProps): JSX.Element {
           <span>{local.errorMessage}</span>
         </div>
       </Show>
-    </div>
+    </>
+  );
+
+  return (
+    <Show when={open()}>
+      <Dynamic
+        component={isLink() ? 'a' : 'div'}
+        part="card"
+        href={isLink() ? local.href : undefined}
+        target={isLink() ? local.target : undefined}
+        rel={isLink() ? rel() : undefined}
+        role={isButton() ? 'button' : undefined}
+        tabindex={isButton() ? 0 : undefined}
+        onClick={isInteractive() ? activate : undefined}
+        onKeyDown={isButton() ? onKeyDown : undefined}
+        class={cn(
+          'relative flex flex-col rounded-xl border border-border bg-card text-card-foreground kai-elevation-sm',
+          local.dense ? 'gap-2.5 p-3.5' : 'gap-4 p-5',
+          isInteractive() &&
+            'cursor-pointer no-underline transition-colors hover:border-ring hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          local.class,
+        )}
+        {...rest}
+      >
+        <Show when={local.dismissible}>
+          <button
+            type="button"
+            part="dismiss"
+            aria-label="Dismiss"
+            onClick={dismiss}
+            class="absolute right-2.5 top-2.5 z-10 shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          >
+            <X class="size-3.5" aria-hidden="true" />
+          </button>
+        </Show>
+
+        <Show when={local.media}>
+          <div class="overflow-hidden rounded-lg">{local.media}</div>
+        </Show>
+
+        {inner}
+      </Dynamic>
+    </Show>
   );
 }

package/src/components/chain-of-thought.tsx

@@ -1,4 +1,11 @@
-import { type JSX, splitProps, children as resolveChildren, For, Show } from 'solid-js';
+import {
+  type JSX,
+  type Accessor,
+  splitProps,
+  createSignal,
+  For,
+  Show,
+} from 'solid-js';
 import { cn } from '../utils/cn';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../ui/collapsible';
 import { ChevronDown, Circle } from 'lucide-solid';
@@ -114,6 +121,15 @@ export interface ChainOfThoughtStepProps {
   children: JSX.Element;
   class?: string;
   isLast?: boolean;
+  /** Controlled open state. When provided, the step's Collapsible is driven by
+   *  this value (the parent owns it — used by the Accordion model below). When
+   *  OMITTED the step stays uncontrolled, preserving the original behaviour
+   *  (every step independently toggleable, starting closed). */
+  open?: boolean;
+  /** Called with the desired next open state when the user clicks the trigger.
+   *  Only meaningful when `open` is also provided (controlled mode); the parent
+   *  Accordion routes this through its open-set handler. */
+  onOpenChange?: (open: boolean) => void;
 }
 
 function ChainOfThoughtStep(props: ChainOfThoughtStepProps) {
@@ -121,6 +137,8 @@ function ChainOfThoughtStep(props: ChainOfThoughtStepProps) {
     <Collapsible
       class={cn('group', props.class)}
       data-last={props.isLast ?? false}
+      open={props.open}
+      onOpenChange={props.onOpenChange}
     >
       {props.children}
       <div class="flex justify-start group-data-[last=true]:hidden">
@@ -130,10 +148,201 @@ function ChainOfThoughtStep(props: ChainOfThoughtStepProps) {
   );
 }
 
+// --- Accordion model (the kai-chain-of-thought interaction surface) ---
+
+/** Open-mode: `multiple` (any number of steps open at once — the historical
+ *  default) or `single` (at most one open; opening a step closes the others). */
+export type ChainOfThoughtType = 'single' | 'multiple';
+
+/**
+ * A reasoning step descriptor. `id` is an OPTIONAL stable key — the Accordion's
+ * open-set keys use `step.id` when present, else `String(index)`. So a consumer
+ * who wants to drive `value`/`defaultValue` (or read `kai-value-change`) by a
+ * meaningful key should set `id`; otherwise the step's position is its key.
+ */
+export interface ChainOfThoughtStepData {
+  /** The step's heading (the always-visible trigger). */
+  label: string;
+  /** Optional expandable detail. */
+  content?: string;
+  /** Optional stable key for the open-set/value model (defaults to the index). */
+  id?: string;
+}
+
+/**
+ * Imperative handle exposed via `controllerRef` so the `<kai-chain-of-thought>`
+ * facade can drive/observe the Accordion's open set. Index-based to match the
+ * `expand(index?)`/`collapse(index?)`/`toggle(index?)` method signatures; the
+ * controller resolves the index → step key internally. All setters flow through
+ * the same open-set mutate path as user clicks, so they all emit
+ * `kai-value-change` via `onValueChange`.
+ */
+export interface ChainOfThoughtController {
+  /** Current open keys, normalised per `type` (string in single, string[] in multiple). */
+  value: Accessor<string | string[]>;
+  /** Open one step by index, or ALL steps when `index` is omitted. */
+  expand: (index?: number) => void;
+  /** Close one step by index, or ALL steps when `index` is omitted. */
+  collapse: (index?: number) => void;
+  /** Flip one step's open state by index. */
+  toggle: (index?: number) => void;
+}
+
+export interface ChainOfThoughtAccordionProps {
+  /** The reasoning steps to render. */
+  steps: ChainOfThoughtStepData[];
+  /** Open mode. Default `multiple` (the historical behaviour). */
+  type?: ChainOfThoughtType;
+  /** Controlled open step key(s). When provided it WINS over internal state. */
+  value?: string | string[];
+  /** Uncontrolled initial open step key(s). Seeds the internal open-set. */
+  defaultValue?: string | string[];
+  /** Fired whenever the open set changes (user click OR a controller method).
+   *  The single emit point — the facade turns this into `kai-value-change`. The
+   *  payload is a string in `single` mode, a string[] in `multiple` mode. */
+  onValueChange?: (value: string | string[]) => void;
+  /** Receive the imperative controller once set up (Pattern C). */
+  controllerRef?: (api: ChainOfThoughtController) => void;
+  class?: string;
+}
+
+/** Normalise a `string | string[]` (or undefined) seed to a Set of keys. */
+function toKeySet(value: string | string[] | undefined): Set<string> {
+  if (value == null) return new Set();
+  return new Set(Array.isArray(value) ? value : [value]);
+}
+
+/**
+ * The full Accordion-model root used by `<kai-chain-of-thought>`. Lifts each
+ * step's open state into a controlled/uncontrolled open-set:
+ *  - seeded from `defaultValue` (normalised string|string[] → Set);
+ *  - when `value` is provided it WINS (controlled);
+ *  - a trigger click updates the set respecting `single` vs `multiple` and emits
+ *    via `onValueChange` — in single mode opening a step closes the others;
+ *  - each step's Collapsible is driven (controlled) by its membership in the set.
+ *
+ * With NO new props (type defaults to `multiple`, no value/defaultValue), every
+ * step starts closed and is independently toggleable — identical to the old
+ * behaviour, just with the open state lifted here so methods/events can observe
+ * and drive it.
+ */
+function ChainOfThoughtAccordion(props: ChainOfThoughtAccordionProps) {
+  const [internal, setInternal] = createSignal<Set<string>>(toKeySet(props.defaultValue));
+
+  const type = (): ChainOfThoughtType => props.type ?? 'multiple';
+
+  // The step key: explicit id when present, else the index as a string.
+  const keyOf = (step: ChainOfThoughtStepData, index: number) => step.id ?? String(index);
+
+  // Controlled `value` wins; otherwise the internal signal owns the open-set.
+  const isControlled = () => props.value !== undefined;
+  const openSet = (): Set<string> => (isControlled() ? toKeySet(props.value) : internal());
+
+  const isOpen = (key: string) => openSet().has(key);
+
+  // Shape the open-set as the public value: a single string (or '') in single
+  // mode, a string[] in multiple mode.
+  const toValue = (set: Set<string>): string | string[] => {
+    if (type() === 'single') {
+      const first = set.values().next();
+      return first.done ? '' : first.value;
+    }
+    return [...set];
+  };
+
+  // The single mutate path — shared by trigger clicks and controller methods.
+  // Computes the next open-set, writes it (uncontrolled only) and ALWAYS emits
+  // onValueChange so both user + programmatic changes flow to kai-value-change.
+  const commit = (next: Set<string>) => {
+    const cur = openSet();
+    // No-op if the set is unchanged (avoids redundant events).
+    if (cur.size === next.size && [...cur].every((k) => next.has(k))) return;
+    if (!isControlled()) setInternal(next);
+    props.onValueChange?.(toValue(next));
+  };
+
+  // Set a single key's open state, respecting single vs multiple.
+  const setKeyOpen = (key: string, open: boolean) => {
+    if (type() === 'single') {
+      commit(open ? new Set([key]) : new Set());
+      return;
+    }
+    const next = new Set(openSet());
+    if (open) next.add(key); else next.delete(key);
+    commit(next);
+  };
+
+  // Resolve a step index → key (undefined when out of range).
+  const keyAt = (index: number): string | undefined => {
+    const step = props.steps[index];
+    return step ? keyOf(step, index) : undefined;
+  };
+
+  const allKeys = (): string[] => props.steps.map((s, i) => keyOf(s, i));
+
+  // --- Controller (Pattern C): hand the facade an index-based handle. Every
+  //     setter routes through commit() so methods + clicks share one emit point.
+  props.controllerRef?.({
+    value: () => toValue(openSet()),
+    expand: (index?: number) => {
+      if (index === undefined) {
+        // Open all. In single mode only one can be open — keep the last step.
+        if (type() === 'single') {
+          const keys = allKeys();
+          commit(keys.length ? new Set([keys[keys.length - 1]]) : new Set());
+        } else {
+          commit(new Set(allKeys()));
+        }
+        return;
+      }
+      const key = keyAt(index);
+      if (key !== undefined) setKeyOpen(key, true);
+    },
+    collapse: (index?: number) => {
+      if (index === undefined) {
+        commit(new Set());
+        return;
+      }
+      const key = keyAt(index);
+      if (key !== undefined) setKeyOpen(key, false);
+    },
+    toggle: (index?: number) => {
+      if (index === undefined) return;
+      const key = keyAt(index);
+      if (key !== undefined) setKeyOpen(key, !isOpen(key));
+    },
+  });
+
+  return (
+    <ChainOfThought class={props.class}>
+      <For each={props.steps}>
+        {(step, i) => {
+          const key = () => keyOf(step, i());
+          return (
+            <ChainOfThoughtStep
+              isLast={i() === props.steps.length - 1}
+              open={isOpen(key())}
+              onOpenChange={(open) => setKeyOpen(key(), open)}
+            >
+              <ChainOfThoughtTrigger>{step.label}</ChainOfThoughtTrigger>
+              <Show when={step.content}>
+                <ChainOfThoughtContent>
+                  <ChainOfThoughtItem>{step.content}</ChainOfThoughtItem>
+                </ChainOfThoughtContent>
+              </Show>
+            </ChainOfThoughtStep>
+          );
+        }}
+      </For>
+    </ChainOfThought>
+  );
+}
+
 export {
   ChainOfThought,
   ChainOfThoughtStep,
   ChainOfThoughtTrigger,
   ChainOfThoughtContent,
   ChainOfThoughtItem,
+  ChainOfThoughtAccordion,
 };

package/src/components/chat-scope-picker.tsx

@@ -1,6 +1,6 @@
 import { splitProps, Show, For } from 'solid-js';
 import { cn } from '../utils/cn';
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '../ui/dropdown';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, type DropdownController } from '../ui/dropdown';
 import { Button } from '../ui/button';
 import type { SearchFilters } from '../types';
 
@@ -10,12 +10,22 @@ export interface ChatScopePickerProps {
   availableAuthors?: string[];
   availableTags?: string[];
   class?: string;
+  /** Initial open state of the dropdown (uncontrolled seed). */
+  defaultOpen?: boolean;
+  /** Disable the trigger — click/keyboard no longer open the dropdown. */
+  disabled?: boolean;
+  /** Receive the dropdown's open controller (forwarded from the inner Dropdown). */
+  controllerRef?: (api: DropdownController) => void;
 }
 
 export function ChatScopePicker(props: ChatScopePickerProps) {
-  const [local] = splitProps(props, ['currentLabel', 'onScopeChange', 'availableAuthors', 'availableTags', 'class']);
+  const [local] = splitProps(props, ['currentLabel', 'onScopeChange', 'availableAuthors', 'availableTags', 'class', 'defaultOpen', 'disabled', 'controllerRef']);
   return (
-    <Dropdown>
+    <Dropdown
+      defaultOpen={local.defaultOpen}
+      disabled={local.disabled}
+      controllerRef={local.controllerRef}
+    >
       <DropdownTrigger as={(triggerProps: any) => (
         <Button variant="ghost" size="sm" class={cn('gap-1 text-xs', local.class)} {...triggerProps}>
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>