@krizaka/ui 3.5.0 → 3.7.0

package/dist/skip-link.d.ts

@@ -0,0 +1,15 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const skipLink: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string, {} | {}, undefined, tailwind_variants.TVReturnTypeLike<unknown, undefined>>;
+type SkipLinkProps = Omit<React.ComponentProps<"a">, "href"> & {
+    /**
+     * The content to land on: `#` and its `id`. The element becomes focusable (`tabindex="-1"`) when it is not.
+     * @default "#content"
+     */
+    href?: `#${string}`;
+};
+/** A "skip to content" link: the first tab stop, hidden until focused; Enter moves focus to the target. */
+declare function SkipLink({ href, className, onClick, children, ...props }: SkipLinkProps): React.JSX.Element;
+
+export { SkipLink, type SkipLinkProps, skipLink };

package/dist/skip-link.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  SkipLink,
+  skipLink
+} from "./chunk-3GODX3D6.js";
+export {
+  SkipLink,
+  skipLink
+};
+//# sourceMappingURL=skip-link.js.map

package/dist/skip-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tree-view.d.ts

@@ -105,6 +105,8 @@ type TreeViewProps = {
 /**
  * A hierarchy to browse — documentation sections, a studio's datasets, folders: one tab stop, the arrows walk it (→
  * opens, ← closes or goes up), Home/End, a letter jumps to the next name; branches can load their children on demand.
+ *
+ * @deprecated Since 3.6.0, removed in 4.0.0: no product uses it. Drill down with `List` instead.
  */
 declare function TreeView({ nodes, "aria-label": label, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected, onSelect, onLoadChildren, loadingLabel, className, }: TreeViewProps): React.JSX.Element;
 

package/dist/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tree-view/tree-view.tsx"],"sourcesContent":["// Client (expansion, selection, the roving focus). A hierarchy the keyboard walks — the ARIA tree pattern: one tab\n// stop, the arrows move and open, Home/End, typing a letter jumps; children loaded on demand when a branch opens.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\nimport { useControllable } from \"../media\";\n\nexport const treeView = tv({\n  slots: {\n    root: \"m-0 list-none p-0 text-sm\",\n    group: \"m-0 list-none p-0\",\n    row:\n      \"flex min-h-8 cursor-pointer select-none items-center gap-1.5 rounded-md pr-2 text-fg outline-hidden \" +\n      \"hover:bg-surface-2 data-[selected]:bg-accent-soft data-[selected]:font-semibold data-[disabled]:cursor-default data-[disabled]:opacity-50\",\n    toggle: \"flex h-5 w-5 shrink-0 items-center justify-center text-fg-secondary [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:transition-transform motion-reduce:[&>svg]:transition-none\",\n    icon: \"flex shrink-0 items-center text-fg-secondary [&>svg]:h-4 [&>svg]:w-4\",\n    label: \"min-w-0 flex-1 truncate\",\n    meta: \"shrink-0 text-xs tabular-nums text-fg-secondary\",\n  },\n});\n\nexport type TreeNode = {\n  /** A stable id. */\n  id: string;\n  /** Its name — passed translated. */\n  label: string;\n  /** A decorative icon before the name. */\n  icon?: React.ReactNode;\n  /** A detail after the name (a count, a size). */\n  meta?: React.ReactNode;\n  /** Its children; `undefined` for a leaf. With `hasChildren`, they load when it opens (`onLoadChildren`). */\n  children?: readonly TreeNode[];\n  /** A branch whose children are not loaded yet. */\n  hasChildren?: boolean;\n  /** Cannot be selected. */\n  disabled?: boolean;\n};\n\nexport type TreeViewProps = {\n  /** The roots. */\n  nodes: readonly TreeNode[];\n  /** The tree's accessible name (“Documentation”). */\n  \"aria-label\": string;\n  /** The ids of the open branches (controlled). */\n  expanded?: readonly string[];\n  /** The ids open at first, uncontrolled. */\n  defaultExpanded?: readonly string[];\n  /** Called with the open branches. */\n  onExpandedChange?: (expanded: string[]) => void;\n  /** The selected node (controlled). */\n  selected?: string | null;\n  /** The selected node at first, uncontrolled. */\n  defaultSelected?: string | null;\n  /** Called when a node is chosen (click, Enter or Space): navigate, open the file. */\n  onSelect?: (node: TreeNode) => void;\n  /** Called when a branch with `hasChildren` and no `children` opens: fetch them, then pass them in `nodes`. */\n  onLoadChildren?: (node: TreeNode) => void;\n  /** The words of a branch that is loading (“Loading”). */\n  loadingLabel?: string;\n  /** Classes merged on the tree. */\n  className?: string;\n};\n\ntype Flat = { node: TreeNode; level: number; parent: string | null; posinset: number; setsize: number };\n\nconst isBranch = (node: TreeNode) => Boolean(node.children?.length || node.hasChildren);\n\nfunction flatten(nodes: readonly TreeNode[], open: Set<string>, level = 1, parent: string | null = null, out: Flat[] = []): Flat[] {\n  nodes.forEach((node, i) => {\n    out.push({ node, level, parent, posinset: i + 1, setsize: nodes.length });\n    if (open.has(node.id) && node.children) flatten(node.children, open, level + 1, node.id, out);\n  });\n  return out;\n}\n\n/**\n * A hierarchy to browse — documentation sections, a studio's datasets, folders: one tab stop, the arrows walk it (→\n * opens, ← closes or goes up), Home/End, a letter jumps to the next name; branches can load their children on demand.\n */\nexport function TreeView({\n  nodes,\n  \"aria-label\": label,\n  expanded: expandedProp,\n  defaultExpanded = [],\n  onExpandedChange,\n  selected: selectedProp,\n  defaultSelected = null,\n  onSelect,\n  onLoadChildren,\n  loadingLabel = \"Loading\",\n  className,\n}: TreeViewProps) {\n  const s = treeView();\n  const uid = React.useId();\n  const [expanded, setExpanded] = useControllable<readonly string[]>(expandedProp, defaultExpanded, onExpandedChange as (next: readonly string[]) => void);\n  const [selected, setSelected] = useControllable<string | null>(selectedProp, defaultSelected);\n  const open = new Set(expanded);\n  const rows = flatten(nodes, open);\n  const [active, setActive] = React.useState<string | null>(null);\n  const focusId = active && rows.some((r) => r.node.id === active) ? active : (selected ?? rows[0]?.node.id ?? null);\n  const refs = React.useRef(new Map<string, HTMLDivElement>());\n  const move = (id: string | undefined) => {\n    if (!id) return;\n    setActive(id);\n    refs.current.get(id)?.focus();\n  };\n  const toggle = (node: TreeNode, to = !open.has(node.id)) => {\n    if (!isBranch(node)) return;\n    if (to && node.hasChildren && !node.children) onLoadChildren?.(node);\n    setExpanded(to ? [...expanded, node.id] : expanded.filter((id) => id !== node.id));\n  };\n  const choose = (node: TreeNode) => {\n    if (node.disabled) return;\n    setSelected(node.id);\n    onSelect?.(node);\n  };\n  const onKeyDown = (event: React.KeyboardEvent, i: number) => {\n    const row = rows[i]!;\n    const { node } = row;\n    const keys: Record<string, () => void> = {\n      ArrowDown: () => move(rows[i + 1]?.node.id),\n      ArrowUp: () => move(rows[i - 1]?.node.id),\n      Home: () => move(rows[0]?.node.id),\n      End: () => move(rows[rows.length - 1]?.node.id),\n      ArrowRight: () => (isBranch(node) && !open.has(node.id) ? toggle(node, true) : isBranch(node) ? move(rows[i + 1]?.node.id) : undefined),\n      ArrowLeft: () => (open.has(node.id) ? toggle(node, false) : move(row.parent ?? undefined)),\n      Enter: () => choose(node),\n      \" \": () => choose(node),\n    };\n    const run = keys[event.key];\n    if (run) {\n      event.preventDefault();\n      run();\n      return;\n    }\n    if (event.key.length === 1 && /\\S/.test(event.key)) {\n      const letter = event.key.toLowerCase();\n      const next = [...rows.slice(i + 1), ...rows.slice(0, i)].find((r) => r.node.label.toLowerCase().startsWith(letter));\n      move(next?.node.id);\n    }\n  };\n\n  const render = (list: readonly TreeNode[], level: number): React.ReactNode =>\n    list.map((node) => {\n      const i = rows.findIndex((r) => r.node.id === node.id);\n      const row = rows[i]!;\n      const branch = isBranch(node);\n      const isOpen = open.has(node.id);\n      const loading = isOpen && node.hasChildren && !node.children;\n      return (\n        // The row is the treeitem (its name is its own words, never its children's); the group of children hangs\n        // from it with aria-owns, in the `li` that holds both.\n        <li key={node.id} role=\"none\">\n          <div\n            ref={(el) => {\n              if (el) refs.current.set(node.id, el);\n              else refs.current.delete(node.id);\n            }}\n            role=\"treeitem\"\n            aria-level={level}\n            aria-posinset={row.posinset}\n            aria-setsize={row.setsize}\n            aria-expanded={branch ? isOpen : undefined}\n            aria-selected={selected === node.id}\n            aria-disabled={node.disabled || undefined}\n            aria-busy={loading || undefined}\n            aria-owns={branch && isOpen ? `${uid}-${node.id}-group` : undefined}\n            tabIndex={node.id === focusId ? 0 : -1}\n            onKeyDown={(e) => {\n              if (e.target === e.currentTarget) onKeyDown(e, i);\n            }}\n            onFocus={(e) => {\n              if (e.target === e.currentTarget) setActive(node.id);\n            }}\n            className={s.row({ className: \"outline-hidden focus-visible:ring-2 focus-visible:ring-ring\" })}\n            data-selected={selected === node.id || undefined}\n            data-disabled={node.disabled || undefined}\n            style={{ paddingLeft: `${(level - 1) * 1.25 + 0.25}rem` }}\n            onClick={() => {\n              if (branch) toggle(node);\n              choose(node);\n              move(node.id);\n            }}\n          >\n            <span className={s.toggle()} aria-hidden>\n              {branch ? <ChevronGlyph direction={isOpen ? \"down\" : \"right\"} /> : null}\n            </span>\n            {node.icon ? <span className={s.icon()} aria-hidden>{node.icon}</span> : null}\n            <span className={s.label()}>{node.label}</span>\n            {node.meta ? <span className={s.meta()}>{node.meta}</span> : null}\n          </div>\n          {branch && isOpen ? (\n            <ul role=\"group\" id={`${uid}-${node.id}-group`} className={s.group()}>\n              {loading ? (\n                <li role=\"none\" className=\"py-1 text-xs text-fg-secondary\" style={{ paddingLeft: `${level * 1.25 + 1.75}rem` }}>\n                  {loadingLabel}\n                </li>\n              ) : (\n                render(node.children ?? [], level + 1)\n              )}\n            </ul>\n          ) : null}\n        </li>\n      );\n    });\n\n  return (\n    <ul role=\"tree\" aria-label={label} className={s.root({ className })}>\n      {render(nodes, 1)}\n    </ul>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/tree-view/tree-view.tsx"],"sourcesContent":["// Client (expansion, selection, the roving focus). A hierarchy the keyboard walks — the ARIA tree pattern: one tab\n// stop, the arrows move and open, Home/End, typing a letter jumps; children loaded on demand when a branch opens.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\nimport { useControllable } from \"../media\";\n\nexport const treeView = tv({\n  slots: {\n    root: \"m-0 list-none p-0 text-sm\",\n    group: \"m-0 list-none p-0\",\n    row:\n      \"flex min-h-8 cursor-pointer select-none items-center gap-1.5 rounded-md pr-2 text-fg outline-hidden \" +\n      \"hover:bg-surface-2 data-[selected]:bg-accent-soft data-[selected]:font-semibold data-[disabled]:cursor-default data-[disabled]:opacity-50\",\n    toggle: \"flex h-5 w-5 shrink-0 items-center justify-center text-fg-secondary [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:transition-transform motion-reduce:[&>svg]:transition-none\",\n    icon: \"flex shrink-0 items-center text-fg-secondary [&>svg]:h-4 [&>svg]:w-4\",\n    label: \"min-w-0 flex-1 truncate\",\n    meta: \"shrink-0 text-xs tabular-nums text-fg-secondary\",\n  },\n});\n\nexport type TreeNode = {\n  /** A stable id. */\n  id: string;\n  /** Its name — passed translated. */\n  label: string;\n  /** A decorative icon before the name. */\n  icon?: React.ReactNode;\n  /** A detail after the name (a count, a size). */\n  meta?: React.ReactNode;\n  /** Its children; `undefined` for a leaf. With `hasChildren`, they load when it opens (`onLoadChildren`). */\n  children?: readonly TreeNode[];\n  /** A branch whose children are not loaded yet. */\n  hasChildren?: boolean;\n  /** Cannot be selected. */\n  disabled?: boolean;\n};\n\nexport type TreeViewProps = {\n  /** The roots. */\n  nodes: readonly TreeNode[];\n  /** The tree's accessible name (“Documentation”). */\n  \"aria-label\": string;\n  /** The ids of the open branches (controlled). */\n  expanded?: readonly string[];\n  /** The ids open at first, uncontrolled. */\n  defaultExpanded?: readonly string[];\n  /** Called with the open branches. */\n  onExpandedChange?: (expanded: string[]) => void;\n  /** The selected node (controlled). */\n  selected?: string | null;\n  /** The selected node at first, uncontrolled. */\n  defaultSelected?: string | null;\n  /** Called when a node is chosen (click, Enter or Space): navigate, open the file. */\n  onSelect?: (node: TreeNode) => void;\n  /** Called when a branch with `hasChildren` and no `children` opens: fetch them, then pass them in `nodes`. */\n  onLoadChildren?: (node: TreeNode) => void;\n  /** The words of a branch that is loading (“Loading”). */\n  loadingLabel?: string;\n  /** Classes merged on the tree. */\n  className?: string;\n};\n\ntype Flat = { node: TreeNode; level: number; parent: string | null; posinset: number; setsize: number };\n\nconst isBranch = (node: TreeNode) => Boolean(node.children?.length || node.hasChildren);\n\nfunction flatten(nodes: readonly TreeNode[], open: Set<string>, level = 1, parent: string | null = null, out: Flat[] = []): Flat[] {\n  nodes.forEach((node, i) => {\n    out.push({ node, level, parent, posinset: i + 1, setsize: nodes.length });\n    if (open.has(node.id) && node.children) flatten(node.children, open, level + 1, node.id, out);\n  });\n  return out;\n}\n\n/**\n * A hierarchy to browse — documentation sections, a studio's datasets, folders: one tab stop, the arrows walk it (→\n * opens, ← closes or goes up), Home/End, a letter jumps to the next name; branches can load their children on demand.\n *\n * @deprecated Since 3.6.0, removed in 4.0.0: no product uses it. Drill down with `List` instead.\n */\nexport function TreeView({\n  nodes,\n  \"aria-label\": label,\n  expanded: expandedProp,\n  defaultExpanded = [],\n  onExpandedChange,\n  selected: selectedProp,\n  defaultSelected = null,\n  onSelect,\n  onLoadChildren,\n  loadingLabel = \"Loading\",\n  className,\n}: TreeViewProps) {\n  const s = treeView();\n  const uid = React.useId();\n  const [expanded, setExpanded] = useControllable<readonly string[]>(expandedProp, defaultExpanded, onExpandedChange as (next: readonly string[]) => void);\n  const [selected, setSelected] = useControllable<string | null>(selectedProp, defaultSelected);\n  const open = new Set(expanded);\n  const rows = flatten(nodes, open);\n  const [active, setActive] = React.useState<string | null>(null);\n  const focusId = active && rows.some((r) => r.node.id === active) ? active : (selected ?? rows[0]?.node.id ?? null);\n  const refs = React.useRef(new Map<string, HTMLDivElement>());\n  const move = (id: string | undefined) => {\n    if (!id) return;\n    setActive(id);\n    refs.current.get(id)?.focus();\n  };\n  const toggle = (node: TreeNode, to = !open.has(node.id)) => {\n    if (!isBranch(node)) return;\n    if (to && node.hasChildren && !node.children) onLoadChildren?.(node);\n    setExpanded(to ? [...expanded, node.id] : expanded.filter((id) => id !== node.id));\n  };\n  const choose = (node: TreeNode) => {\n    if (node.disabled) return;\n    setSelected(node.id);\n    onSelect?.(node);\n  };\n  const onKeyDown = (event: React.KeyboardEvent, i: number) => {\n    const row = rows[i]!;\n    const { node } = row;\n    const keys: Record<string, () => void> = {\n      ArrowDown: () => move(rows[i + 1]?.node.id),\n      ArrowUp: () => move(rows[i - 1]?.node.id),\n      Home: () => move(rows[0]?.node.id),\n      End: () => move(rows[rows.length - 1]?.node.id),\n      ArrowRight: () => (isBranch(node) && !open.has(node.id) ? toggle(node, true) : isBranch(node) ? move(rows[i + 1]?.node.id) : undefined),\n      ArrowLeft: () => (open.has(node.id) ? toggle(node, false) : move(row.parent ?? undefined)),\n      Enter: () => choose(node),\n      \" \": () => choose(node),\n    };\n    const run = keys[event.key];\n    if (run) {\n      event.preventDefault();\n      run();\n      return;\n    }\n    if (event.key.length === 1 && /\\S/.test(event.key)) {\n      const letter = event.key.toLowerCase();\n      const next = [...rows.slice(i + 1), ...rows.slice(0, i)].find((r) => r.node.label.toLowerCase().startsWith(letter));\n      move(next?.node.id);\n    }\n  };\n\n  const render = (list: readonly TreeNode[], level: number): React.ReactNode =>\n    list.map((node) => {\n      const i = rows.findIndex((r) => r.node.id === node.id);\n      const row = rows[i]!;\n      const branch = isBranch(node);\n      const isOpen = open.has(node.id);\n      const loading = isOpen && node.hasChildren && !node.children;\n      return (\n        // The row is the treeitem (its name is its own words, never its children's); the group of children hangs\n        // from it with aria-owns, in the `li` that holds both.\n        <li key={node.id} role=\"none\">\n          <div\n            ref={(el) => {\n              if (el) refs.current.set(node.id, el);\n              else refs.current.delete(node.id);\n            }}\n            role=\"treeitem\"\n            aria-level={level}\n            aria-posinset={row.posinset}\n            aria-setsize={row.setsize}\n            aria-expanded={branch ? isOpen : undefined}\n            aria-selected={selected === node.id}\n            aria-disabled={node.disabled || undefined}\n            aria-busy={loading || undefined}\n            aria-owns={branch && isOpen ? `${uid}-${node.id}-group` : undefined}\n            tabIndex={node.id === focusId ? 0 : -1}\n            onKeyDown={(e) => {\n              if (e.target === e.currentTarget) onKeyDown(e, i);\n            }}\n            onFocus={(e) => {\n              if (e.target === e.currentTarget) setActive(node.id);\n            }}\n            className={s.row({ className: \"outline-hidden focus-visible:ring-2 focus-visible:ring-ring\" })}\n            data-selected={selected === node.id || undefined}\n            data-disabled={node.disabled || undefined}\n            style={{ paddingLeft: `${(level - 1) * 1.25 + 0.25}rem` }}\n            onClick={() => {\n              if (branch) toggle(node);\n              choose(node);\n              move(node.id);\n            }}\n          >\n            <span className={s.toggle()} aria-hidden>\n              {branch ? <ChevronGlyph direction={isOpen ? \"down\" : \"right\"} /> : null}\n            </span>\n            {node.icon ? <span className={s.icon()} aria-hidden>{node.icon}</span> : null}\n            <span className={s.label()}>{node.label}</span>\n            {node.meta ? <span className={s.meta()}>{node.meta}</span> : null}\n          </div>\n          {branch && isOpen ? (\n            <ul role=\"group\" id={`${uid}-${node.id}-group`} className={s.group()}>\n              {loading ? (\n                <li role=\"none\" className=\"py-1 text-xs text-fg-secondary\" style={{ paddingLeft: `${level * 1.25 + 1.75}rem` }}>\n                  {loadingLabel}\n                </li>\n              ) : (\n                render(node.children ?? [], level + 1)\n              )}\n            </ul>\n          ) : null}\n        </li>\n      );\n    });\n\n  return (\n    <ul role=\"tree\" aria-label={label} className={s.root({ className })}>\n      {render(nodes, 1)}\n    </ul>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/vertical-video.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+
+interface ShortFeedProps<T> extends Omit<React.ComponentProps<"section">, "children"> {
+    /** The feed's accessible name ("Videos"), passed translated. */
+    label: string;
+    /** The videos, in order. */
+    items: readonly T[];
+    /** A stable key for an item. */
+    getId: (item: T) => string;
+    /** One slide: `active` is true for the one in view, `preload` for the next, `near` false for the ones kept empty. */
+    renderItem: (item: T, state: {
+        active: boolean;
+        preload: "none" | "metadata" | "auto";
+        index: number;
+    }) => React.ReactNode;
+    /** The slides mounted around the one in view (before and after). Default 1; the others keep their height empty. */
+    window?: number;
+    /** Called when the slide in view changes. */
+    onActiveChange?: (index: number, item: T) => void;
+}
+/** A vertical snap-scrolling feed that plays the video in view, preloads the next and pauses the rest. */
+declare function ShortFeed<T>({ label, items, getId, renderItem, window: around, onActiveChange, className, onKeyDown, ...props }: ShortFeedProps<T>): React.JSX.Element;
+
+interface VerticalVideoLabels {
+    /** "Play" / "Pause" — the tap target over the picture. */
+    play: string;
+    pause: string;
+    /** "Like" / "Unlike" (the button's name; the state is `aria-pressed`). */
+    like: string;
+    comment: string;
+    share: string;
+    more: string;
+    /** "Follow Elena" — `{name}` is replaced by the creator's name. */
+    follow: string;
+    /** "Following Elena". */
+    following: string;
+    /** "More" / "Less" on a long caption. */
+    expand: string;
+    collapse: string;
+    /** The progress bar's name ("Progress"). */
+    progress: string;
+    /** The rail's name ("Actions"). */
+    actions: string;
+}
+declare const verticalVideoLabels: VerticalVideoLabels;
+interface VerticalVideoCreator {
+    name: string;
+    /** Their portrait. */
+    avatarSrc?: string;
+    /** The seal's words ("Verified"): shows the seal beside the name. */
+    verifiedLabel?: string;
+}
+interface VerticalVideoProps extends Omit<React.ComponentProps<"article">, "title" | "children"> {
+    /** The video's accessible name ("Video: Night shoot, part 2"), passed translated. */
+    title: string;
+    /** The clip — absent, the poster alone shows (MP4 or WebM; an HLS address only in Safari — use the player of `@krizaka/ui/video-player` for HLS). */
+    src?: string;
+    /** The picture until the first frame, and under reduced motion. */
+    poster?: string;
+    /** Plays while `true`; a `ShortFeed` passes it for the slide in view. Default `true`. */
+    active?: boolean;
+    /** The next slide's: `auto` loads it ahead, `none` waits. Default `metadata`. */
+    preload?: "none" | "metadata" | "auto";
+    /** Plays again at the end. Default `true`. */
+    loop?: boolean;
+    /** Starts muted (autoplay needs it). Default `true`. */
+    muted?: boolean;
+    /** Who made it: name, portrait, the seal's words. */
+    creator: VerticalVideoCreator;
+    /** A pill beside the name: "AI-GENERATED" — said on the picture, never only in a page's footnote. */
+    disclosure?: string;
+    /** The caption: collapsed to two lines, expandable when long. */
+    caption?: string;
+    /** Tags under the caption (without `#`). */
+    tags?: readonly string[];
+    /** The sound or credit line ("Original sound — Elena"). */
+    credit?: string;
+    /** The like count under its button, compact (`12.4K`) in `locale`. */
+    likes?: number;
+    /** The comment count under its button. */
+    comments?: number;
+    /** The share count under its button. */
+    shares?: number;
+    /** Whether the viewer likes it: `aria-pressed` on the like button. */
+    liked?: boolean;
+    /** Whether the viewer follows the creator: the "+" on the avatar becomes a check. */
+    following?: boolean;
+    /** The viewer likes or unlikes (the button, `L`, a double tap). */
+    onLike?: (liked: boolean) => void;
+    /** Opens the comments; without it the button still shows. */
+    onComment?: () => void;
+    /** Opens the share sheet. */
+    onShare?: () => void;
+    /** The viewer follows or unfollows; without it the avatar has no "+". */
+    onFollow?: (following: boolean) => void;
+    /** The "more" button's action (report, hide); without it the button is not drawn. */
+    onMore?: () => void;
+    /** The product's own action on the rail: a tip, an unlock — a button of yours (≥ 44 px, named). */
+    tipSlot?: React.ReactNode;
+    /** Top left: a chip over the picture (an auction's time left). */
+    topStart?: React.ReactNode;
+    /** Above the caption: a goal gauge, a challenge's progress. */
+    aboveCaption?: React.ReactNode;
+    /** The locale of the counts. Default `en`. */
+    locale?: string;
+    /** Every word, passed translated. */
+    labels?: Partial<VerticalVideoLabels>;
+}
+/** One short video: 9:16, the rail of actions on the right, the creator's caption bottom-left, a progress hairline. */
+declare function VerticalVideo({ title, src, poster, active, preload, loop, muted, creator, disclosure, caption, tags, credit, likes, comments, shares, liked, following, onLike, onComment, onShare, onFollow, onMore, tipSlot, topStart, aboveCaption, locale, labels: custom, className, onKeyDown, ...props }: VerticalVideoProps): React.JSX.Element;
+
+export { ShortFeed, type ShortFeedProps, VerticalVideo, type VerticalVideoCreator, type VerticalVideoLabels, type VerticalVideoProps, verticalVideoLabels };

package/dist/vertical-video.js

@@ -0,0 +1,307 @@
+"use client";
+import {
+  Avatar
+} from "./chunk-CURW36FI.js";
+import {
+  IconButton
+} from "./chunk-UOMP6VOZ.js";
+import {
+  cn
+} from "./chunk-2FRWNSRO.js";
+
+// src/vertical-video/short-feed.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function ShortFeed({ label, items, getId, renderItem, window: around = 1, onActiveChange, className, onKeyDown, ...props }) {
+  const root = React.useRef(null);
+  const [active, setActive] = React.useState(0);
+  const slides = React.useRef([]);
+  React.useEffect(() => {
+    const host = root.current;
+    if (!host || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting || entry.intersectionRatio < 0.6) continue;
+          const index = Number(entry.target.dataset.index);
+          setActive(index);
+        }
+      },
+      { root: host, threshold: [0.6] }
+    );
+    for (const slide of slides.current) if (slide) observer.observe(slide);
+    return () => observer.disconnect();
+  }, [items.length]);
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    const item = items[active];
+    if (item !== void 0) onActiveChange?.(active, item);
+  }, [active]);
+  const go = (index) => {
+    const target = slides.current[Math.max(0, Math.min(items.length - 1, index))];
+    if (!target) return;
+    target.scrollIntoView({ behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth", block: "start" });
+    target.querySelector("article")?.focus({ preventScroll: true });
+  };
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref: root,
+      "aria-label": label,
+      "aria-roledescription": "carousel",
+      className: cn("h-dvh snap-y snap-mandatory overflow-y-auto overscroll-contain bg-surface-0 [scrollbar-width:none]", className),
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if (event.key === "ArrowDown" || event.key === "PageDown") {
+          event.preventDefault();
+          go(active + 1);
+        } else if (event.key === "ArrowUp" || event.key === "PageUp") {
+          event.preventDefault();
+          go(active - 1);
+        }
+      },
+      ...props,
+      children: items.map((item, index) => {
+        const near = Math.abs(index - active) <= around;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              slides.current[index] = el;
+            },
+            "data-index": index,
+            role: "group",
+            "aria-roledescription": "slide",
+            "aria-label": `${index + 1} / ${items.length}`,
+            className: "mx-auto flex h-dvh max-w-[calc(100dvh*9/16)] snap-start snap-always items-center",
+            children: near ? renderItem(item, { active: index === active, preload: index === active + 1 ? "auto" : index === active ? "auto" : "none", index }) : null
+          },
+          getId(item)
+        );
+      })
+    }
+  );
+}
+
+// src/vertical-video/vertical-video.tsx
+import { formatCompact } from "@krizaka/intl";
+import * as React2 from "react";
+
+// src/verified-badge/verified-badge.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SIZE = { sm: "h-3.5 w-3.5", md: "h-4 w-4", lg: "h-5 w-5" };
+function VerifiedBadge({ label, showLabel, size = "md", onMedia, className, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { role: "img", "aria-label": label, className: ["inline-flex items-center gap-1 text-xs font-bold", onMedia ? "text-fg-on-media" : "text-fg-accent", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: [SIZE[size], "shrink-0"].join(" "), "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M12 2.5l2.4 1.7 2.9-.1.9 2.8 2.3 1.8-.9 2.8.9 2.8-2.3 1.8-.9 2.8-2.9-.1L12 21.5l-2.4-1.7-2.9.1-.9-2.8-2.3-1.8.9-2.8-.9-2.8 2.3-1.8.9-2.8 2.9.1z",
+          className: onMedia ? "fill-accent stroke-fg-on-media" : "fill-accent",
+          strokeWidth: "1.2"
+        }
+      ),
+      /* @__PURE__ */ jsx2("path", { d: "M8.3 12.3l2.5 2.5 4.9-5.2", fill: "none", className: "stroke-on-accent", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] }),
+    showLabel ? /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: label }) : null
+  ] });
+}
+
+// src/vertical-video/vertical-video.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var verticalVideoLabels = {
+  play: "Play",
+  pause: "Pause",
+  like: "Like",
+  comment: "Comments",
+  share: "Share",
+  more: "More",
+  follow: "Follow {name}",
+  following: "Following {name}",
+  expand: "More",
+  collapse: "Less",
+  progress: "Progress",
+  actions: "Actions"
+};
+var glyph = (d) => /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", className: "h-6 w-6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx3("path", { d }) });
+var HEART = "M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z";
+var COMMENT = "M4 5h16v11H9l-5 4z";
+var SHARE = "M4 12v7h16v-7M12 3v12M7 8l5-5 5 5";
+var MORE = "M5 12h.01M12 12h.01M19 12h.01";
+var useReducedMotion = () => React2.useSyncExternalStore(
+  (notify) => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    query.addEventListener("change", notify);
+    return () => query.removeEventListener("change", notify);
+  },
+  () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+  () => false
+);
+function VerticalVideo({
+  title,
+  src,
+  poster,
+  active = true,
+  preload = "metadata",
+  loop = true,
+  muted = true,
+  creator,
+  disclosure,
+  caption,
+  tags = [],
+  credit,
+  likes,
+  comments,
+  shares,
+  liked = false,
+  following = false,
+  onLike,
+  onComment,
+  onShare,
+  onFollow,
+  onMore,
+  tipSlot,
+  topStart,
+  aboveCaption,
+  locale = "en",
+  labels: custom,
+  className,
+  onKeyDown,
+  ...props
+}) {
+  const labels = { ...verticalVideoLabels, ...custom };
+  const reduce = useReducedMotion();
+  const video = React2.useRef(null);
+  const [playing, setPlaying] = React2.useState(false);
+  const [paused, setPaused] = React2.useState(false);
+  const [progress, setProgress] = React2.useState(0);
+  const [open, setOpen] = React2.useState(false);
+  const [heart, setHeart] = React2.useState(0);
+  const shouldPlay = active && !paused && !reduce;
+  React2.useEffect(() => {
+    const el = video.current;
+    if (!el) return;
+    if (shouldPlay) void el.play().catch(() => void 0);
+    else el.pause();
+  }, [shouldPlay, src]);
+  const press = () => {
+    const el = video.current;
+    if (!el) return;
+    if (el.paused) {
+      setPaused(false);
+      void el.play().catch(() => void 0);
+    } else {
+      setPaused(true);
+      el.pause();
+    }
+  };
+  const like = () => onLike?.(!liked);
+  const doubleTap = () => {
+    if (!liked) like();
+    setHeart((n) => n + 1);
+  };
+  const count = (n) => n === void 0 ? void 0 : formatCompact(n, { locale });
+  const name = creator.name;
+  return /* @__PURE__ */ jsxs2(
+    "article",
+    {
+      "aria-label": title,
+      tabIndex: 0,
+      "data-playing": playing ? "" : void 0,
+      className: cn("relative isolate aspect-[9/16] w-full overflow-hidden bg-surface-0 text-fg-on-media focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring", className),
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.target !== event.currentTarget) return;
+        if (event.key === " " || event.key.toLowerCase() === "k") {
+          event.preventDefault();
+          press();
+        } else if (event.key.toLowerCase() === "l") like();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3(
+          "video",
+          {
+            ref: video,
+            src,
+            poster,
+            muted,
+            loop,
+            playsInline: true,
+            preload,
+            className: "absolute inset-0 -z-10 h-full w-full object-cover",
+            onPlay: () => setPlaying(true),
+            onPause: () => setPlaying(false),
+            onTimeUpdate: (event) => {
+              const el = event.currentTarget;
+              setProgress(el.duration ? el.currentTime / el.duration : 0);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": playing ? labels.pause : labels.play, onClick: press, onDoubleClick: doubleTap, className: "absolute inset-0 cursor-pointer bg-transparent focus-visible:outline-hidden", children: !playing && /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "absolute left-1/2 top-1/2 grid h-16 w-16 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-scrim backdrop-blur-md", children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", className: "h-7 w-7", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M8 5v14l11-7z" }) }) }) }),
+        heart > 0 && /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "pointer-events-none absolute left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 place-items-center text-accent motion-safe:animate-ping", children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", className: "h-20 w-20", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: HEART }) }) }, heart),
+        /* @__PURE__ */ jsx3("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 bottom-0 h-2/5 bg-linear-to-t from-scrim to-transparent" }),
+        topStart && /* @__PURE__ */ jsx3("div", { className: "absolute left-3 top-3", children: topStart }),
+        /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": labels.actions, className: "absolute bottom-16 right-2 flex flex-col items-center gap-3", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx3(Avatar, { src: creator.avatarSrc, alt: name, fallback: name.slice(0, 1), size: "md", className: "ring-2 ring-white" }),
+            onFollow && /* @__PURE__ */ jsx3(
+              IconButton,
+              {
+                label: format(following ? labels.following : labels.follow, name),
+                "aria-pressed": following,
+                size: "icon",
+                variant: following ? "secondary" : "primary",
+                shape: "pill",
+                onClick: () => onFollow(!following),
+                className: "absolute -bottom-3 left-1/2 h-6 min-h-6 w-6 min-w-6 -translate-x-1/2 p-0",
+                children: glyph(following ? "M5 12l5 5 9-10" : "M12 5v14M5 12h14")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx3(Rail, { label: labels.like, count: count(likes), pressed: liked, onClick: like, tone: liked ? "text-accent" : void 0, children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", className: "h-6 w-6", fill: liked ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx3("path", { d: HEART }) }) }),
+          /* @__PURE__ */ jsx3(Rail, { label: labels.comment, count: count(comments), onClick: onComment, children: glyph(COMMENT) }),
+          /* @__PURE__ */ jsx3(Rail, { label: labels.share, count: count(shares), onClick: onShare, children: glyph(SHARE) }),
+          tipSlot,
+          onMore && /* @__PURE__ */ jsx3(Rail, { label: labels.more, onClick: onMore, children: glyph(MORE) })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "absolute bottom-4 left-3 right-20 flex flex-col gap-1.5", children: [
+          aboveCaption,
+          /* @__PURE__ */ jsxs2("p", { className: "flex items-center gap-1.5 text-sm font-bold", children: [
+            name,
+            creator.verifiedLabel && /* @__PURE__ */ jsx3(VerifiedBadge, { label: creator.verifiedLabel, onMedia: true, size: "sm" }),
+            disclosure && /* @__PURE__ */ jsx3("span", { className: "rounded-full bg-scrim px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-fg-on-media backdrop-blur-md", children: disclosure })
+          ] }),
+          caption && /* @__PURE__ */ jsxs2("p", { className: cn("text-sm leading-snug", !open && "line-clamp-2"), children: [
+            caption,
+            tags.length > 0 && /* @__PURE__ */ jsxs2("span", { className: "font-semibold", children: [
+              " ",
+              tags.map((tag) => `#${tag}`).join(" ")
+            ] })
+          ] }),
+          caption && caption.length > 90 && /* @__PURE__ */ jsx3("button", { type: "button", "aria-expanded": open, onClick: () => setOpen((v) => !v), className: "w-fit rounded text-xs font-semibold underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring", children: open ? labels.collapse : labels.expand }),
+          credit && /* @__PURE__ */ jsx3("p", { className: "text-xs opacity-90", children: credit })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { role: "progressbar", "aria-label": labels.progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(progress * 100), className: "absolute inset-x-0 bottom-0 h-1 bg-scrim", children: /* @__PURE__ */ jsx3("div", { className: "h-full bg-white", style: { width: `${progress * 100}%` } }) })
+      ]
+    }
+  );
+}
+var format = (message, name) => message.replace("{name}", name);
+function Rail({ label, count, pressed, onClick, tone, children }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx3(IconButton, { label, "aria-pressed": pressed, variant: "ghost", shape: "pill", onClick, className: cn("h-11 min-h-11 w-11 min-w-11 bg-scrim text-fg-on-media backdrop-blur-md hover:bg-scrim", tone), children }),
+    count !== void 0 && /* @__PURE__ */ jsx3("span", { className: "text-xs font-semibold tabular-nums", children: count })
+  ] });
+}
+export {
+  ShortFeed,
+  VerticalVideo,
+  verticalVideoLabels
+};
+//# sourceMappingURL=vertical-video.js.map

package/dist/vertical-video.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vertical-video/short-feed.tsx","../src/vertical-video/vertical-video.tsx","../src/verified-badge/verified-badge.tsx"],"sourcesContent":["// Client (an observer, keys). A vertical feed of short videos: one slide per screen, CSS scroll-snap, the slide in view\n// plays and the others pause, the next one preloads, only the slides near the one in view are mounted (the rest keep their\n// height). ↑/↓ (and PageUp/PageDown) go to the previous / next, with the focus following.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface ShortFeedProps<T> extends Omit<React.ComponentProps<\"section\">, \"children\"> {\n  /** The feed's accessible name (\"Videos\"), passed translated. */\n  label: string;\n  /** The videos, in order. */\n  items: readonly T[];\n  /** A stable key for an item. */\n  getId: (item: T) => string;\n  /** One slide: `active` is true for the one in view, `preload` for the next, `near` false for the ones kept empty. */\n  renderItem: (item: T, state: { active: boolean; preload: \"none\" | \"metadata\" | \"auto\"; index: number }) => React.ReactNode;\n  /** The slides mounted around the one in view (before and after). Default 1; the others keep their height empty. */\n  window?: number;\n  /** Called when the slide in view changes. */\n  onActiveChange?: (index: number, item: T) => void;\n}\n\n/** A vertical snap-scrolling feed that plays the video in view, preloads the next and pauses the rest. */\nexport function ShortFeed<T>({ label, items, getId, renderItem, window: around = 1, onActiveChange, className, onKeyDown, ...props }: ShortFeedProps<T>) {\n  const root = React.useRef<HTMLElement>(null);\n  const [active, setActive] = React.useState(0);\n  const slides = React.useRef<(HTMLDivElement | null)[]>([]);\n\n  React.useEffect(() => {\n    const host = root.current;\n    if (!host || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (!entry.isIntersecting || entry.intersectionRatio < 0.6) continue;\n          const index = Number((entry.target as HTMLElement).dataset.index);\n          setActive(index);\n        }\n      },\n      { root: host, threshold: [0.6] },\n    );\n    for (const slide of slides.current) if (slide) observer.observe(slide);\n    return () => observer.disconnect();\n  }, [items.length]);\n\n  const first = React.useRef(true);\n  React.useEffect(() => {\n    if (first.current) {\n      first.current = false;\n      return;\n    }\n    const item = items[active];\n    if (item !== undefined) onActiveChange?.(active, item);\n    // Only a change of the slide in view is an event.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [active]);\n\n  const go = (index: number) => {\n    const target = slides.current[Math.max(0, Math.min(items.length - 1, index))];\n    if (!target) return;\n    target.scrollIntoView({ behavior: window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? \"auto\" : \"smooth\", block: \"start\" });\n    target.querySelector<HTMLElement>(\"article\")?.focus({ preventScroll: true });\n  };\n\n  return (\n    <section\n      ref={root}\n      aria-label={label}\n      aria-roledescription=\"carousel\"\n      className={cn(\"h-dvh snap-y snap-mandatory overflow-y-auto overscroll-contain bg-surface-0 [scrollbar-width:none]\", className)}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (event.defaultPrevented) return;\n        if (event.key === \"ArrowDown\" || event.key === \"PageDown\") {\n          event.preventDefault();\n          go(active + 1);\n        } else if (event.key === \"ArrowUp\" || event.key === \"PageUp\") {\n          event.preventDefault();\n          go(active - 1);\n        }\n      }}\n      {...props}\n    >\n      {items.map((item, index) => {\n        const near = Math.abs(index - active) <= around;\n        return (\n          <div\n            key={getId(item)}\n            ref={(el) => {\n              slides.current[index] = el;\n            }}\n            data-index={index}\n            role=\"group\"\n            aria-roledescription=\"slide\"\n            aria-label={`${index + 1} / ${items.length}`}\n            className=\"mx-auto flex h-dvh max-w-[calc(100dvh*9/16)] snap-start snap-always items-center\"\n          >\n            {near ? renderItem(item, { active: index === active, preload: index === active + 1 ? \"auto\" : index === active ? \"auto\" : \"none\", index }) : null}\n          </div>\n        );\n      })}\n    </section>\n  );\n}\n","// Client (a video element, an observer, keys). A 9:16 clip filling its frame, with the action rail of a short-video feed on\n// the right (avatar + follow, like, comment, share, a slot for tip / unlock, more) and the caption block bottom-left. Every\n// word is a prop; counts are formatted with @krizaka/intl; everything over the picture reads on the invariant `scrim` /\n// `fg-on-media` tokens, so it is legible in both themes. Under reduced motion nothing autoplays: the poster and a play button.\nimport { formatCompact } from \"@krizaka/intl\";\nimport * as React from \"react\";\n\nimport { Avatar } from \"../avatar/avatar\";\nimport { IconButton } from \"../button/button\";\nimport { cn } from \"../cn\";\nimport { VerifiedBadge } from \"../verified-badge/verified-badge\";\n\nexport interface VerticalVideoLabels {\n  /** \"Play\" / \"Pause\" — the tap target over the picture. */\n  play: string;\n  pause: string;\n  /** \"Like\" / \"Unlike\" (the button's name; the state is `aria-pressed`). */\n  like: string;\n  comment: string;\n  share: string;\n  more: string;\n  /** \"Follow Elena\" — `{name}` is replaced by the creator's name. */\n  follow: string;\n  /** \"Following Elena\". */\n  following: string;\n  /** \"More\" / \"Less\" on a long caption. */\n  expand: string;\n  collapse: string;\n  /** The progress bar's name (\"Progress\"). */\n  progress: string;\n  /** The rail's name (\"Actions\"). */\n  actions: string;\n}\n\nexport const verticalVideoLabels: VerticalVideoLabels = {\n  play: \"Play\",\n  pause: \"Pause\",\n  like: \"Like\",\n  comment: \"Comments\",\n  share: \"Share\",\n  more: \"More\",\n  follow: \"Follow {name}\",\n  following: \"Following {name}\",\n  expand: \"More\",\n  collapse: \"Less\",\n  progress: \"Progress\",\n  actions: \"Actions\",\n};\n\nexport interface VerticalVideoCreator {\n  name: string;\n  /** Their portrait. */\n  avatarSrc?: string;\n  /** The seal's words (\"Verified\"): shows the seal beside the name. */\n  verifiedLabel?: string;\n}\n\nexport interface VerticalVideoProps extends Omit<React.ComponentProps<\"article\">, \"title\" | \"children\"> {\n  /** The video's accessible name (\"Video: Night shoot, part 2\"), passed translated. */\n  title: string;\n  /** The clip — absent, the poster alone shows (MP4 or WebM; an HLS address only in Safari — use the player of `@krizaka/ui/video-player` for HLS). */\n  src?: string;\n  /** The picture until the first frame, and under reduced motion. */\n  poster?: string;\n  /** Plays while `true`; a `ShortFeed` passes it for the slide in view. Default `true`. */\n  active?: boolean;\n  /** The next slide's: `auto` loads it ahead, `none` waits. Default `metadata`. */\n  preload?: \"none\" | \"metadata\" | \"auto\";\n  /** Plays again at the end. Default `true`. */\n  loop?: boolean;\n  /** Starts muted (autoplay needs it). Default `true`. */\n  muted?: boolean;\n  /** Who made it: name, portrait, the seal's words. */\n  creator: VerticalVideoCreator;\n  /** A pill beside the name: \"AI-GENERATED\" — said on the picture, never only in a page's footnote. */\n  disclosure?: string;\n  /** The caption: collapsed to two lines, expandable when long. */\n  caption?: string;\n  /** Tags under the caption (without `#`). */\n  tags?: readonly string[];\n  /** The sound or credit line (\"Original sound — Elena\"). */\n  credit?: string;\n  /** The like count under its button, compact (`12.4K`) in `locale`. */\n  likes?: number;\n  /** The comment count under its button. */\n  comments?: number;\n  /** The share count under its button. */\n  shares?: number;\n  /** Whether the viewer likes it: `aria-pressed` on the like button. */\n  liked?: boolean;\n  /** Whether the viewer follows the creator: the \"+\" on the avatar becomes a check. */\n  following?: boolean;\n  /** The viewer likes or unlikes (the button, `L`, a double tap). */\n  onLike?: (liked: boolean) => void;\n  /** Opens the comments; without it the button still shows. */\n  onComment?: () => void;\n  /** Opens the share sheet. */\n  onShare?: () => void;\n  /** The viewer follows or unfollows; without it the avatar has no \"+\". */\n  onFollow?: (following: boolean) => void;\n  /** The \"more\" button's action (report, hide); without it the button is not drawn. */\n  onMore?: () => void;\n  /** The product's own action on the rail: a tip, an unlock — a button of yours (≥ 44 px, named). */\n  tipSlot?: React.ReactNode;\n  /** Top left: a chip over the picture (an auction's time left). */\n  topStart?: React.ReactNode;\n  /** Above the caption: a goal gauge, a challenge's progress. */\n  aboveCaption?: React.ReactNode;\n  /** The locale of the counts. Default `en`. */\n  locale?: string;\n  /** Every word, passed translated. */\n  labels?: Partial<VerticalVideoLabels>;\n}\n\nconst glyph = (d: string) => (\n  <svg viewBox=\"0 0 24 24\" className=\"h-6 w-6\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d={d} />\n  </svg>\n);\nconst HEART = \"M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\";\nconst COMMENT = \"M4 5h16v11H9l-5 4z\";\nconst SHARE = \"M4 12v7h16v-7M12 3v12M7 8l5-5 5 5\";\nconst MORE = \"M5 12h.01M12 12h.01M19 12h.01\";\n\nconst useReducedMotion = () =>\n  React.useSyncExternalStore(\n    (notify) => {\n      const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n      query.addEventListener(\"change\", notify);\n      return () => query.removeEventListener(\"change\", notify);\n    },\n    () => window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches,\n    () => false,\n  );\n\n/** One short video: 9:16, the rail of actions on the right, the creator's caption bottom-left, a progress hairline. */\nexport function VerticalVideo({\n  title,\n  src,\n  poster,\n  active = true,\n  preload = \"metadata\",\n  loop = true,\n  muted = true,\n  creator,\n  disclosure,\n  caption,\n  tags = [],\n  credit,\n  likes,\n  comments,\n  shares,\n  liked = false,\n  following = false,\n  onLike,\n  onComment,\n  onShare,\n  onFollow,\n  onMore,\n  tipSlot,\n  topStart,\n  aboveCaption,\n  locale = \"en\",\n  labels: custom,\n  className,\n  onKeyDown,\n  ...props\n}: VerticalVideoProps) {\n  const labels = { ...verticalVideoLabels, ...custom };\n  const reduce = useReducedMotion();\n  const video = React.useRef<HTMLVideoElement>(null);\n  const [playing, setPlaying] = React.useState(false);\n  const [paused, setPaused] = React.useState(false); // the viewer's pause: it holds until they play again\n  const [progress, setProgress] = React.useState(0);\n  const [open, setOpen] = React.useState(false);\n  const [heart, setHeart] = React.useState(0);\n\n  const shouldPlay = active && !paused && !reduce;\n  React.useEffect(() => {\n    const el = video.current;\n    if (!el) return;\n    if (shouldPlay) void el.play().catch(() => undefined);\n    else el.pause();\n  }, [shouldPlay, src]);\n\n  const press = () => {\n    const el = video.current;\n    if (!el) return;\n    if (el.paused) {\n      setPaused(false);\n      void el.play().catch(() => undefined);\n    } else {\n      setPaused(true);\n      el.pause();\n    }\n  };\n  const like = () => onLike?.(!liked);\n  const doubleTap = () => {\n    if (!liked) like();\n    setHeart((n) => n + 1); // a heart blooms over the picture (still under reduced motion: it shows and goes)\n  };\n  const count = (n?: number) => (n === undefined ? undefined : formatCompact(n, { locale }));\n  const name = creator.name;\n\n  return (\n    <article\n      aria-label={title}\n      tabIndex={0}\n      data-playing={playing ? \"\" : undefined}\n      className={cn(\"relative isolate aspect-[9/16] w-full overflow-hidden bg-surface-0 text-fg-on-media focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\", className)}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (event.defaultPrevented || event.target !== event.currentTarget) return;\n        if (event.key === \" \" || event.key.toLowerCase() === \"k\") {\n          event.preventDefault();\n          press();\n        } else if (event.key.toLowerCase() === \"l\") like();\n      }}\n      {...props}\n    >\n      <video\n        ref={video}\n        src={src}\n        poster={poster}\n        muted={muted}\n        loop={loop}\n        playsInline\n        preload={preload}\n        className=\"absolute inset-0 -z-10 h-full w-full object-cover\"\n        onPlay={() => setPlaying(true)}\n        onPause={() => setPlaying(false)}\n        onTimeUpdate={(event) => {\n          const el = event.currentTarget;\n          setProgress(el.duration ? el.currentTime / el.duration : 0);\n        }}\n      />\n      {/* The tap target: a tap pauses or plays, a double tap likes. It is a button, so the keyboard has it too. */}\n      <button type=\"button\" aria-label={playing ? labels.pause : labels.play} onClick={press} onDoubleClick={doubleTap} className=\"absolute inset-0 cursor-pointer bg-transparent focus-visible:outline-hidden\">\n        {!playing && (\n          <span aria-hidden className=\"absolute left-1/2 top-1/2 grid h-16 w-16 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-scrim backdrop-blur-md\">\n            <svg viewBox=\"0 0 24 24\" className=\"h-7 w-7\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\" /></svg>\n          </span>\n        )}\n      </button>\n      {heart > 0 && (\n        <span key={heart} aria-hidden className=\"pointer-events-none absolute left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 place-items-center text-accent motion-safe:animate-ping\">\n          <svg viewBox=\"0 0 24 24\" className=\"h-20 w-20\" fill=\"currentColor\"><path d={HEART} /></svg>\n        </span>\n      )}\n      <div aria-hidden className=\"pointer-events-none absolute inset-x-0 bottom-0 h-2/5 bg-linear-to-t from-scrim to-transparent\" />\n      {topStart && <div className=\"absolute left-3 top-3\">{topStart}</div>}\n\n      <div role=\"group\" aria-label={labels.actions} className=\"absolute bottom-16 right-2 flex flex-col items-center gap-3\">\n        <div className=\"relative\">\n          <Avatar src={creator.avatarSrc} alt={name} fallback={name.slice(0, 1)} size=\"md\" className=\"ring-2 ring-white\" />\n          {onFollow && (\n            <IconButton\n              label={format(following ? labels.following : labels.follow, name)}\n              aria-pressed={following}\n              size=\"icon\"\n              variant={following ? \"secondary\" : \"primary\"}\n              shape=\"pill\"\n              onClick={() => onFollow(!following)}\n              className=\"absolute -bottom-3 left-1/2 h-6 min-h-6 w-6 min-w-6 -translate-x-1/2 p-0\"\n            >\n              {glyph(following ? \"M5 12l5 5 9-10\" : \"M12 5v14M5 12h14\")}\n            </IconButton>\n          )}\n        </div>\n        <Rail label={labels.like} count={count(likes)} pressed={liked} onClick={like} tone={liked ? \"text-accent\" : undefined}>\n          <svg viewBox=\"0 0 24 24\" className=\"h-6 w-6\" fill={liked ? \"currentColor\" : \"none\"} stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden><path d={HEART} /></svg>\n        </Rail>\n        <Rail label={labels.comment} count={count(comments)} onClick={onComment}>{glyph(COMMENT)}</Rail>\n        <Rail label={labels.share} count={count(shares)} onClick={onShare}>{glyph(SHARE)}</Rail>\n        {tipSlot}\n        {onMore && <Rail label={labels.more} onClick={onMore}>{glyph(MORE)}</Rail>}\n      </div>\n\n      <div className=\"absolute bottom-4 left-3 right-20 flex flex-col gap-1.5\">\n        {aboveCaption}\n        <p className=\"flex items-center gap-1.5 text-sm font-bold\">\n          {name}\n          {creator.verifiedLabel && <VerifiedBadge label={creator.verifiedLabel} onMedia size=\"sm\" />}\n          {disclosure && <span className=\"rounded-full bg-scrim px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-fg-on-media backdrop-blur-md\">{disclosure}</span>}\n        </p>\n        {caption && (\n          <p className={cn(\"text-sm leading-snug\", !open && \"line-clamp-2\")}>\n            {caption}\n            {tags.length > 0 && <span className=\"font-semibold\"> {tags.map((tag) => `#${tag}`).join(\" \")}</span>}\n          </p>\n        )}\n        {caption && caption.length > 90 && (\n          <button type=\"button\" aria-expanded={open} onClick={() => setOpen((v) => !v)} className=\"w-fit rounded text-xs font-semibold underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\">\n            {open ? labels.collapse : labels.expand}\n          </button>\n        )}\n        {credit && <p className=\"text-xs opacity-90\">{credit}</p>}\n      </div>\n\n      <div role=\"progressbar\" aria-label={labels.progress} aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(progress * 100)} className=\"absolute inset-x-0 bottom-0 h-1 bg-scrim\">\n        <div className=\"h-full bg-white\" style={{ width: `${progress * 100}%` }} />\n      </div>\n    </article>\n  );\n}\n\n/** \"Follow {name}\" → \"Follow Elena\". */\nconst format = (message: string, name: string) => message.replace(\"{name}\", name);\n\nfunction Rail({ label, count, pressed, onClick, tone, children }: { label: string; count?: string | undefined; pressed?: boolean; onClick?: (() => void) | undefined; tone?: string | undefined; children: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-col items-center gap-0.5\">\n      <IconButton label={label} aria-pressed={pressed} variant=\"ghost\" shape=\"pill\" onClick={onClick} className={cn(\"h-11 min-h-11 w-11 min-w-11 bg-scrim text-fg-on-media backdrop-blur-md hover:bg-scrim\", tone)}>\n        {children}\n      </IconButton>\n      {count !== undefined && <span className=\"text-xs font-semibold tabular-nums\">{count}</span>}\n    </div>\n  );\n}\n","// Server-safe. A seal that says the person or the account was verified: the accent, named in words.\nimport type * as React from \"react\";\n\nexport type VerifiedBadgeProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** Its words (“Verified”), read — and shown with `showLabel` — passed translated. */\n  label: string;\n  /** Show the words beside the seal. Default false: the seal alone, named. */\n  showLabel?: boolean;\n  /** The seal's size: sm (14 px), md (16 px, default), lg (20 px). */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** On a photo: a ring of the media around the seal. */\n  onMedia?: boolean;\n};\n\nconst SIZE = { sm: \"h-3.5 w-3.5\", md: \"h-4 w-4\", lg: \"h-5 w-5\" } as const;\n\n/** A seal that says the person or the account was verified (a selfie check, an ID), named in words. */\nexport function VerifiedBadge({ label, showLabel, size = \"md\", onMedia, className, ...props }: VerifiedBadgeProps) {\n  return (\n    <span role=\"img\" aria-label={label} className={[\"inline-flex items-center gap-1 text-xs font-bold\", onMedia ? \"text-fg-on-media\" : \"text-fg-accent\", className].filter(Boolean).join(\" \")} {...props}>\n      <svg viewBox=\"0 0 24 24\" className={[SIZE[size], \"shrink-0\"].join(\" \")} aria-hidden>\n        <path\n          d=\"M12 2.5l2.4 1.7 2.9-.1.9 2.8 2.3 1.8-.9 2.8.9 2.8-2.3 1.8-.9 2.8-2.9-.1L12 21.5l-2.4-1.7-2.9.1-.9-2.8-2.3-1.8.9-2.8-.9-2.8 2.3-1.8.9-2.8 2.9.1z\"\n          className={onMedia ? \"fill-accent stroke-fg-on-media\" : \"fill-accent\"}\n          strokeWidth=\"1.2\"\n        />\n        <path d=\"M8.3 12.3l2.5 2.5 4.9-5.2\" fill=\"none\" className=\"stroke-on-accent\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n      {showLabel ? <span aria-hidden>{label}</span> : null}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAGA,YAAY,WAAW;AAmFb;AA/DH,SAAS,UAAa,EAAE,OAAO,OAAO,OAAO,YAAY,QAAQ,SAAS,GAAG,gBAAgB,WAAW,WAAW,GAAG,MAAM,GAAsB;AACvJ,QAAM,OAAa,aAAoB,IAAI;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAU,eAAS,CAAC;AAC5C,QAAM,SAAe,aAAkC,CAAC,CAAC;AAEzD,EAAM,gBAAU,MAAM;AACpB,UAAM,OAAO,KAAK;AAClB,QAAI,CAAC,QAAQ,OAAO,yBAAyB,YAAa;AAC1D,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,YAAY;AACX,mBAAW,SAAS,SAAS;AAC3B,cAAI,CAAC,MAAM,kBAAkB,MAAM,oBAAoB,IAAK;AAC5D,gBAAM,QAAQ,OAAQ,MAAM,OAAuB,QAAQ,KAAK;AAChE,oBAAU,KAAK;AAAA,QACjB;AAAA,MACF;AAAA,MACA,EAAE,MAAM,MAAM,WAAW,CAAC,GAAG,EAAE;AAAA,IACjC;AACA,eAAW,SAAS,OAAO,QAAS,KAAI,MAAO,UAAS,QAAQ,KAAK;AACrE,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,QAAM,QAAc,aAAO,IAAI;AAC/B,EAAM,gBAAU,MAAM;AACpB,QAAI,MAAM,SAAS;AACjB,YAAM,UAAU;AAChB;AAAA,IACF;AACA,UAAM,OAAO,MAAM,MAAM;AACzB,QAAI,SAAS,OAAW,kBAAiB,QAAQ,IAAI;AAAA,EAGvD,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,KAAK,CAAC,UAAkB;AAC5B,UAAM,SAAS,OAAO,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC;AAC5E,QAAI,CAAC,OAAQ;AACb,WAAO,eAAe,EAAE,UAAU,OAAO,WAAW,kCAAkC,EAAE,UAAU,SAAS,UAAU,OAAO,QAAQ,CAAC;AACrI,WAAO,cAA2B,SAAS,GAAG,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,EAC7E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,wBAAqB;AAAA,MACrB,WAAW,GAAG,sGAAsG,SAAS;AAAA,MAC7H,WAAW,CAAC,UAAU;AACpB,oBAAY,KAAK;AACjB,YAAI,MAAM,iBAAkB;AAC5B,YAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,YAAY;AACzD,gBAAM,eAAe;AACrB,aAAG,SAAS,CAAC;AAAA,QACf,WAAW,MAAM,QAAQ,aAAa,MAAM,QAAQ,UAAU;AAC5D,gBAAM,eAAe;AACrB,aAAG,SAAS,CAAC;AAAA,QACf;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,cAAM,OAAO,KAAK,IAAI,QAAQ,MAAM,KAAK;AACzC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,KAAK,CAAC,OAAO;AACX,qBAAO,QAAQ,KAAK,IAAI;AAAA,YAC1B;AAAA,YACA,cAAY;AAAA,YACZ,MAAK;AAAA,YACL,wBAAqB;AAAA,YACrB,cAAY,GAAG,QAAQ,CAAC,MAAM,MAAM,MAAM;AAAA,YAC1C,WAAU;AAAA,YAET,iBAAO,WAAW,MAAM,EAAE,QAAQ,UAAU,QAAQ,SAAS,UAAU,SAAS,IAAI,SAAS,UAAU,SAAS,SAAS,QAAQ,MAAM,CAAC,IAAI;AAAA;AAAA,UAVxI,MAAM,IAAI;AAAA,QAWjB;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;;;ACnGA,SAAS,qBAAqB;AAC9B,YAAYA,YAAW;;;ACejB,SACE,OAAAC,MADF;AANN,IAAM,OAAO,EAAE,IAAI,eAAe,IAAI,WAAW,IAAI,UAAU;AAGxD,SAAS,cAAc,EAAE,OAAO,WAAW,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,GAAuB;AACjH,SACE,qBAAC,UAAK,MAAK,OAAM,cAAY,OAAO,WAAW,CAAC,oDAAoD,UAAU,qBAAqB,kBAAkB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OAC7L;AAAA,yBAAC,SAAI,SAAQ,aAAY,WAAW,CAAC,KAAK,IAAI,GAAG,UAAU,EAAE,KAAK,GAAG,GAAG,eAAW,MACjF;AAAA,sBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,WAAW,UAAU,mCAAmC;AAAA,UACxD,aAAY;AAAA;AAAA,MACd;AAAA,MACA,gBAAAA,KAAC,UAAK,GAAE,6BAA4B,MAAK,QAAO,WAAU,oBAAmB,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ;AAAA,OAC9I;AAAA,IACC,YAAY,gBAAAA,KAAC,UAAK,eAAW,MAAE,iBAAM,IAAU;AAAA,KAClD;AAEJ;;;ADqFI,gBAAAC,MAyII,QAAAC,aAzIJ;AAlFG,IAAM,sBAA2C;AAAA,EACtD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAmEA,IAAM,QAAQ,CAAC,MACb,gBAAAD,KAAC,SAAI,SAAQ,aAAY,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACrJ,0BAAAA,KAAC,UAAK,GAAM,GACd;AAEF,IAAM,QAAQ;AACd,IAAM,UAAU;AAChB,IAAM,QAAQ;AACd,IAAM,OAAO;AAEb,IAAM,mBAAmB,MACjB;AAAA,EACJ,CAAC,WAAW;AACV,UAAM,QAAQ,OAAO,WAAW,kCAAkC;AAClE,UAAM,iBAAiB,UAAU,MAAM;AACvC,WAAO,MAAM,MAAM,oBAAoB,UAAU,MAAM;AAAA,EACzD;AAAA,EACA,MAAM,OAAO,WAAW,kCAAkC,EAAE;AAAA,EAC5D,MAAM;AACR;AAGK,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,CAAC;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,SAAS,EAAE,GAAG,qBAAqB,GAAG,OAAO;AACnD,QAAM,SAAS,iBAAiB;AAChC,QAAM,QAAc,cAAyB,IAAI;AACjD,QAAM,CAAC,SAAS,UAAU,IAAU,gBAAS,KAAK;AAClD,QAAM,CAAC,QAAQ,SAAS,IAAU,gBAAS,KAAK;AAChD,QAAM,CAAC,UAAU,WAAW,IAAU,gBAAS,CAAC;AAChD,QAAM,CAAC,MAAM,OAAO,IAAU,gBAAS,KAAK;AAC5C,QAAM,CAAC,OAAO,QAAQ,IAAU,gBAAS,CAAC;AAE1C,QAAM,aAAa,UAAU,CAAC,UAAU,CAAC;AACzC,EAAM,iBAAU,MAAM;AACpB,UAAM,KAAK,MAAM;AACjB,QAAI,CAAC,GAAI;AACT,QAAI,WAAY,MAAK,GAAG,KAAK,EAAE,MAAM,MAAM,MAAS;AAAA,QAC/C,IAAG,MAAM;AAAA,EAChB,GAAG,CAAC,YAAY,GAAG,CAAC;AAEpB,QAAM,QAAQ,MAAM;AAClB,UAAM,KAAK,MAAM;AACjB,QAAI,CAAC,GAAI;AACT,QAAI,GAAG,QAAQ;AACb,gBAAU,KAAK;AACf,WAAK,GAAG,KAAK,EAAE,MAAM,MAAM,MAAS;AAAA,IACtC,OAAO;AACL,gBAAU,IAAI;AACd,SAAG,MAAM;AAAA,IACX;AAAA,EACF;AACA,QAAM,OAAO,MAAM,SAAS,CAAC,KAAK;AAClC,QAAM,YAAY,MAAM;AACtB,QAAI,CAAC,MAAO,MAAK;AACjB,aAAS,CAAC,MAAM,IAAI,CAAC;AAAA,EACvB;AACA,QAAM,QAAQ,CAAC,MAAgB,MAAM,SAAY,SAAY,cAAc,GAAG,EAAE,OAAO,CAAC;AACxF,QAAM,OAAO,QAAQ;AAErB,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,UAAU;AAAA,MACV,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,GAAG,iKAAiK,SAAS;AAAA,MACxL,WAAW,CAAC,UAAU;AACpB,oBAAY,KAAK;AACjB,YAAI,MAAM,oBAAoB,MAAM,WAAW,MAAM,cAAe;AACpE,YAAI,MAAM,QAAQ,OAAO,MAAM,IAAI,YAAY,MAAM,KAAK;AACxD,gBAAM,eAAe;AACrB,gBAAM;AAAA,QACR,WAAW,MAAM,IAAI,YAAY,MAAM,IAAK,MAAK;AAAA,MACnD;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,wBAAAD;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,aAAW;AAAA,YACX;AAAA,YACA,WAAU;AAAA,YACV,QAAQ,MAAM,WAAW,IAAI;AAAA,YAC7B,SAAS,MAAM,WAAW,KAAK;AAAA,YAC/B,cAAc,CAAC,UAAU;AACvB,oBAAM,KAAK,MAAM;AACjB,0BAAY,GAAG,WAAW,GAAG,cAAc,GAAG,WAAW,CAAC;AAAA,YAC5D;AAAA;AAAA,QACF;AAAA,QAEA,gBAAAA,KAAC,YAAO,MAAK,UAAS,cAAY,UAAU,OAAO,QAAQ,OAAO,MAAM,SAAS,OAAO,eAAe,WAAW,WAAU,+EACzH,WAAC,WACA,gBAAAA,KAAC,UAAK,eAAW,MAAC,WAAU,wIAC1B,0BAAAA,KAAC,SAAI,SAAQ,aAAY,WAAU,WAAU,MAAK,gBAAe,0BAAAA,KAAC,UAAK,GAAE,iBAAgB,GAAE,GAC7F,GAEJ;AAAA,QACC,QAAQ,KACP,gBAAAA,KAAC,UAAiB,eAAW,MAAC,WAAU,gJACtC,0BAAAA,KAAC,SAAI,SAAQ,aAAY,WAAU,aAAY,MAAK,gBAAe,0BAAAA,KAAC,UAAK,GAAG,OAAO,GAAE,KAD5E,KAEX;AAAA,QAEF,gBAAAA,KAAC,SAAI,eAAW,MAAC,WAAU,kGAAiG;AAAA,QAC3H,YAAY,gBAAAA,KAAC,SAAI,WAAU,yBAAyB,oBAAS;AAAA,QAE9D,gBAAAC,MAAC,SAAI,MAAK,SAAQ,cAAY,OAAO,SAAS,WAAU,+DACtD;AAAA,0BAAAA,MAAC,SAAI,WAAU,YACb;AAAA,4BAAAD,KAAC,UAAO,KAAK,QAAQ,WAAW,KAAK,MAAM,UAAU,KAAK,MAAM,GAAG,CAAC,GAAG,MAAK,MAAK,WAAU,qBAAoB;AAAA,YAC9G,YACC,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,OAAO,YAAY,OAAO,YAAY,OAAO,QAAQ,IAAI;AAAA,gBAChE,gBAAc;AAAA,gBACd,MAAK;AAAA,gBACL,SAAS,YAAY,cAAc;AAAA,gBACnC,OAAM;AAAA,gBACN,SAAS,MAAM,SAAS,CAAC,SAAS;AAAA,gBAClC,WAAU;AAAA,gBAET,gBAAM,YAAY,mBAAmB,kBAAkB;AAAA;AAAA,YAC1D;AAAA,aAEJ;AAAA,UACA,gBAAAA,KAAC,QAAK,OAAO,OAAO,MAAM,OAAO,MAAM,KAAK,GAAG,SAAS,OAAO,SAAS,MAAM,MAAM,QAAQ,gBAAgB,QAC1G,0BAAAA,KAAC,SAAI,SAAQ,aAAY,WAAU,WAAU,MAAM,QAAQ,iBAAiB,QAAQ,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MAAC,0BAAAA,KAAC,UAAK,GAAG,OAAO,GAAE,GACvM;AAAA,UACA,gBAAAA,KAAC,QAAK,OAAO,OAAO,SAAS,OAAO,MAAM,QAAQ,GAAG,SAAS,WAAY,gBAAM,OAAO,GAAE;AAAA,UACzF,gBAAAA,KAAC,QAAK,OAAO,OAAO,OAAO,OAAO,MAAM,MAAM,GAAG,SAAS,SAAU,gBAAM,KAAK,GAAE;AAAA,UAChF;AAAA,UACA,UAAU,gBAAAA,KAAC,QAAK,OAAO,OAAO,MAAM,SAAS,QAAS,gBAAM,IAAI,GAAE;AAAA,WACrE;AAAA,QAEA,gBAAAC,MAAC,SAAI,WAAU,2DACZ;AAAA;AAAA,UACD,gBAAAA,MAAC,OAAE,WAAU,+CACV;AAAA;AAAA,YACA,QAAQ,iBAAiB,gBAAAD,KAAC,iBAAc,OAAO,QAAQ,eAAe,SAAO,MAAC,MAAK,MAAK;AAAA,YACxF,cAAc,gBAAAA,KAAC,UAAK,WAAU,qHAAqH,sBAAW;AAAA,aACjK;AAAA,UACC,WACC,gBAAAC,MAAC,OAAE,WAAW,GAAG,wBAAwB,CAAC,QAAQ,cAAc,GAC7D;AAAA;AAAA,YACA,KAAK,SAAS,KAAK,gBAAAA,MAAC,UAAK,WAAU,iBAAgB;AAAA;AAAA,cAAE,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG;AAAA,eAAE;AAAA,aAC/F;AAAA,UAED,WAAW,QAAQ,SAAS,MAC3B,gBAAAD,KAAC,YAAO,MAAK,UAAS,iBAAe,MAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,WAAU,2HACrF,iBAAO,OAAO,WAAW,OAAO,QACnC;AAAA,UAED,UAAU,gBAAAA,KAAC,OAAE,WAAU,sBAAsB,kBAAO;AAAA,WACvD;AAAA,QAEA,gBAAAA,KAAC,SAAI,MAAK,eAAc,cAAY,OAAO,UAAU,iBAAe,GAAG,iBAAe,KAAK,iBAAe,KAAK,MAAM,WAAW,GAAG,GAAG,WAAU,4CAC9I,0BAAAA,KAAC,SAAI,WAAU,mBAAkB,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,GAAG,GAC3E;AAAA;AAAA;AAAA,EACF;AAEJ;AAGA,IAAM,SAAS,CAAC,SAAiB,SAAiB,QAAQ,QAAQ,UAAU,IAAI;AAEhF,SAAS,KAAK,EAAE,OAAO,OAAO,SAAS,SAAS,MAAM,SAAS,GAA+J;AAC5N,SACE,gBAAAC,MAAC,SAAI,WAAU,sCACb;AAAA,oBAAAD,KAAC,cAAW,OAAc,gBAAc,SAAS,SAAQ,SAAQ,OAAM,QAAO,SAAkB,WAAW,GAAG,yFAAyF,IAAI,GACxM,UACH;AAAA,IACC,UAAU,UAAa,gBAAAA,KAAC,UAAK,WAAU,sCAAsC,iBAAM;AAAA,KACtF;AAEJ;","names":["React","jsx","jsx","jsxs"]}