@krizaka/ui 3.19.0 → 3.21.0

package/dist/tabs.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useSlidingIndicator
-} from "./chunk-VDR2EP6K.js";
+} from "./chunk-4QN5YJ3D.js";
 
 // src/tabs/tabs.tsx
 import { Tabs as TabsPrimitive } from "radix-ui";
@@ -31,7 +31,7 @@ var tabs = tv({
       },
       /* Pills that scroll sideways on a phone: a feed's sections. */
       pills: {
-        list: "gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1 before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-full before:border before:border-accent before:bg-accent-soft",
+        list: "gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-full before:border before:border-accent before:bg-accent-soft",
         trigger: "h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent"
       }
     }

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1 \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-full before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n"],"mappings":";;;;;;AAEA,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AACvB,SAAS,UAA6B;AA2EhC;AAvEC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA,IAGN,MACE;AAAA,IAGF,SACE;AAAA,IAEF,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA;AAAA,MAEP,WAAW;AAAA,QACT,MACE;AAAA,QAKF,SACE;AAAA,MAKJ;AAAA;AAAA,MAEA,WAAW;AAAA,QACT,MACE;AAAA,QAEF,SACE;AAAA,MAGJ;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,MACE;AAAA,QAGF,SACE;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,YAAY;AAC1C,CAAC;AAKD,IAAM,iBAAuB,oBAAuB,WAAW;AAQxD,SAAS,SAAS,EAAE,UAAU,aAAa,WAAW,GAAG,MAAM,GAAkB;AACtF,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC1G;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAoD;AACjG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,QAAM,EAAE,IAAI,IAAI,oBAAoC,EAAE,MAAM,cAAc,QAAQ,gCAAgC,CAAC;AACnH,SAAO,oBAAC,cAAc,MAAd,EAAmB,KAAU,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3H;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrF;AAGO,IAAM,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,aAAa,SAAS,YAAY;","names":[]}
+{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-full before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n"],"mappings":";;;;;;AAEA,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AACvB,SAAS,UAA6B;AA2EhC;AAvEC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA,IAGN,MACE;AAAA,IAGF,SACE;AAAA,IAEF,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA;AAAA,MAEP,WAAW;AAAA,QACT,MACE;AAAA,QAKF,SACE;AAAA,MAKJ;AAAA;AAAA,MAEA,WAAW;AAAA,QACT,MACE;AAAA,QAEF,SACE;AAAA,MAGJ;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,MACE;AAAA,QAGF,SACE;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,YAAY;AAC1C,CAAC;AAKD,IAAM,iBAAuB,oBAAuB,WAAW;AAQxD,SAAS,SAAS,EAAE,UAAU,aAAa,WAAW,GAAG,MAAM,GAAkB;AACtF,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC1G;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAoD;AACjG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,QAAM,EAAE,IAAI,IAAI,oBAAoC,EAAE,MAAM,cAAc,QAAQ,gCAAgC,CAAC;AACnH,SAAO,oBAAC,cAAc,MAAd,EAAmB,KAAU,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3H;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrF;AAGO,IAAM,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,aAAa,SAAS,YAAY;","names":[]}

package/dist/update-prompt.d.ts

@@ -0,0 +1,86 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const updatePrompt: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    mark: string;
+    content: string;
+    title: string;
+    message: string;
+    version: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            mark?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            version?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            message?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    mark: string;
+    content: string;
+    title: string;
+    message: string;
+    version: string;
+    actions: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    mark: string;
+    content: string;
+    title: string;
+    message: string;
+    version: string;
+    actions: string;
+}>>;
+type UpdatePromptProps = Omit<React.ComponentProps<"section">, "title"> & {
+    /** The headline (“A new version is available”). */
+    title: React.ReactNode;
+    /** Why update, in a sentence — the backend's localized `message`. */
+    message?: React.ReactNode;
+    /** The versions, in words and mono (“1.2.0 → 1.4.0”). */
+    versionLabel?: React.ReactNode;
+    /** The product's mark (decorative), e.g. `<OrazakaLogo />`. */
+    mark?: React.ReactNode;
+    /** The button that updates (“Update”). */
+    updateLabel: string;
+    /** Opens the store page, or reloads the app on the new version. */
+    onUpdate: () => void;
+    /** The way out (“Later”). */
+    laterLabel: string;
+    /** Called by the way out: the hook remembers it for this version. */
+    onLater: () => void;
+};
+/** The soft update: an invitation that can be dismissed, announced politely. */
+declare function UpdatePrompt({ title, message, versionLabel, mark, updateLabel, onUpdate, laterLabel, onLater, className, ...props }: UpdatePromptProps): React.JSX.Element;
+
+export { UpdatePrompt, type UpdatePromptProps, updatePrompt };

package/dist/update-prompt.js

@@ -0,0 +1,41 @@
+import "./chunk-TDG7ED2W.js";
+import {
+  Button
+} from "./chunk-3IN6TOPM.js";
+import "./chunk-43PTCDTL.js";
+import "./chunk-2VNYHG4E.js";
+
+// src/update-prompt/update-prompt.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var updatePrompt = tv({
+  slots: {
+    root: "flex w-full flex-wrap items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-4 text-sm text-fg",
+    mark: "flex h-10 w-10 shrink-0 items-center justify-center [&>svg]:h-10 [&>svg]:w-10",
+    content: "flex min-w-0 flex-1 flex-col gap-0.5",
+    title: "font-semibold text-fg",
+    message: "text-fg-secondary",
+    version: "font-mono text-xs text-fg-tertiary",
+    actions: "flex shrink-0 items-center gap-2"
+  }
+});
+function UpdatePrompt({ title, message, versionLabel, mark, updateLabel, onUpdate, laterLabel, onLater, className, ...props }) {
+  const s = updatePrompt();
+  return /* @__PURE__ */ jsxs("section", { role: "region", "aria-label": typeof title === "string" ? title : void 0, "data-kind": "update-soft", className: s.root({ className }), ...props, children: [
+    mark && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.mark(), children: mark }),
+    /* @__PURE__ */ jsxs("div", { className: s.content(), children: [
+      /* @__PURE__ */ jsx("p", { className: s.title(), children: title }),
+      message && /* @__PURE__ */ jsx("p", { className: s.message(), children: message }),
+      versionLabel && /* @__PURE__ */ jsx("p", { className: s.version(), children: versionLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: s.actions(), children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onLater, children: laterLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", shape: "cut", onClick: onUpdate, children: updateLabel })
+    ] })
+  ] });
+}
+export {
+  UpdatePrompt,
+  updatePrompt
+};
+//# sourceMappingURL=update-prompt.js.map

package/dist/update-prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/update-prompt/update-prompt.tsx"],"sourcesContent":["// Server-safe. The soft invitation to update: a dismissible banner, in the flow of the page, never a blocker.\n// Every word is a prop (the app passes them translated); the version and the store URL come from `useAppConfig`.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const updatePrompt = tv({\n  slots: {\n    root: \"flex w-full flex-wrap items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-4 text-sm text-fg\",\n    mark: \"flex h-10 w-10 shrink-0 items-center justify-center [&>svg]:h-10 [&>svg]:w-10\",\n    content: \"flex min-w-0 flex-1 flex-col gap-0.5\",\n    title: \"font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"flex shrink-0 items-center gap-2\",\n  },\n});\n\nexport type UpdatePromptProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The headline (“A new version is available”). */\n  title: React.ReactNode;\n  /** Why update, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“1.2.0 → 1.4.0”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark (decorative), e.g. `<OrazakaLogo />`. */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update”). */\n  updateLabel: string;\n  /** Opens the store page, or reloads the app on the new version. */\n  onUpdate: () => void;\n  /** The way out (“Later”). */\n  laterLabel: string;\n  /** Called by the way out: the hook remembers it for this version. */\n  onLater: () => void;\n};\n\n/** The soft update: an invitation that can be dismissed, announced politely. */\nexport function UpdatePrompt({ title, message, versionLabel, mark, updateLabel, onUpdate, laterLabel, onLater, className, ...props }: UpdatePromptProps) {\n  const s = updatePrompt();\n  return (\n    <section role=\"region\" aria-label={typeof title === \"string\" ? title : undefined} data-kind=\"update-soft\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <div className={s.content()}>\n        <p className={s.title()}>{title}</p>\n        {message && <p className={s.message()}>{message}</p>}\n        {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      </div>\n      <div className={s.actions()}>\n        <Button variant=\"ghost\" size=\"sm\" onClick={onLater}>\n          {laterLabel}\n        </Button>\n        <Button variant=\"primary\" size=\"sm\" shape=\"cut\" onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;AAIA,SAAS,UAAU;AAuCX,cAIF,YAJE;AArCD,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAsBM,SAAS,aAAa,EAAE,OAAO,SAAS,cAAc,MAAM,aAAa,UAAU,YAAY,SAAS,WAAW,GAAG,MAAM,GAAsB;AACvJ,QAAM,IAAI,aAAa;AACvB,SACE,qBAAC,aAAQ,MAAK,UAAS,cAAY,OAAO,UAAU,WAAW,QAAQ,QAAW,aAAU,eAAc,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC7I;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,MAC/B,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,MAC/C,gBAAgB,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,wBAAa;AAAA,OAC5D;AAAA,IACA,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,UAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,SACxC,sBACH;AAAA,MACA,oBAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,OAAM,OAAM,SAAS,UACtD,uBACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/vertical-video.d.ts

@@ -101,12 +101,18 @@ interface VerticalVideoProps extends Omit<React.ComponentProps<"article">, "titl
     topStart?: React.ReactNode;
     /** Above the caption: a goal gauge, a challenge's progress. */
     aboveCaption?: React.ReactNode;
+    /**
+     * How it takes its space: `frame` draws its own 9:16 box from its width; `fill` fills the box it is given (a bento
+     * tile, a grid cell, a phone frame) — the clip covers it, cropped at the edges, the rail and the caption over it.
+     * @default "frame"
+     */
+    fit?: "frame" | "fill";
     /** 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;
+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, fit, 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

@@ -1,10 +1,10 @@
 "use client";
 import {
   Avatar
-} from "./chunk-YIBKJ36L.js";
+} from "./chunk-KB7OLYIJ.js";
 import {
   IconButton
-} from "./chunk-276PTQMQ.js";
+} from "./chunk-3BC4XQ6C.js";
 import "./chunk-D3T54RSL.js";
 import {
   cn
@@ -169,6 +169,7 @@ function VerticalVideo({
   tipSlot,
   topStart,
   aboveCaption,
+  fit = "frame",
   locale = "en",
   labels: custom,
   className,
@@ -214,7 +215,8 @@ function VerticalVideo({
       "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),
+      "data-fit": fit,
+      className: cn("relative isolate w-full overflow-hidden", fit === "fill" ? "h-full min-h-0" : "aspect-[9/16]", "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;
@@ -271,9 +273,9 @@ function VerticalVideo({
           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: [
+        /* @__PURE__ */ jsxs2("div", { className: "absolute bottom-4 left-3 right-16 flex min-w-0 flex-col gap-1.5", children: [
           aboveCaption,
-          /* @__PURE__ */ jsxs2("p", { className: "flex items-center gap-1.5 text-sm font-bold", children: [
+          /* @__PURE__ */ jsxs2("p", { className: "flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 text-sm font-bold", children: [
             name,
             creator.verifiedLabel && /* @__PURE__ */ jsx3(VerifiedBadge, { label: creator.verifiedLabel, onMedia: true, size: "sm" }),
             disclosure && /* @__PURE__ */ jsx3("span", { className: "whitespace-nowrap 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 })

package/dist/vertical-video.js.map

@@ -1 +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-full 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=\"whitespace-nowrap 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,uIAAuI,sBAAW;AAAA,aACnL;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"]}
+{"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-full 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  /**\n   * How it takes its space: `frame` draws its own 9:16 box from its width; `fill` fills the box it is given (a bento\n   * tile, a grid cell, a phone frame) — the clip covers it, cropped at the edges, the rail and the caption over it.\n   * @default \"frame\"\n   */\n  fit?: \"frame\" | \"fill\";\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  fit = \"frame\",\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      data-fit={fit}\n      className={cn(\"relative isolate w-full overflow-hidden\", fit === \"fill\" ? \"h-full min-h-0\" : \"aspect-[9/16]\", \"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-16 flex min-w-0 flex-col gap-1.5\">\n        {aboveCaption}\n        <p className=\"flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 text-sm font-bold\">\n          {name}\n          {creator.verifiedLabel && <VerifiedBadge label={creator.verifiedLabel} onMedia size=\"sm\" />}\n          {disclosure && <span className=\"whitespace-nowrap 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":"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","names":["React","jsx","jsx","jsxs"]}

package/dist/video-player.d.ts

@@ -163,7 +163,7 @@ type VideoPlayerProps = {
     title: string;
     /** The picture shown before playback. */
     poster?: string;
-    /** Starts playing, muted (browsers refuse sound without a gesture) — not under reduced motion. */
+    /** Starts playing, muted (browsers refuse sound without a gesture), once on screen and again each time it comes back — not under reduced motion. */
     autoPlay?: boolean;
     /** Starts muted. */
     muted?: boolean;

package/dist/video-player.js

@@ -158,11 +158,17 @@ function VideoPlayer({
       hls?.destroy();
     };
   }, [url, type]);
+  const [inView, setInView] = React.useState(() => !pauseWhenHidden || typeof IntersectionObserver === "undefined");
   React.useEffect(() => {
     const element = video.current;
-    if (!element || !url || !(wanted || autoPlay && !reduce)) return;
+    if (!element || !url || !wanted) return;
     playSafely(element);
-  }, [url, wanted, autoPlay, reduce]);
+  }, [url, wanted]);
+  React.useEffect(() => {
+    const element = video.current;
+    if (!element || !url || !autoPlay || reduce || !inView) return;
+    playSafely(element);
+  }, [url, autoPlay, reduce, inView]);
   React.useEffect(() => {
     if (video.current) showTrack(video.current, caption);
   }, [caption, tracks.length]);
@@ -172,7 +178,14 @@ function VideoPlayer({
     return () => document.removeEventListener("fullscreenchange", change);
   }, []);
   React.useEffect(() => () => clearTimeout(idleTimer.current), []);
-  useInView(root, (visible) => !visible && video.current && !video.current.paused && video.current.pause(), pauseWhenHidden);
+  useInView(
+    root,
+    (visible) => {
+      setInView(visible);
+      if (!visible && video.current && !video.current.paused) video.current.pause();
+    },
+    pauseWhenHidden
+  );
   const play = () => {
     setWanted(true);
     setFailed(false);