@krizaka/ui 3.44.0 → 3.46.0

package/dist/nav-bar.d.ts

@@ -340,4 +340,44 @@ interface PlacePanel {
 }
 declare function placePanel({ trigger, root, panel, window, gutter }: PlacePanel): number;
 
-export { NavBar, NavBarActions, NavBarBadge, type NavBarBadgeProps, NavBarBrand, type NavBarBrandProps, NavBarFamily, type NavBarFamilyProps, NavBarItems, type NavBarItemsProps, NavBarLanguage, type NavBarLanguageProps, NavBarLink, type NavBarLinkProps, NavBarMenu, NavBarMenuLink, type NavBarMenuLinkProps, type NavBarMenuProps, NavBarMobile, NavBarMobileGroup, type NavBarMobileGroupProps, NavBarMobileLink, type NavBarMobileLinkProps, NavBarMobilePreferences, type NavBarMobilePreferencesProps, type NavBarMobileProps, NavBarRepo, type NavBarRepoProps, NavBarRoot, type NavBarRootProps, type PlacePanel, navBar, placePanel };
+/** The two ways into a product. */
+declare const ProductBarAction: {
+    readonly SignIn: "sign-in";
+    readonly Try: "try";
+};
+type ProductBarAction = (typeof ProductBarAction)[keyof typeof ProductBarAction];
+interface ProductBarState {
+    /** Whether the product accepts new accounts (its `signupOpen` setting). */
+    signupOpen: boolean;
+    /** Whether the product has a « try it » action (a free first audit, a founder offer). */
+    hasTry: boolean;
+}
+/** What the bar shows: one primary, and « Sign in » beside it only when it is not the primary. */
+declare function productBarActions({ signupOpen, hasTry }: ProductBarState): {
+    primary: ProductBarAction;
+    secondary: ProductBarAction | null;
+};
+interface ProductBarLink {
+    href: string;
+    /** Passed translated. */
+    label: string;
+}
+type ProductBarActionsProps = {
+    /** Where « Sign in » leads, and its words. */
+    signIn: ProductBarLink;
+    /** « Try for free » (the first audit is free), the founder offer: absent when the product has none. */
+    tryIt?: ProductBarLink;
+    /** Whether the product accepts new accounts (its `signupOpen` setting): « Try » is the primary action only then. */
+    signupOpen: boolean;
+    /** The app's link component (Next's `Link`); an `<a>` otherwise. */
+    linkAs?: React.ElementType;
+    /**
+     * `bar` (from `md`, the buttons of the bar) or `panel` (the mobile panel: full-width, the primary last).
+     * @default "bar"
+     */
+    placement?: "bar" | "panel";
+};
+/** The product bar's actions: use the app. Put it in `NavBar.Actions` (`placement="bar"`) or in `NavBar.Mobile` (`placement="panel"`). */
+declare function ProductBarActions({ signIn, tryIt, signupOpen, linkAs: Link, placement }: ProductBarActionsProps): React.JSX.Element;
+
+export { NavBar, NavBarActions, NavBarBadge, type NavBarBadgeProps, NavBarBrand, type NavBarBrandProps, NavBarFamily, type NavBarFamilyProps, NavBarItems, type NavBarItemsProps, NavBarLanguage, type NavBarLanguageProps, NavBarLink, type NavBarLinkProps, NavBarMenu, NavBarMenuLink, type NavBarMenuLinkProps, type NavBarMenuProps, NavBarMobile, NavBarMobileGroup, type NavBarMobileGroupProps, NavBarMobileLink, type NavBarMobileLinkProps, NavBarMobilePreferences, type NavBarMobilePreferencesProps, type NavBarMobileProps, NavBarRepo, type NavBarRepoProps, NavBarRoot, type NavBarRootProps, type PlacePanel, ProductBarAction, ProductBarActions, type ProductBarActionsProps, type ProductBarLink, type ProductBarState, navBar, placePanel, productBarActions };

package/dist/nav-bar.js

@@ -12,6 +12,11 @@ import {
   useSlidingIndicator
 } from "./chunk-4QN5YJ3D.js";
 import "./chunk-4E5IUZHR.js";
+import {
+  Button
+} from "./chunk-SJS6RJIT.js";
+import "./chunk-D3T54RSL.js";
+import "./chunk-WEVYKZIF.js";
 import {
   cn
 } from "./chunk-NSLXEDIS.js";
@@ -345,6 +350,23 @@ var NavBar = {
   MobileGroup: NavBarMobileGroup,
   MobileLink: NavBarMobileLink
 };
+
+// src/nav-bar/product-actions.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ProductBarAction = { SignIn: "sign-in", Try: "try" };
+function productBarActions({ signupOpen, hasTry }) {
+  return signupOpen && hasTry ? { primary: ProductBarAction.Try, secondary: ProductBarAction.SignIn } : { primary: ProductBarAction.SignIn, secondary: null };
+}
+function ProductBarActions({ signIn, tryIt, signupOpen, linkAs: Link = "a", placement = "bar" }) {
+  const { primary, secondary } = productBarActions({ signupOpen, hasTry: Boolean(tryIt) });
+  const link = (kind) => kind === ProductBarAction.Try && tryIt ? tryIt : signIn;
+  const panel = placement === "panel";
+  const button = (kind, variant) => /* @__PURE__ */ jsx2(Button, { asChild: true, variant, size: panel ? "md" : "sm", className: panel ? variant === "primary" ? "mt-2 w-full font-bold" : "w-full" : variant === "primary" ? "ml-1 hidden font-bold md:inline-flex" : "hidden md:inline-flex", children: /* @__PURE__ */ jsx2(Link, { href: link(kind).href, children: link(kind).label }) }, kind);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    secondary ? button(secondary, "ghost") : null,
+    button(primary, "primary")
+  ] });
+}
 export {
   NavBar,
   NavBarActions,
@@ -362,7 +384,10 @@ export {
   NavBarMobilePreferences,
   NavBarRepo,
   NavBarRoot,
+  ProductBarAction,
+  ProductBarActions,
   navBar,
-  placePanel
+  placePanel,
+  productBarActions
 };
 //# sourceMappingURL=nav-bar.js.map

package/dist/nav-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/nav-bar/nav-bar.tsx","../src/nav-bar/placement.ts"],"sourcesContent":["// Client (scroll, a sliding indicator, menus). Radix NavigationMenu does the menus' semantics and keyboard (Enter, Space\n// and ↓ open; ↑ ↓ Home End walk; Escape closes and returns the focus; Tab out closes); this file draws the Krizaka bar:\n// a floating pill that tightens once the page scrolls, one light that glides to the item under the pointer or the\n// focus and rests on the current page, and a mobile panel that is a plain disclosure (no focus trap, Escape closes).\nimport { NavigationMenu as Nav, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { FamilyMark, GitHubGlyph } from \"../family-mark\";\nimport { LanguageSwitch, type LanguageSwitchProps } from \"../language-switch/language-switch\";\nimport { type FamilyLabels, familyLabels, type Site, type SiteId, sitesByGroup } from \"../sites/sites\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\nimport { placePanel } from \"./placement\";\n\nexport const navBar = tv({\n  slots: {\n    root:\n      \"group/nav relative z-40 mx-auto flex h-14 w-full items-center gap-2 border-border-subtle bg-surface-1 \" +\n      \"transition-[height,background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none \" +\n      \"data-compact:h-12 data-compact:border-border-default data-compact:bg-surface-1 data-compact:shadow-lg\",\n    brand:\n      \"mr-2 inline-flex shrink-0 items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg no-underline \" +\n      \"rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    items: \"relative hidden md:block\",\n    list:\n      \"group/list relative isolate flex items-center gap-0.5 \" +\n      // The ink rule (Cahier, ADR-004): a pen line under the item that is pointed at or focused, resting on the current page.\n      \"before:absolute before:left-0 before:top-0 before:-z-10 before:h-0.5 before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-[calc(var(--kz-ind-y)+var(--kz-ind-h)-6px)] \" +\n      \"before:scale-x-[0.72] before:bg-fg before:opacity-0 before:transition-[translate,width,opacity] before:duration-300 motion-reduce:before:transition-none \" +\n      \"data-[indicator=on]:before:opacity-100\",\n    item:\n      \"inline-flex h-9 select-none items-center gap-1 rounded-sm px-3.5 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:text-fg data-active:text-fg data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      // Before the light is ready (server render), the current page carries its own tint.\n      \"group-not-data-[indicator=on]/list:data-active:underline group-not-data-[indicator=on]/list:data-active:decoration-2 group-not-data-[indicator=on]/list:data-active:underline-offset-8\",\n    chevron: \"h-3.5 w-3.5 transition-transform duration-300 group-data-[state=open]/trigger:rotate-180 motion-reduce:transition-none\",\n    viewport:\n      // `left` is set by NavBarItems (--kz-menu-left): the panel's edge under its trigger, kept inside the page.\n      \"kz-pop absolute left-[var(--kz-menu-left,0px)] top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[left,width,height] duration-300 motion-reduce:transition-none\",\n    // Icon · title · a description of two lines at most. 28 rem (40 rem in two columns), never wider than the page\n    // between its gutters, and never taller than the screen.\n    panel: \"grid w-[min(28rem,calc(100vw-2rem))] max-h-[calc(100dvh-6rem)] gap-0.5 overflow-y-auto p-1.5\",\n    panelWide: \"w-[min(40rem,calc(100vw-2rem))] md:grid-cols-2\",\n    menuLink:\n      \"group/link flex items-start gap-3 rounded-lg px-2.5 py-2 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-active:bg-accent-soft\",\n    menuIcon:\n      \"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border-default bg-surface-2 text-fg-accent \" +\n      \"transition-[transform,border-color] duration-300 group-hover/link:-translate-y-0.5 group-hover/link:border-accent [&>svg]:h-4 [&>svg]:w-4 motion-reduce:transform-none\",\n    menuTitle: \"block line-clamp-2 wrap-break-word text-sm font-semibold leading-5 text-fg\",\n    // Two lines at most, wrapped at word boundaries — a longer one ends in an ellipsis, never cut mid-sentence.\n    menuText: \"mt-0.5 block line-clamp-2 wrap-break-word text-xs leading-4 text-fg-secondary\",\n    actions: \"ml-auto flex items-center gap-2\",\n    toggle:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-sm border border-border-subtle bg-surface-2 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    mobile: \"kz-pop absolute inset-x-0 top-full mt-2 grid gap-1 rounded-2xl border border-border-default bg-surface-1 p-2 shadow-lg md:hidden\",\n    mobileGroup: \"grid gap-0.5 [&+&]:mt-1 [&+&]:border-t [&+&]:border-border-subtle [&+&]:pt-2\",\n    mobileGroupTitle: \"px-3 pb-1 pt-1 text-[11px] font-semibold text-fg-secondary\",\n    mobileLink:\n      \"flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg-accent\",\n    // The family switcher: a chevron attached to the brand, its panel aligned on the bar's left edge.\n    family: \"hidden md:block\",\n    familyTrigger:\n      \"group/trigger -ml-2 mr-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-3 hover:text-fg data-[state=open]:bg-surface-3 data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    familyViewport:\n      \"kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none\",\n    familyPanel: \"grid w-[min(92vw,42rem)] gap-x-2 gap-y-3 p-3 sm:grid-cols-2\",\n    familyGroupTitle: \"px-3 pb-1 pt-1 text-[11px] font-semibold text-fg-secondary\",\n    familyLink:\n      \"group/link flex items-start gap-3 rounded-xl px-3 py-2.5 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    familyMark: \"mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center text-fg\",\n    familyName: \"flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm font-semibold text-fg\",\n    familyText: \"mt-0.5 block text-xs leading-relaxed text-fg-secondary\",\n    familyTag: \"rounded-sm px-1.5 py-px text-[10px] font-semibold\",\n    mobileFamily: \"mt-1 grid gap-2 border-t border-border-subtle px-1 pb-1 pt-3\",\n    mobileFamilyLink:\n      \"flex min-h-11 items-center gap-3 rounded-xl px-2 py-2 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    badge:\n      \"hidden h-6 shrink-0 items-center gap-1 rounded-sm border border-border-subtle bg-surface-2 px-2 font-mono text-[11px] font-medium text-fg-secondary sm:inline-flex\",\n    repo:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-sm text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    floating: {\n      true: { root: \"max-w-5xl rounded-sm border pl-5 pr-2 data-compact:max-w-4xl\" },\n      false: { root: \"border-b px-4 md:px-6\" },\n    },\n  },\n  defaultVariants: { floating: true },\n});\nconst s = navBar();\n\ninterface NavBarContext {\n  label: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  panelId: string;\n}\nconst Context = React.createContext<NavBarContext | null>(null);\n/** The open menu of `NavBar.Items` (`\"\"`: none), so a plain link can close it when the pointer moves on to it. */\nconst ItemsContext = React.createContext<{ close: () => void }>({ close: () => {} });\n/** True inside `NavBar.Mobile`: the family renders as the panel's last group instead of a switcher. */\nconst MobileContext = React.createContext(false);\nconst useNavBar = () => {\n  const ctx = React.useContext(Context);\n  if (!ctx) throw new Error(\"NavBar parts must be inside <NavBar.Root>.\");\n  return ctx;\n};\n\nexport type NavBarRootProps = React.ComponentProps<\"header\"> & {\n  /** The accessible name of the navigation (“Main”) — passed translated. */\n  label: string;\n  /**\n   * Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.\n   * @default 24\n   */\n  compactAfter?: number | false;\n  /**\n   * A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.\n   * @default true\n   */\n  floating?: boolean;\n};\n\n/** The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll. */\nexport function NavBarRoot({ label, compactAfter = 24, floating = true, className, children, ...props }: NavBarRootProps) {\n  const [compact, setCompact] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n  const panelId = React.useId();\n  React.useEffect(() => {\n    if (compactAfter === false) return;\n    const onScroll = () => setCompact(window.scrollY > compactAfter);\n    onScroll();\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [compactAfter]);\n  const ctx = React.useMemo(() => ({ label, open, setOpen, panelId }), [label, open, panelId]);\n  return (\n    <Context.Provider value={ctx}>\n      <header data-compact={compact ? \"\" : undefined} data-floating={floating} className={navBar({ floating }).root({ className })} {...props}>\n        {children}\n      </header>\n    </Context.Provider>\n  );\n}\n\nexport type NavBarBrandProps = React.ComponentProps<\"a\"> & {\n  /** Renders your link (a router `<Link>`) with the brand's look. */\n  asChild?: boolean;\n};\n\n/** The brand: a mark and a name, linking home. */\nexport function NavBarBrand({ asChild, className, ...props }: NavBarBrandProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp className={s.brand({ className })} {...props} />;\n}\n\nexport type NavBarItemsProps = Omit<React.ComponentProps<typeof Nav.Root>, \"orientation\">;\n\n/**\n * The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see\n * `NavBar.Mobile`). A menu opens on click, Enter, Space or ↓ — or when the pointer rests on its trigger (hover intent,\n * `delayDuration`, 200 ms): passing over the bar opens nothing. While a menu is open the light stays on its trigger;\n * moving on to a plain link closes the menu, so the bar never shows two current items. A click outside or Escape closes.\n */\nexport function NavBarItems({ className, children, value: valueProp, defaultValue, onValueChange, delayDuration = 200, ...props }: NavBarItemsProps) {\n  const { label } = useNavBar();\n  const [inner, setInner] = React.useState(defaultValue ?? \"\");\n  const value = valueProp ?? inner;\n  const setValue = React.useCallback(\n    (next: string) => {\n      setInner(next);\n      onValueChange?.(next);\n    },\n    [onValueChange],\n  );\n  const items = React.useMemo(() => ({ close: () => setValue(\"\") }), [setValue]);\n  const { ref, handlers } = useSlidingIndicator<HTMLUListElement>({\n    item: \"[data-nav-item]\",\n    active: \"[data-nav-item][data-active]\",\n    prefer: \"[data-nav-item][data-state=open]\",\n    follow: true,\n  });\n  const root = React.useRef<HTMLElement>(null);\n  const viewport = React.useRef<HTMLDivElement>(null);\n  // The open panel sits under its trigger and stays inside the page (collision): measured when a menu opens, when\n  // the panel changes size (another menu) and when the window does.\n  React.useLayoutEffect(() => {\n    const panel = viewport.current;\n    const nav = root.current;\n    if (!panel || !nav || !value) return;\n    const place = () => {\n      const trigger = nav.querySelector<HTMLElement>(\"[data-nav-item][data-state=open]\");\n      const width = Number.parseFloat(panel.style.getPropertyValue(\"--radix-navigation-menu-viewport-width\"));\n      if (!trigger || !Number.isFinite(width)) return;\n      const left = `${placePanel({ trigger: trigger.getBoundingClientRect().left, root: nav.getBoundingClientRect().left, panel: width, window: document.documentElement.clientWidth })}px`;\n      if (panel.style.getPropertyValue(\"--kz-menu-left\") !== left) panel.style.setProperty(\"--kz-menu-left\", left);\n    };\n    place();\n    const watch = new MutationObserver(place);\n    watch.observe(panel, { attributes: true, attributeFilter: [\"style\"] });\n    window.addEventListener(\"resize\", place);\n    return () => {\n      watch.disconnect();\n      window.removeEventListener(\"resize\", place);\n    };\n  }, [value]);\n  return (\n    <ItemsContext.Provider value={items}>\n      <Nav.Root ref={root} aria-label={label} className={s.items({ className })} value={value} onValueChange={setValue} delayDuration={delayDuration} {...props}>\n        <Nav.List ref={ref} className={s.list()} {...handlers}>\n          {children}\n        </Nav.List>\n        <Nav.Viewport ref={viewport} className={s.viewport()} />\n      </Nav.Root>\n    </ItemsContext.Provider>\n  );\n}\n\nexport type NavBarLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"active\"> & {\n  /** The current page: `aria-current=\"page\"`, and the light rests on it. */\n  active?: boolean;\n  /** Classes on the list item around the link (to show it from a breakpoint only). */\n  itemClassName?: string;\n};\n\n/** A link of the bar. `asChild` renders your router's `<Link>`. */\nexport function NavBarLink({ active, className, itemClassName, onPointerEnter, ...props }: NavBarLinkProps) {\n  const { close } = React.useContext(ItemsContext);\n  return (\n    <Nav.Item className={itemClassName}>\n      <Nav.Link\n        data-nav-item=\"\"\n        data-active={active ? \"\" : undefined}\n        active={active}\n        aria-current={active ? \"page\" : undefined}\n        className={s.item({ className })}\n        onPointerEnter={(e) => {\n          onPointerEnter?.(e);\n          close();\n        }}\n        {...props}\n      />\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuProps = Omit<React.ComponentProps<typeof Nav.Item>, \"children\"> & {\n  /** The trigger's words (“Products”) — passed translated. */\n  label: string;\n  /** The current page is inside this menu: the light rests on its trigger. */\n  active?: boolean;\n  /** The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid. */\n  children: React.ReactNode;\n  /**\n   * Columns of the panel.\n   * @default 1\n   */\n  columns?: 1 | 2;\n  /**\n   * A section with this many links or fewer needs no hidden list: they sit in the bar as plain links (the active one\n   * marked, no dropdown, `label` unused on the desktop). Above it, a dropdown. `0` always makes a dropdown.\n   * @default 3\n   */\n  inlineUpTo?: number;\n  /**\n   * From which breakpoint the inline links stand in the bar. Below it (between the phone panel at `md` and this\n   * breakpoint) the section is the dropdown, so long labels never overflow a tablet-width bar. `md` inlines as soon as\n   * the bar is shown.\n   * @default \"lg\"\n   */\n  inlineFrom?: \"md\" | \"lg\" | \"xl\";\n};\n\n// Static class names (Tailwind reads them at build time).\nconst INLINE_HIDE = { md: \"\", lg: \"max-lg:hidden\", xl: \"max-xl:hidden\" } as const;\nconst DROPDOWN_HIDE = { md: \"\", lg: \"lg:hidden\", xl: \"xl:hidden\" } as const;\n\n/**\n * A menu of the bar: its trigger, and its links in a panel that opens under the bar. A menu of `inlineUpTo` links or\n * fewer (3 by default) is not a menu at all: its links stand in the bar, each with its active state — a hidden list of\n * three is one click more for nothing. The phone's panel groups them as usual (`NavBar.MobileGroup`).\n */\nexport function NavBarMenu({ label, active, columns = 1, inlineUpTo = 3, inlineFrom = \"lg\", children, className, ...props }: NavBarMenuProps) {\n  const links = React.Children.toArray(children);\n  const dropdown = (hide: string) => (\n    <Nav.Item className={cn(hide, className)} {...props}>\n      <Nav.Trigger data-nav-item=\"\" data-active={active ? \"\" : undefined} className={cn(s.item(), \"group/trigger\")}>\n        {label}\n        <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </Nav.Trigger>\n      <Nav.Content className={cn(s.panel(), columns === 2 && s.panelWide())}>{children}</Nav.Content>\n    </Nav.Item>\n  );\n  const inline = links.length > 0 && links.length <= inlineUpTo && links.every((c) => React.isValidElement(c) && c.type === NavBarMenuLink);\n  if (inline) {\n    return (\n      <>\n        {inlineFrom !== \"md\" && dropdown(DROPDOWN_HIDE[inlineFrom])}\n        {links.map((link) => {\n          const { title, href, active: here, asChild, children: child, icon: _icon, description: _description, className: linkClass, ...rest } = (link as React.ReactElement<NavBarMenuLinkProps>).props;\n          return (\n            <NavBarLink key={(link as React.ReactElement).key} asChild={asChild} href={asChild ? undefined : href} active={here} className={linkClass} itemClassName={INLINE_HIDE[inlineFrom]} {...rest}>\n              {asChild && React.isValidElement<{ children?: React.ReactNode }>(child) ? React.cloneElement(child, undefined, title) : title}\n            </NavBarLink>\n          );\n        })}\n      </>\n    );\n  }\n  return dropdown(\"\");\n}\n\nexport type NavBarMenuLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"title\" | \"active\"> & {\n  /** The link's name — passed translated. */\n  title: string;\n  /** One line under it — passed translated. */\n  description?: string;\n  /** An icon (a signature icon of `@krizaka/icons`: its node lights up on hover). */\n  icon?: React.ReactNode;\n  /** The current page. */\n  active?: boolean;\n};\n\n/** A link inside a menu: an icon, a name and a line of text. */\nexport function NavBarMenuLink({ title, description, icon, active, href, className, asChild, children, ...props }: NavBarMenuLinkProps) {\n  const body = (\n    <>\n      {icon && <span className={s.menuIcon()}>{icon}</span>}\n      <span className=\"min-w-0 flex-1\">\n        <span className={s.menuTitle()}>{title}</span>\n        {description && <span className={s.menuText()}>{description}</span>}\n      </span>\n    </>\n  );\n  return (\n    <Nav.Link asChild={asChild} href={asChild ? undefined : href} active={active} aria-current={active ? \"page\" : undefined} data-active={active ? \"\" : undefined} className={s.menuLink({ className })} {...props}>\n      {asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? React.cloneElement(children, undefined, body) : body}\n    </Nav.Link>\n  );\n}\n\n/** The right side: search, theme, language, the call to action. */\nexport function NavBarActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.actions({ className })} {...props} />;\n}\n\nexport type NavBarMobileProps = React.ComponentProps<\"nav\"> & {\n  /** The toggle's name when closed (“Open the menu”) — passed translated. */\n  openLabel: string;\n  /** The toggle's name when open (“Close the menu”) — passed translated. */\n  closeLabel: string;\n};\n\n/**\n * Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`), grouped like the bar's menus\n * (`NavBar.MobileGroup`). A disclosure: Escape, a click on a link or a press outside close it; Escape returns the focus\n * to the toggle.\n */\nexport function NavBarMobile({ openLabel, closeLabel, className, children, ...props }: NavBarMobileProps) {\n  const { label, open, setOpen, panelId } = useNavBar();\n  const toggle = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      setOpen(false);\n      toggle.current?.focus();\n    };\n    // A press outside the panel and its toggle closes it (the page under it stays usable).\n    const onPress = (e: PointerEvent) => {\n      const target = e.target as Node | null;\n      if (!target || toggle.current?.contains(target) || document.getElementById(panelId)?.contains(target)) return;\n      setOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKey);\n    document.addEventListener(\"pointerdown\", onPress);\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.removeEventListener(\"pointerdown\", onPress);\n    };\n  }, [open, setOpen, panelId]);\n  return (\n    <>\n      <button ref={toggle} type=\"button\" aria-expanded={open} aria-controls={panelId} aria-label={open ? closeLabel : openLabel} onClick={() => setOpen(!open)} className={s.toggle()}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4.5 w-4.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          {open ? <path d=\"M18 6 6 18M6 6l12 12\" /> : <path d=\"M4 7h16M4 12h16M4 17h10\" />}\n        </svg>\n      </button>\n      {open && (\n        <nav\n          id={panelId}\n          aria-label={label}\n          className={s.mobile({ className })}\n          onClick={(e) => {\n            if ((e.target as Element).closest(\"a\")) setOpen(false);\n          }}\n          {...props}\n        >\n          <MobileContext.Provider value>{children}</MobileContext.Provider>\n        </nav>\n      )}\n    </>\n  );\n}\n\nexport type NavBarMobileGroupProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The group's heading — the same words as the bar's menu (“Product”) — passed translated. */\n  label: string;\n};\n\n/** A group of the mobile panel: the links of one of the bar's menus under its name, in the same order. */\nexport function NavBarMobileGroup({ label, className, children, ...props }: NavBarMobileGroupProps) {\n  const id = React.useId();\n  return (\n    <div role=\"group\" aria-labelledby={id} className={s.mobileGroup({ className })} {...props}>\n      <p id={id} className={s.mobileGroupTitle()}>\n        {label}\n      </p>\n      {children}\n    </div>\n  );\n}\n\nexport type NavBarMobileLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the mobile panel. */\nexport function NavBarMobileLink({ active, asChild, className, ...props }: NavBarMobileLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.mobileLink({ className })} {...props} />;\n}\n\n\nconst tagTone = {\n  upcoming: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40\",\n  construction: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40\",\n  development: \"bg-surface-3 text-fg ring-1 ring-inset ring-border-strong\",\n  current: \"bg-surface-3 text-fg-secondary\",\n};\n\n/** A site's name and its tags: status when not released, “You are here” on the current one. */\nfunction FamilyName({ site, current, labels }: { site: Site; current: boolean; labels: FamilyLabels }) {\n  return (\n    <span className={s.familyName()}>\n      {site.name}\n      {site.status !== \"released\" && <span className={cn(s.familyTag(), tagTone[site.status])}>{labels.status[site.status]}</span>}\n      {current && <span className={cn(s.familyTag(), tagTone.current)}>{labels.current}</span>}\n    </span>\n  );\n}\n\nexport type NavBarFamilyProps = {\n  /** The site this bar belongs to (`@krizaka/ui/sites`): marked in the family, `aria-current=\"true\"`. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** Opens the panel at first render (a story, a screenshot). */\n  defaultOpen?: boolean;\n  /** Classes of the switcher (or, inside `NavBar.Mobile`, of the family's group). */\n  className?: string;\n};\n\n/**\n * @deprecated No site carries the family switcher any more (2026-10-22): krizaka.com is the only way back between the Krizaka sites, through the footer's « A Krizaka project » line. Removed in the next minor; `krizaka/no-family-switcher` refuses it.\n *\n * The family switcher, attached to the brand (place it right after `NavBar.Brand`): a chevron that opens every site of\n * Krizaka grouped — Krizaka · Products · Open source · GitHub — the current one marked. It opens on click, Enter, Space\n * or ↓ (never on hover); ↑ ↓ walk the sites, Escape closes and returns the focus. Hidden below `md`: place a second\n * `NavBar.Family` as the last child of `NavBar.Mobile`, where it renders as the panel's last group.\n */\nexport function NavBarFamily({ current, labels = familyLabels.en, defaultOpen, className }: NavBarFamilyProps) {\n  const inMobile = React.useContext(MobileContext);\n  const id = React.useId();\n  const groups = sitesByGroup();\n  if (inMobile) {\n    return (\n      <div role=\"group\" aria-labelledby={`${id}-family`} className={s.mobileFamily({ className })}>\n        <p id={`${id}-family`} className={s.familyGroupTitle()}>\n          {labels.family}\n        </p>\n        {groups.map(({ group, sites }) => (\n          <div key={group}>\n            {/* The company's own group is named like the family itself: its heading would repeat the panel's. */}\n            {group !== \"krizaka\" && (\n              <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                {labels.groups[group]}\n              </p>\n            )}\n            <ul aria-labelledby={group !== \"krizaka\" ? `${id}-${group}` : `${id}-family`} className=\"grid gap-0.5\">\n              {sites.map((site) => (\n                <li key={site.id}>\n                  <a href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.mobileFamilyLink()}>\n                    <span className={s.familyMark()}>\n                      <FamilyMark mark={site.mark} size={24} />\n                    </span>\n                    <FamilyName site={site} current={site.id === current} labels={labels} />\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n    );\n  }\n  // Click only: a pointer passing over the brand never opens the family (Radix opens its menus on hover by default).\n  const noHover = (e: React.PointerEvent) => e.preventDefault();\n  const columns = [groups.filter((g) => g.group === \"krizaka\" || g.group === \"products\"), groups.filter((g) => g.group === \"open-source\" || g.group === \"github\")];\n  return (\n    <Nav.Root aria-label={labels.family} defaultValue={defaultOpen ? \"family\" : undefined} className={s.family({ className })}>\n      <Nav.List className=\"flex\">\n        <Nav.Item value=\"family\">\n          <Nav.Trigger aria-label={labels.family} onPointerMove={noHover} onPointerLeave={noHover} className={s.familyTrigger()}>\n            <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n              <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n          </Nav.Trigger>\n          <Nav.Content onPointerLeave={noHover} className={s.familyPanel()}>\n            {columns.map((column, i) => (\n              <div key={i} className=\"grid content-start gap-3\">\n                {column.map(({ group, sites }) => (\n                  <div key={group}>\n                    <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                      {labels.groups[group]}\n                    </p>\n                    <ul aria-labelledby={`${id}-${group}`} className=\"grid gap-0.5\">\n                      {sites.map((site) => (\n                        <li key={site.id}>\n                          <Nav.Link href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.familyLink()}>\n                            <span className={s.familyMark()}>\n                              <FamilyMark mark={site.mark} size={28} />\n                            </span>\n                            <span className=\"min-w-0\">\n                              <FamilyName site={site} current={site.id === current} labels={labels} />\n                              <span className={s.familyText()}>{labels.descriptions[site.id]}</span>\n                            </span>\n                          </Nav.Link>\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n              </div>\n            ))}\n          </Nav.Content>\n        </Nav.Item>\n      </Nav.List>\n      <Nav.Viewport onPointerLeave={noHover} className={s.familyViewport()} />\n    </Nav.Root>\n  );\n}\n\nexport type NavBarBadgeProps = React.ComponentProps<\"span\"> & {\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n};\n\n/** A small mono badge beside the brand: the environment and the version (`DEV · v1.2.3`). Hidden below `sm`. */\nexport function NavBarBadge({ env, version, className, children, ...props }: NavBarBadgeProps) {\n  const parts = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean);\n  return (\n    <span className={s.badge({ className })} {...props}>\n      {parts.join(\" · \")}\n      {children}\n    </span>\n  );\n}\n\nexport type NavBarLanguageProps = Omit<LanguageSwitchProps, \"variant\">;\n\n/**\n * The language switch, the same on every site: in the bar a globe and the current code (FR) opening a short menu of\n * the languages by their own names; inside `NavBar.Mobile` the same languages as a row in the preferences.\n */\nexport function NavBarLanguage(props: NavBarLanguageProps) {\n  const inMobile = React.useContext(MobileContext);\n  return <LanguageSwitch variant={inMobile ? \"inline\" : \"menu\"} {...props} />;\n}\n\nexport type NavBarMobilePreferencesProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The group's heading (“Preferences”) — passed translated. */\n  label: string;\n};\n\n/** The last group of the mobile panel: the preferences (theme, `NavBar.Language`), in a row under their heading. */\nexport function NavBarMobilePreferences({ label, className, children, ...props }: NavBarMobilePreferencesProps) {\n  const id = React.useId();\n  return (\n    <div role=\"group\" aria-labelledby={id} className={s.mobileGroup({ className })} {...props}>\n      <p id={id} className={s.mobileGroupTitle()}>\n        {label}\n      </p>\n      <div className=\"flex flex-wrap items-center gap-2 px-3 py-1\">{children}</div>\n    </div>\n  );\n}\n\nexport type NavBarRepoProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The repository the site is built from. */\n  href: string;\n  /** The link's accessible name (“Source on GitHub”) — passed translated. */\n  label: string;\n};\n\n/** The site's repository on GitHub, an icon link of `NavBar.Actions`. */\nexport function NavBarRepo({ label, className, ...props }: NavBarRepoProps) {\n  return (\n    <a aria-label={label} className={s.repo({ className })} {...props}>\n      <GitHubGlyph size={18} />\n    </a>\n  );\n}\n\n/**\n * `NavBar.Root/Brand/Family/Badge/Items/Link/Menu/MenuLink/Actions/Repo/Language/Mobile/MobileGroup/MobilePreferences/MobileLink` — the Krizaka navigation bar,\n * the same on every site of the family: floating, tightening on scroll, the family switcher on the brand, one light\n * gliding between its items, accessible menus, a mobile panel.\n */\nexport const NavBar = {\n  Root: NavBarRoot,\n  Brand: NavBarBrand,\n  Family: NavBarFamily,\n  Badge: NavBarBadge,\n  Items: NavBarItems,\n  Link: NavBarLink,\n  Menu: NavBarMenu,\n  MenuLink: NavBarMenuLink,\n  Actions: NavBarActions,\n  Repo: NavBarRepo,\n  Language: NavBarLanguage,\n  Mobile: NavBarMobile,\n  MobilePreferences: NavBarMobilePreferences,\n  MobileGroup: NavBarMobileGroup,\n  MobileLink: NavBarMobileLink,\n};\n","/**\n * Where a menu panel of the bar sits: its left edge under its trigger's, pushed back inside the page when it would run\n * past the right edge, never closer to the left edge than the gutter. All values are pixels of the page (a bounding\n * rect's `left`, a width), the result is the panel's `left` relative to the bar's navigation (`root`). Pure, so a\n * viewport of 360 px and one of 1280 px are tested without a browser.\n */\nexport interface PlacePanel {\n  /** The trigger's left edge. */\n  trigger: number;\n  /** The navigation's left edge (the panel is positioned inside it). */\n  root: number;\n  /** The panel's width. */\n  panel: number;\n  /** The window's width. */\n  window: number;\n  /**\n   * The space kept between the panel and the window's edges.\n   * @default 16\n   */\n  gutter?: number;\n}\n\nexport function placePanel({ trigger, root, panel, window, gutter = 16 }: PlacePanel): number {\n  const wanted = trigger - root;\n  const farthest = window - gutter - panel - root;\n  const nearest = gutter - root;\n  return Math.round(Math.max(nearest, Math.min(wanted, farthest)));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAIA,SAAS,kBAAkB,KAAK,YAAY;AAC5C,YAAY,WAAW;AACvB,SAAS,UAAU;;;ACgBZ,SAAS,WAAW,EAAE,SAAS,MAAM,OAAO,QAAAA,SAAQ,SAAS,GAAG,GAAuB;AAC5F,QAAM,SAAS,UAAU;AACzB,QAAM,WAAWA,UAAS,SAAS,QAAQ;AAC3C,QAAM,UAAU,SAAS;AACzB,SAAO,KAAK,MAAM,KAAK,IAAI,SAAS,KAAK,IAAI,QAAQ,QAAQ,CAAC,CAAC;AACjE;;;ADyHM,SAgKA,UAhKA,KAsEA,YAtEA;AArIC,IAAM,SAAS,GAAG;AAAA,EACvB,OAAO;AAAA,IACL,MACE;AAAA,IAGF,OACE;AAAA,IAEF,OAAO;AAAA,IACP,MACE;AAAA,IAKF,MACE;AAAA,IAIF,SAAS;AAAA,IACT;AAAA;AAAA,MAEE;AAAA;AAAA;AAAA;AAAA,IAIF,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UACE;AAAA,IAEF,UACE;AAAA,IAEF,WAAW;AAAA;AAAA,IAEX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QACE;AAAA,IAEF,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,YACE;AAAA;AAAA,IAGF,QAAQ;AAAA,IACR,eACE;AAAA,IAEF,gBACE;AAAA,IAEF,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,YACE;AAAA,IAEF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,cAAc;AAAA,IACd,kBACE;AAAA,IAEF,OACE;AAAA,IACF,MACE;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM,EAAE,MAAM,+DAA+D;AAAA,MAC7E,OAAO,EAAE,MAAM,wBAAwB;AAAA,IACzC;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,UAAU,KAAK;AACpC,CAAC;AACD,IAAM,IAAI,OAAO;AAQjB,IAAM,UAAgB,oBAAoC,IAAI;AAE9D,IAAM,eAAqB,oBAAqC,EAAE,OAAO,MAAM;AAAC,EAAE,CAAC;AAEnF,IAAM,gBAAsB,oBAAc,KAAK;AAC/C,IAAM,YAAY,MAAM;AACtB,QAAM,MAAY,iBAAW,OAAO;AACpC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,4CAA4C;AACtE,SAAO;AACT;AAkBO,SAAS,WAAW,EAAE,OAAO,eAAe,IAAI,WAAW,MAAM,WAAW,UAAU,GAAG,MAAM,GAAoB;AACxH,QAAM,CAAC,SAAS,UAAU,IAAU,eAAS,KAAK;AAClD,QAAM,CAAC,MAAM,OAAO,IAAU,eAAS,KAAK;AAC5C,QAAM,UAAgB,YAAM;AAC5B,EAAM,gBAAU,MAAM;AACpB,QAAI,iBAAiB,MAAO;AAC5B,UAAM,WAAW,MAAM,WAAW,OAAO,UAAU,YAAY;AAC/D,aAAS;AACT,WAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AAC7D,WAAO,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,EAC5D,GAAG,CAAC,YAAY,CAAC;AACjB,QAAM,MAAY,cAAQ,OAAO,EAAE,OAAO,MAAM,SAAS,QAAQ,IAAI,CAAC,OAAO,MAAM,OAAO,CAAC;AAC3F,SACE,oBAAC,QAAQ,UAAR,EAAiB,OAAO,KACvB,8BAAC,YAAO,gBAAc,UAAU,KAAK,QAAW,iBAAe,UAAU,WAAW,OAAO,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/H,UACH,GACF;AAEJ;AAQO,SAAS,YAAY,EAAE,SAAS,WAAW,GAAG,MAAM,GAAqB;AAC9E,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SAAO,oBAAC,QAAK,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC7D;AAUO,SAAS,YAAY,EAAE,WAAW,UAAU,OAAO,WAAW,cAAc,eAAe,gBAAgB,KAAK,GAAG,MAAM,GAAqB;AACnJ,QAAM,EAAE,MAAM,IAAI,UAAU;AAC5B,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAS,gBAAgB,EAAE;AAC3D,QAAM,QAAQ,aAAa;AAC3B,QAAM,WAAiB;AAAA,IACrB,CAAC,SAAiB;AAChB,eAAS,IAAI;AACb,sBAAgB,IAAI;AAAA,IACtB;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,QAAM,QAAc,cAAQ,OAAO,EAAE,OAAO,MAAM,SAAS,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC;AAC7E,QAAM,EAAE,KAAK,SAAS,IAAI,oBAAsC;AAAA,IAC9D,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC;AACD,QAAM,OAAa,aAAoB,IAAI;AAC3C,QAAM,WAAiB,aAAuB,IAAI;AAGlD,EAAM,sBAAgB,MAAM;AAC1B,UAAM,QAAQ,SAAS;AACvB,UAAM,MAAM,KAAK;AACjB,QAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAO;AAC9B,UAAM,QAAQ,MAAM;AAClB,YAAM,UAAU,IAAI,cAA2B,kCAAkC;AACjF,YAAM,QAAQ,OAAO,WAAW,MAAM,MAAM,iBAAiB,wCAAwC,CAAC;AACtG,UAAI,CAAC,WAAW,CAAC,OAAO,SAAS,KAAK,EAAG;AACzC,YAAM,OAAO,GAAG,WAAW,EAAE,SAAS,QAAQ,sBAAsB,EAAE,MAAM,MAAM,IAAI,sBAAsB,EAAE,MAAM,OAAO,OAAO,QAAQ,SAAS,gBAAgB,YAAY,CAAC,CAAC;AACjL,UAAI,MAAM,MAAM,iBAAiB,gBAAgB,MAAM,KAAM,OAAM,MAAM,YAAY,kBAAkB,IAAI;AAAA,IAC7G;AACA,UAAM;AACN,UAAM,QAAQ,IAAI,iBAAiB,KAAK;AACxC,UAAM,QAAQ,OAAO,EAAE,YAAY,MAAM,iBAAiB,CAAC,OAAO,EAAE,CAAC;AACrE,WAAO,iBAAiB,UAAU,KAAK;AACvC,WAAO,MAAM;AACX,YAAM,WAAW;AACjB,aAAO,oBAAoB,UAAU,KAAK;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AACV,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAC5B,+BAAC,IAAI,MAAJ,EAAS,KAAK,MAAM,cAAY,OAAO,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAG,OAAc,eAAe,UAAU,eAA+B,GAAG,OAClJ;AAAA,wBAAC,IAAI,MAAJ,EAAS,KAAU,WAAW,EAAE,KAAK,GAAI,GAAG,UAC1C,UACH;AAAA,IACA,oBAAC,IAAI,UAAJ,EAAa,KAAK,UAAU,WAAW,EAAE,SAAS,GAAG;AAAA,KACxD,GACF;AAEJ;AAUO,SAAS,WAAW,EAAE,QAAQ,WAAW,eAAe,gBAAgB,GAAG,MAAM,GAAoB;AAC1G,QAAM,EAAE,MAAM,IAAU,iBAAW,YAAY;AAC/C,SACE,oBAAC,IAAI,MAAJ,EAAS,WAAW,eACnB;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MACC,iBAAc;AAAA,MACd,eAAa,SAAS,KAAK;AAAA,MAC3B;AAAA,MACA,gBAAc,SAAS,SAAS;AAAA,MAChC,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAC/B,gBAAgB,CAAC,MAAM;AACrB,yBAAiB,CAAC;AAClB,cAAM;AAAA,MACR;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AA8BA,IAAM,cAAc,EAAE,IAAI,IAAI,IAAI,iBAAiB,IAAI,gBAAgB;AACvE,IAAM,gBAAgB,EAAE,IAAI,IAAI,IAAI,aAAa,IAAI,YAAY;AAO1D,SAAS,WAAW,EAAE,OAAO,QAAQ,UAAU,GAAG,aAAa,GAAG,aAAa,MAAM,UAAU,WAAW,GAAG,MAAM,GAAoB;AAC5I,QAAM,QAAc,eAAS,QAAQ,QAAQ;AAC7C,QAAM,WAAW,CAAC,SAChB,qBAAC,IAAI,MAAJ,EAAS,WAAW,GAAG,MAAM,SAAS,GAAI,GAAG,OAC5C;AAAA,yBAAC,IAAI,SAAJ,EAAY,iBAAc,IAAG,eAAa,SAAS,KAAK,QAAW,WAAW,GAAG,EAAE,KAAK,GAAG,eAAe,GACxG;AAAA;AAAA,MACD,oBAAC,SAAI,SAAQ,aAAY,WAAW,EAAE,QAAQ,GAAG,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MAClI,8BAAC,UAAK,GAAE,gBAAe,GACzB;AAAA,OACF;AAAA,IACA,oBAAC,IAAI,SAAJ,EAAY,WAAW,GAAG,EAAE,MAAM,GAAG,YAAY,KAAK,EAAE,UAAU,CAAC,GAAI,UAAS;AAAA,KACnF;AAEF,QAAM,SAAS,MAAM,SAAS,KAAK,MAAM,UAAU,cAAc,MAAM,MAAM,CAAC,MAAY,qBAAe,CAAC,KAAK,EAAE,SAAS,cAAc;AACxI,MAAI,QAAQ;AACV,WACE,iCACG;AAAA,qBAAe,QAAQ,SAAS,cAAc,UAAU,CAAC;AAAA,MACzD,MAAM,IAAI,CAAC,SAAS;AACnB,cAAM,EAAE,OAAO,MAAM,QAAQ,MAAM,SAAS,UAAU,OAAO,MAAM,OAAO,aAAa,cAAc,WAAW,WAAW,GAAG,KAAK,IAAK,KAAiD;AACzL,eACE,oBAAC,cAAkD,SAAkB,MAAM,UAAU,SAAY,MAAM,QAAQ,MAAM,WAAW,WAAW,eAAe,YAAY,UAAU,GAAI,GAAG,MACpL,qBAAiB,qBAA+C,KAAK,IAAU,mBAAa,OAAO,QAAW,KAAK,IAAI,SADxG,KAA4B,GAE9C;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,EAEJ;AACA,SAAO,SAAS,EAAE;AACpB;AAcO,SAAS,eAAe,EAAE,OAAO,aAAa,MAAM,QAAQ,MAAM,WAAW,SAAS,UAAU,GAAG,MAAM,GAAwB;AACtI,QAAM,OACJ,iCACG;AAAA,YAAQ,oBAAC,UAAK,WAAW,EAAE,SAAS,GAAI,gBAAK;AAAA,IAC9C,qBAAC,UAAK,WAAU,kBACd;AAAA,0BAAC,UAAK,WAAW,EAAE,UAAU,GAAI,iBAAM;AAAA,MACtC,eAAe,oBAAC,UAAK,WAAW,EAAE,SAAS,GAAI,uBAAY;AAAA,OAC9D;AAAA,KACF;AAEF,SACE,oBAAC,IAAI,MAAJ,EAAS,SAAkB,MAAM,UAAU,SAAY,MAAM,QAAgB,gBAAc,SAAS,SAAS,QAAW,eAAa,SAAS,KAAK,QAAW,WAAW,EAAE,SAAS,EAAE,UAAU,CAAC,GAAI,GAAG,OACtM,qBAAiB,qBAA+C,QAAQ,IAAU,mBAAa,UAAU,QAAW,IAAI,IAAI,MAC/H;AAEJ;AAGO,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAAgC;AAClF,SAAO,oBAAC,SAAI,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC9D;AAcO,SAAS,aAAa,EAAE,WAAW,YAAY,WAAW,UAAU,GAAG,MAAM,GAAsB;AACxG,QAAM,EAAE,OAAO,MAAM,SAAS,QAAQ,IAAI,UAAU;AACpD,QAAM,SAAe,aAA0B,IAAI;AACnD,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU;AACxB,cAAQ,KAAK;AACb,aAAO,SAAS,MAAM;AAAA,IACxB;AAEA,UAAM,UAAU,CAAC,MAAoB;AACnC,YAAM,SAAS,EAAE;AACjB,UAAI,CAAC,UAAU,OAAO,SAAS,SAAS,MAAM,KAAK,SAAS,eAAe,OAAO,GAAG,SAAS,MAAM,EAAG;AACvG,cAAQ,KAAK;AAAA,IACf;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,aAAS,iBAAiB,eAAe,OAAO;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,KAAK;AAC7C,eAAS,oBAAoB,eAAe,OAAO;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,MAAM,SAAS,OAAO,CAAC;AAC3B,SACE,iCACE;AAAA,wBAAC,YAAO,KAAK,QAAQ,MAAK,UAAS,iBAAe,MAAM,iBAAe,SAAS,cAAY,OAAO,aAAa,WAAW,SAAS,MAAM,QAAQ,CAAC,IAAI,GAAG,WAAW,EAAE,OAAO,GAC5K,8BAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MACjI,iBAAO,oBAAC,UAAK,GAAE,wBAAuB,IAAK,oBAAC,UAAK,GAAE,2BAA0B,GAChF,GACF;AAAA,IACC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,cAAY;AAAA,QACZ,WAAW,EAAE,OAAO,EAAE,UAAU,CAAC;AAAA,QACjC,SAAS,CAAC,MAAM;AACd,cAAK,EAAE,OAAmB,QAAQ,GAAG,EAAG,SAAQ,KAAK;AAAA,QACvD;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,cAAc,UAAd,EAAuB,OAAK,MAAE,UAAS;AAAA;AAAA,IAC1C;AAAA,KAEJ;AAEJ;AAQO,SAAS,kBAAkB,EAAE,OAAO,WAAW,UAAU,GAAG,MAAM,GAA2B;AAClG,QAAM,KAAW,YAAM;AACvB,SACE,qBAAC,SAAI,MAAK,SAAQ,mBAAiB,IAAI,WAAW,EAAE,YAAY,EAAE,UAAU,CAAC,GAAI,GAAG,OAClF;AAAA,wBAAC,OAAE,IAAQ,WAAW,EAAE,iBAAiB,GACtC,iBACH;AAAA,IACC;AAAA,KACH;AAEJ;AAUO,SAAS,iBAAiB,EAAE,QAAQ,SAAS,WAAW,GAAG,MAAM,GAA0B;AAChG,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SAAO,oBAAC,QAAK,gBAAc,SAAS,SAAS,QAAW,WAAW,EAAE,WAAW,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC7G;AAGA,IAAM,UAAU;AAAA,EACd,UAAU;AAAA,EACV,cAAc;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AACX;AAGA,SAAS,WAAW,EAAE,MAAM,SAAS,OAAO,GAA2D;AACrG,SACE,qBAAC,UAAK,WAAW,EAAE,WAAW,GAC3B;AAAA,SAAK;AAAA,IACL,KAAK,WAAW,cAAc,oBAAC,UAAK,WAAW,GAAG,EAAE,UAAU,GAAG,QAAQ,KAAK,MAAM,CAAC,GAAI,iBAAO,OAAO,KAAK,MAAM,GAAE;AAAA,IACpH,WAAW,oBAAC,UAAK,WAAW,GAAG,EAAE,UAAU,GAAG,QAAQ,OAAO,GAAI,iBAAO,SAAQ;AAAA,KACnF;AAEJ;AAwBO,SAAS,aAAa,EAAE,SAAS,SAAS,aAAa,IAAI,aAAa,UAAU,GAAsB;AAC7G,QAAM,WAAiB,iBAAW,aAAa;AAC/C,QAAM,KAAW,YAAM;AACvB,QAAM,SAAS,aAAa;AAC5B,MAAI,UAAU;AACZ,WACE,qBAAC,SAAI,MAAK,SAAQ,mBAAiB,GAAG,EAAE,WAAW,WAAW,EAAE,aAAa,EAAE,UAAU,CAAC,GACxF;AAAA,0BAAC,OAAE,IAAI,GAAG,EAAE,WAAW,WAAW,EAAE,iBAAiB,GAClD,iBAAO,QACV;AAAA,MACC,OAAO,IAAI,CAAC,EAAE,OAAO,MAAM,MAC1B,qBAAC,SAEE;AAAA,kBAAU,aACT,oBAAC,OAAE,IAAI,GAAG,EAAE,IAAI,KAAK,IAAI,WAAW,EAAE,iBAAiB,GACpD,iBAAO,OAAO,KAAK,GACtB;AAAA,QAEF,oBAAC,QAAG,mBAAiB,UAAU,YAAY,GAAG,EAAE,IAAI,KAAK,KAAK,GAAG,EAAE,WAAW,WAAU,gBACrF,gBAAM,IAAI,CAAC,SACV,oBAAC,QACC,+BAAC,OAAE,MAAM,KAAK,KAAK,gBAAc,KAAK,OAAO,UAAU,KAAK,QAAW,gBAAc,KAAK,OAAO,UAAU,SAAS,QAAW,WAAW,EAAE,iBAAiB,GAC3J;AAAA,8BAAC,UAAK,WAAW,EAAE,WAAW,GAC5B,8BAAC,cAAW,MAAM,KAAK,MAAM,MAAM,IAAI,GACzC;AAAA,UACA,oBAAC,cAAW,MAAY,SAAS,KAAK,OAAO,SAAS,QAAgB;AAAA,WACxE,KANO,KAAK,EAOd,CACD,GACH;AAAA,WAlBQ,KAmBV,CACD;AAAA,OACH;AAAA,EAEJ;AAEA,QAAM,UAAU,CAAC,MAA0B,EAAE,eAAe;AAC5D,QAAM,UAAU,CAAC,OAAO,OAAO,CAAC,MAAM,EAAE,UAAU,aAAa,EAAE,UAAU,UAAU,GAAG,OAAO,OAAO,CAAC,MAAM,EAAE,UAAU,iBAAiB,EAAE,UAAU,QAAQ,CAAC;AAC/J,SACE,qBAAC,IAAI,MAAJ,EAAS,cAAY,OAAO,QAAQ,cAAc,cAAc,WAAW,QAAW,WAAW,EAAE,OAAO,EAAE,UAAU,CAAC,GACtH;AAAA,wBAAC,IAAI,MAAJ,EAAS,WAAU,QAClB,+BAAC,IAAI,MAAJ,EAAS,OAAM,UACd;AAAA,0BAAC,IAAI,SAAJ,EAAY,cAAY,OAAO,QAAQ,eAAe,SAAS,gBAAgB,SAAS,WAAW,EAAE,cAAc,GAClH,8BAAC,SAAI,SAAQ,aAAY,WAAW,EAAE,QAAQ,GAAG,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MAClI,8BAAC,UAAK,GAAE,gBAAe,GACzB,GACF;AAAA,MACA,oBAAC,IAAI,SAAJ,EAAY,gBAAgB,SAAS,WAAW,EAAE,YAAY,GAC5D,kBAAQ,IAAI,CAAC,QAAQ,MACpB,oBAAC,SAAY,WAAU,4BACpB,iBAAO,IAAI,CAAC,EAAE,OAAO,MAAM,MAC1B,qBAAC,SACC;AAAA,4BAAC,OAAE,IAAI,GAAG,EAAE,IAAI,KAAK,IAAI,WAAW,EAAE,iBAAiB,GACpD,iBAAO,OAAO,KAAK,GACtB;AAAA,QACA,oBAAC,QAAG,mBAAiB,GAAG,EAAE,IAAI,KAAK,IAAI,WAAU,gBAC9C,gBAAM,IAAI,CAAC,SACV,oBAAC,QACC,+BAAC,IAAI,MAAJ,EAAS,MAAM,KAAK,KAAK,gBAAc,KAAK,OAAO,UAAU,KAAK,QAAW,gBAAc,KAAK,OAAO,UAAU,SAAS,QAAW,WAAW,EAAE,WAAW,GAC5J;AAAA,8BAAC,UAAK,WAAW,EAAE,WAAW,GAC5B,8BAAC,cAAW,MAAM,KAAK,MAAM,MAAM,IAAI,GACzC;AAAA,UACA,qBAAC,UAAK,WAAU,WACd;AAAA,gCAAC,cAAW,MAAY,SAAS,KAAK,OAAO,SAAS,QAAgB;AAAA,YACtE,oBAAC,UAAK,WAAW,EAAE,WAAW,GAAI,iBAAO,aAAa,KAAK,EAAE,GAAE;AAAA,aACjE;AAAA,WACF,KATO,KAAK,EAUd,CACD,GACH;AAAA,WAlBQ,KAmBV,CACD,KAtBO,CAuBV,CACD,GACH;AAAA,OACF,GACF;AAAA,IACA,oBAAC,IAAI,UAAJ,EAAa,gBAAgB,SAAS,WAAW,EAAE,eAAe,GAAG;AAAA,KACxE;AAEJ;AAUO,SAAS,YAAY,EAAE,KAAK,SAAS,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC7F,QAAM,QAAQ,CAAC,KAAK,WAAW,IAAI,QAAQ,QAAQ,MAAM,EAAE,CAAC,EAAE,EAAE,OAAO,OAAO;AAC9E,SACE,qBAAC,UAAK,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAC1C;AAAA,UAAM,KAAK,QAAK;AAAA,IAChB;AAAA,KACH;AAEJ;AAQO,SAAS,eAAe,OAA4B;AACzD,QAAM,WAAiB,iBAAW,aAAa;AAC/C,SAAO,oBAAC,kBAAe,SAAS,WAAW,WAAW,QAAS,GAAG,OAAO;AAC3E;AAQO,SAAS,wBAAwB,EAAE,OAAO,WAAW,UAAU,GAAG,MAAM,GAAiC;AAC9G,QAAM,KAAW,YAAM;AACvB,SACE,qBAAC,SAAI,MAAK,SAAQ,mBAAiB,IAAI,WAAW,EAAE,YAAY,EAAE,UAAU,CAAC,GAAI,GAAG,OAClF;AAAA,wBAAC,OAAE,IAAQ,WAAW,EAAE,iBAAiB,GACtC,iBACH;AAAA,IACA,oBAAC,SAAI,WAAU,+CAA+C,UAAS;AAAA,KACzE;AAEJ;AAUO,SAAS,WAAW,EAAE,OAAO,WAAW,GAAG,MAAM,GAAoB;AAC1E,SACE,oBAAC,OAAE,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC1D,8BAAC,eAAY,MAAM,IAAI,GACzB;AAEJ;AAOO,IAAM,SAAS;AAAA,EACpB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,YAAY;AACd;","names":["window"]}
+{"version":3,"sources":["../src/nav-bar/nav-bar.tsx","../src/nav-bar/placement.ts","../src/nav-bar/product-actions.tsx"],"sourcesContent":["// Client (scroll, a sliding indicator, menus). Radix NavigationMenu does the menus' semantics and keyboard (Enter, Space\n// and ↓ open; ↑ ↓ Home End walk; Escape closes and returns the focus; Tab out closes); this file draws the Krizaka bar:\n// a floating pill that tightens once the page scrolls, one light that glides to the item under the pointer or the\n// focus and rests on the current page, and a mobile panel that is a plain disclosure (no focus trap, Escape closes).\nimport { NavigationMenu as Nav, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { FamilyMark, GitHubGlyph } from \"../family-mark\";\nimport { LanguageSwitch, type LanguageSwitchProps } from \"../language-switch/language-switch\";\nimport { type FamilyLabels, familyLabels, type Site, type SiteId, sitesByGroup } from \"../sites/sites\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\nimport { placePanel } from \"./placement\";\n\nexport const navBar = tv({\n  slots: {\n    root:\n      \"group/nav relative z-40 mx-auto flex h-14 w-full items-center gap-2 border-border-subtle bg-surface-1 \" +\n      \"transition-[height,background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none \" +\n      \"data-compact:h-12 data-compact:border-border-default data-compact:bg-surface-1 data-compact:shadow-lg\",\n    brand:\n      \"mr-2 inline-flex shrink-0 items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg no-underline \" +\n      \"rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    items: \"relative hidden md:block\",\n    list:\n      \"group/list relative isolate flex items-center gap-0.5 \" +\n      // The ink rule (Cahier, ADR-004): a pen line under the item that is pointed at or focused, resting on the current page.\n      \"before:absolute before:left-0 before:top-0 before:-z-10 before:h-0.5 before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-[calc(var(--kz-ind-y)+var(--kz-ind-h)-6px)] \" +\n      \"before:scale-x-[0.72] before:bg-fg before:opacity-0 before:transition-[translate,width,opacity] before:duration-300 motion-reduce:before:transition-none \" +\n      \"data-[indicator=on]:before:opacity-100\",\n    item:\n      \"inline-flex h-9 select-none items-center gap-1 rounded-sm px-3.5 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:text-fg data-active:text-fg data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      // Before the light is ready (server render), the current page carries its own tint.\n      \"group-not-data-[indicator=on]/list:data-active:underline group-not-data-[indicator=on]/list:data-active:decoration-2 group-not-data-[indicator=on]/list:data-active:underline-offset-8\",\n    chevron: \"h-3.5 w-3.5 transition-transform duration-300 group-data-[state=open]/trigger:rotate-180 motion-reduce:transition-none\",\n    viewport:\n      // `left` is set by NavBarItems (--kz-menu-left): the panel's edge under its trigger, kept inside the page.\n      \"kz-pop absolute left-[var(--kz-menu-left,0px)] top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[left,width,height] duration-300 motion-reduce:transition-none\",\n    // Icon · title · a description of two lines at most. 28 rem (40 rem in two columns), never wider than the page\n    // between its gutters, and never taller than the screen.\n    panel: \"grid w-[min(28rem,calc(100vw-2rem))] max-h-[calc(100dvh-6rem)] gap-0.5 overflow-y-auto p-1.5\",\n    panelWide: \"w-[min(40rem,calc(100vw-2rem))] md:grid-cols-2\",\n    menuLink:\n      \"group/link flex items-start gap-3 rounded-lg px-2.5 py-2 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-active:bg-accent-soft\",\n    menuIcon:\n      \"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border-default bg-surface-2 text-fg-accent \" +\n      \"transition-[transform,border-color] duration-300 group-hover/link:-translate-y-0.5 group-hover/link:border-accent [&>svg]:h-4 [&>svg]:w-4 motion-reduce:transform-none\",\n    menuTitle: \"block line-clamp-2 wrap-break-word text-sm font-semibold leading-5 text-fg\",\n    // Two lines at most, wrapped at word boundaries — a longer one ends in an ellipsis, never cut mid-sentence.\n    menuText: \"mt-0.5 block line-clamp-2 wrap-break-word text-xs leading-4 text-fg-secondary\",\n    actions: \"ml-auto flex items-center gap-2\",\n    toggle:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-sm border border-border-subtle bg-surface-2 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    mobile: \"kz-pop absolute inset-x-0 top-full mt-2 grid gap-1 rounded-2xl border border-border-default bg-surface-1 p-2 shadow-lg md:hidden\",\n    mobileGroup: \"grid gap-0.5 [&+&]:mt-1 [&+&]:border-t [&+&]:border-border-subtle [&+&]:pt-2\",\n    mobileGroupTitle: \"px-3 pb-1 pt-1 text-[11px] font-semibold text-fg-secondary\",\n    mobileLink:\n      \"flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg-accent\",\n    // The family switcher: a chevron attached to the brand, its panel aligned on the bar's left edge.\n    family: \"hidden md:block\",\n    familyTrigger:\n      \"group/trigger -ml-2 mr-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-3 hover:text-fg data-[state=open]:bg-surface-3 data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    familyViewport:\n      \"kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none\",\n    familyPanel: \"grid w-[min(92vw,42rem)] gap-x-2 gap-y-3 p-3 sm:grid-cols-2\",\n    familyGroupTitle: \"px-3 pb-1 pt-1 text-[11px] font-semibold text-fg-secondary\",\n    familyLink:\n      \"group/link flex items-start gap-3 rounded-xl px-3 py-2.5 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    familyMark: \"mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center text-fg\",\n    familyName: \"flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm font-semibold text-fg\",\n    familyText: \"mt-0.5 block text-xs leading-relaxed text-fg-secondary\",\n    familyTag: \"rounded-sm px-1.5 py-px text-[10px] font-semibold\",\n    mobileFamily: \"mt-1 grid gap-2 border-t border-border-subtle px-1 pb-1 pt-3\",\n    mobileFamilyLink:\n      \"flex min-h-11 items-center gap-3 rounded-xl px-2 py-2 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    badge:\n      \"hidden h-6 shrink-0 items-center gap-1 rounded-sm border border-border-subtle bg-surface-2 px-2 font-mono text-[11px] font-medium text-fg-secondary sm:inline-flex\",\n    repo:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-sm text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    floating: {\n      true: { root: \"max-w-5xl rounded-sm border pl-5 pr-2 data-compact:max-w-4xl\" },\n      false: { root: \"border-b px-4 md:px-6\" },\n    },\n  },\n  defaultVariants: { floating: true },\n});\nconst s = navBar();\n\ninterface NavBarContext {\n  label: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  panelId: string;\n}\nconst Context = React.createContext<NavBarContext | null>(null);\n/** The open menu of `NavBar.Items` (`\"\"`: none), so a plain link can close it when the pointer moves on to it. */\nconst ItemsContext = React.createContext<{ close: () => void }>({ close: () => {} });\n/** True inside `NavBar.Mobile`: the family renders as the panel's last group instead of a switcher. */\nconst MobileContext = React.createContext(false);\nconst useNavBar = () => {\n  const ctx = React.useContext(Context);\n  if (!ctx) throw new Error(\"NavBar parts must be inside <NavBar.Root>.\");\n  return ctx;\n};\n\nexport type NavBarRootProps = React.ComponentProps<\"header\"> & {\n  /** The accessible name of the navigation (“Main”) — passed translated. */\n  label: string;\n  /**\n   * Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.\n   * @default 24\n   */\n  compactAfter?: number | false;\n  /**\n   * A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.\n   * @default true\n   */\n  floating?: boolean;\n};\n\n/** The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll. */\nexport function NavBarRoot({ label, compactAfter = 24, floating = true, className, children, ...props }: NavBarRootProps) {\n  const [compact, setCompact] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n  const panelId = React.useId();\n  React.useEffect(() => {\n    if (compactAfter === false) return;\n    const onScroll = () => setCompact(window.scrollY > compactAfter);\n    onScroll();\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [compactAfter]);\n  const ctx = React.useMemo(() => ({ label, open, setOpen, panelId }), [label, open, panelId]);\n  return (\n    <Context.Provider value={ctx}>\n      <header data-compact={compact ? \"\" : undefined} data-floating={floating} className={navBar({ floating }).root({ className })} {...props}>\n        {children}\n      </header>\n    </Context.Provider>\n  );\n}\n\nexport type NavBarBrandProps = React.ComponentProps<\"a\"> & {\n  /** Renders your link (a router `<Link>`) with the brand's look. */\n  asChild?: boolean;\n};\n\n/** The brand: a mark and a name, linking home. */\nexport function NavBarBrand({ asChild, className, ...props }: NavBarBrandProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp className={s.brand({ className })} {...props} />;\n}\n\nexport type NavBarItemsProps = Omit<React.ComponentProps<typeof Nav.Root>, \"orientation\">;\n\n/**\n * The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see\n * `NavBar.Mobile`). A menu opens on click, Enter, Space or ↓ — or when the pointer rests on its trigger (hover intent,\n * `delayDuration`, 200 ms): passing over the bar opens nothing. While a menu is open the light stays on its trigger;\n * moving on to a plain link closes the menu, so the bar never shows two current items. A click outside or Escape closes.\n */\nexport function NavBarItems({ className, children, value: valueProp, defaultValue, onValueChange, delayDuration = 200, ...props }: NavBarItemsProps) {\n  const { label } = useNavBar();\n  const [inner, setInner] = React.useState(defaultValue ?? \"\");\n  const value = valueProp ?? inner;\n  const setValue = React.useCallback(\n    (next: string) => {\n      setInner(next);\n      onValueChange?.(next);\n    },\n    [onValueChange],\n  );\n  const items = React.useMemo(() => ({ close: () => setValue(\"\") }), [setValue]);\n  const { ref, handlers } = useSlidingIndicator<HTMLUListElement>({\n    item: \"[data-nav-item]\",\n    active: \"[data-nav-item][data-active]\",\n    prefer: \"[data-nav-item][data-state=open]\",\n    follow: true,\n  });\n  const root = React.useRef<HTMLElement>(null);\n  const viewport = React.useRef<HTMLDivElement>(null);\n  // The open panel sits under its trigger and stays inside the page (collision): measured when a menu opens, when\n  // the panel changes size (another menu) and when the window does.\n  React.useLayoutEffect(() => {\n    const panel = viewport.current;\n    const nav = root.current;\n    if (!panel || !nav || !value) return;\n    const place = () => {\n      const trigger = nav.querySelector<HTMLElement>(\"[data-nav-item][data-state=open]\");\n      const width = Number.parseFloat(panel.style.getPropertyValue(\"--radix-navigation-menu-viewport-width\"));\n      if (!trigger || !Number.isFinite(width)) return;\n      const left = `${placePanel({ trigger: trigger.getBoundingClientRect().left, root: nav.getBoundingClientRect().left, panel: width, window: document.documentElement.clientWidth })}px`;\n      if (panel.style.getPropertyValue(\"--kz-menu-left\") !== left) panel.style.setProperty(\"--kz-menu-left\", left);\n    };\n    place();\n    const watch = new MutationObserver(place);\n    watch.observe(panel, { attributes: true, attributeFilter: [\"style\"] });\n    window.addEventListener(\"resize\", place);\n    return () => {\n      watch.disconnect();\n      window.removeEventListener(\"resize\", place);\n    };\n  }, [value]);\n  return (\n    <ItemsContext.Provider value={items}>\n      <Nav.Root ref={root} aria-label={label} className={s.items({ className })} value={value} onValueChange={setValue} delayDuration={delayDuration} {...props}>\n        <Nav.List ref={ref} className={s.list()} {...handlers}>\n          {children}\n        </Nav.List>\n        <Nav.Viewport ref={viewport} className={s.viewport()} />\n      </Nav.Root>\n    </ItemsContext.Provider>\n  );\n}\n\nexport type NavBarLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"active\"> & {\n  /** The current page: `aria-current=\"page\"`, and the light rests on it. */\n  active?: boolean;\n  /** Classes on the list item around the link (to show it from a breakpoint only). */\n  itemClassName?: string;\n};\n\n/** A link of the bar. `asChild` renders your router's `<Link>`. */\nexport function NavBarLink({ active, className, itemClassName, onPointerEnter, ...props }: NavBarLinkProps) {\n  const { close } = React.useContext(ItemsContext);\n  return (\n    <Nav.Item className={itemClassName}>\n      <Nav.Link\n        data-nav-item=\"\"\n        data-active={active ? \"\" : undefined}\n        active={active}\n        aria-current={active ? \"page\" : undefined}\n        className={s.item({ className })}\n        onPointerEnter={(e) => {\n          onPointerEnter?.(e);\n          close();\n        }}\n        {...props}\n      />\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuProps = Omit<React.ComponentProps<typeof Nav.Item>, \"children\"> & {\n  /** The trigger's words (“Products”) — passed translated. */\n  label: string;\n  /** The current page is inside this menu: the light rests on its trigger. */\n  active?: boolean;\n  /** The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid. */\n  children: React.ReactNode;\n  /**\n   * Columns of the panel.\n   * @default 1\n   */\n  columns?: 1 | 2;\n  /**\n   * A section with this many links or fewer needs no hidden list: they sit in the bar as plain links (the active one\n   * marked, no dropdown, `label` unused on the desktop). Above it, a dropdown. `0` always makes a dropdown.\n   * @default 3\n   */\n  inlineUpTo?: number;\n  /**\n   * From which breakpoint the inline links stand in the bar. Below it (between the phone panel at `md` and this\n   * breakpoint) the section is the dropdown, so long labels never overflow a tablet-width bar. `md` inlines as soon as\n   * the bar is shown.\n   * @default \"lg\"\n   */\n  inlineFrom?: \"md\" | \"lg\" | \"xl\";\n};\n\n// Static class names (Tailwind reads them at build time).\nconst INLINE_HIDE = { md: \"\", lg: \"max-lg:hidden\", xl: \"max-xl:hidden\" } as const;\nconst DROPDOWN_HIDE = { md: \"\", lg: \"lg:hidden\", xl: \"xl:hidden\" } as const;\n\n/**\n * A menu of the bar: its trigger, and its links in a panel that opens under the bar. A menu of `inlineUpTo` links or\n * fewer (3 by default) is not a menu at all: its links stand in the bar, each with its active state — a hidden list of\n * three is one click more for nothing. The phone's panel groups them as usual (`NavBar.MobileGroup`).\n */\nexport function NavBarMenu({ label, active, columns = 1, inlineUpTo = 3, inlineFrom = \"lg\", children, className, ...props }: NavBarMenuProps) {\n  const links = React.Children.toArray(children);\n  const dropdown = (hide: string) => (\n    <Nav.Item className={cn(hide, className)} {...props}>\n      <Nav.Trigger data-nav-item=\"\" data-active={active ? \"\" : undefined} className={cn(s.item(), \"group/trigger\")}>\n        {label}\n        <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </Nav.Trigger>\n      <Nav.Content className={cn(s.panel(), columns === 2 && s.panelWide())}>{children}</Nav.Content>\n    </Nav.Item>\n  );\n  const inline = links.length > 0 && links.length <= inlineUpTo && links.every((c) => React.isValidElement(c) && c.type === NavBarMenuLink);\n  if (inline) {\n    return (\n      <>\n        {inlineFrom !== \"md\" && dropdown(DROPDOWN_HIDE[inlineFrom])}\n        {links.map((link) => {\n          const { title, href, active: here, asChild, children: child, icon: _icon, description: _description, className: linkClass, ...rest } = (link as React.ReactElement<NavBarMenuLinkProps>).props;\n          return (\n            <NavBarLink key={(link as React.ReactElement).key} asChild={asChild} href={asChild ? undefined : href} active={here} className={linkClass} itemClassName={INLINE_HIDE[inlineFrom]} {...rest}>\n              {asChild && React.isValidElement<{ children?: React.ReactNode }>(child) ? React.cloneElement(child, undefined, title) : title}\n            </NavBarLink>\n          );\n        })}\n      </>\n    );\n  }\n  return dropdown(\"\");\n}\n\nexport type NavBarMenuLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"title\" | \"active\"> & {\n  /** The link's name — passed translated. */\n  title: string;\n  /** One line under it — passed translated. */\n  description?: string;\n  /** An icon (a signature icon of `@krizaka/icons`: its node lights up on hover). */\n  icon?: React.ReactNode;\n  /** The current page. */\n  active?: boolean;\n};\n\n/** A link inside a menu: an icon, a name and a line of text. */\nexport function NavBarMenuLink({ title, description, icon, active, href, className, asChild, children, ...props }: NavBarMenuLinkProps) {\n  const body = (\n    <>\n      {icon && <span className={s.menuIcon()}>{icon}</span>}\n      <span className=\"min-w-0 flex-1\">\n        <span className={s.menuTitle()}>{title}</span>\n        {description && <span className={s.menuText()}>{description}</span>}\n      </span>\n    </>\n  );\n  return (\n    <Nav.Link asChild={asChild} href={asChild ? undefined : href} active={active} aria-current={active ? \"page\" : undefined} data-active={active ? \"\" : undefined} className={s.menuLink({ className })} {...props}>\n      {asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? React.cloneElement(children, undefined, body) : body}\n    </Nav.Link>\n  );\n}\n\n/** The right side: search, theme, language, the call to action. */\nexport function NavBarActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.actions({ className })} {...props} />;\n}\n\nexport type NavBarMobileProps = React.ComponentProps<\"nav\"> & {\n  /** The toggle's name when closed (“Open the menu”) — passed translated. */\n  openLabel: string;\n  /** The toggle's name when open (“Close the menu”) — passed translated. */\n  closeLabel: string;\n};\n\n/**\n * Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`), grouped like the bar's menus\n * (`NavBar.MobileGroup`). A disclosure: Escape, a click on a link or a press outside close it; Escape returns the focus\n * to the toggle.\n */\nexport function NavBarMobile({ openLabel, closeLabel, className, children, ...props }: NavBarMobileProps) {\n  const { label, open, setOpen, panelId } = useNavBar();\n  const toggle = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      setOpen(false);\n      toggle.current?.focus();\n    };\n    // A press outside the panel and its toggle closes it (the page under it stays usable).\n    const onPress = (e: PointerEvent) => {\n      const target = e.target as Node | null;\n      if (!target || toggle.current?.contains(target) || document.getElementById(panelId)?.contains(target)) return;\n      setOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKey);\n    document.addEventListener(\"pointerdown\", onPress);\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.removeEventListener(\"pointerdown\", onPress);\n    };\n  }, [open, setOpen, panelId]);\n  return (\n    <>\n      <button ref={toggle} type=\"button\" aria-expanded={open} aria-controls={panelId} aria-label={open ? closeLabel : openLabel} onClick={() => setOpen(!open)} className={s.toggle()}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4.5 w-4.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          {open ? <path d=\"M18 6 6 18M6 6l12 12\" /> : <path d=\"M4 7h16M4 12h16M4 17h10\" />}\n        </svg>\n      </button>\n      {open && (\n        <nav\n          id={panelId}\n          aria-label={label}\n          className={s.mobile({ className })}\n          onClick={(e) => {\n            if ((e.target as Element).closest(\"a\")) setOpen(false);\n          }}\n          {...props}\n        >\n          <MobileContext.Provider value>{children}</MobileContext.Provider>\n        </nav>\n      )}\n    </>\n  );\n}\n\nexport type NavBarMobileGroupProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The group's heading — the same words as the bar's menu (“Product”) — passed translated. */\n  label: string;\n};\n\n/** A group of the mobile panel: the links of one of the bar's menus under its name, in the same order. */\nexport function NavBarMobileGroup({ label, className, children, ...props }: NavBarMobileGroupProps) {\n  const id = React.useId();\n  return (\n    <div role=\"group\" aria-labelledby={id} className={s.mobileGroup({ className })} {...props}>\n      <p id={id} className={s.mobileGroupTitle()}>\n        {label}\n      </p>\n      {children}\n    </div>\n  );\n}\n\nexport type NavBarMobileLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the mobile panel. */\nexport function NavBarMobileLink({ active, asChild, className, ...props }: NavBarMobileLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.mobileLink({ className })} {...props} />;\n}\n\n\nconst tagTone = {\n  upcoming: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40\",\n  construction: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40\",\n  development: \"bg-surface-3 text-fg ring-1 ring-inset ring-border-strong\",\n  current: \"bg-surface-3 text-fg-secondary\",\n};\n\n/** A site's name and its tags: status when not released, “You are here” on the current one. */\nfunction FamilyName({ site, current, labels }: { site: Site; current: boolean; labels: FamilyLabels }) {\n  return (\n    <span className={s.familyName()}>\n      {site.name}\n      {site.status !== \"released\" && <span className={cn(s.familyTag(), tagTone[site.status])}>{labels.status[site.status]}</span>}\n      {current && <span className={cn(s.familyTag(), tagTone.current)}>{labels.current}</span>}\n    </span>\n  );\n}\n\nexport type NavBarFamilyProps = {\n  /** The site this bar belongs to (`@krizaka/ui/sites`): marked in the family, `aria-current=\"true\"`. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** Opens the panel at first render (a story, a screenshot). */\n  defaultOpen?: boolean;\n  /** Classes of the switcher (or, inside `NavBar.Mobile`, of the family's group). */\n  className?: string;\n};\n\n/**\n * @deprecated No site carries the family switcher any more (2026-10-22): krizaka.com is the only way back between the Krizaka sites, through the footer's « A Krizaka project » line. Removed in the next minor; `krizaka/no-family-switcher` refuses it.\n *\n * The family switcher, attached to the brand (place it right after `NavBar.Brand`): a chevron that opens every site of\n * Krizaka grouped — Krizaka · Products · Open source · GitHub — the current one marked. It opens on click, Enter, Space\n * or ↓ (never on hover); ↑ ↓ walk the sites, Escape closes and returns the focus. Hidden below `md`: place a second\n * `NavBar.Family` as the last child of `NavBar.Mobile`, where it renders as the panel's last group.\n */\nexport function NavBarFamily({ current, labels = familyLabels.en, defaultOpen, className }: NavBarFamilyProps) {\n  const inMobile = React.useContext(MobileContext);\n  const id = React.useId();\n  const groups = sitesByGroup();\n  if (inMobile) {\n    return (\n      <div role=\"group\" aria-labelledby={`${id}-family`} className={s.mobileFamily({ className })}>\n        <p id={`${id}-family`} className={s.familyGroupTitle()}>\n          {labels.family}\n        </p>\n        {groups.map(({ group, sites }) => (\n          <div key={group}>\n            {/* The company's own group is named like the family itself: its heading would repeat the panel's. */}\n            {group !== \"krizaka\" && (\n              <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                {labels.groups[group]}\n              </p>\n            )}\n            <ul aria-labelledby={group !== \"krizaka\" ? `${id}-${group}` : `${id}-family`} className=\"grid gap-0.5\">\n              {sites.map((site) => (\n                <li key={site.id}>\n                  <a href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.mobileFamilyLink()}>\n                    <span className={s.familyMark()}>\n                      <FamilyMark mark={site.mark} size={24} />\n                    </span>\n                    <FamilyName site={site} current={site.id === current} labels={labels} />\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n    );\n  }\n  // Click only: a pointer passing over the brand never opens the family (Radix opens its menus on hover by default).\n  const noHover = (e: React.PointerEvent) => e.preventDefault();\n  const columns = [groups.filter((g) => g.group === \"krizaka\" || g.group === \"products\"), groups.filter((g) => g.group === \"open-source\" || g.group === \"github\")];\n  return (\n    <Nav.Root aria-label={labels.family} defaultValue={defaultOpen ? \"family\" : undefined} className={s.family({ className })}>\n      <Nav.List className=\"flex\">\n        <Nav.Item value=\"family\">\n          <Nav.Trigger aria-label={labels.family} onPointerMove={noHover} onPointerLeave={noHover} className={s.familyTrigger()}>\n            <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n              <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n          </Nav.Trigger>\n          <Nav.Content onPointerLeave={noHover} className={s.familyPanel()}>\n            {columns.map((column, i) => (\n              <div key={i} className=\"grid content-start gap-3\">\n                {column.map(({ group, sites }) => (\n                  <div key={group}>\n                    <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                      {labels.groups[group]}\n                    </p>\n                    <ul aria-labelledby={`${id}-${group}`} className=\"grid gap-0.5\">\n                      {sites.map((site) => (\n                        <li key={site.id}>\n                          <Nav.Link href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.familyLink()}>\n                            <span className={s.familyMark()}>\n                              <FamilyMark mark={site.mark} size={28} />\n                            </span>\n                            <span className=\"min-w-0\">\n                              <FamilyName site={site} current={site.id === current} labels={labels} />\n                              <span className={s.familyText()}>{labels.descriptions[site.id]}</span>\n                            </span>\n                          </Nav.Link>\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n              </div>\n            ))}\n          </Nav.Content>\n        </Nav.Item>\n      </Nav.List>\n      <Nav.Viewport onPointerLeave={noHover} className={s.familyViewport()} />\n    </Nav.Root>\n  );\n}\n\nexport type NavBarBadgeProps = React.ComponentProps<\"span\"> & {\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n};\n\n/** A small mono badge beside the brand: the environment and the version (`DEV · v1.2.3`). Hidden below `sm`. */\nexport function NavBarBadge({ env, version, className, children, ...props }: NavBarBadgeProps) {\n  const parts = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean);\n  return (\n    <span className={s.badge({ className })} {...props}>\n      {parts.join(\" · \")}\n      {children}\n    </span>\n  );\n}\n\nexport type NavBarLanguageProps = Omit<LanguageSwitchProps, \"variant\">;\n\n/**\n * The language switch, the same on every site: in the bar a globe and the current code (FR) opening a short menu of\n * the languages by their own names; inside `NavBar.Mobile` the same languages as a row in the preferences.\n */\nexport function NavBarLanguage(props: NavBarLanguageProps) {\n  const inMobile = React.useContext(MobileContext);\n  return <LanguageSwitch variant={inMobile ? \"inline\" : \"menu\"} {...props} />;\n}\n\nexport type NavBarMobilePreferencesProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The group's heading (“Preferences”) — passed translated. */\n  label: string;\n};\n\n/** The last group of the mobile panel: the preferences (theme, `NavBar.Language`), in a row under their heading. */\nexport function NavBarMobilePreferences({ label, className, children, ...props }: NavBarMobilePreferencesProps) {\n  const id = React.useId();\n  return (\n    <div role=\"group\" aria-labelledby={id} className={s.mobileGroup({ className })} {...props}>\n      <p id={id} className={s.mobileGroupTitle()}>\n        {label}\n      </p>\n      <div className=\"flex flex-wrap items-center gap-2 px-3 py-1\">{children}</div>\n    </div>\n  );\n}\n\nexport type NavBarRepoProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The repository the site is built from. */\n  href: string;\n  /** The link's accessible name (“Source on GitHub”) — passed translated. */\n  label: string;\n};\n\n/** The site's repository on GitHub, an icon link of `NavBar.Actions`. */\nexport function NavBarRepo({ label, className, ...props }: NavBarRepoProps) {\n  return (\n    <a aria-label={label} className={s.repo({ className })} {...props}>\n      <GitHubGlyph size={18} />\n    </a>\n  );\n}\n\n/**\n * `NavBar.Root/Brand/Family/Badge/Items/Link/Menu/MenuLink/Actions/Repo/Language/Mobile/MobileGroup/MobilePreferences/MobileLink` — the Krizaka navigation bar,\n * the same on every site of the family: floating, tightening on scroll, the family switcher on the brand, one light\n * gliding between its items, accessible menus, a mobile panel.\n */\nexport const NavBar = {\n  Root: NavBarRoot,\n  Brand: NavBarBrand,\n  Family: NavBarFamily,\n  Badge: NavBarBadge,\n  Items: NavBarItems,\n  Link: NavBarLink,\n  Menu: NavBarMenu,\n  MenuLink: NavBarMenuLink,\n  Actions: NavBarActions,\n  Repo: NavBarRepo,\n  Language: NavBarLanguage,\n  Mobile: NavBarMobile,\n  MobilePreferences: NavBarMobilePreferences,\n  MobileGroup: NavBarMobileGroup,\n  MobileLink: NavBarMobileLink,\n};\n","/**\n * Where a menu panel of the bar sits: its left edge under its trigger's, pushed back inside the page when it would run\n * past the right edge, never closer to the left edge than the gutter. All values are pixels of the page (a bounding\n * rect's `left`, a width), the result is the panel's `left` relative to the bar's navigation (`root`). Pure, so a\n * viewport of 360 px and one of 1280 px are tested without a browser.\n */\nexport interface PlacePanel {\n  /** The trigger's left edge. */\n  trigger: number;\n  /** The navigation's left edge (the panel is positioned inside it). */\n  root: number;\n  /** The panel's width. */\n  panel: number;\n  /** The window's width. */\n  window: number;\n  /**\n   * The space kept between the panel and the window's edges.\n   * @default 16\n   */\n  gutter?: number;\n}\n\nexport function placePanel({ trigger, root, panel, window, gutter = 16 }: PlacePanel): number {\n  const wanted = trigger - root;\n  const farthest = window - gutter - panel - root;\n  const nearest = gutter - root;\n  return Math.round(Math.max(nearest, Math.min(wanted, farthest)));\n}\n","// Client (the Button). The right side of a product's bar, decided once for every product (« the objective is to use the app,\n// not to talk to us »): the primary action is using the app — « Sign in » while sign-up is closed, « Try » once it opens —\n// never a duplicate « Sign in » beside it, never « Contact » (that is a plain link in the footer).\nimport type * as React from \"react\";\n\nimport { Button } from \"../button/button\";\n\n/** The two ways into a product. */\nexport const ProductBarAction = { SignIn: \"sign-in\", Try: \"try\" } as const;\nexport type ProductBarAction = (typeof ProductBarAction)[keyof typeof ProductBarAction];\n\nexport interface ProductBarState {\n  /** Whether the product accepts new accounts (its `signupOpen` setting). */\n  signupOpen: boolean;\n  /** Whether the product has a « try it » action (a free first audit, a founder offer). */\n  hasTry: boolean;\n}\n\n/** What the bar shows: one primary, and « Sign in » beside it only when it is not the primary. */\nexport function productBarActions({ signupOpen, hasTry }: ProductBarState): { primary: ProductBarAction; secondary: ProductBarAction | null } {\n  return signupOpen && hasTry ? { primary: ProductBarAction.Try, secondary: ProductBarAction.SignIn } : { primary: ProductBarAction.SignIn, secondary: null };\n}\n\nexport interface ProductBarLink {\n  href: string;\n  /** Passed translated. */\n  label: string;\n}\n\nexport type ProductBarActionsProps = {\n  /** Where « Sign in » leads, and its words. */\n  signIn: ProductBarLink;\n  /** « Try for free » (the first audit is free), the founder offer: absent when the product has none. */\n  tryIt?: ProductBarLink;\n  /** Whether the product accepts new accounts (its `signupOpen` setting): « Try » is the primary action only then. */\n  signupOpen: boolean;\n  /** The app's link component (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /**\n   * `bar` (from `md`, the buttons of the bar) or `panel` (the mobile panel: full-width, the primary last).\n   * @default \"bar\"\n   */\n  placement?: \"bar\" | \"panel\";\n};\n\n/** The product bar's actions: use the app. Put it in `NavBar.Actions` (`placement=\"bar\"`) or in `NavBar.Mobile` (`placement=\"panel\"`). */\nexport function ProductBarActions({ signIn, tryIt, signupOpen, linkAs: Link = \"a\", placement = \"bar\" }: ProductBarActionsProps) {\n  const { primary, secondary } = productBarActions({ signupOpen, hasTry: Boolean(tryIt) });\n  const link = (kind: ProductBarAction) => (kind === ProductBarAction.Try && tryIt ? tryIt : signIn);\n  const panel = placement === \"panel\";\n  const button = (kind: ProductBarAction, variant: \"primary\" | \"ghost\") => (\n    <Button key={kind} asChild variant={variant} size={panel ? \"md\" : \"sm\"} className={panel ? (variant === \"primary\" ? \"mt-2 w-full font-bold\" : \"w-full\") : variant === \"primary\" ? \"ml-1 hidden font-bold md:inline-flex\" : \"hidden md:inline-flex\"}>\n      <Link href={link(kind).href}>{link(kind).label}</Link>\n    </Button>\n  );\n  return (\n    <>\n      {secondary ? button(secondary, \"ghost\") : null}\n      {button(primary, \"primary\")}\n    </>\n  );\n}\n"],"mappings":"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","names":["window","Fragment","jsx","jsxs"]}

package/dist/vertical-video.d.ts

@@ -43,30 +43,12 @@ interface VerticalVideoLabels {
     actions: string;
 }
 declare const verticalVideoLabels: VerticalVideoLabels;
-interface VerticalVideoCreator {
-    name: string;
-    /** Their portrait. */
-    avatarSrc?: string;
-    /** The seal's words ("Verified"): shows the seal beside the name. */
-    verifiedLabel?: string;
-}
-interface VerticalVideoProps extends Omit<React.ComponentProps<"article">, "title" | "children"> {
+/** The props both platforms read: the same content, counts, state, callbacks and slots. */
+interface VerticalVideoShared {
     /** The video's accessible name ("Video: Night shoot, part 2"), passed translated. */
     title: string;
-    /** The clip — absent, the poster alone shows (MP4 or WebM; an HLS address only in Safari — use the player of `@krizaka/ui/video-player` for HLS). */
-    src?: string;
-    /** The picture until the first frame, and under reduced motion. */
-    poster?: string;
     /** Plays while `true`; a `ShortFeed` passes it for the slide in view. Default `true`. */
     active?: boolean;
-    /** The next slide's: `auto` loads it ahead, `none` waits. Default `metadata`. */
-    preload?: "none" | "metadata" | "auto";
-    /** Plays again at the end. Default `true`. */
-    loop?: boolean;
-    /** Starts muted (autoplay needs it). Default `true`. */
-    muted?: boolean;
-    /** Who made it: name, portrait, the seal's words. */
-    creator: VerticalVideoCreator;
     /** A pill beside the name: "AI-GENERATED" — said on the picture, never only in a page's footnote. */
     disclosure?: string;
     /** The caption: collapsed to two lines, expandable when long. */
@@ -101,16 +83,38 @@ interface VerticalVideoProps extends Omit<React.ComponentProps<"article">, "titl
     topStart?: React.ReactNode;
     /** Above the caption: a goal gauge, a challenge's progress. */
     aboveCaption?: React.ReactNode;
+    /** The locale of the counts. Default `en`. */
+    locale?: string;
+    /** Every word, passed translated. */
+    labels?: Partial<VerticalVideoLabels>;
+}
+
+interface VerticalVideoCreator {
+    name: string;
+    /** Their portrait. */
+    avatarSrc?: string;
+    /** The seal's words ("Verified"): shows the seal beside the name. */
+    verifiedLabel?: string;
+}
+interface VerticalVideoProps extends Omit<React.ComponentProps<"article">, "title" | "children">, VerticalVideoShared {
+    /** The clip — absent, the poster alone shows (MP4 or WebM; an HLS address only in Safari — use the player of `@krizaka/ui/video-player` for HLS). */
+    src?: string;
+    /** The picture until the first frame, and under reduced motion. */
+    poster?: string;
+    /** The next slide's: `auto` loads it ahead, `none` waits. Default `metadata`. */
+    preload?: "none" | "metadata" | "auto";
+    /** Plays again at the end. Default `true`. */
+    loop?: boolean;
+    /** Starts muted (autoplay needs it). Default `true`. */
+    muted?: boolean;
+    /** Who made it: name, portrait, the seal's words. */
+    creator: VerticalVideoCreator;
     /**
      * 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, fit, locale, labels: custom, className, onKeyDown, ...props }: VerticalVideoProps): React.JSX.Element;

package/dist/vertical-video.js

@@ -113,8 +113,7 @@ function VerifiedBadge({ label, showLabel, size = "md", onMedia, className, ...p
   ] });
 }
 
-// src/vertical-video/vertical-video.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+// src/vertical-video/model.ts
 var verticalVideoLabels = {
   play: "Play",
   pause: "Pause",
@@ -129,6 +128,9 @@ var verticalVideoLabels = {
   progress: "Progress",
   actions: "Actions"
 };
+
+// src/vertical-video/vertical-video.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var glyph = (d) => /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", className: "h-6 w-6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx3("path", { d }) });
 var HEART = "M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z";
 var COMMENT = "M4 5h16v11H9l-5 4z";

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  /**\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":";;;;;;;;;;;;;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;;;AD2FI,gBAAAC,MA2II,QAAAC,aA3IJ;AAxFG,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;AAyEA,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,MAAM;AAAA,EACN,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,YAAU;AAAA,MACV,WAAW,GAAG,2CAA2C,QAAQ,SAAS,mBAAmB,iBAAiB,2GAA2G,SAAS;AAAA,MAClO,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,mEACZ;AAAA;AAAA,UACD,gBAAAA,MAAC,OAAE,WAAU,2EACV;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","../src/vertical-video/model.ts"],"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\";\nimport { type VerticalVideoLabels, verticalVideoLabels, type VerticalVideoShared } from \"./model\";\n\nexport { type VerticalVideoLabels, verticalVideoLabels };\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\">, VerticalVideoShared {\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  /** 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  /**\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}\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","// Headless: what the web (`vertical-video.tsx`) and the native (`native/vertical-video.tsx`) VerticalVideo share — the words,\n// the content and the callbacks. Each platform adds its media (`src`/`poster` · `uri`/`posterUri`) and its frame.\nimport type * as React from \"react\";\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\n/** The props both platforms read: the same content, counts, state, callbacks and slots. */\nexport interface VerticalVideoShared {\n  /** The video's accessible name (\"Video: Night shoot, part 2\"), passed translated. */\n  title: string;\n  /** Plays while `true`; a `ShortFeed` passes it for the slide in view. Default `true`. */\n  active?: boolean;\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"],"mappings":"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","names":["React","jsx","jsx","jsxs","jsx","jsxs"]}