@cascivo/react 0.16.0 → 0.17.0

package/dist/index.d.ts

@@ -22,8 +22,18 @@
  *   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";
 
+/**
+ * Button.
+ *
+ * ⚠ **DOM shape:** children are wrapped in an inner `<span>` so the loading `Spinner` can be
+ * a sibling rather than being nested inside the label. Layout CSS written against
+ * `.my-button > span` therefore targets that wrapper, not your content — one adopter's
+ * `> span { display: flex }` hit the wrapper and collapsed the spacing inside it. The wrapper
+ * is already a flex row that inherits the button's `gap`, so composing an icon with a label
+ * needs no CSS of your own.
+ */
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Selects the visual style variant.
@@ -78,7 +88,12 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
    */
   variant?: 'default' | 'outlined' | 'elevated';
   /**
-   * Inner padding of the component.
+   * Inner padding of the CARD BOX. ⚠ `padding="none"` deliberately does NOT strip the
+   * padding from CardHeader/CardContent/CardFooter — those keep their own. It means "let a
+   * flush child (a LogViewer, an image, an edge-to-edge table) reach the card's edge";
+   * zeroing both put the title flush against the border and made the mode unusable with the
+   * composition it exists for. For an edge-to-edge table, skip CardContent and pass the
+   * table as a direct child.
    *
    * @defaultValue `md`
    * @see the component manifest
@@ -128,8 +143,16 @@ declare function CardFooter({
   children,
   ...props
 }: CardFooterProps): import("react").JSX.Element;
-/** Badge-only looks that aren't a severity tone. */
-type BadgeShape = 'secondary' | 'outline' | 'primary';
+/**
+ * Badge-only looks that aren't a severity tone.
+ *
+ * Named for the PROP it types, not for a prop that does not exist. As `BadgeShape` it sat
+ * directly above `BadgeProps` in the generated `.d.ts` and read as the type of a `shape`
+ * prop, so an adopter wrote `<Badge shape="outline">` in four files before the compiler
+ * disagreed (2026-08-08 report A). A type named after a prop the component does not have is
+ * a trap of our own making.
+ */
+type BadgeVariant = 'secondary' | 'outline' | 'primary';
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   /**
    * Severity tone or badge-specific look. Accepts the catalog-wide `Tone` vocabulary
@@ -137,7 +160,7 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
    * (`default`, `destructive`, `error`) — they are aliases of the same tones, so one domain
    * enum can drive `Badge`, `Tag`, `Status` and `Notification` with no lookup table.
    */
-  variant?: ToneInput | BadgeShape;
+  variant?: ToneInput | BadgeVariant;
   size?: 'sm' | 'md';
 }
 declare function Badge({
@@ -668,6 +691,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
@@ -1441,6 +1484,14 @@ interface Column<Row> {
    * can exceed its container — the extra columns are reachable by horizontal scroll, not
    * dropped. Leave at least one free-form column unsized unless you specifically want
    * page-stable widths.
+   *
+   * ⚠ **"Leave one unsized" is necessary, not sufficient.** The leftover width is split
+   * between the unsized columns by `table-layout: auto`, which weighs them by content — so
+   * if the sized columns nearly fill the table, what remains can be narrower than the
+   * content needs and long tokens wrap mid-word (`acme-` / `storefront`). Reported at
+   * 6-of-8 columns sized. Rules of thumb: leave the widest free-form column unsized, keep
+   * the sized columns to roughly two thirds of the table, and give the free-form one a
+   * `minWidth` when the data has long unbreakable tokens like slugs or IDs.
    */
   width?: string;
   /**
@@ -1495,6 +1546,18 @@ interface DataTableProps<Row> {
     onClick: (selectedIds: string[]) => void;
   }[];
   renderExpandedRow?: (row: Row) => ReactNode;
+  /**
+   * Row height preset.
+   *
+   * ⚠ It sets a row **height floor** (`--_row-height`), so it is invisible whenever the cell
+   * content is already taller — a two-line cell or a cell containing a `Badge` stack looks
+   * identical at every density. Reported as "barely distinguishable"; the prop is working,
+   * the content is simply winning. Shrink the cell content, or set
+   * `--cascivo-data-table-cell-gap` to tighten the horizontal rhythm too.
+   *
+   * @defaultValue `normal`
+   * @see the component manifest
+   */
   density?: 'compact' | 'normal' | 'relaxed';
   /**
    * When true, applies alternating row striping.
@@ -2630,6 +2693,16 @@ declare function HeaderPanel({
   className
 }: HeaderPanelProps): import("react").JSX.Element;
 interface SwitcherLink {
+  /**
+   * Stable React key. Provide when `label`/`href` may repeat (e.g. placeholder `#` links).
+   *
+   * Without it the rows key on `href`, so three sibling teams that all link to `/` produce
+   * duplicate-key warnings on every render and the adopter has to make the hrefs artificially
+   * distinct (2026-08-08 report A). `SideNavItem`, `ShellHeaderNavLink`,
+   * `ShellHeaderNavMenuItem`, `HeaderLink` and `CommandItem` all carry this field already;
+   * `Switcher` was missed by that sweep.
+   */
+  id?: string;
   label: string;
   href: string;
   active?: boolean;
@@ -4126,6 +4199,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;
@@ -4412,6 +4698,20 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
   defaultOpen?: boolean;
   /** Fired when the nav requests open/close (burger, Escape, scrim). */
   onOpenChange?: ((open: boolean) => void) | undefined;
+  /**
+   * Inset around the main content area, as a space-scale step.
+   *
+   * ⚠ It **defaults to `6`**, not to none. `<main>` shipped with `padding: 0` for three
+   * releases, so every adopter wrote the same wrapper `<div style={{ padding: … }}>` and
+   * every app's first screenshot had its buttons clipped against the viewport edge — the CLI's
+   * own generated dashboard modelled the workaround with an inline style its sibling
+   * AGENTS.md forbids. Reported three times (2026-07-24, 2026-08-06, 2026-08-08).
+   *
+   * Pass `'none'` for a full-bleed layout that owns its own insets (a map, a split pane).
+   *
+   * @defaultValue `6`
+   */
+  padding?: SpaceStep | 'none';
   className?: string | undefined;
 }
 /**
@@ -4440,6 +4740,7 @@ declare function AppShell({
   open,
   defaultOpen,
   onOpenChange,
+  padding,
   className,
   ...props
 }: AppShellProps): import("react").JSX.Element;
@@ -4749,143 +5050,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 };

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

@@ -0,0 +1,8 @@
+import './infinite-scroll.css';
+var e = {
+	root: "_root_50go8_2",
+	status: "_status_50go8_9",
+	button: "_button_50go8_17"
+};
+//#endregion
+export { e as default };

package/dist/large-title-header/large-title-header.css

@@ -0,0 +1 @@
+@layer cascivo.component{._root_1fozn_6{background:var(--cascivo-color-surface);block-size:100%;overflow-y:auto}._bar_1fozn_12{z-index:var(--cascivo-z-raised);align-items:center;gap:var(--cascivo-space-2);min-block-size:var(--cascivo-target-min-coarse,2.75rem);padding-inline:var(--cascivo-space-4);background:var(--cascivo-color-surface);border-block-end:1px solid #0000;padding-block-start:env(safe-area-inset-top,0px);display:flex;position:sticky;inset-block-start:0}._slot_1fozn_29{align-items:center;gap:var(--cascivo-space-1);flex:1 0 0;min-inline-size:0;display:flex}._slotEnd_1fozn_37{justify-content:flex-end}._compactTitle_1fozn_41{min-inline-size:0;font-size:var(--cascivo-text-ui);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-foreground);text-overflow:ellipsis;white-space:nowrap;flex:0 auto;display:none;overflow:hidden}._largeTitle_1fozn_56{padding-inline:var(--cascivo-space-4);padding-block:var(--cascivo-space-2) var(--cascivo-space-4);font-size:var(--cascivo-text-heading-lg);font-weight:var(--cascivo-font-bold);line-height:var(--cascivo-leading-tight);color:var(--cascivo-color-foreground);letter-spacing:-.02em;margin:0}@supports (animation-timeline:scroll()){._compactTitle_1fozn_41{opacity:0;animation:linear both _cascivo-large-title-reveal_1fozn_1;animation-timeline:scroll();animation-range:0 var(--_collapse,48px);display:block}._bar_1fozn_12{animation:linear both _cascivo-large-title-hairline_1fozn_1;animation-timeline:scroll();animation-range:0 var(--_collapse,48px)}@media (prefers-reduced-motion:reduce){._compactTitle_1fozn_41,._bar_1fozn_12{animation-timing-function:step-end}}}@keyframes _cascivo-large-title-reveal_1fozn_1{to{opacity:1}}@keyframes _cascivo-large-title-hairline_1fozn_1{to{border-block-end-color:var(--cascivo-border-subtle)}}}

package/dist/large-title-header/large-title-header.js

@@ -0,0 +1,38 @@
+import e from "./large-title-header.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region ../components/src/large-title-header/large-title-header.tsx
+function i({ title: i, children: a, leading: o, actions: s, level: c = 1, collapseDistance: l = 48, className: u }) {
+	let d = `h${c}`, f = { "--_collapse": `${l}px` };
+	return /* @__PURE__ */ r("div", {
+		className: t(e.root, u),
+		style: f,
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: e.bar,
+				children: [
+					/* @__PURE__ */ n("div", {
+						className: e.slot,
+						children: o
+					}),
+					/* @__PURE__ */ n("span", {
+						"aria-hidden": "true",
+						className: e.compactTitle,
+						children: i
+					}),
+					/* @__PURE__ */ n("div", {
+						className: t(e.slot, e.slotEnd),
+						children: s
+					})
+				]
+			}),
+			/* @__PURE__ */ n(d, {
+				className: e.largeTitle,
+				children: i
+			}),
+			a
+		]
+	});
+}
+//#endregion
+export { i as LargeTitleHeader };