@kitn.ai/ui 0.28.0 → 0.30.0

package/src/elements/dropdown.tsx

@@ -1,123 +0,0 @@
-import { Show } from 'solid-js';
-import { MoreHorizontal } from 'lucide-solid';
-import { Dropdown, DropdownTrigger, DropdownContent, type DropdownController } from '../ui/dropdown';
-import { renderIcon } from '../ui/icon';
-import { cn } from '../utils/cn';
-import { defineWebComponent } from './define';
-import { wireDisclosure } from './disclosure';
-
-interface Props extends Record<string, unknown> {
-  /** Built-in trigger: leading icon (a named icon like `"plus"`, an image
-   *  URL/data-URI, or text). A slotted `slot="trigger"` overrides it. */
-  triggerIcon?: string;
-  /** Built-in trigger: a text label. This is the trigger's VISIBLE text, so it is
-   *  also its accessible name, and `label` does not override it: an accessible
-   *  name that does not contain the visible text is unreachable by speech input
-   *  (WCAG 2.5.3, Label in Name). Same rule `kai-menu` follows. */
-  triggerLabel?: string;
-  /** Built-in trigger: a trailing icon (e.g. `"chevron-down"` for a select look). */
-  triggerIconTrailing?: string;
-  /** Accessible name for a trigger with no visible label. Ignored when
-   *  `triggerLabel` is set, which is already the visible name. It DOES name a
-   *  slotted `slot="trigger"`, which is VISUAL content with the name supplied
-   *  separately: the same two-slot distinction `kai-menu` documents. */
-  label?: string;
-  /** Stretch the trigger to the full width of its container (a block row).
-   *  Attribute: `full`. */
-  full?: boolean;
-  /** Drive/observe open state (Shoelace-style: settable + reflected to the `open`
-   *  attribute, the menu still self-manages on click/keyboard). Set `el.open = true`,
-   *  or `<kai-dropdown open>`; listen for `kai-open-change`. */
-  open?: boolean;
-  /** Initial open state on mount (uncontrolled seed). */
-  defaultOpen?: boolean;
-  /** Disable the trigger: click/keyboard and `show()` no longer open the menu. */
-  disabled?: boolean;
-}
-
-/** Events fired by `<kai-dropdown>`. */
-interface Events {
-  /** The menu opened or closed (click, keyboard, Escape, outside-click, or a method). */
-  'kai-open-change': { open: boolean };
-}
-
-/**
- * `<kai-dropdown>` — a trigger plus a floating menu surface you fill yourself.
- *
- * The sibling of `<kai-menu>`, split by who owns the menu body: `kai-menu` renders
- * a JSON `items` tree for you, this one gives you the surface and lets you slot
- * ARBITRARY markup into it — the shape a framework consumer needs when the rows
- * are their own components rather than data.
- *
- * ```html
- * <kai-dropdown label="Row actions">
- *   <span slot="trigger">&#8942;</span>
- *   <div role="menuitem" tabindex="-1">Rename</div>
- *   <div role="menuitem" tabindex="-1">Duplicate</div>
- * </kai-dropdown>
- * ```
- *
- * The default slot is the menu body; `trigger` is the control it anchors to. It
- * fires `kai-open-change` with `{ open }` on every change, accepts `open` /
- * `defaultOpen` / `disabled`, and exposes `show()` / `hide()` / `toggle()`.
- *
- * KEYBOARD: give each row `role="menuitem"` and it joins roving focus. ArrowUp/Down,
- * Home/End and typeahead reach SLOTTED rows because `menuItems()` in
- * `../ui/dropdown.tsx` walks the flat tree rather than querying the shadow tree,
- * which contains none of the light-DOM nodes a `<slot>` projects. Rows carrying
- * `aria-disabled="true"` are skipped.
- */
-defineWebComponent<Props, Events>('kai-dropdown', {
-  triggerIcon: undefined,
-  triggerLabel: undefined,
-  triggerIconTrailing: undefined,
-  label: undefined,
-  full: false,
-  open: undefined,
-  defaultOpen: undefined,
-  disabled: undefined,
-}, (props, ctx) => {
-  const { flag } = ctx;
-  let api: DropdownController | undefined;
-
-  // The standard overlay surface: settable+reflecting `open`, kai-open-change,
-  // show/hide/toggle, disabled-gating. See ./disclosure.
-  wireDisclosure(ctx, () => api, () => props.open);
-
-  return (
-    <>
-      {/* The host shrinks to the trigger by default (UA inline); `full` makes it a
-          block whose trigger fills the width — the kai-button/kai-menu pattern. */}
-      <style>{':host([full]){display:block}'}</style>
-      <Dropdown
-        defaultOpen={flag('defaultOpen')}
-        disabled={flag('disabled')}
-        controllerRef={(a) => (api = a)}
-      >
-        <DropdownTrigger
-          class={cn(
-            'inline-flex items-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-            props.triggerLabel
-              ? 'gap-1.5 px-2 py-1.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground'
-              : 'justify-center p-1.5 text-foreground hover:bg-muted',
-            flag('full') && 'w-full',
-          )}
-          // A visible `triggerLabel` IS the name, so `label` must not be layered
-          // over it: aria-label REPLACES the computed name, locking speech-input
-          // users out (WCAG 2.5.3). Same rule kai-menu and kai-button follow.
-          aria-label={props.triggerLabel ? undefined : (props.label ?? 'Open menu')}
-        >
-          <slot name="trigger">
-            <Show when={props.triggerIcon}>{renderIcon(props.triggerIcon, { class: 'size-4 shrink-0' })}</Show>
-            <Show when={props.triggerLabel}>{props.triggerLabel}</Show>
-            <Show when={props.triggerIconTrailing}>{renderIcon(props.triggerIconTrailing, { class: 'size-3.5 shrink-0 opacity-60' })}</Show>
-            <Show when={!props.triggerIcon && !props.triggerLabel}><MoreHorizontal class="size-4" /></Show>
-          </slot>
-        </DropdownTrigger>
-        <DropdownContent class="min-w-[10rem]">
-          <slot />
-        </DropdownContent>
-      </Dropdown>
-    </>
-  );
-});

package/src/elements/editable-label.tsx

@@ -1,140 +0,0 @@
-import { createEffect, createSignal, untrack } from 'solid-js';
-import { defineWebComponent } from './define';
-import { EditableLabel } from '../ui/editable-label';
-
-interface Props extends Record<string, unknown> {
-  /** The label text. Settable and reflected to the `value` attribute. Read
-   *  `el.value` for live state. */
-  value?: string;
-  /** Controlled edit state. `el.editing = true` opens the field; reflected to the
-   *  `editing` attribute. */
-  editing?: boolean;
-  /** Placeholder shown while editing / when the value is empty. */
-  placeholder?: string;
-  /** Disable entering edit mode. */
-  disabled?: boolean;
-}
-
-/** Events fired by `<kai-editable-label>`. */
-interface Events {
-  /** Committed a changed value (Enter / blur). */
-  'kai-rename': { value: string };
-  /** Edit was cancelled (Esc); the text is restored. */
-  'kai-cancel': Record<string, never>;
-}
-
-/**
- * `<kai-editable-label>` — inline rename, built on `kai-input`. Shows `value` as
- * text; double-click (or `el.edit()`, or `editing`) swaps in an autofocused
- * field. Enter or blur commits → `kai-rename` (only when the value changed); Esc
- * cancels → `kai-cancel` (the text is restored).
- *
- * ```html
- * <kai-editable-label value="Project Alpha"></kai-editable-label>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const label = document.querySelector('kai-editable-label');
- *   label.addEventListener('kai-rename', (e) => save(e.detail.value));
- *   label.edit(); // open the field programmatically
- * </script>
- * ```
- *
- * Methods: `edit()`, `commit()`, `cancel()`. Restyle via `::part(text)` and
- * `::part(input)`.
- */
-defineWebComponent<Props, Events>('kai-editable-label', {
-  value: undefined,
-  editing: false,
-  placeholder: undefined,
-  disabled: false,
-}, (props, ctx) => {
-  const { element, dispatch, flag, expose } = ctx;
-
-  // Controlled value, mirrored to the `value` attribute (the kai-segmented pattern).
-  const [value, setValue] = createSignal(
-    (props.value as string | undefined) ?? element.getAttribute('value') ?? '',
-  );
-  const coerce = (v: unknown): string =>
-    v == null ? (element.getAttribute('value') ?? '') : String(v);
-  Object.defineProperty(element, 'value', {
-    get: () => value(),
-    set: (v: unknown) => { const next = coerce(v); if (untrack(value) !== next) setValue(next); },
-    configurable: true,
-    enumerable: true,
-  });
-  createEffect(() => {
-    const v = value();
-    if (v) {
-      if (element.getAttribute('value') !== v) element.setAttribute('value', v);
-    } else if (element.hasAttribute('value')) {
-      element.removeAttribute('value');
-    }
-  });
-
-  // Edit state lives in the facade and drives the primitive. The methods map to
-  // the primitive's own gestures so every commit / cancel flows through its guarded
-  // Enter/Esc/blur handlers (no double-fire). Controlled `editing` rides the native
-  // solid-element prop/attribute: we follow it (so `el.editing = true` /
-  // `<kai-editable-label editing>` opens the field) and reflect it, but never
-  // override the property with a side-effecting `Object.defineProperty` — doing so
-  // fires the setter during solid-element's upgrade and corrupts the signal.
-  const [editing, setEditing] = createSignal(flag('editing'));
-  createEffect(() => setEditing(flag('editing')));
-  createEffect(() => {
-    if (editing()) {
-      if (!element.hasAttribute('editing')) element.setAttribute('editing', '');
-    } else if (element.hasAttribute('editing')) {
-      element.removeAttribute('editing');
-    }
-  });
-
-  const getInput = (): HTMLInputElement | null =>
-    element.shadowRoot?.querySelector<HTMLInputElement>('input') ?? null;
-
-  const enter = () => { if (!flag('disabled')) setEditing(true); };
-  // Blur drives the primitive's blur-commit; Escape drives its cancel.
-  const commit = () => { getInput()?.blur(); };
-  const cancel = () => {
-    const input = getInput();
-    if (input) {
-      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
-    } else if (untrack(editing)) {
-      setEditing(false);
-      dispatch('kai-cancel', {});
-    }
-  };
-
-  expose({
-    /** Switch the label into its editing field, which autofocuses and selects the
-     *  current text. Same entry point as a user double-click, and a no-op while
-     *  `disabled`. Commit with `commit()` or by blurring, abandon with `cancel()`
-     *  or Escape. */
-    edit: enter,
-    /** Close the field and keep what was typed, exactly as blurring it does.
-     *  `kai-rename` fires only when the text actually changed, so committing an
-     *  untouched field is silent. A no-op while the field is closed. */
-    commit,
-    /** Abandon the edit, exactly as Escape does: the original text is restored,
-     *  the field closes and `kai-cancel` fires. `kai-rename` never fires, even if
-     *  the field was edited. Also works when `editing` was set programmatically
-     *  and the field has not rendered yet. */
-    cancel,
-  });
-
-  return (
-    <>
-      <style>{':host{display:inline-flex}'}</style>
-      <EditableLabel
-        value={value()}
-        editing={editing()}
-        placeholder={props.placeholder as string | undefined}
-        disabled={flag('disabled')}
-        onRename={(next) => {
-          setEditing(false);
-          if (next !== untrack(value)) { setValue(next); dispatch('kai-rename', { value: next }); }
-        }}
-        onCancel={() => { setEditing(false); dispatch('kai-cancel', {}); }}
-      />
-    </>
-  );
-});

package/src/elements/element-data-types.ts

@@ -1,152 +0,0 @@
-/**
- * The data shapes a consumer assigns to a `kai-*` element's array/object
- * properties, when that shape has no Solid-layer twin they could import instead.
- *
- * WHY THIS FILE EXISTS. The generated `.d.ts` for `./elements` and the React
- * wrappers expand every prop type STRUCTURALLY (see the `IMPORTS = {}` note in
- * scripts/gen-element-api.mjs — self-contained declarations are what keeps a
- * consumer's tsc from resolving library `.ts` source). That is right for the
- * generated files, but it means a consumer who wants to name the shape — a
- * `const items: … = [...]` in their own code, a helper that builds one — has no
- * type to import and ends up writing
- * `NonNullable<KaiCommandElementProps['items']>`. Every named element-prop type
- * must therefore be reachable from the ROOT entry (`@kitn.ai/ui`), which is what
- * a React / Vue / Svelte / vanilla consumer imports. Enforced by
- * tests/elements/prop-types-exported.test.ts.
- *
- * These live in their own module (not in the facades that use them) because the
- * facades compile to per-element side-effect entry points whose shipped
- * declarations are `export {};` — a type re-exported from one of those would not
- * resolve for a consumer. Types with a Solid twin (`TriggerDef`, `KaiNavItem`,
- * `ChatThreadContextUsage`, …) stay in their own layer's module and are
- * re-exported from `src/index.ts` directly.
- *
- * Type-only: fully erased by the build, so the root barrel pays nothing.
- */
-
-/** A single segment of `<kai-segmented>`.
- *
- *  Distinct from the Solid `SegmentedOption`, whose `icon` is a JSX node: on the
- *  element, `icon` is an icon-NAME string (web-component-friendly) — a curated
- *  name (e.g. `"code"`), a URL/data-URI, or plain text — resolved to a glyph via
- *  the kit's icon renderer (the same path `kai-button`'s `icon` uses). */
-export interface KaiSegmentedOption {
-  value: string;
-  label: string;
-  icon?: string;
-}
-
-/** A single row of `<kai-radio-group>`.
- *
- *  Distinct from the Solid `RadioOption`, whose `label` and `description` are JSX
- *  nodes: on the element both are plain strings, because an element property has to
- *  survive being assigned from HTML/React/Vue/Svelte with no framework in between. */
-export interface KaiRadioOption {
-  value: string;
-  label: string;
-  description?: string;
-  disabled?: boolean;
-}
-
-/** A single row of `<kai-checkbox-group>`.
- *
- *  Distinct from the Solid `CheckboxOption`, whose `value` is generic and whose
- *  `label` and `description` are JSX nodes: on the element all three are plain
- *  strings, because an element property has to survive being assigned from
- *  HTML/React/Vue/Svelte with no framework in between. Structurally identical to
- *  `KaiRadioOption`, and kept as its own name anyway: the two elements are free to
- *  diverge, and a consumer typing a checkbox list should not have to import the radio
- *  group's type to do it. */
-export interface KaiCheckboxOption {
-  value: string;
-  label: string;
-  description?: string;
-  disabled?: boolean;
-}
-
-/** A single choice in `<kai-select>`.
- *
- *  Distinct from the Solid `SelectOption`, whose `value` is generic: on the element
- *  it is a string, because a native `<option>`'s value is a string and an element
- *  property has to survive being assigned from HTML/React/Vue/Svelte with no
- *  framework in between. `label` defaults to `value`. */
-export interface KaiSelectOption {
-  value: string;
-  label?: string;
-  disabled?: boolean;
-}
-
-/** A single citation in `<kai-sources>`' `sources` property. Also the shape
- *  `<kai-source>` light-DOM children are parsed into. */
-export interface KaiSourceItem {
-  href: string;
-  title?: string;
-  description?: string;
-  label?: string;
-  showFavicon?: boolean;
-}
-
-/** Token-usage data for `<kai-context>`' `context` property. */
-export interface KaiContextUsage {
-  /** Tokens consumed so far in the context window (drives the meter fill). */
-  usedTokens: number;
-  /** The model's total context-window size in tokens. */
-  maxTokens: number;
-  /** Tokens attributed to the prompt/input, shown in the breakdown. */
-  inputTokens?: number;
-  /** Tokens attributed to the generated output, shown in the breakdown. */
-  outputTokens?: number;
-  /** Tokens attributed to reasoning/thinking, shown when present. */
-  reasoningTokens?: number;
-  /** Tokens served from prompt cache, shown when present. */
-  cacheTokens?: number;
-  /** Estimated cost in dollars for this usage, shown in the footer. */
-  estimatedCost?: number;
-}
-
-/** One item in `<kai-menu>`'s `items` tree. */
-export interface KaiMenuItem {
-  /** Emitted in `kai-select` for actionable items. */
-  id?: string;
-  label?: string;
-  /** Named icon (e.g. "paperclip"), image URL / data-URI, or plain text. */
-  icon?: string;
-  /** e.g. '⌘U' — shown right-aligned, muted. */
-  shortcut?: string;
-  /** Presence ⇒ a checkbox item (role=menuitemcheckbox). With `radioGroup` set,
-   *  marks the SELECTED radio item in that group instead. */
-  checked?: boolean;
-  /** Membership in a single-select group (role=menuitemradio). Items sharing a
-   *  `radioGroup` are mutually exclusive — the one with `checked: true` shows the
-   *  checkmark; selecting one emits `{ id, radioGroup }` so the consumer moves
-   *  the checkmark (the consumer owns state, like checkbox items). */
-  radioGroup?: string;
-  disabled?: boolean;
-  /** A divider (ignores other fields). */
-  separator?: boolean;
-  /** A non-interactive section label (uses `label`). */
-  heading?: boolean;
-  /** ⇒ a submenu. */
-  items?: KaiMenuItem[];
-}
-
-/**
- * A single command/mention item for `<kai-command>`.
- *
- * Set `items` as a JS property (array ref) — not an HTML attribute.
- */
-export interface KaiCommandItem {
-  /** Unique identifier emitted in `kai-select`. */
-  id: string;
-  /** Display name shown in the list row. */
-  label: string;
-  /** Named icon (e.g. "search"), image URL / data-URI, or plain text. */
-  icon?: string;
-  /** Muted supplementary text (e.g. a file path or a short description). */
-  description?: string;
-  /** Optional keyboard shortcut shown as right-aligned key caps; uses the
-   *  kai-kbd `keys` syntax (e.g. "Mod+K", "Alt+1"). */
-  shortcut?: string;
-  /** Group name that buckets this item under a section header. */
-  group?: string;
-}