@krizaka/ui 2.10.0 → 3.0.0

package/README.md

@@ -176,7 +176,8 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/iso` | the isometric kit: `IsoHub` (a hero driven by data: `layers`, `dome`, `satellites`, `highlight`), `IsoScene`, `IsoPrism`, `IsoStack`, `IsoDome`, `IsoTile`, `IsoLink`, `IsoNode`, `IsoLabel`, the projection helpers — static SVG animated by motion.css | server |
 | `@krizaka/ui/motion` | `MotionObserver` (reveal, off-screen pause, settle, spotlight, magnetism) and `RotatingWord` (no layout shift) | client |
 | `@krizaka/ui/pagination` | `Pagination` (pages: `page`, `pageCount`, `onPageChange` or `getHref` for links; cursor: `hasPrevious`/`hasNext`, `onPrevious`/`onNext`; `status`, `pageSize` + `pageSizeOptions`, `siblings`, `boundaries`, `labels`; folds into "Page 3 of 12" in a narrow container), `pageRange` | server |
-| `@krizaka/ui/data-table` | `DataTable` (`rows`, `columns` with `header`, `cell`, `value`, `sortable`, `align`, `card` title·label·hidden; `caption`, `sort`/`defaultSort` + `onSortChange`, `manualSort`, `selectable` + `selected`, `loading`, `empty`, `error`, `layout` auto·table·cards, `density`, `virtualize`, `footer`) | client |
+| `@krizaka/ui/data-table` | **v2, on TanStack Table v9** (never imported by a product): `DataTable` (`rows`, `columns` with `header`, `cell`, `value`, `sortable`, `filter` text·facet·range + `options`, `groupable` + `aggregate`, `align`, `width`, `card`, `hideable`; `caption`, `sort`, `filters`, `selected` + `selectable`, `groupBy`, `columnVisibility`, `expanded` + `renderDetail` / `getSubRows`, `page` + `pageSize` / `pageSizeOptions`, each controlled or `default*`; `pinning`, `resizing`, `manual` sorting·filtering·pagination + `rowCount` + `onStateChange` (server mode), `virtualized`, `loading`, `empty`, `error`, `layout` auto·table·cards, `density`, `toolbar`, `footer`, `labels`), the toolbar `DataTableFilters` · `DataTableColumnsMenu` · `DataTableExport`, `useDataTable()` (the TanStack instance), `dataTableCsv` | client |
+| `@krizaka/ui/virtual` | On TanStack Virtual v3: `VirtualList` (own region or `scroll="window"`, measured items, `onEndReached`, `ref.scrollToIndex`), `VirtualGrid` (columns that fit the width), `useVirtualizer` / `useWindowVirtualizer` through the facade | client |
 | `@krizaka/ui/filter-bar` | `FilterBar` (`label`, the controls as children, `active` chips, `onClearAll`, `results` announced), `FilterMenu` (checkboxes or radios with counts), `readFilterParams` / `writeFilterParams` (the filters in the address) | client |
 | `@krizaka/ui/combobox` | `Combobox` (ARIA 1.2: `options` or `onSearch(query, signal)` debounced, `multiple` chips + `maxSelected`, `creatable` + `onCreate`, `separators`, `hint`, `error`, `labels`) | client |
 | `@krizaka/ui/tag-input` | `TagInput` (free words as chips: `suggestions`, `normalize`, `validate`, `max`, `separators`, paste split) | client |
@@ -224,6 +225,7 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/error-page` | `ErrorPage` — a page template, see [Page templates](#page-templates) | server |
 | `@krizaka/ui/pricing-page` | `PricingPage` — a page template, see [Page templates](#page-templates) | server |
 | `@krizaka/ui/native/video-player` | React Native `VideoPlayer` on expo-video (optional peer) | native |
+| `@krizaka/ui/native/list` | React Native `List` on FlashList v2 and `useInfiniteList` on `useInfiniteQuery` of `@krizaka/query` (optional peers): separators, skeleton rows, empty/error, pull to refresh, the next page near the end | native |
 | `@krizaka/ui/native/media-capture` | React Native `MediaCapture` on expo-camera (optional peer) | native |
 | `@krizaka/ui` | the marks, `MotionObserver`, `RotatingWord`, `cx` (unchanged) | client |
 | `@krizaka/ui/native` | React Native: `ThemeProvider`/`useTheme`, `Txt`, `Button`, `IconButton`, `Card.*`, `Badge`, `Chip` (+ `Group`), `Avatar` (+ `Group`), `Skeleton`, `EmptyState`, `Spinner`, `Countdown`, `Segmented`, `Progress`, `Toaster`/`toast`, `Pagination`, `SearchField`, the marks — see [React Native](#react-native) | native |

package/dist/audio-player.js

@@ -4,7 +4,7 @@ import {
   formatClock,
   playSafely,
   useInView
-} from "./chunk-EUPTXKH7.js";
+} from "./chunk-BRKMQ6JV.js";
 import {
   PauseGlyph,
   PlayGlyph

package/dist/{chunk-EUPTXKH7.js → chunk-BRKMQ6JV.js}

@@ -87,9 +87,10 @@ export {
   formatClock,
   clamp,
   usePrefersReducedMotion,
+  useLatest,
   useInView,
   useDebouncedCallback,
   useControllable,
   playSafely
 };
-//# sourceMappingURL=chunk-EUPTXKH7.js.map
+//# sourceMappingURL=chunk-BRKMQ6JV.js.map

package/dist/chunk-FDCMBWUU.js

@@ -0,0 +1,168 @@
+"use client";
+import {
+  useListbox
+} from "./chunk-ZIXB33X7.js";
+import {
+  useControllable,
+  useDebouncedCallback
+} from "./chunk-BRKMQ6JV.js";
+import {
+  CloseGlyph,
+  SearchGlyph
+} from "./chunk-CPA5CF35.js";
+
+// src/search-field/search-field.tsx
+import * as React from "react";
+import { tv as tv2 } from "tailwind-variants";
+
+// src/kbd/kbd.tsx
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var kbdVariants = tv({
+  base: "inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 font-mono font-semibold text-fg-secondary",
+  variants: { size: { sm: "h-5 min-w-5 px-1 text-[10px]", md: "h-6 min-w-6 px-1.5 text-xs" } },
+  defaultVariants: { size: "md" }
+});
+function Kbd({ size, className, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", { className: kbdVariants({ size, className }), ...props });
+}
+
+// src/search-field/search-field.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var searchField = tv2({
+  slots: {
+    root: "relative w-full",
+    control: "flex h-11 w-full items-center gap-2 rounded-lg border border-border-default bg-surface-2 pl-3 pr-1.5 text-sm text-fg transition-[border-color,box-shadow] focus-within:border-accent focus-within:ring-2 focus-within:ring-ring",
+    icon: "h-4 w-4 shrink-0 text-fg-secondary",
+    input: "h-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted [&::-webkit-search-cancel-button]:appearance-none",
+    clear: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    shortcut: "hidden shrink-0 items-center gap-0.5 pr-1 sm:flex",
+    list: "absolute inset-x-0 top-full z-50 mt-1 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-surface-2 p-1 shadow-lg",
+    option: "flex cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg data-[active]:bg-surface-3",
+    group: "px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase text-fg-muted"
+  },
+  variants: {
+    size: { md: {}, sm: { control: "h-9", clear: "h-7 w-7" } }
+  },
+  defaultVariants: { size: "md" }
+});
+var isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+function SearchField({
+  label,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onSearch,
+  debounce = 250,
+  onSubmit,
+  shortcut = false,
+  suggestions,
+  suggestionsLabel,
+  onSuggestionSelect,
+  clearLabel = "Clear search",
+  landmark = true,
+  size,
+  className,
+  placeholder,
+  ...props
+}) {
+  const s = searchField({ size });
+  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = React.useState(false);
+  const [apple, setApple] = React.useState(false);
+  const input = React.useRef(null);
+  const search = useDebouncedCallback((query) => onSearch?.(query), debounce);
+  const list = suggestions ?? [];
+  const pick = (i) => {
+    const suggestion = list[i];
+    if (!suggestion) return;
+    setOpen(false);
+    onSuggestionSelect?.(suggestion);
+  };
+  const listbox = useListbox({ count: list.length, onPick: pick, open: open && list.length > 0, setOpen });
+  React.useEffect(() => {
+    if (!shortcut) return;
+    setApple(isApple());
+    const onKey = (event) => {
+      if (event.key.toLowerCase() === shortcut.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey) {
+        event.preventDefault();
+        input.current?.focus();
+        input.current?.select();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut]);
+  const change = (query) => {
+    setValue(query);
+    search(query);
+    listbox.setActive(-1);
+    setOpen(true);
+  };
+  const field = /* @__PURE__ */ jsxs("div", { className: s.root({ className }), onBlur: (event) => !event.currentTarget.contains(event.relatedTarget) && setOpen(false), children: [
+    /* @__PURE__ */ jsxs("div", { className: s.control(), children: [
+      /* @__PURE__ */ jsx2(SearchGlyph, { className: s.icon() }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref: input,
+          type: "search",
+          "aria-label": label,
+          enterKeyHint: "search",
+          autoComplete: "off",
+          ...list.length > 0 ? listbox.inputProps : {},
+          value,
+          placeholder,
+          className: s.input(),
+          onChange: (event) => change(event.target.value),
+          onFocus: () => setOpen(true),
+          onKeyDown: (event) => {
+            if (list.length > 0 && listbox.onKeyDown(event)) return;
+            if (event.key === "Enter") {
+              event.preventDefault();
+              search.cancel();
+              onSearch?.(value);
+              onSubmit?.(value);
+              setOpen(false);
+            } else if (event.key === "Escape" && value) {
+              event.preventDefault();
+              change("");
+            }
+          },
+          ...props
+        }
+      ),
+      value ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "aria-label": clearLabel,
+          className: s.clear(),
+          onClick: () => {
+            change("");
+            input.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx2(CloseGlyph, { className: "h-4 w-4" })
+        }
+      ) : shortcut ? /* @__PURE__ */ jsxs("span", { className: s.shortcut(), "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: apple ? "\u2318" : "Ctrl" }),
+        /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: shortcut.toUpperCase() })
+      ] }) : null
+    ] }),
+    list.length > 0 && /* @__PURE__ */ jsxs("div", { hidden: !open, className: s.list(), children: [
+      suggestionsLabel ? /* @__PURE__ */ jsx2("div", { "aria-hidden": true, className: s.group(), children: suggestionsLabel }) : null,
+      /* @__PURE__ */ jsx2("div", { id: listbox.listId, role: "listbox", "aria-label": suggestionsLabel ?? label, children: list.map((suggestion, i) => /* @__PURE__ */ jsxs("div", { ...listbox.optionProps(i, false), className: s.option(), children: [
+        /* @__PURE__ */ jsx2(SearchGlyph, { className: "h-3.5 w-3.5 shrink-0 text-fg-muted" }),
+        /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate", children: suggestion.label }),
+        suggestion.meta ? /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-xs text-fg-secondary", children: suggestion.meta }) : null
+      ] }, suggestion.value)) })
+    ] })
+  ] });
+  return landmark ? /* @__PURE__ */ jsx2("div", { role: "search", children: field }) : field;
+}
+
+export {
+  searchField,
+  SearchField
+};
+//# sourceMappingURL=chunk-FDCMBWUU.js.map

package/dist/chunk-FDCMBWUU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/search-field/search-field.tsx","../src/kbd/kbd.tsx"],"sourcesContent":["// Client. A search input (`type=\"search\"` inside a `role=\"search\"` landmark when it stands alone): a leading glyph,\n// a clear button, a global shortcut that focuses it (⌘K on Apple devices, Ctrl+K elsewhere, shown as `Kbd`), and\n// optional suggestions through the shared combobox engine. `onSearch` is debounced; Enter submits.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CloseGlyph, SearchGlyph } from \"../glyphs\";\nimport { Kbd } from \"../kbd\";\nimport { useListbox } from \"../listbox\";\nimport { useControllable, useDebouncedCallback } from \"../media\";\n\nexport const searchField = tv({\n  slots: {\n    root: \"relative w-full\",\n    control:\n      \"flex h-11 w-full items-center gap-2 rounded-lg border border-border-default bg-surface-2 pl-3 pr-1.5 text-sm text-fg \" +\n      \"transition-[border-color,box-shadow] focus-within:border-accent focus-within:ring-2 focus-within:ring-ring\",\n    icon: \"h-4 w-4 shrink-0 text-fg-secondary\",\n    input:\n      \"h-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted \" +\n      \"[&::-webkit-search-cancel-button]:appearance-none\",\n    clear:\n      \"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    shortcut: \"hidden shrink-0 items-center gap-0.5 pr-1 sm:flex\",\n    list: \"absolute inset-x-0 top-full z-50 mt-1 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-surface-2 p-1 shadow-lg\",\n    option: \"flex cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg data-[active]:bg-surface-3\",\n    group: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase text-fg-muted\",\n  },\n  variants: {\n    size: { md: {}, sm: { control: \"h-9\", clear: \"h-7 w-7\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SearchSuggestion = {\n  /** What `onSuggestionSelect` receives. */\n  value: string;\n  /** What the person reads. */\n  label: string;\n  /** A small text on the right (\"Creator\", \"12 videos\"). */\n  meta?: string;\n};\n\nexport type SearchFieldProps = Omit<React.ComponentProps<\"input\">, \"value\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"size\" | \"type\"> & {\n  /** The accessible name of the input (\"Search videos\"), passed translated. */\n  label: string;\n  /** The query (controlled). */\n  value?: string;\n  /** The query at first, uncontrolled. */\n  defaultValue?: string;\n  /** Called on every key with the query. */\n  onValueChange?: (query: string) => void;\n  /** Called with the query once typing pauses (`debounce` ms): fetch the results here. */\n  onSearch?: (query: string) => void;\n  /** The pause, in ms, before `onSearch`. Default 250. */\n  debounce?: number;\n  /** Called on Enter (no suggestion active) with the query: go to the results page. */\n  onSubmit?: (query: string) => void;\n  /** The global key that focuses the field with ⌘ / Ctrl (`\"k\"`), or `false` for none. Default `false`. */\n  shortcut?: string | false;\n  /** Suggestions under the field (recent searches, completions). */\n  suggestions?: readonly SearchSuggestion[];\n  /** A title above the suggestions (\"Recent searches\"). */\n  suggestionsLabel?: string;\n  /** Called with a suggestion picked (Enter on it, or a click). */\n  onSuggestionSelect?: (suggestion: SearchSuggestion) => void;\n  /** The clear button's name (\"Clear search\"), passed translated. */\n  clearLabel?: string;\n  /** Wraps the field in a `role=\"search\"` landmark (default) — `false` inside a form that already is one. */\n  landmark?: boolean;\n  /** md (default) · sm. */\n  size?: \"md\" | \"sm\";\n};\n\nconst isApple = () => typeof navigator !== \"undefined\" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);\n\n/** A search box: clear, shortcut, debounced search, submit on Enter, suggestions with the keyboard. */\nexport function SearchField({\n  label,\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onSearch,\n  debounce = 250,\n  onSubmit,\n  shortcut = false,\n  suggestions,\n  suggestionsLabel,\n  onSuggestionSelect,\n  clearLabel = \"Clear search\",\n  landmark = true,\n  size,\n  className,\n  placeholder,\n  ...props\n}: SearchFieldProps) {\n  const s = searchField({ size });\n  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);\n  const [open, setOpen] = React.useState(false);\n  const [apple, setApple] = React.useState(false);\n  const input = React.useRef<HTMLInputElement>(null);\n  const search = useDebouncedCallback((query: string) => onSearch?.(query), debounce);\n  const list = suggestions ?? [];\n\n  const pick = (i: number) => {\n    const suggestion = list[i];\n    if (!suggestion) return;\n    setOpen(false);\n    onSuggestionSelect?.(suggestion);\n  };\n  const listbox = useListbox({ count: list.length, onPick: pick, open: open && list.length > 0, setOpen });\n\n  React.useEffect(() => {\n    if (!shortcut) return;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- the platform is only known in the browser (no hydration mismatch)\n    setApple(isApple());\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() === shortcut.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey) {\n        event.preventDefault();\n        input.current?.focus();\n        input.current?.select();\n      }\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [shortcut]);\n\n  const change = (query: string) => {\n    setValue(query);\n    search(query);\n    listbox.setActive(-1);\n    setOpen(true);\n  };\n\n  const field = (\n    <div className={s.root({ className })} onBlur={(event) => !event.currentTarget.contains(event.relatedTarget as Node | null) && setOpen(false)}>\n      <div className={s.control()}>\n        <SearchGlyph className={s.icon()} />\n        <input\n          ref={input}\n          type=\"search\"\n          aria-label={label}\n          enterKeyHint=\"search\"\n          autoComplete=\"off\"\n          {...(list.length > 0 ? listbox.inputProps : {})}\n          value={value}\n          placeholder={placeholder}\n          className={s.input()}\n          onChange={(event) => change(event.target.value)}\n          onFocus={() => setOpen(true)}\n          onKeyDown={(event) => {\n            if (list.length > 0 && listbox.onKeyDown(event)) return;\n            if (event.key === \"Enter\") {\n              event.preventDefault();\n              search.cancel();\n              onSearch?.(value);\n              onSubmit?.(value);\n              setOpen(false);\n            } else if (event.key === \"Escape\" && value) {\n              event.preventDefault();\n              change(\"\");\n            }\n          }}\n          {...props}\n        />\n        {value ? (\n          <button\n            type=\"button\"\n            aria-label={clearLabel}\n            className={s.clear()}\n            onClick={() => {\n              change(\"\");\n              input.current?.focus();\n            }}\n          >\n            <CloseGlyph className=\"h-4 w-4\" />\n          </button>\n        ) : shortcut ? (\n          <span className={s.shortcut()} aria-hidden>\n            <Kbd size=\"sm\">{apple ? \"⌘\" : \"Ctrl\"}</Kbd>\n            <Kbd size=\"sm\">{shortcut.toUpperCase()}</Kbd>\n          </span>\n        ) : null}\n      </div>\n      {list.length > 0 && (\n        <div hidden={!open} className={s.list()}>\n          {suggestionsLabel ? (\n            <div aria-hidden className={s.group()}>\n              {suggestionsLabel}\n            </div>\n          ) : null}\n          <div id={listbox.listId} role=\"listbox\" aria-label={suggestionsLabel ?? label}>\n            {list.map((suggestion, i) => (\n              <div key={suggestion.value} {...listbox.optionProps(i, false)} className={s.option()}>\n                <SearchGlyph className=\"h-3.5 w-3.5 shrink-0 text-fg-muted\" />\n                <span className=\"min-w-0 flex-1 truncate\">{suggestion.label}</span>\n                {suggestion.meta ? <span className=\"shrink-0 text-xs text-fg-secondary\">{suggestion.meta}</span> : null}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n  return landmark ? <div role=\"search\">{field}</div> : field;\n}\n","// Server-safe. A key, or a shortcut of several (`<Kbd>⌘</Kbd><Kbd>K</Kbd>`).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const kbdVariants = tv({\n  base:\n    \"inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 \" +\n    \"font-mono font-semibold text-fg-secondary\",\n  variants: { size: { sm: \"h-5 min-w-5 px-1 text-[10px]\", md: \"h-6 min-w-6 px-1.5 text-xs\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type KbdProps = React.ComponentProps<\"kbd\"> & {\n  /**\n   * sm · md.\n   * @default \"md\"\n   */\n  size?: VariantProps<typeof kbdVariants>[\"size\"];\n};\n\nexport function Kbd({ size, className, ...props }: KbdProps) {\n  return <kbd className={kbdVariants({ size, className })} {...props} />;\n}\n"],"mappings":"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","names":["tv","jsx","tv"]}

package/dist/chunk-HCNOOPZE.js

@@ -0,0 +1,210 @@
+"use client";
+import {
+  useLatest,
+  usePrefersReducedMotion
+} from "./chunk-BRKMQ6JV.js";
+
+// src/virtual/virtual.tsx
+import {
+  measureElement as measureTanStack,
+  observeElementRect,
+  useVirtualizer as useTanStackVirtualizer,
+  useWindowVirtualizer as useTanStackWindowVirtualizer
+} from "@tanstack/react-virtual";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var virtual = tv({
+  slots: {
+    viewport: "relative w-full overflow-auto overscroll-contain rounded-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    list: "relative w-full",
+    item: "absolute top-0 left-0 w-full",
+    row: "absolute top-0 left-0 grid w-full",
+    empty: "px-4 py-10 text-center text-sm text-fg-secondary"
+  }
+});
+var useWindowVirtualizer = useTanStackWindowVirtualizer;
+var useVirtualizer = useTanStackVirtualizer;
+var measureWithFallback = (estimate) => (element, entry, instance) => {
+  const size = measureTanStack(element, entry, instance);
+  return size > 0 ? size : estimate(Number(element.getAttribute("data-index") ?? 0));
+};
+function useLayoutFallbacks(height, estimate) {
+  const estimateOf = sizeOf(estimate);
+  const key = typeof estimate === "number" ? estimate : 0;
+  return React.useMemo(() => ({ observeElementRect: observeRectWithFallback(height), measureElement: measureWithFallback(estimateOf) }), [height, key]);
+}
+var observeRectWithFallback = (height) => (instance, callback) => observeElementRect(instance, (rect) => callback(rect.height > 0 ? rect : { width: rect.width, height }));
+var sizeOf = (size) => typeof size === "number" ? () => size : size;
+function useEndReached(items, count, threshold, onEndReached) {
+  const latest = useLatest(onEndReached);
+  const last = items.at(-1)?.index ?? -1;
+  const reached = count > 0 && last >= count - 1 - threshold;
+  const firedAt = React.useRef(-1);
+  React.useEffect(() => {
+    if (!reached || firedAt.current === count) return;
+    firedAt.current = count;
+    latest.current?.();
+  }, [reached, count, latest]);
+}
+function useHandle(ref, virtualizer, toIndex) {
+  const reduce = usePrefersReducedMotion();
+  React.useImperativeHandle(
+    ref,
+    () => ({ scrollToIndex: (index, align = "auto") => virtualizer.scrollToIndex(toIndex(index), { align, behavior: reduce ? "auto" : "smooth" }) }),
+    [virtualizer, reduce, toIndex]
+  );
+}
+function VirtualList({
+  items,
+  renderItem,
+  getKey,
+  estimateSize,
+  label,
+  scroll = "self",
+  height = 400,
+  overscan = 6,
+  gap = 0,
+  onEndReached,
+  endReachedThreshold = 5,
+  empty,
+  footer,
+  ref,
+  className
+}) {
+  const s = virtual();
+  const viewport = React.useRef(null);
+  const list = React.useRef(null);
+  const [margin, setMargin] = React.useState(0);
+  const fallbacks = useLayoutFallbacks(typeof height === "number" ? height : 400, estimateSize);
+  const common = {
+    measureElement: fallbacks.measureElement,
+    count: items.length,
+    estimateSize: sizeOf(estimateSize),
+    overscan,
+    gap,
+    getItemKey: (index) => getKey ? getKey(items[index], index) : index
+  };
+  const self = useTanStackVirtualizer({
+    ...common,
+    getScrollElement: () => viewport.current,
+    initialRect: { width: 0, height: typeof height === "number" ? height : 400 },
+    observeElementRect: fallbacks.observeElementRect,
+    enabled: scroll === "self"
+  });
+  const page = useTanStackWindowVirtualizer({
+    ...common,
+    scrollMargin: margin,
+    initialRect: { width: 0, height: typeof window === "undefined" ? 800 : window.innerHeight },
+    enabled: scroll === "window"
+  });
+  const virtualizer = scroll === "window" ? page : self;
+  React.useLayoutEffect(() => {
+    if (scroll === "window" && list.current) setMargin(list.current.getBoundingClientRect().top + window.scrollY);
+  }, [scroll]);
+  const virtualItems = virtualizer.getVirtualItems();
+  useEndReached(virtualItems, items.length, endReachedThreshold, onEndReached);
+  useHandle(ref, virtualizer, React.useCallback((i) => i, []));
+  const offset = scroll === "window" ? virtualizer.options.scrollMargin : 0;
+  const body = items.length === 0 && empty ? /* @__PURE__ */ jsx("div", { className: s.empty(), children: empty }) : /* @__PURE__ */ jsx("div", { ref: list, role: "list", "aria-label": scroll === "window" ? label : void 0, className: s.list({ className: scroll === "window" ? className : void 0 }), style: { height: virtualizer.getTotalSize() }, children: virtualItems.map((item) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "listitem",
+      "data-index": item.index,
+      ref: virtualizer.measureElement,
+      "aria-setsize": items.length,
+      "aria-posinset": item.index + 1,
+      className: s.item(),
+      style: { transform: `translateY(${item.start - offset}px)` },
+      children: renderItem(items[item.index], item.index)
+    },
+    item.key
+  )) });
+  if (scroll === "window")
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      body,
+      footer
+    ] });
+  return (
+    // A scrolling region the keyboard can reach: Tab lands on it, the arrows and Page keys scroll it.
+    /* @__PURE__ */ jsxs("div", { ref: viewport, tabIndex: 0, role: "region", "aria-label": label, className: s.viewport({ className }), style: { height }, children: [
+      body,
+      footer
+    ] })
+  );
+}
+var columnsFor = (width, minItemWidth, gap) => Math.max(1, Math.floor((width + gap) / (minItemWidth + gap)));
+function VirtualGrid({
+  items,
+  renderItem,
+  getKey,
+  estimateRowHeight,
+  label,
+  columns: fixed,
+  minItemWidth = 220,
+  height = 480,
+  gap = 16,
+  overscan = 3,
+  onEndReached,
+  empty,
+  footer,
+  ref,
+  className
+}) {
+  const s = virtual();
+  const viewport = React.useRef(null);
+  const [width, setWidth] = React.useState(0);
+  React.useLayoutEffect(() => {
+    const element = viewport.current;
+    if (!element || fixed) return;
+    setWidth(element.clientWidth);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => entry && setWidth(entry.contentRect.width));
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [fixed]);
+  const columns = fixed ?? (width > 0 ? columnsFor(width, minItemWidth, gap) : 1);
+  const rows = Math.ceil(items.length / columns);
+  const fallbacks = useLayoutFallbacks(typeof height === "number" ? height : 480, estimateRowHeight);
+  const virtualizer = useTanStackVirtualizer({
+    ...fallbacks,
+    count: rows,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    gap,
+    getScrollElement: () => viewport.current,
+    initialRect: { width: 0, height: typeof height === "number" ? height : 480 },
+    getItemKey: (row) => getKey && items[row * columns] !== void 0 ? getKey(items[row * columns], row * columns) : row
+  });
+  const virtualRows = virtualizer.getVirtualItems();
+  useEndReached(virtualRows, rows, 1, onEndReached);
+  useHandle(ref, virtualizer, React.useCallback((i) => Math.floor(i / columns), [columns]));
+  return /* @__PURE__ */ jsxs("div", { ref: viewport, tabIndex: 0, role: "region", "aria-label": label, className: s.viewport({ className }), style: { height }, children: [
+    items.length === 0 && empty ? /* @__PURE__ */ jsx("div", { className: s.empty(), children: empty }) : /* @__PURE__ */ jsx("div", { role: "list", className: s.list(), style: { height: virtualizer.getTotalSize() }, children: virtualRows.map((row) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-index": row.index,
+        ref: virtualizer.measureElement,
+        className: s.row(),
+        style: { transform: `translateY(${row.start}px)`, gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gap },
+        children: items.slice(row.index * columns, row.index * columns + columns).map((item, i) => {
+          const index = row.index * columns + i;
+          return /* @__PURE__ */ jsx("div", { role: "listitem", "aria-setsize": items.length, "aria-posinset": index + 1, className: "min-w-0", children: renderItem(item, index) }, getKey ? getKey(item, index) : index);
+        })
+      },
+      row.key
+    )) }),
+    footer
+  ] });
+}
+
+export {
+  virtual,
+  useWindowVirtualizer,
+  useVirtualizer,
+  useLayoutFallbacks,
+  VirtualList,
+  columnsFor,
+  VirtualGrid
+};
+//# sourceMappingURL=chunk-HCNOOPZE.js.map

package/dist/chunk-HCNOOPZE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/virtual/virtual.tsx"],"sourcesContent":["// Client (a scroll position, measured items). Long lists and galleries rendered by what is in view, on TanStack Virtual\n// v3 behind the Krizaka facade (ADR-001: a product imports `@krizaka/ui/virtual`, never `@tanstack/*`). A list is a\n// focusable scrolling region holding a `role=\"list\"` whose items say where they stand in the whole (`aria-setsize`,\n// `aria-posinset`), so a screen reader knows \"item 4,812 of 50,000\" though only twenty exist in the page.\nimport {\n  measureElement as measureTanStack,\n  observeElementRect,\n  type ReactVirtualizer,\n  useVirtualizer as useTanStackVirtualizer,\n  useWindowVirtualizer as useTanStackWindowVirtualizer,\n  type VirtualItem,\n  type Virtualizer as TanStackVirtualizer,\n} from \"@tanstack/react-virtual\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { useLatest, usePrefersReducedMotion } from \"../media\";\n\nexport type { VirtualItem };\n\nexport const virtual = tv({\n  slots: {\n    viewport:\n      \"relative w-full overflow-auto overscroll-contain rounded-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    list: \"relative w-full\",\n    item: \"absolute top-0 left-0 w-full\",\n    row: \"absolute top-0 left-0 grid w-full\",\n    empty: \"px-4 py-10 text-center text-sm text-fg-secondary\",\n  },\n});\n\n/** What a list or a grid can be asked to do from outside (`ref`). */\nexport type VirtualHandle = {\n  /** Scrolls the item at `index` into view — smoothly, unless the person asked for less motion. */\n  scrollToIndex: (index: number, align?: \"start\" | \"center\" | \"end\" | \"auto\") => void;\n};\n\n/** The window virtualizer of TanStack Virtual (a feed that scrolls the page), re-exported through the facade. */\nexport const useWindowVirtualizer = useTanStackWindowVirtualizer;\n/** The element virtualizer of TanStack Virtual (anything the components do not cover), re-exported through the facade. */\nexport const useVirtualizer = useTanStackVirtualizer;\nexport type Virtualizer<S extends Element | Window = Element, I extends Element = Element> = ReactVirtualizer<S, I>;\n\ntype Size = number | ((index: number) => number);\n\n/**\n * TanStack's observer of the scrolling element's size, falling back to the declared height while the element has no\n * layout (not yet in the page, in a hidden tab, under a DOM without layout such as a test): the rows of the first\n * screen are rendered at once instead of none.\n */\n/** TanStack's measure of an item, falling back to the estimate while it has no layout (0 px). */\nexport const measureWithFallback =\n  (estimate: (index: number) => number) =>\n  <S extends Element | Window, I extends Element>(element: I, entry: ResizeObserverEntry | undefined, instance: TanStackVirtualizer<S, I>) => {\n    const size = measureTanStack(element, entry, instance);\n    return size > 0 ? size : estimate(Number(element.getAttribute(\"data-index\") ?? 0));\n  };\n\n/** The fallbacks as stable options (a new function at each render would re-observe the element at each render). */\nexport function useLayoutFallbacks(height: number, estimate: Size) {\n  const estimateOf = sizeOf(estimate);\n  const key = typeof estimate === \"number\" ? estimate : 0;\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- a function estimate is read through its latest value\n  return React.useMemo(() => ({ observeElementRect: observeRectWithFallback(height), measureElement: measureWithFallback(estimateOf) }), [height, key]);\n}\n\nexport const observeRectWithFallback =\n  (height: number) =>\n  <S extends Element, I extends Element>(instance: TanStackVirtualizer<S, I>, callback: (rect: { width: number; height: number }) => void) =>\n    observeElementRect(instance, (rect) => callback(rect.height > 0 ? rect : { width: rect.width, height }));\nconst sizeOf = (size: Size) => (typeof size === \"number\" ? () => size : size);\n\n/** Calls `onEndReached` once each time the last rendered item comes within `threshold` items of the end. */\nfunction useEndReached(items: readonly VirtualItem[], count: number, threshold: number, onEndReached: (() => void) | undefined) {\n  const latest = useLatest(onEndReached);\n  const last = items.at(-1)?.index ?? -1;\n  const reached = count > 0 && last >= count - 1 - threshold;\n  const firedAt = React.useRef(-1);\n  React.useEffect(() => {\n    if (!reached || firedAt.current === count) return;\n    firedAt.current = count;\n    latest.current?.();\n  }, [reached, count, latest]);\n}\n\nfunction useHandle(ref: React.Ref<VirtualHandle> | undefined, virtualizer: { scrollToIndex: (index: number, options: { align: \"start\" | \"center\" | \"end\" | \"auto\"; behavior: ScrollBehavior }) => void }, toIndex: (i: number) => number) {\n  const reduce = usePrefersReducedMotion();\n  React.useImperativeHandle(\n    ref,\n    () => ({ scrollToIndex: (index, align = \"auto\") => virtualizer.scrollToIndex(toIndex(index), { align, behavior: reduce ? \"auto\" : \"smooth\" }) }),\n    [virtualizer, reduce, toIndex],\n  );\n}\n\nexport type VirtualListProps<T> = {\n  /** The items, all of them: only those in view (and `overscan` around) are rendered. */\n  items: readonly T[];\n  /** Draws one item. */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /** A stable key per item (an id): keeps measurements on the right item when the list changes. Default: the index. */\n  getKey?: (item: T, index: number) => string | number;\n  /** The size of an item in px, or a guess per index; each item is then measured (dynamic sizes). */\n  estimateSize: Size;\n  /** The accessible name of the list (\"Messages\", \"Events\"), passed translated. */\n  label: string;\n  /** `self` (default): the list scrolls in its own region of `height`. `window`: the page scrolls (a feed). */\n  scroll?: \"self\" | \"window\";\n  /** The height of the scrolling region (`self`): px or any CSS length. Default 400. */\n  height?: number | string;\n  /** Items rendered beyond the visible ones, on each side. Default 6. */\n  overscan?: number;\n  /** Space between two items, in px. Default 0. */\n  gap?: number;\n  /** Called when the end comes near (load the next page): once per length of `items`. */\n  onEndReached?: () => void;\n  /** How many items before the end `onEndReached` fires. Default 5. */\n  endReachedThreshold?: number;\n  /** Shown instead of the list when there is no item. */\n  empty?: React.ReactNode;\n  /** Shown after the last item (a spinner while the next page loads). */\n  footer?: React.ReactNode;\n  /** `scrollToIndex` from outside. */\n  ref?: React.Ref<VirtualHandle>;\n  /** Classes merged on the scrolling region (`self`) or the list (`window`). */\n  className?: string;\n};\n\n/**\n * A long list rendered by what is in view: fixed or measured sizes, its own scrolling region or the page's, the end\n * announced for infinite loading, items placed in the whole for assistive technology.\n */\nexport function VirtualList<T>({\n  items,\n  renderItem,\n  getKey,\n  estimateSize,\n  label,\n  scroll = \"self\",\n  height = 400,\n  overscan = 6,\n  gap = 0,\n  onEndReached,\n  endReachedThreshold = 5,\n  empty,\n  footer,\n  ref,\n  className,\n}: VirtualListProps<T>) {\n  const s = virtual();\n  const viewport = React.useRef<HTMLDivElement>(null);\n  const list = React.useRef<HTMLDivElement>(null);\n  const [margin, setMargin] = React.useState(0);\n  const fallbacks = useLayoutFallbacks(typeof height === \"number\" ? height : 400, estimateSize);\n  const common = {\n    measureElement: fallbacks.measureElement,\n    count: items.length,\n    estimateSize: sizeOf(estimateSize),\n    overscan,\n    gap,\n    getItemKey: (index: number) => (getKey ? getKey(items[index] as T, index) : index),\n  };\n  // Both hooks run on every render (the rules of hooks); the unused one is disabled. TanStack Virtual's instance is\n  // mutable by design: React Compiler skips this component, which re-renders on the virtualizer's own updates.\n  // eslint-disable-next-line react-hooks/incompatible-library -- the virtualizer drives the renders of this component\n  const self = useTanStackVirtualizer({\n    ...common,\n    getScrollElement: () => viewport.current,\n    initialRect: { width: 0, height: typeof height === \"number\" ? height : 400 },\n    observeElementRect: fallbacks.observeElementRect,\n    enabled: scroll === \"self\",\n  });\n  const page = useTanStackWindowVirtualizer({\n    ...common,\n    scrollMargin: margin,\n    initialRect: { width: 0, height: typeof window === \"undefined\" ? 800 : window.innerHeight },\n    enabled: scroll === \"window\",\n  });\n  const virtualizer = scroll === \"window\" ? page : self;\n  React.useLayoutEffect(() => {\n    if (scroll === \"window\" && list.current) setMargin(list.current.getBoundingClientRect().top + window.scrollY);\n  }, [scroll]);\n  const virtualItems = virtualizer.getVirtualItems();\n  useEndReached(virtualItems, items.length, endReachedThreshold, onEndReached);\n  useHandle(ref, virtualizer, React.useCallback((i: number) => i, []));\n\n  const offset = scroll === \"window\" ? virtualizer.options.scrollMargin : 0;\n  const body =\n    items.length === 0 && empty ? (\n      <div className={s.empty()}>{empty}</div>\n    ) : (\n      <div ref={list} role=\"list\" aria-label={scroll === \"window\" ? label : undefined} className={s.list({ className: scroll === \"window\" ? className : undefined })} style={{ height: virtualizer.getTotalSize() }}>\n        {virtualItems.map((item) => (\n          <div\n            role=\"listitem\"\n            key={item.key}\n            data-index={item.index}\n            ref={virtualizer.measureElement}\n            aria-setsize={items.length}\n            aria-posinset={item.index + 1}\n            className={s.item()}\n            style={{ transform: `translateY(${item.start - offset}px)` }}\n          >\n            {renderItem(items[item.index] as T, item.index)}\n          </div>\n        ))}\n      </div>\n    );\n\n  if (scroll === \"window\")\n    return (\n      <>\n        {body}\n        {footer}\n      </>\n    );\n  return (\n    // A scrolling region the keyboard can reach: Tab lands on it, the arrows and Page keys scroll it.\n    <div ref={viewport} tabIndex={0} role=\"region\" aria-label={label} className={s.viewport({ className })} style={{ height }}>\n      {body}\n      {footer}\n    </div>\n  );\n}\n\nexport type VirtualGridProps<T> = {\n  /** The items, all of them: only the rows in view are rendered. */\n  items: readonly T[];\n  /** Draws one cell (a card, a thumbnail). */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /** A stable key per item. Default: the index. */\n  getKey?: (item: T, index: number) => string | number;\n  /** The height of a row in px (a guess: rows are measured). */\n  estimateRowHeight: number;\n  /** The accessible name of the grid of items (\"Videos\"), passed translated. */\n  label: string;\n  /** A fixed number of columns. Without it, as many columns of at least `minItemWidth` as the width allows. */\n  columns?: number;\n  /** The narrowest a cell may be, in px, when `columns` is not set. Default 220. */\n  minItemWidth?: number;\n  /** The height of the scrolling region: px or any CSS length. Default 480. */\n  height?: number | string;\n  /** Space between cells, in px. Default 16. */\n  gap?: number;\n  /** Rows rendered beyond the visible ones. Default 3. */\n  overscan?: number;\n  /** Called when the last rows come near (load the next page). */\n  onEndReached?: () => void;\n  /** Shown instead of the grid when there is no item. */\n  empty?: React.ReactNode;\n  /** Shown after the last row. */\n  footer?: React.ReactNode;\n  /** `scrollToIndex` (of an item) from outside. */\n  ref?: React.Ref<VirtualHandle>;\n  /** Classes merged on the scrolling region. */\n  className?: string;\n};\n\n/** The number of columns a width holds at `minItemWidth` each (at least one). */\nexport const columnsFor = (width: number, minItemWidth: number, gap: number) => Math.max(1, Math.floor((width + gap) / (minItemWidth + gap)));\n\n/** A gallery rendered by the rows in view: as many columns as the width allows (or a fixed number), measured rows. */\nexport function VirtualGrid<T>({\n  items,\n  renderItem,\n  getKey,\n  estimateRowHeight,\n  label,\n  columns: fixed,\n  minItemWidth = 220,\n  height = 480,\n  gap = 16,\n  overscan = 3,\n  onEndReached,\n  empty,\n  footer,\n  ref,\n  className,\n}: VirtualGridProps<T>) {\n  const s = virtual();\n  const viewport = React.useRef<HTMLDivElement>(null);\n  const [width, setWidth] = React.useState(0);\n  React.useLayoutEffect(() => {\n    const element = viewport.current;\n    if (!element || fixed) return;\n    setWidth(element.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(([entry]) => entry && setWidth(entry.contentRect.width));\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [fixed]);\n  const columns = fixed ?? (width > 0 ? columnsFor(width, minItemWidth, gap) : 1);\n  const rows = Math.ceil(items.length / columns);\n  const fallbacks = useLayoutFallbacks(typeof height === \"number\" ? height : 480, estimateRowHeight);\n  // eslint-disable-next-line react-hooks/incompatible-library -- the virtualizer drives the renders of this component\n  const virtualizer = useTanStackVirtualizer({\n    ...fallbacks,\n    count: rows,\n    estimateSize: () => estimateRowHeight,\n    overscan,\n    gap,\n    getScrollElement: () => viewport.current,\n    initialRect: { width: 0, height: typeof height === \"number\" ? height : 480 },\n    getItemKey: (row) => (getKey && items[row * columns] !== undefined ? getKey(items[row * columns] as T, row * columns) : row),\n  });\n  const virtualRows = virtualizer.getVirtualItems();\n  useEndReached(virtualRows, rows, 1, onEndReached);\n  useHandle(ref, virtualizer, React.useCallback((i: number) => Math.floor(i / columns), [columns]));\n\n  return (\n    <div ref={viewport} tabIndex={0} role=\"region\" aria-label={label} className={s.viewport({ className })} style={{ height }}>\n      {items.length === 0 && empty ? (\n        <div className={s.empty()}>{empty}</div>\n      ) : (\n        <div role=\"list\" className={s.list()} style={{ height: virtualizer.getTotalSize() }}>\n          {virtualRows.map((row) => (\n            <div\n              key={row.key}\n              data-index={row.index}\n              ref={virtualizer.measureElement}\n              className={s.row()}\n              style={{ transform: `translateY(${row.start}px)`, gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gap }}\n            >\n              {items.slice(row.index * columns, row.index * columns + columns).map((item, i) => {\n                const index = row.index * columns + i;\n                return (\n                  <div role=\"listitem\" key={getKey ? getKey(item, index) : index} aria-setsize={items.length} aria-posinset={index + 1} className=\"min-w-0\">\n                    {renderItem(item, index)}\n                  </div>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      )}\n      {footer}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-X6TW3X6Y.js → chunk-LCZXS6AK.js}

@@ -8,7 +8,7 @@ import {
 import {
   useControllable,
   useDebouncedCallback
-} from "./chunk-EUPTXKH7.js";
+} from "./chunk-BRKMQ6JV.js";
 import {
   CheckGlyph,
   ChevronGlyph,
@@ -280,4 +280,4 @@ export {
   comboboxLabels,
   Combobox
 };
-//# sourceMappingURL=chunk-X6TW3X6Y.js.map
+//# sourceMappingURL=chunk-LCZXS6AK.js.map