@krizaka/ui 3.22.0 → 3.23.0

package/dist/slider.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   tv
-} from "./chunk-C2BRIFJG.js";
-import "./chunk-2FRWNSRO.js";
+} from "./chunk-HJFRHYCI.js";
+import "./chunk-NSLXEDIS.js";
 
 // src/slider/slider.tsx
 import { Slider as SliderPrimitive } from "radix-ui";

package/dist/stage-banner.js

@@ -2,7 +2,7 @@ import {
   brandClass,
   cn,
   storyVariantClass
-} from "./chunk-IZ7MV6HM.js";
+} from "./chunk-XVFQZ3ZG.js";
 
 // src/stage-banner/stage-banner.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/step-showcase.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/step-showcase/device-frame.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/tabs.js

@@ -15,7 +15,7 @@ var tabs = tv({
     // (server render), each trigger carries its own active style.
     list: "group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100",
     trigger: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
-    content: "kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+    content: "kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=inactive]:hidden"
   },
   variants: {
     variant: {

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 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":[]}
+{"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 data-[state=inactive]:hidden\",\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/terminal-replay.js

@@ -7,7 +7,7 @@ import {
 } from "./chunk-KDXRYUD3.js";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/terminal-replay/terminal-replay.tsx
 import * as React from "react";

package/dist/theme.js

@@ -1,9 +1,10 @@
 "use client";
 import {
   buttonVariants
-} from "./chunk-OWC2LZD2.js";
+} from "./chunk-CHOJUCVE.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-WEVYKZIF.js";
+import "./chunk-NSLXEDIS.js";
 
 // src/theme/theme.tsx
 import * as React from "react";

package/dist/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme/theme.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch {\n    return memory.get(key) ?? null;\n  }\n}\n\nfunction write(key: string, value: string | null) {\n  if (value === null) memory.delete(key);\n  else memory.set(key, value);\n  try {\n    if (value === null) localStorage.removeItem(key);\n    else localStorage.setItem(key, value);\n  } catch {\n    // storage blocked: memory holds it\n  }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction applyMode(mode: Mode) {\n  const dark = window.matchMedia(DARK_QUERY).matches;\n  document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n  const classes = document.documentElement.classList;\n  if (previous) classes.remove(`theme-${previous}`);\n  if (next) classes.add(`theme-${next}`);\n}\n\nexport type ThemeScriptProps = {\n  /** The nonce of a strict Content-Security-Policy (`script-src 'nonce-…'`). */\n  nonce?: string;\n  /**\n   * The mode before the visitor chooses one — pass the same value as `ThemeProvider`'s `defaultMode`. A persisted\n   * choice (`kz-theme`) always wins.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\n/**\n * In <head>, before anything renders: applies the persisted mode (else `defaultMode`) and named theme, so the page\n * never flashes. `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce, defaultMode = \"system\" }: ThemeScriptProps) {\n  const fallback = isMode(defaultMode) ? defaultMode : \"system\";\n  const js =\n    `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\");if(m!==\"dark\"&&m!==\"light\"&&m!==\"system\")m=\"${fallback}\";` +\n    `var n=localStorage.getItem(\"${NAME_KEY}\");var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n    `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n  /** The chosen mode: dark, light or follow the system. */\n  mode: Mode;\n  setMode: (mode: Mode) => void;\n  /** The named theme (`html.theme-<name>`), or null. */\n  theme: string | null;\n  setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  /**\n   * The mode before the visitor chooses one (nothing persisted as `kz-theme`) — pass the same value to `ThemeScript`.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n  // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n  const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n  const mode: Mode = isMode(stored) ? stored : defaultMode;\n  const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n  // The same resolution as ThemeScript (a no-op after it), for an app that renders the provider without the script.\n  React.useEffect(() => {\n    const persisted = read(MODE_KEY);\n    applyMode(isMode(persisted) ? persisted : defaultMode);\n  }, [defaultMode]);\n\n  // \"system\" follows the operating system while the page is open.\n  React.useEffect(() => {\n    if (mode !== \"system\") return;\n    const query = window.matchMedia(DARK_QUERY);\n    const onChange = () => applyMode(\"system\");\n    query.addEventListener?.(\"change\", onChange);\n    return () => query.removeEventListener?.(\"change\", onChange);\n  }, [mode]);\n\n  const setMode = React.useCallback((next: Mode) => {\n    write(MODE_KEY, next);\n    applyMode(next);\n    notify();\n  }, []);\n\n  const setTheme = React.useCallback((next: string | null) => {\n    applyName(read(NAME_KEY), next);\n    write(NAME_KEY, next);\n    notify();\n  }, []);\n\n  const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = React.useContext(ThemeContext);\n  if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n  return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n  dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n  light: (\n    <>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n    </>\n  ),\n  system: (\n    <>\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M8 20h8M12 16v4\" />\n    </>\n  ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n  Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n    /** Any `Button` variant. */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * rounded · pill.\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n    label: string | ((mode: Mode) => string);\n  };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n  const { mode, setMode } = useTheme();\n  const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n  const name = typeof label === \"function\" ? label(mode) : label;\n  return (\n    <button\n      type=\"button\"\n      aria-label={name}\n      title={name}\n      data-mode={mode}\n      onClick={() => setMode(next)}\n      className={buttonVariants({ variant, shape, size: \"icon\", className })}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        {ICONS[mode]}\n      </svg>\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;AAEA,YAAY,WAAW;AA+Ed,SAqEL,UArEK,KAqEL,YArEK;AAzET,IAAM,WAAW;AACjB,IAAM,WAAW;AACjB,IAAM,QAAyB,CAAC,QAAQ,SAAS,QAAQ;AACzD,IAAM,aAAa;AAEnB,IAAM,SAAS,CAAC,UAAkC,MAAM,SAAS,KAAa;AAG9E,IAAM,SAAS,oBAAI,IAAoB;AAEvC,SAAS,KAAK,KAA4B;AACxC,MAAI;AACF,WAAO,aAAa,QAAQ,GAAG;AAAA,EACjC,QAAQ;AACN,WAAO,OAAO,IAAI,GAAG,KAAK;AAAA,EAC5B;AACF;AAEA,SAAS,MAAM,KAAa,OAAsB;AAChD,MAAI,UAAU,KAAM,QAAO,OAAO,GAAG;AAAA,MAChC,QAAO,IAAI,KAAK,KAAK;AAC1B,MAAI;AACF,QAAI,UAAU,KAAM,cAAa,WAAW,GAAG;AAAA,QAC1C,cAAa,QAAQ,KAAK,KAAK;AAAA,EACtC,QAAQ;AAAA,EAER;AACF;AAGA,IAAM,YAAY,oBAAI,IAAgB;AACtC,IAAM,SAAS,MAAM,UAAU,QAAQ,CAAC,aAAa,SAAS,CAAC;AAC/D,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,iBAAiB,WAAW,QAAQ;AAC3C,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AACzB,WAAO,oBAAoB,WAAW,QAAQ;AAAA,EAChD;AACF;AAEA,SAAS,UAAU,MAAY;AAC7B,QAAM,OAAO,OAAO,WAAW,UAAU,EAAE;AAC3C,WAAS,gBAAgB,UAAU,OAAO,SAAS,SAAS,WAAY,SAAS,YAAY,CAAC,IAAK;AACrG;AAEA,SAAS,UAAU,UAAyB,MAAqB;AAC/D,QAAM,UAAU,SAAS,gBAAgB;AACzC,MAAI,SAAU,SAAQ,OAAO,SAAS,QAAQ,EAAE;AAChD,MAAI,KAAM,SAAQ,IAAI,SAAS,IAAI,EAAE;AACvC;AAiBO,SAAS,YAAY,EAAE,OAAO,cAAc,SAAS,GAAqB;AAC/E,QAAM,WAAW,OAAO,WAAW,IAAI,cAAc;AACrD,QAAM,KACJ,+CAA+C,QAAQ,kDAAkD,QAAQ,iCAClF,QAAQ,wBAAwB,UAAU;AAE3E,SAAO,oBAAC,YAAO,OAAc,yBAAyB,EAAE,QAAQ,GAAG,GAAG;AACxE;AAWA,IAAM,eAAqB,oBAAwC,IAAI;AAWhE,SAAS,cAAc,EAAE,UAAU,cAAc,SAAS,GAAuB;AAEtF,QAAM,SAAe,2BAAqB,WAAW,MAAM,KAAK,QAAQ,GAAG,MAAM,IAAI;AACrF,QAAM,OAAa,OAAO,MAAM,IAAI,SAAS;AAC7C,QAAM,QAAc,2BAAqB,WAAW,MAAM,KAAK,QAAQ,GAAG,MAAM,IAAI;AAGpF,EAAM,gBAAU,MAAM;AACpB,UAAM,YAAY,KAAK,QAAQ;AAC/B,cAAU,OAAO,SAAS,IAAI,YAAY,WAAW;AAAA,EACvD,GAAG,CAAC,WAAW,CAAC;AAGhB,EAAM,gBAAU,MAAM;AACpB,QAAI,SAAS,SAAU;AACvB,UAAM,QAAQ,OAAO,WAAW,UAAU;AAC1C,UAAM,WAAW,MAAM,UAAU,QAAQ;AACzC,UAAM,mBAAmB,UAAU,QAAQ;AAC3C,WAAO,MAAM,MAAM,sBAAsB,UAAU,QAAQ;AAAA,EAC7D,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,UAAgB,kBAAY,CAAC,SAAe;AAChD,UAAM,UAAU,IAAI;AACpB,cAAU,IAAI;AACd,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,QAAM,WAAiB,kBAAY,CAAC,SAAwB;AAC1D,cAAU,KAAK,QAAQ,GAAG,IAAI;AAC9B,UAAM,UAAU,IAAI;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,QAAM,QAAc,cAAQ,OAAO,EAAE,MAAM,SAAS,OAAO,SAAS,IAAI,CAAC,MAAM,SAAS,OAAO,QAAQ,CAAC;AACxG,SAAO,oBAAC,aAAa,UAAb,EAAsB,OAAe,UAAS;AACxD;AAEO,SAAS,WAA8B;AAC5C,QAAM,UAAgB,iBAAW,YAAY;AAC7C,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,2CAA2C;AACzE,SAAO;AACT;AAEA,IAAM,QAAuC;AAAA,EAC3C,MAAM,oBAAC,UAAK,GAAE,iDAAgD;AAAA,EAC9D,OACE,iCACE;AAAA,wBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,IAC9B,oBAAC,UAAK,GAAE,sGAAqG;AAAA,KAC/G;AAAA,EAEF,QACE,iCACE;AAAA,wBAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI;AAAA,IAChD,oBAAC,UAAK,GAAE,mBAAkB;AAAA,KAC5B;AAEJ;AAmBO,SAAS,YAAY,EAAE,OAAO,UAAU,SAAS,OAAO,WAAW,GAAG,MAAM,GAAqB;AACtG,QAAM,EAAE,MAAM,QAAQ,IAAI,SAAS;AACnC,QAAM,OAAO,OAAO,MAAM,QAAQ,IAAI,IAAI,KAAK,MAAM,MAAM;AAC3D,QAAM,OAAO,OAAO,UAAU,aAAa,MAAM,IAAI,IAAI;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,aAAW;AAAA,MACX,SAAS,MAAM,QAAQ,IAAI;AAAA,MAC3B,WAAW,eAAe,EAAE,SAAS,OAAO,MAAM,QAAQ,UAAU,CAAC;AAAA,MACpE,GAAG;AAAA,MAEJ,8BAAC,SAAI,SAAQ,aAAY,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACpJ,gBAAM,IAAI,GACb;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/theme/theme.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch {\n    return memory.get(key) ?? null;\n  }\n}\n\nfunction write(key: string, value: string | null) {\n  if (value === null) memory.delete(key);\n  else memory.set(key, value);\n  try {\n    if (value === null) localStorage.removeItem(key);\n    else localStorage.setItem(key, value);\n  } catch {\n    // storage blocked: memory holds it\n  }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction applyMode(mode: Mode) {\n  const dark = window.matchMedia(DARK_QUERY).matches;\n  document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n  const classes = document.documentElement.classList;\n  if (previous) classes.remove(`theme-${previous}`);\n  if (next) classes.add(`theme-${next}`);\n}\n\nexport type ThemeScriptProps = {\n  /** The nonce of a strict Content-Security-Policy (`script-src 'nonce-…'`). */\n  nonce?: string;\n  /**\n   * The mode before the visitor chooses one — pass the same value as `ThemeProvider`'s `defaultMode`. A persisted\n   * choice (`kz-theme`) always wins.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\n/**\n * In <head>, before anything renders: applies the persisted mode (else `defaultMode`) and named theme, so the page\n * never flashes. `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce, defaultMode = \"system\" }: ThemeScriptProps) {\n  const fallback = isMode(defaultMode) ? defaultMode : \"system\";\n  const js =\n    `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\");if(m!==\"dark\"&&m!==\"light\"&&m!==\"system\")m=\"${fallback}\";` +\n    `var n=localStorage.getItem(\"${NAME_KEY}\");var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n    `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n  /** The chosen mode: dark, light or follow the system. */\n  mode: Mode;\n  setMode: (mode: Mode) => void;\n  /** The named theme (`html.theme-<name>`), or null. */\n  theme: string | null;\n  setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  /**\n   * The mode before the visitor chooses one (nothing persisted as `kz-theme`) — pass the same value to `ThemeScript`.\n   * @default \"system\"\n   */\n  defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n  // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n  const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n  const mode: Mode = isMode(stored) ? stored : defaultMode;\n  const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n  // The same resolution as ThemeScript (a no-op after it), for an app that renders the provider without the script.\n  React.useEffect(() => {\n    const persisted = read(MODE_KEY);\n    applyMode(isMode(persisted) ? persisted : defaultMode);\n  }, [defaultMode]);\n\n  // \"system\" follows the operating system while the page is open.\n  React.useEffect(() => {\n    if (mode !== \"system\") return;\n    const query = window.matchMedia(DARK_QUERY);\n    const onChange = () => applyMode(\"system\");\n    query.addEventListener?.(\"change\", onChange);\n    return () => query.removeEventListener?.(\"change\", onChange);\n  }, [mode]);\n\n  const setMode = React.useCallback((next: Mode) => {\n    write(MODE_KEY, next);\n    applyMode(next);\n    notify();\n  }, []);\n\n  const setTheme = React.useCallback((next: string | null) => {\n    applyName(read(NAME_KEY), next);\n    write(NAME_KEY, next);\n    notify();\n  }, []);\n\n  const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = React.useContext(ThemeContext);\n  if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n  return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n  dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n  light: (\n    <>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n    </>\n  ),\n  system: (\n    <>\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M8 20h8M12 16v4\" />\n    </>\n  ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n  Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n    /** Any `Button` variant. */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * rounded · pill.\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n    label: string | ((mode: Mode) => string);\n  };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n  const { mode, setMode } = useTheme();\n  const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n  const name = typeof label === \"function\" ? label(mode) : label;\n  return (\n    <button\n      type=\"button\"\n      aria-label={name}\n      title={name}\n      data-mode={mode}\n      onClick={() => setMode(next)}\n      className={buttonVariants({ variant, shape, size: \"icon\", className })}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        {ICONS[mode]}\n      </svg>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/toast.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-WEVYKZIF.js";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/toast/toast.tsx
 import { toast, Toaster as Sonner } from "sonner";

package/dist/toc.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-G3ETON2A.js";
+} from "./chunk-WU4VLSEA.js";
 
 // src/toc/toc.tsx
 import * as React from "react";

package/dist/tooltip.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-J3NC6ER4.js";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/tooltip/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";

package/dist/update-prompt.js

@@ -1,9 +1,10 @@
 import "./chunk-TDG7ED2W.js";
 import {
   Button
-} from "./chunk-3IN6TOPM.js";
+} from "./chunk-6ZYRUOTA.js";
 import "./chunk-43PTCDTL.js";
 import "./chunk-2VNYHG4E.js";
+import "./chunk-W675RFOA.js";
 
 // src/update-prompt/update-prompt.tsx
 import { tv } from "tailwind-variants";

package/dist/update-prompt.js.map

@@ -1 +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":[]}
+{"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.js

@@ -4,11 +4,11 @@ import {
 } from "./chunk-KB7OLYIJ.js";
 import {
   IconButton
-} from "./chunk-3BC4XQ6C.js";
+} from "./chunk-DZU6RMYD.js";
 import "./chunk-D3T54RSL.js";
 import {
   cn
-} from "./chunk-2FRWNSRO.js";
+} from "./chunk-NSLXEDIS.js";
 
 // src/vertical-video/short-feed.tsx
 import * as React from "react";

package/dist/video-player.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Slider
-} from "./chunk-BTMFZ66D.js";
-import "./chunk-C2BRIFJG.js";
-import "./chunk-2FRWNSRO.js";
+} from "./chunk-KM6VAKIE.js";
+import "./chunk-HJFRHYCI.js";
+import "./chunk-NSLXEDIS.js";
 import {
   clamp,
   formatClock,

package/dist/waveform.d.ts

@@ -0,0 +1,93 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const waveform: tailwind_variants.TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    tone: {
+        accent: {
+            bar: string;
+        };
+        neutral: {
+            bar: string;
+        };
+    };
+}, {
+    root: string;
+    bar: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    tone: {
+        accent: {
+            bar: string;
+        };
+        neutral: {
+            bar: string;
+        };
+    };
+}, {
+    root: string;
+    bar: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    tone: {
+        accent: {
+            bar: string;
+        };
+        neutral: {
+            bar: string;
+        };
+    };
+}, {
+    root: string;
+    bar: string;
+}>>;
+type WaveformProps = {
+    /** The peaks, between 0 and 1, as many as you like (resampled to `bars`). Without them: a flat line. */
+    peaks?: readonly number[];
+    /** How many bars. Default 32. */
+    bars?: number;
+    /** sm · md (default) · lg: the height of the drawing. */
+    size?: "sm" | "md" | "lg";
+    /** accent (default, the brand's colour) · neutral (a quiet line beside text). */
+    tone?: "accent" | "neutral";
+    /** Moves gently while `true` (a sound playing); still otherwise. */
+    playing?: boolean;
+    /** When given, it is an image named by this (“Voice note, 0:42”); otherwise decorative and hidden from assistive technology. */
+    label?: string;
+    /** Classes merged last. */
+    className?: string;
+};
+/** A decorative waveform: the bars of a sound, in the accent or a neutral tone, breathing gently while it plays. */
+declare function Waveform({ peaks, bars, size, tone, playing, label, className }: WaveformProps): React.JSX.Element;
+
+export { Waveform, type WaveformProps, waveform };

package/dist/waveform.js

@@ -0,0 +1,95 @@
+// src/waveform/waveform.tsx
+import * as React2 from "react";
+import { tv } from "tailwind-variants";
+
+// src/media.ts
+import * as React from "react";
+function useLatest(value) {
+  const ref = React.useRef(value);
+  React.useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+function useInView(ref, onChange, enabled = true, threshold = 0.25) {
+  const latest = useLatest(onChange);
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!enabled || !element || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(([entry]) => entry && latest.current(entry.isIntersecting), { threshold });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref, enabled, threshold, latest]);
+}
+
+// src/waveform/bars.ts
+function resamplePeaks(peaks, count) {
+  if (peaks.length === 0) return Array.from({ length: count }, () => 0.15);
+  const out = Array.from({ length: count }, (_, i) => {
+    const from = Math.floor(i / count * peaks.length);
+    const to = Math.max(from + 1, Math.floor((i + 1) / count * peaks.length));
+    return Math.max(...peaks.slice(from, to).map(Math.abs));
+  });
+  const loudest = Math.max(...out, 1e-4);
+  return out.map((v) => Math.max(0.08, v / loudest));
+}
+
+// src/waveform/waveform.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var waveform = tv({
+  slots: {
+    root: "flex w-full items-center justify-center gap-[2px]",
+    bar: "min-w-[2px] flex-1 rounded-full"
+  },
+  variants: {
+    size: {
+      sm: { root: "h-6" },
+      md: { root: "h-10" },
+      lg: { root: "h-16" }
+    },
+    tone: {
+      accent: { bar: "bg-accent" },
+      neutral: { bar: "bg-border-strong" }
+    }
+  },
+  defaultVariants: { size: "md", tone: "accent" }
+});
+var MOTION = "@keyframes kz-wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}@media (prefers-reduced-motion: no-preference){.kz-wave[data-playing] [data-bar]{animation:kz-wave 1.6s ease-in-out infinite;animation-delay:var(--kz-wave-delay,0s)}}.kz-wave[data-paused] [data-bar]{animation-play-state:paused}";
+function Waveform({ peaks, bars = 32, size, tone, playing = false, label, className }) {
+  const s = waveform({ size, tone });
+  const root = React2.useRef(null);
+  const [visible, setVisible] = React2.useState(true);
+  useInView(root, setVisible, playing);
+  const shape = React2.useMemo(() => resamplePeaks(peaks ?? [], bars), [peaks, bars]);
+  const labelled = label !== void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: MOTION }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: root,
+        className: s.root({ className: ["kz-wave", className].filter(Boolean).join(" ") }),
+        "data-playing": playing || void 0,
+        "data-paused": playing && !visible ? "" : void 0,
+        role: labelled ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": labelled ? void 0 : true,
+        children: shape.map((peak, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-bar": true,
+            "aria-hidden": true,
+            className: s.bar(),
+            style: { height: `${Math.round(peak * 100)}%`, "--kz-wave-delay": `${-(i * 7 % 11) * 0.14}s` }
+          },
+          i
+        ))
+      }
+    )
+  ] });
+}
+export {
+  Waveform,
+  waveform
+};
+//# sourceMappingURL=waveform.js.map

package/dist/waveform.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/waveform/waveform.tsx","../src/media.ts","../src/waveform/bars.ts"],"sourcesContent":["// Client (the idle motion and the pause off screen). The bars of an AudioPlayer, drawn on their own: a decorative\n// waveform for a card, a banner or a sound's identity. Hidden from assistive technology unless it has a `label`.\n// Its motion runs only while `playing`, never under prefers-reduced-motion, and pauses when it leaves the screen.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { useInView } from \"../media\";\nimport { resamplePeaks } from \"./bars\";\n\nexport const waveform = tv({\n  slots: {\n    root: \"flex w-full items-center justify-center gap-[2px]\",\n    bar: \"min-w-[2px] flex-1 rounded-full\",\n  },\n  variants: {\n    size: {\n      sm: { root: \"h-6\" },\n      md: { root: \"h-10\" },\n      lg: { root: \"h-16\" },\n    },\n    tone: {\n      accent: { bar: \"bg-accent\" },\n      neutral: { bar: \"bg-border-strong\" },\n    },\n  },\n  defaultVariants: { size: \"md\", tone: \"accent\" },\n});\n\n// The idle motion: each bar breathes between 45 % and its height, staggered by its index. It is declared under a\n// no-preference query only, so a reduced-motion reader gets the still bars; `data-paused` holds it off screen.\nconst MOTION =\n  \"@keyframes kz-wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}\" +\n  \"@media (prefers-reduced-motion: no-preference){.kz-wave[data-playing] [data-bar]{animation:kz-wave 1.6s ease-in-out infinite;animation-delay:var(--kz-wave-delay,0s)}}\" +\n  \".kz-wave[data-paused] [data-bar]{animation-play-state:paused}\";\n\nexport type WaveformProps = {\n  /** The peaks, between 0 and 1, as many as you like (resampled to `bars`). Without them: a flat line. */\n  peaks?: readonly number[];\n  /** How many bars. Default 32. */\n  bars?: number;\n  /** sm · md (default) · lg: the height of the drawing. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** accent (default, the brand's colour) · neutral (a quiet line beside text). */\n  tone?: \"accent\" | \"neutral\";\n  /** Moves gently while `true` (a sound playing); still otherwise. */\n  playing?: boolean;\n  /** When given, it is an image named by this (“Voice note, 0:42”); otherwise decorative and hidden from assistive technology. */\n  label?: string;\n  /** Classes merged last. */\n  className?: string;\n};\n\n/** A decorative waveform: the bars of a sound, in the accent or a neutral tone, breathing gently while it plays. */\nexport function Waveform({ peaks, bars = 32, size, tone, playing = false, label, className }: WaveformProps) {\n  const s = waveform({ size, tone });\n  const root = React.useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = React.useState(true);\n  useInView(root, setVisible, playing);\n  const shape = React.useMemo(() => resamplePeaks(peaks ?? [], bars), [peaks, bars]);\n  const labelled = label !== undefined;\n\n  return (\n    <>\n      <style>{MOTION}</style>\n      <div\n        ref={root}\n        className={s.root({ className: [\"kz-wave\", className].filter(Boolean).join(\" \") })}\n        data-playing={playing || undefined}\n        data-paused={playing && !visible ? \"\" : undefined}\n        role={labelled ? \"img\" : undefined}\n        aria-label={label}\n        aria-hidden={labelled ? undefined : true}\n      >\n        {shape.map((peak, i) => (\n          <span\n            key={i}\n            data-bar\n            aria-hidden\n            className={s.bar()}\n            style={{ height: `${Math.round(peak * 100)}%`, \"--kz-wave-delay\": `${-((i * 7) % 11) * 0.14}s` } as React.CSSProperties}\n          />\n        ))}\n      </div>\n    </>\n  );\n}\n","// Shared by the data and media primitives (client): the clock format, the reduced-motion preference, the\n// in-view observer, a debounced callback. Never an entry of its own.\nimport * as React from \"react\";\n\n/** Seconds as a clock: `75` → `1:15`, `3725` → `1:02:05`. Negative or unknown values read `0:00`. */\nexport function formatClock(seconds: number): string {\n  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;\n  const h = Math.floor(s / 3600);\n  const m = Math.floor((s % 3600) / 60);\n  const rest = String(s % 60).padStart(2, \"0\");\n  return h > 0 ? `${h}:${String(m).padStart(2, \"0\")}:${rest}` : `${m}:${rest}`;\n}\n\n/** Clamps `value` between `min` and `max`. */\nexport const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst REDUCE = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduce = (notify: () => void) => {\n  if (typeof window === \"undefined\" || !window.matchMedia) return () => undefined;\n  const query = window.matchMedia(REDUCE);\n  query.addEventListener?.(\"change\", notify);\n  return () => query.removeEventListener?.(\"change\", notify);\n};\n\n/** `true` when the person asked for less motion (`prefers-reduced-motion: reduce`); follows a change of the setting. */\nexport function usePrefersReducedMotion(): boolean {\n  return React.useSyncExternalStore(\n    subscribeReduce,\n    () => (typeof window !== \"undefined\" && window.matchMedia ? window.matchMedia(REDUCE).matches : false),\n    () => false,\n  );\n}\n\n/** The latest value of a callback, for an effect or an event that must not re-subscribe when it changes. */\nexport function useLatest<T>(value: T) {\n  const ref = React.useRef(value);\n  React.useLayoutEffect(() => {\n    ref.current = value;\n  });\n  return ref;\n}\n\n/** Calls `onChange(visible)` when at least `threshold` of the element enters or leaves the viewport. */\nexport function useInView(ref: React.RefObject<Element | null>, onChange: (visible: boolean) => void, enabled = true, threshold = 0.25) {\n  const latest = useLatest(onChange);\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!enabled || !element || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver(([entry]) => entry && latest.current(entry.isIntersecting), { threshold });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref, enabled, threshold, latest]);\n}\n\n/** A value controlled by a prop when it is given, held inside otherwise; `set` calls `onChange` either way. */\nexport function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) {\n  const [inner, setInner] = React.useState(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : inner;\n  const set = React.useCallback(\n    (next: T) => {\n      if (!controlled) setInner(next);\n      onChange?.(next);\n    },\n    [controlled, onChange],\n  );\n  return [current, set] as const;\n}\n\n/** Starts a media element without an unhandled rejection (autoplay refused, the source replaced meanwhile). */\nexport function playSafely(media: HTMLMediaElement | null | undefined) {\n  try {\n    const started = media?.play() as Promise<void> | undefined;\n    started?.catch?.(() => undefined);\n  } catch {\n    // Not playable here (no media support): the controls stay as they are.\n  }\n}\n","// The bars of a waveform, shared by AudioPlayer (the seekable one) and Waveform (the decorative one). Pure: no React.\n\n/** Resamples peaks to `count` bars (the maximum of each slice), normalised to the loudest. No peaks: a flat line at 15 %. */\nexport function resamplePeaks(peaks: readonly number[], count: number): number[] {\n  if (peaks.length === 0) return Array.from({ length: count }, () => 0.15);\n  const out = Array.from({ length: count }, (_, i) => {\n    const from = Math.floor((i / count) * peaks.length);\n    const to = Math.max(from + 1, Math.floor(((i + 1) / count) * peaks.length));\n    return Math.max(...peaks.slice(from, to).map(Math.abs));\n  });\n  const loudest = Math.max(...out, 0.0001);\n  return out.map((v) => Math.max(0.08, v / loudest));\n}\n"],"mappings":"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","names":["React"]}