@xemahq/ui-kernel 0.11.1 → 0.12.0

package/src/ui/design-tokens.ts

@@ -1,372 +0,0 @@
-/**
- * Design Token System — Single source of truth for semantic styling.
- *
- * All components import from here. To reskin the app, edit this file + CSS variables.
- * Uses Tailwind classes mapped to semantic states, priorities, and severities.
- *
- * COLOR PHILOSOPHY: Bold, vibrant primary colors (Microsoft-logo style).
- * Red (#F25022), Green (#7FBA00), Blue (#00A4EF), Yellow (#FFB900) — strong, not pastel.
- *
- * DARK MODE: Uses opacity-based colors (e.g. bg-success/15) that adapt naturally.
- * Text colors use dark: variants where needed for readable contrast.
- */
-
-// ── Status Styles ──────────────────────────────────────────────────
-
-export interface StatusStyle {
-  badge: string;
-  dot: string;
-  text: string;
-  bg: string;
-  border: string;
-  icon: string;
-}
-
-// Reusable style fragments — keep the map below a flat enum-like lookup
-// rather than scattering bg-success/15 strings, so adding a new closed-set
-// status is a one-line entry.
-const SUCCESS_STYLE: StatusStyle = {
-  badge: 'bg-success/15 text-success dark:text-success border-success/30',
-  dot: 'bg-success',
-  text: 'text-success dark:text-success',
-  bg: 'bg-success/10',
-  border: 'border-success/30',
-  icon: 'text-success',
-};
-const WARNING_STYLE: StatusStyle = {
-  badge: 'bg-warning/15 text-warning dark:text-warning border-warning/30',
-  dot: 'bg-warning',
-  text: 'text-warning dark:text-warning',
-  bg: 'bg-warning/10',
-  border: 'border-warning/30',
-  icon: 'text-warning',
-};
-const INFO_STYLE: StatusStyle = {
-  badge: 'bg-info/15 text-info dark:text-info border-info/30',
-  dot: 'bg-info',
-  text: 'text-info dark:text-info',
-  bg: 'bg-info/10',
-  border: 'border-info/30',
-  icon: 'text-info',
-};
-const PRIMARY_STYLE: StatusStyle = {
-  badge: 'bg-primary/15 text-primary dark:text-primary border-primary/30',
-  dot: 'bg-primary',
-  text: 'text-primary dark:text-primary',
-  bg: 'bg-primary/10',
-  border: 'border-primary/30',
-  icon: 'text-primary',
-};
-const DESTRUCTIVE_STYLE: StatusStyle = {
-  badge: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/30',
-  dot: 'bg-destructive',
-  text: 'text-destructive dark:text-destructive',
-  bg: 'bg-destructive/10',
-  border: 'border-destructive/30',
-  icon: 'text-destructive',
-};
-const NEUTRAL_STYLE: StatusStyle = {
-  badge: 'bg-paper-elev text-ink-3 border-border',
-  dot: 'bg-muted-foreground/40',
-  text: 'text-ink-3',
-  bg: 'bg-muted/30',
-  border: 'border-border',
-  icon: 'text-ink-3',
-};
-
-// ── Tone Styles ────────────────────────────────────────────────────
-// Generic tonal palette used by `<ScopeBadge>` and any surface that
-// needs a closed-set chip without a status semantic. Status badges
-// continue to read from STATUS_STYLES (richer shape: badge + dot + …).
-
-export type Tone = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
-
-export const TONE_STYLES: Record<Tone, string> = {
-  neutral: 'bg-paper-elev text-ink-3 border-border',
-  primary: 'bg-primary/10 text-primary border-primary/20',
-  info: 'bg-info/15 text-info dark:text-info border-info/20',
-  success: 'bg-success/15 text-success dark:text-success border-success/20',
-  warning: 'bg-warning/15 text-warning dark:text-warning border-warning/20',
-  danger: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/20',
-  accent: 'bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/20',
-};
-
-export const STATUS_STYLES: Record<string, StatusStyle> = {
-  // ── Workflow run states (WorkflowRunStatus enum) ────────────────────
-  pending: INFO_STYLE,
-  running: WARNING_STYLE,
-  waiting_on_approval: WARNING_STYLE,
-  waiting_on_human: WARNING_STYLE,
-  succeeded: SUCCESS_STYLE,
-  failed: DESTRUCTIVE_STYLE,
-  cancelled: NEUTRAL_STYLE,
-  aborted_for_migration: NEUTRAL_STYLE,
-
-  // Legacy / generic synonyms — kept so older surfaces (project status,
-  // backlog "done") keep rendering correctly. Use the canonical run
-  // state above when emitting from new code.
-  completed: SUCCESS_STYLE,
-  stopped: WARNING_STYLE,
-  undone: PRIMARY_STYLE,
-  skipped: NEUTRAL_STYLE,
-
-  // ── Interactive session states (SessionStatus) ──────────────────────
-  creating: PRIMARY_STYLE,
-  provisioning: PRIMARY_STYLE,
-  active: SUCCESS_STYLE,
-  paused: WARNING_STYLE,
-  recovering: WARNING_STYLE,
-  completing: PRIMARY_STYLE,
-  archived: NEUTRAL_STYLE,
-
-  // ── Backlog / work ──────────────────────────────────────────────────
-  todo: NEUTRAL_STYLE,
-  in_progress: INFO_STYLE,
-  in_review: WARNING_STYLE,
-  done: SUCCESS_STYLE,
-  blocked: DESTRUCTIVE_STYLE,
-
-  // ── Design System Builder ───────────────────────────────────────────
-  open: INFO_STYLE,
-  exploring: WARNING_STYLE,
-  proposed: PRIMARY_STYLE,
-  accepted: SUCCESS_STYLE,
-  rejected: DESTRUCTIVE_STYLE,
-  merged: NEUTRAL_STYLE,
-
-  // ── SCM ─────────────────────────────────────────────────────────────
-  draft: NEUTRAL_STYLE,
-
-  // ── Gate ────────────────────────────────────────────────────────────
-  approved: SUCCESS_STYLE,
-  manual_review: WARNING_STYLE,
-};
-
-/**
- * Style for an unrecognised status. Same value `STATUS_STYLES.pending` carries —
- * referenced as the fragment rather than re-read out of the open `Record`, so
- * the fallback is structurally guaranteed instead of being a second lookup that
- * can itself miss (e.g. if the `pending` key were ever renamed).
- */
-const DEFAULT_STATUS_STYLE: StatusStyle = INFO_STYLE;
-
-export function getStatusStyle(status: string): StatusStyle {
-  return STATUS_STYLES[status] ?? DEFAULT_STATUS_STYLE;
-}
-
-// ── Priority Styles ────────────────────────────────────────────────
-
-export interface PriorityStyle {
-  badge: string;
-  text: string;
-  bg: string;
-  border: string;
-  label: string;
-}
-
-// Lowest priority — also the style for an unrecognised priority. Named so the
-// map entry and `getPriorityStyle`'s fallback are the same proven value rather
-// than a second `Record` lookup that can itself miss.
-const PRIORITY_LOW_STYLE: PriorityStyle = {
-  badge: 'bg-paper-elev text-ink-3 border-border',
-  text: 'text-ink-3',
-  bg: 'bg-muted/30',
-  border: 'border-border',
-  label: 'Low',
-};
-
-export const PRIORITY_STYLES: Record<string, PriorityStyle> = {
-  p0: {
-    badge: 'bg-destructive text-white border-destructive',
-    text: 'text-destructive dark:text-destructive',
-    bg: 'bg-destructive/10',
-    border: 'border-destructive/30',
-    label: 'Critical',
-  },
-  p1: {
-    badge: 'bg-warning text-white border-warning',
-    text: 'text-warning dark:text-warning',
-    bg: 'bg-warning/10',
-    border: 'border-warning/30',
-    label: 'High',
-  },
-  p2: {
-    badge: 'bg-warning text-white border-warning',
-    text: 'text-warning dark:text-warning',
-    bg: 'bg-warning/10',
-    border: 'border-warning/30',
-    label: 'Medium',
-  },
-  p3: PRIORITY_LOW_STYLE,
-};
-
-export function getPriorityStyle(priority: string): PriorityStyle {
-  return PRIORITY_STYLES[priority] ?? PRIORITY_LOW_STYLE;
-}
-
-// ── Severity Styles ────────────────────────────────────────────────
-
-export interface SeverityStyle {
-  badge: string;
-  text: string;
-  bg: string;
-  border: string;
-}
-
-export const SEVERITY_STYLES: Record<string, SeverityStyle> = {
-  critical: {
-    badge: 'bg-destructive text-white border-destructive',
-    text: 'text-destructive dark:text-destructive',
-    bg: 'bg-destructive/10',
-    border: 'border-destructive/30',
-  },
-  error: {
-    badge: 'bg-destructive text-white border-destructive',
-    text: 'text-destructive dark:text-destructive',
-    bg: 'bg-destructive/10',
-    border: 'border-destructive/30',
-  },
-  major: {
-    badge: 'bg-warning text-white border-warning',
-    text: 'text-warning dark:text-warning',
-    bg: 'bg-warning/10',
-    border: 'border-warning/30',
-  },
-  warning: {
-    badge: 'bg-warning text-white border-warning',
-    text: 'text-warning dark:text-warning',
-    bg: 'bg-warning/10',
-    border: 'border-warning/30',
-  },
-  minor: {
-    badge: 'bg-info/15 text-info dark:text-info border-info/30',
-    text: 'text-info dark:text-info',
-    bg: 'bg-info/10',
-    border: 'border-info/30',
-  },
-  info: {
-    badge: 'bg-info/15 text-info dark:text-info border-info/30',
-    text: 'text-info dark:text-info',
-    bg: 'bg-info/10',
-    border: 'border-info/30',
-  },
-};
-
-export function getSeverityStyle(severity: string): SeverityStyle {
-  const s = severity.toLowerCase();
-  return SEVERITY_STYLES[s] ?? { badge: 'bg-paper-elev text-ink-3 border-border', text: 'text-ink-3', bg: 'bg-muted/30', border: 'border-border' };
-}
-
-// ── Type Styles (Backlog items) ────────────────────────────────────
-
-export const TYPE_STYLES: Record<string, { badge: string; text: string; border: string }> = {
-  epic: { badge: 'bg-primary/15 text-primary dark:text-primary border-primary/30', text: 'text-primary dark:text-primary', border: 'border-l-purple-600' },
-  story: { badge: 'bg-info/15 text-info dark:text-info border-info/30', text: 'text-info dark:text-info', border: 'border-l-blue-600' },
-  task: { badge: 'bg-success/15 text-success dark:text-success border-success/30', text: 'text-success dark:text-success', border: 'border-l-green-600' },
-  bug: { badge: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/30', text: 'text-destructive dark:text-destructive', border: 'border-l-red-600' },
-};
-
-// ── Card Styles ────────────────────────────────────────────────────
-
-export const CARD_STYLES = {
-  default: 'bg-card border border-border/50 rounded-xl shadow-[var(--shadow-2)]',
-  elevated: 'bg-card border border-border/40 rounded-xl shadow-[var(--shadow-8)]',
-  dark: 'bg-foreground text-background rounded-xl shadow-[var(--shadow-16)]',
-  accent: 'bg-primary/5 border border-primary/15 rounded-xl',
-  empty: 'border-2 border-dashed border-border/50 rounded-xl',
-} as const;
-
-// ── Section / Typography Styles ────────────────────────────────────
-
-export const SECTION_STYLES = {
-  pageTitle: 'text-lg sm:text-xl font-semibold tracking-tight text-ink',
-  sectionHeader: 'text-sm font-semibold text-ink',
-  cardLabel: 'text-[11px] font-semibold uppercase tracking-wider text-ink-3',
-  description: 'text-sm text-ink-3',
-  metricValue: 'text-xl sm:text-2xl font-semibold tabular-nums text-ink',
-  metricLabel: 'text-sm text-ink-3',
-} as const;
-
-// ── Importance Styles (Memory) ─────────────────────────────────────
-
-export const IMPORTANCE_STYLES: Record<number, { badge: string; label: string; star: string }> = {
-  1: { badge: 'bg-paper-elev text-ink-3 border-border', label: 'Low', star: 'text-ink-3' },
-  2: { badge: 'bg-info/15 text-info dark:text-info border-info/30', label: 'Normal', star: 'text-info' },
-  3: { badge: 'bg-warning/15 text-warning dark:text-warning border-warning/30', label: 'High', star: 'text-warning' },
-  4: { badge: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/30', label: 'Critical', star: 'text-destructive' },
-};
-
-// ── Risk Level Styles ──────────────────────────────────────────────
-
-export interface RiskLevelStyle {
-  badge: string;
-  text: string;
-}
-
-// Lowest risk — also the style for an unrecognised level. Named for the same
-// reason as PRIORITY_LOW_STYLE: the fallback must be a proven value, not a
-// second lookup into the open `Record`.
-const RISK_LOW_STYLE: RiskLevelStyle = {
-  badge: 'bg-success/15 text-success dark:text-success border-success/30',
-  text: 'text-success dark:text-success',
-};
-
-export const RISK_LEVEL_STYLES: Record<string, RiskLevelStyle> = {
-  low: RISK_LOW_STYLE,
-  medium: { badge: 'bg-warning/15 text-warning dark:text-warning border-warning/30', text: 'text-warning dark:text-warning' },
-  high: { badge: 'bg-warning/15 text-warning dark:text-warning border-warning/30', text: 'text-warning dark:text-warning' },
-  critical: { badge: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/30', text: 'text-destructive dark:text-destructive' },
-};
-
-export function getRiskLevelStyle(level: string): RiskLevelStyle {
-  return RISK_LEVEL_STYLES[level] ?? RISK_LOW_STYLE;
-}
-
-// ── Agent Source Styles ────────────────────────────────────────────
-
-export const AGENT_SOURCE_STYLES: Record<string, { border: string; bg: string; icon: string; iconBg: string }> = {
-  dynamic: {
-    border: 'border-warning/30',
-    bg: 'bg-warning/5',
-    icon: 'text-warning',
-    iconBg: 'bg-warning/10',
-  },
-  predefined: {
-    border: 'border-border',
-    bg: 'bg-muted/20',
-    icon: 'text-primary',
-    iconBg: 'bg-primary/10',
-  },
-};
-
-// ── Kind Styles (Memory Graph Model) ─────────────────────────────────
-
-export const KIND_STYLES: Record<string, string> = {
-  LESSON: 'bg-info/15 text-info dark:text-info border-info/30',
-  PATTERN: 'bg-primary/15 text-primary dark:text-primary border-primary/30',
-  CORRECTION: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/30',
-  PREFERENCE: 'bg-success/15 text-success dark:text-success border-success/30',
-};
-
-// ── State Styles (Memory Graph Model) ────────────────────────────────
-
-export const STATE_STYLES: Record<string, string> = {
-  CANDIDATE: 'bg-paper-elev text-ink-3 border-border',
-  ACTIVE: 'bg-success/15 text-success dark:text-success border-success/30',
-  SUPERSEDED: 'bg-paper-elev text-ink-3 border-border line-through',
-  CONTRADICTED: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/30 line-through',
-  REVIEW_REQUIRED: 'bg-warning/15 text-warning dark:text-warning border-warning/30',
-  ARCHIVED: 'bg-paper-elev text-ink-3 border-border opacity-60',
-};
-
-// ── Origin Styles (Memory Graph Model) ───────────────────────────────
-
-export const ORIGIN_STYLES: Record<string, string> = {
-  GATE_REJECTION: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/30',
-  GATE_APPROVAL: 'bg-success/15 text-success dark:text-success border-success/30',
-  USER_CORRECTION: 'bg-warning/15 text-warning dark:text-warning border-warning/30',
-  MANUAL_OVERRIDE: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/30',
-  REVIEW_FINDING: 'bg-warning/15 text-warning dark:text-warning border-warning/30',
-  PATTERN_DETECTION: 'bg-primary/15 text-primary dark:text-primary border-primary/30',
-  USER_CREATED: 'bg-info/15 text-info dark:text-info border-info/30',
-};

package/src/ui/hooks/use-debounced-value.ts

@@ -1,16 +0,0 @@
-import { useEffect, useState } from 'react';
-
-/**
- * Returns a debounced version of the provided value.
- * Updates only after `delayMs` milliseconds of inactivity.
- */
-export function useDebouncedValue<T>(value: T, delayMs = 300): T {
-  const [debounced, setDebounced] = useState(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebounced(value), delayMs);
-    return () => clearTimeout(timer);
-  }, [value, delayMs]);
-
-  return debounced;
-}

package/src/ui/hooks/use-is-mobile.ts

@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { MOBILE_BREAKPOINT } from '../breakpoints';
-
-/**
- * `true` when the viewport is narrower than the shared {@link MOBILE_BREAKPOINT}
- * (Tailwind's `md`). Server-driven renderers use this to collapse tables to
- * cards, reflow grids and go single-column WITHOUT the author declaring a
- * breakpoint — responsiveness is a property of the primitive, not a checklist.
- *
- * Reads `window.innerWidth`, so it returns `false` until mounted on the client
- * (SSR-safe: no layout thrash, no hydration mismatch beyond the first paint).
- */
-export function useIsMobile(): boolean {
-  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
-
-  useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = (): void => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener('change', onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener('change', onChange);
-  }, []);
-
-  return !!isMobile;
-}

package/src/ui/index.ts

@@ -1,110 +0,0 @@
-// ═══════════════════════════════════════════════════════════════════════════
-// @xemahq/ui-kernel/ui — shared UI surface for biomes
-//
-// Canonical shadcn primitives + Xema chrome, owned by the kernel so biomes
-// stop deep-importing the host shell's `@/components/ui/*` and re-implementing
-// chrome (ErrorCard / EmptyState / StateCard / PageHeader). Host-framework-
-// agnostic: React + radix + cva + lucide only, no Next/Vite/React-Router.
-//
-// The class-merge helper (`cn`) carries the Xema typography scale so merging
-// matches the host shell exactly.
-// ═══════════════════════════════════════════════════════════════════════════
-
-export { cn } from './cn';
-
-// ── design tokens (semantic styling SSOT) ──
-export * from './design-tokens';
-
-// ── responsive breakpoint token (JS ↔ Tailwind `md`, single source) ──
-export { MOBILE_BREAKPOINT } from './breakpoints';
-
-// ── hooks ──
-export { useDebouncedValue } from './hooks/use-debounced-value';
-export { useIsMobile } from './hooks/use-is-mobile';
-
-// ── shadcn primitives ──
-export * from './primitives/button';
-export * from './primitives/button-variants';
-export * from './primitives/badge';
-export * from './primitives/badge-variants';
-export * from './primitives/input';
-export * from './primitives/label';
-export * from './primitives/select';
-export * from './primitives/dialog';
-export * from './primitives/card';
-export * from './primitives/textarea';
-export * from './primitives/tabs';
-export * from './primitives/dropdown-menu';
-export * from './primitives/skeleton';
-export * from './primitives/checkbox';
-export * from './primitives/table';
-export * from './primitives/tooltip';
-export * from './primitives/switch';
-export * from './primitives/separator';
-export * from './primitives/scroll-area';
-export * from './primitives/alert-dialog';
-export * from './primitives/popover';
-export * from './primitives/collapsible';
-export * from './primitives/resizable';
-export * from './primitives/radio-group';
-export * from './primitives/overflow-tabs';
-export * from './primitives/tag-multi-select';
-export * from './primitives/sheet';
-export * from './primitives/form-stepper';
-export * from './primitives/form-stepper.types';
-export * from './primitives/async-combobox';
-export {
-  PreviewDeviceFrame,
-  type PreviewDevice,
-} from './primitives/preview-device-frame';
-export {
-  UrlPreviewChrome,
-  type UrlPreviewChromeProps,
-} from './primitives/url-preview-chrome';
-
-// ── chart primitives (Wave 9.2 — pure SVG, no external chart lib) ──
-export * from './charts';
-
-// ── runtime branding applier (Wave 8.4) ──
-export {
-  AppBrandingProvider,
-  APP_PRIMARY_COLOR_VAR,
-  type AppBrandingProviderProps,
-} from './branding/app-branding-provider';
-export {
-  useAppBranding,
-  type AppBrandingContextValue,
-} from './branding/app-branding-context';
-
-// ── Xema chrome ──
-export { default as ErrorCard, type ErrorMessageFormatter } from './chrome/ErrorCard';
-export { default as StatusBadge, type StatusBadgeProps, type StatusBadgeSize } from './chrome/status-badge';
-export { default as ScopeBadge, type ScopeBadgeProps } from './chrome/scope-badge';
-export {
-  default as ConfirmDeleteDialog,
-  type ConfirmDeleteDialogProps,
-} from './chrome/confirm-delete-dialog';
-export { default as PageShell } from './chrome/page-shell';
-export {
-  default as EmptyState,
-  type EmptyStateVariant,
-  type EmptyStateSize,
-  type EmptyStateLinkComponent,
-} from './chrome/EmptyState';
-export { StateCard } from './chrome/StateCard';
-export {
-  RecordCardList,
-  type RecordCardField,
-  type RecordCardListProps,
-} from './chrome/RecordCardList';
-export { default as PageHeader, PageToolbar } from './chrome/PageHeader';
-export { default as LoadingState, type LoadingStateVariant } from './chrome/LoadingState';
-export { default as AsyncBoundary } from './chrome/AsyncBoundary';
-
-// NOTE: `PdfPreview` intentionally does NOT live in this barrel. It pulls in
-// `react-pdf` → `pdfjs-dist` (~1.9 MB), so it ships from the dedicated subpath
-// `@xemahq/ui-kernel/pdf` to keep this `/ui` surface (and app-ui's AppShell)
-// tree-shakeable. Import it from `@xemahq/ui-kernel/pdf`.
-
-// ── guided-capture UX kit (B5 — wizard, validation, prefill, schema form) ──
-export * from './capture';

package/src/ui/pdf/pdf-preview.tsx

@@ -1,122 +0,0 @@
-'use client';
-
-/**
- * PdfPreview — a reusable, canvas-rendered PDF viewer with in-app zoom, for any
- * web biome or host surface (exported from `@xemahq/ui-kernel/ui`).
- *
- * WHY canvas, not an `<iframe>`: the bytes are frequently UNTRUSTED (user
- * uploads, third-party artifacts). pdf.js renders each page to a `<canvas>` with
- * NO iframe and NO script execution — strictly safer than embedding the file in
- * a browser viewer — while giving zoom controls a fully-sandboxed iframe cannot.
- * Text/annotation layers are disabled: this is a PREVIEW, not an editor.
- *
- * The component only renders from a resolved `url` (durable publicUrl, dataUrl,
- * or `blob:`); the caller owns fetching/authing/revoking that URL.
- */
-import { RotateCcw, ZoomIn, ZoomOut } from 'lucide-react';
-import { useCallback, useMemo, useState, type JSX } from 'react';
-import { Document, Page, pdfjs } from 'react-pdf';
-
-import { cn } from '../cn';
-
-// The pdf.js worker is loaded same-origin (CSP-safe, and CJS-build-safe — no
-// `import.meta`). The HOST app must serve the version-matched worker at this
-// path — host-web copies `pdfjs-dist/build/pdf.worker.min.mjs` into `public/`
-// via its `copy-pdf-worker` script (run on predev/prebuild). Overridable before
-// first render for hosts that serve it elsewhere.
-if (!pdfjs.GlobalWorkerOptions.workerSrc) {
-  pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs';
-}
-
-const MIN_SCALE = 0.5;
-const MAX_SCALE = 3;
-const STEP = 0.25;
-const DEFAULT_SCALE = 1;
-
-const clampScale = (s: number): number =>
-  Math.min(MAX_SCALE, Math.max(MIN_SCALE, Math.round(s * 100) / 100));
-
-export interface PdfPreviewProps {
-  /** A resolved, fetchable URL: durable `publicUrl`, `dataUrl`, or `blob:`. */
-  readonly url: string;
-  /** Human label shown in the toolbar / used as the document title. */
-  readonly title?: string;
-  readonly className?: string;
-}
-
-export function PdfPreview({ url, title, className }: PdfPreviewProps): JSX.Element {
-  const [numPages, setNumPages] = useState(0);
-  const [scale, setScale] = useState(DEFAULT_SCALE);
-  const [error, setError] = useState<string | null>(null);
-
-  // Stable `file` identity so react-pdf doesn't re-fetch on every render.
-  const file = useMemo(() => ({ url }), [url]);
-
-  const zoomOut = useCallback(() => setScale((s) => clampScale(s - STEP)), []);
-  const zoomIn = useCallback(() => setScale((s) => clampScale(s + STEP)), []);
-  const reset = useCallback(() => setScale(DEFAULT_SCALE), []);
-
-  const btn =
-    'inline-flex h-7 w-7 items-center justify-center rounded text-neutral-600 ' +
-    'hover:bg-neutral-200/70 disabled:pointer-events-none disabled:opacity-40 ' +
-    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1';
-
-  return (
-    <div
-      className={cn(
-        'flex h-[520px] flex-col overflow-hidden rounded border border-neutral-200 bg-white',
-        className,
-      )}
-    >
-      <div className="flex items-center gap-1 border-b border-neutral-200 bg-neutral-50 px-2 py-1">
-        <button type="button" onClick={zoomOut} disabled={scale <= MIN_SCALE} aria-label="Zoom out" className={btn}>
-          <ZoomOut className="h-4 w-4" />
-        </button>
-        <span className="w-12 text-center text-xs tabular-nums text-neutral-500">
-          {Math.round(scale * 100)}%
-        </span>
-        <button type="button" onClick={zoomIn} disabled={scale >= MAX_SCALE} aria-label="Zoom in" className={btn}>
-          <ZoomIn className="h-4 w-4" />
-        </button>
-        <button type="button" onClick={reset} disabled={scale === DEFAULT_SCALE} aria-label="Reset zoom" className={btn}>
-          <RotateCcw className="h-4 w-4" />
-        </button>
-        {title ? (
-          <span className="ml-2 min-w-0 flex-1 truncate text-xs text-neutral-400" title={title}>
-            {title}
-          </span>
-        ) : null}
-      </div>
-
-      <div className="flex-1 overflow-auto bg-neutral-100 p-3">
-        {error ? (
-          <div className="p-4 text-xs text-neutral-500">
-            Couldn&apos;t render this PDF ({error}). Use the download affordance.
-          </div>
-        ) : (
-          <Document
-            file={file}
-            onLoadSuccess={({ numPages: n }) => {
-              setNumPages(n);
-              setError(null);
-            }}
-            onLoadError={(e) => setError(e.message)}
-            loading={<div className="p-4 text-xs text-neutral-500">Loading PDF…</div>}
-            className="flex flex-col items-center gap-3"
-          >
-            {Array.from({ length: numPages }, (_, i) => (
-              <Page
-                key={i}
-                pageNumber={i + 1}
-                scale={scale}
-                renderTextLayer={false}
-                renderAnnotationLayer={false}
-                className="shadow-sm"
-              />
-            ))}
-          </Document>
-        )}
-      </div>
-    </div>
-  );
-}