@krizaka/ui 3.19.0 → 3.21.0

package/dist/file-upload.js

@@ -29,8 +29,8 @@ var progress = tv({
     center: "absolute inset-0 flex flex-col items-center justify-center text-center",
     buffer: "absolute inset-y-0 left-0 -z-10 rounded-full bg-accent/25 transition-[width] duration-500 motion-reduce:transition-none",
     frame: "flex w-full flex-col gap-1.5",
-    header: "flex items-baseline gap-2 text-xs",
-    caption: "min-w-0 flex-1 truncate font-medium text-fg",
+    header: "flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs",
+    caption: "max-w-full shrink-0 grow truncate font-medium text-fg",
     figure: "shrink-0 tabular-nums text-fg-secondary"
   },
   variants: {

package/dist/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/file-upload/file-upload.tsx","../src/progress/progress.tsx"],"sourcesContent":["// Client. Three parts that work alone or together:\n// - `Dropzone`: drop files on it or pick them with its button (a real `<input type=\"file\">`, so the keyboard and the\n//   phone's camera / files sheet work); it checks the type, the size and the count, and hands over the accepted files\n//   and the refused ones with their reason;\n// - `UploadList`: each file with its preview, size, progress, speed, and the actions its state allows (pause, resume,\n//   retry, cancel, remove); the progress is a `progressbar`, a failure is announced;\n// - `useUploadQueue`: runs the app's `upload(file, { signal, onProgress, resumed })` with a concurrency, pauses by\n//   aborting the signal and resumes by calling it again with `resumed: true` — what a Tus client (tus-js-client's\n//   `abort()` / `start()`) or a multipart upload needs, without depending on either. The line (concurrency, retries\n//   with backoff, pause per file) is `createQueue` of @krizaka/pacer.\nimport { getNumberFormat } from \"@krizaka/intl\";\nimport { type QueueOptions } from \"@krizaka/pacer\";\nimport { useQueue, useQueueSnapshot } from \"@krizaka/pacer/react\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CloseGlyph, FileGlyph, PauseGlyph, PlayGlyph, RetryGlyph, UploadGlyph } from \"../glyphs\";\nimport { useLatest } from \"../media\";\nimport { Progress } from \"../progress\";\n\nexport const fileUpload = tv({\n  slots: {\n    zone:\n      \"relative flex w-full flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed border-border-default bg-surface-1 px-6 py-10 text-center \" +\n      \"transition-colors data-[dragging]:border-accent data-[dragging]:bg-accent-soft data-[disabled]:opacity-50 has-[:focus-visible]:border-accent\",\n    zoneIcon: \"flex h-12 w-12 items-center justify-center rounded-full bg-surface-3 text-fg-secondary\",\n    zoneTitle: \"text-sm font-semibold text-fg\",\n    zoneHint: \"text-xs text-fg-secondary\",\n    browse:\n      \"inline-flex h-9 items-center justify-center rounded-lg bg-accent px-4 text-sm font-semibold text-on-accent transition-colors hover:bg-accent-hover \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none\",\n    refusals: \"w-full text-left text-xs font-medium text-fg-danger\",\n    list: \"flex w-full flex-col gap-2\",\n    item: \"flex items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-3 data-[status=error]:border-danger/60\",\n    preview: \"flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-surface-3 text-fg-secondary\",\n    body: \"flex min-w-0 flex-1 flex-col gap-1.5\",\n    name: \"truncate text-sm font-semibold text-fg\",\n    meta: \"flex flex-wrap gap-x-2 text-xs tabular-nums text-fg-secondary\",\n    error: \"text-xs font-medium text-fg-danger\",\n    actions: \"flex shrink-0 items-center gap-1\",\n    action:\n      \"inline-flex h-8 w-8 items-center justify-center rounded-md text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\n/** Why a file was refused. */\nexport type FileRejection = { file: File; reason: \"type\" | \"size\" | \"count\" };\n\n/** Whether a file matches an `accept` list (`\"video/*,.mov,image/png\"`). */\nexport function acceptsFile(file: File, accept?: string): boolean {\n  if (!accept) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return accept\n    .split(\",\")\n    .map((rule) => rule.trim().toLowerCase())\n    .filter(Boolean)\n    .some((rule) => (rule.startsWith(\".\") ? name.endsWith(rule) : rule.endsWith(\"/*\") ? type.startsWith(rule.slice(0, -1)) : type === rule));\n}\n\n/** A size in the locale's words (`\"1.4 GB\"`, `\"820 kB\"`), through `@krizaka/intl`. */\nexport function formatBytes(bytes: number, locale = \"en\"): string {\n  const units = [\"byte\", \"kilobyte\", \"megabyte\", \"gigabyte\", \"terabyte\"] as const;\n  let value = Math.max(0, bytes);\n  let unit = 0;\n  while (value >= 1000 && unit < units.length - 1) {\n    value /= 1000;\n    unit += 1;\n  }\n  return getNumberFormat(locale, { style: \"unit\", unit: units[unit], unitDisplay: \"short\", maximumFractionDigits: value < 10 && unit > 0 ? 1 : 0 }).format(value);\n}\n\nexport type DropzoneProps = {\n  /** The title in the zone (\"Drop your video here\"), passed translated. */\n  title: string;\n  /** The button that opens the file picker (\"Choose a file\"), passed translated. */\n  browseLabel: string;\n  /** What is accepted, in words (\"MP4 or MOV, up to 4 GB\"). */\n  hint?: string;\n  /** The types accepted, as the `accept` attribute (`\"video/*\"`, `\"image/png,.pdf\"`). */\n  accept?: string;\n  /** The largest file, in bytes. */\n  maxSize?: number;\n  /** The most files at once (1 unless `multiple`). */\n  maxFiles?: number;\n  /** Several files at once. */\n  multiple?: boolean;\n  /** Not available (an upload is running). */\n  disabled?: boolean;\n  /** On a phone, opens the camera directly (`\"environment\"` the back one, `\"user\"` the front one). */\n  capture?: \"user\" | \"environment\";\n  /** Called with the files accepted (never empty). */\n  onFiles: (files: File[]) => void;\n  /** Called with the files refused and why (show `refusalLabel`'s words, or your own). */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** The words of a refusal, shown in the zone: `(r) => r.file.name + \" is too large\"`. Without it, nothing is shown. */\n  refusalLabel?: (rejection: FileRejection) => string;\n  /** An icon instead of the upload glyph. */\n  icon?: React.ReactNode;\n  /** Classes merged on the zone. */\n  className?: string;\n};\n\n/** A zone to drop files on, with a button that opens the picker: checks type, size and count. */\nexport function Dropzone({\n  title,\n  browseLabel,\n  hint,\n  accept,\n  maxSize,\n  maxFiles,\n  multiple,\n  disabled,\n  capture,\n  onFiles,\n  onReject,\n  refusalLabel,\n  icon,\n  className,\n}: DropzoneProps) {\n  const s = fileUpload();\n  const input = React.useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const [refused, setRefused] = React.useState<FileRejection[]>([]);\n  const depth = React.useRef(0);\n  const id = React.useId();\n  const limit = maxFiles ?? (multiple ? Infinity : 1);\n\n  const take = (list: FileList | File[]) => {\n    const files = [...list];\n    const accepted: File[] = [];\n    const rejections: FileRejection[] = [];\n    for (const file of files) {\n      if (!acceptsFile(file, accept)) rejections.push({ file, reason: \"type\" });\n      else if (maxSize !== undefined && file.size > maxSize) rejections.push({ file, reason: \"size\" });\n      else if (accepted.length >= limit) rejections.push({ file, reason: \"count\" });\n      else accepted.push(file);\n    }\n    setRefused(rejections);\n    if (accepted.length) onFiles(accepted);\n    if (rejections.length) onReject?.(rejections);\n  };\n\n  return (\n    <div\n      className={s.zone({ className })}\n      data-dragging={dragging ? \"\" : undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      onDragEnter={(event) => {\n        if (disabled) return;\n        event.preventDefault();\n        depth.current += 1;\n        setDragging(true);\n      }}\n      onDragOver={(event) => {\n        if (disabled) return;\n        event.preventDefault();\n        event.dataTransfer.dropEffect = \"copy\";\n      }}\n      onDragLeave={() => {\n        depth.current = Math.max(0, depth.current - 1);\n        if (depth.current === 0) setDragging(false);\n      }}\n      onDrop={(event) => {\n        if (disabled) return;\n        event.preventDefault();\n        depth.current = 0;\n        setDragging(false);\n        take(event.dataTransfer.files);\n      }}\n    >\n      <span className={s.zoneIcon()} aria-hidden>\n        {icon ?? <UploadGlyph className=\"h-6 w-6\" />}\n      </span>\n      <p id={`${id}-title`} className={s.zoneTitle()}>\n        {title}\n      </p>\n      {hint ? (\n        <p id={`${id}-hint`} className={s.zoneHint()}>\n          {hint}\n        </p>\n      ) : null}\n      <button\n        type=\"button\"\n        className={s.browse()}\n        disabled={disabled}\n        aria-describedby={[`${id}-title`, hint ? `${id}-hint` : null].filter(Boolean).join(\" \")}\n        onClick={() => input.current?.click()}\n      >\n        {browseLabel}\n      </button>\n      <input\n        ref={input}\n        type=\"file\"\n        tabIndex={-1}\n        aria-hidden\n        className=\"sr-only\"\n        accept={accept}\n        multiple={multiple}\n        capture={capture}\n        disabled={disabled}\n        onChange={(event) => {\n          if (event.target.files?.length) take(event.target.files);\n          event.target.value = \"\";\n        }}\n      />\n      {refusalLabel && refused.length > 0 ? (\n        <ul role=\"alert\" className={s.refusals()}>\n          {refused.map((r) => (\n            <li key={`${r.file.name}-${r.reason}`}>{refusalLabel(r)}</li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n\nexport type UploadStatus = \"queued\" | \"uploading\" | \"paused\" | \"done\" | \"error\";\n\nexport type UploadItem = {\n  /** A stable id. */\n  id: string;\n  /** The file's name. */\n  name: string;\n  /** Its size, in bytes. */\n  size: number;\n  /** Its MIME type (`video/mp4`): picks the preview. */\n  type?: string;\n  /** Sent so far, between 0 and 1. */\n  progress: number;\n  /** Where it stands. */\n  status: UploadStatus;\n  /** Why it failed, passed translated. */\n  error?: string;\n  /** A preview (an object URL of the file, a thumbnail from the server). */\n  previewUrl?: string;\n  /** Bytes per second, for the speed and the time left. */\n  speed?: number;\n};\n\nexport type UploadListLabels = {\n  /** The list's accessible name (\"Uploads\"). */\n  list: string;\n  pause: (name: string) => string;\n  resume: (name: string) => string;\n  retry: (name: string) => string;\n  cancel: (name: string) => string;\n  remove: (name: string) => string;\n  /** A state in words: `(status) => \"Paused\"`… */\n  status: (status: UploadStatus) => string;\n  /** The time left: `(seconds) => \"2 min left\"`. */\n  remaining: (seconds: number) => string;\n};\n\nexport const uploadListLabels: UploadListLabels = {\n  list: \"Uploads\",\n  pause: (name) => `Pause ${name}`,\n  resume: (name) => `Resume ${name}`,\n  retry: (name) => `Retry ${name}`,\n  cancel: (name) => `Cancel ${name}`,\n  remove: (name) => `Remove ${name}`,\n  status: (status) => ({ queued: \"Waiting\", uploading: \"Uploading\", paused: \"Paused\", done: \"Uploaded\", error: \"Failed\" })[status],\n  remaining: (seconds) => (seconds < 60 ? `${Math.ceil(seconds)} s left` : `${Math.ceil(seconds / 60)} min left`),\n};\n\nexport type UploadListProps = {\n  /** The uploads, as `useUploadQueue` gives them (or your own state). */\n  items: readonly UploadItem[];\n  /** Pauses an upload (shown while it uploads, when given). */\n  onPause?: (id: string) => void;\n  /** Resumes a paused one. */\n  onResume?: (id: string) => void;\n  /** Tries a failed one again. */\n  onRetry?: (id: string) => void;\n  /** Stops an upload under way and drops it. */\n  onCancel?: (id: string) => void;\n  /** Drops a finished or failed one from the list. */\n  onRemove?: (id: string) => void;\n  /** The locale of sizes and speeds. Default `\"en\"`. */\n  locale?: string;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<UploadListLabels>;\n  /** Classes merged on the list. */\n  className?: string;\n};\n\nfunction Preview({ item }: { item: UploadItem }) {\n  if (item.previewUrl && item.type?.startsWith(\"image/\")) return <img src={item.previewUrl} alt=\"\" className=\"h-full w-full object-cover\" />;\n  if (item.previewUrl && item.type?.startsWith(\"video/\")) return <video src={item.previewUrl} muted playsInline preload=\"metadata\" className=\"h-full w-full object-cover\" aria-hidden />;\n  return <FileGlyph className=\"h-5 w-5\" />;\n}\n\n/** The files being sent: preview, size, progress, speed and time left, and the actions each state allows. */\nexport function UploadList({ items, onPause, onResume, onRetry, onCancel, onRemove, locale = \"en\", labels: given, className }: UploadListProps) {\n  const labels = { ...uploadListLabels, ...given };\n  const s = fileUpload();\n  const action = (label: string, run: () => void, glyph: React.ReactNode) => (\n    <button type=\"button\" className={s.action()} aria-label={label} title={label} onClick={run}>\n      {glyph}\n    </button>\n  );\n  return (\n    <ul aria-label={labels.list} className={s.list({ className })}>\n      {items.map((item) => {\n        const left = item.status === \"uploading\" && item.speed ? ((1 - item.progress) * item.size) / item.speed : null;\n        return (\n          <li key={item.id} className={s.item()} data-status={item.status}>\n            <span className={s.preview()}>\n              <Preview item={item} />\n            </span>\n            <div className={s.body()}>\n              <p className={s.name()}>{item.name}</p>\n              {item.status !== \"done\" && item.status !== \"error\" ? (\n                <Progress size=\"sm\" label={item.name} value={item.status === \"queued\" ? null : Math.round(item.progress * 100)} />\n              ) : null}\n              <p className={s.meta()}>\n                <span>{labels.status(item.status)}</span>\n                <span>{item.status === \"done\" ? formatBytes(item.size, locale) : `${formatBytes(item.progress * item.size, locale)} / ${formatBytes(item.size, locale)}`}</span>\n                {item.status === \"uploading\" && item.speed ? <span>{formatBytes(item.speed, locale)}/s</span> : null}\n                {left !== null ? <span>{labels.remaining(left)}</span> : null}\n              </p>\n              {item.status === \"error\" && item.error ? (\n                <p role=\"alert\" className={s.error()}>\n                  {item.error}\n                </p>\n              ) : null}\n            </div>\n            <div className={s.actions()}>\n              {item.status === \"uploading\" && onPause && action(labels.pause(item.name), () => onPause(item.id), <PauseGlyph className=\"h-4 w-4\" />)}\n              {item.status === \"paused\" && onResume && action(labels.resume(item.name), () => onResume(item.id), <PlayGlyph className=\"h-4 w-4\" />)}\n              {item.status === \"error\" && onRetry && action(labels.retry(item.name), () => onRetry(item.id), <RetryGlyph className=\"h-4 w-4\" />)}\n              {(item.status === \"done\" || item.status === \"error\") && onRemove\n                ? action(labels.remove(item.name), () => onRemove(item.id), <CloseGlyph className=\"h-4 w-4\" />)\n                : item.status !== \"done\" && onCancel\n                  ? action(labels.cancel(item.name), () => onCancel(item.id), <CloseGlyph className=\"h-4 w-4\" />)\n                  : null}\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nexport type UploadContext = {\n  /** Aborted on pause and cancel: stop sending (`tusUpload.abort()`, `xhr.abort()`). */\n  signal: AbortSignal;\n  /** Report the bytes sent so far. */\n  onProgress: (sent: number) => void;\n  /** `true` when this call resumes a paused or failed upload (a Tus client then continues from its offset). */\n  resumed: boolean;\n};\n\nexport type UploadQueueOptions = {\n  /** Sends one file; resolves when it is done, rejects on failure (its `message` becomes the item's error). */\n  upload: (file: File, context: UploadContext) => Promise<void>;\n  /** How many files go at once. Default 2. */\n  concurrency?: number;\n  /** How many times a failed upload is tried again by itself (with `backoff`) before it shows its error. Default 0. */\n  retries?: number;\n  /** The wait between retries: exponential from 1 s by default (`@krizaka/pacer`). */\n  backoff?: QueueOptions[\"backoff\"];\n  /** Whether an error deserves another try (a 4xx never does). Default: every error does, up to `retries`. */\n  shouldRetry?: QueueOptions[\"shouldRetry\"];\n  /** Makes an object URL for each file to preview (revoked when it leaves). Default `true`. */\n  previews?: boolean;\n};\n\n/** What the screen reads of an upload besides its status: the file, how far it got, how fast. */\ntype UploadMeta = { file: File; progress: number; speed?: number; previewUrl?: string; last?: { at: number; sent: number } };\n\n/**\n * The state of an upload queue around the app's `upload` function: `add`, `pause`, `resume`, `retry`, `cancel`, `remove`.\n * The line itself — concurrency, retries with backoff, pause by aborting the signal — is `createQueue` of\n * `@krizaka/pacer`; this hook adds the files, their previews, their progress and their speed.\n */\nexport function useUploadQueue(options: UploadQueueOptions) {\n  const { concurrency, retries, backoff, shouldRetry } = options;\n  const latest = useLatest(options);\n  const queue = useQueue<UploadMeta>({ concurrency: concurrency ?? 2, retries, backoff, shouldRetry });\n  const jobs = useQueueSnapshot(queue);\n  const metas = useLatest(new Map(jobs.map((job) => [job.id, job.meta])));\n\n  const add = React.useCallback(\n    (files: readonly File[]) => {\n      const { previews = true } = latest.current;\n      for (const file of files) {\n        const id = `${file.name}-${file.size}-${Math.random().toString(36).slice(2, 8)}`;\n        const previewUrl = previews && typeof URL.createObjectURL === \"function\" ? URL.createObjectURL(file) : undefined;\n        queue.add(\n          async ({ signal, resumed }) => {\n            queue.update(id, (m) => ({ ...m, last: { at: Date.now(), sent: m.progress * file.size } }));\n            try {\n              await latest.current.upload(file, {\n                signal,\n                resumed,\n                onProgress: (sent) => {\n                  if (signal.aborted) return;\n                  queue.update(id, (m) => {\n                    const now = Date.now();\n                    const last = m.last ?? { at: now, sent };\n                    const fresh = now - last.at > 400;\n                    return { ...m, progress: file.size ? Math.min(1, sent / file.size) : 0, speed: fresh ? ((sent - last.sent) / (now - last.at)) * 1000 : m.speed, last: fresh ? { at: now, sent } : last };\n                  });\n                },\n              });\n              if (!signal.aborted) queue.update(id, (m) => ({ ...m, progress: 1, speed: undefined }));\n            } catch (error) {\n              if (!signal.aborted) queue.update(id, (m) => ({ ...m, speed: undefined }));\n              throw error;\n            }\n          },\n          { id, meta: { file, progress: 0, previewUrl } },\n        );\n      }\n    },\n    [latest, queue],\n  );\n  const forget = React.useCallback(\n    (id: string) => {\n      const url = metas.current.get(id)?.previewUrl;\n      if (url) URL.revokeObjectURL(url);\n      queue.cancel(id);\n    },\n    [metas, queue],\n  );\n  React.useEffect(\n    () => () => {\n      for (const meta of metas.current.values()) if (meta.previewUrl) URL.revokeObjectURL(meta.previewUrl);\n    },\n    [metas],\n  );\n  const pause = React.useCallback(\n    (id: string) => {\n      queue.pause(id);\n      queue.update(id, (m) => ({ ...m, speed: undefined }));\n    },\n    [queue],\n  );\n\n  const items = React.useMemo<UploadItem[]>(\n    () =>\n      jobs.map(({ id, status, error, meta }) => ({\n        id,\n        name: meta.file.name,\n        size: meta.file.size,\n        type: meta.file.type,\n        progress: meta.progress,\n        status: status === \"running\" ? \"uploading\" : status,\n        error: error?.message,\n        previewUrl: meta.previewUrl,\n        speed: status === \"running\" ? meta.speed : undefined,\n      })),\n    [jobs],\n  );\n  return { items, add, pause, resume: queue.resume, retry: queue.retry, cancel: forget, remove: forget };\n}\n","// Server-safe: no hook, no context. role=\"progressbar\" with aria-valuenow / aria-valuemax (none when indeterminate),\n// named by `label`. A bar or a ring; the ring can hold content in its centre (an amount, a percentage).\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const progress = tv({\n  slots: {\n    root: \"relative\",\n    track: \"\",\n    indicator: \"\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n    buffer: \"absolute inset-y-0 left-0 -z-10 rounded-full bg-accent/25 transition-[width] duration-500 motion-reduce:transition-none\",\n    frame: \"flex w-full flex-col gap-1.5\",\n    header: \"flex items-baseline gap-2 text-xs\",\n    caption: \"min-w-0 flex-1 truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n  },\n  variants: {\n    variant: {\n      bar: {\n        root: \"relative isolate w-full overflow-hidden rounded-full bg-surface-3\",\n        indicator:\n          \"kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:w-2/5\",\n      },\n      ring: {\n        root: \"inline-flex shrink-0 items-center justify-center\",\n        track: \"stroke-border-default\",\n        indicator:\n          \"stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none\",\n      },\n    },\n    size: { sm: {}, md: {}, lg: {} },\n    status: {\n      active: {},\n      // Paused: the fill rests, striped — the task is waiting for someone, not broken.\n      paused: { indicator: \"kz-progress-paused opacity-70\" },\n      // Failed: the fill turns to the danger colour where it stopped.\n      error: { indicator: \"from-danger to-danger stroke-danger\" },\n    },\n  },\n  compoundVariants: [\n    { variant: \"bar\", size: \"sm\", class: { root: \"h-1\" } },\n    { variant: \"bar\", size: \"md\", class: { root: \"h-2\" } },\n    { variant: \"bar\", size: \"lg\", class: { root: \"h-3\" } },\n    { variant: \"ring\", size: \"sm\", class: { root: \"h-10 w-10\" } },\n    { variant: \"ring\", size: \"md\", class: { root: \"h-20 w-20\" } },\n    { variant: \"ring\", size: \"lg\", class: { root: \"h-36 w-36\" } },\n  ],\n  defaultVariants: { variant: \"bar\", size: \"md\", status: \"active\" },\n});\n\nexport type ProgressVariants = VariantProps<typeof progress>;\n\nexport type ProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> &\n  ProgressVariants & {\n    /** bar · ring (a ring holds its `children` in the centre). */\n    variant?: ProgressVariants[\"variant\"];\n    /** sm · md · lg: the bar's thickness, the ring's diameter. */\n    size?: ProgressVariants[\"size\"];\n    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */\n    value?: number | null;\n    /** The value that means complete. */\n    max?: number;\n    /** The accessible name — passed translated (\"Upload\", \"Raised towards the goal\"). */\n    label: string;\n    /** The value in words for assistive technology (\"$420 of $1,000\") — default: the percentage. */\n    valueText?: string;\n    /** A ring's centre: an amount, a percentage, an icon. */\n    children?: React.ReactNode;\n    /** How far is already available beyond the value (a video buffered ahead), between 0 and `max` — bar only. */\n    buffer?: number;\n    /** Splits the bar or the ring into this many segments: the steps of a task, the parts of a goal. */\n    segments?: number;\n    /**\n     * active · paused (the fill rests, striped: waiting for someone) · error (the fill turns to the danger colour where it stopped).\n     * @default \"active\"\n     */\n    status?: ProgressVariants[\"status\"];\n    /** Shows the label above the bar, with the percentage (or `valueText`) and `eta` — bar only. */\n    showLabel?: boolean;\n    /** The time left, in words (“About 2 min left”), shown with `showLabel` and read with the value — passed translated. */\n    eta?: string;\n  };\n\nconst STROKE = { sm: 12, md: 9, lg: 7 } as const;\n\n/** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */\nexport function Progress({\n  variant = \"bar\",\n  size = \"md\",\n  value,\n  max = 100,\n  label,\n  valueText,\n  className,\n  children,\n  buffer,\n  segments,\n  status = \"active\",\n  showLabel,\n  eta,\n  ...props\n}: ProgressProps) {\n  const s = progress({ variant, size, status });\n  const maskId = `kz-seg-${React.useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;\n  const percent = Math.round(ratio * 100);\n  const state = !known ? \"indeterminate\" : ratio >= 1 ? \"complete\" : \"loading\";\n  const aria = {\n    role: \"progressbar\" as const,\n    \"aria-label\": label,\n    \"aria-valuemin\": known ? 0 : undefined,\n    \"aria-valuemax\": known ? max : undefined,\n    \"aria-valuenow\": known ? Math.min(max, Math.max(0, value)) : undefined,\n    \"aria-valuetext\": [known ? (valueText ?? `${percent}%`) : valueText, eta].filter(Boolean).join(\", \") || undefined,\n    \"data-state\": state,\n    \"data-status\": status === \"active\" ? undefined : status,\n    \"data-value\": known ? value : undefined,\n    \"data-variant\": variant,\n  };\n  if (variant === \"ring\") {\n    const stroke = STROKE[size];\n    const r = 50 - stroke / 2;\n    return (\n      <div {...aria} className={s.root({ className })} {...props}>\n        <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n          {segments && segments > 1 && (\n            <mask id={maskId}>\n              <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" stroke=\"white\" strokeWidth={stroke + 2} pathLength={100} strokeDasharray={`${100 / segments - 2} 2`} />\n            </mask>\n          )}\n          <g mask={segments && segments > 1 ? `url(#${maskId})` : undefined}>\n          <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth={stroke} className={s.track()} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={known ? 100 - percent : 75}\n            data-state={state}\n            className={s.indicator()}\n          />\n          </g>\n        </svg>\n        {children !== undefined && <div className={s.center()}>{children}</div>}\n      </div>\n    );\n  }\n  const segmented = segments && segments > 1 ? ({ \"--kz-segments\": segments } as React.CSSProperties) : undefined;\n  const bufferRatio = typeof buffer === \"number\" && Number.isFinite(buffer) ? Math.min(1, Math.max(0, buffer / (max || 1))) : null;\n  const bar = (\n    <div {...aria} className={s.root({ className: [segmented && \"kz-progress-segmented\", className].filter(Boolean).join(\" \") || undefined })} style={segmented} {...props}>\n      <div data-state={state} className={s.indicator()} style={known ? { width: `${ratio * 100}%` } : undefined} />\n      {bufferRatio !== null && <div aria-hidden className={s.buffer()} style={{ width: `${bufferRatio * 100}%` }} />}\n    </div>\n  );\n  if (!showLabel) return bar;\n  const figure = [known ? (valueText ?? `${percent} %`) : valueText, eta].filter(Boolean).join(\" · \");\n  return (\n    <div className={s.frame()}>\n      <div aria-hidden className={s.header()}>\n        <span className={s.caption()}>{label}</span>\n        {figure && <span className={s.figure()}>{figure}</span>}\n      </div>\n      {bar}\n    </div>\n  );\n}\n"],"mappings":"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","names":["React","tv","jsx","jsxs","tv"]}
+{"version":3,"sources":["../src/file-upload/file-upload.tsx","../src/progress/progress.tsx"],"sourcesContent":["// Client. Three parts that work alone or together:\n// - `Dropzone`: drop files on it or pick them with its button (a real `<input type=\"file\">`, so the keyboard and the\n//   phone's camera / files sheet work); it checks the type, the size and the count, and hands over the accepted files\n//   and the refused ones with their reason;\n// - `UploadList`: each file with its preview, size, progress, speed, and the actions its state allows (pause, resume,\n//   retry, cancel, remove); the progress is a `progressbar`, a failure is announced;\n// - `useUploadQueue`: runs the app's `upload(file, { signal, onProgress, resumed })` with a concurrency, pauses by\n//   aborting the signal and resumes by calling it again with `resumed: true` — what a Tus client (tus-js-client's\n//   `abort()` / `start()`) or a multipart upload needs, without depending on either. The line (concurrency, retries\n//   with backoff, pause per file) is `createQueue` of @krizaka/pacer.\nimport { getNumberFormat } from \"@krizaka/intl\";\nimport { type QueueOptions } from \"@krizaka/pacer\";\nimport { useQueue, useQueueSnapshot } from \"@krizaka/pacer/react\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CloseGlyph, FileGlyph, PauseGlyph, PlayGlyph, RetryGlyph, UploadGlyph } from \"../glyphs\";\nimport { useLatest } from \"../media\";\nimport { Progress } from \"../progress\";\n\nexport const fileUpload = tv({\n  slots: {\n    zone:\n      \"relative flex w-full flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed border-border-default bg-surface-1 px-6 py-10 text-center \" +\n      \"transition-colors data-[dragging]:border-accent data-[dragging]:bg-accent-soft data-[disabled]:opacity-50 has-[:focus-visible]:border-accent\",\n    zoneIcon: \"flex h-12 w-12 items-center justify-center rounded-full bg-surface-3 text-fg-secondary\",\n    zoneTitle: \"text-sm font-semibold text-fg\",\n    zoneHint: \"text-xs text-fg-secondary\",\n    browse:\n      \"inline-flex h-9 items-center justify-center rounded-lg bg-accent px-4 text-sm font-semibold text-on-accent transition-colors hover:bg-accent-hover \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none\",\n    refusals: \"w-full text-left text-xs font-medium text-fg-danger\",\n    list: \"flex w-full flex-col gap-2\",\n    item: \"flex items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-3 data-[status=error]:border-danger/60\",\n    preview: \"flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-surface-3 text-fg-secondary\",\n    body: \"flex min-w-0 flex-1 flex-col gap-1.5\",\n    name: \"truncate text-sm font-semibold text-fg\",\n    meta: \"flex flex-wrap gap-x-2 text-xs tabular-nums text-fg-secondary\",\n    error: \"text-xs font-medium text-fg-danger\",\n    actions: \"flex shrink-0 items-center gap-1\",\n    action:\n      \"inline-flex h-8 w-8 items-center justify-center rounded-md text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\n/** Why a file was refused. */\nexport type FileRejection = { file: File; reason: \"type\" | \"size\" | \"count\" };\n\n/** Whether a file matches an `accept` list (`\"video/*,.mov,image/png\"`). */\nexport function acceptsFile(file: File, accept?: string): boolean {\n  if (!accept) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return accept\n    .split(\",\")\n    .map((rule) => rule.trim().toLowerCase())\n    .filter(Boolean)\n    .some((rule) => (rule.startsWith(\".\") ? name.endsWith(rule) : rule.endsWith(\"/*\") ? type.startsWith(rule.slice(0, -1)) : type === rule));\n}\n\n/** A size in the locale's words (`\"1.4 GB\"`, `\"820 kB\"`), through `@krizaka/intl`. */\nexport function formatBytes(bytes: number, locale = \"en\"): string {\n  const units = [\"byte\", \"kilobyte\", \"megabyte\", \"gigabyte\", \"terabyte\"] as const;\n  let value = Math.max(0, bytes);\n  let unit = 0;\n  while (value >= 1000 && unit < units.length - 1) {\n    value /= 1000;\n    unit += 1;\n  }\n  return getNumberFormat(locale, { style: \"unit\", unit: units[unit], unitDisplay: \"short\", maximumFractionDigits: value < 10 && unit > 0 ? 1 : 0 }).format(value);\n}\n\nexport type DropzoneProps = {\n  /** The title in the zone (\"Drop your video here\"), passed translated. */\n  title: string;\n  /** The button that opens the file picker (\"Choose a file\"), passed translated. */\n  browseLabel: string;\n  /** What is accepted, in words (\"MP4 or MOV, up to 4 GB\"). */\n  hint?: string;\n  /** The types accepted, as the `accept` attribute (`\"video/*\"`, `\"image/png,.pdf\"`). */\n  accept?: string;\n  /** The largest file, in bytes. */\n  maxSize?: number;\n  /** The most files at once (1 unless `multiple`). */\n  maxFiles?: number;\n  /** Several files at once. */\n  multiple?: boolean;\n  /** Not available (an upload is running). */\n  disabled?: boolean;\n  /** On a phone, opens the camera directly (`\"environment\"` the back one, `\"user\"` the front one). */\n  capture?: \"user\" | \"environment\";\n  /** Called with the files accepted (never empty). */\n  onFiles: (files: File[]) => void;\n  /** Called with the files refused and why (show `refusalLabel`'s words, or your own). */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** The words of a refusal, shown in the zone: `(r) => r.file.name + \" is too large\"`. Without it, nothing is shown. */\n  refusalLabel?: (rejection: FileRejection) => string;\n  /** An icon instead of the upload glyph. */\n  icon?: React.ReactNode;\n  /** Classes merged on the zone. */\n  className?: string;\n};\n\n/** A zone to drop files on, with a button that opens the picker: checks type, size and count. */\nexport function Dropzone({\n  title,\n  browseLabel,\n  hint,\n  accept,\n  maxSize,\n  maxFiles,\n  multiple,\n  disabled,\n  capture,\n  onFiles,\n  onReject,\n  refusalLabel,\n  icon,\n  className,\n}: DropzoneProps) {\n  const s = fileUpload();\n  const input = React.useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const [refused, setRefused] = React.useState<FileRejection[]>([]);\n  const depth = React.useRef(0);\n  const id = React.useId();\n  const limit = maxFiles ?? (multiple ? Infinity : 1);\n\n  const take = (list: FileList | File[]) => {\n    const files = [...list];\n    const accepted: File[] = [];\n    const rejections: FileRejection[] = [];\n    for (const file of files) {\n      if (!acceptsFile(file, accept)) rejections.push({ file, reason: \"type\" });\n      else if (maxSize !== undefined && file.size > maxSize) rejections.push({ file, reason: \"size\" });\n      else if (accepted.length >= limit) rejections.push({ file, reason: \"count\" });\n      else accepted.push(file);\n    }\n    setRefused(rejections);\n    if (accepted.length) onFiles(accepted);\n    if (rejections.length) onReject?.(rejections);\n  };\n\n  return (\n    <div\n      className={s.zone({ className })}\n      data-dragging={dragging ? \"\" : undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      onDragEnter={(event) => {\n        if (disabled) return;\n        event.preventDefault();\n        depth.current += 1;\n        setDragging(true);\n      }}\n      onDragOver={(event) => {\n        if (disabled) return;\n        event.preventDefault();\n        event.dataTransfer.dropEffect = \"copy\";\n      }}\n      onDragLeave={() => {\n        depth.current = Math.max(0, depth.current - 1);\n        if (depth.current === 0) setDragging(false);\n      }}\n      onDrop={(event) => {\n        if (disabled) return;\n        event.preventDefault();\n        depth.current = 0;\n        setDragging(false);\n        take(event.dataTransfer.files);\n      }}\n    >\n      <span className={s.zoneIcon()} aria-hidden>\n        {icon ?? <UploadGlyph className=\"h-6 w-6\" />}\n      </span>\n      <p id={`${id}-title`} className={s.zoneTitle()}>\n        {title}\n      </p>\n      {hint ? (\n        <p id={`${id}-hint`} className={s.zoneHint()}>\n          {hint}\n        </p>\n      ) : null}\n      <button\n        type=\"button\"\n        className={s.browse()}\n        disabled={disabled}\n        aria-describedby={[`${id}-title`, hint ? `${id}-hint` : null].filter(Boolean).join(\" \")}\n        onClick={() => input.current?.click()}\n      >\n        {browseLabel}\n      </button>\n      <input\n        ref={input}\n        type=\"file\"\n        tabIndex={-1}\n        aria-hidden\n        className=\"sr-only\"\n        accept={accept}\n        multiple={multiple}\n        capture={capture}\n        disabled={disabled}\n        onChange={(event) => {\n          if (event.target.files?.length) take(event.target.files);\n          event.target.value = \"\";\n        }}\n      />\n      {refusalLabel && refused.length > 0 ? (\n        <ul role=\"alert\" className={s.refusals()}>\n          {refused.map((r) => (\n            <li key={`${r.file.name}-${r.reason}`}>{refusalLabel(r)}</li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n\nexport type UploadStatus = \"queued\" | \"uploading\" | \"paused\" | \"done\" | \"error\";\n\nexport type UploadItem = {\n  /** A stable id. */\n  id: string;\n  /** The file's name. */\n  name: string;\n  /** Its size, in bytes. */\n  size: number;\n  /** Its MIME type (`video/mp4`): picks the preview. */\n  type?: string;\n  /** Sent so far, between 0 and 1. */\n  progress: number;\n  /** Where it stands. */\n  status: UploadStatus;\n  /** Why it failed, passed translated. */\n  error?: string;\n  /** A preview (an object URL of the file, a thumbnail from the server). */\n  previewUrl?: string;\n  /** Bytes per second, for the speed and the time left. */\n  speed?: number;\n};\n\nexport type UploadListLabels = {\n  /** The list's accessible name (\"Uploads\"). */\n  list: string;\n  pause: (name: string) => string;\n  resume: (name: string) => string;\n  retry: (name: string) => string;\n  cancel: (name: string) => string;\n  remove: (name: string) => string;\n  /** A state in words: `(status) => \"Paused\"`… */\n  status: (status: UploadStatus) => string;\n  /** The time left: `(seconds) => \"2 min left\"`. */\n  remaining: (seconds: number) => string;\n};\n\nexport const uploadListLabels: UploadListLabels = {\n  list: \"Uploads\",\n  pause: (name) => `Pause ${name}`,\n  resume: (name) => `Resume ${name}`,\n  retry: (name) => `Retry ${name}`,\n  cancel: (name) => `Cancel ${name}`,\n  remove: (name) => `Remove ${name}`,\n  status: (status) => ({ queued: \"Waiting\", uploading: \"Uploading\", paused: \"Paused\", done: \"Uploaded\", error: \"Failed\" })[status],\n  remaining: (seconds) => (seconds < 60 ? `${Math.ceil(seconds)} s left` : `${Math.ceil(seconds / 60)} min left`),\n};\n\nexport type UploadListProps = {\n  /** The uploads, as `useUploadQueue` gives them (or your own state). */\n  items: readonly UploadItem[];\n  /** Pauses an upload (shown while it uploads, when given). */\n  onPause?: (id: string) => void;\n  /** Resumes a paused one. */\n  onResume?: (id: string) => void;\n  /** Tries a failed one again. */\n  onRetry?: (id: string) => void;\n  /** Stops an upload under way and drops it. */\n  onCancel?: (id: string) => void;\n  /** Drops a finished or failed one from the list. */\n  onRemove?: (id: string) => void;\n  /** The locale of sizes and speeds. Default `\"en\"`. */\n  locale?: string;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<UploadListLabels>;\n  /** Classes merged on the list. */\n  className?: string;\n};\n\nfunction Preview({ item }: { item: UploadItem }) {\n  if (item.previewUrl && item.type?.startsWith(\"image/\")) return <img src={item.previewUrl} alt=\"\" className=\"h-full w-full object-cover\" />;\n  if (item.previewUrl && item.type?.startsWith(\"video/\")) return <video src={item.previewUrl} muted playsInline preload=\"metadata\" className=\"h-full w-full object-cover\" aria-hidden />;\n  return <FileGlyph className=\"h-5 w-5\" />;\n}\n\n/** The files being sent: preview, size, progress, speed and time left, and the actions each state allows. */\nexport function UploadList({ items, onPause, onResume, onRetry, onCancel, onRemove, locale = \"en\", labels: given, className }: UploadListProps) {\n  const labels = { ...uploadListLabels, ...given };\n  const s = fileUpload();\n  const action = (label: string, run: () => void, glyph: React.ReactNode) => (\n    <button type=\"button\" className={s.action()} aria-label={label} title={label} onClick={run}>\n      {glyph}\n    </button>\n  );\n  return (\n    <ul aria-label={labels.list} className={s.list({ className })}>\n      {items.map((item) => {\n        const left = item.status === \"uploading\" && item.speed ? ((1 - item.progress) * item.size) / item.speed : null;\n        return (\n          <li key={item.id} className={s.item()} data-status={item.status}>\n            <span className={s.preview()}>\n              <Preview item={item} />\n            </span>\n            <div className={s.body()}>\n              <p className={s.name()}>{item.name}</p>\n              {item.status !== \"done\" && item.status !== \"error\" ? (\n                <Progress size=\"sm\" label={item.name} value={item.status === \"queued\" ? null : Math.round(item.progress * 100)} />\n              ) : null}\n              <p className={s.meta()}>\n                <span>{labels.status(item.status)}</span>\n                <span>{item.status === \"done\" ? formatBytes(item.size, locale) : `${formatBytes(item.progress * item.size, locale)} / ${formatBytes(item.size, locale)}`}</span>\n                {item.status === \"uploading\" && item.speed ? <span>{formatBytes(item.speed, locale)}/s</span> : null}\n                {left !== null ? <span>{labels.remaining(left)}</span> : null}\n              </p>\n              {item.status === \"error\" && item.error ? (\n                <p role=\"alert\" className={s.error()}>\n                  {item.error}\n                </p>\n              ) : null}\n            </div>\n            <div className={s.actions()}>\n              {item.status === \"uploading\" && onPause && action(labels.pause(item.name), () => onPause(item.id), <PauseGlyph className=\"h-4 w-4\" />)}\n              {item.status === \"paused\" && onResume && action(labels.resume(item.name), () => onResume(item.id), <PlayGlyph className=\"h-4 w-4\" />)}\n              {item.status === \"error\" && onRetry && action(labels.retry(item.name), () => onRetry(item.id), <RetryGlyph className=\"h-4 w-4\" />)}\n              {(item.status === \"done\" || item.status === \"error\") && onRemove\n                ? action(labels.remove(item.name), () => onRemove(item.id), <CloseGlyph className=\"h-4 w-4\" />)\n                : item.status !== \"done\" && onCancel\n                  ? action(labels.cancel(item.name), () => onCancel(item.id), <CloseGlyph className=\"h-4 w-4\" />)\n                  : null}\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nexport type UploadContext = {\n  /** Aborted on pause and cancel: stop sending (`tusUpload.abort()`, `xhr.abort()`). */\n  signal: AbortSignal;\n  /** Report the bytes sent so far. */\n  onProgress: (sent: number) => void;\n  /** `true` when this call resumes a paused or failed upload (a Tus client then continues from its offset). */\n  resumed: boolean;\n};\n\nexport type UploadQueueOptions = {\n  /** Sends one file; resolves when it is done, rejects on failure (its `message` becomes the item's error). */\n  upload: (file: File, context: UploadContext) => Promise<void>;\n  /** How many files go at once. Default 2. */\n  concurrency?: number;\n  /** How many times a failed upload is tried again by itself (with `backoff`) before it shows its error. Default 0. */\n  retries?: number;\n  /** The wait between retries: exponential from 1 s by default (`@krizaka/pacer`). */\n  backoff?: QueueOptions[\"backoff\"];\n  /** Whether an error deserves another try (a 4xx never does). Default: every error does, up to `retries`. */\n  shouldRetry?: QueueOptions[\"shouldRetry\"];\n  /** Makes an object URL for each file to preview (revoked when it leaves). Default `true`. */\n  previews?: boolean;\n};\n\n/** What the screen reads of an upload besides its status: the file, how far it got, how fast. */\ntype UploadMeta = { file: File; progress: number; speed?: number; previewUrl?: string; last?: { at: number; sent: number } };\n\n/**\n * The state of an upload queue around the app's `upload` function: `add`, `pause`, `resume`, `retry`, `cancel`, `remove`.\n * The line itself — concurrency, retries with backoff, pause by aborting the signal — is `createQueue` of\n * `@krizaka/pacer`; this hook adds the files, their previews, their progress and their speed.\n */\nexport function useUploadQueue(options: UploadQueueOptions) {\n  const { concurrency, retries, backoff, shouldRetry } = options;\n  const latest = useLatest(options);\n  const queue = useQueue<UploadMeta>({ concurrency: concurrency ?? 2, retries, backoff, shouldRetry });\n  const jobs = useQueueSnapshot(queue);\n  const metas = useLatest(new Map(jobs.map((job) => [job.id, job.meta])));\n\n  const add = React.useCallback(\n    (files: readonly File[]) => {\n      const { previews = true } = latest.current;\n      for (const file of files) {\n        const id = `${file.name}-${file.size}-${Math.random().toString(36).slice(2, 8)}`;\n        const previewUrl = previews && typeof URL.createObjectURL === \"function\" ? URL.createObjectURL(file) : undefined;\n        queue.add(\n          async ({ signal, resumed }) => {\n            queue.update(id, (m) => ({ ...m, last: { at: Date.now(), sent: m.progress * file.size } }));\n            try {\n              await latest.current.upload(file, {\n                signal,\n                resumed,\n                onProgress: (sent) => {\n                  if (signal.aborted) return;\n                  queue.update(id, (m) => {\n                    const now = Date.now();\n                    const last = m.last ?? { at: now, sent };\n                    const fresh = now - last.at > 400;\n                    return { ...m, progress: file.size ? Math.min(1, sent / file.size) : 0, speed: fresh ? ((sent - last.sent) / (now - last.at)) * 1000 : m.speed, last: fresh ? { at: now, sent } : last };\n                  });\n                },\n              });\n              if (!signal.aborted) queue.update(id, (m) => ({ ...m, progress: 1, speed: undefined }));\n            } catch (error) {\n              if (!signal.aborted) queue.update(id, (m) => ({ ...m, speed: undefined }));\n              throw error;\n            }\n          },\n          { id, meta: { file, progress: 0, previewUrl } },\n        );\n      }\n    },\n    [latest, queue],\n  );\n  const forget = React.useCallback(\n    (id: string) => {\n      const url = metas.current.get(id)?.previewUrl;\n      if (url) URL.revokeObjectURL(url);\n      queue.cancel(id);\n    },\n    [metas, queue],\n  );\n  React.useEffect(\n    () => () => {\n      for (const meta of metas.current.values()) if (meta.previewUrl) URL.revokeObjectURL(meta.previewUrl);\n    },\n    [metas],\n  );\n  const pause = React.useCallback(\n    (id: string) => {\n      queue.pause(id);\n      queue.update(id, (m) => ({ ...m, speed: undefined }));\n    },\n    [queue],\n  );\n\n  const items = React.useMemo<UploadItem[]>(\n    () =>\n      jobs.map(({ id, status, error, meta }) => ({\n        id,\n        name: meta.file.name,\n        size: meta.file.size,\n        type: meta.file.type,\n        progress: meta.progress,\n        status: status === \"running\" ? \"uploading\" : status,\n        error: error?.message,\n        previewUrl: meta.previewUrl,\n        speed: status === \"running\" ? meta.speed : undefined,\n      })),\n    [jobs],\n  );\n  return { items, add, pause, resume: queue.resume, retry: queue.retry, cancel: forget, remove: forget };\n}\n","// Server-safe: no hook, no context. role=\"progressbar\" with aria-valuenow / aria-valuemax (none when indeterminate),\n// named by `label`. A bar or a ring; the ring can hold content in its centre (an amount, a percentage).\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const progress = tv({\n  slots: {\n    root: \"relative\",\n    track: \"\",\n    indicator: \"\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n    buffer: \"absolute inset-y-0 left-0 -z-10 rounded-full bg-accent/25 transition-[width] duration-500 motion-reduce:transition-none\",\n    frame: \"flex w-full flex-col gap-1.5\",\n    header: \"flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs\",\n    caption: \"max-w-full shrink-0 grow truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n  },\n  variants: {\n    variant: {\n      bar: {\n        root: \"relative isolate w-full overflow-hidden rounded-full bg-surface-3\",\n        indicator:\n          \"kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:w-2/5\",\n      },\n      ring: {\n        root: \"inline-flex shrink-0 items-center justify-center\",\n        track: \"stroke-border-default\",\n        indicator:\n          \"stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none\",\n      },\n    },\n    size: { sm: {}, md: {}, lg: {} },\n    status: {\n      active: {},\n      // Paused: the fill rests, striped — the task is waiting for someone, not broken.\n      paused: { indicator: \"kz-progress-paused opacity-70\" },\n      // Failed: the fill turns to the danger colour where it stopped.\n      error: { indicator: \"from-danger to-danger stroke-danger\" },\n    },\n  },\n  compoundVariants: [\n    { variant: \"bar\", size: \"sm\", class: { root: \"h-1\" } },\n    { variant: \"bar\", size: \"md\", class: { root: \"h-2\" } },\n    { variant: \"bar\", size: \"lg\", class: { root: \"h-3\" } },\n    { variant: \"ring\", size: \"sm\", class: { root: \"h-10 w-10\" } },\n    { variant: \"ring\", size: \"md\", class: { root: \"h-20 w-20\" } },\n    { variant: \"ring\", size: \"lg\", class: { root: \"h-36 w-36\" } },\n  ],\n  defaultVariants: { variant: \"bar\", size: \"md\", status: \"active\" },\n});\n\nexport type ProgressVariants = VariantProps<typeof progress>;\n\nexport type ProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> &\n  ProgressVariants & {\n    /** bar · ring (a ring holds its `children` in the centre). */\n    variant?: ProgressVariants[\"variant\"];\n    /** sm · md · lg: the bar's thickness, the ring's diameter. */\n    size?: ProgressVariants[\"size\"];\n    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */\n    value?: number | null;\n    /** The value that means complete. */\n    max?: number;\n    /** The accessible name — passed translated (\"Upload\", \"Raised towards the goal\"). */\n    label: string;\n    /** The value in words for assistive technology (\"$420 of $1,000\") — default: the percentage. */\n    valueText?: string;\n    /** A ring's centre: an amount, a percentage, an icon. */\n    children?: React.ReactNode;\n    /** How far is already available beyond the value (a video buffered ahead), between 0 and `max` — bar only. */\n    buffer?: number;\n    /** Splits the bar or the ring into this many segments: the steps of a task, the parts of a goal. */\n    segments?: number;\n    /**\n     * active · paused (the fill rests, striped: waiting for someone) · error (the fill turns to the danger colour where it stopped).\n     * @default \"active\"\n     */\n    status?: ProgressVariants[\"status\"];\n    /** Shows the label above the bar, with the percentage (or `valueText`) and `eta` — bar only. */\n    showLabel?: boolean;\n    /** The time left, in words (“About 2 min left”), shown with `showLabel` and read with the value — passed translated. */\n    eta?: string;\n  };\n\nconst STROKE = { sm: 12, md: 9, lg: 7 } as const;\n\n/** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */\nexport function Progress({\n  variant = \"bar\",\n  size = \"md\",\n  value,\n  max = 100,\n  label,\n  valueText,\n  className,\n  children,\n  buffer,\n  segments,\n  status = \"active\",\n  showLabel,\n  eta,\n  ...props\n}: ProgressProps) {\n  const s = progress({ variant, size, status });\n  const maskId = `kz-seg-${React.useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;\n  const percent = Math.round(ratio * 100);\n  const state = !known ? \"indeterminate\" : ratio >= 1 ? \"complete\" : \"loading\";\n  const aria = {\n    role: \"progressbar\" as const,\n    \"aria-label\": label,\n    \"aria-valuemin\": known ? 0 : undefined,\n    \"aria-valuemax\": known ? max : undefined,\n    \"aria-valuenow\": known ? Math.min(max, Math.max(0, value)) : undefined,\n    \"aria-valuetext\": [known ? (valueText ?? `${percent}%`) : valueText, eta].filter(Boolean).join(\", \") || undefined,\n    \"data-state\": state,\n    \"data-status\": status === \"active\" ? undefined : status,\n    \"data-value\": known ? value : undefined,\n    \"data-variant\": variant,\n  };\n  if (variant === \"ring\") {\n    const stroke = STROKE[size];\n    const r = 50 - stroke / 2;\n    return (\n      <div {...aria} className={s.root({ className })} {...props}>\n        <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n          {segments && segments > 1 && (\n            <mask id={maskId}>\n              <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" stroke=\"white\" strokeWidth={stroke + 2} pathLength={100} strokeDasharray={`${100 / segments - 2} 2`} />\n            </mask>\n          )}\n          <g mask={segments && segments > 1 ? `url(#${maskId})` : undefined}>\n          <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth={stroke} className={s.track()} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={known ? 100 - percent : 75}\n            data-state={state}\n            className={s.indicator()}\n          />\n          </g>\n        </svg>\n        {children !== undefined && <div className={s.center()}>{children}</div>}\n      </div>\n    );\n  }\n  const segmented = segments && segments > 1 ? ({ \"--kz-segments\": segments } as React.CSSProperties) : undefined;\n  const bufferRatio = typeof buffer === \"number\" && Number.isFinite(buffer) ? Math.min(1, Math.max(0, buffer / (max || 1))) : null;\n  const bar = (\n    <div {...aria} className={s.root({ className: [segmented && \"kz-progress-segmented\", className].filter(Boolean).join(\" \") || undefined })} style={segmented} {...props}>\n      <div data-state={state} className={s.indicator()} style={known ? { width: `${ratio * 100}%` } : undefined} />\n      {bufferRatio !== null && <div aria-hidden className={s.buffer()} style={{ width: `${bufferRatio * 100}%` }} />}\n    </div>\n  );\n  if (!showLabel) return bar;\n  const figure = [known ? (valueText ?? `${percent} %`) : valueText, eta].filter(Boolean).join(\" · \");\n  return (\n    <div className={s.frame()}>\n      <div aria-hidden className={s.header()}>\n        <span className={s.caption()}>{label}</span>\n        {figure && <span className={s.figure()}>{figure}</span>}\n      </div>\n      {bar}\n    </div>\n  );\n}\n"],"mappings":"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","names":["React","tv","jsx","jsxs","tv"]}

package/dist/force-update-screen.d.ts

@@ -0,0 +1,80 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const forceUpdateScreen: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    mark: string;
+    title: string;
+    message: string;
+    version: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    mark: string;
+    title: string;
+    message: string;
+    version: string;
+    actions: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    mark: string;
+    title: string;
+    message: string;
+    version: string;
+    actions: string;
+}>>;
+type ForceUpdateScreenProps = Omit<React.ComponentProps<"main">, "title"> & {
+    /** The headline (“Update to keep going”). */
+    title: React.ReactNode;
+    /** Why, in a sentence — the backend's localized `message`. */
+    message?: React.ReactNode;
+    /** The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). */
+    versionLabel?: React.ReactNode;
+    /** The product's mark or mascot (decorative). */
+    mark?: React.ReactNode;
+    /** The button that updates (“Update the app”). */
+    updateLabel: string;
+    /** Opens the store page. */
+    onUpdate: () => void;
+    /** A secondary way (“Check again”) once the update is installed — optional. */
+    retryLabel?: string;
+    /** Checks the backend again. */
+    onRetry?: () => void;
+};
+/** The forced update: one thing to do, and the way to do it. */
+declare function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps): React.JSX.Element;
+
+export { ForceUpdateScreen, type ForceUpdateScreenProps, forceUpdateScreen };

package/dist/force-update-screen.js

@@ -0,0 +1,38 @@
+import "./chunk-TDG7ED2W.js";
+import {
+  Button
+} from "./chunk-3IN6TOPM.js";
+import "./chunk-43PTCDTL.js";
+import "./chunk-2VNYHG4E.js";
+
+// src/force-update-screen/force-update-screen.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var forceUpdateScreen = tv({
+  slots: {
+    root: "mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg",
+    mark: "flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24",
+    title: "text-2xl font-semibold text-fg",
+    message: "text-fg-secondary",
+    version: "font-mono text-xs text-fg-tertiary",
+    actions: "mt-2 flex w-full flex-col gap-2"
+  }
+});
+function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }) {
+  const s = forceUpdateScreen();
+  return /* @__PURE__ */ jsxs("main", { "data-kind": "update-force", className: s.root({ className }), ...props, children: [
+    mark && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.mark(), children: mark }),
+    /* @__PURE__ */ jsx("h1", { className: s.title(), children: title }),
+    message && /* @__PURE__ */ jsx("p", { className: s.message(), children: message }),
+    versionLabel && /* @__PURE__ */ jsx("p", { className: s.version(), children: versionLabel }),
+    /* @__PURE__ */ jsxs("div", { className: s.actions(), children: [
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", shimmer: true, autoFocus: true, onClick: onUpdate, children: updateLabel }),
+      retryLabel && onRetry && /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onRetry, children: retryLabel })
+    ] })
+  ] });
+}
+export {
+  ForceUpdateScreen,
+  forceUpdateScreen
+};
+//# sourceMappingURL=force-update-screen.js.map

package/dist/force-update-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/force-update-screen/force-update-screen.tsx"],"sourcesContent":["// Server-safe. The blocking screen: this version can no longer run. It replaces the app, it is not laid over it —\n// nothing behind it is reachable. Every word is a prop; the store URL and the versions come from the backend.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const forceUpdateScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type ForceUpdateScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Update to keep going”). */\n  title: React.ReactNode;\n  /** Why, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update the app”). */\n  updateLabel: string;\n  /** Opens the store page. */\n  onUpdate: () => void;\n  /** A secondary way (“Check again”) once the update is installed — optional. */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/** The forced update: one thing to do, and the way to do it. */\nexport function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps) {\n  const s = forceUpdateScreen();\n  return (\n    <main data-kind=\"update-force\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <h1 className={s.title()}>{title}</h1>\n      {message && <p className={s.message()}>{message}</p>}\n      {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      <div className={s.actions()}>\n        <Button variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer autoFocus onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n        {retryLabel && onRetry && (\n          <Button variant=\"ghost\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        )}\n      </div>\n    </main>\n  );\n}\n"],"mappings":";;;;;;;;AAIA,SAAS,UAAU;AAsCX,cAOF,YAPE;AApCD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAsBM,SAAS,kBAAkB,EAAE,OAAO,SAAS,cAAc,MAAM,aAAa,UAAU,YAAY,SAAS,WAAW,GAAG,MAAM,GAA2B;AACjK,QAAM,IAAI,kBAAkB;AAC5B,SACE,qBAAC,UAAK,aAAU,gBAAe,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAClE;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAC/C,gBAAgB,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,wBAAa;AAAA,IAC1D,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,OAAM,OAAM,SAAO,MAAC,WAAS,MAAC,SAAS,UACxE,uBACH;AAAA,MACC,cAAc,WACb,oBAAC,UAAO,SAAQ,SAAQ,SAAS,SAC9B,sBACH;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/maintenance-screen.d.ts

@@ -0,0 +1,68 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const maintenanceScreen: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    mark: string;
+    title: string;
+    message: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    mark: string;
+    title: string;
+    message: string;
+    actions: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    mark: string;
+    title: string;
+    message: string;
+    actions: string;
+}>>;
+type MaintenanceScreenProps = Omit<React.ComponentProps<"main">, "title"> & {
+    /** The headline (“Back in a few minutes”). */
+    title: React.ReactNode;
+    /** What is happening — the backend's localized maintenance `message`. */
+    message?: React.ReactNode;
+    /** The product's mark or mascot (decorative). */
+    mark?: React.ReactNode;
+    /** The button that checks again (“Try again”). */
+    retryLabel?: string;
+    /** Checks the backend again. */
+    onRetry?: () => void;
+};
+/** The maintenance screen: announced politely, with one way to check again. */
+declare function MaintenanceScreen({ title, message, mark, retryLabel, onRetry, className, ...props }: MaintenanceScreenProps): React.JSX.Element;
+
+export { MaintenanceScreen, type MaintenanceScreenProps, maintenanceScreen };

package/dist/maintenance-screen.js

@@ -0,0 +1,35 @@
+import "./chunk-TDG7ED2W.js";
+import {
+  Button
+} from "./chunk-3IN6TOPM.js";
+import "./chunk-43PTCDTL.js";
+import "./chunk-2VNYHG4E.js";
+
+// src/maintenance-screen/maintenance-screen.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var maintenanceScreen = tv({
+  slots: {
+    root: "mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg",
+    mark: "flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24",
+    title: "text-2xl font-semibold text-fg",
+    message: "text-fg-secondary",
+    actions: "mt-2 flex w-full flex-col gap-2"
+  }
+});
+function MaintenanceScreen({ title, message, mark, retryLabel, onRetry, className, ...props }) {
+  const s = maintenanceScreen();
+  return /* @__PURE__ */ jsxs("main", { "data-kind": "maintenance", className: s.root({ className }), ...props, children: [
+    mark && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.mark(), children: mark }),
+    /* @__PURE__ */ jsxs("div", { role: "status", className: "flex flex-col items-center gap-4", children: [
+      /* @__PURE__ */ jsx("h1", { className: s.title(), children: title }),
+      message && /* @__PURE__ */ jsx("p", { className: s.message(), children: message })
+    ] }),
+    retryLabel && onRetry && /* @__PURE__ */ jsx("div", { className: s.actions(), children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel }) })
+  ] });
+}
+export {
+  MaintenanceScreen,
+  maintenanceScreen
+};
+//# sourceMappingURL=maintenance-screen.js.map

package/dist/maintenance-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/maintenance-screen/maintenance-screen.tsx"],"sourcesContent":["// Server-safe. The service is down on purpose (maintenance on, from the backend's parameters): say so, say when to\n// come back, and let the person check again. Replaces the app, like the forced update.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const maintenanceScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type MaintenanceScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Back in a few minutes”). */\n  title: React.ReactNode;\n  /** What is happening — the backend's localized maintenance `message`. */\n  message?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that checks again (“Try again”). */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/** The maintenance screen: announced politely, with one way to check again. */\nexport function MaintenanceScreen({ title, message, mark, retryLabel, onRetry, className, ...props }: MaintenanceScreenProps) {\n  const s = maintenanceScreen();\n  return (\n    <main data-kind=\"maintenance\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <div role=\"status\" className=\"flex flex-col items-center gap-4\">\n        <h1 className={s.title()}>{title}</h1>\n        {message && <p className={s.message()}>{message}</p>}\n      </div>\n      {retryLabel && onRetry && (\n        <div className={s.actions()}>\n          <Button variant=\"secondary\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        </div>\n      )}\n    </main>\n  );\n}\n"],"mappings":";;;;;;;;AAIA,SAAS,UAAU;AA+BX,cAIF,YAJE;AA7BD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAgBM,SAAS,kBAAkB,EAAE,OAAO,SAAS,MAAM,YAAY,SAAS,WAAW,GAAG,MAAM,GAA2B;AAC5H,QAAM,IAAI,kBAAkB;AAC5B,SACE,qBAAC,UAAK,aAAU,eAAc,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACjE;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,qBAAC,SAAI,MAAK,UAAS,WAAU,oCAC3B;AAAA,0BAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,MAChC,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OAClD;AAAA,IACC,cAAc,WACb,oBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB,8BAAC,UAAO,SAAQ,aAAY,SAAS,SAClC,sBACH,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/match-dialog.js

@@ -2,12 +2,12 @@
 import "./chunk-NPF3OHE2.js";
 import {
   Avatar
-} from "./chunk-YIBKJ36L.js";
+} from "./chunk-KB7OLYIJ.js";
 import "./chunk-JXLDUDTD.js";
 import {
   Button,
   IconButton
-} from "./chunk-276PTQMQ.js";
+} from "./chunk-3BC4XQ6C.js";
 import "./chunk-D3T54RSL.js";
 
 // src/dialog/dialog.tsx

package/dist/media-grid.d.ts

@@ -1,5 +1,31 @@
 import * as React from 'react';
 
+interface LoadMoreProps extends Omit<React.ComponentProps<"div">, "children" | "onError"> {
+    /** Asks for the next page. Not called while `loading`, nor once `hasMore` is false. */
+    onLoadMore: () => void;
+    /** There is a next page. */
+    hasMore: boolean;
+    /** A page is on its way. */
+    loading?: boolean;
+    /** The last page failed: the button reads `retryLabel`, and nothing loads by itself until it is pressed. */
+    failed?: boolean;
+    /** The button, passed translated ("Load more"). */
+    label: string;
+    /** The wait, passed translated ("Loading more videos"). */
+    loadingLabel: string;
+    /** The button after a failure, passed translated ("Try again"). Defaults to `label`. */
+    retryLabel?: string;
+    /** Shown instead of the button when the list is over, passed translated ("You have seen everything"). Nothing if absent. */
+    endLabel?: string;
+    /**
+     * How far below the viewport the page is already requested (an IntersectionObserver `rootMargin`).
+     * @default "900px 0px"
+     */
+    rootMargin?: string;
+}
+/** Infinite scroll with a visible "Load more" under it. */
+declare function LoadMore({ onLoadMore, hasMore, loading, failed, label, loadingLabel, retryLabel, endLabel, rootMargin, className, ...props }: LoadMoreProps): React.JSX.Element;
+
 /** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */
 type LinkComponent = React.ElementType<{
     href: string;
@@ -81,8 +107,22 @@ interface VideoCardProps extends Omit<React.ComponentProps<"article">, "title">
     layout?: "stack" | "row";
     /** The picture. */
     poster?: string | null;
-    /** An animated picture (WebP) shown while the card is hovered or focused. */
+    /**
+     * An animated picture (WebP, a few hundred kB) that fades in over the poster once the pointer has rested on the card
+     * (or it is focused) for `previewDelay`, and is removed again on leave. It is never requested before. On a phone (no
+     * hover) only the card most inside the viewport plays it, unless the person asked for less data or less motion.
+     */
     previewSrc?: string | null;
+    /**
+     * How long the pointer must rest before the preview is requested, in ms: a pointer crossing the grid loads nothing.
+     * @default 200
+     */
+    previewDelay?: number;
+    /**
+     * `fetchPriority` of the poster: `high` for the first row (the largest contentful paint).
+     * @default "auto"
+     */
+    posterPriority?: "high" | "low" | "auto";
     /**
      * `cover` fills the frame; `contain` draws the whole picture over a blurred copy of itself (a source of the other
      * orientation: no cropped face, no black bar).
@@ -109,7 +149,7 @@ interface VideoCardProps extends Omit<React.ComponentProps<"article">, "title">
     loading?: "lazy" | "eager";
 }
 /** A video card whose frame, body and footer have one height per aspect, so a grid row or a shelf never staggers. */
-declare function VideoCard({ title, href, linkAs, aspect, layout, poster, previewSrc, fit, duration, badges, creator, meta, action, fallback, blurred, overlay, loading, className, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: VideoCardProps): React.JSX.Element;
+declare function VideoCard({ title, href, linkAs, aspect, layout, poster, previewSrc, previewDelay, posterPriority, fit, duration, badges, creator, meta, action, fallback, blurred, overlay, loading, className, onMouseEnter, onMouseLeave, onFocus, onBlur, ref, ...props }: VideoCardProps): React.JSX.Element;
 
 interface MediaGridState {
     /** The frame the card is drawn in (`aspect` of `VideoCard`). */
@@ -143,4 +183,27 @@ interface MediaGridProps<T> extends Omit<React.ComponentProps<"div">, "children"
 /** A media grid that never mixes heights badly: a shelf for the 9:16, a uniform grid for the rest. */
 declare function MediaGrid<T>({ items, getId, orientationOf, renderItem, mode, frame, layout, shelf, className, ...props }: MediaGridProps<T>): React.JSX.Element;
 
-export { MediaGrid, type MediaGridProps, type MediaGridState, ShortsShelf, type ShortsShelfProps, VideoCard, type VideoCardAspect, type VideoCardCreator, type VideoCardProps };
+interface VideoCardSkeletonProps extends React.ComponentProps<"div"> {
+    /** `landscape` (16:9) or `portrait` (9:16), as the card it stands for. @default "landscape" */
+    aspect?: VideoCardAspect;
+    /** `stack` or `row`, as the card it stands for. @default "stack" */
+    layout?: "stack" | "row";
+}
+/** The placeholder of a `VideoCard` (decorative: announce the wait on the list, with `MediaGridSkeleton`). */
+declare function VideoCardSkeleton({ aspect, layout, className, ...props }: VideoCardSkeletonProps): React.JSX.Element;
+interface MediaGridSkeletonProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** What is loading, passed translated ("Loading videos"): announced once, the cards are hidden from assistive technology. */
+    label: string;
+    /** Cards in the grid. @default 8 */
+    count?: number;
+    /** Cards on the Shorts shelf above the grid (`split` mode); 0 for none. @default 0 */
+    shelfCount?: number;
+    /** `grid` or `list`. @default "grid" */
+    layout?: "grid" | "list";
+    /** The frame of the grid. @default "landscape" */
+    frame?: VideoCardAspect;
+}
+/** The placeholder of a `MediaGrid`: the same shelf and grid, skeleton cards, one polite announcement. */
+declare function MediaGridSkeleton({ label, count, shelfCount, layout, frame, className, ...props }: MediaGridSkeletonProps): React.JSX.Element;
+
+export { LoadMore, type LoadMoreProps, MediaGrid, type MediaGridProps, MediaGridSkeleton, type MediaGridSkeletonProps, type MediaGridState, ShortsShelf, type ShortsShelfProps, VideoCard, type VideoCardAspect, type VideoCardCreator, type VideoCardProps, VideoCardSkeleton, type VideoCardSkeletonProps };