@kitn.ai/ui 0.28.0 → 0.30.0

package/src/elements/source.tsx

@@ -1,126 +0,0 @@
-import { createSignal, For, onCleanup, onMount, Show } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Source, SourceTrigger, SourceContent, SourceList } from '../components/source';
-// Public shape of the `sources` prop; lives in ./element-data-types so the ROOT
-// entry can re-export it (see that file's header).
-import type { KaiSourceItem } from './element-data-types';
-
-// --- <kai-source> — a single citation link with hover preview ---
-
-interface SourceProps extends Record<string, unknown> {
-  /** The URL this citation links to (the domain also seeds the default label/favicon). */
-  href?: string;
-  /** Trigger label (defaults to the domain). */
-  label?: string;
-  /** Hover-card headline. Attribute: `headline` (`title` is avoided because it
-   *  is a global HTML attribute that reflects in a CE constructor and breaks
-   *  it). */
-  headline?: string;
-  /** Hover-card body text describing the source. */
-  description?: string;
-  /** Show the source's favicon next to the trigger label. */
-  showFavicon?: boolean;
-}
-
-defineWebComponent<SourceProps>('kai-source', {
-  href: '',
-  label: undefined,
-  headline: '',
-  description: '',
-  showFavicon: false,
-}, (props, { flag }) => (
-  <>
-    {/* The shared element base sets `:host{display:block}` (styles.css). A block host
-        makes each citation chip its own line box, so inline `[n]` markers stack and
-        push the trailing prose/period to a new line. inline-flex (like kai-button /
-        kai-tooltip) drops the line box so the chip flows inline with the answer text. */}
-    <style>{':host{display:inline-flex}'}</style>
-    <Show when={props.href}>
-      <Source href={props.href!}>
-        <SourceTrigger label={props.label} showFavicon={flag('showFavicon')} />
-        <SourceContent title={props.headline ?? ''} description={props.description ?? ''} />
-      </Source>
-    </Show>
-  </>
-));
-
-// --- <kai-sources> — a wrapped list of citation links ---
-
-
-interface SourceListProps extends Record<string, unknown> {
-  /** The sources to render. Set as a JS property. Omit to supply them as
-   *  `<kai-source>` light-DOM children instead; when both are present the
-   *  property's sources come first. */
-  sources?: KaiSourceItem[];
-  /** Show favicons on all items (per-item `showFavicon` overrides). */
-  showFavicon?: boolean;
-  /**
-   * When true, each citation chip is labelled with its 1-based index in the
-   * merged (prop + declarative-children) list (`[1]`, `[2]`, …) instead of the
-   * per-item `label` or domain fallback.
-   *
-   * HTML attribute: `numbered` (boolean: a bare attribute or
-   * `numbered="true"`). JS property:   `el.numbered = true`.
-   */
-  numbered?: boolean;
-}
-
-/** Parse a single light-DOM `<kai-source>` element into a `KaiSourceItem` descriptor.
- *  Attribute mapping:
- *   - `href`        → KaiSourceItem.href
- *   - `label`       → KaiSourceItem.label
- *   - `headline`    → KaiSourceItem.title  (matches kai-source's prop name; "title" is a
- *                       reserved HTMLElement attribute so kai-source uses "headline")
- *   - `description` → KaiSourceItem.description
- *   - `show-favicon`→ KaiSourceItem.showFavicon (bare boolean attribute)
- */
-export function parseKaiSourceElement(n: Element): KaiSourceItem {
-  return {
-    href: n.getAttribute('href') ?? '',
-    label: n.getAttribute('label') ?? undefined,
-    title: n.getAttribute('headline') ?? undefined,
-    description: n.getAttribute('description') ?? undefined,
-    showFavicon: n.hasAttribute('show-favicon') && n.getAttribute('show-favicon') !== 'false',
-  };
-}
-
-defineWebComponent<SourceListProps>('kai-sources', {
-  sources: [],
-  showFavicon: false,
-  numbered: false,
-}, (props, { element, flag }) => {
-  // Read declarative <kai-source> children from light DOM.
-  // The shadow root has no <slot> for them, so they are invisible — pure data carriers.
-  const [slottedSources, setSlottedSources] = createSignal<KaiSourceItem[]>([]);
-  onMount(() => {
-    const read = () => {
-      const nodes = [...element.querySelectorAll('kai-source')];
-      setSlottedSources(nodes.map(parseKaiSourceElement));
-    };
-    read();
-    const observer = new MutationObserver(read);
-    observer.observe(element, { childList: true, attributes: true, subtree: true });
-    onCleanup(() => observer.disconnect());
-  });
-
-  // Prop sources take precedence; slotted children are appended after.
-  const allSources = () => [...(props.sources ?? []), ...slottedSources()];
-
-  const isNumbered = () => flag('numbered');
-
-  return (
-    <SourceList>
-      <For each={allSources()}>
-        {(s, i) => (
-          <Source href={s.href}>
-            <SourceTrigger
-              label={isNumbered() ? i() + 1 : s.label}
-              showFavicon={s.showFavicon ?? flag('showFavicon')}
-            />
-            <SourceContent title={s.title ?? ''} description={s.description ?? ''} />
-          </Source>
-        )}
-      </For>
-    </SourceList>
-  );
-});

package/src/elements/status.tsx

@@ -1,42 +0,0 @@
-import { defineWebComponent } from './define';
-import { Status, type StatusKind } from '../ui/status';
-
-interface Props extends Record<string, unknown> {
-  /** Presence/notification state → color. `new` (default) maps to the blue hue. */
-  status?: StatusKind;
-  /** Animated ping ring (off by default; respects prefers-reduced-motion). */
-  pulse?: boolean;
-  /** Accessible name. Without it the dot is decorative. */
-  label?: string;
-  /** `sm` (default) or `md`. */
-  size?: 'sm' | 'md';
-}
-
-/**
- * `<kai-status>` — a small presence / new dot.
- *
- * ```html
- * <kai-status status="online" label="Online"></kai-status>
- * <kai-status status="new" pulse></kai-status>
- * ```
- * Recolor via `::part(dot)`.
- */
-defineWebComponent<Props>('kai-status', {
-  status: 'new',
-  pulse: false,
-  label: undefined,
-  size: 'sm',
-}, (props, { flag }) => (
-  <>
-    {/* Base sets `:host{display:block}`; a presence dot sits inline beside an
-        avatar/label, so inline-flex like kai-button. */}
-    <style>{':host{display:inline-flex}'}</style>
-    <Status
-      status={(props.status as StatusKind) ?? 'new'}
-      size={(props.size as 'sm' | 'md') ?? 'sm'}
-      pulse={flag('pulse')}
-      label={props.label as string | undefined}
-      part="dot"
-    />
-  </>
-));

package/src/elements/switch.tsx

@@ -1,118 +0,0 @@
-import { createEffect, createSignal, untrack } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Switch } from '../ui/switch';
-
-interface Props extends Record<string, unknown> {
-  /** Controlled checked state. Settable and reflected to the `checked` attribute.
-   *  `el.checked = true` (or `<kai-switch checked>`) drives it; the toggle UI updates
-   *  it and fires `kai-change`. Read `el.checked` for live state. */
-  checked?: boolean;
-  /** Initial checked state on mount (uncontrolled seed). Bare attribute
-   *  (`<kai-switch default-checked>`) turns it on. */
-  defaultChecked?: boolean;
-  /** Disable interaction. */
-  disabled?: boolean;
-  /** Accessible label. */
-  label?: string;
-  /** Form-control name (paired with `value`). */
-  name?: string;
-  /** Submitted value when checked (paired with `name`). Defaults to `'on'`. */
-  value?: string;
-}
-
-/** Events fired by `<kai-switch>`. */
-interface Events {
-  /** The toggle changed. */
-  'kai-change': { checked: boolean };
-}
-
-/**
- * `<kai-switch>` — a toggle switch. Drive/read its state with the `checked`
- * property (settable + reflected to the `checked` attribute, so `:host([checked])`
- * and `el.checked` see live state); seed the initial state with `default-checked`
- * and read changes from `kai-change`.
- *
- * ```html
- * <kai-switch default-checked label="Temporary chat"></kai-switch>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const sw = document.querySelector('kai-switch');
- *   sw.addEventListener('kai-change', (e) => console.log(e.detail.checked));
- *   sw.checked = false;   // drive it (no kai-change — the host already knows)
- *   sw.toggle();          // flip it (fires kai-change)
- * </script>
- * ```
- */
-defineWebComponent<Props, Events>('kai-switch', {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: undefined,
-  label: undefined,
-  name: undefined,
-  value: undefined,
-}, (props, ctx) => {
-  const { element, dispatch, flag, expose } = ctx;
-
-  // Lift the on/off state into the facade and drive the Switch CONTROLLED so the
-  // host can read it (`el.checked` / `:host([checked])`) and set it after mount.
-  // Seed from `defaultChecked` (or a bare `checked` attribute present on mount).
-  const [checked, setChecked] = createSignal(flag('defaultChecked') || flag('checked'));
-
-  // Coerce any value coming through the `checked` setter (a JS assignment, or the
-  // write-back from `attributeChangedCallback` when the attribute changes) to a
-  // boolean — falling back to attribute presence, matching `flag`'s semantics. An
-  // `undefined` write-back (which `toggleAttribute` triggers) thus resolves to the
-  // attribute we just wrote, so it equals the signal and the equality guard below
-  // absorbs it — no attr⇄prop feedback loop (the pattern hover-card uses for `open`).
-  const coerce = (v: unknown): boolean =>
-    v === true ? true
-      : v === false ? false
-        : element.hasAttribute('checked') && element.getAttribute('checked') !== 'false';
-
-  // Apply a new checked state and fire kai-change once (the toggle UI / `toggle()`
-  // path). No-op while disabled.
-  const apply = (next: boolean) => {
-    if (flag('disabled')) return;
-    if (untrack(checked) === next) return;
-    setChecked(next);
-    dispatch('kai-change', { checked: next });
-  };
-
-  // Override the `checked` property so reads return LIVE state (the signal) and
-  // host writes (`el.checked = …`) drive it WITHOUT firing kai-change — distinct
-  // from the user-toggle path. The equality guard kills the reflect write-back loop.
-  Object.defineProperty(element, 'checked', {
-    get: () => checked(),
-    set: (v: unknown) => { const next = coerce(v); if (untrack(checked) !== next) setChecked(next); },
-    configurable: true,
-    enumerable: true,
-  });
-
-  // Reflect internal checked → the `[checked]` host attribute (for `:host([checked])`).
-  // The equality guard against the live attribute keeps the write-back the toggle
-  // triggers (attributeChangedCallback → setter) from looping (mirrors
-  // wireDisclosure's reflect structure).
-  createEffect(() => {
-    const c = checked();
-    if (c !== element.hasAttribute('checked')) element.toggleAttribute('checked', c);
-  });
-
-  expose({
-    /** Flip the switch and fire `kai-change` (no-op while disabled). */
-    toggle: () => apply(!untrack(checked)),
-    /** Focus the inner `role="switch"` button (the host element can't reach it). */
-    focus: (options?: FocusOptions) =>
-      element.shadowRoot?.querySelector<HTMLButtonElement>('button[role="switch"]')?.focus(options),
-  });
-
-  return (
-    <Switch
-      checked={checked()}
-      disabled={flag('disabled')}
-      label={props.label as string | undefined}
-      name={props.name as string | undefined}
-      value={props.value as string | undefined}
-      onChange={(next) => apply(next)}
-    />
-  );
-});

package/src/elements/tabs.tsx

@@ -1,95 +0,0 @@
-import { createSignal } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Tabs, type KaiTabItem, type TabsVariant } from '../ui/tabs';
-
-interface Props extends Record<string, unknown> {
-  /** Tabs to render. Set as a JS property, not an HTML attribute. */
-  items?: KaiTabItem[];
-  /** Controlled selected id. Set as a JS property (or the `value` attribute);
-   *  drive it from your app in response to `kai-tab-change`. Omit for uncontrolled. */
-  value?: string;
-  /** Initial selected id when uncontrolled (use the `default-value` attribute in plain HTML). */
-  defaultValue?: string;
-  /** `segmented` (default, a pill group) or `underline` (an underlined row). */
-  variant?: TabsVariant;
-  /** Stretch the strip to full width, each tab sharing the space equally. */
-  block?: boolean;
-  /** Disable the whole strip. */
-  disabled?: boolean;
-}
-
-interface Events {
-  /** A tab was selected (click, Enter/Space, or arrow-key move). `value` is the item's id. */
-  'kai-tab-change': { value: string };
-}
-
-/**
- * `<kai-tabs>`, an accessible tab strip. Selection only: it emits the chosen id;
- * you render what each tab shows (this is not a content router).
- *
- * Set the `items` property in JavaScript (array, not attribute):
- *
- * ```html
- * <kai-tabs default-value="chat"></kai-tabs>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const tabs = document.querySelector('kai-tabs');
- *   tabs.items = [
- *     { id: 'chat', label: 'Chat', icon: 'message-circle' },
- *     { id: 'cowork', label: 'Cowork' },
- *     { id: 'code', label: 'Code', icon: 'code' },
- *   ];
- *   tabs.addEventListener('kai-tab-change', (e) => console.log(e.detail.value));
- * </script>
- * ```
- *
- * Each tab carries a stable `id`, so you can wire `aria-controls` on the tab and
- * `aria-labelledby` on your own panel. Style the active tab via `::part(tab)[data-active]`.
- */
-defineWebComponent<Props, Events>('kai-tabs', {
-  items: undefined,
-  value: undefined,
-  defaultValue: undefined,
-  variant: 'segmented',
-  block: undefined,
-  disabled: undefined,
-}, (props, { dispatch, flag, expose }) => {
-  // Controlled/uncontrolled selection: `value` (when set) wins; otherwise the
-  // element manages its own, seeded from `defaultValue`. `setValueTo` always
-  // writes the internal value (a no-op visually while controlled) and emits
-  // `kai-tab-change` so a controlling app can update its own state.
-  const [internal, setInternal] = createSignal(props.defaultValue as string | undefined);
-  const value = () => (props.value as string | undefined) ?? internal();
-  const setValueTo = (next: string) => {
-    setInternal(next);
-    dispatch('kai-tab-change', { value: next });
-  };
-
-  let listRef: HTMLDivElement | undefined;
-  expose({
-    /** Select a tab by id (fires `kai-tab-change`). Ignores unknown/disabled ids. */
-    select: (id: string) => {
-      const item = (props.items as KaiTabItem[] | undefined)?.find((it) => it.id === id);
-      if (!item || item.disabled || flag('disabled')) return;
-      setValueTo(id);
-    },
-    /** Focus the active tab (or the first focusable tab). */
-    focus: () => {
-      listRef
-        ?.querySelector<HTMLButtonElement>('[role="tab"][tabindex="0"]:not([disabled])')
-        ?.focus();
-    },
-  });
-
-  return (
-    <Tabs
-      items={props.items as KaiTabItem[] | undefined}
-      value={value()}
-      variant={(props.variant as TabsVariant) ?? 'segmented'}
-      block={flag('block')}
-      disabled={flag('disabled')}
-      onChange={setValueTo}
-      ref={(el) => (listRef = el)}
-    />
-  );
-});

package/src/elements/tasks.tsx

@@ -1,103 +0,0 @@
-import { defineWebComponent } from './define';
-import { TasksCard, type TasksCardController, type TasksCardData } from '../components/tasks-card';
-import type { CardResolution } from '../primitives/card-contract';
-
-interface Props extends Record<string, unknown> {
-  /** The tasks definition (the CardEnvelope.data). Set as a JS PROPERTY:
-   *  `el.data = { tasks:[…], selectAll, confirmLabel, … }`. Import
-   *  `TasksCardData` from `@kitn.ai/ui` for the full shape. */
-  data?: TasksCardData;
-  /** Stable card id correlating every emitted CardEvent. Attribute: `card-id`. */
-  cardId?: string;
-  /** Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. */
-  heading?: string;
-  /** Set when the user resolved this card; renders the read-only view. Property:
-   *  `el.resolution = { kind:'submit', data:{ selected:[…] } }`. */
-  resolution?: Record<string, unknown>;
-  /** Controlled selection (task ids; JS property). When set, it wins over local state. */
-  value?: string[];
-  /** Uncontrolled initial selection (task ids; JS property), overlaying per-task `checked`. */
-  defaultValue?: string[];
-  /** Freeze the whole list + Confirm. Attribute: `disabled`. */
-  disabled?: boolean;
-  /** Display-only: rows can't be toggled and show the default cursor (no pointer,
-   *  hover, or focus affordances). Keeps the look as-is. Attribute: `readonly`. */
-  readonly?: boolean;
-}
-
-/** Events fired by `<kai-tasks>`. (Resolution still flows up the bubbling `kai-card`
- *  contract event — `kai-value-change` is the live selection signal, distinct from
- *  the terminal submit.) */
-interface Events {
-  /** The selection changed on a toggle. Carries the selected ids in input
-   *  order. */
-  'kai-value-change': { value: string[] };
-}
-
-/**
- * `<kai-tasks>` — a **selectable** task/plan list (set via the `data` property):
- * checkbox rows + an optional select-all + a confirm button. Toggling rows is local
- * UI state; only the final confirm emits the Card contract's **`submit`** verb
- * up a bubbling **`kai-card`** CustomEvent (`{ kind:'submit', cardId,
- * data:{ selected } }`) with the checked ids in input order. Also emits `ready` on
- * mount and `error` for a malformed definition (inline error). Routes through a
- * `CardProvider` when present, else the bubbling `kai-card` event. Isolated in
- * Shadow DOM; theme-aware via the shared kit tokens.
- *
- * Two looks, one selection model. Default `mode:'select'` = the approval list above.
- * `mode:'progress'` = the onboarding-checklist look (e.g. "Get started 0 / 2"): a
- * header `done / total` count + circular indicators + per-item title/description,
- * and NO confirm button (checking a row IS the action, so the live
- * `kai-value-change` is the signal). The `max` gate, `toggle`/`select` methods, and
- * events all still apply.
- */
-defineWebComponent<Props, Events>(
-  'kai-tasks',
-  {
-    data: undefined,
-    cardId: undefined,
-    heading: undefined,
-    resolution: undefined,
-    value: undefined,
-    defaultValue: undefined,
-    disabled: false,
-    readonly: false,
-  },
-  (props, { element, dispatch, flag, expose }) => {
-    // Pattern C: the TasksCard component owns the selection set + confirm gating and
-    // hands up a controller; the facade captures it and exposes delegating methods.
-    let controller: TasksCardController | undefined;
-    expose({
-      /** Set the checked task ids (local-only, no emit), respecting disabled/max.
-       *  With no arg, select all toggleable rows. */
-      select: (taskIds?: string[]) => controller?.select(taskIds),
-      /** Toggle one task by id, honoring the max gate (no `checked` = flip). */
-      toggle: (taskId: string, checked?: boolean) => controller?.toggle(taskId, checked),
-      /** Confirm the current selection: emits the `submit` CardEvent + resolves
-       *  (only when the min/max gate passes). Named `send`, not `submit`. */
-      send: () => controller?.send(),
-      /** Focus the task group (select-all checkbox if shown, else the first row). */
-      focus: (options?: FocusOptions) => controller?.focus(options),
-      /** Trigger the dismiss path (emit `dismiss` + collapse to the re-openable stub). */
-      dismiss: () => controller?.dismiss(),
-      /** Re-open a dismissed card from its stub (emit `reopen`). */
-      reopen: () => controller?.reopen(),
-    });
-
-    return (
-      <TasksCard
-        data={props.data}
-        cardId={props.cardId ?? (element.id || 'kai-tasks')}
-        heading={props.heading}
-        resolution={props.resolution as CardResolution | undefined}
-        value={props.value as string[] | undefined}
-        defaultValue={props.defaultValue as string[] | undefined}
-        disabled={flag('disabled')}
-        readonly={flag('readonly')}
-        onValueChange={(payload) => dispatch('kai-value-change', payload)}
-        controllerRef={(c) => (controller = c)}
-        hostElement={element}
-      />
-    );
-  },
-);

package/src/elements/text-shimmer.tsx

@@ -1,28 +0,0 @@
-import { defineWebComponent } from './define';
-import { TextShimmer } from '../components/text-shimmer';
-
-interface Props extends Record<string, unknown> {
-  /** The text to shimmer. */
-  text?: string;
-  /** Element tag to render as (default `span`). */
-  as?: string;
-  /** Animation duration in seconds. */
-  duration?: number;
-  /** Gradient spread (5–45). */
-  spread?: number;
-}
-
-/**
- * `<kai-text-shimmer>` — animated shimmering text. Text via the `text`
- * attribute; `duration`/`spread` tune the effect.
- */
-defineWebComponent<Props>('kai-text-shimmer', {
-  text: '',
-  as: 'span',
-  duration: 4,
-  spread: 20,
-}, (props) => (
-  <TextShimmer as={props.as} duration={props.duration} spread={props.spread} class="text-body">
-    {props.text}
-  </TextShimmer>
-));

package/src/elements/thinking-bar.tsx

@@ -1,43 +0,0 @@
-import { defineWebComponent } from './define';
-import { ThinkingBar } from '../components/thinking-bar';
-
-interface Props extends Record<string, unknown> {
-  /** The shimmering label, e.g. "Thinking…". */
-  text?: string;
-  /** When true, show a "stop" affordance that fires a `stop` event. */
-  stoppable?: boolean;
-  /** Label for the stop affordance. */
-  stopLabel?: string;
-}
-
-/** Events fired by `<kai-thinking-bar>`. */
-interface Events {
-  /** The "stop / answer now" affordance was clicked. */
-  'kai-stop': void;
-}
-
-/**
- * `<kai-thinking-bar>` — a pure leaf element: an animated "thinking" indicator
- * (one of the primitives the batteries-included `<kai-chat>` does NOT surface).
- * Config via attributes, the only interaction (`stop`) comes back as an event.
- */
-defineWebComponent<Props, Events>('kai-thinking-bar', {
-  text: 'Thinking',
-  stoppable: false,
-  stopLabel: 'Answer now',
-}, (props, { dispatch, flag, reflectFlag }) => {
-  // `stoppable` reflects, following kai-tool's `disabled` (its FIX1). Without it the
-  // remove direction is dead: `el.removeAttribute('stoppable')` parses to `undefined`,
-  // the prop was already `undefined` after a bare-attribute add, so no prop change
-  // fires and `flag()`'s non-reactive hasAttribute fallback is never re-read — the
-  // stop affordance stays rendered forever. reflectFlag's coercing read-back resolves
-  // every write through the same `flag()` policy, making both directions reactive.
-  reflectFlag('stoppable');
-  return (
-    <ThinkingBar
-      text={props.text}
-      stopLabel={props.stopLabel}
-      onStop={flag('stoppable') ? () => dispatch('kai-stop') : undefined}
-    />
-  );
-});