zidane-ui 9.1.1 → 9.1.4

package/src/components/BrowserChrome.tsx

@@ -1,189 +0,0 @@
-/**
- * A browser toolbar's parts: round navigation buttons for a segment
- * (`NavButton`) and the address field (`AddressBar`). The app's dev
- * browser and the playground's preview share them.
- */
-import { animate } from 'motion';
-import { useEffect, useRef, useState, type CSSProperties } from 'react';
-
-import { useLabels } from '../labels';
-import { currentMotionTransition } from '../motion/springs';
-import { IconButton } from './IconButton';
-
-/** Props for {@link NavButton}. */
-export interface NavButtonProps {
-  /** Accessible name and tooltip. */
-  label: string;
-  /** An icon class (`i-ph-*`). */
-  icon: string;
-  /** Greys it out and ignores clicks (nothing to go back to). Default: false. */
-  disabled?: boolean;
-  /** A toggle that is on: accent-tinted and `aria-pressed`. Default: false. */
-  active?: boolean;
-  /** Button size, as {@link IconButton}'s. Default: `md`. */
-  size?: 'sm' | 'md';
-  /** Runs the action. */
-  onClick: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a round toolbar button for a nav segment (back, forward, reload…).
- * `active` tints it and sets `aria-pressed`; disabled, it stays flat.
- *
- * @param props - Component props.
- */
-export function NavButton({
-  label,
-  icon,
-  disabled = false,
-  active = false,
-  size = 'md',
-  onClick,
-  className,
-  style,
-}: NavButtonProps) {
-  return (
-    <IconButton
-      icon={icon}
-      label={label}
-      size={size}
-      active={active}
-      aria-pressed={active || undefined}
-      disabled={disabled}
-      onClick={onClick}
-      // Disabled items stay flat: the segment's hover lift would read as live.
-      className={[`!rounded-full disabled:pointer-events-none ${active ? '!text-[var(--zg-accent)]' : ''}`, className]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    />
-  );
-}
-
-/** Props for {@link AddressBar}. */
-export interface AddressBarProps {
-  /** The page's current URL, shown while the field is not focused. */
-  url: string;
-  /** The page's title, as the field's tooltip; empty falls back to `url`. */
-  title: string;
-  /** The site's icon URL; a globe without one. */
-  icon: string | null;
-  /** Default: the `addressPlaceholder` label. */
-  placeholder?: string;
-  /** The URL to load for what was typed, or `null` when it is not one. */
-  normalize: (input: string) => string | null;
-  /** Loads the URL `normalize` made of the draft, on Enter. */
-  onSubmit: (url: string) => void;
-  /** Enter on an empty field. Absent: the field shakes, like any input `normalize` refuses. */
-  onSubmitEmpty?: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Shows the page's URL, led by its site icon (a globe until the icon is known,
- * or when the site has none); while focused, a draft the page never overwrites.
- * Focus selects all, Enter loads, Escape reverts. Input `normalize` refuses
- * (`null`) shakes the field instead of loading something surprising. Enter
- * on an emptied field calls `onSubmitEmpty` when given (the start page).
- *
- * @param props - Component props.
- */
-export function AddressBar({
-  url,
-  title,
-  icon,
-  placeholder,
-  normalize,
-  onSubmit,
-  onSubmitEmpty,
-  className,
-  style,
-}: AddressBarProps) {
-  const labels = useLabels();
-  const [draft, setDraft] = useState<string | null>(null);
-  const [invalid, setInvalid] = useState(false);
-  const input = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!invalid) return undefined;
-    const t = window.setTimeout(() => setInvalid(false), 900);
-    return () => window.clearTimeout(t);
-  }, [invalid]);
-
-  return (
-    <div className={['relative flex-1 min-w-0 flex', className].filter(Boolean).join(' ')} style={style}>
-      <span
-        aria-hidden
-        className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 flex items-center justify-center"
-      >
-        {icon ? (
-          <img src={icon} alt="" draggable={false} className="w-3.5 h-3.5 rounded-[3px] object-contain" />
-        ) : (
-          <span className="i-ph-globe-simple text-zg-body text-[var(--zg-text-subtle)]" />
-        )}
-      </span>
-      <input
-        ref={input}
-        value={draft ?? url}
-        placeholder={placeholder ?? labels.addressPlaceholder}
-        aria-label={labels.address}
-        title={title || url}
-        spellCheck={false}
-        data-invalid={invalid || undefined}
-        onFocus={(e) => {
-          setDraft(url);
-          requestAnimationFrame(() => e.target.select());
-        }}
-        onBlur={() => setDraft(null)}
-        onChange={(e) => {
-          setDraft(e.target.value);
-          setInvalid(false);
-        }}
-        onKeyDown={(e) => {
-          if (e.key === 'Escape') {
-            e.preventDefault();
-            setDraft(null);
-            input.current?.blur();
-          }
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            if (onSubmitEmpty && !(draft ?? '').trim()) {
-              onSubmitEmpty();
-              setDraft(null);
-              input.current?.blur();
-              return;
-            }
-            const next = normalize(draft ?? '');
-            if (!next) {
-              setInvalid(true);
-              shake(input.current);
-              return;
-            }
-            onSubmit(next);
-            setDraft(null);
-            input.current?.blur();
-          }
-        }}
-        className="zg-browser-address zg-well flex-1 min-w-0 h-7 pl-7 pr-2.5 text-zg-label placeholder:text-[var(--zg-text-subtle)]"
-      />
-    </div>
-  );
-}
-
-/**
- * "No": a nudge sideways that springs back (the `snap` spring released with a
- * kick, so it rings and settles). Only a spring can kick: with springs off,
- * reduced or no motion the field just turns red.
- */
-function shake(el: HTMLElement | null): void {
-  const snap = currentMotionTransition('snap');
-  if (!el || snap.type !== 'spring') return;
-  void animate(el, { x: [0, 0] }, { ...snap, velocity: 600 });
-}

package/src/components/BrowserSignIn.tsx

@@ -1,210 +0,0 @@
-/**
- * A browser sign-in while it runs: the page to open, a device code to enter,
- * a question from the provider, progress, then done or failed. The state
- * comes from the host, such as the OAuth of a provider or of an MCP server.
- * This component draws it, and reports Cancel, Retry and what the user pastes
- * or answers.
- */
-import { useState, type CSSProperties, type FormEvent } from 'react';
-
-import { useLabels } from '../labels';
-import { buttonClass } from './button';
-import { CopyButton } from './CopyButton';
-import { INPUT_CLASS } from './Form';
-
-/**
- * Where a browser sign-in is.
- *
- * - `starting`: the flow is starting.
- * - `url`: the sign-in page is open in the browser. `instructions` is the provider's own line, when it has one.
- * - `device`: a device flow: `userCode` goes on the page at `url`.
- * - `prompt`: the provider asks a question, such as a code to paste, or picks among `options`.
- * - `progress`: a status line while it finishes.
- * - `done`: signed in, as `account` when the provider names it.
- * - `error`: it failed.
- */
-export type BrowserSignInState =
-  | { kind: 'starting' }
-  | { kind: 'url'; url: string; instructions?: string }
-  | { kind: 'device'; url: string; userCode: string; expiresInSeconds?: number }
-  | { kind: 'prompt'; message: string; placeholder?: string; options?: readonly string[] }
-  | { kind: 'progress'; message: string }
-  | { kind: 'done'; account?: string }
-  | { kind: 'error'; message: string };
-
-const LINK = 'text-[var(--zg-accent-hover)] underline underline-offset-2';
-
-function hostOf(url: string): string {
-  try {
-    return new URL(url).host;
-  } catch {
-    return url;
-  }
-}
-
-/** Props for {@link BrowserSignIn}. */
-export interface BrowserSignInProps {
-  /** Where the sign-in is. */
-  state: BrowserSignInState;
-  /** What is being signed in to, such as "Anthropic". */
-  service: string;
-  /** Stops the sign-in. Absent: no Cancel button. */
-  onCancel?: () => void;
-  /** Starts it again after a failure. Absent: no Retry button. */
-  onRetry?: () => void;
-  /**
-   * Called with what the user typed: the answer to a `prompt`, or a redirect URL or a code. The
-   * user pastes one while the page is open, when the browser cannot reach this computer. Absent:
-   * no field.
-   */
-  onSubmit?: (text: string) => void;
-  /** Extra classes on the panel. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a browser sign-in's current state, with Cancel while it runs and Retry once it failed.
- *
- * @param props - Component props.
- */
-export function BrowserSignIn({
-  state,
-  service,
-  onCancel,
-  onRetry,
-  onSubmit,
-  className = '',
-  style,
-}: BrowserSignInProps) {
-  const labels = useLabels();
-  const failed = state.kind === 'error';
-  const done = state.kind === 'done';
-  return (
-    <div
-      role={failed ? 'alert' : 'status'}
-      aria-live={failed ? undefined : 'polite'}
-      className={`flex flex-col gap-3 px-3 py-2.5 rounded-zg-md text-zg-label ${failed ? 'bg-zg-danger/10' : 'zg-tray'} ${className}`}
-      style={style}
-    >
-      <div className="flex items-start gap-3">
-        <span className="mt-0.5 shrink-0" aria-hidden>
-          {done ? (
-            <span className="i-ph-check-circle-fill text-zg-body text-[var(--zg-accent)]" />
-          ) : failed ? (
-            <span className="i-ph-warning-circle-fill text-zg-body text-zg-danger" />
-          ) : (
-            <span className="zg-spin-ring zg-loop block mt-px text-[var(--zg-accent)]" />
-          )}
-        </span>
-        <div className="flex-1 min-w-0 flex flex-col gap-1">
-          <SignInMessage state={state} service={service} />
-        </div>
-        {failed
-          ? onRetry && (
-              <button type="button" onClick={onRetry} className={buttonClass({ variant: 'primary', size: 'sm' })}>
-                {labels.retry}
-              </button>
-            )
-          : !done &&
-            onCancel && (
-              <button type="button" onClick={onCancel} className={buttonClass({ variant: 'secondary', size: 'sm' })}>
-                {labels.cancel}
-              </button>
-            )}
-      </div>
-      {onSubmit && (state.kind === 'prompt' || state.kind === 'url') && (
-        <AnswerField
-          key={state.kind === 'prompt' ? state.message : 'paste'}
-          placeholder={state.kind === 'prompt' ? (state.placeholder ?? '') : labels.signInPaste}
-          onSubmit={onSubmit}
-        />
-      )}
-    </div>
-  );
-}
-
-function SignInMessage({ state, service }: { state: BrowserSignInState; service: string }) {
-  const labels = useLabels();
-  switch (state.kind) {
-    case 'starting':
-      return <span className="text-[var(--zg-text)]">{labels.signInStarting}</span>;
-    case 'progress':
-      return <span className="text-[var(--zg-text)] break-words">{state.message}</span>;
-    case 'done':
-      return <span className="text-[var(--zg-text)]">{labels.signInDone(state.account)}</span>;
-    case 'error':
-      return (
-        <>
-          <span className="text-zg-danger font-medium">{labels.signInFailed}</span>
-          <span className="text-[var(--zg-text-muted)] break-words">{state.message}</span>
-        </>
-      );
-    case 'url':
-      return (
-        <>
-          <span className="text-[var(--zg-text)]">{state.instructions ?? labels.signInInBrowser(service)}</span>
-          <span className="text-[var(--zg-text-muted)]">
-            {labels.signInNotOpened}{' '}
-            <a href={state.url} target="_blank" rel="noopener noreferrer" className={LINK}>
-              {labels.signInOpenPage}
-            </a>
-          </span>
-        </>
-      );
-    case 'device':
-      return (
-        <>
-          <span className="text-[var(--zg-text)]">{labels.signInEnterCode(hostOf(state.url))}</span>
-          <span className="flex items-center gap-2">
-            <code className="font-mono text-zg-body tracking-[0.12em] text-[var(--zg-text)]">{state.userCode}</code>
-            <CopyButton text={state.userCode} label={labels.signInCopyCode} />
-            <a href={state.url} target="_blank" rel="noopener noreferrer" className={LINK}>
-              {labels.signInOpenPage}
-            </a>
-          </span>
-        </>
-      );
-    case 'prompt':
-      return (
-        <>
-          <span className="text-[var(--zg-text)] break-words">{state.message}</span>
-          {state.options && (
-            <ol className="m-0 pl-5 text-[var(--zg-text-muted)]">
-              {state.options.map((option) => (
-                <li key={option}>{option}</li>
-              ))}
-            </ol>
-          )}
-        </>
-      );
-  }
-}
-
-function AnswerField({ placeholder, onSubmit }: { placeholder: string; onSubmit: (text: string) => void }) {
-  const labels = useLabels();
-  const [text, setText] = useState('');
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    if (!text.trim()) return;
-    onSubmit(text.trim());
-    setText('');
-  };
-  return (
-    <form onSubmit={submit} className="flex items-center gap-2">
-      <input
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        placeholder={placeholder}
-        aria-label={placeholder || labels.signInPaste}
-        className={INPUT_CLASS}
-        autoComplete="off"
-        spellCheck={false}
-      />
-      <button type="submit" disabled={!text.trim()} className={buttonClass({ variant: 'secondary', size: 'sm' })}>
-        {labels.signInSubmit}
-      </button>
-    </form>
-  );
-}

package/src/components/ChoiceCards.tsx

@@ -1,170 +0,0 @@
-/**
- * A choice among a few cards: one title, a line of description, an optional
- * badge, an optional visual before the title (a logo) and an optional
- * preview above it each. The cards sit flat in a tray and the
- * chosen one is raised with an accent ring, the surfaces' "group, then lift".
- * Radio semantics (APG radio group): one tab stop on the checked card, and
- * the arrows, Home and End move the choice. With `numbered`, the keys 1 to 9
- * pick a card directly. The numbers show while the keyboard is in the group
- * (`.zg-choice-key`), so mouse users see no keys they will not press.
- */
-import { useId, useRef, type CSSProperties, type KeyboardEvent, type ReactNode } from 'react';
-
-/** One card of a {@link ChoiceCards} group. */
-export interface ChoiceCardOption<T extends string> {
-  /** The value reported to `onChange` when the card is picked. Unique among the options. */
-  value: T;
-  /** The card's title. */
-  title: ReactNode;
-  /** One or two lines under the title. */
-  description?: ReactNode;
-  /** A short mark at the end of the title line, such as "recommended". */
-  badge?: ReactNode;
-  /** Icon class (`i-ph-*`) before the title. */
-  icon?: string;
-  /** A visual before the title, such as a `BrandMark`. Takes the place of `icon`. */
-  visual?: ReactNode;
-  /** Content above the title, such as a theme thumbnail or a small demo. */
-  preview?: ReactNode;
-  /** Grey the card out and skip it in keyboard navigation. */
-  disabled?: boolean;
-}
-
-const COLUMNS = {
-  1: '',
-  2: 'sm:grid-cols-2',
-  3: 'sm:grid-cols-2 lg:grid-cols-3',
-  4: 'sm:grid-cols-2 lg:grid-cols-4',
-} as const;
-
-/** Props for {@link ChoiceCards}. */
-export interface ChoiceCardsProps<T extends string> {
-  /** The value of the chosen card. `undefined`: none is chosen yet. */
-  value: T | undefined;
-  /** Called with the value of the card picked by click or keyboard. */
-  onChange: (value: T) => void;
-  /** The cards, in order. */
-  options: readonly ChoiceCardOption<T>[];
-  /**
-   * Cards per row on wide screens. Narrow screens stack them.
-   * @default 3
-   */
-  columns?: keyof typeof COLUMNS;
-  /** Let the keys 1 to 9 pick the cards while the group has focus, and show the numbers while it has keyboard focus. */
-  numbered?: boolean;
-  /** Accessible name of the radio group. */
-  ariaLabel?: string;
-  /** Extra classes on the group. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a radio group of cards. The chosen card is raised, with an accent ring.
- *
- * @param props - Component props.
- */
-export function ChoiceCards<T extends string>({
-  value,
-  onChange,
-  options,
-  columns = 3,
-  numbered = false,
-  ariaLabel,
-  className = '',
-  style,
-}: ChoiceCardsProps<T>) {
-  const id = useId();
-  const cards = useRef<(HTMLButtonElement | null)[]>([]);
-  const checked = options.findIndex((o) => o.value === value && !o.disabled);
-  const stop = checked >= 0 ? checked : options.findIndex((o) => !o.disabled);
-
-  const pick = (index: number) => {
-    const option = options[index];
-    if (!option || option.disabled) return;
-    cards.current[index]?.focus();
-    if (option.value !== value) onChange(option.value);
-  };
-
-  const onKeyDown = (e: KeyboardEvent, from: number) => {
-    const enabled = options.flatMap((o, i) => (o.disabled ? [] : [i]));
-    if (enabled.length === 0) return;
-    const at = enabled.indexOf(from);
-    let next: number | undefined;
-    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = enabled[(at + 1) % enabled.length];
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = enabled[(at - 1 + enabled.length) % enabled.length];
-    else if (e.key === 'Home') next = enabled[0];
-    else if (e.key === 'End') next = enabled[enabled.length - 1];
-    else if (numbered && /^[1-9]$/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) next = Number(e.key) - 1;
-    if (next === undefined) return;
-    e.preventDefault();
-    pick(next);
-  };
-
-  return (
-    <div
-      role="radiogroup"
-      aria-label={ariaLabel}
-      className={`zg-tray rounded-zg-xl p-2 grid grid-cols-1 gap-2 ${COLUMNS[columns]} ${className}`}
-      style={style}
-    >
-      {options.map((o, i) => {
-        const on = i === checked;
-        return (
-          <button
-            key={o.value}
-            ref={(el) => {
-              cards.current[i] = el;
-            }}
-            type="button"
-            role="radio"
-            aria-checked={on}
-            aria-labelledby={`${id}-${i}-title`}
-            aria-describedby={o.description ? `${id}-${i}-description` : undefined}
-            tabIndex={i === stop ? 0 : -1}
-            disabled={o.disabled}
-            data-active={on ? '' : undefined}
-            onClick={() => pick(i)}
-            onKeyDown={(e) => onKeyDown(e, i)}
-            className={`zg-press-subtle relative flex flex-col gap-2 min-w-0 text-left p-4 rounded-zg-lg cursor-pointer transition-[background-color,box-shadow] disabled:opacity-zg-disabled disabled:cursor-default zg-focus-ring ${
-              on
-                ? 'zg-raised border ring-1 ring-[color-mix(in_srgb,var(--zg-accent)_55%,transparent)]'
-                : 'border border-transparent bg-transparent hover:before:bg-[var(--zg-row-hover)]'
-            }`}
-          >
-            {o.preview && <span className="block min-w-0 mb-1.5">{o.preview}</span>}
-            <span className="flex items-center gap-2.5 min-w-0">
-              {o.visual ??
-                (o.icon && (
-                  <span
-                    aria-hidden
-                    className={`${o.icon} text-zg-body shrink-0 ${on ? 'text-[var(--zg-accent)]' : 'text-[var(--zg-text-muted)]'}`}
-                  />
-                ))}
-              <span
-                id={`${id}-${i}-title`}
-                className={`text-zg-ui min-w-0 break-words text-[var(--zg-text)] ${on ? 'font-medium' : ''}`}
-              >
-                {o.title}
-              </span>
-              <span className="ml-auto flex items-center gap-1.5 shrink-0">
-                {o.badge}
-                {numbered && i < 9 && (
-                  <kbd aria-hidden className="zg-choice-key zg-keycap zg-keycap-sm">
-                    {i + 1}
-                  </kbd>
-                )}
-              </span>
-            </span>
-            {o.description && (
-              <span id={`${id}-${i}-description`} className="text-zg-label text-[var(--zg-text-muted)] text-pretty">
-                {o.description}
-              </span>
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
-}