zidane-ui 9.0.4 → 9.1.3

package/src/components/CodeFrame.tsx

@@ -1,209 +0,0 @@
-/**
- * Code set into its surface, with a copy control. Two forms:
- *
- *   no caption  the code panel alone, copy in its top-right corner
- *               (chat transcripts, dense places)
- *   caption     a tray around the panel with a quiet header: icon, title,
- *               copy (docs, file samples)
- *
- * The copy is the same control in both, shown on hover, and sits on the
- * code's padding: its glyph's right edge lines up with the code's right
- * padding, as the caption icon lines up with its left (`--zg-code-pad-x`,
- * `.zg-code-frame` in primitives.css; set it where the code pads otherwise).
- *
- * The children are the code (highlighted HTML, a <pre>). The frame is their
- * surface: its tone, and its hairline, an inset shadow painted under them. So
- * they paint no background of their own, or they cover that line (shiki's
- * inline one is cleared: `.zg-code-frame pre.shiki`). The frame owns the
- * horizontal scroll (`.zg-code-scroll`), so the overlay button never scrolls
- * away; when the code is wider than the frame the scroller becomes a
- * focusable group, named by the caption (or "Code"), so keyboard users can
- * scroll it too.
- *
- * Long lines can wrap instead: a Wrap toggle sits beside the copy (shown on
- * hover, while there is something to wrap or it is on). Its starting state
- * is the `wrap` prop, else the app's default from {@link CodeWrapProvider}
- * (the desktop app passes its editor word-wrap setting).
- */
-import {
-  createContext,
-  forwardRef,
-  useContext,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-  type RefObject,
-} from 'react';
-
-import { flushSync } from 'react-dom';
-
-import { useLabels } from '../labels';
-import { CopyButton } from './CopyButton';
-import { iconButtonClass } from './IconButton';
-
-const CodeWrapContext = createContext(false);
-
-/** Props for {@link CodeWrapProvider}. */
-export interface CodeWrapProviderProps {
-  /** Whether frames start wrapped. */
-  wrap: boolean;
-  /** The subtree it applies to. */
-  children: ReactNode;
-}
-
-/**
- * Sets whether code frames below start with long lines wrapped (each frame's toggle still flips its own).
- *
- * @param props - `wrap`: the default; `children`: the subtree it applies to.
- */
-export function CodeWrapProvider({ wrap, children }: CodeWrapProviderProps) {
-  return <CodeWrapContext.Provider value={wrap}>{children}</CodeWrapContext.Provider>;
-}
-
-/** Props of {@link CodeFrame}. */
-export interface CodeFrameProps {
-  /** The plain text the copy button writes. */
-  code: string;
-  /**
-   * Header content. When set, the code sits in a tray under a header with the icon, this
-   * caption and the copy button, and a string caption also names the scroll group. Omit it
-   * for the bare code panel.
-   */
-  caption?: ReactNode;
-  /** Icon class before the caption. */
-  icon?: string;
-  /** Accessible name of the copy button. Defaults to the `copyCode` label from {@link useLabels}. */
-  copyLabel?: string;
-  /** Extra classes on the outer element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-  /** Start with long lines wrapped. Defaults to the {@link CodeWrapProvider} value (off without one). */
-  wrap?: boolean;
-  /** The code to show, such as highlighted HTML or a `<pre>`, with no background of its own: the frame is its surface. */
-  children: ReactNode;
-}
-
-/**
- * The horizontal scroller: focusable (and named) only while there is something
- * to scroll. A group, never a region landmark: a page has many code blocks
- * with the same caption ("TypeScript"), and landmarks must be unique.
- */
-const CodeScroll = forwardRef<HTMLDivElement, { label: string; scrolls: boolean; wrap: boolean; children: ReactNode }>(
-  function CodeScroll({ label, scrolls, wrap, children }, ref) {
-    return (
-      <div
-        ref={ref}
-        // Lines running past the edge fade there (only on the side with more to scroll), not cut mid-glyph.
-        className={`zg-code-scroll ${scrolls ? 'zg-scroll-fade-x' : ''}`}
-        tabIndex={scrolls ? 0 : undefined}
-        role={scrolls ? 'group' : undefined}
-        aria-label={scrolls ? label : undefined}
-        data-wrap={wrap ? '' : undefined}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-/** Whether the scroller's content is wider than it: re-measured as it resizes, its content changes, or wrapping flips. */
-function useScrollsX(wrap: boolean): [RefObject<HTMLDivElement | null>, boolean] {
-  const ref = useRef<HTMLDivElement>(null);
-  const [scrolls, setScrolls] = useState(false);
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) return undefined;
-    const check = () => setScrolls(el.scrollWidth > el.clientWidth + 1);
-    if (typeof ResizeObserver === 'undefined') {
-      check();
-      return undefined;
-    }
-    /*
-     * Its own width (the column) and its content (highlighting arriving, a stream growing). The
-     * first read is the observer's report on `observe`, after the frame's layout: read here, in the
-     * commit, it forced a layout of everything mounting with it (a whole conversation opening).
-     * Committed at once (`flushSync`), so a wide block shows its fade in the frame it appears.
-     */
-    const ro = new ResizeObserver(() => flushSync(check));
-    ro.observe(el);
-    const mo = new MutationObserver(check);
-    mo.observe(el, { childList: true, subtree: true, characterData: true });
-    return () => {
-      ro.disconnect();
-      mo.disconnect();
-    };
-  }, [wrap]);
-  return [ref, scrolls];
-}
-
-/**
- * Renders code in its surface with a copy button revealed on hover. Without `caption` it
- * is the bare code panel; with `caption` it adds a tray with a header. The ref goes to the
- * outer element.
- */
-export const CodeFrame = forwardRef<HTMLDivElement, CodeFrameProps>(function CodeFrame(
-  { code, caption, icon = 'i-ph-file-code', copyLabel: copyLabelProp, className = '', style, wrap: wrapProp, children },
-  ref,
-) {
-  const labels = useLabels();
-  const copyLabel = copyLabelProp ?? labels.copyCode;
-  const scrollLabel = typeof caption === 'string' ? caption : labels.code;
-  const wrapDefault = useContext(CodeWrapContext);
-  // Follows the default until the user flips this frame's toggle.
-  const [userWrap, setUserWrap] = useState<boolean | null>(null);
-  const wrap = userWrap ?? wrapProp ?? wrapDefault;
-  const [scrollRef, scrolls] = useScrollsX(wrap);
-  const scroll = (
-    <CodeScroll ref={scrollRef} label={scrollLabel} scrolls={scrolls} wrap={wrap}>
-      {children}
-    </CodeScroll>
-  );
-  // Wrap (while there is something to wrap, or it is on) then copy; `buttonClass` styles both.
-  const actions = (className: string, buttonClass: string) => (
-    <span className={`flex items-center gap-0.5 ${className}`}>
-      {(scrolls || wrap) && (
-        <button
-          type="button"
-          onClick={(e) => {
-            // Never toggle an enclosing disclosure.
-            e.stopPropagation();
-            setUserWrap(!wrap);
-          }}
-          aria-pressed={wrap}
-          aria-label={labels.wrapLines}
-          title={labels.wrapLines}
-          data-active={wrap ? '' : undefined}
-          className={`zg-reveal ${iconButtonClass({ size: 'sm' })} ${buttonClass}`}
-        >
-          <span className="i-ph-text-align-left text-zg-label" aria-hidden />
-        </button>
-      )}
-      <CopyButton text={code} label={copyLabel} reveal className={buttonClass} />
-    </span>
-  );
-  if (caption === undefined) {
-    return (
-      <div
-        ref={ref}
-        className={`zg-code-frame zg-code-panel group relative overflow-hidden ${className}`}
-        style={style}
-      >
-        {actions('zg-code-actions', 'before:bg-[var(--zg-code-bg)]')}
-        {scroll}
-      </div>
-    );
-  }
-  return (
-    <figure ref={ref} className={`zg-code-frame group zg-tray rounded-zg-lg p-1 m-0 ${className}`} style={style}>
-      <figcaption className="zg-code-caption flex items-center gap-2 h-8">
-        <span className={`${icon} text-zg-ui text-[var(--zg-text-subtle)]`} aria-hidden />
-        <span className="zg-meta truncate">{caption}</span>
-        {actions('ml-auto', '')}
-      </figcaption>
-      <div className="zg-code-panel overflow-hidden">{scroll}</div>
-    </figure>
-  );
-});

package/src/components/ConfirmDialog.tsx

@@ -1,119 +0,0 @@
-/**
- * A short yes / no dialog: a title, an optional message, Cancel and the
- * committing button (danger-toned when destructive). It is its own
- * `alertdialog`, named by its title and described by its message. Focus
- * lands on the confirm button, or on Cancel when destructive, so a stray
- * Enter never deletes. Presentation only: the host app puts it on its modal
- * layer and resolves the answer (the desktop app's `useConfirm()`), and
- * passes its layer's entry class in `className`.
- */
-import { useEffect, useId, useRef, type CSSProperties, type ReactNode } from 'react';
-
-import { useLabels } from '../labels';
-import { buttonClass } from './button';
-
-/** Content of a {@link ConfirmDialog}: its title, message, button labels and tone. */
-export interface ConfirmOptions {
-  /** Heading of the dialog. It names the `alertdialog`. */
-  title: string;
-  /** Body text under the title. When set, it describes the dialog. */
-  message?: ReactNode;
-  /** Text of the confirm button. Defaults to the `confirm` label from {@link useLabels}. */
-  confirmLabel?: string;
-  /** Text of the cancel button. Defaults to the `cancel` label from {@link useLabels}. */
-  cancelLabel?: string;
-  /** Danger-toned confirm button; focus starts on Cancel. */
-  destructive?: boolean;
-}
-
-/**
- * The fixed id that earlier versions gave the dialog title.
- *
- * @deprecated Titles get a unique id (two dialogs can be open at once).
- * A host layer that is still labelled by this id passes it back as `titleId`.
- */
-export const CONFIRM_TITLE_ID = 'zg-confirm-title';
-
-/** Props for {@link ConfirmDialog}: {@link ConfirmOptions} plus the callbacks. */
-export interface ConfirmDialogProps extends ConfirmOptions {
-  /** Called when the confirm button is pressed. */
-  onConfirm: () => void;
-  /** Called when the Cancel button is pressed. */
-  onCancel: () => void;
-  /** Extra classes on the dialog panel, such as the host layer's entry animation class. */
-  className?: string;
-  /** Inline styles on the dialog panel, merged after the component's own. */
-  style?: CSSProperties;
-  /** The title's id, when a host layer's `aria-labelledby` names it; unique by default. */
-  titleId?: string;
-}
-
-/**
- * Renders a short yes / no `alertdialog` with a title, an optional message, a Cancel button
- * and a confirm button. Focus starts on confirm, or on Cancel when `destructive`, so a stray
- * Enter never confirms a deletion. It draws the panel only; the host puts it on a modal
- * layer and resolves the answer.
- *
- * @param props - {@link ConfirmOptions} plus the callbacks below.
- */
-export function ConfirmDialog({
-  title,
-  message,
-  confirmLabel,
-  cancelLabel,
-  destructive = false,
-  onConfirm,
-  onCancel,
-  className = '',
-  style,
-  titleId,
-}: ConfirmDialogProps) {
-  const labels = useLabels();
-  const id = useId();
-  const headingId = titleId ?? `${id}title`;
-  const messageId = `${id}message`;
-  const confirmRef = useRef<HTMLButtonElement>(null);
-  const cancelRef = useRef<HTMLButtonElement>(null);
-  useEffect(() => {
-    (destructive ? cancelRef : confirmRef).current?.focus();
-  }, [destructive]);
-
-  return (
-    // The wrapper only keeps presses inside the panel from reaching a host's
-    // press-outside-to-cancel; it adds no box (`contents`).
-    <div role="presentation" className="contents" onMouseDown={(e) => e.stopPropagation()}>
-      <div
-        role="alertdialog"
-        aria-modal="true"
-        aria-labelledby={headingId}
-        aria-describedby={message ? messageId : undefined}
-        className={`zg-float w-[400px] max-w-[min(92vw,100%)] flex flex-col overflow-hidden ${className}`}
-        style={style}
-      >
-        <div className="px-5 pt-4 pb-4">
-          <h2 id={headingId} className="m-0 text-sm font-semibold text-[var(--zg-text)] zg-balance">
-            {title}
-          </h2>
-          {message && (
-            <div id={messageId} className="mt-1.5 text-zg-ui leading-relaxed text-[var(--zg-text-muted)] zg-pretty">
-              {message}
-            </div>
-          )}
-        </div>
-        <footer className="flex items-center justify-end gap-2 px-5 py-3 bg-[var(--zg-tray)]">
-          <button ref={cancelRef} type="button" onClick={onCancel} className={buttonClass({ variant: 'secondary' })}>
-            {cancelLabel ?? labels.cancel}
-          </button>
-          <button
-            ref={confirmRef}
-            type="button"
-            onClick={onConfirm}
-            className={buttonClass({ variant: destructive ? 'danger-solid' : 'solid' })}
-          >
-            {confirmLabel ?? labels.confirm}
-          </button>
-        </footer>
-      </div>
-    </div>
-  );
-}

package/src/components/CopyButton.tsx

@@ -1,85 +0,0 @@
-/**
- * Copy-to-clipboard control: the clipboard glyph cross-fades to a check for a
- * moment after a copy (a `SwapIcon`; the glyph never moves). One look
- * everywhere: the small icon button (24px, 12px glyph) that lifts to the
- * raised chip on hover. The caller places it (CodeFrame: its caption row, or
- * the panel's top-right corner on the code's padding).
- *
- * `reveal`: hidden until the nearest `.group` is hovered, while focused or
- * just copied; touch screens always show it (`.zg-reveal`, primitives.css).
- */
-import { useCallback, useEffect, useState, type CSSProperties } from 'react';
-
-import { useLabels } from '../labels';
-import { SwapIcon } from '../motion/SwapIcon';
-import { iconButtonClass } from './IconButton';
-
-const ICONS = { rest: 'i-ph-clipboard', done: 'i-ph-check' };
-
-const FEEDBACK_MS = 1200;
-
-/** Props for {@link CopyButton}. */
-export interface CopyButtonProps {
-  /** The text written to the clipboard. */
-  text: string;
-  /** Accessible name and tooltip. Defaults to the `copy` label from {@link useLabels}. */
-  label?: string;
-  /**
-   * Hide the button until the nearest `.group` ancestor is hovered, or while the button is
-   * focused or showing its copied state. Touch screens always show it.
-   *
-   * @default false
-   */
-  reveal?: boolean;
-  /** Extra classes on the button. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a small icon button that copies `text` to the clipboard. The clipboard glyph
- * swaps to a check for 1.2 seconds after a copy, and the accessible name changes to the
- * `copied` label. A refused clipboard write fails silently.
- *
- * @param props - Component props.
- */
-export function CopyButton({ text, label, reveal = false, className = '', style }: CopyButtonProps) {
-  const labels = useLabels();
-  const copyLabel = label ?? labels.copy;
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => {
-    if (!copied) return undefined;
-    const t = window.setTimeout(() => setCopied(false), FEEDBACK_MS);
-    return () => window.clearTimeout(t);
-  }, [copied]);
-
-  const onCopy = useCallback(
-    async (e: React.MouseEvent) => {
-      // Never toggle an enclosing disclosure.
-      e.stopPropagation();
-      try {
-        await navigator.clipboard.writeText(text);
-        setCopied(true);
-      } catch {
-        // Restricted contexts refuse the clipboard; selection + Cmd+C still works.
-      }
-    },
-    [text],
-  );
-
-  return (
-    <button
-      type="button"
-      onClick={onCopy}
-      data-copied={copied}
-      aria-label={copied ? labels.copied : copyLabel}
-      title={copyLabel}
-      className={`zg-copy ${reveal ? 'zg-reveal' : ''} ${iconButtonClass({ size: 'sm' })} ${className}`}
-      style={style}
-    >
-      <SwapIcon icons={ICONS} current={copied ? 'done' : 'rest'} className="text-zg-label" />
-    </button>
-  );
-}

package/src/components/EditableTitle.tsx

@@ -1,199 +0,0 @@
-/**
- * A title that turns into an inline editor on double-click: Enter commits,
- * Escape cancels, blur commits (except the blur that follows an Escape). The parent owns the value and the editing flag.
- */
-import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-
-import { useLabels } from '../labels';
-import { TitleText } from '../motion/title-text';
-
-/** Props for {@link EditableTitle}. */
-export interface EditableTitleProps {
-  /** Title shown when not editing AND the seed value when entering edit mode. */
-  text: string;
-  /** What shows instead of `text` while not editing (the title with its reference badges). */
-  display?: ReactNode;
-  /** Whether the title is being edited in place. */
-  editing: boolean;
-  /** Fired on double-click while not editing. */
-  onStartEdit: () => void;
-  /** Fired on every keystroke while editing — keeps the parent's renameValue in sync. */
-  onChange: (value: string) => void;
-  /** Fired on blur or Enter; not on the blur that follows an Escape. */
-  onCommit: () => void | Promise<void>;
-  /** Fired on Escape. */
-  onCancel: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-  /** Accessible name of the editor (default: the `rename` label). */
-  label?: string;
-}
-
-/**
- * In-place rename surface for the session title. Uses `contentEditable`
- * so the editing affordance carries the title's exact typography
- * instead of swapping to an input chrome that breaks the row's optical
- * rhythm.
- *
- * HTML pasting is sanitised at the `onPaste` seam — clipboard rich
- * text is converted to plain text before insertion, and newlines are
- * collapsed to spaces (a session title is a single line by contract).
- * `contentEditable` accepts HTML elements via drag-drop too; the
- * `onInput` handler reads `textContent` (not `innerHTML`) so any node
- * that sneaks in still lands as flat text on commit.
- *
- * The element is uncontrolled while editing — React seeds the
- * `textContent` once on the false→true edit transition, then leaves
- * the DOM alone so the caret position survives each keystroke. The
- * parent's `renameValue` is kept in sync via `onChange`, so a commit that
- * reads it from a ref sees the current text.
- *
- * @param props - Component props.
- */
-export function EditableTitle({
-  text,
-  display,
-  editing,
-  onStartEdit,
-  onChange,
-  onCommit,
-  onCancel,
-  className,
-  style,
-  label,
-}: EditableTitleProps) {
-  const labels = useLabels();
-  const ref = useRef<HTMLDivElement | null>(null);
-  // Track the seed value tied to this edit session so the effect re-seeds
-  // only on the false→true transition, not on every parent re-render.
-  const wasEditingRef = useRef(false);
-  // Escape cancels, then the editor unmounts and fires blur: that blur must
-  // not commit what was just cancelled.
-  const cancelledRef = useRef(false);
-  // A rename the user typed lands without replaying it: the title arriving
-  // as what was typed counts as another scope for `TitleText`. Derived during
-  // render (state, not an effect) because TitleText must see the new text and
-  // the new scope in the same render, or it would animate the change.
-  const [typed, setTyped] = useState<string | null>(null);
-  const [scope, setScope] = useState(0);
-  const trimmed = text.trim();
-  if (editing) {
-    if (typed !== trimmed) setTyped(trimmed);
-  } else if (typed !== null && trimmed === typed) {
-    setTyped(null);
-    setScope(scope + 1);
-  }
-
-  useEffect(() => {
-    if (!editing) {
-      wasEditingRef.current = false;
-      return;
-    }
-
-    if (wasEditingRef.current) {
-      return;
-    }
-
-    wasEditingRef.current = true;
-    cancelledRef.current = false;
-
-    const el = ref.current;
-
-    if (!el) {
-      return;
-    }
-
-    el.textContent = text;
-    el.focus();
-
-    const sel = window.getSelection();
-
-    if (sel) {
-      const range = document.createRange();
-      range.selectNodeContents(el);
-      // Collapse to the end of the contents — caret lands after the
-      // last character instead of selecting the whole title (matches
-      // how Finder / VSCode "edit-in-place" affordances behave).
-      range.collapse(false);
-      sel.removeAllRanges();
-      sel.addRange(range);
-    }
-  }, [editing, text]);
-
-  if (!editing) {
-    // Distinct keys: edit mode writes textContent imperatively, so reusing
-    // that div here would leave its orphan text node beside <TitleText>.
-    return (
-      <div
-        key="view"
-        className={className}
-        style={style}
-        onDoubleClick={(event) => {
-          event.stopPropagation();
-          onStartEdit();
-        }}
-      >
-        <TitleText text={text} display={display} scope={scope} />
-      </div>
-    );
-  }
-
-  return (
-    <div
-      key="edit"
-      ref={ref}
-      contentEditable
-      suppressContentEditableWarning
-      role="textbox"
-      tabIndex={0}
-      aria-label={label ?? labels.rename}
-      spellCheck={false}
-      className={`${className ?? ''} outline-none cursor-text`.trim()}
-      style={style}
-      onClick={(event) => event.stopPropagation()}
-      onMouseDown={(event) => event.stopPropagation()}
-      onDoubleClick={(event) => event.stopPropagation()}
-      onInput={(event) => {
-        cancelledRef.current = false;
-        onChange((event.currentTarget.textContent ?? '').replace(/\s+/g, ' '));
-      }}
-      onBlur={() => {
-        if (cancelledRef.current) return;
-        void onCommit();
-      }}
-      onKeyDown={(event) => {
-        event.stopPropagation();
-
-        // Enter while an IME is composing confirms the candidate, not the title.
-        if (event.key === 'Enter' && !event.nativeEvent.isComposing && event.keyCode !== 229) {
-          event.preventDefault();
-          // An explicit Enter overrides an earlier Escape if the parent kept editing.
-          cancelledRef.current = false;
-          (event.currentTarget as HTMLDivElement).blur();
-        }
-
-        if (event.key === 'Escape') {
-          event.preventDefault();
-          cancelledRef.current = true;
-          onCancel();
-        }
-      }}
-      onPaste={(event) => {
-        event.preventDefault();
-        const pasted = event.clipboardData.getData('text/plain').replace(/\s+/g, ' ');
-        const sel = window.getSelection();
-
-        if (!sel || sel.rangeCount === 0) {
-          return;
-        }
-
-        sel.deleteFromDocument();
-        sel.getRangeAt(0).insertNode(document.createTextNode(pasted));
-        sel.collapseToEnd();
-        onChange(event.currentTarget.textContent ?? '');
-      }}
-    />
-  );
-}