@kitn.ai/ui 0.27.0 → 0.29.0

package/src/components/image.tsx

@@ -1,65 +0,0 @@
-import { type JSX, splitProps, createSignal, createEffect, onCleanup, Show } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Skeleton } from '../ui/skeleton';
-
-export interface GeneratedImageLike {
-  base64?: string;
-  uint8Array?: Uint8Array;
-  mediaType?: string;
-}
-
-export interface ImageProps extends GeneratedImageLike {
-  alt: string;
-  class?: string;
-}
-
-function getImageSrc(base64?: string, mediaType?: string): string | undefined {
-  if (base64 && mediaType) {
-    return `data:${mediaType};base64,${base64}`;
-  }
-  return undefined;
-}
-
-function Image(props: ImageProps) {
-  const [local, rest] = splitProps(props, ['base64', 'uint8Array', 'mediaType', 'class', 'alt']);
-  const [objectUrl, setObjectUrl] = createSignal<string | undefined>(undefined);
-
-  const mediaType = () => local.mediaType ?? 'image/png';
-
-  createEffect(() => {
-    const arr = local.uint8Array;
-    const mt = mediaType();
-    if (arr && mt) {
-      const blob = new Blob([arr as BlobPart], { type: mt });
-      const url = URL.createObjectURL(blob);
-      setObjectUrl(url);
-      onCleanup(() => URL.revokeObjectURL(url));
-    } else {
-      setObjectUrl(undefined);
-    }
-  });
-
-  const src = () => getImageSrc(local.base64, mediaType()) ?? objectUrl();
-
-  return (
-    <Show
-      when={src()}
-      fallback={
-        <Skeleton
-          aria-label={local.alt}
-          role="img"
-          class={cn('h-auto max-w-full overflow-hidden', local.class)}
-        />
-      }
-    >
-      <img
-        src={src()}
-        alt={local.alt}
-        class={cn('h-auto max-w-full overflow-hidden rounded-md', local.class)}
-        role="img"
-      />
-    </Show>
-  );
-}
-
-export { Image };

package/src/components/link-preview.tsx

@@ -1,195 +0,0 @@
-import {
-  type JSX,
-  splitProps,
-  createSignal,
-  createEffect,
-  createMemo,
-  on,
-  onMount,
-  onCleanup,
-  Show,
-} from 'solid-js';
-import { cn } from '../utils/cn';
-import { Skeleton } from '../ui/skeleton';
-import { Link as LinkIcon } from 'lucide-solid';
-import type { CardEvent } from '../primitives/card-contract';
-import {
-  type LinkPreviewData,
-  deriveDomain,
-  isRenderableLink,
-  hasLinkPreviewFetcher,
-  resolveLinkMetadata,
-} from '../primitives/link-preview';
-
-export interface LinkPreviewProps {
-  /** The card id correlating every emitted event. */
-  cardId: string;
-  /** The link payload (data-down). */
-  data: LinkPreviewData;
-  /** Emit a contract CardEvent up (host routes it). */
-  onEmit?: (event: CardEvent) => void;
-  /** Extra classes for the card root. */
-  class?: string;
-}
-
-/** True when the payload already carries renderable metadata (the pure path). */
-function hasMetadata(data: LinkPreviewData): boolean {
-  return Boolean(data.title || data.description || data.image);
-}
-
-/**
- * `LinkPreview` — a pure, themed, accessible rich link / OG preview. Renders from the
- * supplied metadata; it never fetches the network itself. When the payload is a
- * bare `{ url }` and an app has registered a `configureLinkPreview` fetcher, it
- * shows a skeleton, calls the hook, merges the result, and renders. Activating the
- * card (click / Enter / Space) emits the contract `open` verb (`target:'tab'`); the
- * host policy performs the navigation so it can veto/redirect.
- */
-export function LinkPreview(props: LinkPreviewProps): JSX.Element {
-  const [local] = splitProps(props, ['cardId', 'data', 'onEmit', 'class']);
-
-  const emit = (event: CardEvent) => local.onEmit?.(event);
-
-  // Bare-URL resolution state (only used when the payload lacks metadata + a fetcher exists).
-  const [fetched, setFetched] = createSignal<Partial<LinkPreviewData> | undefined>();
-  const [loading, setLoading] = createSignal(false);
-  const [imageBroken, setImageBroken] = createSignal(false);
-
-  const url = () => local.data.url;
-  const valid = createMemo(() => isRenderableLink(url()));
-
-  // The effective payload = supplied data merged with any fetched metadata.
-  const effective = createMemo<LinkPreviewData>(() => ({ ...local.data, ...fetched() }));
-
-  // Lifecycle `ready` once on mount.
-  onMount(() => emit({ kind: 'ready', cardId: local.cardId }));
-
-  // Invalid URL → emit a single `error` (belt-and-suspenders; host also rejects bad schemes on open).
-  createEffect(
-    on(valid, (ok) => {
-      if (!ok) emit({ kind: 'error', cardId: local.cardId, message: `Invalid link url: ${url()}` });
-    }),
-  );
-
-  // Bare-URL path: when there's no metadata AND a fetcher is configured, resolve once.
-  createEffect(
-    on(
-      () => [local.data, valid()] as const,
-      ([data, ok]) => {
-        setImageBroken(false);
-        if (!ok || hasMetadata(data) || !hasLinkPreviewFetcher()) return;
-        let cancelled = false;
-        // Cancel a stale in-flight fetch if `data` changes before it resolves.
-        onCleanup(() => {
-          cancelled = true;
-        });
-        setLoading(true);
-        resolveLinkMetadata(data.url)
-          .then((meta) => {
-            if (!cancelled) setFetched(meta);
-          })
-          .catch(() => {
-            // Reject → fall back to the bare link chip; the URL itself is still usable.
-            if (!cancelled) setFetched({});
-          })
-          .finally(() => {
-            if (!cancelled) setLoading(false);
-          });
-      },
-    ),
-  );
-
-  const domain = createMemo(() => effective().domain ?? deriveDomain(url()) ?? url());
-  const heading = createMemo(() => effective().siteName ?? domain());
-  const titleText = createMemo(() => effective().title ?? domain());
-  const showImage = createMemo(() => Boolean(effective().image) && !imageBroken());
-
-  const activate = () => {
-    if (!valid()) return;
-    emit({ kind: 'open', cardId: local.cardId, url: url(), target: 'tab' });
-  };
-
-  const onClick = (e: MouseEvent) => {
-    // Intercept the anchor's default navigation so it routes through host policy.
-    // (Middle-click / cmd-click still open the real href in a new tab — acceptable + safe.)
-    e.preventDefault();
-    activate();
-  };
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      activate();
-    }
-  };
-
-  // --- Invalid-link error chip ------------------------------------------
-  return (
-    <Show
-      when={valid()}
-      fallback={
-        <div
-          role="img"
-          aria-label="Invalid link"
-          class={cn(
-            'flex items-center gap-2 rounded-xl border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive dark:border-red-400/50 dark:bg-destructive/20 dark:text-red-400',
-            local.class,
-          )}
-        >
-          <LinkIcon size={16} aria-hidden="true" />
-          <span class="truncate">Invalid link</span>
-        </div>
-      }
-    >
-      <a
-        href={url()}
-        rel="noopener noreferrer"
-        aria-label={`Open ${titleText()} on ${domain()}`}
-        class={cn(
-          'group block overflow-hidden rounded-xl border border-border bg-card text-card-foreground no-underline outline-none transition-shadow',
-          'cursor-pointer hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring',
-          local.class,
-        )}
-        onClick={onClick}
-        onKeyDown={onKeyDown}
-      >
-        <Show when={loading()}>
-          {/* Skeleton while the bare-URL fetcher resolves. */}
-          <Skeleton class="aspect-[16/9] w-full rounded-none" />
-          <div class="space-y-2 p-3">
-            <Skeleton class="h-3 w-1/3" />
-            <Skeleton class="h-4 w-2/3" />
-            <Skeleton class="h-3 w-full" />
-          </div>
-        </Show>
-        <Show when={!loading()}>
-          <Show when={showImage()}>
-            <img
-              src={effective().image}
-              alt={effective().imageAlt ?? ''}
-              role="img"
-              class="aspect-[16/9] w-full object-cover"
-              onError={() => setImageBroken(true)}
-            />
-          </Show>
-          <div class="space-y-1 p-3">
-            <div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <Show
-                when={effective().favicon}
-                fallback={<LinkIcon size={12} class="shrink-0 opacity-70" aria-hidden="true" />}
-              >
-                <img src={effective().favicon} alt="" class="h-3.5 w-3.5 shrink-0 rounded-sm" />
-              </Show>
-              <span class="truncate">{heading()}</span>
-            </div>
-            <div class="line-clamp-2 text-sm font-semibold text-foreground">{titleText()}</div>
-            <Show when={effective().description}>
-              <div class="line-clamp-3 text-xs text-muted-foreground">{effective().description}</div>
-            </Show>
-          </div>
-        </Show>
-      </a>
-    </Show>
-  );
-}
-
-export type { LinkPreviewData } from '../primitives/link-preview';

package/src/components/loader.tsx

@@ -1,367 +0,0 @@
-import { Switch, Match, For, Show } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export type LoaderVariant =
-  | 'circular'
-  | 'classic'
-  | 'pulse'
-  | 'pulse-dot'
-  | 'dots'
-  | 'typing'
-  | 'wave'
-  | 'bars'
-  | 'terminal'
-  | 'text-blink'
-  | 'text-shimmer'
-  | 'loading-dots';
-
-export type LoaderSize = 'sm' | 'md' | 'lg';
-
-export interface LoaderProps {
-  variant?: LoaderVariant;
-  size?: LoaderSize;
-  text?: string;
-  class?: string;
-}
-
-/** Props of the shape-only loader variants (no label). */
-export interface LoaderShapeProps {
-  class?: string;
-  size?: LoaderSize;
-}
-
-/** Props of the text-based loader variants, which also take the label. */
-export interface LoaderTextProps extends LoaderShapeProps {
-  text?: string;
-}
-
-// Every variant shortcut ships its own `<Name>Props` alias: a consumer typing a
-// wrapper around `<DotsLoader>` must be able to name its props without knowing
-// that nine components happen to share one shape.
-export type CircularLoaderProps = LoaderShapeProps;
-export type ClassicLoaderProps = LoaderShapeProps;
-export type PulseLoaderProps = LoaderShapeProps;
-export type PulseDotLoaderProps = LoaderShapeProps;
-export type DotsLoaderProps = LoaderShapeProps;
-export type TypingLoaderProps = LoaderShapeProps;
-export type WaveLoaderProps = LoaderShapeProps;
-export type BarsLoaderProps = LoaderShapeProps;
-export type TerminalLoaderProps = LoaderShapeProps;
-export type TextBlinkLoaderProps = LoaderTextProps;
-export type TextShimmerLoaderProps = LoaderTextProps;
-export type TextDotsLoaderProps = LoaderTextProps;
-
-// --- CircularLoader ---
-
-export function CircularLoader(props: CircularLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
-  return (
-    <div
-      class={cn(
-        'border-primary animate-spin rounded-full border-2 border-t-transparent',
-        sizeClasses[size()],
-        props.class
-      )}
-    >
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- ClassicLoader ---
-
-export function ClassicLoader(props: ClassicLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
-  const barSizes = {
-    sm: { height: '6px', width: '1.5px' },
-    md: { height: '8px', width: '2px' },
-    lg: { height: '10px', width: '2.5px' },
-  };
-  return (
-    <div class={cn('relative', sizeClasses[size()], props.class)}>
-      <div class="absolute h-full w-full">
-        <For each={Array.from({ length: 12 }, (_, i) => i)}>
-          {(i) => (
-            <div
-              class="bg-primary absolute animate-[spinner-fade_1.2s_linear_infinite] rounded-full"
-              style={{
-                top: '0',
-                left: '50%',
-                'margin-left': size() === 'sm' ? '-0.75px' : size() === 'lg' ? '-1.25px' : '-1px',
-                'transform-origin': `${size() === 'sm' ? '0.75px' : size() === 'lg' ? '1.25px' : '1px'} ${size() === 'sm' ? '10px' : size() === 'lg' ? '14px' : '12px'}`,
-                transform: `rotate(${i * 30}deg)`,
-                opacity: 0,
-                'animation-delay': `${i * 0.1}s`,
-                height: barSizes[size()].height,
-                width: barSizes[size()].width,
-              }}
-            />
-          )}
-        </For>
-      </div>
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- PulseLoader ---
-
-export function PulseLoader(props: PulseLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
-  return (
-    <div class={cn('relative', sizeClasses[size()], props.class)}>
-      <div class="border-primary absolute inset-0 animate-[thin-pulse_1.5s_ease-in-out_infinite] rounded-full border-2" />
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- PulseDotLoader ---
-
-export function PulseDotLoader(props: PulseDotLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const sizeClasses = { sm: 'size-1', md: 'size-2', lg: 'size-3' };
-  return (
-    <div
-      class={cn(
-        'bg-primary animate-[pulse-dot_1.2s_ease-in-out_infinite] rounded-full',
-        sizeClasses[size()],
-        props.class
-      )}
-    >
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- DotsLoader ---
-
-export function DotsLoader(props: DotsLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const dotSizes = { sm: 'h-1.5 w-1.5', md: 'h-2 w-2', lg: 'h-2.5 w-2.5' };
-  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
-  return (
-    <div class={cn('flex items-center space-x-1', containerSizes[size()], props.class)}>
-      <For each={[0, 1, 2]}>
-        {(i) => (
-          <div
-            class={cn(
-              'bg-primary animate-[bounce-dots_1.4s_ease-in-out_infinite] rounded-full',
-              dotSizes[size()]
-            )}
-            style={{ 'animation-delay': `${i * 160}ms` }}
-          />
-        )}
-      </For>
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- TypingLoader ---
-
-export function TypingLoader(props: TypingLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const dotSizes = { sm: 'h-1 w-1', md: 'h-1.5 w-1.5', lg: 'h-2 w-2' };
-  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
-  return (
-    <div class={cn('flex items-center space-x-1', containerSizes[size()], props.class)}>
-      <For each={[0, 1, 2]}>
-        {(i) => (
-          <div
-            class={cn(
-              'bg-primary animate-[typing_1s_infinite] rounded-full',
-              dotSizes[size()]
-            )}
-            style={{ 'animation-delay': `${i * 250}ms` }}
-          />
-        )}
-      </For>
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- WaveLoader ---
-
-export function WaveLoader(props: WaveLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const barWidths = { sm: 'w-0.5', md: 'w-0.5', lg: 'w-1' };
-  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
-  const heights: Record<LoaderSize, string[]> = {
-    sm: ['6px', '9px', '12px', '9px', '6px'],
-    md: ['8px', '12px', '16px', '12px', '8px'],
-    lg: ['10px', '15px', '20px', '15px', '10px'],
-  };
-  return (
-    <div class={cn('flex items-center gap-0.5', containerSizes[size()], props.class)}>
-      <For each={[0, 1, 2, 3, 4]}>
-        {(i) => (
-          <div
-            class={cn(
-              'bg-primary animate-[wave_1s_ease-in-out_infinite] rounded-full',
-              barWidths[size()]
-            )}
-            style={{
-              'animation-delay': `${i * 100}ms`,
-              height: heights[size()][i],
-            }}
-          />
-        )}
-      </For>
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- BarsLoader ---
-
-export function BarsLoader(props: BarsLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const barWidths = { sm: 'w-1', md: 'w-1.5', lg: 'w-2' };
-  const containerSizes = { sm: 'h-4 gap-1', md: 'h-5 gap-1.5', lg: 'h-6 gap-2' };
-  return (
-    <div class={cn('flex', containerSizes[size()], props.class)}>
-      <For each={[0, 1, 2]}>
-        {(i) => (
-          <div
-            class={cn(
-              'bg-primary h-full animate-[wave-bars_1.2s_ease-in-out_infinite]',
-              barWidths[size()]
-            )}
-            style={{ 'animation-delay': `${i * 0.2}s` }}
-          />
-        )}
-      </For>
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- TerminalLoader ---
-
-export function TerminalLoader(props: TerminalLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const cursorSizes = { sm: 'h-3 w-1.5', md: 'h-4 w-2', lg: 'h-5 w-2.5' };
-  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
-  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
-  return (
-    <div class={cn('flex items-center space-x-1', containerSizes[size()], props.class)}>
-      {/* Decorative status chrome, not a control — was the BRAND token
-          (text-primary). The sibling TextShimmerLoader below already renders
-          its "Thinking" text purely in --color-foreground/--color-muted-foreground,
-          with no brand color at all; matches that precedent. */}
-      <span class={cn('text-foreground font-mono', textSizes[size()])}>{'>'}</span>
-      <div class={cn('bg-primary animate-[blink_1s_step-end_infinite]', cursorSizes[size()])} />
-      <span class="sr-only">Loading</span>
-    </div>
-  );
-}
-
-// --- TextBlinkLoader ---
-
-export function TextBlinkLoader(props: TextBlinkLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
-  return (
-    <div
-      class={cn(
-        'animate-[text-blink_2s_ease-in-out_infinite] font-medium',
-        textSizes[size()],
-        props.class
-      )}
-    >
-      {props.text ?? 'Thinking'}
-    </div>
-  );
-}
-
-// --- TextShimmerLoader ---
-
-export function TextShimmerLoader(props: TextShimmerLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
-  return (
-    <div
-      class={cn(
-        'bg-[linear-gradient(to_right,var(--color-muted-foreground)_40%,var(--color-foreground)_60%,var(--color-muted-foreground)_80%)]',
-        'bg-size-[200%_auto] bg-clip-text font-medium text-transparent',
-        'animate-[shimmer_4s_infinite_linear]',
-        textSizes[size()],
-        props.class
-      )}
-    >
-      {props.text ?? 'Thinking'}
-    </div>
-  );
-}
-
-// --- TextDotsLoader ---
-
-export function TextDotsLoader(props: TextDotsLoaderProps) {
-  const size = () => props.size ?? 'md';
-  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
-  return (
-    <div class={cn('inline-flex items-center', props.class)}>
-      {/* Content/chrome, not a control — was `text-primary` on the label AND
-          the dots (both must match: one phrase, "Thinking..."). Matches
-          TextShimmerLoader's neutral precedent above. */}
-      <span class={cn('text-foreground font-medium', textSizes[size()])}>
-        {props.text ?? 'Thinking'}
-      </span>
-      <span class="inline-flex">
-        <span class="text-foreground animate-[loading-dots_1.4s_infinite_0.2s]">.</span>
-        <span class="text-foreground animate-[loading-dots_1.4s_infinite_0.4s]">.</span>
-        <span class="text-foreground animate-[loading-dots_1.4s_infinite_0.6s]">.</span>
-      </span>
-    </div>
-  );
-}
-
-// --- Loader (variant dispatcher) ---
-
-export function Loader(props: LoaderProps) {
-  return (
-    <Switch fallback={<CircularLoader size={props.size} class={props.class} />}>
-      <Match when={props.variant === 'circular'}>
-        <CircularLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'classic'}>
-        <ClassicLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'pulse'}>
-        <PulseLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'pulse-dot'}>
-        <PulseDotLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'dots'}>
-        <DotsLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'typing'}>
-        <TypingLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'wave'}>
-        <WaveLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'bars'}>
-        <BarsLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'terminal'}>
-        <TerminalLoader size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'text-blink'}>
-        <TextBlinkLoader text={props.text} size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'text-shimmer'}>
-        <TextShimmerLoader text={props.text} size={props.size} class={props.class} />
-      </Match>
-      <Match when={props.variant === 'loading-dots'}>
-        <TextDotsLoader text={props.text} size={props.size} class={props.class} />
-      </Match>
-    </Switch>
-  );
-}