@kitn.ai/ui 0.28.0 → 0.30.0

package/src/elements/embed.tsx

@@ -1,35 +0,0 @@
-import { defineWebComponent } from './define';
-import { Embed } from '../components/embed';
-import type { EmbedCardData } from '../primitives/embed-providers';
-import { emitCardEvent } from '../primitives/card-routing';
-
-interface Props extends Record<string, unknown> {
-  /** Stable card id correlating every emitted event. Set as an attribute or property. */
-  cardId?: string;
-  /** The embed payload (provider + id/url + options). Set as a JS **property** (object). */
-  data?: EmbedCardData;
-}
-
-/**
- * `<kai-embed>` — a privacy-first **lazy media embed** (YouTube / Vimeo / allowlisted
- * generic player). Initial render is a poster + play button: NO provider iframe, JS,
- * or cookies until the user clicks play (YouTube via `youtube-nocookie`, Vimeo with
- * `dnt=1`). A persistent "Open on {provider}" affordance dispatches the contract
- * `open` verb via the bubbling `kai-card` event. `generic` URLs are rejected unless
- * their origin was allowlisted with `configureEmbedAllowlist`. Set `data` as a JS
- * property; `card-id` via attribute.
- */
-defineWebComponent<Props>(
-  'kai-embed',
-  {
-    cardId: undefined,
-    data: undefined,
-  },
-  (props, { element }) => (
-    <Embed
-      cardId={props.cardId ?? ''}
-      data={props.data ?? ({ provider: 'generic' } as EmbedCardData)}
-      onEmit={(event) => emitCardEvent(element, event)}
-    />
-  ),
-);

package/src/elements/empty.tsx

@@ -1,29 +0,0 @@
-import { Show } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '../components/empty';
-
-interface Props extends Record<string, unknown> {
-  /** Title text. Attribute: `empty-title` (`title` is a global HTML attribute). */
-  emptyTitle?: string;
-  /** Description text. */
-  description?: string;
-}
-
-/**
- * `<kai-empty>` — an empty-state block. `empty-title`/`description` via
- * attributes; slot your own icon into `slot="media"` and actions into the
- * default slot (Route 2 slots).
- */
-defineWebComponent<Props>('kai-empty', {
-  emptyTitle: '',
-  description: '',
-}, (props) => (
-  <Empty>
-    <EmptyHeader>
-      <EmptyMedia variant="icon"><slot name="media" /></EmptyMedia>
-      <Show when={props.emptyTitle}><EmptyTitle>{props.emptyTitle}</EmptyTitle></Show>
-      <Show when={props.description}><EmptyDescription>{props.description}</EmptyDescription></Show>
-    </EmptyHeader>
-    <EmptyContent><slot /></EmptyContent>
-  </Empty>
-));

package/src/elements/feedback-bar.tsx

@@ -1,66 +0,0 @@
-import { defineWebComponent } from './define';
-import { FeedbackBar, type FeedbackValue, type FeedbackDetail } from '../components/feedback-bar';
-
-interface Props extends Record<string, unknown> {
-  /** The banner label (e.g. "Was this helpful?"). Attribute: `bar-title`
-   *  (`title` is avoided because it is a global HTML attribute). */
-  barTitle?: string;
-  /** When set, a not-helpful vote opens an optional detail form before the
-   *  thank-you confirmation. Attribute: `collect-detail`. */
-  collectDetail?: boolean;
-  /** Optional category chips for the detail form. Set as a JS property (array). */
-  categories?: string[];
-  /** Heading for the detail form. Attribute: `detail-title`. */
-  detailTitle?: string;
-  /** Placeholder for the detail comment box. Attribute: `detail-placeholder`. */
-  detailPlaceholder?: string;
-  /** Submit button label in the detail form. Attribute: `submit-label`. */
-  submitLabel?: string;
-  /** Confirmation copy shown after a vote/submit. Attribute: `thanks-message`. */
-  thanksMessage?: string;
-}
-
-/** Events fired by `<kai-feedback-bar>`. */
-interface Events {
-  /** The user rated the response. `value` is `'helpful'` or `'not-helpful'`. */
-  'kai-feedback': { value: FeedbackValue };
-  /** The user submitted the optional detail form (`collect-detail`). */
-  'kai-feedback-detail': FeedbackDetail;
-  /** The user dismissed the banner. */
-  'kai-close': void;
-}
-
-/**
- * `<kai-feedback-bar>` — an inline thumbs up/down feedback banner that owns its
- * own flow: it asks, optionally collects a category + comment on a not-helpful
- * vote (`collect-detail`), then confirms with a thank-you — all in place. Emits
- * `kai-feedback` (`{ value }`), `kai-feedback-detail` (`{ value, category?, comment? }`),
- * and `kai-close`.
- *
- * Placement and lifecycle are the app's call: the component is designed as a
- * THREAD-level bar (its events carry no message id), and when to show it —
- * e.g. revealed after a settled turn, hidden again on submit — is product
- * behavior the host decides.
- */
-defineWebComponent<Props, Events>('kai-feedback-bar', {
-  barTitle: 'Was this helpful?',
-  collectDetail: undefined,
-  categories: undefined,
-  detailTitle: undefined,
-  detailPlaceholder: undefined,
-  submitLabel: undefined,
-  thanksMessage: undefined,
-}, (props, { dispatch, flag }) => (
-  <FeedbackBar
-    title={props.barTitle}
-    collectDetail={flag('collectDetail')}
-    categories={props.categories}
-    detailTitle={props.detailTitle}
-    detailPlaceholder={props.detailPlaceholder}
-    submitLabel={props.submitLabel}
-    thanksMessage={props.thanksMessage}
-    onFeedback={(value) => dispatch('kai-feedback', { value })}
-    onSubmitDetail={(detail) => dispatch('kai-feedback-detail', detail)}
-    onClose={() => dispatch('kai-close')}
-  />
-));

package/src/elements/file-tree.tsx

@@ -1,62 +0,0 @@
-import { defineWebComponent } from './define';
-import { FileTree, type FileTreeFile } from '../components/file-tree';
-
-interface Props extends Record<string, unknown> {
-  /** The files to render. Set as a JS property (array of `{ path, url?, code?, language?, type?, additions?, deletions?, status? }`). */
-  files: FileTreeFile[];
-  /** Selected file path, highlighted in the tree. */
-  activeFile?: string;
-  /** Folder paths expanded initially. Omit to start with all folders open. */
-  defaultExpanded?: string[];
-  /** Show a changed-files summary header (file count + summed `+/-` + Collapse-all). Attribute: `summary`. Off by default. */
-  summary?: boolean;
-}
-
-interface Events extends Record<string, unknown> {
-  /** Fired when a file is selected. `detail.path` = the file's path. */
-  'kai-select': { path: string };
-}
-
-/**
- * `<kai-file-tree>` — a collapsible, keyboard-navigable file explorer built from a
- * flat list of `/`-delimited paths (folders are derived). ARIA `tree`/`treeitem`.
- * Selecting a file fires a `select` event (`detail.path`). Fills its container.
- *
- * For a changed-files / diff view, give each file `additions`/`deletions`/`status`
- * (rendered as trailing `+N`/`-N` stats and a colored status letter), and set the
- * `summary` attribute for a header with the changed-file count, summed `+/-`, and a
- * Collapse-all toggle. Restyle the diff bits via `::part(summary | status |
- * stat-additions | stat-deletions)`.
- */
-defineWebComponent<Props, Events>('kai-file-tree', {
-  files: [],
-  activeFile: undefined,
-  defaultExpanded: undefined,
-  summary: false,
-}, (props, { dispatch, flag }) => (
-  <>
-    {/* Fill the container + own the scroll (see resizable.tsx fill technique:
-        a definite `1fr` grid cell scoped to a wrapper, NOT :host, so the facade's
-        sibling portal-mount div can't steal a grid track). */}
-    <style>{':host{display:block;height:100%;min-height:0}'}</style>
-    <div
-      style={{
-        display: 'grid',
-        'grid-template-rows': 'minmax(0, 1fr)',
-        'grid-template-columns': 'minmax(0, 1fr)',
-        height: '100%',
-        'min-height': '0',
-      }}
-    >
-      <div class="overflow-auto scrollbar-thin py-1.5" style={{ 'min-height': '0' }}>
-        <FileTree
-          files={props.files}
-          activeFile={props.activeFile}
-          defaultExpanded={props.defaultExpanded}
-          summary={flag('summary')}
-          onSelect={(path) => dispatch('kai-select', { path })}
-        />
-      </div>
-    </div>
-  </>
-));

package/src/elements/file-upload.tsx

@@ -1,44 +0,0 @@
-import { defineWebComponent } from './define';
-import { FileUpload, FileUploadTrigger } from '../components/file-upload';
-import { Upload } from 'lucide-solid';
-
-interface Props extends Record<string, unknown> {
-  /** Allow selecting multiple files (default true). */
-  multiple?: boolean;
-  /** `accept` attribute for the file picker (e.g. `image/*`). */
-  accept?: string;
-  /** Disable the dropzone: no clicking, no drag-and-drop. */
-  disabled?: boolean;
-  /** Default dropzone label (overridable via the default slot). */
-  label?: string;
-}
-
-/** Events fired by `<kai-file-upload>`. */
-interface Events {
-  /** Files were picked or dropped. */
-  'kai-files-added': { files: File[] };
-}
-
-/**
- * `<kai-file-upload>` — a click/drag-drop dropzone. Emits `filesadded`. The
- * default dropzone label can be replaced with your own markup via the default
- * `<slot>` (a "Route 2" custom-content slot).
- */
-defineWebComponent<Props, Events>('kai-file-upload', {
-  multiple: true,
-  accept: undefined,
-  disabled: false,
-  label: 'Click or drop files to upload',
-}, (props, { dispatch, flag }) => (
-  <FileUpload
-    multiple={flag('multiple')}
-    accept={props.accept}
-    disabled={flag('disabled')}
-    onFilesAdded={(files) => dispatch('kai-files-added', { files })}
-  >
-    <FileUploadTrigger class="border-border bg-surface hover:bg-muted/60 text-muted-foreground flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed px-6 py-8 text-sm transition-colors">
-      <Upload class="size-5" />
-      <slot>{props.label}</slot>
-    </FileUploadTrigger>
-  </FileUpload>
-));

package/src/elements/form.tsx

@@ -1,94 +0,0 @@
-import { defineWebComponent } from './define';
-import { Form, type FormController, type FormDefinition } from '../components/form';
-import type { CardResolution } from '../primitives/card-contract';
-
-interface Props extends Record<string, unknown> {
-  /** The form definition: a JSON Schema (`type:'object'`) + `x-kai-*` UI hints
-   *  (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { type:'object',
-   *  properties:{…} }`. Import the `FormDefinition` type from `@kitn.ai/ui` for
-   *  the full shape.
-   *
-   *  It IS self-referential (`FormField.properties` is another `FormField` map),
-   *  and the generated `element-types.d.ts` inlines every named type, so the
-   *  shipped declaration bottoms out in a `Record<string, unknown>` placeholder
-   *  one level down rather than carrying the recursion. That is why
-   *  `FormDefinition` is a `type` alias: an interface gets no implicit index
-   *  signature, so it would not be assignable to that placeholder. */
-  data?: FormDefinition;
-  /** 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:{…} }`. */
-  resolution?: Record<string, unknown>;
-  /** Controlled field values (JS property). When set, it wins over local edits. */
-  values?: Record<string, unknown>;
-  /** Initial values overlaying the schema defaults (uncontrolled seed; JS property). */
-  defaultValues?: Record<string, unknown>;
-  /** Disable all fields + submit. Attribute: `disabled`. */
-  disabled?: boolean;
-}
-
-/** Events fired by `<kai-form>`. (Resolution still flows up the bubbling `kai-card`
- *  contract event — `kai-values-change` is the live change signal, distinct from the
- *  terminal submit.) */
-interface Events {
-  /** The form's values changed on input. Carries the current coerced values +
-   *  validity. */
-  'kai-values-change': { values: Record<string, unknown>; valid: boolean };
-}
-
-/**
- * `<kai-form>` — renders a JSON-Schema **form definition** (set via the `data`
- * property) into themed, accessible widgets inside `<kai-card>` chrome, validates
- * input client-side, and emits the collected, coerced, validated object up the
- * Card contract as a bubbling **`kai-card`** CustomEvent of `{ kind:'submit' }`.
- * It also emits `ready` on mount, `action`/`dismiss` for secondary affordances, and
- * `error` for a malformed definition. Routes through a `CardProvider` when present,
- * else the bubbling `kai-card` event (so a bare `<kai-form>` works without a host).
- * Isolated in Shadow DOM; theme-aware via the shared kit tokens.
- */
-defineWebComponent<Props, Events>('kai-form', {
-  data: undefined,
-  cardId: undefined,
-  heading: undefined,
-  resolution: undefined,
-  values: undefined,
-  defaultValues: undefined,
-  disabled: false,
-}, (props, { element, dispatch, flag, expose }) => {
-  // Pattern C: the Form component owns the value store + validation and hands up a
-  // controller; the facade captures it and exposes delegating instance methods.
-  let controller: FormController | undefined;
-  expose({
-    /** Focus the first control, or the first INVALID control after a failed validation. */
-    focus: (options?: FocusOptions) => controller?.focus(options),
-    /** Validate + submit programmatically: focus the first invalid field on failure,
-     *  else emit the `submit` CardEvent and resolve. Named `send`, not `submit`. */
-    send: () => controller?.send(),
-    /** Run client-side validation now and return `{ valid, errors? }` WITHOUT submitting. */
-    validate: () => controller?.validate() ?? { valid: false },
-    /** Re-seed the form from each field's `default` and clear errors. */
-    reset: () => controller?.reset(),
-    /** 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 (
-    <Form
-      data={props.data}
-      cardId={props.cardId ?? (element.id || 'kai-form')}
-      heading={props.heading}
-      resolution={props.resolution as CardResolution | undefined}
-      values={props.values as Record<string, unknown> | undefined}
-      defaultValues={props.defaultValues as Record<string, unknown> | undefined}
-      disabled={flag('disabled')}
-      onValuesChange={(payload) => dispatch('kai-values-change', payload)}
-      controllerRef={(c) => (controller = c)}
-      hostElement={element}
-    />
-  );
-});

package/src/elements/hover-card.tsx

@@ -1,80 +0,0 @@
-import { type Placement } from '@floating-ui/dom';
-import { HoverCardRoot, HoverCardTrigger, HoverCardContent, type HoverCardController } from '../ui/hover-card';
-import { defineWebComponent } from './define';
-import { wireDisclosure } from './disclosure';
-
-interface Props extends Record<string, unknown> {
-  /** Delay (ms) before the card opens on hover. Defaults to 0 (focus opens it
-   *  immediately too). */
-  openDelay?: number;
-  /** Delay (ms) before it closes after the pointer leaves. Defaults to 300. */
-  closeDelay?: number;
-  /** Preferred placement: `'top' | 'bottom' | 'left' | 'right'` (+ optional
-   *  `-start`/`-end`). Defaults to `'bottom'`; flips to stay in view. */
-  placement?: string;
-  /** Drive/observe open state (Shoelace-style: settable + reflected to the `open`
-   *  attribute, the element still self-manages on hover). Set `el.open = true`,
-   *  or `<kai-hover-card open>`; listen for `kai-open-change`. */
-  open?: boolean;
-  /** Initial open state on mount (uncontrolled seed). */
-  defaultOpen?: boolean;
-  /** Suppress the hover behavior entirely without unmounting. */
-  disabled?: boolean;
-}
-
-/** Events fired by `<kai-hover-card>`. */
-interface Events {
-  /** The card opened or closed (by hover/focus, outside-click, or a method). */
-  'kai-open-change': { open: boolean };
-}
-
-/**
- * `<kai-hover-card>` — reveals RICH content on hover/focus of a trigger (the
- * markup-carrying sibling of the text-only `<kai-tooltip>`). Put the trigger as
- * default light-DOM content and the card body in `slot="card"`. The card is
- * portaled + positioned inside the shadow root, with a transparent hover bridge
- * so the pointer can travel into it.
- *
- * ```html
- * <kai-hover-card>
- *   <a href="#">@acme</a>
- *   <div slot="card">
- *     <strong>Acme Corp</strong>
- *     <p>Workspace · 24 members</p>
- *   </div>
- * </kai-hover-card>
- * ```
- */
-defineWebComponent<Props, Events>('kai-hover-card', {
-  openDelay: undefined,
-  closeDelay: undefined,
-  placement: undefined,
-  open: undefined,
-  defaultOpen: undefined,
-  disabled: undefined,
-}, (props, ctx) => {
-  const { flag } = ctx;
-  let api: HoverCardController | undefined;
-
-  // The standard overlay surface: settable+reflecting `open`, kai-open-change,
-  // show/hide/toggle, disabled-gating. See ./disclosure.
-  wireDisclosure(ctx, () => api, () => props.open);
-
-  return (
-    <>
-      <style>{':host{display:inline-block}'}</style>
-      <HoverCardRoot
-        openDelay={props.openDelay != null ? Number(props.openDelay) : undefined}
-        closeDelay={props.closeDelay != null ? Number(props.closeDelay) : undefined}
-        defaultOpen={flag('defaultOpen')}
-        disabled={flag('disabled')}
-        controllerRef={(a) => (api = a)}
-      >
-        <HoverCardTrigger><slot /></HoverCardTrigger>
-        <HoverCardContent placement={(props.placement as Placement | undefined) ?? undefined}>
-          <slot name="card" />
-        </HoverCardContent>
-      </HoverCardRoot>
-    </>
-  );
-});

package/src/elements/icon.tsx

@@ -1,41 +0,0 @@
-import { renderIcon } from '../ui/icon';
-import { cn } from '../utils/cn';
-import { defineWebComponent } from './define';
-
-const SIZE: Record<string, string> = { sm: 'size-3.5', md: 'size-4', lg: 'size-5' };
-
-interface Props extends Record<string, unknown> {
-  /** A curated icon name (e.g. `"mic"`, `"globe"`), an image URL/data-URI, or
-   *  plain text. */
-  name?: string;
-  /** Size token: `sm` | `md` (default) | `lg`. */
-  size?: 'sm' | 'md' | 'lg';
-}
-
-/**
- * `<kai-icon>` — render one of the kit's curated icons (inline SVG) in your own
- * markup, so surrounding UI can match the kit without pulling in an icon library.
- * `name` also accepts a URL/data-URI or text. Renders in the theme's foreground by
- * default; recolor with `kai-icon::part(icon){ color: … }`.
- *
- * Scope: the kit's small, *curated* icon set — not a general icon library. For
- * anything outside it, drop your own inline SVG into an element's `icon` slot.
- *
- * ```html
- * <kai-icon name="globe"></kai-icon>
- * <kai-icon name="sparkles" size="lg"></kai-icon>
- * ```
- */
-defineWebComponent<Props>('kai-icon', {
-  name: '',
-  size: 'md',
-}, (props) => (
-  <>
-    {/* Base sets `:host{display:block}`; an inline icon must flow with surrounding
-        text (and not force a line break), so inline-flex like kai-button. */}
-    <style>{':host{display:inline-flex}'}</style>
-    <span part="icon" class={cn('inline-flex shrink-0', SIZE[props.size ?? 'md'] ?? SIZE.md)}>
-      {renderIcon(props.name, { class: 'size-full', imgClass: 'size-full', spanClass: 'size-full' })}
-    </span>
-  </>
-));

package/src/elements/image.tsx

@@ -1,32 +0,0 @@
-import { defineWebComponent } from './define';
-import { Image } from '../components/image';
-
-interface Props extends Record<string, unknown> {
-  /** Base64-encoded image data (pair with `media-type`). */
-  base64?: string;
-  /** Raw image bytes (set as a JS property). */
-  bytes?: Uint8Array;
-  /** Alt text. */
-  alt?: string;
-  /** MIME type (default `image/png`). */
-  mediaType?: string;
-}
-
-/**
- * `<kai-image>` — renders a base64 or byte-array image with a skeleton
- * fallback while it resolves. `base64`/`alt`/`media-type` via attributes;
- * `bytes` via property.
- */
-defineWebComponent<Props>('kai-image', {
-  base64: undefined,
-  bytes: undefined,
-  alt: '',
-  mediaType: undefined,
-}, (props) => (
-  <Image
-    alt={props.alt ?? ''}
-    base64={props.base64}
-    uint8Array={props.bytes}
-    mediaType={props.mediaType}
-  />
-));