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

package/dist/components/admin/stats-dashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"stats-dashboard.js","names":[],"sources":["../../../src/components/admin/stats-dashboard.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ContentKitError } from \"../../client/errors.js\";\nimport type { Period } from \"../../client/discovery.js\";\nimport type { RankedContent } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useFlowClient } from \"../../react/admin.js\";\nimport { useActivity, useTopContents } from \"../../react/stats.js\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"#ckui/ui/select\";\nimport { AdminRoot, LoadFailed, NoAccess, Rows, type AdminFlowProps } from \"./shell.js\";\n\ntype Choice = string | { value: string; label: string };\ntype Metric = \"views\" | \"comments\";\n\nexport interface StatsDashboardProps extends AdminFlowProps {\n  /** Content kinds offered: codes, or codes with labels; the first shows first. */\n  kinds: readonly Choice[];\n  /** A ranked item's link; default its path. */\n  contentHref?: (content: RankedContent) => string | undefined;\n  /** Rows in the ranking. Default 10. */\n  limit?: number;\n}\n\nconst choices = (list: readonly Choice[]) => list.map((c) => (typeof c === \"string\" ? { value: c, label: c } : c));\nconst DAYS = [7, 30, 90] as const;\nconst METRICS: readonly Metric[] = [\"views\", \"comments\"];\nconst PERIODS: readonly Period[] = [\"7d\", \"30d\", \"90d\", \"365d\", \"all\"];\nconst refused = (e?: ContentKitError) => e?.code === \"forbidden\" || e?.code === \"unauthorized\";\n\n/**\n * Content statistics for staff (root:content:view-restricted): a kind's views\n * per day (view sessions, distinct and signed-in viewers) and its content\n * ranked by views or comments over a period. Views need the signal plane;\n * without it the dashboard says so and still ranks by comments.\n */\nexport function StatsDashboard({ client: own, baseUrl, auth, guard, appearance, className, language, messages, ...p }: StatsDashboardProps) {\n  const client = useFlowClient({ client: own, baseUrl, auth });\n  return (\n    <AdminRoot flow=\"stats-dashboard\" appearance={appearance} className={className} language={language} messages={messages} guard={guard}>\n      <Dashboard {...p} client={client} />\n    </AdminRoot>\n  );\n}\n\ntype Inner = Omit<StatsDashboardProps, \"client\" | \"baseUrl\" | \"auth\" | \"guard\" | \"appearance\" | \"className\" | \"language\" | \"messages\"> & { client: ContentKitClient };\n\nfunction Dashboard({ kinds, contentHref, limit = 10, client }: Inner) {\n  const { t } = useMessages();\n  const options = choices(kinds);\n  const [kind, setKind] = useState(options[0]?.value ?? \"\");\n  const [days, setDays] = useState<number>(7);\n  const [metric, setMetric] = useState<Metric>(\"views\");\n  const [period, setPeriod] = useState<Period>(\"30d\");\n  const activity = useActivity(kind ? { kind, days } : null, { client });\n  const top = useTopContents(kind ? { kind, metric, period, limit } : null, { client });\n  if (refused(activity.error) || refused(top.error)) return <NoAccess>{t(\"stats.noAccess\")}</NoAccess>;\n  const rows = activity.data?.days ?? [];\n  const most = Math.max(1, ...rows.map((d) => d.views));\n  const total = rows.reduce((n, d) => n + d.views, 0);\n  return (\n    <>\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <h2 className=\"text-base font-semibold\">{t(\"stats.title\")}</h2>\n        {options.length > 1 && (\n          <Pick label={t(\"stats.kind\")} value={kind} onChange={setKind} options={options} />\n        )}\n      </div>\n\n      <section className=\"grid gap-3\" data-ckui=\"stats-activity\">\n        <div className=\"flex flex-wrap items-center justify-between gap-2\">\n          <h3 className=\"font-medium\">{t(\"stats.activity\")}</h3>\n          <Pick label={t(\"stats.days\")} value={String(days)} onChange={(v) => setDays(Number(v))} options={DAYS.map((d) => ({ value: String(d), label: t(\"stats.lastDays\", { count: d }) }))} />\n        </div>\n        {activity.unavailable ? (\n          <p className=\"text-muted-foreground\" role=\"status\">\n            {t(\"stats.unavailable\")}\n          </p>\n        ) : activity.error ? (\n          <LoadFailed error={activity.error} message={t(\"stats.loadFailed\")} retry={activity.reload} />\n        ) : activity.loading && !activity.data ? (\n          <Rows count={2} />\n        ) : !rows.length ? (\n          <p className=\"text-muted-foreground\">{t(\"stats.noActivity\")}</p>\n        ) : (\n          <table className=\"w-full text-left tabular-nums\" aria-busy={activity.loading}>\n            <thead className=\"text-xs text-muted-foreground\">\n              <tr>\n                <th className=\"py-1 font-medium\">{t(\"stats.date\")}</th>\n                <th className=\"py-1 font-medium\">{t(\"stats.views\")}</th>\n                <th className=\"py-1 text-end font-medium\">{t(\"stats.viewers\")}</th>\n                <th className=\"py-1 text-end font-medium\">{t(\"stats.users\")}</th>\n              </tr>\n            </thead>\n            <tbody>\n              {rows.map((d) => (\n                <tr key={d.date} className=\"border-t border-border\" data-ckui=\"stats-day\">\n                  <td className=\"py-1.5 pe-3 whitespace-nowrap\">{d.date}</td>\n                  <td className=\"w-1/2 py-1.5 pe-3\">\n                    <span className=\"flex items-center gap-2\">\n                      <span aria-hidden className=\"h-2 rounded-full bg-primary\" style={{ width: `${Math.max(2, (d.views / most) * 100)}%` }} />\n                      {d.views}\n                    </span>\n                  </td>\n                  <td className=\"py-1.5 text-end\">{d.viewers}</td>\n                  <td className=\"py-1.5 text-end\">{d.users}</td>\n                </tr>\n              ))}\n            </tbody>\n            <tfoot>\n              <tr className=\"border-t border-border font-medium\">\n                <td className=\"py-1.5\">{t(\"stats.total\")}</td>\n                <td className=\"py-1.5\" data-ckui=\"stats-total\">\n                  {total}\n                </td>\n                <td />\n                <td />\n              </tr>\n            </tfoot>\n          </table>\n        )}\n      </section>\n\n      <section className=\"grid gap-3\" data-ckui=\"stats-top\">\n        <div className=\"flex flex-wrap items-center justify-between gap-2\">\n          <h3 className=\"font-medium\">{t(\"stats.top\")}</h3>\n          <div className=\"flex flex-wrap gap-2\">\n            <Pick label={t(\"stats.metric\")} value={metric} onChange={(v) => setMetric(v as Metric)} options={METRICS.map((x) => ({ value: x, label: t(`stats.metric_${x}`) }))} />\n            <Pick label={t(\"stats.period\")} value={period} onChange={(v) => setPeriod(v as Period)} options={PERIODS.map((x) => ({ value: x, label: t(`stats.period_${x}`) }))} />\n          </div>\n        </div>\n        {top.unavailable ? (\n          <p className=\"text-muted-foreground\" role=\"status\">\n            {t(\"stats.unavailable\")}\n          </p>\n        ) : top.error ? (\n          <LoadFailed error={top.error} message={t(\"stats.loadFailed\")} retry={top.reload} />\n        ) : top.loading && !top.data ? (\n          <Rows count={3} />\n        ) : !top.data?.contents.length ? (\n          <p className=\"text-muted-foreground\">{t(\"stats.noTop\")}</p>\n        ) : (\n          <ol className=\"grid divide-y divide-border rounded-lg border border-border\" aria-busy={top.loading}>\n            {top.data.contents.map((c, i) => {\n              const href = contentHref ? contentHref(c) : c.path;\n              return (\n                <li key={c.id} className=\"flex items-center gap-3 p-2.5\" data-ckui=\"stats-ranked\">\n                  <span className=\"w-6 text-end text-muted-foreground tabular-nums\">{i + 1}</span>\n                  {href ? (\n                    <a className=\"min-w-0 flex-1 break-words hover:underline\" href={href}>\n                      {c.title}\n                    </a>\n                  ) : (\n                    <span className=\"min-w-0 flex-1 break-words\">{c.title}</span>\n                  )}\n                  <span className=\"tabular-nums\" data-ckui=\"stats-value\">\n                    {c.value}\n                  </span>\n                </li>\n              );\n            })}\n          </ol>\n        )}\n      </section>\n    </>\n  );\n}\n\nfunction Pick({ label, value, onChange, options }: { label: string; value: string; onChange: (v: string) => void; options: { value: string; label: string }[] }) {\n  return (\n    <Select value={value} onValueChange={(v) => onChange(String(v))}>\n      <SelectTrigger size=\"sm\" aria-label={label}>\n        <SelectValue>{(v: string) => options.find((o) => o.value === v)?.label ?? v}</SelectValue>\n      </SelectTrigger>\n      <SelectContent>\n        {options.map((o) => (\n          <SelectItem key={o.value} value={o.value}>\n            {o.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"stats-dashboard.js","names":[],"sources":["../../../src/components/admin/stats-dashboard.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useState } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ContentKitError } from \"../../client/errors.js\";\nimport { formatDuration } from \"../../client/gallery.js\";\nimport type { ActivityDay } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useFlowClient } from \"../../react/admin.js\";\nimport { useActivity } from \"../../react/stats.js\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"#ckui/ui/select\";\nimport { AdminRoot, LoadFailed, NoAccess, Rows, type AdminFlowProps } from \"./shell.js\";\n\ntype Choice = string | { value: string; label: string };\n\nexport interface StatsDashboardProps extends AdminFlowProps {\n  /** Content kinds offered: codes, or codes with labels; the first shows first. */\n  kinds: readonly Choice[];\n}\n\nconst choices = (list: readonly Choice[]) => list.map((c) => (typeof c === \"string\" ? { value: c, label: c } : c));\nconst DAYS = [10, 30, 90] as const;\nconst refused = (e?: ContentKitError) => e?.code === \"forbidden\" || e?.code === \"unauthorized\";\n\n// Validated categorical slots (light / dark steps), stacked bottom to top.\nconst AUDIENCES = [\n  { key: \"anon\", fill: \"bg-[#2a78d6] dark:bg-[#3987e5]\" },\n  { key: \"free\", fill: \"bg-[#eb6834] dark:bg-[#d95926]\" },\n  { key: \"premium\", fill: \"bg-[#1baf7a] dark:bg-[#199e70]\" },\n] as const;\n\n/**\n * Staff statistics from measured attention: distinct people per UTC day who\n * read or played at least one item, by audience (anonymous, free, premium).\n * People are distinct within a day only, so days are never summed into a\n * period-unique total.\n */\nexport function StatsDashboard({ client: own, baseUrl, auth, guard, appearance, className, language, messages, ...p }: StatsDashboardProps) {\n  const client = useFlowClient({ client: own, baseUrl, auth });\n  return (\n    <AdminRoot flow=\"stats-dashboard\" appearance={appearance} className={className} language={language} messages={messages} guard={guard}>\n      <Dashboard {...p} client={client} />\n    </AdminRoot>\n  );\n}\n\ntype Inner = Omit<StatsDashboardProps, \"client\" | \"baseUrl\" | \"auth\" | \"guard\" | \"appearance\" | \"className\" | \"language\" | \"messages\"> & { client: ContentKitClient };\n\nfunction Dashboard({ kinds, client }: Inner) {\n  const { t } = useMessages();\n  const options = choices(kinds);\n  const [kind, setKind] = useState(options[0]?.value ?? \"\");\n  const [days, setDays] = useState<number>(DAYS[0]);\n  const activity = useActivity(kind ? { kind, days } : null, { client });\n  if (refused(activity.error)) return <NoAccess>{t(\"stats.noAccess\")}</NoAccess>;\n  // Newest first from the server; the chart reads oldest to newest.\n  const rows = [...(activity.data?.days ?? [])].reverse();\n  return (\n    <>\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <h2 className=\"text-base font-semibold\">{t(\"stats.title\")}</h2>\n        {options.length > 1 && <Pick label={t(\"stats.kind\")} value={kind} onChange={setKind} options={options} />}\n      </div>\n\n      <section className=\"grid gap-3\" data-ckui=\"stats-activity\">\n        <div className=\"flex flex-wrap items-center justify-between gap-2\">\n          <div className=\"grid gap-0.5\">\n            <h3 className=\"font-medium\">{t(\"stats.activity\")}</h3>\n            <p className=\"text-xs text-muted-foreground\">{t(\"stats.visitorsNote\")}</p>\n          </div>\n          <Pick\n            label={t(\"stats.days\")}\n            value={String(days)}\n            onChange={(v) => setDays(Number(v))}\n            options={DAYS.map((d) => ({ value: String(d), label: t(\"stats.lastDays\", { count: d }) }))}\n          />\n        </div>\n        {activity.unavailable ? (\n          <p className=\"text-muted-foreground\" role=\"status\">\n            {t(\"stats.unavailable\")}\n          </p>\n        ) : activity.error ? (\n          <LoadFailed error={activity.error} message={t(\"stats.loadFailed\")} retry={activity.reload} />\n        ) : activity.loading && !activity.data ? (\n          <Rows count={3} />\n        ) : (\n          <div className=\"grid gap-4\" aria-busy={activity.loading}>\n            <Today day={rows.at(-1)} />\n            <Chart rows={rows} />\n            <DayTable rows={rows} />\n          </div>\n        )}\n      </section>\n    </>\n  );\n}\n\nfunction Today({ day }: { day?: ActivityDay }) {\n  const { t } = useMessages();\n  const tiles = [\n    { label: t(\"stats.visitors\"), value: day?.readers ?? 0, fill: undefined },\n    ...AUDIENCES.map((a) => ({ label: t(`stats.${a.key}`), value: day?.[a.key] ?? 0, fill: a.fill })),\n  ];\n  return (\n    <div className=\"grid gap-2\" data-ckui=\"stats-today\">\n      <p className=\"text-xs font-medium text-muted-foreground\">\n        {t(\"stats.today\")}\n        {day && day.active_ms > 0 && (\n          <span className=\"font-normal\">\n            {\" · \"}\n            {t(\"stats.activeTime\")} {formatDuration(Math.floor(day.active_ms / 1000))}\n          </span>\n        )}\n      </p>\n      <dl className=\"grid grid-cols-2 gap-2 sm:grid-cols-4\">\n        {tiles.map((tile) => (\n          <div key={tile.label} className=\"grid gap-0.5 rounded-lg border border-border p-3\">\n            <dt className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n              {tile.fill && <span aria-hidden className={cn(\"size-2.5 rounded-sm\", tile.fill)} />}\n              {tile.label}\n            </dt>\n            <dd className=\"text-xl font-semibold tabular-nums\">{tile.value}</dd>\n          </div>\n        ))}\n      </dl>\n    </div>\n  );\n}\n\nfunction Chart({ rows }: { rows: ActivityDay[] }) {\n  const m = useMessages();\n  const { t } = m;\n  const [active, setActive] = useState<number | null>(null);\n  const most = Math.max(0, ...rows.map((d) => d.readers));\n  const scale = most || 1;\n  const every = Math.ceil(rows.length / 10);\n  const short = new Intl.DateTimeFormat(m.language, { month: \"short\", day: \"numeric\", timeZone: \"UTC\" });\n  const long = new Intl.DateTimeFormat(m.language, { dateStyle: \"medium\", timeZone: \"UTC\" });\n  const at = (date: string) => new Date(`${date}T00:00:00Z`);\n  const shown = active === null ? undefined : rows[active];\n  return (\n    <figure className=\"grid gap-2\" data-ckui=\"stats-chart\">\n      <figcaption className=\"flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground\">\n        {AUDIENCES.map((a) => (\n          <span key={a.key} className=\"flex items-center gap-1.5\">\n            <span aria-hidden className={cn(\"size-2.5 rounded-sm\", a.fill)} />\n            {t(`stats.${a.key}`)}\n          </span>\n        ))}\n        <span className=\"ms-auto tabular-nums\">{t(\"stats.peak\", { count: most })}</span>\n      </figcaption>\n      <div className=\"relative\">\n        <div className=\"pointer-events-none absolute inset-x-0 top-0 border-t border-dashed border-border\" aria-hidden />\n        <div className=\"pointer-events-none absolute inset-x-0 top-1/2 border-t border-dashed border-border/60\" aria-hidden />\n        <ol className=\"relative flex h-48 items-end gap-1 border-b border-border\" onMouseLeave={() => setActive(null)}>\n          {rows.map((d, i) => (\n            <li\n              key={d.date}\n              tabIndex={0}\n              data-ckui=\"stats-day\"\n              aria-label={`${long.format(at(d.date))}: ${t(\"stats.visitors\")} ${d.readers}, ${t(\"stats.anon\")} ${d.anon}, ${t(\"stats.free\")} ${d.free}, ${t(\"stats.premium\")} ${d.premium}`}\n              className=\"flex h-full min-w-0 flex-1 cursor-default flex-col justify-end rounded-sm outline-none hover:bg-muted/40 focus-visible:bg-muted/40 focus-visible:ring-1 focus-visible:ring-ring\"\n              onMouseEnter={() => setActive(i)}\n              onFocus={() => setActive(i)}\n              onBlur={() => setActive(null)}\n            >\n              {/* 2px surface gaps between segments; the top segment carries the 4px rounded end. */}\n              <span className=\"mx-auto flex w-full max-w-10 flex-col-reverse gap-[2px]\" style={{ height: `${(d.readers / scale) * 100}%` }}>\n                {AUDIENCES.map((a, j) => {\n                  const value = d[a.key];\n                  if (!value) return null;\n                  const top = AUDIENCES.slice(j + 1).every((b) => !d[b.key]);\n                  return <span key={a.key} className={cn(\"min-h-[2px] w-full\", a.fill, top && \"rounded-t-[4px]\")} style={{ flexGrow: value, flexBasis: 0 }} />;\n                })}\n              </span>\n            </li>\n          ))}\n        </ol>\n        {shown && active !== null && (\n          <div\n            role=\"tooltip\"\n            className=\"pointer-events-none absolute -top-2 z-10 grid min-w-36 -translate-y-full gap-1 rounded-md border border-border bg-popover p-2 text-xs text-popover-foreground shadow-md\"\n            style={{ left: `clamp(0%, ${((active + 0.5) / rows.length) * 100}% - 4.5rem, calc(100% - 9rem))` }}\n          >\n            <p className=\"font-medium\">{long.format(at(shown.date))}</p>\n            <p className=\"flex justify-between gap-3 tabular-nums\">\n              <span>{t(\"stats.visitors\")}</span>\n              <span className=\"font-semibold\">{shown.readers}</span>\n            </p>\n            {[...AUDIENCES].reverse().map((a) => (\n              <p key={a.key} className=\"flex items-center justify-between gap-3 tabular-nums text-muted-foreground\">\n                <span className=\"flex items-center gap-1.5\">\n                  <span aria-hidden className={cn(\"size-2 rounded-sm\", a.fill)} />\n                  {t(`stats.${a.key}`)}\n                </span>\n                <span className=\"text-popover-foreground\">{shown[a.key]}</span>\n              </p>\n            ))}\n          </div>\n        )}\n      </div>\n      <ol aria-hidden className=\"flex gap-1 text-[11px] text-muted-foreground tabular-nums\">\n        {rows.map((d, i) => (\n          <li key={d.date} className=\"min-w-0 flex-1 overflow-visible text-center whitespace-nowrap\">\n            {(rows.length - 1 - i) % every === 0 ? short.format(at(d.date)) : \"\"}\n          </li>\n        ))}\n      </ol>\n      {most === 0 && <p className=\"text-muted-foreground\">{t(\"stats.noActivity\")}</p>}\n    </figure>\n  );\n}\n\nfunction DayTable({ rows }: { rows: ActivityDay[] }) {\n  const { t } = useMessages();\n  return (\n    <details className=\"text-sm\">\n      <summary className=\"cursor-pointer text-xs text-muted-foreground\">{t(\"stats.showTable\")}</summary>\n      <table className=\"mt-2 w-full text-left tabular-nums\">\n        <thead className=\"text-xs text-muted-foreground\">\n          <tr>\n            <th className=\"py-1 font-medium\">{t(\"stats.date\")}</th>\n            <th className=\"py-1 text-end font-medium\">{t(\"stats.visitors\")}</th>\n            <th className=\"py-1 text-end font-medium\">{t(\"stats.anon\")}</th>\n            <th className=\"py-1 text-end font-medium\">{t(\"stats.free\")}</th>\n            <th className=\"py-1 text-end font-medium\">{t(\"stats.premium\")}</th>\n            <th className=\"py-1 text-end font-medium\">{t(\"stats.activeTime\")}</th>\n          </tr>\n        </thead>\n        <tbody>\n          {[...rows].reverse().map((d) => (\n            <tr key={d.date} className=\"border-t border-border\">\n              <td className=\"py-1.5 pe-3 whitespace-nowrap\">{d.date}</td>\n              <td className=\"py-1.5 text-end\">{d.readers}</td>\n              <td className=\"py-1.5 text-end\">{d.anon}</td>\n              <td className=\"py-1.5 text-end\">{d.free}</td>\n              <td className=\"py-1.5 text-end\">{d.premium}</td>\n              <td className=\"py-1.5 text-end\">{formatDuration(Math.floor(d.active_ms / 1000))}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </details>\n  );\n}\n\nfunction Pick({ label, value, onChange, options }: { label: string; value: string; onChange: (v: string) => void; options: { value: string; label: string }[] }) {\n  return (\n    <Select value={value} onValueChange={(v) => onChange(String(v))}>\n      <SelectTrigger size=\"sm\" aria-label={label}>\n        <SelectValue>{(v: string) => options.find((o) => o.value === v)?.label ?? v}</SelectValue>\n      </SelectTrigger>\n      <SelectContent>\n        {options.map((o) => (\n          <SelectItem key={o.value} value={o.value}>\n            {o.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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"}

package/dist/components/admin/upload-queue.d.ts

@@ -1,3 +1,4 @@
+import { ContentKitClient } from '../../client/client.js';
 import { FileInfo, RefBody } from '../../client/generated/wire.js';
 import { AdminFlowProps } from './shell.js';
 export interface UploadQueueProps extends AdminFlowProps {
@@ -5,6 +6,13 @@ export interface UploadQueueProps extends AdminFlowProps {
     createItem: (file: File) => Promise<RefBody>;
     /** The upload path in each item. Default "source". */
     path?: string;
+    /** Where a file uploads in its new item (path and media type), in place of path. */
+    target?: (ref: RefBody, file: File, signal: AbortSignal) => Promise<{
+        path: string;
+        type?: string;
+    }>;
+    /** Opens a file's item: an Open button once it has one. */
+    onOpen?: (ref: RefBody) => void;
     /** The file picker's accept, e.g. "video/*". */
     accept?: string;
     /** Files uploading at once. Default 2. */
@@ -21,3 +29,9 @@ export interface UploadQueueProps extends AdminFlowProps {
  * the same item. Leaving the page while files upload asks first.
  */
 export declare function UploadQueue({ client: own, baseUrl, auth, guard, appearance, className, language, messages, ...p }: UploadQueueProps): import('react').JSX.Element;
+type Inner = Omit<UploadQueueProps, "client" | "baseUrl" | "auth" | "guard" | "appearance" | "className" | "language" | "messages"> & {
+    client: ContentKitClient;
+};
+/** The queue inside an admin flow that already has its root (ContentManager's bulk upload). */
+export declare function UploadQueueBody(p: Inner): import('react').JSX.Element;
+export {};

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

@@ -43,133 +43,144 @@ function w({ client: e, baseUrl: t, auth: n, guard: r, appearance: i, className:
 		language: o,
 		messages: s,
 		guard: r,
-		children: /* @__PURE__ */ g(T, {
+		children: /* @__PURE__ */ g(E, {
 			...c,
 			client: d
 		})
 	});
 }
-function T({ client: l, createItem: u, path: w = "source", accept: T, concurrency: E = 2, onUploaded: D, storageKey: O = "ckui.uploads", onError: k }) {
-	let A = r(), { t: j } = A, M = i(k), N = a(), [P, F] = m([]), [I, L] = m(() => Object.values(S(O))), [R, z] = m(!1), B = p(null), V = p(/* @__PURE__ */ new Map()), H = p({
+function T(e) {
+	return /* @__PURE__ */ g(E, { ...e });
+}
+function E({ client: l, createItem: u, path: w = "source", target: T, accept: E, concurrency: D = 2, onUploaded: O, onOpen: k, storageKey: A = "ckui.uploads", onError: j }) {
+	let M = r(), { t: N } = M, P = i(j), F = a(), [I, L] = m([]), [R, z] = m(() => Object.values(S(A))), [B, V] = m(!1), H = p(null), U = p(/* @__PURE__ */ new Map()), W = p({
 		createItem: u,
-		onUploaded: D
+		onUploaded: O,
+		place: T
 	});
 	f(() => {
-		H.current = {
+		W.current = {
 			createItem: u,
-			onUploaded: D
+			onUploaded: O,
+			place: T
 		};
 	});
-	let U = d((e, t) => F((n) => n.map((n) => n.id === e ? {
+	let G = d((e, t) => L((n) => n.map((n) => n.id === e ? {
 		...n,
 		...t
-	} : n)), []), W = d(async (n) => {
+	} : n)), []), K = d(async (n) => {
 		let r = new AbortController();
-		V.current.set(n.id, r);
-		let i = S(O)[n.key];
+		U.current.set(n.id, r);
+		let i = S(A)[n.key];
 		try {
 			let a = n.ref ?? i?.ref;
 			if (!a) {
-				U(n.id, {
+				G(n.id, {
 					status: "creating",
 					error: void 0
-				}), a = await H.current.createItem(n.file);
+				}), a = await W.current.createItem(n.file);
 				let e = a;
-				C(O, (t) => void (t[n.key] = {
+				C(A, (t) => void (t[n.key] = {
 					ref: e,
 					name: n.file.name,
 					size: n.file.size
 				}));
 			}
 			let o = a;
-			U(n.id, {
-				status: "uploading",
+			G(n.id, {
 				ref: a,
 				error: void 0
 			});
-			let s = {
-				ref: a,
+			let s = W.current.place, c = s ? await F(() => s(o, n.file, r.signal)) : {
 				path: w,
+				type: void 0
+			};
+			G(n.id, { status: "uploading" });
+			let u = {
+				ref: a,
+				path: c.path,
+				type: c.type,
 				signal: r.signal,
-				onProgress: (e) => U(n.id, { progress: e }),
-				onState: (e) => C(O, (t) => void (t[n.key] = {
+				onProgress: (e) => G(n.id, { progress: e }),
+				onState: (e) => C(A, (t) => void (t[n.key] = {
 					ref: o,
 					name: n.file.name,
 					size: n.file.size,
 					state: e ?? void 0
 				}))
-			}, c = await N(async () => {
+			}, d = await F(async () => {
 				try {
 					return await l.media.upload(n.file, {
-						...s,
+						...u,
 						resume: i?.state
 					});
 				} catch (t) {
-					if (i?.state && e(t).code === "resume_mismatch") return l.media.upload(n.file, s);
+					if (i?.state && e(t).code === "resume_mismatch") return l.media.upload(n.file, u);
 					throw t;
 				}
 			});
-			U(n.id, { status: "committing" });
-			let u = await N(() => l.media.commit(o, [{
+			G(n.id, { status: "committing" });
+			let f = await F(() => l.media.commit(o, [{
 				op: "put",
-				path: c.path,
-				blob: c.blob
+				path: d.path,
+				source_name: d.sourceName,
+				blob: d.blob
 			}], { signal: r.signal }));
-			C(O, (e) => void delete e[n.key]), U(n.id, {
+			C(A, (e) => void delete e[n.key]), G(n.id, {
 				status: "done",
 				progress: void 0
 			});
-			let d = u.find((e) => t(e.path, c.path));
-			d && H.current.onUploaded?.(o, d);
+			let p = f.find((e) => t(e.path, d.path));
+			p && W.current.onUploaded?.(o, p);
 		} catch (t) {
 			let r = e(t);
-			r.code === "aborted" ? U(n.id, { status: "paused" }) : (U(n.id, {
+			r.code === "aborted" ? G(n.id, { status: "paused" }) : (G(n.id, {
 				status: "failed",
 				error: r
-			}), M(r, "upload", n.file.name));
+			}), P(r, "upload", n.file.name));
 		} finally {
-			V.current.delete(n.id);
+			U.current.delete(n.id);
 		}
 	}, [
 		l,
 		w,
-		O,
-		N,
-		U,
-		M
+		A,
+		F,
+		G,
+		P
 	]);
 	f(() => {
-		let e = P.filter((e) => y.includes(e.status)).length, t = P.filter((e) => e.status === "queued").slice(0, Math.max(0, E - e));
+		let e = I.filter((e) => y.includes(e.status)).length, t = I.filter((e) => e.status === "queued").slice(0, Math.max(0, D - e));
 		if (t.length) {
-			F((e) => e.map((e) => t.some((t) => t.id === e.id) ? {
+			L((e) => e.map((e) => t.some((t) => t.id === e.id) ? {
 				...e,
 				status: "creating"
 			} : e));
-			for (let e of t) W(e);
+			for (let e of t) K(e);
 		}
 	}, [
-		P,
-		E,
-		W
+		I,
+		D,
+		K
 	]);
-	let G = P.some((e) => y.includes(e.status) || e.status === "queued");
+	let q = I.some((e) => y.includes(e.status) || e.status === "queued");
 	f(() => {
-		if (!G) return;
+		if (!q) return;
 		let e = (e) => {
 			e.preventDefault(), e.returnValue = "";
 		};
 		return addEventListener("beforeunload", e), () => removeEventListener("beforeunload", e);
-	}, [G]), f(() => {
-		let e = V.current;
+	}, [q]), f(() => {
+		let e = U.current;
 		return () => {
 			for (let t of e.values()) t.abort();
 		};
 	}, []);
-	let K = (e) => {
-		let t = S(O), n = [];
+	let J = (e) => {
+		let t = S(A), n = [];
 		for (let r of e) {
 			let e = b(r);
-			P.some((t) => t.key === e && t.status !== "done") || n.some((t) => t.key === e) || n.push({
+			I.some((t) => t.key === e && t.status !== "done") || n.some((t) => t.key === e) || n.push({
 				id: `u${++x}`,
 				file: r,
 				key: e,
@@ -178,70 +189,70 @@ function T({ client: l, createItem: u, path: w = "source", accept: T, concurrenc
 				resumed: !!t[e]
 			});
 		}
-		n.length && (L((e) => e.filter((e) => !n.some((t) => t.file.name === e.name && t.file.size === e.size))), F((e) => [...e, ...n]));
-	}, q = (e) => {
-		for (let [t, n] of V.current) (!e || t === e) && n.abort();
-		F((t) => t.map((t) => t.status === "queued" && (!e || t.id === e) ? {
+		n.length && (z((e) => e.filter((e) => !n.some((t) => t.file.name === e.name && t.file.size === e.size))), L((e) => [...e, ...n]));
+	}, Y = (e) => {
+		for (let [t, n] of U.current) (!e || t === e) && n.abort();
+		L((t) => t.map((t) => t.status === "queued" && (!e || t.id === e) ? {
 			...t,
 			status: "paused"
 		} : t));
-	}, J = (e) => F((t) => t.map((t) => (t.status === "paused" || t.status === "failed") && (!e || t.id === e) ? {
+	}, X = (e) => L((t) => t.map((t) => (t.status === "paused" || t.status === "failed") && (!e || t.id === e) ? {
 		...t,
 		status: "queued",
 		error: void 0
-	} : t)), Y = (e) => {
-		V.current.get(e.id)?.abort(), e.status !== "done" && C(O, (t) => void delete t[e.key]), F((t) => t.filter((t) => t.id !== e.id));
-	}, X = (e) => {
-		C(O, (t) => {
+	} : t)), Z = (e) => {
+		U.current.get(e.id)?.abort(), e.status !== "done" && C(A, (t) => void delete t[e.key]), L((t) => t.filter((t) => t.id !== e.id));
+	}, Q = (e) => {
+		C(A, (t) => {
 			for (let [n, r] of Object.entries(t)) r.name === e.name && r.size === e.size && delete t[n];
-		}), L((t) => t.filter((t) => t !== e));
-	}, Z = P.filter((e) => e.status === "done").length, Q = P.some((e) => y.includes(e.status) || e.status === "queued"), ee = P.some((e) => e.status === "paused" || e.status === "failed"), $ = (e) => e.progress?.total ? Math.round(e.progress.loaded / e.progress.total * 100) : 0;
+		}), z((t) => t.filter((t) => t !== e));
+	}, ee = I.filter((e) => e.status === "done").length, te = I.some((e) => y.includes(e.status) || e.status === "queued"), ne = I.some((e) => e.status === "paused" || e.status === "failed"), $ = (e) => e.progress?.total ? Math.round(e.progress.loaded / e.progress.total * 100) : 0;
 	return /* @__PURE__ */ _(h, { children: [
 		/* @__PURE__ */ _("div", {
-			className: v("grid justify-items-center gap-2 rounded-lg border-2 border-dashed border-border p-6 text-center transition-colors", R && "border-primary bg-accent"),
+			className: v("grid justify-items-center gap-2 rounded-lg border-2 border-dashed border-border p-6 text-center transition-colors", B && "border-primary bg-accent"),
 			"data-ckui": "upload-drop",
 			onDragOver: (e) => {
-				e.preventDefault(), z(!0);
+				e.preventDefault(), V(!0);
 			},
-			onDragLeave: () => z(!1),
+			onDragLeave: () => V(!1),
 			onDrop: (e) => {
-				e.preventDefault(), z(!1), K(e.dataTransfer.files);
+				e.preventDefault(), V(!1), J(e.dataTransfer.files);
 			},
 			children: [
 				/* @__PURE__ */ g("p", {
 					className: "text-muted-foreground",
-					children: j("uploadQueue.drop")
+					children: N("uploadQueue.drop")
 				}),
 				/* @__PURE__ */ g(o, {
 					size: "sm",
-					onClick: () => B.current?.click(),
-					children: j("uploadQueue.add")
+					onClick: () => H.current?.click(),
+					children: N("uploadQueue.add")
 				}),
 				/* @__PURE__ */ g("input", {
-					ref: B,
+					ref: H,
 					type: "file",
 					multiple: !0,
 					hidden: !0,
-					accept: T,
-					"aria-label": j("uploadQueue.add"),
+					accept: E,
+					"aria-label": N("uploadQueue.add"),
 					onChange: (e) => {
-						K(e.target.files ?? []), e.target.value = "";
+						J(e.target.files ?? []), e.target.value = "";
 					}
 				})
 			]
 		}),
-		I.length > 0 && /* @__PURE__ */ _("div", {
+		R.length > 0 && /* @__PURE__ */ _("div", {
 			className: "grid gap-2 rounded-lg border border-border p-3",
 			"data-ckui": "upload-waiting",
 			role: "status",
 			children: [
 				/* @__PURE__ */ g("p", {
 					className: "font-medium",
-					children: j("uploadQueue.unfinished")
+					children: N("uploadQueue.unfinished")
 				}),
 				/* @__PURE__ */ g("ul", {
 					className: "grid gap-1",
-					children: I.map((e) => /* @__PURE__ */ _("li", {
+					children: R.map((e) => /* @__PURE__ */ _("li", {
 						className: "flex flex-wrap items-center gap-2",
 						children: [
 							/* @__PURE__ */ g("span", {
@@ -255,44 +266,44 @@ function T({ client: l, createItem: u, path: w = "source", accept: T, concurrenc
 							/* @__PURE__ */ g(o, {
 								size: "xs",
 								variant: "ghost",
-								onClick: () => X(e),
-								children: j("uploadQueue.forget")
+								onClick: () => Q(e),
+								children: N("uploadQueue.forget")
 							})
 						]
 					}, `${e.name}:${e.size}`))
 				}),
 				/* @__PURE__ */ g("p", {
 					className: "text-xs text-muted-foreground",
-					children: j("uploadQueue.unfinishedHint")
+					children: N("uploadQueue.unfinishedHint")
 				})
 			]
 		}),
-		P.length > 0 && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", {
+		I.length > 0 && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", {
 			className: "flex flex-wrap items-center gap-2",
 			children: [/* @__PURE__ */ g("p", {
 				className: "text-muted-foreground",
 				"aria-live": "polite",
-				children: j("uploadQueue.summary", {
-					done: Z,
-					total: P.length
+				children: N("uploadQueue.summary", {
+					done: ee,
+					total: I.length
 				})
 			}), /* @__PURE__ */ _("div", {
 				className: "ms-auto flex gap-2",
-				children: [Q && /* @__PURE__ */ g(o, {
+				children: [te && /* @__PURE__ */ g(o, {
 					size: "sm",
 					variant: "outline",
-					onClick: () => q(),
-					children: j("uploadQueue.pauseAll")
-				}), ee && /* @__PURE__ */ g(o, {
+					onClick: () => Y(),
+					children: N("uploadQueue.pauseAll")
+				}), ne && /* @__PURE__ */ g(o, {
 					size: "sm",
 					variant: "outline",
-					onClick: () => J(),
-					children: j("uploadQueue.resumeAll")
+					onClick: () => X(),
+					children: N("uploadQueue.resumeAll")
 				})]
 			})]
 		}), /* @__PURE__ */ g("ul", {
 			className: "grid divide-y divide-border rounded-lg border border-border",
-			children: P.map((e) => /* @__PURE__ */ _("li", {
+			children: I.map((e) => /* @__PURE__ */ _("li", {
 				className: "grid gap-1.5 p-3",
 				"data-ckui": "upload-entry",
 				"data-status": e.status,
@@ -310,11 +321,11 @@ function T({ client: l, createItem: u, path: w = "source", accept: T, concurrenc
 							}),
 							e.resumed && e.status !== "done" && /* @__PURE__ */ g(s, {
 								variant: "secondary",
-								children: j("uploadQueue.resumed")
+								children: N("uploadQueue.resumed")
 							}),
 							/* @__PURE__ */ g(s, {
 								variant: e.status === "failed" ? "destructive" : e.status === "done" ? "outline" : "secondary",
-								children: j(`uploadQueue.${e.status}`)
+								children: N(`uploadQueue.${e.status}`)
 							})
 						]
 					}),
@@ -330,27 +341,33 @@ function T({ client: l, createItem: u, path: w = "source", accept: T, concurrenc
 							style: { width: `${$(e)}%` }
 						})
 					}),
-					e.error && /* @__PURE__ */ g(c, { children: A.error(e.error) }),
+					e.error && /* @__PURE__ */ g(c, { children: M.error(e.error) }),
 					/* @__PURE__ */ _("div", {
 						className: "flex flex-wrap gap-2",
 						children: [
 							(y.includes(e.status) || e.status === "queued") && /* @__PURE__ */ g(o, {
 								size: "xs",
 								variant: "ghost",
-								onClick: () => q(e.id),
-								children: j("uploadQueue.pause")
+								onClick: () => Y(e.id),
+								children: N("uploadQueue.pause")
 							}),
 							(e.status === "paused" || e.status === "failed") && /* @__PURE__ */ g(o, {
 								size: "xs",
 								variant: "outline",
-								onClick: () => J(e.id),
-								children: j(e.status === "failed" ? "common.retry" : "uploadQueue.resume")
+								onClick: () => X(e.id),
+								children: N(e.status === "failed" ? "common.retry" : "uploadQueue.resume")
+							}),
+							k && e.ref && (e.status === "done" || e.status === "failed") && /* @__PURE__ */ g(o, {
+								size: "xs",
+								variant: "outline",
+								onClick: () => k(e.ref),
+								children: N("uploadQueue.open")
 							}),
 							e.status !== "done" && /* @__PURE__ */ g(o, {
 								size: "xs",
 								variant: "ghost",
-								onClick: () => Y(e),
-								children: j("common.remove")
+								onClick: () => Z(e),
+								children: N("common.remove")
 							})
 						]
 					})
@@ -360,6 +377,6 @@ function T({ client: l, createItem: u, path: w = "source", accept: T, concurrenc
 	] });
 }
 //#endregion
-export { w as UploadQueue };
+export { w as UploadQueue, T as UploadQueueBody };
 
 //# sourceMappingURL=upload-queue.js.map