@openrails/contentkit-ui 0.103.2 → 0.104.0-rc.2

package/dist/components/admin/upload-queue.js.map

@@ -1 +1 @@
-{"version":3,"file":"upload-queue.js","names":[],"sources":["../../../src/components/admin/upload-queue.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { toContentKitError, type ContentKitError } from \"../../client/errors.js\";\nimport type { FileInfo, RefBody } from \"../../client/generated/wire.js\";\nimport { samePath, type Progress, type UploadState } from \"../../client/media/client.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { megabytes } from \"../../i18n/messages.js\";\nimport { useFlowClient } from \"../../react/admin.js\";\nimport { useErrorReporter, useGuarded } from \"../../react/context.js\";\nimport { Badge } from \"#ckui/ui/badge\";\nimport { Button } from \"#ckui/ui/button\";\nimport { ErrorLine } from \"../social/parts.js\";\nimport { AdminRoot, type AdminFlowProps } from \"./shell.js\";\n\nexport interface UploadQueueProps extends AdminFlowProps {\n  /** Makes the host's item for a file (e.g. a video record) and resolves with its ref; once per file, a reload included. */\n  createItem: (file: File) => Promise<RefBody>;\n  /** The upload path in each item. Default \"source\". */\n  path?: string;\n  /** The file picker's accept, e.g. \"video/*\". */\n  accept?: string;\n  /** Files uploading at once. Default 2. */\n  concurrency?: number;\n  /** Each committed file: its item and the upload as an editor reads it. */\n  onUploaded?: (ref: RefBody, file: FileInfo) => void;\n  /** The localStorage key unfinished uploads are kept under, to resume after a reload. Default \"ckui.uploads\". */\n  storageKey?: string;\n}\n\ntype Status = \"queued\" | \"creating\" | \"uploading\" | \"committing\" | \"done\" | \"failed\" | \"paused\";\n\ninterface Entry {\n  id: string;\n  file: File;\n  key: string;\n  status: Status;\n  progress?: Progress;\n  ref?: RefBody;\n  error?: ContentKitError;\n  /** Resumed from an upload saved before a reload. */\n  resumed?: boolean;\n}\n\ninterface Saved {\n  ref: RefBody;\n  name: string;\n  size: number;\n  state?: UploadState;\n}\n\nconst ACTIVE: readonly Status[] = [\"creating\", \"uploading\", \"committing\"];\nconst fingerprint = (f: File) => `${f.name}\\u0000${f.size}\\u0000${f.lastModified}`;\nlet seq = 0;\n\nfunction readSaved(key: string): Record<string, Saved> {\n  try {\n    return JSON.parse(localStorage.getItem(key) ?? \"{}\") as Record<string, Saved>;\n  } catch {\n    return {};\n  }\n}\n\nfunction writeSaved(key: string, fn: (all: Record<string, Saved>) => void) {\n  try {\n    const all = readSaved(key);\n    fn(all);\n    if (Object.keys(all).length) localStorage.setItem(key, JSON.stringify(all));\n    else localStorage.removeItem(key);\n  } catch {\n    // Without storage, a reload starts over.\n  }\n}\n\n/**\n * Many files, each into its own new item (createItem): uploads in the\n * background with progress, pause, retry and resume. An unfinished upload is\n * kept in localStorage; adding the same file after a reload continues it in\n * the same item. Leaving the page while files upload asks first.\n */\nexport function UploadQueue({ client: own, baseUrl, auth, guard, appearance, className, language, messages, ...p }: UploadQueueProps) {\n  const client = useFlowClient({ client: own, baseUrl, auth });\n  return (\n    <AdminRoot flow=\"upload-queue\" appearance={appearance} className={className} language={language} messages={messages} guard={guard}>\n      <Queue {...p} client={client} />\n    </AdminRoot>\n  );\n}\n\ntype Inner = Omit<UploadQueueProps, \"client\" | \"baseUrl\" | \"auth\" | \"guard\" | \"appearance\" | \"className\" | \"language\" | \"messages\"> & { client: ContentKitClient };\n\nfunction Queue({ client, createItem, path = \"source\", accept, concurrency = 2, onUploaded, storageKey = \"ckui.uploads\", onError }: Inner) {\n  const m = useMessages();\n  const { t } = m;\n  const report = useErrorReporter(onError);\n  const guarded = useGuarded();\n  const [entries, setEntries] = useState<Entry[]>([]);\n  const [waiting, setWaiting] = useState<Saved[]>(() => Object.values(readSaved(storageKey)));\n  const [over, setOver] = useState(false);\n  const input = useRef<HTMLInputElement>(null);\n  const controllers = useRef(new Map<string, AbortController>());\n  const latest = useRef({ createItem, onUploaded });\n  useEffect(() => {\n    latest.current = { createItem, onUploaded };\n  });\n\n  const patch = useCallback((id: string, next: Partial<Entry>) => setEntries((es) => es.map((e) => (e.id === id ? { ...e, ...next } : e))), []);\n\n  const run = useCallback(\n    async (entry: Entry) => {\n      const ctl = new AbortController();\n      controllers.current.set(entry.id, ctl);\n      const saved = readSaved(storageKey)[entry.key];\n      try {\n        let ref = entry.ref ?? saved?.ref;\n        if (!ref) {\n          patch(entry.id, { status: \"creating\", error: undefined });\n          ref = await latest.current.createItem(entry.file);\n          const made = ref;\n          writeSaved(storageKey, (all) => void (all[entry.key] = { ref: made, name: entry.file.name, size: entry.file.size }));\n        }\n        const target = ref;\n        patch(entry.id, { status: \"uploading\", ref, error: undefined });\n        const remember = (state: UploadState | null) =>\n          writeSaved(storageKey, (all) => void (all[entry.key] = { ref: target, name: entry.file.name, size: entry.file.size, state: state ?? undefined }));\n        const options = { ref, path, signal: ctl.signal, onProgress: (progress: Progress) => patch(entry.id, { progress }), onState: remember };\n        const up = await guarded(async () => {\n          try {\n            return await client.media.upload(entry.file, { ...options, resume: saved?.state });\n          } catch (e) {\n            if (saved?.state && toContentKitError(e).code === \"resume_mismatch\") return client.media.upload(entry.file, options);\n            throw e;\n          }\n        });\n        patch(entry.id, { status: \"committing\" });\n        const files = await guarded(() => client.media.commit(target, [{ op: \"put\", path: up.path, blob: up.blob }], { signal: ctl.signal }));\n        writeSaved(storageKey, (all) => void delete all[entry.key]);\n        patch(entry.id, { status: \"done\", progress: undefined });\n        const file = files.find((f) => samePath(f.path, up.path));\n        if (file) latest.current.onUploaded?.(target, file);\n      } catch (e) {\n        const error = toContentKitError(e);\n        if (error.code === \"aborted\") patch(entry.id, { status: \"paused\" });\n        else {\n          patch(entry.id, { status: \"failed\", error });\n          report(error, \"upload\", entry.file.name);\n        }\n      } finally {\n        controllers.current.delete(entry.id);\n      }\n    },\n    [client, path, storageKey, guarded, patch, report],\n  );\n\n  // Starts queued files while fewer than concurrency run.\n  useEffect(() => {\n    const active = entries.filter((e) => ACTIVE.includes(e.status)).length;\n    const next = entries.filter((e) => e.status === \"queued\").slice(0, Math.max(0, concurrency - active));\n    if (!next.length) return;\n    setEntries((es) => es.map((e) => (next.some((n) => n.id === e.id) ? { ...e, status: \"creating\" } : e)));\n    for (const e of next) void run(e);\n  }, [entries, concurrency, run]);\n\n  const busy = entries.some((e) => ACTIVE.includes(e.status) || e.status === \"queued\");\n  useEffect(() => {\n    if (!busy) return;\n    const ask = (e: BeforeUnloadEvent) => {\n      e.preventDefault();\n      e.returnValue = \"\";\n    };\n    addEventListener(\"beforeunload\", ask);\n    return () => removeEventListener(\"beforeunload\", ask);\n  }, [busy]);\n  useEffect(() => {\n    const running = controllers.current;\n    return () => {\n      for (const c of running.values()) c.abort();\n    };\n  }, []);\n\n  const add = (files: Iterable<File>) => {\n    const saved = readSaved(storageKey);\n    const added: Entry[] = [];\n    for (const file of files) {\n      const key = fingerprint(file);\n      if (entries.some((e) => e.key === key && e.status !== \"done\") || added.some((e) => e.key === key)) continue;\n      added.push({ id: `u${++seq}`, file, key, status: \"queued\", ref: saved[key]?.ref, resumed: !!saved[key] });\n    }\n    if (!added.length) return;\n    setWaiting((w) => w.filter((s) => !added.some((a) => a.file.name === s.name && a.file.size === s.size)));\n    setEntries((es) => [...es, ...added]);\n  };\n  const pause = (id?: string) => {\n    for (const [k, c] of controllers.current) if (!id || k === id) c.abort();\n    setEntries((es) => es.map((e) => (e.status === \"queued\" && (!id || e.id === id) ? { ...e, status: \"paused\" } : e)));\n  };\n  const resume = (id?: string) => setEntries((es) => es.map((e) => ((e.status === \"paused\" || e.status === \"failed\") && (!id || e.id === id) ? { ...e, status: \"queued\", error: undefined } : e)));\n  const remove = (entry: Entry) => {\n    controllers.current.get(entry.id)?.abort();\n    if (entry.status !== \"done\") writeSaved(storageKey, (all) => void delete all[entry.key]);\n    setEntries((es) => es.filter((e) => e.id !== entry.id));\n  };\n  const forget = (s: Saved) => {\n    writeSaved(storageKey, (all) => {\n      for (const [k, v] of Object.entries(all)) if (v.name === s.name && v.size === s.size) delete all[k];\n    });\n    setWaiting((w) => w.filter((x) => x !== s));\n  };\n\n  const done = entries.filter((e) => e.status === \"done\").length;\n  const pausable = entries.some((e) => ACTIVE.includes(e.status) || e.status === \"queued\");\n  const resumable = entries.some((e) => e.status === \"paused\" || e.status === \"failed\");\n  const percent = (e: Entry) => (e.progress?.total ? Math.round((e.progress.loaded / e.progress.total) * 100) : 0);\n  return (\n    <>\n      <div\n        className={cn(\"grid justify-items-center gap-2 rounded-lg border-2 border-dashed border-border p-6 text-center transition-colors\", over && \"border-primary bg-accent\")}\n        data-ckui=\"upload-drop\"\n        onDragOver={(e) => {\n          e.preventDefault();\n          setOver(true);\n        }}\n        onDragLeave={() => setOver(false)}\n        onDrop={(e) => {\n          e.preventDefault();\n          setOver(false);\n          add(e.dataTransfer.files);\n        }}\n      >\n        <p className=\"text-muted-foreground\">{t(\"uploadQueue.drop\")}</p>\n        <Button size=\"sm\" onClick={() => input.current?.click()}>\n          {t(\"uploadQueue.add\")}\n        </Button>\n        <input\n          ref={input}\n          type=\"file\"\n          multiple\n          hidden\n          accept={accept}\n          aria-label={t(\"uploadQueue.add\")}\n          onChange={(e) => {\n            add(e.target.files ?? []);\n            e.target.value = \"\";\n          }}\n        />\n      </div>\n      {waiting.length > 0 && (\n        <div className=\"grid gap-2 rounded-lg border border-border p-3\" data-ckui=\"upload-waiting\" role=\"status\">\n          <p className=\"font-medium\">{t(\"uploadQueue.unfinished\")}</p>\n          <ul className=\"grid gap-1\">\n            {waiting.map((s) => (\n              <li key={`${s.name}:${s.size}`} className=\"flex flex-wrap items-center gap-2\">\n                <span className=\"min-w-0 flex-1 break-all\">{s.name}</span>\n                <span className=\"text-xs text-muted-foreground\">{megabytes(s.size)}</span>\n                <Button size=\"xs\" variant=\"ghost\" onClick={() => forget(s)}>\n                  {t(\"uploadQueue.forget\")}\n                </Button>\n              </li>\n            ))}\n          </ul>\n          <p className=\"text-xs text-muted-foreground\">{t(\"uploadQueue.unfinishedHint\")}</p>\n        </div>\n      )}\n      {entries.length > 0 && (\n        <>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <p className=\"text-muted-foreground\" aria-live=\"polite\">\n              {t(\"uploadQueue.summary\", { done, total: entries.length })}\n            </p>\n            <div className=\"ms-auto flex gap-2\">\n              {pausable && (\n                <Button size=\"sm\" variant=\"outline\" onClick={() => pause()}>\n                  {t(\"uploadQueue.pauseAll\")}\n                </Button>\n              )}\n              {resumable && (\n                <Button size=\"sm\" variant=\"outline\" onClick={() => resume()}>\n                  {t(\"uploadQueue.resumeAll\")}\n                </Button>\n              )}\n            </div>\n          </div>\n          <ul className=\"grid divide-y divide-border rounded-lg border border-border\">\n            {entries.map((e) => (\n              <li key={e.id} className=\"grid gap-1.5 p-3\" data-ckui=\"upload-entry\" data-status={e.status}>\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"min-w-0 flex-1 font-medium break-all\">{e.file.name}</span>\n                  <span className=\"text-xs text-muted-foreground\">{megabytes(e.file.size)}</span>\n                  {e.resumed && e.status !== \"done\" && <Badge variant=\"secondary\">{t(\"uploadQueue.resumed\")}</Badge>}\n                  <Badge variant={e.status === \"failed\" ? \"destructive\" : e.status === \"done\" ? \"outline\" : \"secondary\"}>{t(`uploadQueue.${e.status}`)}</Badge>\n                </div>\n                {e.status === \"uploading\" && (\n                  <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\" role=\"progressbar\" aria-label={e.file.name} aria-valuenow={percent(e)} aria-valuemin={0} aria-valuemax={100}>\n                    <div className=\"h-full bg-primary transition-[width]\" style={{ width: `${percent(e)}%` }} />\n                  </div>\n                )}\n                {e.error && <ErrorLine>{m.error(e.error)}</ErrorLine>}\n                <div className=\"flex flex-wrap gap-2\">\n                  {(ACTIVE.includes(e.status) || e.status === \"queued\") && (\n                    <Button size=\"xs\" variant=\"ghost\" onClick={() => pause(e.id)}>\n                      {t(\"uploadQueue.pause\")}\n                    </Button>\n                  )}\n                  {(e.status === \"paused\" || e.status === \"failed\") && (\n                    <Button size=\"xs\" variant=\"outline\" onClick={() => resume(e.id)}>\n                      {t(e.status === \"failed\" ? \"common.retry\" : \"uploadQueue.resume\")}\n                    </Button>\n                  )}\n                  {e.status !== \"done\" && (\n                    <Button size=\"xs\" variant=\"ghost\" onClick={() => remove(e)}>\n                      {t(\"common.remove\")}\n                    </Button>\n                  )}\n                </div>\n              </li>\n            ))}\n          </ul>\n        </>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"upload-queue.js","names":[],"sources":["../../../src/components/admin/upload-queue.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { toContentKitError, type ContentKitError } from \"../../client/errors.js\";\nimport type { FileInfo, RefBody } from \"../../client/generated/wire.js\";\nimport { samePath, type Progress, type UploadState } from \"../../client/media/client.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { megabytes } from \"../../i18n/messages.js\";\nimport { useFlowClient } from \"../../react/admin.js\";\nimport { useErrorReporter, useGuarded } from \"../../react/context.js\";\nimport { Badge } from \"#ckui/ui/badge\";\nimport { Button } from \"#ckui/ui/button\";\nimport { ErrorLine } from \"../social/parts.js\";\nimport { AdminRoot, type AdminFlowProps } from \"./shell.js\";\n\nexport interface UploadQueueProps extends AdminFlowProps {\n  /** Makes the host's item for a file (e.g. a video record) and resolves with its ref; once per file, a reload included. */\n  createItem: (file: File) => Promise<RefBody>;\n  /** The upload path in each item. Default \"source\". */\n  path?: string;\n  /** Where a file uploads in its new item (path and media type), in place of path. */\n  target?: (ref: RefBody, file: File, signal: AbortSignal) => Promise<{ path: string; type?: string }>;\n  /** Opens a file's item: an Open button once it has one. */\n  onOpen?: (ref: RefBody) => void;\n  /** The file picker's accept, e.g. \"video/*\". */\n  accept?: string;\n  /** Files uploading at once. Default 2. */\n  concurrency?: number;\n  /** Each committed file: its item and the upload as an editor reads it. */\n  onUploaded?: (ref: RefBody, file: FileInfo) => void;\n  /** The localStorage key unfinished uploads are kept under, to resume after a reload. Default \"ckui.uploads\". */\n  storageKey?: string;\n}\n\ntype Status = \"queued\" | \"creating\" | \"uploading\" | \"committing\" | \"done\" | \"failed\" | \"paused\";\n\ninterface Entry {\n  id: string;\n  file: File;\n  key: string;\n  status: Status;\n  progress?: Progress;\n  ref?: RefBody;\n  error?: ContentKitError;\n  /** Resumed from an upload saved before a reload. */\n  resumed?: boolean;\n}\n\ninterface Saved {\n  ref: RefBody;\n  name: string;\n  size: number;\n  state?: UploadState;\n}\n\nconst ACTIVE: readonly Status[] = [\"creating\", \"uploading\", \"committing\"];\nconst fingerprint = (f: File) => `${f.name}\\u0000${f.size}\\u0000${f.lastModified}`;\nlet seq = 0;\n\nfunction readSaved(key: string): Record<string, Saved> {\n  try {\n    return JSON.parse(localStorage.getItem(key) ?? \"{}\") as Record<string, Saved>;\n  } catch {\n    return {};\n  }\n}\n\nfunction writeSaved(key: string, fn: (all: Record<string, Saved>) => void) {\n  try {\n    const all = readSaved(key);\n    fn(all);\n    if (Object.keys(all).length) localStorage.setItem(key, JSON.stringify(all));\n    else localStorage.removeItem(key);\n  } catch {\n    // Without storage, a reload starts over.\n  }\n}\n\n/**\n * Many files, each into its own new item (createItem): uploads in the\n * background with progress, pause, retry and resume. An unfinished upload is\n * kept in localStorage; adding the same file after a reload continues it in\n * the same item. Leaving the page while files upload asks first.\n */\nexport function UploadQueue({ client: own, baseUrl, auth, guard, appearance, className, language, messages, ...p }: UploadQueueProps) {\n  const client = useFlowClient({ client: own, baseUrl, auth });\n  return (\n    <AdminRoot flow=\"upload-queue\" appearance={appearance} className={className} language={language} messages={messages} guard={guard}>\n      <Queue {...p} client={client} />\n    </AdminRoot>\n  );\n}\n\ntype Inner = Omit<UploadQueueProps, \"client\" | \"baseUrl\" | \"auth\" | \"guard\" | \"appearance\" | \"className\" | \"language\" | \"messages\"> & { client: ContentKitClient };\n\n/** The queue inside an admin flow that already has its root (ContentManager's bulk upload). */\nexport function UploadQueueBody(p: Inner) {\n  return <Queue {...p} />;\n}\n\nfunction Queue({ client, createItem, path = \"source\", target: place, accept, concurrency = 2, onUploaded, onOpen, storageKey = \"ckui.uploads\", onError }: Inner) {\n  const m = useMessages();\n  const { t } = m;\n  const report = useErrorReporter(onError);\n  const guarded = useGuarded();\n  const [entries, setEntries] = useState<Entry[]>([]);\n  const [waiting, setWaiting] = useState<Saved[]>(() => Object.values(readSaved(storageKey)));\n  const [over, setOver] = useState(false);\n  const input = useRef<HTMLInputElement>(null);\n  const controllers = useRef(new Map<string, AbortController>());\n  const latest = useRef({ createItem, onUploaded, place });\n  useEffect(() => {\n    latest.current = { createItem, onUploaded, place };\n  });\n\n  const patch = useCallback((id: string, next: Partial<Entry>) => setEntries((es) => es.map((e) => (e.id === id ? { ...e, ...next } : e))), []);\n\n  const run = useCallback(\n    async (entry: Entry) => {\n      const ctl = new AbortController();\n      controllers.current.set(entry.id, ctl);\n      const saved = readSaved(storageKey)[entry.key];\n      try {\n        let ref = entry.ref ?? saved?.ref;\n        if (!ref) {\n          patch(entry.id, { status: \"creating\", error: undefined });\n          ref = await latest.current.createItem(entry.file);\n          const made = ref;\n          writeSaved(storageKey, (all) => void (all[entry.key] = { ref: made, name: entry.file.name, size: entry.file.size }));\n        }\n        const target = ref;\n        patch(entry.id, { ref, error: undefined });\n        const where = latest.current.place;\n        const dest = where ? await guarded(() => where(target, entry.file, ctl.signal)) : { path, type: undefined };\n        patch(entry.id, { status: \"uploading\" });\n        const remember = (state: UploadState | null) =>\n          writeSaved(storageKey, (all) => void (all[entry.key] = { ref: target, name: entry.file.name, size: entry.file.size, state: state ?? undefined }));\n        const options = { ref, path: dest.path, type: dest.type, signal: ctl.signal, onProgress: (progress: Progress) => patch(entry.id, { progress }), onState: remember };\n        const up = await guarded(async () => {\n          try {\n            return await client.media.upload(entry.file, { ...options, resume: saved?.state });\n          } catch (e) {\n            if (saved?.state && toContentKitError(e).code === \"resume_mismatch\") return client.media.upload(entry.file, options);\n            throw e;\n          }\n        });\n        patch(entry.id, { status: \"committing\" });\n        const files = await guarded(() => client.media.commit(target, [{ op: \"put\", path: up.path, source_name: up.sourceName, blob: up.blob }], { signal: ctl.signal }));\n        writeSaved(storageKey, (all) => void delete all[entry.key]);\n        patch(entry.id, { status: \"done\", progress: undefined });\n        const file = files.find((f) => samePath(f.path, up.path));\n        if (file) latest.current.onUploaded?.(target, file);\n      } catch (e) {\n        const error = toContentKitError(e);\n        if (error.code === \"aborted\") patch(entry.id, { status: \"paused\" });\n        else {\n          patch(entry.id, { status: \"failed\", error });\n          report(error, \"upload\", entry.file.name);\n        }\n      } finally {\n        controllers.current.delete(entry.id);\n      }\n    },\n    [client, path, storageKey, guarded, patch, report],\n  );\n\n  // Starts queued files while fewer than concurrency run.\n  useEffect(() => {\n    const active = entries.filter((e) => ACTIVE.includes(e.status)).length;\n    const next = entries.filter((e) => e.status === \"queued\").slice(0, Math.max(0, concurrency - active));\n    if (!next.length) return;\n    setEntries((es) => es.map((e) => (next.some((n) => n.id === e.id) ? { ...e, status: \"creating\" } : e)));\n    for (const e of next) void run(e);\n  }, [entries, concurrency, run]);\n\n  const busy = entries.some((e) => ACTIVE.includes(e.status) || e.status === \"queued\");\n  useEffect(() => {\n    if (!busy) return;\n    const ask = (e: BeforeUnloadEvent) => {\n      e.preventDefault();\n      e.returnValue = \"\";\n    };\n    addEventListener(\"beforeunload\", ask);\n    return () => removeEventListener(\"beforeunload\", ask);\n  }, [busy]);\n  useEffect(() => {\n    const running = controllers.current;\n    return () => {\n      for (const c of running.values()) c.abort();\n    };\n  }, []);\n\n  const add = (files: Iterable<File>) => {\n    const saved = readSaved(storageKey);\n    const added: Entry[] = [];\n    for (const file of files) {\n      const key = fingerprint(file);\n      if (entries.some((e) => e.key === key && e.status !== \"done\") || added.some((e) => e.key === key)) continue;\n      added.push({ id: `u${++seq}`, file, key, status: \"queued\", ref: saved[key]?.ref, resumed: !!saved[key] });\n    }\n    if (!added.length) return;\n    setWaiting((w) => w.filter((s) => !added.some((a) => a.file.name === s.name && a.file.size === s.size)));\n    setEntries((es) => [...es, ...added]);\n  };\n  const pause = (id?: string) => {\n    for (const [k, c] of controllers.current) if (!id || k === id) c.abort();\n    setEntries((es) => es.map((e) => (e.status === \"queued\" && (!id || e.id === id) ? { ...e, status: \"paused\" } : e)));\n  };\n  const resume = (id?: string) => setEntries((es) => es.map((e) => ((e.status === \"paused\" || e.status === \"failed\") && (!id || e.id === id) ? { ...e, status: \"queued\", error: undefined } : e)));\n  const remove = (entry: Entry) => {\n    controllers.current.get(entry.id)?.abort();\n    if (entry.status !== \"done\") writeSaved(storageKey, (all) => void delete all[entry.key]);\n    setEntries((es) => es.filter((e) => e.id !== entry.id));\n  };\n  const forget = (s: Saved) => {\n    writeSaved(storageKey, (all) => {\n      for (const [k, v] of Object.entries(all)) if (v.name === s.name && v.size === s.size) delete all[k];\n    });\n    setWaiting((w) => w.filter((x) => x !== s));\n  };\n\n  const done = entries.filter((e) => e.status === \"done\").length;\n  const pausable = entries.some((e) => ACTIVE.includes(e.status) || e.status === \"queued\");\n  const resumable = entries.some((e) => e.status === \"paused\" || e.status === \"failed\");\n  const percent = (e: Entry) => (e.progress?.total ? Math.round((e.progress.loaded / e.progress.total) * 100) : 0);\n  return (\n    <>\n      <div\n        className={cn(\"grid justify-items-center gap-2 rounded-lg border-2 border-dashed border-border p-6 text-center transition-colors\", over && \"border-primary bg-accent\")}\n        data-ckui=\"upload-drop\"\n        onDragOver={(e) => {\n          e.preventDefault();\n          setOver(true);\n        }}\n        onDragLeave={() => setOver(false)}\n        onDrop={(e) => {\n          e.preventDefault();\n          setOver(false);\n          add(e.dataTransfer.files);\n        }}\n      >\n        <p className=\"text-muted-foreground\">{t(\"uploadQueue.drop\")}</p>\n        <Button size=\"sm\" onClick={() => input.current?.click()}>\n          {t(\"uploadQueue.add\")}\n        </Button>\n        <input\n          ref={input}\n          type=\"file\"\n          multiple\n          hidden\n          accept={accept}\n          aria-label={t(\"uploadQueue.add\")}\n          onChange={(e) => {\n            add(e.target.files ?? []);\n            e.target.value = \"\";\n          }}\n        />\n      </div>\n      {waiting.length > 0 && (\n        <div className=\"grid gap-2 rounded-lg border border-border p-3\" data-ckui=\"upload-waiting\" role=\"status\">\n          <p className=\"font-medium\">{t(\"uploadQueue.unfinished\")}</p>\n          <ul className=\"grid gap-1\">\n            {waiting.map((s) => (\n              <li key={`${s.name}:${s.size}`} className=\"flex flex-wrap items-center gap-2\">\n                <span className=\"min-w-0 flex-1 break-all\">{s.name}</span>\n                <span className=\"text-xs text-muted-foreground\">{megabytes(s.size)}</span>\n                <Button size=\"xs\" variant=\"ghost\" onClick={() => forget(s)}>\n                  {t(\"uploadQueue.forget\")}\n                </Button>\n              </li>\n            ))}\n          </ul>\n          <p className=\"text-xs text-muted-foreground\">{t(\"uploadQueue.unfinishedHint\")}</p>\n        </div>\n      )}\n      {entries.length > 0 && (\n        <>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <p className=\"text-muted-foreground\" aria-live=\"polite\">\n              {t(\"uploadQueue.summary\", { done, total: entries.length })}\n            </p>\n            <div className=\"ms-auto flex gap-2\">\n              {pausable && (\n                <Button size=\"sm\" variant=\"outline\" onClick={() => pause()}>\n                  {t(\"uploadQueue.pauseAll\")}\n                </Button>\n              )}\n              {resumable && (\n                <Button size=\"sm\" variant=\"outline\" onClick={() => resume()}>\n                  {t(\"uploadQueue.resumeAll\")}\n                </Button>\n              )}\n            </div>\n          </div>\n          <ul className=\"grid divide-y divide-border rounded-lg border border-border\">\n            {entries.map((e) => (\n              <li key={e.id} className=\"grid gap-1.5 p-3\" data-ckui=\"upload-entry\" data-status={e.status}>\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"min-w-0 flex-1 font-medium break-all\">{e.file.name}</span>\n                  <span className=\"text-xs text-muted-foreground\">{megabytes(e.file.size)}</span>\n                  {e.resumed && e.status !== \"done\" && <Badge variant=\"secondary\">{t(\"uploadQueue.resumed\")}</Badge>}\n                  <Badge variant={e.status === \"failed\" ? \"destructive\" : e.status === \"done\" ? \"outline\" : \"secondary\"}>{t(`uploadQueue.${e.status}`)}</Badge>\n                </div>\n                {e.status === \"uploading\" && (\n                  <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\" role=\"progressbar\" aria-label={e.file.name} aria-valuenow={percent(e)} aria-valuemin={0} aria-valuemax={100}>\n                    <div className=\"h-full bg-primary transition-[width]\" style={{ width: `${percent(e)}%` }} />\n                  </div>\n                )}\n                {e.error && <ErrorLine>{m.error(e.error)}</ErrorLine>}\n                <div className=\"flex flex-wrap gap-2\">\n                  {(ACTIVE.includes(e.status) || e.status === \"queued\") && (\n                    <Button size=\"xs\" variant=\"ghost\" onClick={() => pause(e.id)}>\n                      {t(\"uploadQueue.pause\")}\n                    </Button>\n                  )}\n                  {(e.status === \"paused\" || e.status === \"failed\") && (\n                    <Button size=\"xs\" variant=\"outline\" onClick={() => resume(e.id)}>\n                      {t(e.status === \"failed\" ? \"common.retry\" : \"uploadQueue.resume\")}\n                    </Button>\n                  )}\n                  {onOpen && e.ref && (e.status === \"done\" || e.status === \"failed\") && (\n                    <Button size=\"xs\" variant=\"outline\" onClick={() => onOpen(e.ref!)}>\n                      {t(\"uploadQueue.open\")}\n                    </Button>\n                  )}\n                  {e.status !== \"done\" && (\n                    <Button size=\"xs\" variant=\"ghost\" onClick={() => remove(e)}>\n                      {t(\"common.remove\")}\n                    </Button>\n                  )}\n                </div>\n              </li>\n            ))}\n          </ul>\n        </>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/content/card.d.ts

@@ -21,8 +21,15 @@ export interface ContentCardProps {
     loadMedia?: boolean;
     /** The group kinds whose chips show, in order; default every kind the card names. */
     groupKinds?: readonly string[];
-    /** Chips per group kind. Default 3. */
-    chips?: number;
+    /** Chips per group kind, or `{ base, lg }` to show a different number from the lg breakpoint. Default 3. */
+    chips?: number | {
+        base: number;
+        lg: number;
+    };
+    /** After a kind's chips, a "+N" chip counting the ones left out. Default false. */
+    chipOverflow?: boolean;
+    /** Inline chips on one line, as many whole chips as fit (at least one); the "+N" counts the rest. Default false. */
+    chipFit?: boolean;
     /** Select which entity chips appear, before the per-kind chip limit. */
     filterEntity?: (entity: EntityChip, kind: string) => boolean;
     /** Bordered chips (default) or plain linked text. */
@@ -43,6 +50,10 @@ export interface ContentCardProps {
     ownerHref?: (g: GroupLike) => string | undefined;
     /** Over the cover: the host's badges for the card, placed in the cover's box; clicks reach the card. */
     decorate?: (card: Card) => ReactNode;
+    /** Mark updated, completed and (for staff) deleted cards over the cover. Default true; false when the host draws cardStatus itself. */
+    status?: boolean;
+    /** Dim the cover of what the reader disliked. Default true. */
+    dimDisliked?: boolean;
     /** Below the meta line: the host's own. */
     children?: ReactNode;
     className?: string;
@@ -53,11 +64,28 @@ export interface CardMetadata {
     traits?: boolean | readonly string[];
     pages?: boolean;
     duration?: boolean;
+    /** Group kinds named last in the meta line: the first entity of the first kind the card has, linked. */
+    groups?: readonly string[];
 }
+/** What a card says about the reader's standing and the work's state. */
+export interface CardStatus {
+    /** A newer version since the reader last read it, else within the last two weeks. */
+    updated: boolean;
+    completed: boolean;
+    /** Only staff and the item's creators are told. */
+    deleted: boolean;
+    disliked: boolean;
+}
+export declare function cardStatus(card: Card, now?: number): CardStatus;
+/** Quiet marks for a card's status: updated, completed and deleted. */
+export declare function CardStatusBadges({ card, className }: {
+    card: Card;
+    className?: string;
+}): import('react').JSX.Element | null;
 /** Why a card is locked, in words (its price when it is on sale); null when it opens. */
 export declare function lockLabel(m: Translator, a: CardAccess, tiers?: readonly string[], labels?: Labels): string | null;
 /** One content in a listing: cover (a video the reader opens previews over it on hover), title, version, groups, counts, the reader's progress and why it is locked; what its kind's locked view hides is absent. */
-export declare function ContentCard({ card, client, href, onOpen, shape, aspectRatio, titlePosition, loadMedia, groupKinds, chips, filterEntity, entityStyle, entityLayout, metadata, showCounts, tiers, labels, owner, ownerHref, decorate, children, className }: ContentCardProps): import('react').JSX.Element;
+export declare function ContentCard({ card, client, href, onOpen, shape, aspectRatio, titlePosition, loadMedia, groupKinds, chips, chipOverflow, chipFit, filterEntity, entityStyle, entityLayout, metadata, showCounts, tiers, labels, owner, ownerHref, decorate, status, dimDisliked, children, className }: ContentCardProps): import('react').JSX.Element;
 /** The group that owns a content (a channel): its avatar and name, linking to its page. */
 export declare function OwnerChip({ group, href, className, loadMedia }: {
     group: GroupLike;