@cascivo/react 0.16.0 → 0.16.1

package/README.md

@@ -249,7 +249,7 @@ routing break after adding one of these, check that the import resolves to
 
 ## Component index
 
-192 components, exported from `@cascivo/react`. Full props, examples, and live demos at [cascivo.com/docs](https://cascivo.com/docs).
+197 components, exported from `@cascivo/react`. Full props, examples, and live demos at [cascivo.com/docs](https://cascivo.com/docs).
 
 ### Inputs
 
@@ -282,6 +282,7 @@ routing break after adding one of these, check that the import resolves to
 - **Radio** — Single choice from a set, grouped with RadioGroup
 - **RadioCard** — Selectable card backed by a native radio input. Use RadioCardGroup for single-select groups.
 - **RatingGroup** — Star rating input with accessible radio group pattern
+- **ReorderList** — List whose rows can be reordered by pointer drag or entirely by keyboard
 - **Search** — Search input with debounced search callback and clear button
 - **SegmentedControl** — Mutually exclusive toggle group
 - **Select** — Native select menu styled to match the design system
@@ -293,6 +294,7 @@ routing break after adding one of these, check that the import resolves to
 - **TimePicker** — Native time input wrapper with label, hint, error, and size variants
 - **Toggle** — On/off switch built as an accessible button
 - **ToggleGroup** — A set of toggle buttons for single or multiple selection
+- **WheelPicker** — iOS-style drum picker — a column of options that scrolls and snaps to a selection
 
 ### Display
 
@@ -353,6 +355,7 @@ routing break after adding one of these, check that the import resolves to
 - **TreeView** — Hierarchical, expandable tree of nodes with keyboard navigation and selection
 - **User** — Identity composite: an avatar with a name, description, and optional action slot
 - **UsersTablePage** — Full users management page with table, search, and invite action.
+- **VirtualList** — Renders only the rows inside the viewport, so list length costs no extra DOM
 - **VisuallyHidden** — Hides content visually while keeping it available to screen readers
 
 ### Overlay
@@ -381,6 +384,7 @@ routing break after adding one of these, check that the import resolves to
 - **Dock** — Fixed bottom navigation bar for mobile app shells with up to 5 items
 - **Header** — App top bar with brand, primary navigation links, and an actions slot
 - **HeaderPanel** — Non-modal panel anchored below the shell header at the inline-end edge — hosts notifications, app switcher, user settings
+- **LargeTitleHeader** — Scrolling region whose large title collapses into a compact sticky bar as it scrolls
 - **Link** — Styled anchor for navigation, standalone or inline within prose
 - **Menubar** — Horizontal application menu bar with keyboard-navigable dropdown menus
 - **MenuButton** — A button that opens an anchored action menu of one-shot commands
@@ -427,6 +431,7 @@ routing break after adding one of these, check that the import resolves to
 
 ### Feedback
 
+- **InfiniteScroll** — Loads the next page when the end of a list scrolls into view
 - **InlineLoading** — Compact inline status indicator that pairs a label with a loading, success, or error state
 - **Notification** — Inline, actionable notification banner that surfaces a titled message with an optional recovery action
 - **Progress** — Horizontal bar showing the completion progress of a tracked operation

package/dist/badge/badge.js

@@ -3,7 +3,7 @@ import { cn as t, normalizeTone as n } from "@cascivo/core/pure";
 import { jsx as r } from "react/jsx-runtime";
 //#region ../components/src/badge/badge.tsx
 var i = {
-	neutral: "default",
+	neutral: "secondary",
 	info: "info",
 	success: "success",
 	warning: "warning",

package/dist/context-menu/context-menu.js

@@ -1,89 +1,93 @@
 "use client";
 
 import e from "./context-menu.module.js";
-import { useRef as t } from "react";
-import { useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Children as t, isValidElement as n, useRef as r } from "react";
+import { useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region ../components/src/context-menu/context-menu.tsx
-function s({ children: s }) {
-	i();
-	let c = t(null), l = t(null), u = n(!1), d = () => {
-		let e = c.current;
+function l() {
+	return globalThis.process?.env?.NODE_ENV !== "production";
+}
+function u({ children: u }) {
+	o();
+	let f = r(null), p = r(null), m = i(!1), h = () => {
+		let e = f.current;
 		return e ? Array.from(e.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")) : [];
-	}, f = (e) => {
-		let t = d();
+	}, g = (e) => {
+		let t = h();
 		t.length !== 0 && t[e(t, t.indexOf(document.activeElement))]?.focus();
-	}, p = (e) => {
+	}, _ = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), f((e, t) => t < 0 ? 0 : (t + 1) % e.length);
+				e.preventDefault(), g((e, t) => t < 0 ? 0 : (t + 1) % e.length);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), f((e, t) => t < 0 ? e.length - 1 : (t - 1 + e.length) % e.length);
+				e.preventDefault(), g((e, t) => t < 0 ? e.length - 1 : (t - 1 + e.length) % e.length);
 				break;
 			case "Home":
-				e.preventDefault(), f(() => 0);
+				e.preventDefault(), g(() => 0);
 				break;
 			case "End":
-				e.preventDefault(), f((e) => e.length - 1);
+				e.preventDefault(), g((e) => e.length - 1);
 				break;
 		}
 	};
-	r(() => {
-		let e = c.current;
-		if (e) if (u.value) {
+	a(() => {
+		let e = f.current;
+		if (e) if (m.value) {
 			try {
 				e.showPopover();
 			} catch {}
-			d()[0]?.focus();
+			h()[0]?.focus();
 		} else try {
 			e.hidePopover();
 		} catch {}
-	}), r(() => {
-		let e = c.current;
+	}), a(() => {
+		let e = f.current;
 		if (!e) return;
 		let t = (e) => {
-			e.newState === "closed" && (u.value = !1);
+			e.newState === "closed" && (m.value = !1);
 		};
 		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
 	});
-	function m(e) {
+	function v(e) {
 		e.preventDefault();
-		let t = l.current;
-		t && (t.style.setProperty("--cascivo-context-x", `${e.clientX}px`), t.style.setProperty("--cascivo-context-y", `${e.clientY}px`), u.value = !0);
+		let t = p.current;
+		t && (t.style.setProperty("--cascivo-context-x", `${e.clientX}px`), t.style.setProperty("--cascivo-context-y", `${e.clientY}px`), m.value = !0);
 	}
-	let [h, ...g] = Array.isArray(s) ? s : [s];
-	return /* @__PURE__ */ o("div", {
-		ref: l,
-		onContextMenu: m,
+	let y = t.toArray(u), b = y.filter((e) => n(e) && e.type === d), x = y.filter((e) => !b.includes(e));
+	if (b.length === 0 && l()) throw Error("<ContextMenu> requires at least one <ContextMenuItem> child. Items are matched by component identity, so they must be direct children — not wrapped in a fragment or another component.");
+	return /* @__PURE__ */ c("div", {
+		ref: p,
+		onContextMenu: v,
 		className: e.wrapper,
-		children: [h, /* @__PURE__ */ a("div", {
-			ref: c,
+		children: [x, /* @__PURE__ */ s("div", {
+			ref: f,
 			popover: "auto",
 			role: "menu",
-			"data-state": u.value ? "open" : "closed",
+			"data-state": m.value ? "open" : "closed",
 			className: e.menu,
-			onKeyDown: p,
-			children: g
+			onKeyDown: _,
+			children: b
 		})]
 	});
 }
-function c({ children: t, onSelect: n, disabled: r }) {
+function d({ children: t, onSelect: n, disabled: r }) {
 	function i() {
 		r || n();
 	}
-	function o(e) {
+	function a(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), i());
 	}
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ s("div", {
 		role: "menuitem",
 		tabIndex: r ? -1 : 0,
 		"aria-disabled": r,
 		onClick: i,
-		onKeyDown: o,
+		onKeyDown: a,
 		className: e.item,
 		children: t
 	});
 }
 //#endregion
-export { s as ContextMenu, c as ContextMenuItem };
+export { u as ContextMenu, d as ContextMenuItem };

package/dist/index.d.ts

@@ -22,7 +22,7 @@
  *   npx -y @cascivo/docs            (index; `npx @cascivo/docs <component>` for one doc)
  */
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, FormHTMLAttributes, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, LiHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SelectHTMLAttributes, TextareaHTMLAttributes, TimeHTMLAttributes } from "react";
-import { DismissableLayer, DismissableLayerProps, ErrorBoundary, FocusScope, LinkComponent, LinkComponentProps, Machine, MachineConfig, Portal, Presence, ProgressInput, RovingOrientation, Signal, Slot, SlotProps, SpaceStep, SuspenseBoundary, ToneInput, UseClipboardOptions, UseClipboardReturn, UseControllableSignalOptions, UseDisclosureOptions, UseDisclosureReturn, VisuallyHidden, VisuallyHiddenProps, batch, cn, composeRefs, computePosition, computed, createMachine, createScope, createStreamBuffer, effect, getLinkComponent, mergeProps, setLinkComponent, signal, useAnchorPosition, useClipboard, useComputed, useControllableSignal, useDisclosure, useEffectPropSignal, useId, useMachine, useMediaQuery, useRovingFocus, useScope, useScrollLock, useSignal, useSignalEffect, useSignals, useStreamBuffer, useTypeahead } from "@cascivo/core";
+import { DismissableLayer, DismissableLayerProps, ErrorBoundary, FocusScope, LinkComponent, LinkComponentProps, Machine, MachineConfig, Portal, Presence, ProgressInput, RovingOrientation, Signal, Slot, SlotProps, SpaceStep, SuspenseBoundary, ThemeProvider, ThemeProviderProps, ToneInput, UseClipboardOptions, UseClipboardReturn, UseControllableSignalOptions, UseDisclosureOptions, UseDisclosureReturn, VisuallyHidden, VisuallyHiddenProps, applyTheme, batch, cn, composeRefs, computePosition, computed, createMachine, createScope, createStreamBuffer, effect, getLinkComponent, mergeProps, setLinkComponent, setTheme, signal, themePreloadScript, themeSignal, useAnchorPosition, useClipboard, useComputed, useControllableSignal, useDisclosure, useEffectPropSignal, useId, useMachine, useMediaQuery, useRovingFocus, useScope, useScrollLock, useSignal, useSignalEffect, useSignals, useStreamBuffer, useTheme, useTypeahead } from "@cascivo/core";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
@@ -668,6 +668,26 @@ declare function TabsList({
 interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
   value: string;
   disabled?: boolean;
+  /**
+   * Render your own element instead of the `<button>`, keeping every tab behaviour
+   * (`role="tab"`, `aria-selected`, `aria-controls`, the roving `tabIndex`, `data-state`)
+   * and the tab styling.
+   *
+   * This exists for **URL-driven tabs**, the canonical dashboard shape: one route per tab.
+   * Navigating from `onValueChange` instead loses middle-click, cmd-click, open-in-new-tab
+   * and a crawlable `href` — a real anchor gives you all four for free.
+   *
+   * ```tsx
+   * <TabsTrigger value="overview" asChild>
+   *   <Link to="/projects/$id/overview">Overview</Link>
+   * </TabsTrigger>
+   * ```
+   *
+   * With `asChild`, `disabled` becomes `aria-disabled`: it is not a valid attribute on an
+   * anchor, and a slotted element gets no `type` either. See
+   * [USING-WITH-A-ROUTER.md](../../../../docs/USING-WITH-A-ROUTER.md) for the full recipe.
+   */
+  asChild?: boolean;
 }
 /**
  * `forwardRef` so `ref` reaches the tab `<button>` — see `textarea.tsx` for the full
@@ -4126,6 +4146,219 @@ declare function Dock({
   className,
   ariaLabel
 }: DockProps): import("react").JSX.Element;
+interface LargeTitleHeaderProps {
+  /** The page title. Rendered as the large heading and mirrored in the collapsed bar. */
+  title: string;
+  /** Content of the scrolling region, rendered below the title. */
+  children: ReactNode;
+  /** Leading slot of the compact bar — typically a back control. */
+  leading?: ReactNode;
+  /** Trailing slot of the compact bar — typically icon buttons. */
+  actions?: ReactNode;
+  /**
+   * Heading level for the title, mapping to h1–h3.
+   *
+   * @defaultValue `1`
+   * @see the component manifest
+   */
+  level?: 1 | 2 | 3;
+  /**
+   * Scroll distance (px) over which the large title collapses into the bar.
+   *
+   * @defaultValue `48`
+   * @see the component manifest
+   */
+  collapseDistance?: number;
+  className?: string;
+}
+/**
+ * Scrolling region with an iOS-style page header: the large title scrolls away and a
+ * compact sticky bar reveals the same title in its place.
+ *
+ * The collapse is a CSS scroll-driven animation — no scroll listener, no
+ * IntersectionObserver, no client JavaScript of any kind, so this renders complete from
+ * the server and never hydrates. Where `animation-timeline` is unsupported the mirrored
+ * title stays hidden and the region degrades to a plain sticky bar above a heading; the
+ * heading itself is always present, so no content depends on the enhancement.
+ *
+ * The component owns the scroll container so the sticky bar and the scroll timeline
+ * cannot be broken by the surrounding markup. Give it a parent with a resolved height.
+ */
+declare function LargeTitleHeader({
+  title,
+  children,
+  leading,
+  actions,
+  level,
+  collapseDistance,
+  className
+}: LargeTitleHeaderProps): import("react").JSX.Element;
+interface InfiniteScrollProps {
+  /** Called when the sentinel comes into view, or the button is activated. */
+  onLoadMore: () => Promise<unknown> | unknown;
+  /**
+   * When true, stops observing and renders nothing — there are no more pages.
+   *
+   * @defaultValue `false`
+   * @see the component manifest
+   */
+  disabled?: boolean;
+  /**
+   * How far ahead of the end to start loading, as an IntersectionObserver root margin.
+   *
+   * @defaultValue `'200px'`
+   * @see the component manifest
+   */
+  rootMargin?: string;
+  labels?: {
+    loadMore?: string;
+    loading?: string;
+  };
+  className?: string;
+}
+/**
+ * Loads the next page when the end of a list comes into view.
+ *
+ * Place it as the last child of the scrolling region, after the list. It renders a real
+ * "Load more" button and auto-activates it via an `IntersectionObserver` — so the next
+ * page is reachable by keyboard and by screen reader, not only by scrolling, which is the
+ * standing accessibility complaint against scroll-only infinite lists. Re-entry is
+ * guarded, so a sentinel that stays visible after a short page cannot loop.
+ */
+declare function InfiniteScroll({
+  onLoadMore,
+  disabled,
+  rootMargin,
+  labels,
+  className
+}: InfiniteScrollProps): import("react").JSX.Element | null;
+interface ReorderItem {
+  id: string;
+  label: ReactNode;
+  /** Plain-text name used in announcements when `label` is not a string. */
+  name?: string;
+}
+interface ReorderListProps {
+  value: ReorderItem[];
+  onValueChange: (value: ReorderItem[]) => void;
+  /**
+   * When true, disables the control and removes it from the tab order.
+   *
+   * @defaultValue `false`
+   * @see the component manifest
+   */
+  disabled?: boolean;
+  labels?: {
+    handle?: string;
+    grabbed?: string;
+    moved?: string;
+    dropped?: string;
+    cancelled?: string;
+  };
+  className?: string;
+}
+/**
+ * A list whose rows can be reordered by pointer drag or entirely by keyboard.
+ *
+ * Each row carries a drag handle. Space or Enter picks the row up, Arrow keys move it,
+ * Space or Enter drops it, and Escape restores the order it had before the pick-up — the
+ * keyboard path Ionic's pointer-only `ion-reorder` has no equivalent for. Every transition
+ * is announced through a polite live region.
+ */
+declare function ReorderList({
+  value,
+  onValueChange,
+  disabled,
+  labels,
+  className
+}: ReorderListProps): import("react").JSX.Element;
+interface VirtualListProps<Item> {
+  items: Item[];
+  /** Fixed row height in px. Rows must all be this tall for positions to be correct. */
+  itemHeight: number;
+  /**
+   * Height of the scrolling viewport, in px.
+   *
+   * Deliberately not a CSS length: the visible row count is computed from this number, and
+   * a relative length like `100%` cannot be resolved without measuring. Wrap the list and
+   * pass a measured px value if the height has to be fluid.
+   */
+  height: number;
+  renderItem: (item: Item, index: number) => ReactNode;
+  /**
+   * Extra rows rendered above and below the visible window, to cover fast scrolling.
+   *
+   * @defaultValue `3`
+   * @see the component manifest
+   */
+  overscan?: number;
+  /** Accessible label for the list; defaults to none, so label it when standalone. */
+  ariaLabel?: string;
+  className?: string;
+}
+/**
+ * Renders only the rows inside the scrolled viewport, so a list of any length costs a
+ * constant number of DOM nodes.
+ *
+ * Row height is fixed: positions are arithmetic rather than measured, which keeps scrolling
+ * on the compositor and avoids a layout pass per frame. Each rendered row carries
+ * `aria-setsize` and `aria-posinset` for the **full** collection, so assistive technology
+ * reports "3 of 10000" rather than the size of the rendered window.
+ */
+declare function VirtualList<Item>({
+  items,
+  itemHeight,
+  height,
+  renderItem,
+  overscan,
+  ariaLabel,
+  className
+}: VirtualListProps<Item>): import("react").JSX.Element;
+interface WheelPickerOption {
+  value: string;
+  label: string;
+}
+interface WheelPickerProps {
+  options: WheelPickerOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  /**
+   * How many rows are visible. Odd numbers keep the selection centred.
+   *
+   * @defaultValue `5`
+   * @see the component manifest
+   */
+  visibleCount?: number;
+  /**
+   * Row height in px.
+   *
+   * @defaultValue `36`
+   * @see the component manifest
+   */
+  itemHeight?: number;
+  ariaLabel?: string;
+  className?: string;
+}
+/**
+ * iOS-style drum picker: a column of options that scrolls and snaps to a centred selection.
+ *
+ * The wheel is CSS scroll-snap, not a JavaScript gesture engine — momentum, rubber-banding
+ * and snapping are the platform's, so the whole gesture runs on the compositor and behaves
+ * natively on every device. JavaScript only reads which row settled and moves the column
+ * when the value changes from outside.
+ *
+ * Semantically a single-select listbox whose selection follows focus: Arrow keys, Home and
+ * End move the selection and scroll to match, so there is nothing to confirm.
+ */
+declare function WheelPicker({
+  options,
+  value,
+  onValueChange,
+  visibleCount,
+  itemHeight,
+  ariaLabel,
+  className
+}: WheelPickerProps): import("react").JSX.Element;
 interface DrawerProps {
   /** Controlled open state. */
   open?: boolean;
@@ -4749,143 +4982,4 @@ declare function PageHeader({
   actions,
   className
 }: PageHeaderProps): import("react").JSX.Element;
-/**
- * Set the active theme imperatively, from anywhere. Persists the choice and
- * drives the `data-theme` attribute through the mounted {@link ThemeProvider}.
- *
- * Requires a mounted {@link ThemeProvider} — this writes the signal, the provider writes
- * the DOM. Without one, nothing restyles (dev builds warn). To write the attribute
- * directly, with no provider and no React, use {@link applyTheme}.
- */
-declare function setTheme(next: string): void;
-/**
- * Write a theme onto an element directly, with no provider and no React.
- *
- * The escape hatch for imperative setups: a theme toggle in a non-React shell, a
- * pre-hydration inline script, a Storybook decorator, an e2e test. Also updates the theme
- * signal, so a React tree reading {@link useTheme} stays in sync.
- *
- * `setTheme` deliberately does **not** do this itself: it is SSR-callable, and
- * `ThemeProvider` can scope a theme to any subtree via its `target` ref. A direct document
- * write inside `setTheme` would break scoped theming and touch `document` on the server.
- *
- * ```ts
- * applyTheme('midnight')                       // <html data-theme="midnight">
- * applyTheme('warm', panelRef.current)         // scope to a subtree
- * ```
- *
- * No-op on the server (no `document`).
- */
-declare function applyTheme(next: string, target?: HTMLElement | null): void;
-/**
- * Read and set the active theme. Returns the current theme **name** (a plain
- * string) and a setter — the component re-renders when the theme changes with no
- * signal handling on your part (this hook calls `useSignals()` for you, so it
- * works in React apps with no Babel transform). This is the React-idiomatic shape;
- * for signal-native code (`computed()`, `effect()`, Preact) use {@link themeSignal}.
- *
- * ```tsx
- * const [theme, setTheme] = useTheme()
- * return <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
- *   {theme}
- * </button>
- * ```
- */
-declare function useTheme(): readonly [string, (next: string) => void];
-/**
- * The underlying theme signal, for signal-native code — `computed()`, `effect()`,
- * or a Preact app where signals are natively reactive. Most React apps want
- * {@link useTheme}, which hands back a plain string and handles subscription.
- */
-declare function themeSignal(): Signal<string>;
-interface ThemeProviderProps {
-  /**
-   * Theme to use when nothing is persisted yet. When set, it **wins over** the
-   * visitor's OS `prefers-color-scheme` — pass it for a "dark by default" or
-   * custom-theme (`'midnight'`, …) app. Omit it to follow the OS (light/dark),
-   * falling back to `'light'`. Precedence: persisted value > `defaultTheme` (if
-   * set) > OS preference > `'light'`.
-   */
-  defaultTheme?: string;
-  /**
-   * Controlled theme. When set, the provider mirrors it on every render and the
-   * persisted value is ignored — the parent owns the state (React semantics).
-   */
-  value?: string;
-  /** localStorage key for the persisted choice. Defaults to `cascivo-theme`. */
-  storageKey?: string;
-  /** Attribute written to the target element. Defaults to `data-theme`. */
-  attribute?: string;
-  /**
-   * Element to theme. Omit to theme the whole document (`<html>`). Pass a ref to
-   * a container to scope the theme to a subtree — cascivo themes resolve against
-   * the nearest `data-theme`, so a scoped subtree can differ from the page.
-   */
-  target?: RefObject<HTMLElement | null>;
-  /** Called whenever the active theme changes. */
-  onChange?: (theme: string) => void;
-  /**
-   * CSP nonce forwarded to the inline attribute-setter script emitted for the
-   * controlled ({@link ThemeProviderProps.value}) SSR flow. Set it to match your
-   * Content-Security-Policy `script-src 'nonce-…'`.
-   */
-  nonce?: string;
-  children?: ReactNode;
-}
-/**
- * Binds the active theme signal to a `data-theme` attribute and persists the
- * choice — the reusable, SSR-safe form of the wiring apps otherwise hand-roll.
- *
- * - No flash of the wrong theme: pair with {@link themePreloadScript} in your
- *   document `<head>` so the correct theme paints on first byte.
- * - No banned React hooks: the DOM write happens in `useSignalEffect`, not
- *   `useEffect`; there is no `useState`/`useContext`.
- * - Uncontrolled by default (persists to localStorage); pass `value` to control.
- * - SSR-safe when controlled: with a `value` (and no scoped `target`), the
- *   provider renders a tiny inline script that sets `data-theme` during HTML
- *   parsing, so the server-rendered first paint is themed — no flash, no
- *   hydration mismatch (the same markup renders on both sides; the client effect
- *   owns every update after hydration). For the uncontrolled/persisted flow, pair
- *   with {@link themePreloadScript} in `<head>` instead.
- */
-declare function ThemeProvider({
-  defaultTheme,
-  value,
-  storageKey,
-  attribute,
-  target,
-  onChange,
-  nonce,
-  children
-}: ThemeProviderProps): ReactNode;
-/**
- * A tiny script to inline in your document `<head>` (before the app bundle) so
- * the persisted theme paints on the first byte — no flash of the wrong theme on
- * SSR or a hard reload. Pass the same `storageKey`/`attribute`/`defaultTheme`
- * you give {@link ThemeProvider}.
- *
- * Precedence matches {@link ThemeProvider}: persisted value > `defaultTheme`
- * (if set) > OS `prefers-color-scheme` > `'light'`. Passing `defaultTheme`
- * suppresses the OS check, so a "dark by default" app stays dark on a light-OS
- * visitor.
- *
- * The script sets `data-theme` **before** React hydrates, so add
- * `suppressHydrationWarning` to the element that carries the attribute (usually
- * `<html>`) — the mutation is intentional, and without the flag React 19 logs a
- * hydration mismatch.
- *
- * ```tsx
- * // Next.js app/layout.tsx
- * <html suppressHydrationWarning>
- *   <head>
- *     <script dangerouslySetInnerHTML={{ __html: themePreloadScript({ defaultTheme: 'dark' }) }} />
- *   </head>
- * </html>
- * ```
- */
-declare function themePreloadScript(options?: {
-  storageKey?: string;
-  attribute?: string;
-  defaultTheme?: string;
-}): string;
-export { Accordion, AccordionContent, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, ActionSheet, ActionSheetAction, ActionSheetProps, Alert, AlertDialog, AlertDialogLabels, AlertDialogProps, AlertProps, AppShell, AppShellProps, AspectRatio, AspectRatioProps, AutoGrid, AutoGridProps, Avatar, AvatarGroup, AvatarGroupLabels, AvatarGroupProps, AvatarProps, Badge, BadgeProps, Blockquote, BlockquoteProps, BottomSheet, BottomSheetProps, Breadcrumb, BreadcrumbItem, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Calendar, CalendarLabels, CalendarProps, Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, Carousel, CarouselLabels, CarouselProps, Center, CenterProps, ChatBubble, ChatBubbleProps, ChatBubbleSide, Checkbox, CheckboxCard, CheckboxCardProps, CheckboxProps, Code, type CodeLang, CodeProps, CodeSnippet, CodeSnippetProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerLabels, ColorPickerProps, Column, Columns, ColumnsProps, Combobox, ComboboxLabels, ComboboxOption, ComboboxProps, CommandAction, CommandGroup, CommandItem, CommandMenu, CommandMenuProps, CommandPage, CommandScope, CommandStatus, Comparison, ComparisonProps, ContainedList, ContainedListItem, ContainedListItemProps, ContainedListProps, ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuProps, CopyButton, CopyButtonProps, DataList, DataListItem, DataListProps, DataTable, DataTableLabels, DataTableProps, DatePicker, DatePickerLabels, DatePickerProps, DateRange, DateRangePicker, DateRangePickerLabels, DateRangePickerProps, DateRangePreset, DismissableLayer, type DismissableLayerProps, Dock, DockItem, DockProps, Drawer, DrawerProps, Dropdown, DropdownItem, DropdownProps, Editable, EditableProps, EmptyState, EmptyStateProps, ErrorBoundary, Fab, FabAction, FabProps, Field, FieldProps, FileUploader, FileUploaderLabels, FileUploaderProps, Filter, FilterOption, FilterProps, FilterVariant, Flex, FlexProps, FocusScope, Form, FormConfig, FormProps, FormStore, FuzzyMatch, Grid, GridAlign, GridItem, GridItemProps, GridProps, Header, HeaderLabels, HeaderLink, HeaderPanel, HeaderPanelLabels, HeaderPanelProps, HeaderProps, Heading, HeadingLevel, HeadingProps, HeadingSize, HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, IconButton, IconButtonProps, Image, ImageProps, Indicator, IndicatorPlacement, IndicatorProps, InlineLoading, InlineLoadingProps, InlineLoadingStatus, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, InputProps, Item, ItemActions, ItemActionsProps, ItemContent, ItemContentProps, ItemDescription, ItemDescriptionProps, ItemMedia, ItemMediaProps, ItemProps, ItemTitle, ItemTitleProps, Join, JoinOrientation, JoinProps, Kbd, KbdProps, Label, LabelProps, Link, type LinkComponent, type LinkComponentProps, LinkProps, List, ListItem, ListItemProps, ListProps, LogLevel, LogLine, LogViewer, LogViewerLabels, LogViewerProps, type Machine, type MachineConfig, Menu, MenuButton, MenuButtonItem, MenuButtonProps, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, MenuTriggerProps, Menubar, MenubarBaseProps, MenubarItem, MenubarMenu, MenubarProps, Modal, ModalProps, MultiSelect, MultiSelectLabels, MultiSelectOption, MultiSelectProps, NativeSelect, NativeSelectOption, NativeSelectProps, NavigationMenu, NavigationMenuItem, NavigationMenuProps, Notification, NotificationProps, NotificationVariant, NumberInput, NumberInputProps, OtpInput, OtpInputProps, OverflowMenu, OverflowMenuItem, OverflowMenuProps, PageHeader, PageHeaderProps, Pagination, PaginationLabels, PaginationProps, PasswordInput, PasswordInputLabels, PasswordInputProps, Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps, Portal, Presence, Progress, ProgressBar, ProgressBarProps, ProgressCircle, ProgressCircleProps, ProgressIndicator, ProgressIndicatorProps, ProgressProps, ProgressSize, ProgressStep, ProgressVariant, Prose, ProseProps, PullToRefresh, PullToRefreshProps, QrCode, QrCodeProps, RadialProgress, RadialProgressProps, RadialProgressSize, RadialProgressVariant, Radio, RadioCard, RadioCardGroup, RadioCardGroupProps, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, RatingGroup, RatingGroupLabels, RatingGroupProps, RelativeTime, RelativeTimeProps, Resizable, ResizableProps, Responsive, ScrollArea, ScrollAreaProps, Search, SearchProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, ShellHeader, ShellHeaderAction, ShellHeaderBrand, ShellHeaderLabels, ShellHeaderNavItem, ShellHeaderNavLink, ShellHeaderNavMenu, ShellHeaderNavMenuItem, ShellHeaderProps, SideNav, SideNavGroup, SideNavItem, SideNavLinkProps, SideNavLinkSubItem, SideNavProps, SideNavSubItem, SideNavTone, Skeleton, SkeletonProps, SkipNavLink, SkipNavLinkProps, SkipNavTarget, SkipNavTargetProps, Slider, SliderProps, Slot, type SlotProps, SortDirection, SortState, Spacer, SpacerProps, Spinner, SpinnerProps, Stack, StackProps, type StandardSchemaV1, Stat, StatProps, Status, StatusProps, Step, StepState, Steps, StepsProps, StructuredList, StructuredListItem, StructuredListProps, SuspenseBoundary, Swap, SwapMode, SwapProps, SwipeAction, SwipeItem, SwipeItemProps, Switcher, SwitcherEntry, SwitcherLink, SwitcherProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsProps, TabsTrigger, TabsTriggerProps, Tag, TagProps, TagsInput, TagsInputProps, Text, TextProps, Textarea, TextareaProps, ThemeProvider, type ThemeProviderProps, Tile, TileProps, TimePicker, TimePickerProps, Timeline, TimelineItem, TimelineProps, ToastOptions, ToastProvider, ToastVariant, Toc, TocItem, TocProps, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, Toggletip, ToggletipPlacement, ToggletipProps, Tooltip, TooltipProps, TreeNode, TreeView, TreeViewProps, UploaderFile, type UseClipboardOptions, type UseClipboardReturn, type UseControllableSignalOptions, type UseDisclosureOptions, type UseDisclosureReturn, type UsePopoverOptions, type UsePopoverReturn, type UseTocFromRegionOptions, User, UserProps, VisuallyHidden, VisuallyHiddenProps, applyTheme, batch, cn, composeRefs, computePosition, computed, createForm, createMachine, createScope, createStreamBuffer, dismissAllToasts, effect, fuzzyMatch, fuzzyScore, getLinkComponent, mergeProps, setLinkComponent, setTheme, signal, themePreloadScript, themeSignal, treeViewMessages, useAnchorPosition, useClipboard, useComputed, useControllableSignal, useDisclosure, useEffectPropSignal, useForm, useId, useMachine, useMediaQuery, usePopover, useRovingFocus, useScope, useScrollLock, useSignal, useSignalEffect, useSignals, useStreamBuffer, useTheme, useToast, useTocFromRegion, useTypeahead };
+export { Accordion, AccordionContent, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, ActionSheet, ActionSheetAction, ActionSheetProps, Alert, AlertDialog, AlertDialogLabels, AlertDialogProps, AlertProps, AppShell, AppShellProps, AspectRatio, AspectRatioProps, AutoGrid, AutoGridProps, Avatar, AvatarGroup, AvatarGroupLabels, AvatarGroupProps, AvatarProps, Badge, BadgeProps, Blockquote, BlockquoteProps, BottomSheet, BottomSheetProps, Breadcrumb, BreadcrumbItem, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Calendar, CalendarLabels, CalendarProps, Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, Carousel, CarouselLabels, CarouselProps, Center, CenterProps, ChatBubble, ChatBubbleProps, ChatBubbleSide, Checkbox, CheckboxCard, CheckboxCardProps, CheckboxProps, Code, type CodeLang, CodeProps, CodeSnippet, CodeSnippetProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerLabels, ColorPickerProps, Column, Columns, ColumnsProps, Combobox, ComboboxLabels, ComboboxOption, ComboboxProps, CommandAction, CommandGroup, CommandItem, CommandMenu, CommandMenuProps, CommandPage, CommandScope, CommandStatus, Comparison, ComparisonProps, ContainedList, ContainedListItem, ContainedListItemProps, ContainedListProps, ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuProps, CopyButton, CopyButtonProps, DataList, DataListItem, DataListProps, DataTable, DataTableLabels, DataTableProps, DatePicker, DatePickerLabels, DatePickerProps, DateRange, DateRangePicker, DateRangePickerLabels, DateRangePickerProps, DateRangePreset, DismissableLayer, type DismissableLayerProps, Dock, DockItem, DockProps, Drawer, DrawerProps, Dropdown, DropdownItem, DropdownProps, Editable, EditableProps, EmptyState, EmptyStateProps, ErrorBoundary, Fab, FabAction, FabProps, Field, FieldProps, FileUploader, FileUploaderLabels, FileUploaderProps, Filter, FilterOption, FilterProps, FilterVariant, Flex, FlexProps, FocusScope, Form, FormConfig, FormProps, FormStore, FuzzyMatch, Grid, GridAlign, GridItem, GridItemProps, GridProps, Header, HeaderLabels, HeaderLink, HeaderPanel, HeaderPanelLabels, HeaderPanelProps, HeaderProps, Heading, HeadingLevel, HeadingProps, HeadingSize, HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, IconButton, IconButtonProps, Image, ImageProps, Indicator, IndicatorPlacement, IndicatorProps, InfiniteScroll, InfiniteScrollProps, InlineLoading, InlineLoadingProps, InlineLoadingStatus, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, InputProps, Item, ItemActions, ItemActionsProps, ItemContent, ItemContentProps, ItemDescription, ItemDescriptionProps, ItemMedia, ItemMediaProps, ItemProps, ItemTitle, ItemTitleProps, Join, JoinOrientation, JoinProps, Kbd, KbdProps, Label, LabelProps, LargeTitleHeader, LargeTitleHeaderProps, Link, type LinkComponent, type LinkComponentProps, LinkProps, List, ListItem, ListItemProps, ListProps, LogLevel, LogLine, LogViewer, LogViewerLabels, LogViewerProps, type Machine, type MachineConfig, Menu, MenuButton, MenuButtonItem, MenuButtonProps, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, MenuTriggerProps, Menubar, MenubarBaseProps, MenubarItem, MenubarMenu, MenubarProps, Modal, ModalProps, MultiSelect, MultiSelectLabels, MultiSelectOption, MultiSelectProps, NativeSelect, NativeSelectOption, NativeSelectProps, NavigationMenu, NavigationMenuItem, NavigationMenuProps, Notification, NotificationProps, NotificationVariant, NumberInput, NumberInputProps, OtpInput, OtpInputProps, OverflowMenu, OverflowMenuItem, OverflowMenuProps, PageHeader, PageHeaderProps, Pagination, PaginationLabels, PaginationProps, PasswordInput, PasswordInputLabels, PasswordInputProps, Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps, Portal, Presence, Progress, ProgressBar, ProgressBarProps, ProgressCircle, ProgressCircleProps, ProgressIndicator, ProgressIndicatorProps, ProgressProps, ProgressSize, ProgressStep, ProgressVariant, Prose, ProseProps, PullToRefresh, PullToRefreshProps, QrCode, QrCodeProps, RadialProgress, RadialProgressProps, RadialProgressSize, RadialProgressVariant, Radio, RadioCard, RadioCardGroup, RadioCardGroupProps, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, RatingGroup, RatingGroupLabels, RatingGroupProps, RelativeTime, RelativeTimeProps, ReorderItem, ReorderList, ReorderListProps, Resizable, ResizableProps, Responsive, ScrollArea, ScrollAreaProps, Search, SearchProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, ShellHeader, ShellHeaderAction, ShellHeaderBrand, ShellHeaderLabels, ShellHeaderNavItem, ShellHeaderNavLink, ShellHeaderNavMenu, ShellHeaderNavMenuItem, ShellHeaderProps, SideNav, SideNavGroup, SideNavItem, SideNavLinkProps, SideNavLinkSubItem, SideNavProps, SideNavSubItem, SideNavTone, Skeleton, SkeletonProps, SkipNavLink, SkipNavLinkProps, SkipNavTarget, SkipNavTargetProps, Slider, SliderProps, Slot, type SlotProps, SortDirection, SortState, Spacer, SpacerProps, Spinner, SpinnerProps, Stack, StackProps, type StandardSchemaV1, Stat, StatProps, Status, StatusProps, Step, StepState, Steps, StepsProps, StructuredList, StructuredListItem, StructuredListProps, SuspenseBoundary, Swap, SwapMode, SwapProps, SwipeAction, SwipeItem, SwipeItemProps, Switcher, SwitcherEntry, SwitcherLink, SwitcherProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsProps, TabsTrigger, TabsTriggerProps, Tag, TagProps, TagsInput, TagsInputProps, Text, TextProps, Textarea, TextareaProps, ThemeProvider, type ThemeProviderProps, Tile, TileProps, TimePicker, TimePickerProps, Timeline, TimelineItem, TimelineProps, ToastOptions, ToastProvider, ToastVariant, Toc, TocItem, TocProps, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, Toggletip, ToggletipPlacement, ToggletipProps, Tooltip, TooltipProps, TreeNode, TreeView, TreeViewProps, UploaderFile, type UseClipboardOptions, type UseClipboardReturn, type UseControllableSignalOptions, type UseDisclosureOptions, type UseDisclosureReturn, type UsePopoverOptions, type UsePopoverReturn, type UseTocFromRegionOptions, User, UserProps, VirtualList, VirtualListProps, VisuallyHidden, VisuallyHiddenProps, WheelPicker, WheelPickerOption, WheelPickerProps, applyTheme, batch, cn, composeRefs, computePosition, computed, createForm, createMachine, createScope, createStreamBuffer, dismissAllToasts, effect, fuzzyMatch, fuzzyScore, getLinkComponent, mergeProps, setLinkComponent, setTheme, signal, themePreloadScript, themeSignal, treeViewMessages, useAnchorPosition, useClipboard, useComputed, useControllableSignal, useDisclosure, useEffectPropSignal, useForm, useId, useMachine, useMediaQuery, usePopover, useRovingFocus, useScope, useScrollLock, useSignal, useSignalEffect, useSignals, useStreamBuffer, useTheme, useToast, useTocFromRegion, useTypeahead };

package/dist/infinite-scroll/infinite-scroll.css

@@ -0,0 +1 @@
+@layer cascivo.component{._root_50go8_2{padding-block:var(--cascivo-space-4);justify-content:center;align-items:center;display:flex}._status_50go8_9{align-items:center;gap:var(--cascivo-space-2);color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-ui);display:inline-flex}._button_50go8_17{padding-inline:var(--cascivo-space-4);padding-block:var(--cascivo-space-2);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-md);color:var(--cascivo-color-foreground);font:inherit;font-size:var(--cascivo-text-ui);cursor:pointer;background:0 0;justify-content:center;align-items:center;display:inline-flex}._button_50go8_17:hover{background:var(--cascivo-color-surface-2)}._button_50go8_17:focus-visible{outline:var(--cascivo-ring-width) solid var(--cascivo-ring-color);outline-offset:2px}@media (pointer:coarse){._button_50go8_17{min-block-size:var(--cascivo-target-min-coarse,2.75rem)}}}

package/dist/infinite-scroll/infinite-scroll.js

@@ -0,0 +1,49 @@
+"use client";
+
+import { Spinner as e } from "../spinner/spinner.js";
+import t from "./infinite-scroll.module.js";
+import { useRef as n } from "react";
+import { cn as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { builtin as s, t as c } from "@cascivo/i18n";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region ../components/src/infinite-scroll/infinite-scroll.tsx
+function d({ onLoadMore: d, disabled: f = !1, rootMargin: p = "200px", labels: m, className: h }) {
+	o();
+	let g = n(null), _ = i(!1), v = n(d);
+	v.current = d;
+	let y = n(f);
+	y.current = f;
+	let b = () => {
+		_.value || y.current || (_.value = !0, Promise.resolve(v.current()).then(() => {
+			_.value = !1;
+		}, () => {
+			_.value = !1;
+		}));
+	}, x = n(b);
+	return x.current = b, a(() => {
+		let e = g.current;
+		if (!e || f || typeof IntersectionObserver > "u") return;
+		let t = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && x.current();
+		}, { rootMargin: p });
+		return t.observe(e), () => t.disconnect();
+	}), f ? null : /* @__PURE__ */ l("div", {
+		ref: g,
+		className: r(t.root, h),
+		children: _.value ? /* @__PURE__ */ u("span", {
+			className: t.status,
+			role: "status",
+			children: [/* @__PURE__ */ l(e, {
+				size: "sm",
+				"aria-hidden": "true"
+			}), m?.loading ?? c(s.infiniteScroll.loading)]
+		}) : /* @__PURE__ */ l("button", {
+			type: "button",
+			className: t.button,
+			onClick: b,
+			children: m?.loadMore ?? c(s.infiniteScroll.loadMore)
+		})
+	});
+}
+//#endregion
+export { d as InfiniteScroll };