@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/file-upload/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type DragEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { formatBytes, type QueuedFile, type UploadStatus } from \"./upload-queue\";\n\n/**\n * The visible half of uploading. The queue is in `upload-queue.ts` and is the\n * part worth owning.\n *\n * There is no dropzone pattern in the WAI-ARIA APG, and inventing one is the\n * usual failure: a `div` with `role=\"button\"`, a keydown handler, and a file\n * picker that keyboard users can never reach. So the control here is a real\n * `<input type=\"file\">` with a real `<label>`. That is already operable by\n * keyboard, already announces itself, already opens the picker on Enter and\n * Space, and needs nothing added. Drag and drop is layered on top as a pointer\n * convenience, and every drop can also be done from the input.\n */\n\nconst STATUS_LABEL: Record<UploadStatus, string> = {\n  queued: \"Waiting\",\n  uploading: \"Uploading\",\n  done: \"Uploaded\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nexport interface FileUploadProps extends Omit<ComponentPropsWithRef<\"div\">, \"onDrop\"> {\n  /** Names the control. */\n  label: string;\n  onFiles: (files: File[]) => void;\n  accept?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  /** Shown under the prompt: accepted types, size limit. */\n  hint?: ReactNode;\n  children?: ReactNode;\n}\n\nexport function FileUpload({\n  className,\n  label,\n  onFiles,\n  accept,\n  multiple = true,\n  disabled = false,\n  hint,\n  children,\n  ...props\n}: FileUploadProps) {\n  const inputId = useId();\n  const hintId = useId();\n  const [dragging, setDragging] = useState(false);\n  const depth = useRef(0);\n\n  function handleDrop(event: DragEvent<HTMLDivElement>) {\n    event.preventDefault();\n    depth.current = 0;\n    setDragging(false);\n    if (disabled) return;\n\n    const dropped = [...event.dataTransfer.files];\n    if (dropped.length > 0) onFiles(multiple ? dropped : dropped.slice(0, 1));\n  }\n\n  return (\n    <div data-slot=\"file-upload\" className={cn(\"flex flex-col gap-3\", className)} {...props}>\n      {/* dragenter/dragleave fire for every child element, so a plain boolean\n          flickers as the pointer crosses the prompt text. Counting depth is\n          what makes the highlight steady. */}\n      <div\n        data-slot=\"file-upload-dropzone\"\n        data-dragging={dragging || undefined}\n        onDragEnter={(event) => {\n          event.preventDefault();\n          depth.current += 1;\n          if (!disabled) setDragging(true);\n        }}\n        onDragLeave={() => {\n          depth.current -= 1;\n          if (depth.current <= 0) setDragging(false);\n        }}\n        onDragOver={(event) => {\n          event.preventDefault();\n        }}\n        onDrop={handleDrop}\n        className={cn(\n          \"rounded-lg border border-dashed border-border-strong bg-muted/30 px-4 py-6 text-center\",\n          \"transition-colors duration-[var(--duration-fast)]\",\n          dragging && \"border-primary bg-primary/5\",\n          disabled && \"pointer-events-none opacity-55\",\n        )}\n      >\n        {/* The label is the control. Clicking it opens the picker, Enter and\n            Space activate it, and assistive technology already describes it. */}\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"inline-flex cursor-pointer flex-col items-center gap-1 rounded-md px-2 py-1 text-sm\",\n            \"focus-within:ring-2 focus-within:ring-ring/55\",\n          )}\n        >\n          <span className=\"font-medium\">{label}</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Drop {multiple ? \"files\" : \"a file\"} here, or choose from your device\n          </span>\n          <input\n            id={inputId}\n            type=\"file\"\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            aria-describedby={hint ? hintId : undefined}\n            onChange={(event) => {\n              const chosen = [...(event.target.files ?? [])];\n              if (chosen.length > 0) onFiles(chosen);\n              // Reset, so choosing the same file twice fires change twice.\n              event.target.value = \"\";\n            }}\n            className=\"sr-only\"\n          />\n        </label>\n\n        {hint ? (\n          <p id={hintId} className=\"mt-2 text-xs text-muted-foreground\">\n            {hint}\n          </p>\n        ) : null}\n      </div>\n\n      {children}\n    </div>\n  );\n}\n\nexport interface FileUploadListProps extends ComponentPropsWithRef<\"ul\"> {\n  files: QueuedFile[];\n  onCancel?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\nexport function FileUploadList({\n  className,\n  files,\n  onCancel,\n  onRetry,\n  onRemove,\n  ...props\n}: FileUploadListProps) {\n  if (files.length === 0) return null;\n\n  return (\n    <ul\n      data-slot=\"file-upload-list\"\n      className={cn(\"flex list-none flex-col gap-2\", className)}\n      {...props}\n    >\n      {files.map((entry) => (\n        <FileUploadItem\n          key={entry.id}\n          entry={entry}\n          onCancel={onCancel}\n          onRetry={onRetry}\n          onRemove={onRemove}\n        />\n      ))}\n    </ul>\n  );\n}\n\nexport interface FileUploadItemProps extends Omit<ComponentPropsWithRef<\"li\">, \"children\"> {\n  entry: QueuedFile;\n  onCancel?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\nexport function FileUploadItem({\n  className,\n  entry,\n  onCancel,\n  onRetry,\n  onRemove,\n  ...props\n}: FileUploadItemProps) {\n  const { id, file, status, progress, error } = entry;\n  const percent = progress === null ? null : Math.round(progress * 100);\n\n  return (\n    <li\n      data-slot=\"file-upload-item\"\n      data-status={status}\n      className={cn(\n        \"flex items-center gap-3 rounded-lg border px-3 py-2 text-sm\",\n        status === \"failed\"\n          ? \"border-destructive/40 bg-destructive/5\"\n          : \"border-border bg-card\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <div className=\"flex items-baseline justify-between gap-2\">\n          <span className=\"truncate font-medium\">{file.name}</span>\n          <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\">\n            {formatBytes(file.size)}\n          </span>\n        </div>\n\n        {/* Status in words, always. A bar at 60% with a red tint does not say\n            whether it is uploading, stalled or failed. */}\n        <p\n          className={cn(\n            \"text-xs\",\n            status === \"failed\" ? \"text-destructive\" : \"text-muted-foreground\",\n          )}\n        >\n          {STATUS_LABEL[status]}\n          {status === \"uploading\" && percent !== null ? ` · ${String(percent)}%` : null}\n          {error ? ` · ${error}` : null}\n        </p>\n\n        {status === \"uploading\" ? (\n          <div\n            role=\"progressbar\"\n            aria-label={`Uploading ${file.name}`}\n            aria-valuenow={percent ?? undefined}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            className=\"h-1 w-full overflow-hidden rounded-full bg-muted\"\n          >\n            <div\n              data-slot=\"file-upload-progress\"\n              className=\"h-full rounded-full bg-primary transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\"\n              style={{ width: `${String(percent ?? 0)}%` }}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-1\">\n        {status === \"uploading\" && onCancel ? (\n          <ItemButton onClick={() => onCancel(id)}>Cancel</ItemButton>\n        ) : null}\n        {(status === \"failed\" || status === \"cancelled\") && onRetry ? (\n          <ItemButton onClick={() => onRetry(id)}>Retry</ItemButton>\n        ) : null}\n        {onRemove ? (\n          <ItemButton onClick={() => onRemove(id)} aria-label={`Remove ${file.name}`}>\n            Remove\n          </ItemButton>\n        ) : null}\n      </div>\n    </li>\n  );\n}\n\nfunction ItemButton({ className, ...props }: ComponentPropsWithRef<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n        \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * One sentence covering the whole queue, announced politely.\n *\n * Per-file live regions would talk over each other the moment two uploads run\n * at once; one summary of the set is readable where six competing ones are not.\n */\nexport function FileUploadStatus({\n  className,\n  stats,\n  ...props\n}: ComponentPropsWithRef<\"p\"> & {\n  stats: { total: number; active: number; done: number; failed: number };\n}) {\n  const { total, active, done, failed } = stats;\n\n  // Progress through the set, not a count of what happens to be in flight.\n  // \"3 of 5 uploading\" is wrong the moment a concurrency limit holds two back,\n  // and it never tells the reader how much of the job is left.\n  const message =\n    total === 0\n      ? \"\"\n      : active > 0\n        ? `${String(done)} of ${String(total)} uploaded`\n        : failed > 0\n          ? `${String(done)} uploaded, ${String(failed)} failed`\n          : `${String(done)} uploaded`;\n\n  return (\n    <p\n      data-slot=\"file-upload-status\"\n      aria-live=\"polite\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AnimatedFileUpload (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type DragEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { formatBytes, type QueuedFile, type UploadStatus } from \"./upload-queue\";\n\n/**\n * The visible half of uploading. The queue is in `upload-queue.ts` and is the\n * part worth owning.\n *\n * There is no dropzone pattern in the WAI-ARIA APG, and inventing one is the\n * usual failure: a `div` with `role=\"button\"`, a keydown handler, and a file\n * picker that keyboard users can never reach. So the control here is a real\n * `<input type=\"file\">` with a real `<label>`. That is already operable by\n * keyboard, already announces itself, already opens the picker on Enter and\n * Space, and needs nothing added. Drag and drop is layered on top as a pointer\n * convenience, and every drop can also be done from the input.\n */\n\n/*\n * Motion (SmoothUI's AnimatedFileUpload): the dropzone swells slightly while a\n * drag is over it and an optional icon lifts; queued files slide in from the\n * inline start, and with `animateExit` slide out toward the inline end.\n * Keyframes ship with the component (ADR 0014) on duration tokens, so reduced\n * motion collapses them; the travel direction follows :dir().\n */\nconst ITEM_KEYFRAMES = `\n@keyframes dowel-file-upload-in{from{opacity:0;transform:translateX(var(--dowel-file-upload-x)) scale(0.95)}}\n@keyframes dowel-file-upload-out{to{opacity:0;transform:translateX(calc(-1.5 * var(--dowel-file-upload-x))) scale(0.95)}}\n[data-slot=\"file-upload-item\"]{--dowel-file-upload-x:-1rem;animation:dowel-file-upload-in var(--duration-normal) var(--ease-out-quint)}\n[data-slot=\"file-upload-item\"]:dir(rtl){--dowel-file-upload-x:1rem}\n[data-slot=\"file-upload-item\"][data-state=\"closed\"]{animation:dowel-file-upload-out var(--duration-fast) var(--ease-in-quint) forwards}\n`;\n\n/** Clears departing rows whose animation never runs (hidden, unstyled). */\nconst EXIT_FALLBACK_MS = 1000;\n\nconst STATUS_LABEL: Record<UploadStatus, string> = {\n  queued: \"Waiting\",\n  uploading: \"Uploading\",\n  done: \"Uploaded\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nexport interface FileUploadProps extends Omit<ComponentPropsWithRef<\"div\">, \"onDrop\"> {\n  /** Names the control. */\n  label: string;\n  onFiles: (files: File[]) => void;\n  accept?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  /** Shown under the prompt: accepted types, size limit. */\n  hint?: ReactNode;\n  /**\n   * A decorative icon above the prompt, hidden from assistive technology. It\n   * lifts while a drag is over the dropzone.\n   */\n  icon?: ReactNode;\n  children?: ReactNode;\n}\n\nexport function FileUpload({\n  className,\n  label,\n  onFiles,\n  accept,\n  multiple = true,\n  disabled = false,\n  hint,\n  icon,\n  children,\n  ...props\n}: FileUploadProps) {\n  const inputId = useId();\n  const hintId = useId();\n  const [dragging, setDragging] = useState(false);\n  const depth = useRef(0);\n\n  function handleDrop(event: DragEvent<HTMLDivElement>) {\n    event.preventDefault();\n    depth.current = 0;\n    setDragging(false);\n    if (disabled) return;\n\n    const dropped = [...event.dataTransfer.files];\n    if (dropped.length > 0) onFiles(multiple ? dropped : dropped.slice(0, 1));\n  }\n\n  return (\n    <div data-slot=\"file-upload\" className={cn(\"flex flex-col gap-3\", className)} {...props}>\n      {/* dragenter/dragleave fire for every child element, so a plain boolean\n          flickers as the pointer crosses the prompt text. Counting depth is\n          what makes the highlight steady. */}\n      <div\n        data-slot=\"file-upload-dropzone\"\n        data-dragging={dragging || undefined}\n        onDragEnter={(event) => {\n          event.preventDefault();\n          depth.current += 1;\n          if (!disabled) setDragging(true);\n        }}\n        onDragLeave={() => {\n          depth.current -= 1;\n          if (depth.current <= 0) setDragging(false);\n        }}\n        onDragOver={(event) => {\n          event.preventDefault();\n        }}\n        onDrop={handleDrop}\n        className={cn(\n          \"rounded-lg border border-dashed border-border-strong bg-muted/30 px-4 py-6 text-center\",\n          \"transition-[color,background-color,border-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n          dragging && \"scale-[1.02] border-primary bg-primary/5\",\n          disabled && \"pointer-events-none opacity-55\",\n        )}\n      >\n        {icon ? (\n          <div\n            aria-hidden=\"true\"\n            data-slot=\"file-upload-icon\"\n            className={cn(\n              \"mx-auto mb-2 flex w-fit text-muted-foreground [&_svg:not([class*='size-'])]:size-8\",\n              \"transition-[color,translate,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n              dragging && \"-translate-y-1 scale-115 text-foreground\",\n            )}\n          >\n            {icon}\n          </div>\n        ) : null}\n\n        {/* The label is the control. Clicking it opens the picker, Enter and\n            Space activate it, and assistive technology already describes it. */}\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"inline-flex cursor-pointer flex-col items-center gap-1 rounded-md px-2 py-1 text-sm\",\n            \"focus-within:ring-2 focus-within:ring-ring/55\",\n          )}\n        >\n          <span className=\"font-medium\">{label}</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Drop {multiple ? \"files\" : \"a file\"} here, or choose from your device\n          </span>\n          <input\n            id={inputId}\n            type=\"file\"\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            aria-describedby={hint ? hintId : undefined}\n            onChange={(event) => {\n              const chosen = [...(event.target.files ?? [])];\n              if (chosen.length > 0) onFiles(chosen);\n              // Reset, so choosing the same file twice fires change twice.\n              event.target.value = \"\";\n            }}\n            className=\"sr-only\"\n          />\n        </label>\n\n        {hint ? (\n          <p id={hintId} className=\"mt-2 text-xs text-muted-foreground\">\n            {hint}\n          </p>\n        ) : null}\n      </div>\n\n      {children}\n    </div>\n  );\n}\n\nexport interface FileUploadListProps extends ComponentPropsWithRef<\"ul\"> {\n  files: QueuedFile[];\n  /**\n   * Lets a removed file slide out before it leaves the DOM. The departing row\n   * is `aria-hidden`, inert and has no buttons. Off by default, because the old\n   * row briefly remains in the markup.\n   */\n  animateExit?: boolean;\n  onCancel?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\ninterface LeavingEntry {\n  entry: QueuedFile;\n  index: number;\n}\n\nexport function FileUploadList({\n  className,\n  files,\n  onCancel,\n  onRetry,\n  onRemove,\n  animateExit = false,\n  ...props\n}: FileUploadListProps) {\n  // Derived from the previous render rather than in an effect, so a departing\n  // row is in place on the same commit its live one leaves.\n  const [previous, setPrevious] = useState(files);\n  const [leaving, setLeaving] = useState<LeavingEntry[]>([]);\n  if (previous !== files) {\n    setPrevious(files);\n    const present = new Set(files.map((entry) => entry.id));\n    const gone = animateExit\n      ? previous.flatMap((entry, index) => (present.has(entry.id) ? [] : [{ entry, index }]))\n      : [];\n    setLeaving((current) => [\n      ...current.filter(\n        (item) =>\n          !present.has(item.entry.id) && !gone.some((g) => g.entry.id === item.entry.id),\n      ),\n      ...gone,\n    ]);\n  }\n\n  useEffect(() => {\n    if (leaving.length === 0) return;\n    const timer = setTimeout(() => {\n      setLeaving([]);\n    }, EXIT_FALLBACK_MS);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [leaving]);\n\n  // A native listener: React maps onAnimationEnd to a vendor-prefixed name\n  // wherever AnimationEvent is missing. React 19 runs the returned cleanup.\n  const listenForExitEnd = useCallback(\n    (id: string) => (element: HTMLLIElement | null) => {\n      if (!element) return;\n      const onEnd = (event: Event) => {\n        if (event.target !== element) return;\n        setLeaving((current) => current.filter((item) => item.entry.id !== id));\n      };\n      element.addEventListener(\"animationend\", onEnd);\n      return () => {\n        element.removeEventListener(\"animationend\", onEnd);\n      };\n    },\n    [],\n  );\n\n  const rows: { entry: QueuedFile; gone: boolean }[] = files.map((entry) => ({\n    entry,\n    gone: false,\n  }));\n  for (const item of [...leaving].sort((a, b) => a.index - b.index)) {\n    rows.splice(Math.min(item.index, rows.length), 0, { entry: item.entry, gone: true });\n  }\n\n  if (rows.length === 0) return null;\n\n  return (\n    <ul\n      data-slot=\"file-upload-list\"\n      className={cn(\"flex list-none flex-col gap-2\", className)}\n      {...props}\n    >\n      {rows.map(({ entry, gone }) =>\n        gone ? (\n          <FileUploadItem\n            key={`gone:${entry.id}`}\n            ref={listenForExitEnd(entry.id)}\n            entry={entry}\n            data-state=\"closed\"\n            aria-hidden=\"true\"\n            inert\n          />\n        ) : (\n          <FileUploadItem\n            key={entry.id}\n            entry={entry}\n            onCancel={onCancel}\n            onRetry={onRetry}\n            onRemove={onRemove}\n          />\n        ),\n      )}\n    </ul>\n  );\n}\n\nexport interface FileUploadItemProps extends Omit<ComponentPropsWithRef<\"li\">, \"children\"> {\n  entry: QueuedFile;\n  onCancel?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\nexport function FileUploadItem({\n  className,\n  entry,\n  onCancel,\n  onRetry,\n  onRemove,\n  ...props\n}: FileUploadItemProps) {\n  const { id, file, status, progress, error } = entry;\n  const percent = progress === null ? null : Math.round(progress * 100);\n\n  return (\n    <li\n      data-slot=\"file-upload-item\"\n      data-status={status}\n      className={cn(\n        \"flex items-center gap-3 rounded-lg border px-3 py-2 text-sm\",\n        status === \"failed\"\n          ? \"border-destructive/40 bg-destructive/5\"\n          : \"border-border bg-card\",\n        className,\n      )}\n      {...props}\n    >\n      <style href=\"dowel-file-upload\" precedence=\"dowel\">\n        {ITEM_KEYFRAMES}\n      </style>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <div className=\"flex items-baseline justify-between gap-2\">\n          <span className=\"truncate font-medium\">{file.name}</span>\n          <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\">\n            {formatBytes(file.size)}\n          </span>\n        </div>\n\n        {/* Status in words, always. A bar at 60% with a red tint does not say\n            whether it is uploading, stalled or failed. */}\n        <p\n          className={cn(\n            \"text-xs\",\n            status === \"failed\" ? \"text-destructive\" : \"text-muted-foreground\",\n          )}\n        >\n          {STATUS_LABEL[status]}\n          {status === \"uploading\" && percent !== null ? ` · ${String(percent)}%` : null}\n          {error ? ` · ${error}` : null}\n        </p>\n\n        {status === \"uploading\" ? (\n          <div\n            role=\"progressbar\"\n            aria-label={`Uploading ${file.name}`}\n            aria-valuenow={percent ?? undefined}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            className=\"h-1 w-full overflow-hidden rounded-full bg-muted\"\n          >\n            <div\n              data-slot=\"file-upload-progress\"\n              className=\"h-full rounded-full bg-primary transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\"\n              style={{ width: `${String(percent ?? 0)}%` }}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-1\">\n        {status === \"uploading\" && onCancel ? (\n          <ItemButton onClick={() => onCancel(id)}>Cancel</ItemButton>\n        ) : null}\n        {(status === \"failed\" || status === \"cancelled\") && onRetry ? (\n          <ItemButton onClick={() => onRetry(id)}>Retry</ItemButton>\n        ) : null}\n        {onRemove ? (\n          <ItemButton onClick={() => onRemove(id)} aria-label={`Remove ${file.name}`}>\n            Remove\n          </ItemButton>\n        ) : null}\n      </div>\n    </li>\n  );\n}\n\nfunction ItemButton({ className, ...props }: ComponentPropsWithRef<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n        \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * One sentence covering the whole queue, announced politely.\n *\n * Per-file live regions would talk over each other the moment two uploads run\n * at once; one summary of the set is readable where six competing ones are not.\n */\nexport function FileUploadStatus({\n  className,\n  stats,\n  ...props\n}: ComponentPropsWithRef<\"p\"> & {\n  stats: { total: number; active: number; done: number; failed: number };\n}) {\n  const { total, active, done, failed } = stats;\n\n  // Progress through the set, not a count of what happens to be in flight.\n  // \"3 of 5 uploading\" is wrong the moment a concurrency limit holds two back,\n  // and it never tells the reader how much of the job is left.\n  const message =\n    total === 0\n      ? \"\"\n      : active > 0\n        ? `${String(done)} of ${String(total)} uploaded`\n        : failed > 0\n          ? `${String(done)} uploaded, ${String(failed)} failed`\n          : `${String(done)} uploaded`;\n\n  return (\n    <p\n      data-slot=\"file-upload-status\"\n      aria-live=\"polite\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n"],"mappings":"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"}

package/dist/components/file-upload/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: [],
 	registryDependencies: [],
 	files: ["upload-queue.ts", "file-upload.tsx"],
-	a11y: "The APG has no dropzone pattern, and inventing one is the usual failure — a div with role=\"button\", a keydown handler, and a picker keyboard users never reach. The control here is a real input[type=file] with a real label, which is already operable, already announced, and opens the picker on Enter and Space with nothing added. Drag and drop is a pointer convenience layered on top; every drop can also be done from the input. Each uploading file gets a progressbar named after it, status is always stated in words as well as drawn, and one polite live region summarises the whole queue rather than six per-file regions talking over each other."
+	a11y: "The APG has no dropzone pattern, and inventing one is the usual failure — a div with role=\"button\", a keydown handler, and a picker keyboard users never reach. The control here is a real input[type=file] with a real label, which is already operable, already announced, and opens the picker on Enter and Space with nothing added. Drag and drop is a pointer convenience layered on top; every drop can also be done from the input. Each uploading file gets a progressbar named after it, status is always stated in words as well as drawn, and one polite live region summarises the whole queue rather than six per-file regions talking over each other. The optional dropzone icon is aria-hidden. With animateExit, a removed row lingers only as an aria-hidden, inert copy with no buttons while it animates out."
 });
 //#endregion
 export { meta };

package/dist/components/file-upload/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/file-upload/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"file-upload\",\n  title: \"File Upload\",\n  description: \"A dropzone over a real file input, plus the upload queue nobody ships.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"upload-queue.ts\", \"file-upload.tsx\"],\n  a11y:\n    \"The APG has no dropzone pattern, and inventing one is the usual failure — a div with \" +\n    'role=\"button\", a keydown handler, and a picker keyboard users never reach. The control here ' +\n    \"is a real input[type=file] with a real label, which is already operable, already announced, \" +\n    \"and opens the picker on Enter and Space with nothing added. Drag and drop is a pointer \" +\n    \"convenience layered on top; every drop can also be done from the input. Each uploading file \" +\n    \"gets a progressbar named after it, status is always stated in words as well as drawn, and \" +\n    \"one polite live region summarises the whole queue rather than six per-file regions talking \" +\n    \"over each other.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB,iBAAiB;CAC5C,MACE;AAQJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/file-upload/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"file-upload\",\n  title: \"File Upload\",\n  description: \"A dropzone over a real file input, plus the upload queue nobody ships.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"upload-queue.ts\", \"file-upload.tsx\"],\n  a11y:\n    \"The APG has no dropzone pattern, and inventing one is the usual failure — a div with \" +\n    'role=\"button\", a keydown handler, and a picker keyboard users never reach. The control here ' +\n    \"is a real input[type=file] with a real label, which is already operable, already announced, \" +\n    \"and opens the picker on Enter and Space with nothing added. Drag and drop is a pointer \" +\n    \"convenience layered on top; every drop can also be done from the input. Each uploading file \" +\n    \"gets a progressbar named after it, status is always stated in words as well as drawn, and \" +\n    \"one polite live region summarises the whole queue rather than six per-file regions talking \" +\n    \"over each other.\" +\n    \" The optional dropzone icon is aria-hidden. With animateExit, a removed row lingers only as an aria-hidden, inert copy with no buttons while it animates out.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB,iBAAiB;CAC5C,MACE;AASJ,CAAC"}

package/dist/components/focus-blur-links/focus-blur-links.d.ts

@@ -0,0 +1,25 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/focus-blur-links/focus-blur-links.d.ts
+declare const focusBlurLinksVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface FocusBlurLinksProps extends ComponentPropsWithRef<"div">, VariantProps<typeof focusBlurLinksVariants> {
+  /** Blur applied to the other links, in pixels. */
+  blurAmount?: number;
+  /** Opacity of the other links, from 0 to 1. */
+  dimOpacity?: number;
+  /** Draws a dashed bracket around the emphasised link. */
+  showBrackets?: boolean;
+}
+/** A row of links that blurs every link but the one being pointed at or focused. */
+declare function FocusBlurLinks({ className, size, blurAmount, dimOpacity, showBrackets, style, children, ...props }: FocusBlurLinksProps): import("react").JSX.Element;
+interface FocusBlurLinkProps extends ComponentPropsWithRef<"a"> {
+  /** Renders the child element — a router `Link`, say — instead of an `<a>`. */
+  asChild?: boolean;
+}
+/** One link in a `FocusBlurLinks` row. */
+declare function FocusBlurLink({ className, asChild, children, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...props }: FocusBlurLinkProps): import("react").JSX.Element;
+//#endregion
+export { FocusBlurLink, FocusBlurLinkProps, FocusBlurLinks, FocusBlurLinksProps, focusBlurLinksVariants };
+//# sourceMappingURL=focus-blur-links.d.ts.map

package/dist/components/focus-blur-links/focus-blur-links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-blur-links.d.ts","names":[],"sources":["../../../src/components/focus-blur-links/focus-blur-links.tsx"],"mappings":";;;cAgDM,yBAAsB;;6CAW1B;UAEe,4BACP,8BAA8B,oBAAoB;;EAE1D;;EAEA;;EAEA;;;iBAIc,iBACd,WACA,MACA,YACA,YACA,cACA,OACA,aACG,SACF,sCAAmB,IAAA;UA+BL,2BAA2B;;EAE1C;;;iBAIc,gBACd,WACA,SACA,UACA,gBACA,gBACA,eACA,SACA,WACG,SACF,qCAAkB,IAAA"}

package/dist/components/focus-blur-links/focus-blur-links.js

@@ -0,0 +1,92 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Slot } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { createContext, useContext, useId, useMemo, useRef, useState } from "react";
+//#region src/components/focus-blur-links/focus-blur-links.tsx
+const FocusBlurContext = createContext(null);
+function useFocusBlur() {
+	const context = useContext(FocusBlurContext);
+	if (!context) throw new Error("FocusBlurLink must be used inside FocusBlurLinks.");
+	return context;
+}
+const focusBlurLinksVariants = cva("flex flex-wrap items-center justify-center font-semibold", {
+	variants: { size: {
+		sm: "gap-4 text-sm",
+		md: "gap-6 text-lg",
+		lg: "gap-8 text-2xl"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** A row of links that blurs every link but the one being pointed at or focused. */
+function FocusBlurLinks({ className, size, blurAmount = 4, dimOpacity = .4, showBrackets = true, style, children, ...props }) {
+	const [hovered, setHovered] = useState(null);
+	const [focused, setFocused] = useState(null);
+	const activeId = hovered ?? focused;
+	const value = useMemo(() => ({
+		activeId,
+		setHovered,
+		setFocused,
+		showBrackets
+	}), [activeId, showBrackets]);
+	return /* @__PURE__ */ jsx(FocusBlurContext, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "focus-blur-links",
+			"data-state": activeId ? "focused" : "idle",
+			className: cn(focusBlurLinksVariants({ size }), className),
+			style: {
+				"--focus-blur-amount": `${String(blurAmount)}px`,
+				"--focus-blur-opacity": String(dimOpacity),
+				...style
+			},
+			...props,
+			children
+		})
+	});
+}
+/** One link in a `FocusBlurLinks` row. */
+function FocusBlurLink({ className, asChild = false, children, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...props }) {
+	const { activeId, setHovered, setFocused, showBrackets } = useFocusBlur();
+	const id = useId();
+	const pressing = useRef(false);
+	const Comp = asChild ? Slot.Root : "a";
+	return /* @__PURE__ */ jsxs(Comp, {
+		"data-slot": "focus-blur-link",
+		"data-state": activeId === id ? "active" : activeId ? "dimmed" : "idle",
+		className: cn("group/link relative rounded-sm no-underline select-none", "transition-[filter,opacity,color] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", "data-[state=active]:text-primary", "data-[state=dimmed]:opacity-[var(--focus-blur-opacity)] data-[state=dimmed]:blur-[var(--focus-blur-amount)]", focusRing, className),
+		onPointerEnter: (event) => {
+			onPointerEnter?.(event);
+			setHovered(id);
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setHovered(null);
+		},
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			pressing.current = true;
+		},
+		onFocus: (event) => {
+			onFocus?.(event);
+			if (!pressing.current) setFocused(id);
+			pressing.current = false;
+		},
+		onBlur: (event) => {
+			onBlur?.(event);
+			setFocused(null);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(Slot.Slottable, { children }), showBrackets ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "focus-blur-bracket",
+			className: cn("pointer-events-none absolute -inset-x-2 -inset-y-1 rounded-lg border-2 border-dashed border-border", "scale-130 opacity-0 transition-[opacity,scale] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]", "group-data-[state=active]/link:scale-110 group-data-[state=active]/link:opacity-100")
+		}) : null]
+	});
+}
+//#endregion
+export { FocusBlurLink, FocusBlurLinks, focusBlurLinksVariants };
+
+//# sourceMappingURL=focus-blur-links.js.map

package/dist/components/focus-blur-links/focus-blur-links.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-blur-links.js","names":[],"sources":["../../../src/components/focus-blur-links/focus-blur-links.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport {\n  createContext,\n  useContext,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A row of links where the one under the pointer — or under keyboard focus —\n * stays sharp and the rest blur and dim. The source tracked hover only; focus\n * drives the same state here, because a keyboard user deserves the same\n * emphasis. Pointer takes precedence while it is over a link, and keyboard\n * focus holds the effect once the pointer has gone.\n *\n * The blur is decoration: it never hides a link from assistive technology,\n * and the transition stops under reduced motion (the blur itself remains, as\n * it is a state, not movement).\n */\n\ninterface FocusBlurContextValue {\n  activeId: string | null;\n  setHovered: (id: string | null) => void;\n  setFocused: (id: string | null) => void;\n  showBrackets: boolean;\n}\n\nconst FocusBlurContext = createContext<FocusBlurContextValue | null>(null);\n\nfunction useFocusBlur(): FocusBlurContextValue {\n  const context = useContext(FocusBlurContext);\n  if (!context) throw new Error(\"FocusBlurLink must be used inside FocusBlurLinks.\");\n  return context;\n}\n\nconst focusBlurLinksVariants = cva(\"flex flex-wrap items-center justify-center font-semibold\", {\n  variants: {\n    size: {\n      sm: \"gap-4 text-sm\",\n      md: \"gap-6 text-lg\",\n      lg: \"gap-8 text-2xl\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface FocusBlurLinksProps\n  extends ComponentPropsWithRef<\"div\">, VariantProps<typeof focusBlurLinksVariants> {\n  /** Blur applied to the other links, in pixels. */\n  blurAmount?: number;\n  /** Opacity of the other links, from 0 to 1. */\n  dimOpacity?: number;\n  /** Draws a dashed bracket around the emphasised link. */\n  showBrackets?: boolean;\n}\n\n/** A row of links that blurs every link but the one being pointed at or focused. */\nexport function FocusBlurLinks({\n  className,\n  size,\n  blurAmount = 4,\n  dimOpacity = 0.4,\n  showBrackets = true,\n  style,\n  children,\n  ...props\n}: FocusBlurLinksProps) {\n  const [hovered, setHovered] = useState<string | null>(null);\n  const [focused, setFocused] = useState<string | null>(null);\n  const activeId = hovered ?? focused;\n\n  const value = useMemo(\n    () => ({ activeId, setHovered, setFocused, showBrackets }),\n    [activeId, showBrackets],\n  );\n\n  return (\n    <FocusBlurContext value={value}>\n      <div\n        data-slot=\"focus-blur-links\"\n        data-state={activeId ? \"focused\" : \"idle\"}\n        className={cn(focusBlurLinksVariants({ size }), className)}\n        style={\n          {\n            \"--focus-blur-amount\": `${String(blurAmount)}px`,\n            \"--focus-blur-opacity\": String(dimOpacity),\n            ...style,\n          } as CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </div>\n    </FocusBlurContext>\n  );\n}\n\nexport interface FocusBlurLinkProps extends ComponentPropsWithRef<\"a\"> {\n  /** Renders the child element — a router `Link`, say — instead of an `<a>`. */\n  asChild?: boolean;\n}\n\n/** One link in a `FocusBlurLinks` row. */\nexport function FocusBlurLink({\n  className,\n  asChild = false,\n  children,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onFocus,\n  onBlur,\n  ...props\n}: FocusBlurLinkProps) {\n  const { activeId, setHovered, setFocused, showBrackets } = useFocusBlur();\n  const id = useId();\n  // A click focuses the link too; only keyboard focus should hold the effect\n  // after the pointer leaves, so the origin of focus is tracked by hand.\n  const pressing = useRef(false);\n  const Comp = asChild ? Slot.Root : \"a\";\n  const state = activeId === id ? \"active\" : activeId ? \"dimmed\" : \"idle\";\n\n  return (\n    <Comp\n      data-slot=\"focus-blur-link\"\n      data-state={state}\n      className={cn(\n        \"group/link relative rounded-sm no-underline select-none\",\n        \"transition-[filter,opacity,color] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n        \"data-[state=active]:text-primary\",\n        \"data-[state=dimmed]:opacity-[var(--focus-blur-opacity)] data-[state=dimmed]:blur-[var(--focus-blur-amount)]\",\n        focusRing,\n        className,\n      )}\n      onPointerEnter={(event: PointerEvent<HTMLAnchorElement>) => {\n        onPointerEnter?.(event);\n        setHovered(id);\n      }}\n      onPointerLeave={(event: PointerEvent<HTMLAnchorElement>) => {\n        onPointerLeave?.(event);\n        setHovered(null);\n      }}\n      onPointerDown={(event: PointerEvent<HTMLAnchorElement>) => {\n        onPointerDown?.(event);\n        pressing.current = true;\n      }}\n      onFocus={(event: FocusEvent<HTMLAnchorElement>) => {\n        onFocus?.(event);\n        if (!pressing.current) setFocused(id);\n        pressing.current = false;\n      }}\n      onBlur={(event: FocusEvent<HTMLAnchorElement>) => {\n        onBlur?.(event);\n        setFocused(null);\n      }}\n      {...props}\n    >\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {showBrackets ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"focus-blur-bracket\"\n          className={cn(\n            \"pointer-events-none absolute -inset-x-2 -inset-y-1 rounded-lg border-2 border-dashed border-border\",\n            \"scale-130 opacity-0 transition-[opacity,scale] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\",\n            \"group-data-[state=active]/link:scale-110 group-data-[state=active]/link:opacity-100\",\n          )}\n        />\n      ) : null}\n    </Comp>\n  );\n}\n\nexport { focusBlurLinksVariants };\n"],"mappings":";;;;;;;;AAwCA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,SAAS,eAAsC;CAC7C,MAAM,UAAU,WAAW,gBAAgB;CAC3C,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,mDAAmD;CACjF,OAAO;AACT;AAEA,MAAM,yBAAyB,IAAI,4DAA4D;CAC7F,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAaD,SAAgB,eAAe,EAC7B,WACA,MACA,aAAa,GACb,aAAa,IACb,eAAe,MACf,OACA,UACA,GAAG,SACmB;CACtB,MAAM,CAAC,SAAS,cAAc,SAAwB,IAAI;CAC1D,MAAM,CAAC,SAAS,cAAc,SAAwB,IAAI;CAC1D,MAAM,WAAW,WAAW;CAE5B,MAAM,QAAQ,eACL;EAAE;EAAU;EAAY;EAAY;CAAa,IACxD,CAAC,UAAU,YAAY,CACzB;CAEA,OACE,oBAAC,kBAAD;EAAyB;EACvB,UAAA,oBAAC,OAAD;GACE,aAAU;GACV,cAAY,WAAW,YAAY;GACnC,WAAW,GAAG,uBAAuB,EAAE,KAAK,CAAC,GAAG,SAAS;GACzD,OACE;IACE,uBAAuB,GAAG,OAAO,UAAU,EAAE;IAC7C,wBAAwB,OAAO,UAAU;IACzC,GAAG;GACL;GAEF,GAAI;GAEH;EACE,CAAA;CACW,CAAA;AAEtB;;AAQA,SAAgB,cAAc,EAC5B,WACA,UAAU,OACV,UACA,gBACA,gBACA,eACA,SACA,QACA,GAAG,SACkB;CACrB,MAAM,EAAE,UAAU,YAAY,YAAY,iBAAiB,aAAa;CACxE,MAAM,KAAK,MAAM;CAGjB,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,OAAO,UAAU,KAAK,OAAO;CAGnC,OACE,qBAAC,MAAD;EACE,aAAU;EACV,cALU,aAAa,KAAK,WAAW,WAAW,WAAW;EAM7D,WAAW,GACT,2DACA,kGACA,oCACA,+GACA,WACA,SACF;EACA,iBAAiB,UAA2C;GAC1D,iBAAiB,KAAK;GACtB,WAAW,EAAE;EACf;EACA,iBAAiB,UAA2C;GAC1D,iBAAiB,KAAK;GACtB,WAAW,IAAI;EACjB;EACA,gBAAgB,UAA2C;GACzD,gBAAgB,KAAK;GACrB,SAAS,UAAU;EACrB;EACA,UAAU,UAAyC;GACjD,UAAU,KAAK;GACf,IAAI,CAAC,SAAS,SAAS,WAAW,EAAE;GACpC,SAAS,UAAU;EACrB;EACA,SAAS,UAAyC;GAChD,SAAS,KAAK;GACd,WAAW,IAAI;EACjB;EACA,GAAI;EAhCN,UAAA,CAkCE,oBAAC,KAAK,WAAN,EAAiB,SAAyB,CAAA,GACzC,eACC,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,WAAW,GACT,sGACA,+GACA,qFACF;EACD,CAAA,IACC,IACA;;AAEV"}

package/dist/components/focus-blur-links/index.d.ts

@@ -0,0 +1,2 @@
+import { FocusBlurLink, FocusBlurLinkProps, FocusBlurLinks, FocusBlurLinksProps, focusBlurLinksVariants } from "./focus-blur-links.js";
+export { FocusBlurLink, type FocusBlurLinkProps, FocusBlurLinks, type FocusBlurLinksProps, focusBlurLinksVariants };

package/dist/components/focus-blur-links/index.js

@@ -0,0 +1,2 @@
+import { FocusBlurLink, FocusBlurLinks, focusBlurLinksVariants } from "./focus-blur-links.js";
+export { FocusBlurLink, FocusBlurLinks, focusBlurLinksVariants };

package/dist/components/focus-blur-links/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/focus-blur-links/meta.ts
+const meta = defineMeta({
+	name: "focus-blur-links",
+	title: "Focus Blur Links",
+	description: "A row of links where hovering or focusing one blurs and dims the rest, with an optional dashed bracket.",
+	category: "navigation",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["focus-blur-links.tsx"],
+	a11y: "Every item is a real link (or your router's link via asChild). Keyboard focus triggers the same emphasis as hover and holds it after the pointer leaves; focus from a click does not. The blur is visual only — dimmed links stay in the accessibility tree and remain focusable. Wrap the row in a <nav aria-label> when it is site navigation."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/focus-blur-links/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/focus-blur-links/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"focus-blur-links\",\n  title: \"Focus Blur Links\",\n  description:\n    \"A row of links where hovering or focusing one blurs and dims the rest, with an optional dashed bracket.\",\n  category: \"navigation\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"focus-blur-links.tsx\"],\n  a11y:\n    \"Every item is a real link (or your router's link via asChild). Keyboard focus triggers the same emphasis as \" +\n    \"hover and holds it after the pointer leaves; focus from a click does not. The blur is visual only — dimmed \" +\n    \"links stay in the accessibility tree and remain focusable. Wrap the row in a <nav aria-label> when it is \" +\n    \"site navigation.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,sBAAsB;CAC9B,MACE;AAIJ,CAAC"}

package/dist/components/folding-frame/folding-frame.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/folding-frame/folding-frame.d.ts
+declare const foldingFrameVariants: (props?: ({
+  fill?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface FoldingFrameProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof foldingFrameVariants> {
+  /** Image URL of the photo. */
+  src: string;
+  /** Describes the photo. It names the frame's role="img". */
+  alt: string;
+  /** How open the frame is, 0 (shut) to 100 (flat open). */
+  value?: number;
+  /** Uncontrolled starting openness. Defaults to 0: shut. */
+  defaultValue?: number;
+  /** Called on every change: while dragging, per key press and on a release snap. */
+  onValueChange?: (value: number) => void;
+  /** Called when an interaction ends: pointer released or key press. */
+  onValueCommit?: (value: number) => void;
+  /** Settle fully open or shut when the pointer is released. */
+  snap?: boolean;
+  /** Strength of the liquid hinge refraction (blur and warp), 0–100. */
+  liquid?: number;
+  /** Perspective, tilt and shadow strength, 0–100. */
+  depth?: number;
+  /** Spine width and panel separation in px, 0–18. */
+  thickness?: number;
+  /** Corner radius in px, 0–24. */
+  corner?: number;
+  /** Accessible name of the slider. */
+  label?: string;
+  disabled?: boolean;
+}
+/** A photo folded shut like a book, opened by dragging across it or from the keyboard. */
+declare function FoldingFrame({ className, style, fill, src, alt, value: valueProp, defaultValue, onValueChange, onValueCommit, snap, liquid, depth, thickness, corner, label, disabled, dir: dirProp, ...props }: FoldingFrameProps): import("react").JSX.Element;
+//#endregion
+export { FoldingFrame, FoldingFrameProps, foldingFrameVariants };
+//# sourceMappingURL=folding-frame.d.ts.map

package/dist/components/folding-frame/folding-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"folding-frame.d.ts","names":[],"sources":["../../../src/components/folding-frame/folding-frame.tsx"],"mappings":";;;cA8CM,uBAAoB;;6CAazB;UAEgB,0BAEb,KAAK,yEACL,oBAAoB;;EAEtB;;EAEA;;EAEA;;EAEA;;EAEA,iBAAiB;;EAEjB,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;EACA;;;iBAuBc,eACd,WACA,OACA,MACA,KACA,KACA,OAAO,WACP,cACA,eACA,eACA,MACA,QACA,OACA,WACA,QACA,OACA,UACA,KAAK,YACF,SACF,oCAAiB,IAAA"}

package/dist/components/folding-frame/folding-frame.js

@@ -0,0 +1,298 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Direction } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/folding-frame/folding-frame.tsx
+/** Cover angle when shut, in degrees. */
+const SHUT = 176;
+const foldingFrameVariants = cva("[container-type:inline-size] relative aspect-[300/214] w-75 touch-pan-y select-none", {
+	variants: { fill: {
+		light: "[--ff-ink:var(--color-foreground)] [--ff-surface:var(--color-card)]",
+		dark: "[--ff-ink:var(--color-background)] [--ff-surface:var(--color-foreground)]"
+	} },
+	defaultVariants: { fill: "light" }
+});
+const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
+function valueText(value) {
+	if (value <= 0) return "Closed";
+	if (value >= 100) return "Open";
+	return `${String(value)}% open`;
+}
+/** Whether this engine renders an SVG filter inside `backdrop-filter`. */
+function supportsLiquid() {
+	if (typeof navigator === "undefined") return false;
+	const brands = navigator.userAgentData?.brands;
+	if (brands) return brands.some((entry) => entry.brand === "Chromium");
+	return /Chrom(e|ium)\//.test(navigator.userAgent);
+}
+const subscribe = () => () => {};
+/** A photo folded shut like a book, opened by dragging across it or from the keyboard. */
+function FoldingFrame({ className, style, fill, src, alt, value: valueProp, defaultValue = 0, onValueChange, onValueCommit, snap = false, liquid = 60, depth = 55, thickness = 9, corner = 14, label = "Unfold", disabled = false, dir: dirProp, ...props }) {
+	const rtl = Direction.useDirection(dirProp) === "rtl";
+	const [uncontrolled, setUncontrolled] = useState(() => Math.round(clamp(defaultValue, 0, 100)));
+	const controlled = valueProp !== void 0;
+	const value = Math.round(clamp(controlled ? valueProp : uncontrolled, 0, 100));
+	const [dragging, setDragging] = useState(false);
+	const latest = useRef(value);
+	const warpId = `ff-warp-${useId().replace(/:/g, "")}`;
+	const liquidMode = useSyncExternalStore(subscribe, () => supportsLiquid() ? "svg" : "fallback", () => "fallback");
+	function setValue(raw) {
+		const next = Math.round(clamp(raw, 0, 100));
+		latest.current = next;
+		if (next === value) return next;
+		if (!controlled) setUncontrolled(next);
+		onValueChange?.(next);
+		return next;
+	}
+	function fromPointer(event) {
+		const rect = event.currentTarget.getBoundingClientRect();
+		if (rect.width === 0) return null;
+		const along = (event.clientX - rect.left) / rect.width;
+		return 100 * (1 - ((rtl ? 1 - along : along) - .1) / .8);
+	}
+	function handlePointerDown(event) {
+		if (disabled || event.button !== 0) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		latest.current = value;
+		setDragging(true);
+	}
+	function handlePointerMove(event) {
+		if (!dragging) return;
+		const next = fromPointer(event);
+		if (next !== null) setValue(next);
+	}
+	function handlePointerEnd() {
+		if (!dragging) return;
+		setDragging(false);
+		const settled = snap ? setValue(latest.current >= 50 ? 100 : 0) : latest.current;
+		onValueCommit?.(settled);
+	}
+	function handleKeyDown(event) {
+		if (disabled) return;
+		const forward = rtl ? -5 : 5;
+		const moves = {
+			ArrowRight: forward,
+			ArrowLeft: -forward,
+			ArrowUp: 5,
+			ArrowDown: -5,
+			PageUp: 25,
+			PageDown: -25
+		};
+		let next;
+		if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = 100;
+		else if (event.key in moves) next = value + (moves[event.key] ?? 0);
+		else return;
+		event.preventDefault();
+		const committed = setValue(next);
+		onValueCommit?.(committed);
+	}
+	const closed = 1 - value / 100;
+	const angle = SHUT * closed;
+	const side = rtl ? -1 : 1;
+	const strength = clamp(depth, 0, 100) / 55;
+	const t = clamp(thickness, 0, 18);
+	const r = clamp(corner, 0, 24);
+	const wet = clamp(liquid, 0, 100) / 60;
+	const shade = .4 * Math.min(1, angle / 55, (SHUT - angle) / 76) * Math.min(strength, 1.6);
+	const cast = clamp(.55 * closed * strength, 0, 1);
+	const blur = 6.6 * closed * wet;
+	const sheen = `brightness(${(1 + .26 * closed * Math.min(wet, 1)).toFixed(3)})`;
+	const ease = dragging ? "none" : "transform var(--duration-slow) var(--ease-out-quint), opacity var(--duration-slow) var(--ease-out-quint), width var(--duration-slow) var(--ease-out-quint)";
+	const ink = (percent) => `color-mix(in oklab, var(--ff-ink) ${String(percent)}%, transparent)`;
+	const dark = (percent) => `color-mix(in oklab, var(--color-overlay) ${String(Math.min(100, Math.round(percent * 1.6)))}%, transparent)`;
+	const towardHinge = rtl ? "to left" : "to right";
+	const coverRadius = rtl ? `0 ${String(r)}px ${String(r)}px 0` : `${String(r)}px 0 0 ${String(r)}px`;
+	const restRadius = rtl ? `${String(r)}px 0 0 ${String(r)}px` : `0 ${String(r)}px ${String(r)}px 0`;
+	const coverLeft = rtl ? "50%" : "0";
+	const restLeft = rtl ? "0" : "50%";
+	const half = {
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		width: "50%",
+		transformStyle: "preserve-3d"
+	};
+	const face = {
+		position: "absolute",
+		inset: 0,
+		overflow: "hidden",
+		backfaceVisibility: "hidden",
+		background: "var(--ff-surface)"
+	};
+	const photo = (showStart, opacity = 1) => /* @__PURE__ */ jsx("img", {
+		src,
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			top: 0,
+			left: showStart === !rtl ? "0" : "-100%",
+			width: "200%",
+			height: "100%",
+			maxWidth: "none",
+			objectFit: "cover",
+			opacity
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "folding-frame",
+		"data-state": value >= 100 ? "open" : value <= 0 ? "closed" : "partial",
+		"data-dragging": dragging ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		"data-liquid": liquidMode,
+		dir: dirProp,
+		className: cn(foldingFrameVariants({ fill }), disabled && "opacity-55", className),
+		style,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				width: "0",
+				height: "0",
+				"aria-hidden": "true",
+				className: "absolute",
+				children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: warpId,
+					children: [/* @__PURE__ */ jsx("feTurbulence", {
+						type: "fractalNoise",
+						baseFrequency: "0.012 0.06",
+						numOctaves: 2,
+						seed: 3,
+						result: "noise"
+					}), /* @__PURE__ */ jsx("feDisplacementMap", {
+						in: "SourceGraphic",
+						in2: "noise",
+						scale: (18 * wet).toFixed(2),
+						xChannelSelector: "R",
+						yChannelSelector: "G"
+					})]
+				}) })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "img",
+				"aria-label": alt,
+				"data-slot": "folding-frame-stage",
+				className: "absolute inset-0",
+				style: { perspective: `${(300 / Math.max(strength, .3)).toFixed(1)}cqi` },
+				children: /* @__PURE__ */ jsxs("div", {
+					"data-slot": "folding-frame-rig",
+					className: "absolute inset-0",
+					style: {
+						transformStyle: "preserve-3d",
+						transition: ease,
+						transform: `translateX(${(-25 * closed * side).toFixed(3)}%) rotateX(${(-15 * closed * strength).toFixed(3)}deg) rotateY(${(13 * closed * strength * side).toFixed(3)}deg)`
+					},
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "folding-frame-spine",
+							className: "absolute inset-y-0",
+							style: {
+								left: "50%",
+								width: t,
+								borderRadius: t / 2,
+								background: `linear-gradient(to right, ${ink(50)}, ${ink(82)}, ${ink(62)})`,
+								transform: `translateX(-50%) translateZ(${String(-t / 2)}px)`
+							}
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "folding-frame-rest",
+							style: {
+								...half,
+								left: restLeft,
+								transform: `translateZ(${String(-t / 2)}px)`
+							},
+							children: /* @__PURE__ */ jsxs("div", {
+								style: {
+									...face,
+									borderRadius: restRadius
+								},
+								children: [photo(false), /* @__PURE__ */ jsx("div", {
+									"data-slot": "folding-frame-cast",
+									className: "absolute inset-0",
+									style: {
+										opacity: cast,
+										transition: ease,
+										background: `linear-gradient(${towardHinge}, ${dark(62)}, ${dark(6)})`
+									}
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							"data-slot": "folding-frame-cover",
+							style: {
+								...half,
+								left: coverLeft,
+								transformOrigin: rtl ? "left center" : "right center",
+								transition: ease,
+								transform: `rotateY(${(angle * side).toFixed(3)}deg) translateZ(${String(-t / 2)}px)`
+							},
+							children: [/* @__PURE__ */ jsxs("div", {
+								style: {
+									...face,
+									borderRadius: coverRadius
+								},
+								children: [photo(true), /* @__PURE__ */ jsx("div", {
+									"data-slot": "folding-frame-shade",
+									className: "absolute inset-0",
+									style: {
+										opacity: shade,
+										transition: ease,
+										background: `linear-gradient(${towardHinge}, transparent, ${dark(50)})`
+									}
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								"data-slot": "folding-frame-back",
+								style: {
+									...face,
+									borderRadius: coverRadius,
+									transform: "rotateY(180deg)",
+									background: "color-mix(in oklab, var(--ff-surface) 82%, var(--ff-ink))"
+								},
+								children: photo(false, .5)
+							})]
+						}),
+						wet > 0 ? /* @__PURE__ */ jsx("div", {
+							"data-slot": "folding-frame-liquid",
+							className: "pointer-events-none absolute inset-y-0",
+							style: {
+								left: "50%",
+								width: `${(11.67 * closed * wet).toFixed(3)}cqi`,
+								transition: ease,
+								transform: `translateX(-50%) translateZ(${String(t / 2 + 1)}px)`,
+								maskImage: "linear-gradient(to right, transparent, currentColor 30%, currentColor 70%, transparent)",
+								backdropFilter: liquidMode === "svg" ? `blur(${blur.toFixed(2)}px) ${sheen} url(#${warpId})` : `blur(${blur.toFixed(2)}px) ${sheen}`,
+								WebkitBackdropFilter: `blur(${blur.toFixed(2)}px) ${sheen}`
+							}
+						}) : null
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "slider",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": label,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": value,
+				"aria-valuetext": valueText(value),
+				"aria-orientation": "horizontal",
+				"aria-disabled": disabled || void 0,
+				"data-slot": "folding-frame-handle",
+				className: cn("absolute inset-0 z-10", disabled ? "cursor-not-allowed" : "cursor-grab active:cursor-grabbing", focusRing),
+				style: { borderRadius: r },
+				onKeyDown: handleKeyDown,
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: handlePointerEnd,
+				onPointerCancel: handlePointerEnd
+			})
+		]
+	});
+}
+//#endregion
+export { FoldingFrame, foldingFrameVariants };
+
+//# sourceMappingURL=folding-frame.js.map