@kitn.ai/ui 0.28.0 → 0.29.0

package/src/components/home-panel.tsx

@@ -1,159 +0,0 @@
-import { For, Show } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Button } from '../ui/button';
-import { renderIcon } from '../ui/icon';
-import { isSafeUrl } from '../primitives/url-scheme-policy';
-import { relativeTimeShort, isConversationUnread } from './conversation-item';
-import type { ConversationSummary, HomeLinkEntry } from '../types';
-
-export interface HomePanelProps {
-  greeting?: { title?: string; subtitle?: string };
-  /** The most-recent conversation, host-derived. `undefined` hides the card
-   *  entirely — this component never fetches or picks one itself. */
-  recent?: ConversationSummary;
-  /** Defaults to `true`. */
-  showNewConversation?: boolean;
-  /** Defaults to `'Send us a message'`. */
-  newChatLabel?: string;
-  links?: HomeLinkEntry[];
-  onSelectRecent?: (id: string) => void;
-  onNewChat: () => void;
-  /** Fired only for href-less link entries — an entry with a safe `href`
-   *  navigates as a real anchor instead. */
-  onLink?: (entry: HomeLinkEntry) => void;
-  class?: string;
-}
-
-/**
- * The widget home screen (Intercom-pattern, H-1): greeting, the most-recent
- * conversation, a "start a new conversation" CTA, and a list of host-defined
- * links. Pure props in, events out — no fetching, no routing; a later task
- * wires this behind `ChatThread`'s Home/Messages tab bar.
- *
- * Unsafe-href rule: a `links` entry with an `href` that fails `isSafeUrl`
- * (e.g. `javascript:`) is NOT silently promoted into a button/event-emitter —
- * that would let a host-authored-but-attacker-influenced config still fire a
- * handler off a scheme SAFE_SCHEMES rejects. It renders as a plain,
- * non-interactive row: label visible, no anchor, no button, no click handler.
- */
-export function HomePanel(props: HomePanelProps) {
-  const title = () => props.greeting?.title ?? 'Hi there 👋';
-
-  return (
-    <div
-      data-kai-home-panel
-      class={cn('flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-5', props.class)}
-    >
-      <div class="flex flex-col gap-1">
-        <h2 class="text-xl font-semibold text-foreground">{title()}</h2>
-        <Show when={props.greeting?.subtitle}>
-          <p class="text-sm text-muted-foreground">{props.greeting!.subtitle}</p>
-        </Show>
-      </div>
-
-      <Show when={props.recent}>
-        {(recent) => {
-          const time = () => relativeTimeShort(recent().updatedAt ?? recent().lastMessageAt);
-          const unread = () => isConversationUnread(recent());
-          return (
-            <button
-              type="button"
-              data-kai-home-recent
-              onClick={() => props.onSelectRecent?.(recent().id)}
-              class="flex flex-col gap-1 rounded-xl border border-border p-4 text-left transition-colors hover:bg-accent"
-            >
-              <span class="flex items-center gap-2 text-sm font-semibold text-foreground">
-                <span class="min-w-0 flex-1 truncate">{recent().title}</span>
-                <Show when={unread()}>
-                  <span aria-hidden="true" class="size-1.5 shrink-0 rounded-full bg-unread" />
-                </Show>
-                <Show when={time()}>
-                  <span class="shrink-0 text-xs font-normal text-muted-foreground">{time()}</span>
-                </Show>
-              </span>
-              <Show when={recent().trailing}>
-                <span class="line-clamp-1 text-sm text-muted-foreground">{recent().trailing}</span>
-              </Show>
-            </button>
-          );
-        }}
-      </Show>
-
-      <Show when={props.showNewConversation !== false}>
-        <Button
-          type="button"
-          data-kai-home-new
-          full
-          align="start"
-          onClick={() => props.onNewChat()}
-          class="justify-between"
-        >
-          <span>{props.newChatLabel ?? 'Send us a message'}</span>
-          {renderIcon('arrow-right', { class: 'size-4 shrink-0' })}
-        </Button>
-      </Show>
-
-      <Show when={props.links && props.links.length > 0}>
-        <div class="flex flex-col overflow-hidden rounded-xl border border-border">
-          <For each={props.links}>
-            {(entry) => {
-              const safeHref = () => (entry.href && isSafeUrl(entry.href) ? entry.href : undefined);
-              const inner = (
-                <>
-                  <span class="flex min-w-0 items-center gap-2">
-                    <Show when={entry.icon}>{renderIcon(entry.icon, { class: 'size-4 shrink-0 text-muted-foreground' })}</Show>
-                    <span class="flex min-w-0 flex-col text-left">
-                      <span class="truncate text-sm font-medium text-foreground">{entry.label}</span>
-                      <Show when={entry.description}>
-                        <span class="truncate text-xs text-muted-foreground">{entry.description}</span>
-                      </Show>
-                    </span>
-                  </span>
-                  {renderIcon('chevron-right', { class: 'size-4 shrink-0 text-muted-foreground' })}
-                </>
-              );
-              const rowClass = 'flex items-center justify-between gap-2 border-b border-border p-3 last:border-b-0';
-              return (
-                <Show
-                  when={!entry.href}
-                  fallback={
-                    <Show
-                      when={safeHref()}
-                      fallback={
-                        // Unsafe href: a non-interactive row. No anchor, no
-                        // button, no handler — the label stays visible, it
-                        // just never becomes clickable.
-                        <div data-kai-home-link class={rowClass}>
-                          {inner}
-                        </div>
-                      }
-                    >
-                      <a
-                        data-kai-home-link
-                        href={safeHref()}
-                        target="_blank"
-                        rel="noreferrer noopener"
-                        class={cn(rowClass, 'transition-colors hover:bg-accent')}
-                      >
-                        {inner}
-                      </a>
-                    </Show>
-                  }
-                >
-                  <button
-                    type="button"
-                    data-kai-home-link
-                    onClick={() => props.onLink?.(entry)}
-                    class={cn(rowClass, 'w-full text-left transition-colors hover:bg-accent')}
-                  >
-                    {inner}
-                  </button>
-                </Show>
-              );
-            }}
-          </For>
-        </div>
-      </Show>
-    </div>
-  );
-}

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';