@kitn.ai/ui 0.28.0 → 0.30.0

package/src/components/embed.tsx

@@ -1,200 +0,0 @@
-import {
-  type JSX,
-  splitProps,
-  createSignal,
-  createEffect,
-  createMemo,
-  on,
-  onMount,
-  Show,
-} from 'solid-js';
-import { cn } from '../utils/cn';
-import { Play, Video, ExternalLink, TriangleAlert } from 'lucide-solid';
-import type { CardEvent } from '../primitives/card-contract';
-import {
-  type EmbedCardData,
-  type ResolvedEmbed,
-  resolveEmbed,
-  watchUrl,
-  providerLabel,
-  aspectRatioValue,
-} from '../primitives/embed-providers';
-
-export interface EmbedProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onError'> {
-  /** The card id correlating every emitted event. */
-  cardId: string;
-  /** The embed payload (data-down). */
-  data: EmbedCardData;
-  /** Emit a contract CardEvent up (host routes it). */
-  onEmit?: (event: CardEvent) => void;
-}
-
-/**
- * `Embed` — a privacy-first lazy media facade. Initial render is a poster + a play
- * button: NO provider iframe, NO provider JS, NO cookies until the user opts in.
- * On play it swaps in the provider `<iframe>` (youtube-nocookie / vimeo dnt /
- * allowlisted generic). A persistent "Open on {provider}" affordance routes the
- * contract `open` verb so a blocked embed is never a dead end. The only verbs it
- * emits are lifecycle `ready`, `open`, and failure `error`.
- */
-export function Embed(props: EmbedProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['cardId', 'data', 'onEmit', 'class']);
-
-  const emit = (event: CardEvent) => local.onEmit?.(event);
-
-  const [playing, setPlaying] = createSignal(false);
-  const [posterBroken, setPosterBroken] = createSignal(false);
-  let playerRegion: HTMLDivElement | undefined;
-
-  // Resolve the provider URL/poster/sandbox; capture a resolution error to render inline.
-  const resolved = createMemo<{ ok: true; value: ResolvedEmbed } | { ok: false; error: string }>(
-    () => {
-      try {
-        return { ok: true, value: resolveEmbed(local.data) };
-      } catch (e) {
-        return { ok: false, error: e instanceof Error ? e.message : String(e) };
-      }
-    },
-  );
-
-  const ratio = createMemo(() => aspectRatioValue(local.data.aspectRatio));
-  const titleText = () => local.data.title ?? 'Embedded video';
-  const poster = createMemo(() =>
-    resolved().ok && !posterBroken() ? (resolved() as { value: ResolvedEmbed }).value.posterUrl : undefined,
-  );
-  const watch = createMemo(() => watchUrl(local.data));
-  const label = () => providerLabel(local.data.provider);
-
-  onMount(() => emit({ kind: 'ready', cardId: local.cardId }));
-
-  // Resolution failure → a single `error` event (defense in depth; the schema allOf
-  // and the origin allowlist should catch most of these earlier).
-  createEffect(
-    on(resolved, (r) => {
-      if (!r.ok) emit({ kind: 'error', cardId: local.cardId, message: r.error });
-    }),
-  );
-
-  // Reset facade state when the payload changes.
-  createEffect(
-    on(
-      () => local.data,
-      () => {
-        setPlaying(false);
-        setPosterBroken(false);
-      },
-      { defer: true },
-    ),
-  );
-
-  const play = () => {
-    if (!resolved().ok) return;
-    setPlaying(true);
-    // Move focus into the player region for SR/keyboard continuity.
-    queueMicrotask(() => playerRegion?.focus());
-  };
-  const onPlayKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      play();
-    }
-  };
-  const openOnProvider = () => {
-    const w = watch();
-    if (w) emit({ kind: 'open', cardId: local.cardId, url: w, target: 'tab' });
-  };
-
-  return (
-    <div
-      class={cn('overflow-hidden rounded-xl border border-border bg-card text-card-foreground', local.class)}
-      {...rest}
-    >
-      <div class="relative w-full bg-black" style={{ 'aspect-ratio': ratio() }}>
-        <Show
-          when={resolved().ok}
-          fallback={
-            <div
-              role="img"
-              aria-label="Can't load this video"
-              class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-muted p-4 text-center text-sm text-muted-foreground"
-            >
-              <TriangleAlert size={28} aria-hidden="true" />
-              <span>Can't load this video</span>
-            </div>
-          }
-        >
-          <Show
-            when={playing()}
-            fallback={
-              <button
-                type="button"
-                aria-label={`Play ${local.data.title ?? 'video'}`}
-                class="group absolute inset-0 flex h-full w-full items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
-                onClick={() => play()}
-                onKeyDown={onPlayKeyDown}
-              >
-                {/* Poster (or a neutral placeholder when absent/broken). */}
-                <Show
-                  when={poster()}
-                  fallback={
-                    <div
-                      class="absolute inset-0 bg-gradient-to-br from-zinc-800 to-zinc-950"
-                      aria-hidden="true"
-                    />
-                  }
-                >
-                  <img
-                    src={poster()}
-                    alt={local.data.title ?? ''}
-                    class="absolute inset-0 h-full w-full object-cover"
-                    onError={() => setPosterBroken(true)}
-                  />
-                </Show>
-                <span
-                  class="relative flex h-14 w-14 items-center justify-center rounded-full bg-black/60 text-white shadow-lg transition-transform motion-safe:group-hover:scale-110"
-                  aria-hidden="true"
-                >
-                  <Play size={26} fill="currentColor" />
-                </span>
-              </button>
-            }
-          >
-            {/* `outline-none` is DELIBERATE here and must stay: a `tabindex="-1"`
-                wrapper focused programmatically after the user activates the
-                player, so keyboard context lands on the embed. Not a tab stop —
-                the iframe inside it takes focus from there. */}
-            <div ref={(el) => (playerRegion = el)} tabindex="-1" class="absolute inset-0 outline-none">
-              <iframe
-                src={(resolved() as { value: ResolvedEmbed }).value.embedUrl}
-                title={titleText()}
-                sandbox={(resolved() as { value: ResolvedEmbed }).value.sandbox}
-                allow={(resolved() as { value: ResolvedEmbed }).value.allow}
-                allowfullscreen
-                class="absolute inset-0 h-full w-full border-0"
-              />
-            </div>
-          </Show>
-        </Show>
-      </div>
-      {/* Footer: title + the always-available "Open on {provider}" fallback affordance. */}
-      <div class="flex items-center justify-between gap-2 px-3 py-2">
-        <span class="flex min-w-0 items-center gap-1.5 text-sm text-foreground">
-          <Video size={14} class="shrink-0 opacity-70" aria-hidden="true" />
-          <span class="truncate">{local.data.title ?? label()}</span>
-        </span>
-        <Show when={watch()}>
-          <button
-            type="button"
-            class="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
-            onClick={() => openOnProvider()}
-          >
-            Open on {label()}
-            <ExternalLink size={12} aria-hidden="true" />
-          </button>
-        </Show>
-      </div>
-    </div>
-  );
-}
-
-export type { EmbedCardData } from '../primitives/embed-providers';

package/src/components/empty.tsx

@@ -1,177 +0,0 @@
-import { type JSX, splitProps } from 'solid-js';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-/**
- * Empty — a composable empty-state block, modeled on shadcn/ui's `Empty`.
- * Structure:
- *   Empty
- *   ├── EmptyHeader
- *   │   ├── EmptyMedia   (icon / avatar)
- *   │   ├── EmptyTitle
- *   │   └── EmptyDescription
- *   └── EmptyContent     (actions / suggestions)
- *
- * Styling is token-driven (`--color-*`), so it themes with the rest of the kit.
- * No visible border by default; add `border border-dashed` via `class` for a card.
- */
-
-// --- Empty (root) ---
-
-export interface EmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  children: JSX.Element;
-}
-
-function Empty(props: EmptyProps) {
-  const [local, rest] = splitProps(props, ['class', 'children']);
-  return (
-    <div
-      // NO `text-center` / `text-balance` on the root. Both INHERIT, and
-      // `EmptyContent` is an arbitrary-content slot — a `PromptInput` dropped in
-      // it picked the centering up and rendered its placeholder and its typed
-      // text centred (owner report). Centering is a fact about the empty state's
-      // OWN title/description, so it lives on `EmptyTitle`/`EmptyDescription`
-      // (and `EmptyHeader`, which wraps only those). The root still centres its
-      // children as BOXES via `items-center`, which is what it actually wants.
-      data-slot="empty"
-      class={cn(
-        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6',
-        local.class,
-      )}
-      {...rest}
-    >
-      {local.children}
-    </div>
-  );
-}
-
-// --- EmptyHeader ---
-
-export interface EmptyHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  children: JSX.Element;
-}
-
-function EmptyHeader(props: EmptyHeaderProps) {
-  const [local, rest] = splitProps(props, ['class', 'children']);
-  return (
-    <div
-      data-slot="empty-header"
-      class={cn('flex max-w-sm flex-col items-center gap-2 text-center', local.class)}
-      {...rest}
-    >
-      {local.children}
-    </div>
-  );
-}
-
-// --- EmptyMedia ---
-
-const emptyMediaVariants = cva(
-  'flex shrink-0 items-center justify-center mb-2 [&_svg]:size-6',
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        icon: 'bg-muted text-foreground size-10 rounded-lg',
-      },
-    },
-    defaultVariants: { variant: 'default' },
-  },
-);
-
-export interface EmptyMediaProps
-  extends JSX.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof emptyMediaVariants> {
-  children: JSX.Element;
-}
-
-function EmptyMedia(props: EmptyMediaProps) {
-  const [local, rest] = splitProps(props, ['class', 'variant', 'children']);
-  return (
-    <div
-      data-slot="empty-media"
-      data-variant={local.variant ?? 'default'}
-      class={cn(emptyMediaVariants({ variant: local.variant }), local.class)}
-      {...rest}
-    >
-      {local.children}
-    </div>
-  );
-}
-
-// --- EmptyTitle ---
-
-export interface EmptyTitleProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  children: JSX.Element;
-}
-
-function EmptyTitle(props: EmptyTitleProps) {
-  const [local, rest] = splitProps(props, ['class', 'children']);
-  return (
-    <div
-      data-slot="empty-title"
-      // Carries its own centering + balance (the root no longer broadcasts them
-      // to every slotted child), so a title is centred wherever it is placed.
-      class={cn('text-title font-medium tracking-tight text-center text-balance', local.class)}
-      {...rest}
-    >
-      {local.children}
-    </div>
-  );
-}
-
-// --- EmptyDescription ---
-
-export interface EmptyDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
-  children: JSX.Element;
-}
-
-function EmptyDescription(props: EmptyDescriptionProps) {
-  const [local, rest] = splitProps(props, ['class', 'children']);
-  return (
-    <p
-      data-slot="empty-description"
-      class={cn(
-        // Same as EmptyTitle: own the centering + balance rather than inheriting
-        // it from a root that also reaches arbitrary slotted content.
-        'text-muted-foreground text-body text-center text-balance [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
-        local.class,
-      )}
-      {...rest}
-    >
-      {local.children}
-    </p>
-  );
-}
-
-// --- EmptyContent ---
-
-export interface EmptyContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  children: JSX.Element;
-}
-
-function EmptyContent(props: EmptyContentProps) {
-  const [local, rest] = splitProps(props, ['class', 'children']);
-  return (
-    <div
-      data-slot="empty-content"
-      class={cn(
-        'flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-sm text-balance',
-        local.class,
-      )}
-      {...rest}
-    >
-      {local.children}
-    </div>
-  );
-}
-
-export {
-  Empty,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  emptyMediaVariants,
-};

package/src/components/feedback-bar.tsx

@@ -1,166 +0,0 @@
-import { type JSX, Switch, Match, For, Show, createSignal } from 'solid-js';
-import { cn } from '../utils/cn';
-import { ThumbsUp, ThumbsDown, X, Check } from 'lucide-solid';
-import { Button } from '../ui/button';
-import { Textarea } from '../ui/textarea';
-
-export type FeedbackValue = 'helpful' | 'not-helpful';
-
-/** Payload of the optional detail form (phase 2). */
-export interface FeedbackDetail {
-  value: FeedbackValue;
-  /** The selected category chip, if any. */
-  category?: string;
-  /** The free-text comment, if entered. */
-  comment?: string;
-}
-
-export interface FeedbackBarProps {
-  class?: string;
-  /** Prompt shown in the initial "ask" state. */
-  title?: string;
-  /** Optional leading icon shown before the title. */
-  icon?: JSX.Element;
-  /** When set, a not-helpful vote opens an optional detail form before the
-   *  thank-you confirmation. Off → a vote goes straight to thanks. */
-  collectDetail?: boolean;
-  /** Optional category chips offered in the detail form. */
-  categories?: string[];
-  /** Heading for the detail form. */
-  detailTitle?: string;
-  /** Placeholder for the detail comment box. */
-  detailPlaceholder?: string;
-  /** Submit button label in the detail form. */
-  submitLabel?: string;
-  /** Confirmation copy shown after a vote/submit. */
-  thanksMessage?: string;
-  /** Fired immediately when a rating button is clicked (the vote is recorded
-   *  even if the user never fills in the detail form). */
-  onFeedback?: (value: FeedbackValue) => void;
-  /** Fired when the optional detail form is submitted. */
-  onSubmitDetail?: (detail: FeedbackDetail) => void;
-  /** Fired when the bar is dismissed via the close (X) button. */
-  onClose?: () => void;
-}
-
-type Phase = 'ask' | 'detail' | 'thanks';
-
-/**
- * An inline thumbs up/down feedback bar that owns its own flow: it asks, then
- * (optionally, on a not-helpful vote) collects a category + comment, then
- * confirms with a thank-you — all in place, the way ChatGPT/Claude do it. The
- * vote fires `onFeedback` immediately; the optional detail fires
- * `onSubmitDetail`; `onClose` dismisses the bar.
- */
-export function FeedbackBar(props: FeedbackBarProps) {
-  const [phase, setPhase] = createSignal<Phase>('ask');
-  const [vote, setVote] = createSignal<FeedbackValue>();
-  const [category, setCategory] = createSignal<string>();
-  const [comment, setComment] = createSignal('');
-
-  const rate = (value: FeedbackValue) => {
-    setVote(value);
-    props.onFeedback?.(value);
-    setPhase(value === 'not-helpful' && props.collectDetail ? 'detail' : 'thanks');
-  };
-
-  const submitDetail = () => {
-    props.onSubmitDetail?.({ value: vote()!, category: category(), comment: comment() || undefined });
-    setPhase('thanks');
-  };
-
-  const iconBtn =
-    'text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-md transition-colors';
-
-  return (
-    <div
-      class={cn('bg-background border-border inline-flex rounded-[12px] border text-sm', props.class)}
-    >
-      <Switch>
-        {/* ── Ask ── */}
-        <Match when={phase() === 'ask'}>
-          <div class="flex w-full items-center justify-between">
-            <div class="flex flex-1 items-center justify-start gap-4 py-3 pl-4">
-              <Show when={props.icon}>{props.icon}</Show>
-              <span class="text-foreground font-medium">{props.title}</span>
-            </div>
-            <div class="flex items-center justify-center gap-0.5 px-3 py-0">
-              <button type="button" class={iconBtn} aria-label="Helpful" onClick={() => rate('helpful')}>
-                <ThumbsUp class="size-4" />
-              </button>
-              <button type="button" class={iconBtn} aria-label="Not helpful" onClick={() => rate('not-helpful')}>
-                <ThumbsDown class="size-4" />
-              </button>
-            </div>
-            <div class="border-border flex items-center justify-center border-l">
-              <button
-                type="button"
-                onClick={() => props.onClose?.()}
-                class="text-muted-foreground hover:text-foreground flex items-center justify-center rounded-md p-3"
-                aria-label="Close"
-              >
-                <X class="size-5" />
-              </button>
-            </div>
-          </div>
-        </Match>
-
-        {/* ── Detail (phase 2, not-helpful only) ── */}
-        <Match when={phase() === 'detail'}>
-          <div class="flex w-[min(22rem,80vw)] flex-col gap-2.5 p-3">
-            <div class="flex items-center justify-between">
-              <span class="text-foreground font-medium">{props.detailTitle ?? 'What went wrong?'}</span>
-              <button
-                type="button"
-                aria-label="Skip"
-                onClick={() => setPhase('thanks')}
-                class="text-muted-foreground hover:text-foreground"
-              >
-                <X class="size-4" />
-              </button>
-            </div>
-            <Show when={props.categories?.length}>
-              <div class="flex flex-wrap gap-1.5">
-                <For each={props.categories}>
-                  {(c) => (
-                    <button
-                      type="button"
-                      aria-pressed={category() === c}
-                      onClick={() => setCategory(category() === c ? undefined : c)}
-                      class={cn(
-                        'rounded-full border px-2.5 py-1 text-xs transition-colors',
-                        category() === c
-                          ? 'border-primary bg-primary text-primary-foreground'
-                          : 'border-border text-muted-foreground hover:text-foreground',
-                      )}
-                    >
-                      {c}
-                    </button>
-                  )}
-                </For>
-              </div>
-            </Show>
-            <Textarea
-              value={comment()}
-              onInput={(e) => setComment(e.currentTarget.value)}
-              placeholder={props.detailPlaceholder ?? 'Tell us more (optional)'}
-              class="border-border min-h-[3rem] rounded-md border px-2 py-1.5"
-            />
-            <div class="flex justify-end gap-2">
-              <Button variant="ghost" size="sm" onClick={() => setPhase('thanks')}>Skip</Button>
-              <Button variant="default" size="sm" onClick={submitDetail}>{props.submitLabel ?? 'Submit'}</Button>
-            </div>
-          </div>
-        </Match>
-
-        {/* ── Thanks ── */}
-        <Match when={phase() === 'thanks'}>
-          <div class="flex items-center gap-2 px-4 py-3" role="status">
-            <Check class="size-4 text-emerald-500" />
-            <span class="text-foreground font-medium">{props.thanksMessage ?? 'Thanks for your feedback'}</span>
-          </div>
-        </Match>
-      </Switch>
-    </div>
-  );
-}