@openrails/contentkit-ui 0.0.0-placeholder → 0.68.0

package/dist/components/media-gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-gallery.js","names":[],"sources":["../../src/components/media-gallery.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport {\n  AlertCircleIcon,\n  ArrowLeft01Icon,\n  ArrowRight01Icon,\n  Cancel01Icon,\n  CarouselHorizontalIcon,\n  Download01Icon,\n  GridViewIcon,\n  MusicNote01Icon,\n  PlayIcon,\n  SquareLock02Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useCallback, useMemo, useState, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../appearance.js\";\nimport { formatDuration, galleryItems, stageAspect, type GalleryItem, type GalleryLockedItem, type GalleryMediaItem } from \"../client/gallery.js\";\nimport { useCarousel, useGalleryView, useHlsPlayer, useRefreshBeforeExpiry, type GalleryViewOptions, type HlsPlayerOptions } from \"../react/gallery.js\";\nimport { useInlinePreview } from \"../react/inline-preview.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { publicRenditions, type PublicPreset } from \"../client/public.js\";\nimport { ContentKitUiRoot, useScopeProps } from \"../scope.js\";\nimport { RenditionImg } from \"./rendition-img.js\";\nimport type { ContentKitClient } from \"../client/client.js\";\nimport type { FileInfo, ReadResult, RefBody } from \"../client/generated/wire.js\";\nimport { useOptionalContentKitClient } from \"../react/context.js\";\nimport { useMediaRead } from \"../react/read.js\";\nimport { previewStartAt, SpriteFrame, VideoPlayer } from \"./video-player.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { ToggleGroup, ToggleGroupItem } from \"#ckui/ui/toggle-group\";\n\nexport interface MediaGalleryProps extends GalleryViewOptions, Pick<HlsPlayerOptions, \"xhrSetup\" | \"refresh\" | \"abr\"> {\n  /**\n   * The item to show, read through the client: its read (refreshed before\n   * the URLs expire, after commits), HLS bases, playlist auth and grant\n   * refresh. Or pass `read` (and hlsBase, xhrSetup, refresh) yourself.\n   */\n  item?: RefBody;\n  /** With item: only files under this path prefix. */\n  prefix?: string;\n  /** With item: each audio file's download name signed into its URL. */\n  download?: boolean;\n  /**\n   * The read API result: files in manifest order with this viewer's access\n   * (scope it with a prefix). A download read adds each audio file's download.\n   * With `refresh`, the gallery reads again shortly before `read.expires`.\n   */\n  read?: ReadResult | null;\n  /** A ladder's HLS folder from the read's `hls` dir: client.media.hlsBase(ref, dir). */\n  hlsBase?: (dir: string) => string;\n  /** The item's poster (its public preset, or a URL), drawn on the first video. */\n  poster?: PublicPreset | string | null;\n  /** Where the first video's preview starts, seconds (e.g. the poster's frame); default 10% in. */\n  previewStart?: number;\n  /** Playable videos preview muted inline (hover, or in view on touch); default the provider's. */\n  inlinePreview?: boolean;\n  /** The host's unlock call to action, drawn over the locked item. */\n  renderLocked?: (locked: { count: number; videos: number }) => ReactNode;\n  /** Below the carousel, for its current item (e.g. downloads). */\n  renderDetails?: (item: GalleryItem) => ReactNode;\n  /** `sizes` for carousel images. Default \"(min-width: 768px) 720px, 100vw\". */\n  sizes?: string;\n  /** Tallest the carousel gets; taller media letterboxes. Default \"80svh\": every slide at its native aspect, full width, never taller than the screen; \"none\" lifts it. */\n  maxHeight?: string;\n  label?: string;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n  /** Overrides the provider's client (item). */\n  client?: ContentKitClient;\n}\n\ninterface Ctx extends MediaGalleryProps {\n  items: GalleryItem[];\n}\n\n// The item's poster and preview start belong to its first video.\nfunction videoArt(ctx: Ctx, item: GalleryMediaItem): { poster?: PublicPreset | string; start: number } {\n  const first = ctx.items.find((i): i is GalleryMediaItem => i.kind === \"video\") === item;\n  return { poster: first ? (ctx.poster ?? undefined) : undefined, start: previewStartAt(first ? ctx.previewStart : undefined, item.file.dur) };\n}\n\nconst baseOf = (ctx: Ctx, item: GalleryMediaItem) => (item.dir && ctx.hlsBase ? ctx.hlsBase(item.dir) : null);\n\n/**\n * A post's images and videos as a swipeable carousel or a tile grid that opens\n * a lightbox, with a view toggle. One item renders alone.\n */\nexport function MediaGallery(given: MediaGalleryProps) {\n  const props = useItemRead(given);\n  const { read, label, className, appearance, view: chosen, defaultView, onViewChange, storageKey } = props;\n  const { t } = useMessages();\n  const items = useMemo(() => galleryItems(read), [read]);\n  useRefreshBeforeExpiry(read?.expires, props.refresh);\n  const [view, setView] = useGalleryView({ view: chosen, defaultView, onViewChange, storageKey });\n  const [index, setIndex] = useState(0);\n  const [lightbox, setLightbox] = useState<number | null>(null);\n  if (items.length === 0) return null;\n  const ctx: Ctx = { ...props, items };\n  const multi = items.length > 1;\n  const current = Math.min(index, items.length - 1);\n  const shown = multi ? view : \"carousel\";\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"@container grid gap-2\", className)} data-ckui=\"media-gallery\" data-view={shown} role=\"region\" aria-label={label ?? t(\"gallery.label\")}>\n      {multi && (\n        <div className=\"flex items-center justify-between gap-2\" data-ckui=\"gallery-header\">\n          <span className=\"text-sm text-muted-foreground tabular-nums\" data-ckui=\"gallery-count\">\n            {shown === \"carousel\" ? t(\"gallery.counter\", { current: current + 1, total: items.length }) : null}\n          </span>\n          <ToggleGroup aria-label={t(\"gallery.view\")} value={[shown]} onValueChange={(v) => v[0] && setView(v[0] as typeof view)}>\n            <ToggleGroupItem value=\"carousel\" aria-label={t(\"gallery.carousel\")} title={t(\"gallery.carousel\")}>\n              <HugeiconsIcon icon={CarouselHorizontalIcon} strokeWidth={2} />\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"grid\" aria-label={t(\"gallery.grid\")} title={t(\"gallery.grid\")}>\n              <HugeiconsIcon icon={GridViewIcon} strokeWidth={2} />\n            </ToggleGroupItem>\n          </ToggleGroup>\n        </div>\n      )}\n      {shown === \"carousel\" ? (\n        <>\n          <Carousel ctx={ctx} index={current} onIndex={setIndex} />\n          {props.renderDetails?.(items[current]!)}\n        </>\n      ) : (\n        <Grid ctx={ctx} onOpen={setLightbox} />\n      )}\n      <Lightbox ctx={ctx} index={lightbox} onIndex={setLightbox} />\n    </ContentKitUiRoot>\n  );\n}\n\nconst NO_ITEM: RefBody = { kind: \"\", id: \"\" };\n\n// With item, the read, HLS bases, playlist auth and refresh come from the client.\nfunction useItemRead(p: MediaGalleryProps): MediaGalleryProps {\n  const client = useOptionalContentKitClient(p.client);\n  if (p.item && !client) throw new Error(\"contentkit-ui: MediaGallery item needs `client` or a <ContentKitProvider>\");\n  // One refresh timer for the gallery and its players, keyed by r.refresh.\n  const r = useMediaRead(p.item ?? NO_ITEM, { prefix: p.prefix, download: p.download, read: p.item ? p.read : null, refresh: false, client });\n  const item = p.item;\n  const hlsBase = useCallback((dir: string) => client!.media.hlsBase(item!, dir), [client, item]);\n  if (!item || !client) return p;\n  return { ...p, read: r.read, hlsBase: p.hlsBase ?? hlsBase, xhrSetup: p.xhrSetup ?? client.media.xhrSetup, refresh: p.refresh ?? r.refresh };\n}\n\nfunction Carousel({ ctx, index: given, onIndex, lightbox }: { ctx: Ctx; index: number; onIndex: (i: number) => void; lightbox?: boolean }) {\n  const { t } = useMessages();\n  const { items } = ctx;\n  const c = useCarousel({ count: items.length, index: given, onIndexChange: onIndex });\n  const { index } = c;\n  const multi = items.length > 1;\n  const stage = lightbox ? {} : { aspectRatio: String(stageAspect(items, index)), maxHeight: ctx.maxHeight ?? \"80svh\" };\n  return (\n    <div\n      className={cn(\"group/carousel relative outline-none\", lightbox ? \"size-full\" : \"grid gap-2\")}\n      role={multi ? \"group\" : undefined}\n      aria-roledescription={multi ? \"carousel\" : undefined}\n      aria-label={multi ? (ctx.label ?? t(\"gallery.label\")) : undefined}\n      tabIndex={multi && !lightbox ? 0 : undefined}\n      onKeyDown={multi && !lightbox ? c.onKeyDown : undefined}\n      data-ckui=\"carousel\"\n    >\n      <div\n        className={cn(\n          \"relative w-full touch-pan-y overflow-hidden select-none\",\n          lightbox ? \"h-full\" : \"rounded-lg bg-muted transition-[aspect-ratio] duration-300 ease-out motion-reduce:transition-none\",\n        )}\n        style={stage}\n        data-ckui=\"stage\"\n        {...(multi ? c.swipe : {})}\n      >\n        <div\n          className={cn(\"flex h-full\", c.dragging ? \"transition-none\" : \"transition-transform duration-300 ease-out motion-reduce:transition-none\")}\n          style={{ transform: `translateX(calc(${-index * 100}% + ${c.offset}px))` }}\n        >\n          {items.map((item, i) => {\n            const near = Math.abs(i - index) <= 1;\n            return (\n              <div\n                key={item.key}\n                className=\"relative h-full w-full shrink-0 overflow-hidden\"\n                role={multi ? \"group\" : undefined}\n                aria-roledescription={multi ? \"slide\" : undefined}\n                aria-label={multi ? t(\"gallery.slide\", { current: i + 1, total: items.length }) : undefined}\n                aria-hidden={i !== index || undefined}\n                inert={i !== index}\n                data-ckui=\"slide\"\n                data-current={i === index ? \"\" : undefined}\n              >\n                {near && <Slide ctx={ctx} item={item} position={i} active={i === index} lightbox={lightbox} />}\n              </div>\n            );\n          })}\n        </div>\n        {multi && (\n          <>\n            <NavButton side=\"prev\" hidden={index === 0} last={index === 1} onClick={c.prev} label={t(\"gallery.previous\")} lightbox={lightbox} />\n            <NavButton side=\"next\" hidden={index === items.length - 1} last={index === items.length - 2} onClick={c.next} label={t(\"gallery.next\")} lightbox={lightbox} />\n          </>\n        )}\n      </div>\n      {multi && !lightbox && items.length <= 12 && (\n        <div className=\"flex justify-center gap-0.5\" data-ckui=\"dots\">\n          {items.map((item, i) => (\n            <button\n              key={item.key}\n              type=\"button\"\n              className=\"group/dot flex size-4 items-center justify-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              aria-label={t(\"gallery.goTo\", { index: i + 1 })}\n              aria-current={i === index || undefined}\n              onClick={() => c.go(i)}\n            >\n              <span className={cn(\"size-1.5 rounded-full transition-colors\", i === index ? \"bg-foreground\" : \"bg-foreground/25 group-hover/dot:bg-foreground/50\")} />\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// A strip down the stage's side, clear of a video's control bar: the stage's\n// height follows each slide's aspect, so a centred-only target would move\n// between quick clicks. A swipe may start on it. The click that reaches an end\n// removes the button, so focus moves to the carousel and the arrow keys keep working.\nfunction NavButton({ side, hidden, last, onClick, label, lightbox }: { side: \"prev\" | \"next\"; hidden: boolean; last: boolean; onClick: () => void; label: string; lightbox?: boolean }) {\n  if (hidden) return null;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      data-ckui=\"gallery-nav\"\n      data-side={side}\n      onClick={(e) => {\n        const root = e.currentTarget.closest<HTMLElement>(\"[data-ckui=lightbox], [data-ckui=carousel][tabindex]\");\n        onClick();\n        if (last && document.activeElement === e.currentTarget) root?.focus({ preventScroll: true });\n      }}\n      className={cn(\n        \"group/nav absolute top-0 bottom-14 z-10 flex items-center outline-none\",\n        lightbox ? \"w-16 sm:w-20\" : \"w-12\",\n        side === \"prev\" ? (lightbox ? \"left-0 justify-start pl-3 sm:pl-5\" : \"left-0 justify-start pl-2\") : lightbox ? \"right-0 justify-end pr-3 sm:pr-5\" : \"right-0 justify-end pr-2\",\n      )}\n    >\n      <span\n        className={cn(\n          \"flex items-center justify-center rounded-full backdrop-blur-sm transition-colors group-focus-visible/nav:ring-3 group-focus-visible/nav:ring-ring/60\",\n          lightbox ? \"size-10 bg-white/10 text-white group-hover/nav:bg-white/20\" : \"size-8 bg-white/85 text-zinc-900 shadow-md group-hover/nav:bg-white\",\n        )}\n      >\n        <HugeiconsIcon icon={side === \"prev\" ? ArrowLeft01Icon : ArrowRight01Icon} strokeWidth={2} className=\"size-4\" />\n      </span>\n    </button>\n  );\n}\n\nfunction Slide({ ctx, item, position, active, lightbox }: { ctx: Ctx; item: GalleryItem; position: number; active: boolean; lightbox?: boolean }) {\n  const { t } = useMessages();\n  if (item.kind === \"locked\") return <Locked ctx={ctx} item={item} />;\n  const f = item.file;\n  if (item.kind === \"audio\") return <AudioSlide item={item} position={position} />;\n  if (item.kind === \"image\") {\n    if (!f.url) return f.failed ? <ImageFailed file={f} /> : <Processing>{t(\"gallery.processingImage\")}</Processing>;\n    // A public teaser of a locked item carries the unlock, so no one swipes past it to find it.\n    const locked = item.key.startsWith(\"preview/\") && !lightbox ? ctx.items.find((i): i is GalleryLockedItem => i.kind === \"locked\") : undefined;\n    return (\n      <>\n        <img\n          src={f.url}\n          alt={t(\"gallery.image\", { index: position + 1 })}\n          width={f.w}\n          height={f.h}\n          sizes={lightbox ? \"100vw\" : (ctx.sizes ?? \"(min-width: 768px) 720px, 100vw\")}\n          loading={active ? \"eager\" : \"lazy\"}\n          decoding=\"async\"\n          draggable={false}\n          className=\"absolute inset-0 size-full object-contain\"\n        />\n        {locked && <LockedBar ctx={ctx} item={locked} />}\n      </>\n    );\n  }\n  const { poster, start } = videoArt(ctx, item);\n  return (\n    <VideoPlayer\n      inlinePreview={lightbox ? false : ctx.inlinePreview}\n      previewStart={start}\n      layout=\"fill\"\n      base={baseOf(ctx, item)}\n      poster={poster}\n      width={f.w}\n      height={f.h}\n      duration={f.dur}\n      active={active}\n      xhrSetup={ctx.xhrSetup}\n      refresh={ctx.refresh}\n      expires={ctx.read?.expires}\n      abr={ctx.abr}\n      label={t(\"gallery.video\", { index: position + 1 })}\n      className={lightbox ? \"bg-transparent\" : undefined}\n    />\n  );\n}\n\n// An audio file (a ladder's M4A): a native player, its duration and, in a\n// download read, its download.\nfunction AudioSlide({ item, position }: { item: GalleryMediaItem; position: number }) {\n  const { t } = useMessages();\n  const f = item.file;\n  const name = (item.dir ?? f.path).replace(/\\/$/, \"\").split(\"/\").pop();\n  const label = t(\"gallery.audio\", { index: position + 1 });\n  return (\n    <div className=\"absolute inset-0 flex flex-col items-center justify-center gap-3 bg-muted p-4\" data-ckui=\"audio\">\n      <div className=\"flex min-w-0 items-center gap-2 text-sm text-muted-foreground\">\n        <HugeiconsIcon icon={MusicNote01Icon} className=\"size-5 shrink-0\" strokeWidth={1.75} />\n        {name && <span className=\"truncate\">{name}</span>}\n        {f.dur ? <span className=\"tabular-nums\">{formatDuration(f.dur)}</span> : null}\n      </div>\n      {f.failed ? (\n        <p className=\"text-sm text-destructive\" role=\"alert\">\n          {t(\"gallery.failedAudio\")}\n        </p>\n      ) : f.url ? (\n        <audio src={f.url} controls preload=\"metadata\" aria-label={label} className=\"w-full max-w-md\" data-ckui-noswipe=\"\" />\n      ) : (\n        <p className=\"text-sm text-muted-foreground\">{t(\"gallery.processingAudio\")}</p>\n      )}\n      {f.download && f.url && (\n        <a href={f.url} download={f.download} className=\"inline-flex items-center gap-1.5 text-sm underline-offset-4 hover:underline\" data-ckui-noswipe=\"\">\n          <HugeiconsIcon icon={Download01Icon} className=\"size-4\" strokeWidth={2} />\n          {t(\"gallery.download\")}\n        </a>\n      )}\n    </div>\n  );\n}\n\n// Why an image cannot be shown (editors only: the read API's failed fields).\nfunction ImageFailed({ file }: { file: FileInfo }) {\n  const { t, error } = useMessages();\n  const f = file.failed;\n  const text = f?.code ? error({ code: f.code, message: f.message, details: f.details, refusal: true }) : t(\"gallery.failedImage\");\n  return (\n    <div className=\"absolute inset-0 flex flex-col items-center justify-center gap-2 bg-muted p-4 text-center text-sm text-destructive\" role=\"alert\" data-ckui=\"image-failed\">\n      <HugeiconsIcon icon={AlertCircleIcon} className=\"size-6\" />\n      <p className=\"max-w-sm text-balance\">{text}</p>\n    </div>\n  );\n}\n\nfunction Processing({ children }: { children: string }) {\n  return (\n    <div className=\"absolute inset-0 flex items-center justify-center gap-2 bg-muted text-sm text-muted-foreground\">\n      <span aria-hidden className=\"size-4 rounded-full border-2 border-current/30 border-t-current motion-safe:animate-spin\" />\n      {children}\n    </div>\n  );\n}\n\nfunction lockedText(t: ReturnType<typeof useMessages>[\"t\"], count: number) {\n  return count === 1 ? t(\"gallery.lockedOne\") : t(\"gallery.lockedMany\", { count });\n}\n\nfunction Locked({ ctx, item, tile }: { ctx: Ctx; item: GalleryLockedItem; tile?: boolean }) {\n  const { t } = useMessages();\n  return (\n    <div className=\"absolute inset-0 overflow-hidden bg-muted\" data-ckui=\"locked\">\n      {item.backdrop && <img src={item.backdrop} alt=\"\" draggable={false} className=\"absolute inset-0 size-full scale-110 object-cover blur-xl\" />}\n      <div className={cn(\"absolute inset-0 flex flex-col items-center justify-center gap-3 p-4 text-center\", item.backdrop ? \"bg-black/45 text-white\" : \"text-foreground\")}>\n        <HugeiconsIcon icon={SquareLock02Icon} className={tile ? \"size-6\" : \"size-8\"} strokeWidth={1.75} />\n        {tile ? (\n          <span className=\"text-lg font-semibold tabular-nums\">+{item.count}</span>\n        ) : (\n          <>\n            <p className=\"text-sm font-medium text-balance\">{lockedText(t, item.count)}</p>\n            {ctx.renderLocked && <div data-ckui-noswipe=\"\">{ctx.renderLocked({ count: item.count, videos: item.videos })}</div>}\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction LockedBar({ ctx, item }: { ctx: Ctx; item: GalleryLockedItem }) {\n  const { t } = useMessages();\n  return (\n    <div\n      className=\"absolute inset-x-0 bottom-0 flex flex-wrap items-center justify-between gap-x-3 gap-y-2 bg-linear-to-t from-black/75 via-black/45 to-transparent px-4 pt-10 pb-4 text-white\"\n      data-ckui=\"locked-bar\"\n    >\n      <span className=\"flex items-center gap-2 text-sm font-medium\">\n        <HugeiconsIcon icon={SquareLock02Icon} className=\"size-5 shrink-0\" strokeWidth={1.75} />\n        {lockedText(t, item.count)}\n      </span>\n      {ctx.renderLocked && <div data-ckui-noswipe=\"\">{ctx.renderLocked({ count: item.count, videos: item.videos })}</div>}\n    </div>\n  );\n}\n\nfunction Grid({ ctx, onOpen }: { ctx: Ctx; onOpen: (i: number) => void }) {\n  const { t } = useMessages();\n  const n = ctx.items.length;\n  return (\n    <ul className={cn(\"grid gap-1\", n === 2 || n === 4 ? \"grid-cols-2\" : \"grid-cols-2 @md:grid-cols-3\")} data-ckui=\"grid\">\n      {ctx.items.map((item, i) => (\n        <li key={item.key}>\n          <Tile ctx={ctx} item={item} label={t(\"gallery.open\", { index: i + 1, total: n })} onOpen={() => onOpen(i)} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nfunction Tile({ ctx, item, label, onOpen }: { ctx: Ctx; item: GalleryItem; label: string; onOpen: () => void }) {\n  const [el, setEl] = useState<HTMLButtonElement | null>(null);\n  let body: ReactNode;\n  if (item.kind === \"locked\") body = <Locked ctx={ctx} item={item} tile />;\n  else if (item.kind === \"audio\")\n    body = (\n      <span className=\"absolute inset-0 flex flex-col items-center justify-center gap-1 bg-muted text-muted-foreground\">\n        <HugeiconsIcon icon={item.file.failed ? AlertCircleIcon : MusicNote01Icon} className={cn(\"size-7\", item.file.failed && \"text-destructive\")} strokeWidth={1.75} />\n        {item.file.dur ? <span className=\"text-[11px] font-medium tabular-nums\">{formatDuration(item.file.dur)}</span> : null}\n      </span>\n    );\n  else if (item.kind === \"image\")\n    body = item.file.url ? (\n      <img src={item.file.url} alt=\"\" loading=\"lazy\" decoding=\"async\" draggable={false} className=\"absolute inset-0 size-full object-cover transition-transform duration-300 motion-safe:group-hover:scale-[1.03]\" />\n    ) : item.file.failed ? (\n      <span className=\"absolute inset-0 flex items-center justify-center bg-muted text-destructive\">\n        <HugeiconsIcon icon={AlertCircleIcon} className=\"size-6\" />\n      </span>\n    ) : (\n      <Processing>{\"\"}</Processing>\n    );\n  else {\n    const f = item.file;\n    const { poster, start } = videoArt(ctx, item);\n    const covers = typeof poster === \"string\" ? [] : publicRenditions(poster);\n    const base = baseOf(ctx, item);\n    body = (\n      <>\n        {typeof poster === \"string\" ? (\n          <img src={poster} alt=\"\" loading=\"lazy\" decoding=\"async\" className=\"absolute inset-0 size-full object-cover\" />\n        ) : covers.length ? (\n          <RenditionImg outputs={covers} loading=\"lazy\" className=\"absolute inset-0 size-full object-cover\" />\n        ) : base ? (\n          <SpriteFrame vtt={`${base}sprite.vtt`} xhrSetup={ctx.xhrSetup} fit=\"cover\" />\n        ) : null}\n        {base && <TilePreview ctx={ctx} base={base} start={start} target={el} />}\n        {f.failed ? (\n          <span className=\"absolute inset-0 flex items-center justify-center bg-muted text-destructive\">\n            <HugeiconsIcon icon={AlertCircleIcon} className=\"size-6\" />\n          </span>\n        ) : !base ? (\n          <Processing>{\"\"}</Processing>\n        ) : (\n          <span className=\"pointer-events-none absolute top-1/2 left-1/2 flex size-10 -translate-1/2 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur-sm transition-opacity group-hover:opacity-0\">\n            <HugeiconsIcon icon={PlayIcon} className=\"ml-0.5 size-5 fill-current\" strokeWidth={1.5} />\n          </span>\n        )}\n        {f.dur ? (\n          <span className=\"pointer-events-none absolute right-1.5 bottom-1.5 rounded bg-black/65 px-1.5 py-0.5 text-[11px] font-medium text-white tabular-nums\">\n            {formatDuration(f.dur)}\n          </span>\n        ) : null}\n      </>\n    );\n  }\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      onClick={onOpen}\n      ref={setEl}\n      className=\"group relative block aspect-square w-full overflow-hidden rounded-md bg-muted outline-none focus-visible:ring-3 focus-visible:ring-ring/60\"\n      data-ckui=\"tile\"\n      data-kind={item.kind}\n    >\n      {body}\n    </button>\n  );\n}\n\n// A grid tile's inline preview; the tile opens the lightbox for real playback.\nfunction TilePreview({ ctx, base, start, target }: { ctx: Ctx; base: string; start: number; target: HTMLElement | null }) {\n  const player = useHlsPlayer({ src: `${base}master.m3u8`, xhrSetup: ctx.xhrSetup, refresh: ctx.refresh, expires: ctx.read?.expires, abr: ctx.abr, qualityKey: null });\n  useInlinePreview({ setting: ctx.inlinePreview, available: true, target, start: () => player.preview(start), stop: player.unload });\n  return (\n    <video\n      ref={player.ref}\n      muted\n      playsInline\n      preload=\"none\"\n      aria-hidden\n      tabIndex={-1}\n      className={cn(\n        \"pointer-events-none absolute inset-0 size-full object-cover opacity-0 transition-opacity duration-300 motion-reduce:transition-none\",\n        player.previewing && player.status === \"playing\" && \"opacity-100\",\n      )}\n      data-ckui=\"tile-preview\"\n    />\n  );\n}\n\nfunction Lightbox({ ctx, index, onIndex }: { ctx: Ctx; index: number | null; onIndex: (i: number | null) => void }) {\n  const { t } = useMessages();\n  const scope = useScopeProps(ctx.appearance);\n  const [shown, setShown] = useState(index ?? 0);\n  const [prev, setPrev] = useState(index);\n  if (index !== prev) {\n    setPrev(index);\n    if (index !== null) setShown(index);\n  }\n  const open = index !== null;\n  const c = useCarousel({ count: ctx.items.length, index: shown, onIndexChange: setShown });\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={(o) => !o && onIndex(null)}>\n      <DialogPrimitive.Portal {...scope} data-ckui-theme=\"dark\">\n        <DialogPrimitive.Backdrop className=\"fixed inset-0 z-50 bg-black duration-150 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:animate-none\" />\n        <DialogPrimitive.Popup\n          className=\"fixed inset-0 z-50 flex flex-col bg-black text-white outline-none duration-150 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:animate-none\"\n          data-ckui=\"lightbox\"\n          onKeyDown={c.onKeyDown}\n        >\n          <DialogPrimitive.Title className=\"sr-only\">{ctx.label ?? t(\"gallery.lightbox\")}</DialogPrimitive.Title>\n          <div className=\"flex h-14 shrink-0 items-center justify-between px-4\">\n            <span className=\"text-sm text-white/80 tabular-nums\">{ctx.items.length > 1 ? t(\"gallery.counter\", { current: shown + 1, total: ctx.items.length }) : null}</span>\n            <DialogPrimitive.Close render={<Button variant=\"ghost\" size=\"icon\" className=\"rounded-full text-white hover:bg-white/10 hover:text-white\" />}>\n              <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} />\n              <span className=\"sr-only\">{t(\"common.close\")}</span>\n            </DialogPrimitive.Close>\n          </div>\n          <div className=\"min-h-0 flex-1 pb-4 sm:px-4 sm:pb-6\">\n            {open && <Carousel ctx={ctx} index={shown} onIndex={setShown} lightbox />}\n          </div>\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/components/media-readiness-notice.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { ContentKitUiAppearance } from '../appearance.js';
+import { ContentKitClient } from '../client/client.js';
+import { ReadResult, RefBody } from '../client/generated/wire.js';
+export interface MediaReadinessNoticeProps {
+    /** The item; its editor read is polled while it processes. */
+    item: RefBody;
+    /** An editor read the host already has; otherwise fetched. */
+    read?: ReadResult | null;
+    /** Only uploads under this path prefix. */
+    prefix?: string;
+    /** Replaces the processing state's second line (e.g. who can see it meanwhile). */
+    description?: ReactNode;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+    client?: ContentKitClient;
+}
+/**
+ * An item's processing state for its editors: nothing once every upload is
+ * processed; while some process, a notice with the first video's encode
+ * progress; when uploads failed, which ones (they hold the item back until
+ * removed).
+ */
+export declare function MediaReadinessNotice({ item, read: given, prefix, description, className, appearance, client }: MediaReadinessNoticeProps): import('react').JSX.Element | null;

package/dist/components/media-readiness-notice.js

@@ -0,0 +1,61 @@
+import { useMessages as e } from "../i18n/context.js";
+import { ContentKitUiRoot as t } from "../scope.js";
+import { EncodeProgress as n } from "./encode-progress.js";
+import { isProcessing as r, processing as i } from "../client/media/windows.js";
+import { useMediaRead as a } from "../react/read.js";
+import { Alert as o, AlertDescription as s, AlertTitle as c } from "../ui/alert.js";
+import { isVideoType as l } from "../client/gallery.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { cn as f } from "cn";
+import { Alert02Icon as p, Loading03Icon as m } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as h } from "@hugeicons/react";
+//#region src/components/media-readiness-notice.tsx
+function g({ item: g, read: _, prefix: v, description: y, className: b, appearance: x, client: S }) {
+	let { t: C } = e(), w = a(g, {
+		editor: !0,
+		prefix: v,
+		read: _,
+		client: S
+	}), T = (w.read?.files ?? []).filter((e) => e.upload && !e.unattached), E = T.filter((e) => e.failed), D = i(w.read);
+	if (!w.read || !E.length && !D) return null;
+	let O = E.map((e) => e.path.split("/").pop()), k = T.find((e) => l(e.type) && r(e) && e.progress)?.progress;
+	return /* @__PURE__ */ u(t, {
+		appearance: x,
+		className: f("w-full", b),
+		"data-ckui": "readiness",
+		"data-state": E.length ? "failed" : "processing",
+		children: E.length ? /* @__PURE__ */ d(o, {
+			variant: "destructive",
+			role: "alert",
+			children: [
+				/* @__PURE__ */ u(h, {
+					icon: p,
+					strokeWidth: 2
+				}),
+				/* @__PURE__ */ u(c, { children: O.length === 1 ? C("readiness.failedOne", { name: O[0] }) : C("readiness.failedMany", {
+					count: O.length,
+					names: O.join(", ")
+				}) }),
+				/* @__PURE__ */ u(s, { children: C("readiness.failedHint") })
+			]
+		}) : /* @__PURE__ */ d(o, {
+			role: "status",
+			children: [
+				/* @__PURE__ */ u(h, {
+					icon: m,
+					strokeWidth: 2,
+					className: "motion-safe:animate-spin"
+				}),
+				/* @__PURE__ */ u(c, { children: C("readiness.processing") }),
+				/* @__PURE__ */ d(s, { children: [y ?? C("readiness.processingHint"), k && /* @__PURE__ */ u(n, {
+					progress: k,
+					className: "mt-2"
+				})] })
+			]
+		})
+	});
+}
+//#endregion
+export { g as MediaReadinessNotice };
+
+//# sourceMappingURL=media-readiness-notice.js.map

package/dist/components/media-readiness-notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-readiness-notice.js","names":[],"sources":["../../src/components/media-readiness-notice.tsx"],"sourcesContent":["import { Alert02Icon, Loading03Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport type { ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../appearance.js\";\nimport type { ContentKitClient } from \"../client/client.js\";\nimport type { ReadResult, RefBody } from \"../client/generated/wire.js\";\nimport { isVideoType } from \"../client/gallery.js\";\nimport { isProcessing, processing } from \"../client/media/windows.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { useMediaRead } from \"../react/read.js\";\nimport { ContentKitUiRoot } from \"../scope.js\";\nimport { Alert, AlertDescription, AlertTitle } from \"#ckui/ui/alert\";\nimport { EncodeProgress } from \"./encode-progress.js\";\n\nexport interface MediaReadinessNoticeProps {\n  /** The item; its editor read is polled while it processes. */\n  item: RefBody;\n  /** An editor read the host already has; otherwise fetched. */\n  read?: ReadResult | null;\n  /** Only uploads under this path prefix. */\n  prefix?: string;\n  /** Replaces the processing state's second line (e.g. who can see it meanwhile). */\n  description?: ReactNode;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n  client?: ContentKitClient;\n}\n\n/**\n * An item's processing state for its editors: nothing once every upload is\n * processed; while some process, a notice with the first video's encode\n * progress; when uploads failed, which ones (they hold the item back until\n * removed).\n */\nexport function MediaReadinessNotice({ item, read: given, prefix, description, className, appearance, client }: MediaReadinessNoticeProps) {\n  const { t } = useMessages();\n  const r = useMediaRead(item, { editor: true, prefix, read: given, client });\n  const uploads = (r.read?.files ?? []).filter((f) => f.upload && !f.unattached);\n  const failed = uploads.filter((f) => f.failed);\n  const busy = processing(r.read);\n  if (!r.read || (!failed.length && !busy)) return null;\n  const names = failed.map((f) => f.path.split(\"/\").pop()!);\n  const progress = uploads.find((f) => isVideoType(f.type) && isProcessing(f) && f.progress)?.progress;\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"w-full\", className)} data-ckui=\"readiness\" data-state={failed.length ? \"failed\" : \"processing\"}>\n      {failed.length ? (\n        <Alert variant=\"destructive\" role=\"alert\">\n          <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} />\n          <AlertTitle>{names.length === 1 ? t(\"readiness.failedOne\", { name: names[0]! }) : t(\"readiness.failedMany\", { count: names.length, names: names.join(\", \") })}</AlertTitle>\n          <AlertDescription>{t(\"readiness.failedHint\")}</AlertDescription>\n        </Alert>\n      ) : (\n        <Alert role=\"status\">\n          <HugeiconsIcon icon={Loading03Icon} strokeWidth={2} className=\"motion-safe:animate-spin\" />\n          <AlertTitle>{t(\"readiness.processing\")}</AlertTitle>\n          <AlertDescription>\n            {description ?? t(\"readiness.processingHint\")}\n            {progress && <EncodeProgress progress={progress} className=\"mt-2\" />}\n          </AlertDescription>\n        </Alert>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAmCA,SAAgB,EAAqB,EAAE,SAAM,MAAM,GAAO,WAAQ,gBAAa,cAAW,eAAY,aAAqC;CACzI,IAAM,EAAE,SAAM,EAAY,GACpB,IAAI,EAAa,GAAM;EAAE,QAAQ;EAAM;EAAQ,MAAM;EAAO;CAAO,CAAC,GACpE,KAAW,EAAE,MAAM,SAAS,CAAC,EAAA,CAAG,QAAQ,MAAM,EAAE,UAAU,CAAC,EAAE,UAAU,GACvE,IAAS,EAAQ,QAAQ,MAAM,EAAE,MAAM,GACvC,IAAO,EAAW,EAAE,IAAI;CAC9B,IAAI,CAAC,EAAE,QAAS,CAAC,EAAO,UAAU,CAAC,GAAO,OAAO;CACjD,IAAM,IAAQ,EAAO,KAAK,MAAM,EAAE,KAAK,MAAM,GAAG,CAAC,CAAC,IAAI,CAAE,GAClD,IAAW,EAAQ,MAAM,MAAM,EAAY,EAAE,IAAI,KAAK,EAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;CAC5F,OACE,kBAAC,GAAD;EAA8B;EAAY,WAAW,EAAG,UAAU,CAAS;EAAG,aAAU;EAAY,cAAY,EAAO,SAAS,WAAW;EACxI,UAAA,EAAO,SACN,kBAAC,GAAD;GAAO,SAAQ;GAAc,MAAK;GAAlC,UAAA;IACE,kBAAC,GAAD;KAAe,MAAM;KAAa,aAAa;IAAI,CAAA;IACnD,kBAAC,GAAD,EAAA,UAAa,EAAM,WAAW,IAAI,EAAE,uBAAuB,EAAE,MAAM,EAAM,GAAI,CAAC,IAAI,EAAE,wBAAwB;KAAE,OAAO,EAAM;KAAQ,OAAO,EAAM,KAAK,IAAI;IAAE,CAAC,EAAc,CAAA;IAC1K,kBAAC,GAAD,EAAA,UAAmB,EAAE,sBAAsB,EAAoB,CAAA;GAC1D;EAEP,CAAA,IAAA,kBAAC,GAAD;GAAO,MAAK;GAAZ,UAAA;IACE,kBAAC,GAAD;KAAe,MAAM;KAAe,aAAa;KAAG,WAAU;IAA4B,CAAA;IAC1F,kBAAC,GAAD,EAAA,UAAa,EAAE,sBAAsB,EAAc,CAAA;IACnD,kBAAC,GAAD,EAAA,UAAA,CACG,KAAe,EAAE,0BAA0B,GAC3C,KAAY,kBAAC,GAAD;KAA0B;KAAU,WAAU;IAAQ,CAAA,CACnD,EAAA,CAAA;GACb;;CAEO,CAAA;AAEtB"}

package/dist/components/player-controls.d.ts

@@ -0,0 +1,71 @@
+import { IconSvgElement } from '@hugeicons/react';
+import { ComponentProps } from 'react';
+import { Sprite } from '../react/player.js';
+/** The class of every control-bar button; a host's slotted buttons can share it. */
+export declare const playerButtonClass = "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-white outline-none transition-colors hover:bg-white/15 focus-visible:ring-2 focus-visible:ring-white/80 motion-reduce:transition-none data-popup-open:bg-white/15 [&_svg]:size-5 relative aria-pressed:after:absolute aria-pressed:after:bottom-1 aria-pressed:after:h-0.5 aria-pressed:after:w-4 aria-pressed:after:rounded-full aria-pressed:after:bg-player-accent";
+export declare const clock: (s: number) => string;
+export declare function ControlButton({ label, shortcut, icon, className, ...props }: Omit<ComponentProps<"button">, "children"> & {
+    label: string;
+    shortcut?: string;
+    icon: IconSvgElement;
+}): import('react').JSX.Element;
+export interface SeekBarProps {
+    time: number;
+    duration: number;
+    buffered?: number;
+    onSeek: (time: number) => void;
+    /** The position being dragged to, or null when the drag ends. */
+    onScrub?: (time: number | null) => void;
+    sprite?: Sprite | null;
+    /** The mini player's hairline along its bottom edge. */
+    thin?: boolean;
+    className?: string;
+}
+/** The seek slider: buffered range, drag to seek on release, keys in 5 s steps, a sprite and time preview on hover. */
+export declare function SeekBar({ time, duration, buffered, onSeek, onScrub, sprite, thin, className }: SeekBarProps): import('react').JSX.Element;
+export declare function VolumeControl({ volume, muted, onVolume, onMute }: {
+    volume: number;
+    muted: boolean;
+    onVolume: (v: number) => void;
+    onMute: () => void;
+}): import('react').JSX.Element;
+export interface MenuOption {
+    value: string;
+    label: string;
+}
+/** One settings row: its current value, and a submenu choosing it. */
+export interface MenuSection {
+    key: string;
+    label: string;
+    value: string;
+    options: readonly MenuOption[];
+    onChange: (value: string) => void;
+}
+export declare function SettingsMenu({ icon, label, sections, actions, container, onOpenChange, }: {
+    icon: IconSvgElement;
+    label: string;
+    sections: MenuSection[];
+    actions?: {
+        label: string;
+        onSelect: () => void;
+    }[];
+    container?: HTMLElement;
+    onOpenChange?: (open: boolean) => void;
+}): import('react').JSX.Element;
+/** The showing subtitle cues, drawn above the controls; markup comes from the browser's cue parser. */
+export declare function Captions({ cues, bottom }: {
+    cues: readonly VTTCue[];
+    bottom: string;
+}): import('react').JSX.Element | null;
+export interface SeekFlashState {
+    direction: -1 | 1;
+    /** The burst's total, e.g. 30 after three taps. */
+    seconds: number;
+}
+/** The "10 seconds" bubble for keyboard and double-tap seeks. */
+export declare function SeekFlash({ flash }: {
+    flash: SeekFlashState | null;
+}): import('react').JSX.Element | null;
+export declare function Spinner({ className }: {
+    className?: string;
+}): import('react').JSX.Element;

package/dist/components/player-controls.js

@@ -0,0 +1,264 @@
+import { useMessages as e } from "../i18n/context.js";
+import { AppearanceContext as t } from "../scope.js";
+import { DropdownMenu as n, DropdownMenuContent as r, DropdownMenuItem as i, DropdownMenuRadioGroup as a, DropdownMenuRadioItem as o, DropdownMenuSeparator as s, DropdownMenuSub as c, DropdownMenuSubContent as l, DropdownMenuSubTrigger as u, DropdownMenuTrigger as d } from "../ui/dropdown-menu.js";
+import { formatDuration as f } from "../client/gallery.js";
+import { spriteCueAt as p } from "../client/player.js";
+import { useContext as m, useLayoutEffect as h, useRef as g, useState as _ } from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { cn as x } from "cn";
+import { ArrowLeft01Icon as S, ArrowRight01Icon as C, VolumeHighIcon as w, VolumeLowIcon as T, VolumeOffIcon as E } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as D } from "@hugeicons/react";
+import { Slider as O } from "@base-ui/react/slider";
+//#region src/components/player-controls.tsx
+var k = "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-white outline-none transition-colors hover:bg-white/15 focus-visible:ring-2 focus-visible:ring-white/80 motion-reduce:transition-none data-popup-open:bg-white/15 [&_svg]:size-5 relative aria-pressed:after:absolute aria-pressed:after:bottom-1 aria-pressed:after:h-0.5 aria-pressed:after:w-4 aria-pressed:after:rounded-full aria-pressed:after:bg-player-accent", A = (e) => f(Math.floor(e));
+function j({ label: e, shortcut: t, icon: n, className: r, ...i }) {
+	return /* @__PURE__ */ y("button", {
+		type: "button",
+		"aria-label": e,
+		title: t ? `${e} (${t})` : e,
+		className: x(k, r),
+		...i,
+		children: /* @__PURE__ */ y(D, {
+			icon: n,
+			strokeWidth: 1.75,
+			"aria-hidden": !0
+		})
+	});
+}
+var M = {
+	ArrowLeft: (e) => e - 5,
+	ArrowDown: (e) => e - 5,
+	ArrowRight: (e) => e + 5,
+	ArrowUp: (e) => e + 5,
+	PageDown: (e, t) => e - t / 10,
+	PageUp: (e, t) => e + t / 10,
+	Home: () => 0,
+	End: (e, t) => t
+};
+function N({ time: t, duration: n, buffered: r = 0, onSeek: i, onScrub: a, sprite: o, thin: s, className: c }) {
+	let { t: l } = e(), [u, d] = _(null), [f, p] = _(null), m = g(null), h = u ?? Math.min(t, n || t), v = (e) => n > 0 ? `${Math.min(100, e / n * 100)}%` : "0%", S = (e) => {
+		let t = m.current?.getBoundingClientRect();
+		if (!t || !t.width || !n) return null;
+		let r = Math.min(t.width, Math.max(0, e - t.left));
+		return {
+			time: r / t.width * n,
+			x: r,
+			width: t.width
+		};
+	}, C = (e) => {
+		d(e), a?.(e);
+	}, w = (e) => {
+		let r = M[e.key];
+		r && n && (e.preventDefault(), e.stopPropagation(), i(Math.min(n, Math.max(0, r(t, n)))));
+	}, T = u === null ? f : {
+		time: u,
+		x: u / (n || 1) * (m.current?.clientWidth ?? 0),
+		width: m.current?.clientWidth ?? 0
+	};
+	return /* @__PURE__ */ b(O.Root, {
+		value: h,
+		min: 0,
+		max: n || 1,
+		step: .01,
+		disabled: !n,
+		thumbAlignment: "center",
+		onValueChange: (e) => C(e),
+		onValueCommitted: (e) => {
+			C(null), i(e);
+		},
+		onKeyDownCapture: w,
+		className: x("relative w-full", c),
+		"data-ckui": "seek",
+		children: [/* @__PURE__ */ b(O.Control, {
+			className: x("group/seek relative flex w-full cursor-pointer touch-none items-center select-none", s ? "h-3 items-end" : "h-4"),
+			onPointerMove: (e) => e.pointerType === "mouse" && p(S(e.clientX)),
+			onPointerLeave: () => p(null),
+			children: [/* @__PURE__ */ b(O.Track, {
+				ref: m,
+				className: x("relative w-full overflow-hidden bg-white/30 transition-[height] motion-reduce:transition-none", s ? "h-[3px] group-hover/seek:h-[5px]" : "h-1 rounded-full group-hover/seek:h-1.5", u !== null && (s ? "h-[5px]" : "h-1.5")),
+				children: [/* @__PURE__ */ y("div", {
+					"aria-hidden": !0,
+					className: "absolute inset-y-0 left-0 bg-white/40",
+					style: { width: v(r) }
+				}), /* @__PURE__ */ y(O.Indicator, { className: "bg-player-accent" })]
+			}), /* @__PURE__ */ y(O.Thumb, {
+				"aria-label": l("player.seek"),
+				getAriaValueText: (e, t) => l("player.time", {
+					current: A(t),
+					duration: A(n)
+				}),
+				className: x("size-3 rounded-full bg-player-accent opacity-0 shadow transition-opacity outline-none group-hover/seek:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-white/80 motion-reduce:transition-none", u !== null && "opacity-100", s && "mb-[-4px]")
+			})]
+		}), T && !s && /* @__PURE__ */ y(P, {
+			sprite: o,
+			...T
+		})]
+	});
+}
+function P({ sprite: e, time: t, x: n, width: r }) {
+	let i = e ? p(e.cues, t) : void 0, a = i ? Math.min(160, Math.max(96, r * .3)) : 0, o = i ? a / i.w : 0, s = Math.max(a, 48), c = Math.min(Math.max(0, n - s / 2), Math.max(0, r - s));
+	return /* @__PURE__ */ b("div", {
+		"aria-hidden": !0,
+		"data-ckui": "seek-preview",
+		className: "pointer-events-none absolute bottom-full mb-2 flex flex-col items-center gap-1",
+		style: {
+			left: c,
+			width: s
+		},
+		children: [i && e && /* @__PURE__ */ y("div", {
+			"data-ckui": "seek-sprite",
+			className: "rounded-md bg-black bg-no-repeat shadow-lg ring-1 ring-white/30",
+			style: {
+				width: a,
+				height: i.h * o,
+				backgroundImage: `url("${i.url}")`,
+				backgroundPosition: `${-i.x * o}px ${-i.y * o}px`,
+				backgroundSize: `${e.width * o}px ${e.height * o}px`
+			}
+		}), /* @__PURE__ */ y("span", {
+			className: "rounded bg-black/75 px-1.5 py-0.5 text-xs font-medium text-white tabular-nums",
+			children: A(t)
+		})]
+	});
+}
+function F({ volume: t, muted: n, onVolume: r, onMute: i }) {
+	let { t: a } = e(), o = n || t === 0;
+	return /* @__PURE__ */ b("div", {
+		className: "group/volume flex items-center",
+		"data-ckui": "volume",
+		children: [/* @__PURE__ */ y(j, {
+			label: a(o ? "player.unmute" : "player.mute"),
+			shortcut: "m",
+			icon: o ? E : t < .5 ? T : w,
+			onClick: i
+		}), /* @__PURE__ */ y("div", {
+			className: "w-0 overflow-hidden opacity-0 transition-[width,opacity] group-focus-within/volume:w-20 group-focus-within/volume:opacity-100 group-hover/volume:w-20 group-hover/volume:opacity-100 motion-reduce:transition-none pointer-coarse:hidden",
+			children: /* @__PURE__ */ y(O.Root, {
+				value: o ? 0 : t,
+				min: 0,
+				max: 1,
+				step: .05,
+				onValueChange: (e) => r(e),
+				className: "px-2",
+				children: /* @__PURE__ */ b(O.Control, {
+					className: "relative flex h-6 w-full cursor-pointer touch-none items-center select-none",
+					children: [/* @__PURE__ */ y(O.Track, {
+						className: "relative h-1 w-full overflow-hidden rounded-full bg-white/30",
+						children: /* @__PURE__ */ y(O.Indicator, { className: "bg-white" })
+					}), /* @__PURE__ */ y(O.Thumb, {
+						"aria-label": a("player.volume"),
+						getAriaValueText: (e, t) => `${Math.round(t * 100)}%`,
+						className: "size-3 rounded-full bg-white outline-none focus-visible:ring-2 focus-visible:ring-white/80"
+					})]
+				})
+			})
+		})]
+	});
+}
+function I({ icon: e, label: f, sections: p, actions: h, container: g, onOpenChange: _ }) {
+	let x = m(t);
+	return /* @__PURE__ */ y(t.Provider, {
+		value: {
+			...x,
+			theme: "dark"
+		},
+		children: /* @__PURE__ */ b(n, {
+			onOpenChange: _,
+			children: [/* @__PURE__ */ y(d, {
+				"aria-label": f,
+				title: f,
+				className: k,
+				"data-ckui": "settings",
+				children: /* @__PURE__ */ y(D, {
+					icon: e,
+					strokeWidth: 1.75,
+					"aria-hidden": !0
+				})
+			}), /* @__PURE__ */ b(r, {
+				side: "top",
+				align: "end",
+				sideOffset: 8,
+				container: g,
+				className: "min-w-56",
+				"data-ckui": "settings-menu",
+				children: [p.map((e) => /* @__PURE__ */ b(c, { children: [/* @__PURE__ */ b(u, {
+					"data-ckui": `settings-${e.key}`,
+					children: [/* @__PURE__ */ y("span", { children: e.label }), /* @__PURE__ */ y("span", {
+						className: "ml-auto max-w-32 truncate pl-4 text-muted-foreground",
+						children: e.options.find((t) => t.value === e.value)?.label
+					})]
+				}), /* @__PURE__ */ y(l, {
+					side: "left",
+					align: "end",
+					alignOffset: -4,
+					container: g,
+					className: "min-w-40",
+					"data-ckui": `${e.key}-menu`,
+					children: /* @__PURE__ */ y(a, {
+						value: e.value,
+						onValueChange: (t) => t !== e.value && e.onChange(String(t)),
+						children: e.options.map((e) => /* @__PURE__ */ y(o, {
+							value: e.value,
+							closeOnClick: !0,
+							children: e.label
+						}, e.value))
+					})
+				})] }, e.key)), h?.length ? /* @__PURE__ */ b(v, { children: [p.length > 0 && /* @__PURE__ */ y(s, {}), h.map((e) => /* @__PURE__ */ y(i, {
+					onClick: e.onSelect,
+					children: e.label
+				}, e.label))] }) : null]
+			})]
+		})
+	});
+}
+function L({ cues: e, bottom: t }) {
+	return e.length ? /* @__PURE__ */ y("div", {
+		"data-ckui": "captions",
+		className: "pointer-events-none absolute inset-x-0 z-[5] flex flex-col items-center gap-1 px-[5%] text-center transition-[bottom] duration-200 motion-reduce:transition-none",
+		style: { bottom: t },
+		children: e.map((e, t) => /* @__PURE__ */ y(R, { cue: e }, `${e.startTime}:${t}`))
+	}) : null;
+}
+function R({ cue: e }) {
+	let t = g(null);
+	return h(() => {
+		let n = t.current;
+		if (!n) return;
+		let r = typeof e.getCueAsHTML == "function" ? e.getCueAsHTML() : null;
+		n.replaceChildren(r ?? document.createTextNode(e.text));
+	}, [e]), /* @__PURE__ */ y("span", {
+		ref: t,
+		className: "rounded bg-black/75 px-2 py-0.5 text-[clamp(0.8rem,3.2cqw,2rem)] leading-snug whitespace-pre-line text-white"
+	});
+}
+function z({ flash: t }) {
+	let { t: n } = e();
+	if (!t) return null;
+	let r = t.direction < 0;
+	return /* @__PURE__ */ y("div", {
+		"aria-hidden": !0,
+		"data-ckui": "seek-flash",
+		className: x("pointer-events-none absolute top-1/2 z-[6] -translate-y-1/2 duration-200 animate-in fade-in zoom-in-90 motion-reduce:animate-none", r ? "left-[8%]" : "right-[8%]"),
+		children: /* @__PURE__ */ b("div", {
+			className: "flex size-20 flex-col items-center justify-center gap-0.5 rounded-full bg-black/50 text-white sm:size-24",
+			children: [/* @__PURE__ */ y(D, {
+				icon: r ? S : C,
+				className: "size-7",
+				strokeWidth: 2.5
+			}), /* @__PURE__ */ y("span", {
+				className: "text-xs font-semibold tabular-nums",
+				children: n("player.seconds", { seconds: t.seconds })
+			})]
+		})
+	}, t.direction);
+}
+function B({ className: e }) {
+	return /* @__PURE__ */ y("span", {
+		"aria-hidden": !0,
+		className: x("size-6 rounded-full border-2 border-white/30 border-t-white motion-safe:animate-spin", e)
+	});
+}
+//#endregion
+export { L as Captions, j as ControlButton, N as SeekBar, z as SeekFlash, I as SettingsMenu, B as Spinner, F as VolumeControl, A as clock, k as playerButtonClass };
+
+//# sourceMappingURL=player-controls.js.map

package/dist/components/player-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player-controls.js","names":[],"sources":["../../src/components/player-controls.tsx"],"sourcesContent":["import { ArrowLeft01Icon, ArrowRight01Icon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon, type IconSvgElement } from \"@hugeicons/react\";\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { cn } from \"cn\";\nimport { useContext, useLayoutEffect, useRef, useState, type ComponentProps, type KeyboardEvent, type PointerEvent } from \"react\";\nimport { formatDuration } from \"../client/gallery.js\";\nimport { ARROW_SEEK, spriteCueAt } from \"../client/player.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport type { Sprite } from \"../react/player.js\";\nimport { AppearanceContext } from \"../scope.js\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"#ckui/ui/dropdown-menu\";\n\n/** The class of every control-bar button; a host's slotted buttons can share it. */\nexport const playerButtonClass =\n  \"inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-white outline-none transition-colors hover:bg-white/15 focus-visible:ring-2 focus-visible:ring-white/80 motion-reduce:transition-none data-popup-open:bg-white/15 [&_svg]:size-5 relative aria-pressed:after:absolute aria-pressed:after:bottom-1 aria-pressed:after:h-0.5 aria-pressed:after:w-4 aria-pressed:after:rounded-full aria-pressed:after:bg-player-accent\";\n\nexport const clock = (s: number) => formatDuration(Math.floor(s));\n\nexport function ControlButton({\n  label,\n  shortcut,\n  icon,\n  className,\n  ...props\n}: Omit<ComponentProps<\"button\">, \"children\"> & { label: string; shortcut?: string; icon: IconSvgElement }) {\n  return (\n    <button type=\"button\" aria-label={label} title={shortcut ? `${label} (${shortcut})` : label} className={cn(playerButtonClass, className)} {...props}>\n      <HugeiconsIcon icon={icon} strokeWidth={1.75} aria-hidden />\n    </button>\n  );\n}\n\nconst SEEK_KEYS: Record<string, (time: number, duration: number) => number> = {\n  ArrowLeft: (t) => t - ARROW_SEEK,\n  ArrowDown: (t) => t - ARROW_SEEK,\n  ArrowRight: (t) => t + ARROW_SEEK,\n  ArrowUp: (t) => t + ARROW_SEEK,\n  PageDown: (t, d) => t - d / 10,\n  PageUp: (t, d) => t + d / 10,\n  Home: () => 0,\n  End: (_, d) => d,\n};\n\nexport interface SeekBarProps {\n  time: number;\n  duration: number;\n  buffered?: number;\n  onSeek: (time: number) => void;\n  /** The position being dragged to, or null when the drag ends. */\n  onScrub?: (time: number | null) => void;\n  sprite?: Sprite | null;\n  /** The mini player's hairline along its bottom edge. */\n  thin?: boolean;\n  className?: string;\n}\n\n/** The seek slider: buffered range, drag to seek on release, keys in 5 s steps, a sprite and time preview on hover. */\nexport function SeekBar({ time, duration, buffered = 0, onSeek, onScrub, sprite, thin, className }: SeekBarProps) {\n  const { t } = useMessages();\n  const [scrub, setScrub] = useState<number | null>(null);\n  const [hover, setHover] = useState<{ time: number; x: number; width: number } | null>(null);\n  const track = useRef<HTMLDivElement>(null);\n  const value = scrub ?? Math.min(time, duration || time);\n  const pct = (v: number) => (duration > 0 ? `${Math.min(100, (v / duration) * 100)}%` : \"0%\");\n  const at = (clientX: number) => {\n    const r = track.current?.getBoundingClientRect();\n    if (!r || !r.width || !duration) return null;\n    const x = Math.min(r.width, Math.max(0, clientX - r.left));\n    return { time: (x / r.width) * duration, x, width: r.width };\n  };\n  const scrubTo = (v: number | null) => {\n    setScrub(v);\n    onScrub?.(v);\n  };\n  const onKeyDownCapture = (e: KeyboardEvent) => {\n    const to = SEEK_KEYS[e.key];\n    if (!to || !duration) return;\n    // The slider's own steps are tiny; these are the player's.\n    e.preventDefault();\n    e.stopPropagation();\n    onSeek(Math.min(duration, Math.max(0, to(time, duration))));\n  };\n  const preview = scrub !== null ? { time: scrub, x: (scrub / (duration || 1)) * (track.current?.clientWidth ?? 0), width: track.current?.clientWidth ?? 0 } : hover;\n  return (\n    <SliderPrimitive.Root\n      value={value}\n      min={0}\n      max={duration || 1}\n      step={0.01}\n      disabled={!duration}\n      thumbAlignment=\"center\"\n      onValueChange={(v) => scrubTo(v)}\n      onValueCommitted={(v) => {\n        scrubTo(null);\n        onSeek(v);\n      }}\n      onKeyDownCapture={onKeyDownCapture}\n      className={cn(\"relative w-full\", className)}\n      data-ckui=\"seek\"\n    >\n      <SliderPrimitive.Control\n        className={cn(\"group/seek relative flex w-full cursor-pointer touch-none items-center select-none\", thin ? \"h-3 items-end\" : \"h-4\")}\n        onPointerMove={(e: PointerEvent) => e.pointerType === \"mouse\" && setHover(at(e.clientX))}\n        onPointerLeave={() => setHover(null)}\n      >\n        <SliderPrimitive.Track\n          ref={track}\n          className={cn(\n            \"relative w-full overflow-hidden bg-white/30 transition-[height] motion-reduce:transition-none\",\n            thin ? \"h-[3px] group-hover/seek:h-[5px]\" : \"h-1 rounded-full group-hover/seek:h-1.5\",\n            scrub !== null && (thin ? \"h-[5px]\" : \"h-1.5\"),\n          )}\n        >\n          <div aria-hidden className=\"absolute inset-y-0 left-0 bg-white/40\" style={{ width: pct(buffered) }} />\n          <SliderPrimitive.Indicator className=\"bg-player-accent\" />\n        </SliderPrimitive.Track>\n        <SliderPrimitive.Thumb\n          aria-label={t(\"player.seek\")}\n          getAriaValueText={(_, v) => t(\"player.time\", { current: clock(v), duration: clock(duration) })}\n          className={cn(\n            \"size-3 rounded-full bg-player-accent opacity-0 shadow transition-opacity outline-none group-hover/seek:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-white/80 motion-reduce:transition-none\",\n            scrub !== null && \"opacity-100\",\n            thin && \"mb-[-4px]\",\n          )}\n        />\n      </SliderPrimitive.Control>\n      {preview && !thin && <SeekPreview sprite={sprite} {...preview} />}\n    </SliderPrimitive.Root>\n  );\n}\n\nfunction SeekPreview({ sprite, time, x, width }: { sprite?: Sprite | null; time: number; x: number; width: number }) {\n  const cue = sprite ? spriteCueAt(sprite.cues, time) : undefined;\n  const w = cue ? Math.min(160, Math.max(96, width * 0.3)) : 0;\n  const s = cue ? w / cue.w : 0;\n  const boxW = Math.max(w, 48);\n  const left = Math.min(Math.max(0, x - boxW / 2), Math.max(0, width - boxW));\n  return (\n    <div aria-hidden data-ckui=\"seek-preview\" className=\"pointer-events-none absolute bottom-full mb-2 flex flex-col items-center gap-1\" style={{ left, width: boxW }}>\n      {cue && sprite && (\n        <div\n          data-ckui=\"seek-sprite\"\n          className=\"rounded-md bg-black bg-no-repeat shadow-lg ring-1 ring-white/30\"\n          style={{\n            width: w,\n            height: cue.h * s,\n            backgroundImage: `url(\"${cue.url}\")`,\n            backgroundPosition: `${-cue.x * s}px ${-cue.y * s}px`,\n            backgroundSize: `${sprite.width * s}px ${sprite.height * s}px`,\n          }}\n        />\n      )}\n      <span className=\"rounded bg-black/75 px-1.5 py-0.5 text-xs font-medium text-white tabular-nums\">{clock(time)}</span>\n    </div>\n  );\n}\n\nexport function VolumeControl({ volume, muted, onVolume, onMute }: { volume: number; muted: boolean; onVolume: (v: number) => void; onMute: () => void }) {\n  const { t } = useMessages();\n  const silent = muted || volume === 0;\n  return (\n    <div className=\"group/volume flex items-center\" data-ckui=\"volume\">\n      <ControlButton label={silent ? t(\"player.unmute\") : t(\"player.mute\")} shortcut=\"m\" icon={silent ? VolumeOffIcon : volume < 0.5 ? VolumeLowIcon : VolumeHighIcon} onClick={onMute} />\n      <div className=\"w-0 overflow-hidden opacity-0 transition-[width,opacity] group-focus-within/volume:w-20 group-focus-within/volume:opacity-100 group-hover/volume:w-20 group-hover/volume:opacity-100 motion-reduce:transition-none pointer-coarse:hidden\">\n        <SliderPrimitive.Root value={silent ? 0 : volume} min={0} max={1} step={0.05} onValueChange={(v) => onVolume(v)} className=\"px-2\">\n          <SliderPrimitive.Control className=\"relative flex h-6 w-full cursor-pointer touch-none items-center select-none\">\n            <SliderPrimitive.Track className=\"relative h-1 w-full overflow-hidden rounded-full bg-white/30\">\n              <SliderPrimitive.Indicator className=\"bg-white\" />\n            </SliderPrimitive.Track>\n            <SliderPrimitive.Thumb\n              aria-label={t(\"player.volume\")}\n              getAriaValueText={(_, v) => `${Math.round(v * 100)}%`}\n              className=\"size-3 rounded-full bg-white outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n            />\n          </SliderPrimitive.Control>\n        </SliderPrimitive.Root>\n      </div>\n    </div>\n  );\n}\n\nexport interface MenuOption {\n  value: string;\n  label: string;\n}\n\n/** One settings row: its current value, and a submenu choosing it. */\nexport interface MenuSection {\n  key: string;\n  label: string;\n  value: string;\n  options: readonly MenuOption[];\n  onChange: (value: string) => void;\n}\n\nexport function SettingsMenu({\n  icon,\n  label,\n  sections,\n  actions,\n  container,\n  onOpenChange,\n}: {\n  icon: IconSvgElement;\n  label: string;\n  sections: MenuSection[];\n  actions?: { label: string; onSelect: () => void }[];\n  container?: HTMLElement;\n  onOpenChange?: (open: boolean) => void;\n}) {\n  // Menus over video are dark, whatever the page's theme.\n  const appearance = useContext(AppearanceContext);\n  return (\n    <AppearanceContext.Provider value={{ ...appearance, theme: \"dark\" }}>\n      <DropdownMenu onOpenChange={onOpenChange}>\n        <DropdownMenuTrigger aria-label={label} title={label} className={playerButtonClass} data-ckui=\"settings\">\n          <HugeiconsIcon icon={icon} strokeWidth={1.75} aria-hidden />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent side=\"top\" align=\"end\" sideOffset={8} container={container} className=\"min-w-56\" data-ckui=\"settings-menu\">\n          {sections.map((s) => (\n            <DropdownMenuSub key={s.key}>\n              <DropdownMenuSubTrigger data-ckui={`settings-${s.key}`}>\n                <span>{s.label}</span>\n                <span className=\"ml-auto max-w-32 truncate pl-4 text-muted-foreground\">{s.options.find((o) => o.value === s.value)?.label}</span>\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent side=\"left\" align=\"end\" alignOffset={-4} container={container} className=\"min-w-40\" data-ckui={`${s.key}-menu`}>\n                <DropdownMenuRadioGroup value={s.value} onValueChange={(v) => v !== s.value && s.onChange(String(v))}>\n                  {s.options.map((o) => (\n                    <DropdownMenuRadioItem key={o.value} value={o.value} closeOnClick>\n                      {o.label}\n                    </DropdownMenuRadioItem>\n                  ))}\n                </DropdownMenuRadioGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n          ))}\n          {actions?.length ? (\n            <>\n              {sections.length > 0 && <DropdownMenuSeparator />}\n              {actions.map((a) => (\n                <DropdownMenuItem key={a.label} onClick={a.onSelect}>\n                  {a.label}\n                </DropdownMenuItem>\n              ))}\n            </>\n          ) : null}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </AppearanceContext.Provider>\n  );\n}\n\n/** The showing subtitle cues, drawn above the controls; markup comes from the browser's cue parser. */\nexport function Captions({ cues, bottom }: { cues: readonly VTTCue[]; bottom: string }) {\n  if (!cues.length) return null;\n  return (\n    <div\n      data-ckui=\"captions\"\n      className=\"pointer-events-none absolute inset-x-0 z-[5] flex flex-col items-center gap-1 px-[5%] text-center transition-[bottom] duration-200 motion-reduce:transition-none\"\n      style={{ bottom }}\n    >\n      {cues.map((c, i) => (\n        <Cue key={`${c.startTime}:${i}`} cue={c} />\n      ))}\n    </div>\n  );\n}\n\nfunction Cue({ cue }: { cue: VTTCue }) {\n  const ref = useRef<HTMLSpanElement>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const html = typeof cue.getCueAsHTML === \"function\" ? cue.getCueAsHTML() : null;\n    el.replaceChildren(html ?? document.createTextNode(cue.text));\n  }, [cue]);\n  return <span ref={ref} className=\"rounded bg-black/75 px-2 py-0.5 text-[clamp(0.8rem,3.2cqw,2rem)] leading-snug whitespace-pre-line text-white\" />;\n}\n\nexport interface SeekFlashState {\n  direction: -1 | 1;\n  /** The burst's total, e.g. 30 after three taps. */\n  seconds: number;\n}\n\n/** The \"10 seconds\" bubble for keyboard and double-tap seeks. */\nexport function SeekFlash({ flash }: { flash: SeekFlashState | null }) {\n  const { t } = useMessages();\n  if (!flash) return null;\n  const back = flash.direction < 0;\n  return (\n    <div\n      key={flash.direction}\n      aria-hidden\n      data-ckui=\"seek-flash\"\n      className={cn(\n        \"pointer-events-none absolute top-1/2 z-[6] -translate-y-1/2 duration-200 animate-in fade-in zoom-in-90 motion-reduce:animate-none\",\n        back ? \"left-[8%]\" : \"right-[8%]\",\n      )}\n    >\n      <div className=\"flex size-20 flex-col items-center justify-center gap-0.5 rounded-full bg-black/50 text-white sm:size-24\">\n        <HugeiconsIcon icon={back ? ArrowLeft01Icon : ArrowRight01Icon} className=\"size-7\" strokeWidth={2.5} />\n        <span className=\"text-xs font-semibold tabular-nums\">{t(\"player.seconds\", { seconds: flash.seconds })}</span>\n      </div>\n    </div>\n  );\n}\n\nexport function Spinner({ className }: { className?: string }) {\n  return <span aria-hidden className={cn(\"size-6 rounded-full border-2 border-white/30 border-t-white motion-safe:animate-spin\", className)} />;\n}\n\n"],"mappings":"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"}

package/dist/components/progress.d.ts

@@ -0,0 +1,5 @@
+import { Progress } from '../client/media/client.js';
+import { Translator } from '../i18n/messages.js';
+/** Hashing and uploading fill 0–90 %, completing the rest; processing is indeterminate. */
+export declare function progressValue(p: Progress | undefined, rendering?: boolean): number | null;
+export declare function progressLabel(t: Translator["t"], p: Progress | undefined, rendering?: boolean): string;

package/dist/components/progress.js

@@ -0,0 +1,14 @@
+//#region src/components/progress.ts
+function e(e, t) {
+	if (t || e?.phase === "processing") return null;
+	if (!e) return 0;
+	let n = e.total > 0 ? e.loaded / e.total : 0;
+	return e.phase === "hashing" ? Math.round(n * 10) : e.phase === "uploading" ? 10 + Math.round(n * 80) : 95;
+}
+function t(e, t, n) {
+	return n || t?.phase === "processing" ? e("progress.rendering") : t ? t.phase === "uploading" ? e("progress.uploading", { percent: t.total > 0 ? Math.round(t.loaded / t.total * 100) : 0 }) : e(t.phase === "hashing" ? "progress.hashing" : "progress.completing") : e("progress.hashing");
+}
+//#endregion
+export { t as progressLabel, e as progressValue };
+
+//# sourceMappingURL=progress.js.map

package/dist/components/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","names":[],"sources":["../../src/components/progress.ts"],"sourcesContent":["import type { Progress } from \"../client/media/client.js\";\nimport type { Translator } from \"../i18n/messages.js\";\n\n/** Hashing and uploading fill 0–90 %, completing the rest; processing is indeterminate. */\nexport function progressValue(p: Progress | undefined, rendering?: boolean): number | null {\n  if (rendering || p?.phase === \"processing\") return null;\n  if (!p) return 0;\n  const f = p.total > 0 ? p.loaded / p.total : 0;\n  if (p.phase === \"hashing\") return Math.round(f * 10);\n  if (p.phase === \"uploading\") return 10 + Math.round(f * 80);\n  return 95;\n}\n\nexport function progressLabel(t: Translator[\"t\"], p: Progress | undefined, rendering?: boolean): string {\n  if (rendering || p?.phase === \"processing\") return t(\"progress.rendering\");\n  if (!p) return t(\"progress.hashing\");\n  if (p.phase === \"uploading\") return t(\"progress.uploading\", { percent: p.total > 0 ? Math.round((p.loaded / p.total) * 100) : 0 });\n  return t(p.phase === \"hashing\" ? \"progress.hashing\" : \"progress.completing\");\n}\n"],"mappings":";AAIA,SAAgB,EAAc,GAAyB,GAAoC;CACzF,IAAI,KAAa,GAAG,UAAU,cAAc,OAAO;CACnD,IAAI,CAAC,GAAG,OAAO;CACf,IAAM,IAAI,EAAE,QAAQ,IAAI,EAAE,SAAS,EAAE,QAAQ;CAG7C,OAFI,EAAE,UAAU,YAAkB,KAAK,MAAM,IAAI,EAAE,IAC/C,EAAE,UAAU,cAAoB,KAAK,KAAK,MAAM,IAAI,EAAE,IACnD;AACT;AAEA,SAAgB,EAAc,GAAoB,GAAyB,GAA6B;CAItG,OAHI,KAAa,GAAG,UAAU,eAAqB,EAAE,oBAAoB,IACpE,IACD,EAAE,UAAU,cAAoB,EAAE,sBAAsB,EAAE,SAAS,EAAE,QAAQ,IAAI,KAAK,MAAO,EAAE,SAAS,EAAE,QAAS,GAAG,IAAI,EAAE,CAAC,IAC1H,EAAE,EAAE,UAAU,YAAY,qBAAqB,qBAAqB,IAF5D,EAAE,kBAAkB;AAGrC"}