@kitn.ai/ui 0.27.0 → 0.29.0

package/src/elements/register-impl.ts

@@ -1,148 +0,0 @@
-// Component registration implementation. Importing this file defines all kitn
-// custom elements as a side effect. It is dynamically imported (browser-only)
-// from ./register.ts so the elements entry is SSR-import-safe — see the comment
-// there. This file is hand-maintained (the generator gen-element-api.mjs SKIPs
-// register.ts AND this file); keep the component import list here in sync.
-import { installKaiDevtoolsHook } from '../diagnostics/hook';
-import { emitElementRegistry } from './element-diagnostics';
-import './conversation-list';
-import './conversation-item';
-import './prompt-input';
-import './chat';
-import './chat-workspace';
-// Message-list composable (the scrolling thread slice, sans composer/header)
-import './thread';
-// Composable leaf elements (spike — see docs/handoff + examples/composable)
-import './thinking-bar';
-import './model-switcher';
-import './attachments';
-// Phase 1 — message-rendering core
-import './message';
-import './markdown';
-import './code-block';
-import './reasoning';
-import './tool';
-// Phase 2 — header / meta
-import './context-meter';
-import './feedback-bar';
-import './chat-scope-picker';
-// Phase 3 — input ecosystem
-import './prompt-suggestions';
-import './file-upload';
-import './voice-input';
-import './audio-visualizer';
-// Phase 4 — indicators & leaves
-import './loader';
-import './text-shimmer';
-import './image';
-import './checkpoint';
-import './message-skills';
-import './source';
-import './response-stream';
-import './empty';
-import './status';
-import './nav';
-import './progress-bar';
-import './coachmark';
-import './tabs';
-import './voice-output';
-import './screen';
-import './chain-of-thought';
-import './resizable';
-import './file-tree';
-import './artifact';
-import './scroll-button';
-import './popover';
-import './switch';
-import './checkbox';
-import './checkbox-group';
-import './radio-group';
-import './slider';
-import './select';
-import './button';
-import './avatar';
-import './badge';
-import './tooltip';
-import './notice';
-import './icon';
-import './separator';
-import './scroll-area';
-import './hover-card';
-import './skeleton';
-import './toast';
-// Generative-UI cards (Card Contract)
-import './card';
-import './form';
-import './link-preview';
-import './embed';
-import './confirm-card';
-import './tasks';
-import './choice';
-import './cards';
-// Dual-response comparison (preference capture)
-import './compare';
-// Rich text composer with entity pills, trigger menus, and keyword highlighting
-import './composer';
-// W3 phase 2: cascading action menu from a JSON items-tree
-import './menu';
-// The same Dropdown surface with a consumer-owned body: you slot the rows
-// instead of handing over an items tree (the shape a framework consumer needs
-// when the rows are their own components).
-import './dropdown';
-// W4 phase 1: grouped filterable command/mention palette
-import './command';
-// Prompt dock + settings building blocks (graduated from SolidJS prototypes)
-import './prompt-dock';
-import './segmented';
-import './settings-group';
-import './setting-item';
-// Multi-agent workspace primitives (graduated from SolidJS prototypes)
-import './pane';
-import './pane-group';
-import './pane-grid';
-import './agent-card';
-import './dialog';
-import './dock';
-// Input & search field family
-import './input';
-import './search';
-import './kbd';
-import './editable-label';
-
-// The devtools recorder hook, installed HERE because this file is already the
-// browser-only half of the elements entry (register.ts gates it behind a window
-// check and a dynamic import). So an app that registers the kai-* elements gets
-// the hook with no work, while an SSR import of the entry still touches no
-// global.
-//
-// At the BOTTOM, and it makes no difference: `import` declarations are hoisted,
-// so every element module above has already evaluated by the time any statement
-// in this file runs. Written here anyway so the order you read is the order that
-// happens. Nothing above emits a diagnostic event, so there is nothing to miss.
-//
-// Idempotent and near-free: with no activation signal it allocates no buffer,
-// makes no subscription, and leaves emission a guarded no-op. An app importing
-// the SolidJS components directly never runs this file and must call
-// `installKaiDevtoolsHook()` itself -- see the docblock in ../diagnostics/index.
-installKaiDevtoolsHook();
-
-// One registry snapshot, right after the hook installs and therefore after every
-// element above has registered (import declarations are hoisted, so they all ran
-// before this line).
-//
-// WHY HERE AND NOT INSIDE THE HOOK. The hook lives in ../diagnostics, which is
-// its own rollup bundle and must stay free of any element import -- pulling the
-// manifest in there would drag element bytes into a consumer who only parses
-// streams. The dependency goes elements -> diagnostics, never back.
-//
-// WHY EMIT AT ALL WHEN A PANEL IS USUALLY NOT THERE YET. On the recording branch
-// the hook has already subscribed by this point, so this snapshot lands in the
-// history buffer and a panel attaching seconds later still sees the state at
-// load -- which is the state that answers the hydration question. On the dormant
-// branch `emitElementRegistry()` short-circuits on the active check and costs a
-// symbol read.
-//
-// A panel attaching mid-session with no history gets no snapshot from here and
-// should ask for a fresh one: `emitElementRegistry()` is exported from
-// @kitn.ai/ui/elements for exactly that.
-emitElementRegistry();

package/src/elements/register.ts

@@ -1,76 +0,0 @@
-// Single entry that registers all kitn custom elements. Importing this file
-// (or the built bundle) defines the elements as a side effect — but ONLY in a
-// browser/DOM context.
-//
-// SSR-safe: the kai-* elements bundle Solid's client runtime, which touches
-// `window` at module-eval (delegateEvents(events, doc = window.document)). With
-// no `window`, a static import would throw. So the actual component registration
-// lives in ./register-impl and is loaded behind a browser check + dynamic
-// import() — static ESM imports hoist + evaluate unconditionally, so a bare `if`
-// cannot gate them; a dynamic import() can. On the server this module is inert
-// (no DOM → no registration → no throw); in the browser it registers as before.
-//
-// Registration is async (a microtask after this module loads). Consumers that
-// need the upgraded element (e.g. the React runtime) guard with
-// customElements.whenDefined(), which resolves once the impl chunk has run.
-/** Resolves once the kai-* elements are registered (browser); inert on the server.
- *  Await this instead of customElements.whenDefined for a single ready signal.
- *
- *  NOTE: this MUST stay an exported binding. A bare `void import('./register-impl')`
- *  is a result-unused dynamic import that the single-entry register-all build
- *  (vite.config.ts → dist/kai.es.js) tree-shakes away as dead code, leaving the
- *  bundle with NOTHING registered. Exporting the promise keeps the import live. */
-export const elementsReady: Promise<unknown> =
-  typeof window !== 'undefined' && typeof customElements !== 'undefined'
-    ? import('./register-impl')
-    : Promise.resolve();
-
-export type { ChatMessage, ChatMessageAction } from './chat-types';
-export { configureCodeHighlighting, isCodeHighlightingEnabled } from '../primitives/highlighter';
-export type { CodeHighlightingOptions } from '../primitives/highlighter';
-
-// ToolPart.kind's doc comment in the shipped dist/elements.d.ts says "Derive with
-// `classifyTool(type)`", but the function was exported from NO public entry, so a
-// consumer following our own docs hit an unresolvable import. Total, deterministic
-// and always terminating in 'generic' — safe to expose, and needed by anyone
-// rendering tool calls themselves. tool-classify.ts imports nothing, so this stays
-// SSR-safe and adds no weight to the register-all bundle.
-export { classifyTool } from '../components/tool-classify';
-export type { ToolKind } from '../components/tool-classify';
-
-// Element-layer diagnostics. `emitElementRegistry()` re-emits the which-elements-
-// are-defined snapshot on demand, for a panel that attached mid-session and so
-// missed the one register-impl emits at load. SSR-safe and a no-op with no
-// subscriber, so calling it unconditionally is fine.
-//
-// WHY THIS ONE PRODUCER IS PUBLIC while `@kitn.ai/ui/diagnostics` deliberately
-// keeps `emitWireDiagnostic`, `nextStreamId` and `setWirePayloadCapture`
-// internal. That rule exists because a consumer able to forge events or reset
-// the stream counter can make a panel lie about a stream that never happened,
-// and one able to flip payload capture can start recording an app's users'
-// conversations without the app deciding to. This function takes no arguments
-// and reports nothing but `customElements.get()` over the manifest: there is no
-// value to forge, no counter to move and no capture to arm. It can only tell the
-// truth about the registry, which is the one thing a late-attaching panel cannot
-// find out for itself.
-//
-// The event TYPES are re-exported here as well as from @kitn.ai/ui/diagnostics:
-// a consumer already importing the elements entry should not have to add a
-// second specifier to name the events it is handed.
-export { emitElementRegistry } from './element-diagnostics';
-export type {
-  ElementDiagnosticBase,
-  ElementDiagnosticEvent,
-  ElementRegistryEvent,
-  ElementViolationEvent,
-  ElementViolationKind,
-} from './diagnostic-events';
-
-// Imperative toast API — usable directly from the elements entry so consumers
-// who only import the web-components bundle still get `toast()`. The store is
-// SSR-safe (no DOM touched until the first toast is raised on the client).
-export { toast, configureToasts } from '../primitives/toast-store';
-export type {
-  ToastConfig,
-  ToastItem, ToastVariant, ToastAction, ToastOptions, ToastHandle,
-} from '../primitives/toast-store';

package/src/elements/remote.tsx

@@ -1,225 +0,0 @@
-// src/elements/remote.tsx
-// <kai-remote> — Shadow-DOM facade that mounts a sandboxed cross-origin iframe
-// card via mountRemoteCard(), re-emits every CardEvent as a bubbling+composed
-// kai-card CustomEvent, and validates the provider-origin before mounting.
-import { createEffect, createSignal, onCleanup, onMount } from 'solid-js';
-import { defineWebComponent } from './define';
-import { mountRemoteCard } from '../remote/host-embed';
-import type { RemoteCardHandle } from '../remote/host-embed';
-import type { CardEnvelope, CardContext, CardPolicy, CardEvent } from '../primitives/card-contract';
-import { emitCardEvent } from '../primitives/card-routing';
-
-interface Props extends Record<string, unknown> {
-  /** The remote card URL. Attribute: `src`. */
-  src?: string;
-  /** Exact provider origin (https: or http://localhost for dev). Attribute: `provider-origin`. */
-  providerOrigin?: string;
-  /** The card envelope to render. JS property only. */
-  envelope?: Record<string, unknown>;
-  /** Optional routing policy. JS property only. */
-  policy?: Record<string, unknown>;
-}
-
-/**
- * Validate that `origin` is a single absolute origin that is either:
- *   - an https: origin (e.g. "https://provider.example")
- *   - http://localhost or http://127.0.0.1 (local dev only)
- *
- * Rejects "*", comma-lists, bare paths, and any other http: origin.
- */
-function isValidProviderOrigin(origin: string | undefined): boolean {
-  if (!origin) return false;
-  // Reject wildcard and comma-lists immediately.
-  if (origin === '*' || origin.includes(',')) return false;
-  let parsed: URL;
-  try {
-    parsed = new URL(origin);
-  } catch {
-    return false;
-  }
-  // Must be an exact origin: no pathname beyond '/', no search, no hash.
-  if (parsed.pathname !== '/' || parsed.search !== '' || parsed.hash !== '') return false;
-  if (parsed.protocol === 'https:') return true;
-  if (parsed.protocol === 'http:') {
-    return parsed.hostname === 'localhost' || parsed.hostname === '127.0.0.1';
-  }
-  return false;
-}
-
-/**
- * Build a CardPolicy that re-emits each routed CardEvent as a bubbling+composed
- * `kai-card` CustomEvent on `element`, AND delegates to the caller-supplied `policy`.
- */
-function buildWrappedPolicy(element: HTMLElement, userPolicy: CardPolicy | undefined): CardPolicy {
-  function emit(ev: CardEvent): void {
-    emitCardEvent(element, ev);
-  }
-  return {
-    onSubmit(cardId, data) {
-      emit({ kind: 'submit', cardId, data });
-      userPolicy?.onSubmit?.(cardId, data);
-    },
-    onAction(cardId, action, payload) {
-      emit({ kind: 'action', cardId, action, payload });
-      userPolicy?.onAction?.(cardId, action, payload);
-    },
-    onSendPrompt(text, opts) {
-      // send-prompt doesn't carry cardId in the policy signature; we use a placeholder.
-      emit({ kind: 'send-prompt', cardId: '', text, mode: opts.mode, context: opts.context });
-      userPolicy?.onSendPrompt?.(text, opts);
-    },
-    onOpen(url, target) {
-      // open doesn't carry cardId in the policy signature.
-      emit({ kind: 'open', cardId: '', url, target });
-      userPolicy?.onOpen?.(url, target);
-    },
-    onState(cardId, patch) {
-      emit({ kind: 'state', cardId, patch });
-      userPolicy?.onState?.(cardId, patch);
-    },
-    onDismiss(cardId) {
-      emit({ kind: 'dismiss', cardId });
-      userPolicy?.onDismiss?.(cardId);
-    },
-    onReopen(cardId) {
-      emit({ kind: 'reopen', cardId });
-      userPolicy?.onReopen?.(cardId);
-    },
-    onError(cardId, message) {
-      emit({ kind: 'error', cardId, message });
-      userPolicy?.onError?.(cardId, message);
-    },
-    maxSendPromptMode: userPolicy?.maxSendPromptMode,
-  };
-}
-
-/**
- * `<kai-remote>` — mounts a sandboxed cross-origin iframe card.
- *
- * Required props:
- *   - `provider-origin` attribute: the exact HTTPS origin of the card provider
- *     (or http://localhost for local dev).
- *   - `src` attribute: the URL of the card page (must share the provider origin).
- *   - `envelope` JS property: the CardEnvelope to render.
- *
- * Optional:
- *   - `policy` JS property: a CardPolicy for routing card events.
- *   - `theme` attribute (inherited from defineWebComponent): 'light' | 'dark' | 'auto'.
- *
- * Every routed CardEvent is also dispatched as a bubbling+composed `kai-card`
- * CustomEvent off the host element.
- */
-defineWebComponent<Props>(
-  'kai-remote',
-  {
-    src: undefined,
-    providerOrigin: undefined,
-    envelope: undefined,
-    policy: undefined,
-  },
-  (props, { element }) => {
-    // Lifted out of onMount so the theme effect (below) can re-push context to the
-    // live bridge after mount. `undefined` until the iframe is successfully mounted.
-    let handle: RemoteCardHandle | undefined;
-
-    // Resolve dark mode the SAME way native elements do (see createDarkMode in
-    // define.tsx): the `theme` prop is 'light' | 'dark' | 'auto' (default 'auto',
-    // which follows the OS `prefers-color-scheme`). Tracked reactively so a host /
-    // Storybook theme toggle flows through the effect below.
-    const [systemDark, setSystemDark] = createSignal(false);
-    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
-      const mq = window.matchMedia('(prefers-color-scheme: dark)');
-      setSystemDark(mq.matches);
-      const onChange = (e: MediaQueryListEvent) => setSystemDark(e.matches);
-      mq.addEventListener('change', onChange);
-      onCleanup(() => mq.removeEventListener('change', onChange));
-    }
-    const isDark = () => {
-      const theme = (props.theme as string | undefined) ?? 'auto';
-      return theme === 'dark' || (theme === 'auto' && systemDark());
-    };
-
-    onMount(() => {
-      const shadow = element.shadowRoot;
-      if (!shadow) return;
-
-      function renderError(message: string): void {
-        const alert = document.createElement('div');
-        alert.setAttribute('role', 'alert');
-        alert.textContent = message;
-        shadow!.appendChild(alert);
-      }
-
-      // Validate provider-origin before attempting any mount.
-      const providerOrigin = props.providerOrigin;
-      if (!isValidProviderOrigin(providerOrigin)) {
-        renderError(
-          `[kai-remote] Invalid provider-origin "${providerOrigin ?? ''}". ` +
-          `Must be an absolute https: origin, or http://localhost / http://127.0.0.1 for local dev.`,
-        );
-        return;
-      }
-
-      const src = props.src;
-      if (!src) {
-        renderError('[kai-remote] Missing required "src" attribute.');
-        return;
-      }
-
-      const envelope = props.envelope as CardEnvelope | undefined;
-      if (!envelope) {
-        renderError('[kai-remote] Missing required "envelope" property.');
-        return;
-      }
-
-      // Derive a minimal CardContext. Theme resolved the same way native elements
-      // do (isDark(), above); read untracked here so this initial mount doesn't
-      // re-run on theme change — the createEffect below pushes later changes.
-      const context: CardContext = {
-        theme: { mode: isDark() ? 'dark' : 'light' },
-        locale: (typeof navigator !== 'undefined' && navigator.language) || 'en',
-      };
-
-      const userPolicy = props.policy as CardPolicy | undefined;
-      const wrappedPolicy = buildWrappedPolicy(element, userPolicy);
-
-      // Create a container inside the shadow root for mountRemoteCard.
-      const container = document.createElement('div');
-      shadow.appendChild(container);
-
-      try {
-        handle = mountRemoteCard({
-          container,
-          providerOrigin: providerOrigin as string,
-          src,
-          envelope,
-          context,
-          policy: wrappedPolicy,
-        });
-      } catch (err) {
-        const message = err instanceof Error ? err.message : String(err);
-        renderError(`[kai-remote] Mount failed: ${message}`);
-        container.remove();
-        return;
-      }
-
-      onCleanup(() => {
-        handle?.destroy();
-        handle = undefined;
-      });
-    });
-
-    // React to later host/Storybook theme toggles: re-push a fresh resolved theme
-    // to the live bridge so the framed card re-themes (consistent with native
-    // elements). No-op until the iframe has mounted (handle is set). The bridge
-    // does a dispose+remount on a genuine theme change — see provider-runtime.ts;
-    // token/locale refreshes stay silent.
-    createEffect(() => {
-      const mode = isDark() ? 'dark' : 'light';
-      handle?.updateContext({ theme: { mode } });
-    });
-
-    // This element renders purely into the shadow root via onMount — no JSX return needed.
-    return <></>;
-  },
-);

package/src/elements/resizable.globals.d.ts

@@ -1,36 +0,0 @@
-// src/elements/resizable.globals.d.ts
-// Hand-authored ambient types for the cross-element maximize PROTOCOL — the two
-// raw composed CustomEvents `<kai-artifact>` and `<kai-resizable>`/`<kai-resizable-item>`
-// exchange. The generated element-types.d.ts emits no HTMLElementEventMap entries,
-// so without this `el.addEventListener('kai-maximize-intent', e => e.detail)` is
-// TS2339 on `Event`. NOT regenerated by `npm run build`.
-//
-// THE FILENAME IS LOAD-BEARING and must not go back to `resizable.d.ts`.
-// TypeScript drops a .d.ts when a same-named .ts/.tsx sits beside it, and
-// `resizable.tsx` does. Under the old name this whole file was in NO tsc
-// program, so every augmentation below was inert. Measured on the same probe,
-// `el.addEventListener('kai-maximize-intent', e => e.detail)`:
-//   resizable.d.ts         TS2339: Property 'detail' does not exist on 'Event'
-//   resizable.globals.d.ts clean -- narrowed to CustomEvent<KaiMaximizeIntentDetail>
-//
-// This file used to ALSO declare a global `KaiResizableElement` carrying
-// `maximize`/`restore` plus an HTMLElementTagNameMap entry pointing at it. That
-// half never worked: element-types.d.ts declares its own module-scoped
-// `KaiResizableElement` and maps the tag to THAT, so the two entries collided
-// (TS2717, invisible under the `skipLibCheck: true` every pass sets) and the
-// generated one won — `document.querySelector('kai-resizable').maximize(0)` stayed
-// TS2339. The methods now come from the GENERATOR (resizable.tsx routes them
-// through `ctx.expose`, gen-element-types.mjs emits them onto the element
-// interface), so the duplicate is gone and there is exactly one declaration of
-// each name. Do not reintroduce it: a hand-written interface cannot win against
-// the generated one, and generated files are regenerated.
-import type { KaiMaximizeIntentDetail, KaiMaximizeStateDetail } from './resizable';
-
-declare global {
-  interface HTMLElementEventMap {
-    'kai-maximize-intent': CustomEvent<KaiMaximizeIntentDetail>;
-    'kai-maximize-state': CustomEvent<KaiMaximizeStateDetail>;
-  }
-}
-
-export {};