@krizaka/ui 3.23.0 → 3.25.0

package/dist/docs-nav.js

@@ -1,19 +1,6 @@
-// src/cn.ts
-import { clsx } from "clsx";
-import { cnMerge } from "tailwind-variants";
-var twMergeConfig = {
-  extend: {
-    classGroups: {
-      "bg-image": ["bg-sheen", "bg-fill-shade", "bg-halo"],
-      shadow: ["shadow-raised", "shadow-floating", "shadow-overlay", "shadow-glow", "shadow-glow-lg"],
-      "inset-shadow": ["inset-shadow-edge", "inset-shadow-edge-fill", "inset-shadow-well"]
-    }
-  }
-};
-var mergeConfig = { twMergeConfig };
-function cn(...inputs) {
-  return cnMerge(clsx(inputs))(mergeConfig) ?? "";
-}
+import {
+  cn
+} from "./chunk-KH3JOEPY.js";
 
 // src/docs-nav/docs-nav.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/docs-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cn.ts","../src/docs-nav/docs-nav.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnMerge, type TWMergeConfig } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * The preset's own utilities, told to the merge engine: the material (BRAND.md §6: `bg-sheen`, `bg-fill-shade`,\n * `bg-halo` are background images; `shadow-raised` · `-floating` · `-overlay` · `-glow` are shadows; `inset-shadow-edge`\n * · `-edge-fill` · `-well` are inset shadows). Unknown, tailwind-merge would take `bg-sheen` for a colour and drop the\n * `bg-surface-2` it lies on.\n */\nexport const twMergeConfig: TWMergeConfig = {\n  extend: {\n    classGroups: {\n      \"bg-image\": [\"bg-sheen\", \"bg-fill-shade\", \"bg-halo\"],\n      shadow: [\"shadow-raised\", \"shadow-floating\", \"shadow-overlay\", \"shadow-glow\", \"shadow-glow-lg\"],\n      \"inset-shadow\": [\"inset-shadow-edge\", \"inset-shadow-edge-fill\", \"inset-shadow-well\"],\n    },\n  },\n};\n\nconst mergeConfig = { twMergeConfig };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return cnMerge(clsx(inputs))(mergeConfig) ?? \"\";\n}\n\n","// Server-safe. The pages of a documentation, grouped: a quiet list of links, each group a native `details` (open when it\n// holds the current page), only the current page marked. No state: the app tells which page is current.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport type { LinkComponent } from \"../page-hero\";\n\nexport type DocsNavGroup = {\n  /** A stable key. */\n  id: string;\n  /** The group's name — one word or two. */\n  title: React.ReactNode;\n  /** Its pages: a short, one-line title each. */\n  items: readonly { href: string; label: React.ReactNode }[];\n};\n\nexport type DocsNavProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The navigation's accessible name (`Documentation`). */\n  label: string;\n  /** The groups, in order. */\n  groups: readonly DocsNavGroup[];\n  /** The `href` of the page being read. */\n  current?: string;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** The pages of the documentation in groups; the group of the current page is open, the others fold. */\nexport function DocsNav({ label, groups, current, linkAs, className, ...props }: DocsNavProps) {\n  const L = linkAs ?? \"a\";\n  return (\n    <nav aria-label={label} className={cn(\"flex flex-col gap-1 text-sm\", className)} {...props}>\n      {groups.map((g) => {\n        const open = g.items.some((i) => i.href === current) || !current;\n        return (\n          <details key={g.id} open={open} className=\"group py-1\">\n            <summary className=\"flex cursor-pointer list-none items-center justify-between rounded-md px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-fg-muted marker:content-none hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden\">\n              {g.title}\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\" className=\"h-3.5 w-3.5 fill-none stroke-current stroke-2 transition-transform group-open:rotate-180 motion-reduce:transition-none\">\n                <path d=\"m6 9 6 6 6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </summary>\n            <ul className=\"mt-1 flex flex-col gap-0.5 border-l border-border-subtle\">\n              {g.items.map((i) => (\n                <li key={i.href}>\n                  <L\n                    href={i.href}\n                    aria-current={i.href === current ? \"page\" : undefined}\n                    className=\"-ml-px block truncate border-l border-transparent px-3 py-1.5 text-fg-secondary no-underline transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-ring aria-[current=page]:border-accent aria-[current=page]:font-semibold aria-[current=page]:text-fg\"\n                  >\n                    {i.label}\n                  </L>\n                </li>\n              ))}\n            </ul>\n          </details>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAmC;AAUrC,IAAM,gBAA+B;AAAA,EAC1C,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,YAAY,CAAC,YAAY,iBAAiB,SAAS;AAAA,MACnD,QAAQ,CAAC,iBAAiB,mBAAmB,kBAAkB,eAAe,gBAAgB;AAAA,MAC9F,gBAAgB,CAAC,qBAAqB,0BAA0B,mBAAmB;AAAA,IACrF;AAAA,EACF;AACF;AAEA,IAAM,cAAc,EAAE,cAAc;AAS7B,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC,EAAE,WAAW,KAAK;AAC/C;;;ACIY,SAGI,KAHJ;AARL,SAAS,QAAQ,EAAE,OAAO,QAAQ,SAAS,QAAQ,WAAW,GAAG,MAAM,GAAiB;AAC7F,QAAM,IAAI,UAAU;AACpB,SACE,oBAAC,SAAI,cAAY,OAAO,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,OAClF,iBAAO,IAAI,CAAC,MAAM;AACjB,UAAM,OAAO,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,KAAK,CAAC;AACzD,WACE,qBAAC,aAAmB,MAAY,WAAU,cACxC;AAAA,2BAAC,aAAQ,WAAU,ySAChB;AAAA,UAAE;AAAA,QACH,oBAAC,SAAI,SAAQ,aAAY,eAAY,QAAO,WAAU,SAAQ,WAAU,0HACtE,8BAAC,UAAK,GAAE,gBAAe,eAAc,SAAQ,gBAAe,SAAQ,GACtE;AAAA,SACF;AAAA,MACA,oBAAC,QAAG,WAAU,4DACX,YAAE,MAAM,IAAI,CAAC,MACZ,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,EAAE;AAAA,UACR,gBAAc,EAAE,SAAS,UAAU,SAAS;AAAA,UAC5C,WAAU;AAAA,UAET,YAAE;AAAA;AAAA,MACL,KAPO,EAAE,IAQX,CACD,GACH;AAAA,SAnBY,EAAE,EAoBhB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/docs-nav/docs-nav.tsx"],"sourcesContent":["// Server-safe. The pages of a documentation, grouped: a quiet list of links, each group a native `details` (open when it\n// holds the current page), only the current page marked. No state: the app tells which page is current.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport type { LinkComponent } from \"../page-hero\";\n\nexport type DocsNavGroup = {\n  /** A stable key. */\n  id: string;\n  /** The group's name — one word or two. */\n  title: React.ReactNode;\n  /** Its pages: a short, one-line title each. */\n  items: readonly { href: string; label: React.ReactNode }[];\n};\n\nexport type DocsNavProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The navigation's accessible name (`Documentation`). */\n  label: string;\n  /** The groups, in order. */\n  groups: readonly DocsNavGroup[];\n  /** The `href` of the page being read. */\n  current?: string;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** The pages of the documentation in groups; the group of the current page is open, the others fold. */\nexport function DocsNav({ label, groups, current, linkAs, className, ...props }: DocsNavProps) {\n  const L = linkAs ?? \"a\";\n  return (\n    <nav aria-label={label} className={cn(\"flex flex-col gap-1 text-sm\", className)} {...props}>\n      {groups.map((g) => {\n        const open = g.items.some((i) => i.href === current) || !current;\n        return (\n          <details key={g.id} open={open} className=\"group py-1\">\n            <summary className=\"flex cursor-pointer list-none items-center justify-between rounded-md px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-fg-muted marker:content-none hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden\">\n              {g.title}\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\" className=\"h-3.5 w-3.5 fill-none stroke-current stroke-2 transition-transform group-open:rotate-180 motion-reduce:transition-none\">\n                <path d=\"m6 9 6 6 6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </summary>\n            <ul className=\"mt-1 flex flex-col gap-0.5 border-l border-border-subtle\">\n              {g.items.map((i) => (\n                <li key={i.href}>\n                  <L\n                    href={i.href}\n                    aria-current={i.href === current ? \"page\" : undefined}\n                    className=\"-ml-px block truncate border-l border-transparent px-3 py-1.5 text-fg-secondary no-underline transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-ring aria-[current=page]:border-accent aria-[current=page]:font-semibold aria-[current=page]:text-fg\"\n                  >\n                    {i.label}\n                  </L>\n                </li>\n              ))}\n            </ul>\n          </details>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";;;;;AAoCY,SAGI,KAHJ;AARL,SAAS,QAAQ,EAAE,OAAO,QAAQ,SAAS,QAAQ,WAAW,GAAG,MAAM,GAAiB;AAC7F,QAAM,IAAI,UAAU;AACpB,SACE,oBAAC,SAAI,cAAY,OAAO,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,OAClF,iBAAO,IAAI,CAAC,MAAM;AACjB,UAAM,OAAO,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,KAAK,CAAC;AACzD,WACE,qBAAC,aAAmB,MAAY,WAAU,cACxC;AAAA,2BAAC,aAAQ,WAAU,ySAChB;AAAA,UAAE;AAAA,QACH,oBAAC,SAAI,SAAQ,aAAY,eAAY,QAAO,WAAU,SAAQ,WAAU,0HACtE,8BAAC,UAAK,GAAE,gBAAe,eAAc,SAAQ,gBAAe,SAAQ,GACtE;AAAA,SACF;AAAA,MACA,oBAAC,QAAG,WAAU,4DACX,YAAE,MAAM,IAAI,CAAC,MACZ,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,EAAE;AAAA,UACR,gBAAc,EAAE,SAAS,UAAU,SAAS;AAAA,UAC5C,WAAU;AAAA,UAET,YAAE;AAAA;AAAA,MACL,KAPO,EAAE,IAQX,CACD,GACH;AAAA,SAnBY,EAAE,EAoBhB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/dropdown-menu.d.ts

@@ -55,6 +55,12 @@ type DropdownMenuItemProps = React.ComponentProps<typeof DropdownMenu$1.Item> &
 declare function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps): React.JSX.Element;
 /** A toggled option: `checked` + `onCheckedChange`. */
 declare function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): React.JSX.Element;
+/** A submenu's trigger: an item that opens `DropdownMenu.SubContent`, with a chevron. */
+declare function DropdownMenuSubTrigger({ className, children, ...props }: React.ComponentProps<typeof DropdownMenu$1.SubTrigger>): React.JSX.Element;
+/** The submenu's panel (same material as the menu). */
+declare function DropdownMenuSubContent({ sideOffset, collisionPadding, className, ...props }: React.ComponentProps<typeof DropdownMenu$1.SubContent>): React.JSX.Element;
+/** One choice among several (`DropdownMenu.RadioGroup` holds the value): a language, a sort order. */
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): React.JSX.Element;
 declare function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Label>): React.JSX.Element;
 declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Separator>): React.JSX.Element;
 /** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */
@@ -67,6 +73,11 @@ declare const DropdownMenu: {
     Label: typeof DropdownMenuLabel;
     Separator: typeof DropdownMenuSeparator;
     Group: React.ForwardRefExoticComponent<DropdownMenu$1.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Sub: React.FC<DropdownMenu$1.DropdownMenuSubProps>;
+    SubTrigger: typeof DropdownMenuSubTrigger;
+    SubContent: typeof DropdownMenuSubContent;
+    RadioGroup: React.ForwardRefExoticComponent<DropdownMenu$1.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+    RadioItem: typeof DropdownMenuRadioItem;
 };
 
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, menu };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSubContent, DropdownMenuSubTrigger, menu };

package/dist/dropdown-menu.js

@@ -12,7 +12,7 @@ import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
 var menu = tv({
   slots: {
-    content: cn(floating, "min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)"),
+    content: cn(floating, "min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto overflow-x-hidden overscroll-contain p-1 origin-(--radix-dropdown-menu-content-transform-origin)"),
     item: "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-fg-secondary",
     indicator: "ml-auto flex h-4 w-4 items-center justify-center text-fg-accent",
     label: "px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
@@ -38,6 +38,21 @@ function DropdownMenuCheckboxItem({ className, children, ...props }) {
     /* @__PURE__ */ jsx(MenuPrimitive.ItemIndicator, { className: s.indicator(), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) })
   ] });
 }
+function DropdownMenuSubTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(MenuPrimitive.SubTrigger, { className: s.item({ className: cn("data-[state=open]:bg-surface-3", className) }), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx("svg", { className: "ml-auto !h-4 !w-4 text-fg-secondary", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
+  ] });
+}
+function DropdownMenuSubContent({ sideOffset = 4, collisionPadding = 8, className, ...props }) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenuPrimitive.SubContent, { sideOffset, collisionPadding, className: s.content({ className: cn("max-h-(--radix-dropdown-menu-content-available-height)", className) }), ...props }) });
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(MenuPrimitive.RadioItem, { className: s.item({ className }), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(MenuPrimitive.ItemIndicator, { className: s.indicator(), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) })
+  ] });
+}
 function DropdownMenuLabel({ className, ...props }) {
   return /* @__PURE__ */ jsx(MenuPrimitive.Label, { className: s.label({ className }), ...props });
 }
@@ -52,7 +67,12 @@ var DropdownMenu = {
   CheckboxItem: DropdownMenuCheckboxItem,
   Label: DropdownMenuLabel,
   Separator: DropdownMenuSeparator,
-  Group: MenuPrimitive.Group
+  Group: MenuPrimitive.Group,
+  Sub: MenuPrimitive.Sub,
+  SubTrigger: DropdownMenuSubTrigger,
+  SubContent: DropdownMenuSubContent,
+  RadioGroup: MenuPrimitive.RadioGroup,
+  RadioItem: DropdownMenuRadioItem
 };
 export {
   DropdownMenu,
@@ -60,7 +80,10 @@ export {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   menu
 };
 //# sourceMappingURL=dropdown-menu.js.map

package/dist/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight\n    // carry the danger fill.\n    tone: { default: {}, danger: { item: \"text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"],"mappings":";;;;;;;;;AACA,SAAS,gBAAgB,qBAAqB;AAE9C,SAAS,UAAU;AAiCb,cAkBF,YAlBE;AA5BC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,SAAS,GAAG,UAAU,6IAA6I;AAAA,IACnK,MACE;AAAA,IAGF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA;AAAA;AAAA,IAGR,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAE,MAAM,mEAAmE,EAAE;AAAA,EAC5G;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AACD,IAAM,IAAI,KAAK;AAOR,SAAS,oBAAoB,EAAE,aAAa,GAAG,QAAQ,OAAO,mBAAmB,GAAG,WAAW,WAAW,GAAG,MAAM,GAA6B;AACrJ,SACE,oBAAC,cAAc,QAAd,EAAqB,WACpB,8BAAC,cAAc,SAAd,EAAsB,YAAwB,OAAc,kBAAoC,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GACnJ;AAEJ;AAQO,SAAS,iBAAiB,EAAE,MAAM,WAAW,GAAG,MAAM,GAA0B;AACrF,SAAO,oBAAC,cAAc,MAAd,EAAmB,aAAW,QAAQ,WAAW,WAAW,KAAK,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrH;AAGO,SAAS,yBAAyB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA4D;AACnI,SACE,qBAAC,cAAc,cAAd,EAA2B,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/D;AAAA;AAAA,IACD,oBAAC,cAAc,eAAd,EAA4B,WAAW,EAAE,UAAU,GAClD,8BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAE,mBAAkB,GAC5B,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAqD;AAC3G,SAAO,oBAAC,cAAc,OAAd,EAAoB,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC5E;AAEO,SAAS,sBAAsB,EAAE,WAAW,GAAG,MAAM,GAAyD;AACnH,SAAO,oBAAC,cAAc,WAAd,EAAwB,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACpF;AAGO,IAAM,eAAe;AAAA,EAC1B,MAAM,cAAc;AAAA,EACpB,SAAS,cAAc;AAAA,EACvB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO,cAAc;AACvB;","names":[]}
+{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto overflow-x-hidden overscroll-contain p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight\n    // carry the danger fill.\n    tone: { default: {}, danger: { item: \"text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A submenu's trigger: an item that opens `DropdownMenu.SubContent`, with a chevron. */\nexport function DropdownMenuSubTrigger({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.SubTrigger>) {\n  return (\n    <MenuPrimitive.SubTrigger className={s.item({ className: cn(\"data-[state=open]:bg-surface-3\", className) })} {...props}>\n      {children}\n      <svg className=\"ml-auto !h-4 !w-4 text-fg-secondary\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </MenuPrimitive.SubTrigger>\n  );\n}\n\n/** The submenu's panel (same material as the menu). */\nexport function DropdownMenuSubContent({ sideOffset = 4, collisionPadding = 8, className, ...props }: React.ComponentProps<typeof MenuPrimitive.SubContent>) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.SubContent sideOffset={sideOffset} collisionPadding={collisionPadding} className={s.content({ className: cn(\"max-h-(--radix-dropdown-menu-content-available-height)\", className) })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\n/** One choice among several (`DropdownMenu.RadioGroup` holds the value): a language, a sort order. */\nexport function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.RadioItem>) {\n  return (\n    <MenuPrimitive.RadioItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n  Sub: MenuPrimitive.Sub,\n  SubTrigger: DropdownMenuSubTrigger,\n  SubContent: DropdownMenuSubContent,\n  RadioGroup: MenuPrimitive.RadioGroup,\n  RadioItem: DropdownMenuRadioItem,\n};\n"],"mappings":"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","names":[]}

package/dist/filter-bar.js

@@ -5,7 +5,7 @@ import {
   filterBar,
   readFilterParams,
   writeFilterParams
-} from "./chunk-CEJDH6SA.js";
+} from "./chunk-2PNLHZLT.js";
 import "./chunk-7UCPGXKN.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";

package/dist/genui.js

@@ -7,12 +7,12 @@ import {
 } from "./chunk-MQPC3P4T.js";
 import {
   DataTable
-} from "./chunk-F7FVPPBB.js";
+} from "./chunk-LYOPPBMC.js";
 import "./chunk-7Z4KHPFC.js";
 import "./chunk-JXLDUDTD.js";
 import "./chunk-DZU6RMYD.js";
 import "./chunk-KVDB4GXV.js";
-import "./chunk-CEJDH6SA.js";
+import "./chunk-2PNLHZLT.js";
 import "./chunk-7UCPGXKN.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";

package/dist/index.d.ts

@@ -55,6 +55,20 @@ declare function ProductLogo({ id, ...props }: MarkProps & {
     id: BrandId | "yazakia";
 }): React.JSX.Element;
 
+/**
+ * The Wu-sama mark — the founder's byline mark, for the person and not the company (the company keeps
+ * `KrizakaLogo`). Oussama's nickname is Wu-sama: a W of five straight legs in gold inside the Krizaka hexagon, split
+ * at its top and bottom vertices, a small lit node at the middle summit. Still: no orbit, no pulse. The hexagon and the
+ * node read the host's text role, so they are ink in both themes; the gold is one mid-tone amber that reads on both.
+ *
+ * **Original mark, inspired by, not derived from**: it nods to the culture its name comes from but is built from the
+ * Krizaka hexagon's own measures (see `wu-sama-geometry.ts` and its tests), never from the Wu-Tang Clan's registered
+ * logo — no bat-wing W, no curve, no yellow-on-black copy. Below 48 px it crops to the emblem.
+ */
+declare function WuSamaMark({ size, title, className }: Omit<MarkProps, "animated"> & {
+    animated?: boolean;
+}): React.JSX.Element;
+
 /**
  * The Yasakia mark, "one conversation": one speech bubble with a tail on each side (turned 180°, never mirrored, so it
  * can never read as a face) in the Yasakia gradient (emerald → turquoise, the same in dark and light), and the spark
@@ -79,4 +93,4 @@ declare function YomizakaLogo({ size, animated, title, className }: MarkProps):
  */
 declare function YororisLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
-export { AkinazaLogo, type BrandId, KachizakaLogo, KrizakaLogo, type MarkProps, OrazakaLogo, OrochiaLogo, ProductLogo, YasakiaLogo, YazakiaLogo, YomizakaLogo, YororisLogo, cx };
+export { AkinazaLogo, type BrandId, KachizakaLogo, KrizakaLogo, type MarkProps, OrazakaLogo, OrochiaLogo, ProductLogo, WuSamaMark, YasakiaLogo, YazakiaLogo, YomizakaLogo, YororisLogo, cx };

package/dist/index.js

@@ -16,8 +16,67 @@ import {
   YasakiaLogo,
   YazakiaLogo,
   YomizakaLogo,
-  YororisLogo
-} from "./chunk-YCIBJ6OQ.js";
+  YororisLogo,
+  a11y,
+  neutral
+} from "./chunk-4DH2HW3D.js";
+
+// src/marks/wu-sama-geometry.ts
+var round = (n) => Math.round(n * 10) / 10;
+var center = 200;
+var radius = 150;
+var u = radius * Math.sqrt(3) / 2;
+var gap = 10;
+var hexagon = [
+  [center, center - radius],
+  [round(center + u), center - radius / 2],
+  [round(center + u), center + radius / 2],
+  [center, center + radius],
+  [round(center - u), center + radius / 2],
+  [round(center - u), center - radius / 2]
+];
+var [T, UR, LR, B, LL, UL] = hexagon;
+var onEdge = (a, b, x) => [x, round(a[1] + (x - a[0]) / (b[0] - a[0]) * (b[1] - a[1]))];
+var pt = ([x, y]) => `${x},${y}`;
+var left = [onEdge(T, UL, center - gap), UL, LL, onEdge(B, LL, center - gap)];
+var right = [onEdge(T, UR, center + gap), UR, LR, onEdge(B, LR, center + gap)];
+var wPoints = [
+  [round(center - 0.63 * u), round(center - 0.4 * radius)],
+  [round(center - 0.37 * u), round(center + 0.55 * radius)],
+  [center, round(center - 0.03 * radius)],
+  [round(center + 0.37 * u), round(center + 0.55 * radius)],
+  [round(center + 0.63 * u), round(center - 0.4 * radius)]
+];
+var peak = wPoints[2];
+var WU_SAMA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "34 34 332 332",
+  center,
+  radius,
+  gap,
+  hexagon,
+  /** The two halves of the hexagon (open at the top and bottom vertices), stroked in ink. */
+  shell: { left: `M${left.map(pt).join(" L")}`, right: `M${right.map(pt).join(" L")}`, stroke: 22 },
+  /** The W, stroked in gold. */
+  w: `M${wPoints.map(pt).join(" L")}`,
+  wStroke: 26,
+  /** The node: the family's lit node, a small diamond at the W's middle summit, in ink. */
+  node: `M${center},${round(peak[1] - 24)} L${center + 18},${peak[1]} L${center},${round(peak[1] + 24)} L${center - 18},${peak[1]}Z`,
+  /** One mid-tone amber, hsl(40 94% 37%): 3.3:1 on white and 5.8:1 on the dark surface. */
+  gold: "hsl(40 94% 37%)"
+};
+
+// src/marks/WuSamaMark.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function WuSamaMark({ size = 32, title, className }) {
+  const ink = neutral("--kz-text-primary", 92);
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: size < 48 ? WU_SAMA.croppedViewBox : WU_SAMA.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
+    /* @__PURE__ */ jsx("path", { d: WU_SAMA.shell.left, stroke: ink, strokeWidth: WU_SAMA.shell.stroke, strokeLinejoin: "miter", strokeLinecap: "butt" }),
+    /* @__PURE__ */ jsx("path", { d: WU_SAMA.shell.right, stroke: ink, strokeWidth: WU_SAMA.shell.stroke, strokeLinejoin: "miter", strokeLinecap: "butt" }),
+    /* @__PURE__ */ jsx("path", { d: WU_SAMA.w, stroke: WU_SAMA.gold, strokeWidth: WU_SAMA.wStroke, strokeLinejoin: "miter", strokeMiterlimit: 4, strokeLinecap: "butt" }),
+    /* @__PURE__ */ jsx("path", { d: WU_SAMA.node, fill: ink })
+  ] });
+}
 export {
   AkinazaLogo,
   KachizakaLogo,
@@ -27,6 +86,7 @@ export {
   OrochiaLogo,
   ProductLogo,
   RotatingWord,
+  WuSamaMark,
   YasakiaLogo,
   YazakiaLogo,
   YomizakaLogo,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/marks/wu-sama-geometry.ts","../src/marks/WuSamaMark.tsx"],"sourcesContent":["/**\n * The Wu-sama mark's geometry — the founder's byline mark. **Original mark, inspired by, not derived from**: it is the\n * Krizaka hexagon (a pointy-top regular hexagon in the 400×400 frame of the family), split at its top and bottom\n * vertices into two halves like the Krizaka shield that opens at one vertex, around a W of five straight legs whose\n * points are measured on that hexagon (`u`, its half-width, and `radius`) — see `wu-sama-geometry` tests. It is not\n * the Wu-Tang Clan's mark: no bat-wing silhouette, no curve, no black-and-yellow composition. The gold is one fixed\n * mid-tone amber (≥ 3:1 on the page surfaces of both themes), a hip-hop nod and not that clan's yellow.\n */\nconst round = (n: number) => Math.round(n * 10) / 10;\nconst center = 200;\nconst radius = 150;\n/** Half the hexagon's width. */\nconst u = (radius * Math.sqrt(3)) / 2;\nconst gap = 10;\n\n/** T, UR, LR, B, LL, UL. */\nconst hexagon = [\n  [center, center - radius],\n  [round(center + u), center - radius / 2],\n  [round(center + u), center + radius / 2],\n  [center, center + radius],\n  [round(center - u), center + radius / 2],\n  [round(center - u), center - radius / 2],\n] as const;\nconst [T, UR, LR, B, LL, UL] = hexagon;\n\n/** The point of the edge a→b whose x is `x`. */\nconst onEdge = (a: readonly [number, number], b: readonly [number, number], x: number) => [x, round(a[1] + ((x - a[0]) / (b[0] - a[0])) * (b[1] - a[1]))] as const;\nconst pt = ([x, y]: readonly [number, number]) => `${x},${y}`;\n\nconst left = [onEdge(T, UL, center - gap), UL, LL, onEdge(B, LL, center - gap)] as const;\nconst right = [onEdge(T, UR, center + gap), UR, LR, onEdge(B, LR, center + gap)] as const;\n\n/** The W: tips and valleys at fixed fractions of the hexagon's half-width and radius; the middle summit on the axis. */\nconst wPoints = [\n  [round(center - 0.63 * u), round(center - 0.4 * radius)],\n  [round(center - 0.37 * u), round(center + 0.55 * radius)],\n  [center, round(center - 0.03 * radius)],\n  [round(center + 0.37 * u), round(center + 0.55 * radius)],\n  [round(center + 0.63 * u), round(center - 0.4 * radius)],\n] as const;\nconst peak = wPoints[2];\n\nexport const WU_SAMA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"34 34 332 332\",\n  center,\n  radius,\n  gap,\n  hexagon,\n  /** The two halves of the hexagon (open at the top and bottom vertices), stroked in ink. */\n  shell: { left: `M${left.map(pt).join(\" L\")}`, right: `M${right.map(pt).join(\" L\")}`, stroke: 22 },\n  /** The W, stroked in gold. */\n  w: `M${wPoints.map(pt).join(\" L\")}`,\n  wStroke: 26,\n  /** The node: the family's lit node, a small diamond at the W's middle summit, in ink. */\n  node: `M${center},${round(peak[1] - 24)} L${center + 18},${peak[1]} L${center},${round(peak[1] + 24)} L${center - 18},${peak[1]}Z`,\n  /** One mid-tone amber, hsl(40 94% 37%): 3.3:1 on white and 5.8:1 on the dark surface. */\n  gold: \"hsl(40 94% 37%)\",\n} as const;\n","import { a11y, type MarkProps, neutral } from \"./shared\";\nimport { WU_SAMA as G } from \"./wu-sama-geometry\";\n\n/**\n * The Wu-sama mark — the founder's byline mark, for the person and not the company (the company keeps\n * `KrizakaLogo`). Oussama's nickname is Wu-sama: a W of five straight legs in gold inside the Krizaka hexagon, split\n * at its top and bottom vertices, a small lit node at the middle summit. Still: no orbit, no pulse. The hexagon and the\n * node read the host's text role, so they are ink in both themes; the gold is one mid-tone amber that reads on both.\n *\n * **Original mark, inspired by, not derived from**: it nods to the culture its name comes from but is built from the\n * Krizaka hexagon's own measures (see `wu-sama-geometry.ts` and its tests), never from the Wu-Tang Clan's registered\n * logo — no bat-wing W, no curve, no yellow-on-black copy. Below 48 px it crops to the emblem.\n */\nexport function WuSamaMark({ size = 32, title, className }: Omit<MarkProps, \"animated\"> & { animated?: boolean }) {\n  const ink = neutral(\"--kz-text-primary\", 92);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <path d={G.shell.left} stroke={ink} strokeWidth={G.shell.stroke} strokeLinejoin=\"miter\" strokeLinecap=\"butt\" />\n      <path d={G.shell.right} stroke={ink} strokeWidth={G.shell.stroke} strokeLinejoin=\"miter\" strokeLinecap=\"butt\" />\n      <path d={G.w} stroke={G.gold} strokeWidth={G.wStroke} strokeLinejoin=\"miter\" strokeMiterlimit={4} strokeLinecap=\"butt\" />\n      <path d={G.node} fill={ink} />\n    </svg>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/media-gallery.d.ts

@@ -0,0 +1,73 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const mediaGallery: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            caption?: tailwind_variants.ClassValue;
+            tile?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            caption?: tailwind_variants.ClassValue;
+            tile?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    tile: string;
+    media: string;
+    caption: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            caption?: tailwind_variants.ClassValue;
+            tile?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    tile: string;
+    media: string;
+    caption: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    tile: string;
+    media: string;
+    caption: string;
+}>>;
+type GalleryMedia = {
+    /** A stable id. */
+    id: string;
+    /** The still: a photo, or the poster of a loop. */
+    src: string;
+    /** What it shows, in words. */
+    alt: string;
+    /** A muted loop: WebM first, MP4 for Safari. */
+    video?: {
+        webm?: string;
+        mp4?: string;
+    };
+    /** One line over the foot of the tile. */
+    caption?: string;
+    /** `wide` for a landscape source (4:3 tile); the default tile is a 3:4 portrait. */
+    shape?: "portrait" | "wide";
+};
+type MediaGalleryProps = Omit<React.ComponentProps<"ul">, "children"> & {
+    /** The photos and loops, the featured one first. */
+    items: readonly GalleryMedia[];
+    /** The gallery's accessible name, passed translated. */
+    label: string;
+};
+/** Photos and loops in tiles, the first featured; loops play while seen. */
+declare function MediaGallery({ items, label, className, ...props }: MediaGalleryProps): React.JSX.Element;
+
+export { type GalleryMedia, MediaGallery, type MediaGalleryProps, mediaGallery };

package/dist/media-gallery.js

@@ -0,0 +1,42 @@
+"use client";
+
+// src/media-gallery/media-gallery.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var mediaGallery = tv({
+  slots: {
+    root: "m-0 grid list-none grid-cols-2 gap-2 p-0 sm:gap-3 md:grid-cols-4",
+    tile: "group relative isolate m-0 aspect-[3/4] overflow-hidden rounded-xl border border-border-default bg-media data-[shape=wide]:aspect-[4/3] data-[featured]:col-span-2 data-[featured]:aspect-[4/3] md:data-[featured]:aspect-auto",
+    media: "absolute inset-0 h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105",
+    caption: "pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-scrim-strong to-transparent p-3 pt-8 text-xs font-semibold text-fg-on-media"
+  }
+});
+var s = mediaGallery();
+function Tile({ item, featured }) {
+  const ref = React.useRef(null);
+  const [play, setPlay] = React.useState(false);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!item.video || !node || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const io = new IntersectionObserver(([entry]) => setPlay(Boolean(entry?.isIntersecting)), { rootMargin: "120px" });
+    io.observe(node);
+    return () => io.disconnect();
+  }, [item.video]);
+  return /* @__PURE__ */ jsx("li", { ref, className: s.tile(), "data-featured": featured ? "" : void 0, "data-shape": item.shape ?? "portrait", children: /* @__PURE__ */ jsxs("figure", { className: "m-0 h-full w-full", children: [
+    /* @__PURE__ */ jsx("img", { src: item.src, alt: item.alt, loading: "lazy", decoding: "async", className: s.media() }),
+    play && item.video && /* @__PURE__ */ jsxs("video", { className: s.media(), poster: item.src, autoPlay: true, muted: true, loop: true, playsInline: true, preload: "none", "aria-hidden": true, tabIndex: -1, children: [
+      item.video.webm && /* @__PURE__ */ jsx("source", { src: item.video.webm, type: "video/webm" }),
+      item.video.mp4 && /* @__PURE__ */ jsx("source", { src: item.video.mp4, type: "video/mp4" })
+    ] }),
+    item.caption && /* @__PURE__ */ jsx("figcaption", { className: s.caption(), children: item.caption })
+  ] }) });
+}
+function MediaGallery({ items, label, className, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { "aria-label": label, className: s.root({ className }), ...props, children: items.map((item, i) => /* @__PURE__ */ jsx(Tile, { item, featured: i === 0 && items.length > 2 }, item.id)) });
+}
+export {
+  MediaGallery,
+  mediaGallery
+};
+//# sourceMappingURL=media-gallery.js.map

package/dist/media-gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/media-gallery/media-gallery.tsx"],"sourcesContent":["// Client (the reader's motion preference). A shop's photos and loops in tiles: the first is the featured one, loops play\n// muted while their tile is on screen (a still under reduced motion), a caption rides the foot of a tile.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const mediaGallery = tv({\n  slots: {\n    root: \"m-0 grid list-none grid-cols-2 gap-2 p-0 sm:gap-3 md:grid-cols-4\",\n    tile:\n      \"group relative isolate m-0 aspect-[3/4] overflow-hidden rounded-xl border border-border-default bg-media data-[shape=wide]:aspect-[4/3] \" +\n      // The featured tile takes two columns; from md up it has no ratio of its own and stretches to the height of the row its neighbours set.\n      \"data-[featured]:col-span-2 data-[featured]:aspect-[4/3] md:data-[featured]:aspect-auto\",\n    media: \"absolute inset-0 h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105\",\n    caption: \"pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-scrim-strong to-transparent p-3 pt-8 text-xs font-semibold text-fg-on-media\",\n  },\n});\nconst s = mediaGallery();\n\nexport type GalleryMedia = {\n  /** A stable id. */\n  id: string;\n  /** The still: a photo, or the poster of a loop. */\n  src: string;\n  /** What it shows, in words. */\n  alt: string;\n  /** A muted loop: WebM first, MP4 for Safari. */\n  video?: { webm?: string; mp4?: string };\n  /** One line over the foot of the tile. */\n  caption?: string;\n  /** `wide` for a landscape source (4:3 tile); the default tile is a 3:4 portrait. */\n  shape?: \"portrait\" | \"wide\";\n};\n\nexport type MediaGalleryProps = Omit<React.ComponentProps<\"ul\">, \"children\"> & {\n  /** The photos and loops, the featured one first. */\n  items: readonly GalleryMedia[];\n  /** The gallery's accessible name, passed translated. */\n  label: string;\n};\n\nfunction Tile({ item, featured }: { item: GalleryMedia; featured: boolean }) {\n  const ref = React.useRef<HTMLLIElement>(null);\n  const [play, setPlay] = React.useState(false);\n  React.useEffect(() => {\n    const node = ref.current;\n    if (!item.video || !node || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const io = new IntersectionObserver(([entry]) => setPlay(Boolean(entry?.isIntersecting)), { rootMargin: \"120px\" });\n    io.observe(node);\n    return () => io.disconnect();\n  }, [item.video]);\n  return (\n    <li ref={ref} className={s.tile()} data-featured={featured ? \"\" : undefined} data-shape={item.shape ?? \"portrait\"}>\n      <figure className=\"m-0 h-full w-full\">\n        <img src={item.src} alt={item.alt} loading=\"lazy\" decoding=\"async\" className={s.media()} />\n        {play && item.video && (\n          <video className={s.media()} poster={item.src} autoPlay muted loop playsInline preload=\"none\" aria-hidden tabIndex={-1}>\n            {item.video.webm && <source src={item.video.webm} type=\"video/webm\" />}\n            {item.video.mp4 && <source src={item.video.mp4} type=\"video/mp4\" />}\n          </video>\n        )}\n        {item.caption && <figcaption className={s.caption()}>{item.caption}</figcaption>}\n      </figure>\n    </li>\n  );\n}\n\n/** Photos and loops in tiles, the first featured; loops play while seen. */\nexport function MediaGallery({ items, label, className, ...props }: MediaGalleryProps) {\n  return (\n    <ul aria-label={label} className={s.root({ className })} {...props}>\n      {items.map((item, i) => (\n        <Tile key={item.id} item={item} featured={i === 0 && items.length > 2} />\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,SAAS,UAAU;AAkDX,cAEE,YAFF;AAhDD,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MACE;AAAA,IAGF,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF,CAAC;AACD,IAAM,IAAI,aAAa;AAwBvB,SAAS,KAAK,EAAE,MAAM,SAAS,GAA8C;AAC3E,QAAM,MAAY,aAAsB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAU,eAAS,KAAK;AAC5C,EAAM,gBAAU,MAAM;AACpB,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAK,SAAS,CAAC,QAAQ,OAAO,WAAW,kCAAkC,EAAE,QAAS;AAC3F,UAAM,KAAK,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM,QAAQ,QAAQ,OAAO,cAAc,CAAC,GAAG,EAAE,YAAY,QAAQ,CAAC;AACjH,OAAG,QAAQ,IAAI;AACf,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,KAAK,KAAK,CAAC;AACf,SACE,oBAAC,QAAG,KAAU,WAAW,EAAE,KAAK,GAAG,iBAAe,WAAW,KAAK,QAAW,cAAY,KAAK,SAAS,YACrG,+BAAC,YAAO,WAAU,qBAChB;AAAA,wBAAC,SAAI,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,SAAQ,QAAO,UAAS,SAAQ,WAAW,EAAE,MAAM,GAAG;AAAA,IACxF,QAAQ,KAAK,SACZ,qBAAC,WAAM,WAAW,EAAE,MAAM,GAAG,QAAQ,KAAK,KAAK,UAAQ,MAAC,OAAK,MAAC,MAAI,MAAC,aAAW,MAAC,SAAQ,QAAO,eAAW,MAAC,UAAU,IACjH;AAAA,WAAK,MAAM,QAAQ,oBAAC,YAAO,KAAK,KAAK,MAAM,MAAM,MAAK,cAAa;AAAA,MACnE,KAAK,MAAM,OAAO,oBAAC,YAAO,KAAK,KAAK,MAAM,KAAK,MAAK,aAAY;AAAA,OACnE;AAAA,IAED,KAAK,WAAW,oBAAC,gBAAW,WAAW,EAAE,QAAQ,GAAI,eAAK,SAAQ;AAAA,KACrE,GACF;AAEJ;AAGO,SAAS,aAAa,EAAE,OAAO,OAAO,WAAW,GAAG,MAAM,GAAsB;AACrF,SACE,oBAAC,QAAG,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC1D,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,QAAmB,MAAY,UAAU,MAAM,KAAK,MAAM,SAAS,KAAzD,KAAK,EAAuD,CACxE,GACH;AAEJ;","names":[]}

package/dist/nav-bar.js

@@ -4,11 +4,11 @@ import {
   GitHubGlyph,
   familyLabels,
   sitesByGroup
-} from "./chunk-2L67YTNV.js";
+} from "./chunk-FTX66XZY.js";
 import {
   useSlidingIndicator
 } from "./chunk-4QN5YJ3D.js";
-import "./chunk-YCIBJ6OQ.js";
+import "./chunk-4DH2HW3D.js";
 import {
   cn
 } from "./chunk-NSLXEDIS.js";

package/dist/opening-hours.d.ts

@@ -0,0 +1,124 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const openingHours: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            summary?: tailwind_variants.ClassValue;
+            dot?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            state?: tailwind_variants.ClassValue;
+            detail?: tailwind_variants.ClassValue;
+            today?: tailwind_variants.ClassValue;
+            chevron?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            hours?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            summary?: tailwind_variants.ClassValue;
+            dot?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            state?: tailwind_variants.ClassValue;
+            detail?: tailwind_variants.ClassValue;
+            today?: tailwind_variants.ClassValue;
+            chevron?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            hours?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    summary: string;
+    dot: string;
+    status: string;
+    state: string;
+    detail: string;
+    today: string;
+    chevron: string;
+    list: string;
+    row: string;
+    day: string;
+    hours: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            summary?: tailwind_variants.ClassValue;
+            dot?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            state?: tailwind_variants.ClassValue;
+            detail?: tailwind_variants.ClassValue;
+            today?: tailwind_variants.ClassValue;
+            chevron?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            hours?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    summary: string;
+    dot: string;
+    status: string;
+    state: string;
+    detail: string;
+    today: string;
+    chevron: string;
+    list: string;
+    row: string;
+    day: string;
+    hours: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    summary: string;
+    dot: string;
+    status: string;
+    state: string;
+    detail: string;
+    today: string;
+    chevron: string;
+    list: string;
+    row: string;
+    day: string;
+    hours: string;
+}>>;
+type OpeningDay = {
+    /** A stable id (`mon`, `1`). */
+    id: string;
+    /** The day's name, translated (`Lundi`). */
+    label: string;
+    /** The day's hours, formatted by the app (`8 h – 12 h, 13 h – 17 h`); the app's word for closed when there are none. */
+    hours: string;
+};
+type OpeningStatus = {
+    /** Open at this moment. */
+    open: boolean;
+    /** The state in words (`Open now`, `Closed`). */
+    label: string;
+    /** What follows (`closes at 5 pm`, `opens tomorrow at 8 am`). */
+    detail?: string;
+};
+type OpeningHoursProps = Omit<React.ComponentProps<"details">, "children"> & {
+    /** The week, in reading order. */
+    days: readonly OpeningDay[];
+    /** The id of today's day: its row is marked (`aria-current="date"`) and its hours show on the closed row. */
+    today?: string;
+    /** Open or closed right now, in words. */
+    status: OpeningStatus;
+    /** The name of the list (`Hours`), passed translated. */
+    label: string;
+};
+/** The weekly hours in one row — open now, closes at… — that unfolds into the week, today highlighted. */
+declare function OpeningHours({ days, today, status, label, className, ...props }: OpeningHoursProps): React.JSX.Element;
+
+export { type OpeningDay, OpeningHours, type OpeningHoursProps, type OpeningStatus, openingHours };