atlas-react-kit 0.13.0 → 1.0.0

package/dist/form/field-shell.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentProps, ReactNode } from "react";
-import { type ErrorTimingProps, type FieldMetaState } from "./field-error.js";
+import type { DateLike, DatePickerCalendarProps } from "../date-picker.js";
+import { type ErrorTimingProps, type FieldMetaState, type FormFieldBaseProps, type FormFieldMetaProps } from "./field-error.js";
 /**
  * Not a public entry. The layout and error wiring every `form/*` field
  * shares, so a field only says which control it renders. Custom controls
@@ -29,6 +30,26 @@ export declare function requiredIdFor(id: string): string;
  * text while there is one, or `undefined` when there is nothing to read.
  */
 export declare function describedBy(id: string, errorText: string | undefined, ...hintIds: Array<string | undefined>): string | undefined;
+/**
+ * Props the date and date-time fields share; each adds its own `value`,
+ * `onValueChange`, and `placeholder`.
+ */
+export type PickerFieldBaseProps = FormFieldBaseProps & FormFieldMetaProps & {
+    /** Disables the trigger so no date can be picked. */
+    disabled?: boolean;
+    /** Marks the label and adds "Required" to the trigger's description. */
+    required?: boolean;
+    /** Earliest day that can be picked; earlier days are disabled. */
+    minDate?: DateLike;
+    /** Latest day that can be picked; later days are disabled. */
+    maxDate?: DateLike;
+    /** Forwarded to the picker trigger. */
+    className?: string;
+    /** Forwarded to the picker popover. */
+    contentClassName?: string;
+    /** Day Picker options forwarded to the calendar (disabled days, etc.). */
+    calendarProps?: DatePickerCalendarProps;
+};
 /**
  * Trigger ARIA for the date and date-time fields: invalid while there is
  * error text, named "label, value" (a `<label for>` alone would hide the
@@ -53,12 +74,19 @@ export declare function pickerFieldAria(id: string, errorText: string | undefine
  * so put fields in a grid row with `items-start` to keep controls aligned.
  */
 export declare function FormFieldShell({ id, label, labelAction, description, errorText, labelFor, required, className, children, ...props }: Omit<ComponentProps<"div">, "id" | "children"> & {
+    /** Id of the control; the label, hint, and error ids derive from it. */
     id: string;
+    /** Visible label text. */
     label: string;
+    /** Content on the label's row, after the label (e.g. a mode toggle). */
     labelAction?: ReactNode;
+    /** Hint between the label and the control, with id `descriptionIdFor(id)`. */
     description?: ReactNode;
+    /** Error text under the control; `undefined` shows none. */
     errorText: string | undefined;
+    /** When false, the label does not point at the control. Default true. */
     labelFor?: boolean;
+    /** Marks the label and renders the hidden "Required" text. */
     required?: boolean;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/form/markdown-field.d.ts

@@ -1,25 +1,13 @@
-import type { ErrorTimingProps } from "./field-error.js";
-import type { TextFieldApi } from "./text-field.js";
+import type { TextFieldBaseProps } from "./text-field.js";
 /**
  * GFM body field: Write is a textarea, Preview is the sanitized Markdown
  * renderer. String-in/string-out — not a WYSIWYG document model.
  */
-export declare function FormMarkdownField({ field, id, label, placeholder, rows, showError, submitted, required, className, fieldClassName, previewClassName, }: ErrorTimingProps & {
-    field: TextFieldApi;
-    /**
-     * Control id the label points at. Defaults to `field.name`; pass a unique
-     * id when two forms on one page share a field name.
-     */
-    id?: string;
-    label: string;
+export declare function FormMarkdownField({ field, id, label, placeholder, rows, showError, submitted, required, className, fieldClassName, previewClassName, }: TextFieldBaseProps & {
+    /** Write textarea placeholder. Default "Markdown supported". */
     placeholder?: string;
+    /** Write textarea rows. Default 5. */
     rows?: number;
-    /** Sets `required` on the Write textarea and marks the label. */
-    required?: boolean;
-    /** Forwarded to the Write textarea. */
-    className?: string;
-    /** Classes for the field wrapper (label row, body, and error). */
-    fieldClassName?: string;
     /** Classes for the Preview surface, e.g. a taller `min-h-40`. */
     previewClassName?: string;
 }): import("react").JSX.Element;

package/dist/form/select-field.d.ts

@@ -1,19 +1,19 @@
 import { type ReactNode } from "react";
-import type { ErrorTimingProps, FieldMetaState } from "./field-error.js";
-type Props = ErrorTimingProps & {
+import type { FormFieldBaseProps, FormFieldMetaProps } from "./field-error.js";
+type Props = FormFieldBaseProps & FormFieldMetaProps & {
+    /** The selected item's value, or `undefined` for none. */
     value: string | undefined;
-    meta?: FieldMetaState;
-    label: string;
+    /** Called with the value of the item the person picks. */
     onValueChange: (value: string) => void;
+    /** Trigger text while no item is selected. */
     placeholder?: string;
     /** Requires a value (native form validation) and marks the label. */
     required?: boolean;
     /** Forwarded to the select trigger. */
     className?: string;
-    /** Classes for the field wrapper (label, trigger, and error). */
-    fieldClassName?: string;
     /** Forwarded to the select's option list (`SelectContent`). */
     contentClassName?: string;
+    /** The `SelectItem`s (and groups) to choose from. */
     children: ReactNode;
 };
 /** Select control with built-in field error text and invalid styling. */

package/dist/form/text-field.d.ts

@@ -1,14 +1,24 @@
-import type { ErrorTimingProps, FieldMetaState } from "./field-error.js";
+import type { FieldMetaState, FormFieldBaseProps } from "./field-error.js";
 export type TextFieldApi = {
+    /** Field name; the default control id. */
     name: string;
     state: {
+        /** Current text. */
         value: string;
+        /** Error meta; its first error shows under the control. */
         meta: FieldMetaState;
     };
+    /** Called with the new text on every change. */
     handleChange: (value: string) => void;
+    /** Called when the control loses focus, to mark the field touched. */
     handleBlur: () => void;
 };
-export declare function FormTextField({ field, id, label, placeholder, description, autoFocus, multiline, rows, inputType, showError, submitted, autoComplete, required, minLength, className, fieldClassName, }: ErrorTimingProps & {
+/**
+ * Props the text and Markdown fields share: both bind to a TanStack Form
+ * `field` and render a text control.
+ */
+export type TextFieldBaseProps = FormFieldBaseProps & {
+    /** The TanStack Form field (or the same shape) the control reads and writes. */
     field: TextFieldApi;
     /**
      * Control id the label points at. Defaults to `field.name`; pass a unique
@@ -16,21 +26,30 @@ export declare function FormTextField({ field, id, label, placeholder, descripti
      * `email`), or the second label focuses the first input.
      */
     id?: string;
-    label: string;
+    /** Sets `required` on the text control and marks the label. */
+    required?: boolean;
+    /** Forwarded to the text control (the input or textarea). */
+    className?: string;
+};
+/**
+ * Text input, or a textarea with `multiline`, bound to a TanStack Form
+ * `field`, with a label, optional hint, and the `form/*` error text.
+ */
+export declare function FormTextField({ field, id, label, placeholder, description, autoFocus, multiline, rows, inputType, showError, submitted, autoComplete, required, minLength, className, fieldClassName, }: TextFieldBaseProps & {
+    /** Text shown in the empty control. */
     placeholder?: string;
     /** Optional hint under the label (employer vs referrer, etc.). */
     description?: string;
+    /** Focuses the input on mount (ignored with `multiline`). */
     autoFocus?: boolean;
+    /** Renders a textarea instead of an input. */
     multiline?: boolean;
-    /** Textarea rows when `multiline` is set. */
+    /** Textarea rows when `multiline` is set. Default 3. */
     rows?: number;
+    /** The input's `type` when not `multiline`. Default "text". */
     inputType?: "text" | "email" | "password" | "date" | "datetime-local" | "time" | "number";
+    /** Forwarded to the control's `autoComplete`. */
     autoComplete?: string;
-    /** Sets `required` on the control and marks the label. */
-    required?: boolean;
+    /** Minimum text length (native form validation). */
     minLength?: number;
-    /** Forwarded to the input or textarea. */
-    className?: string;
-    /** Classes for the field wrapper (label, hint, control, and error). */
-    fieldClassName?: string;
 }): import("react").JSX.Element;

package/dist/form/text-field.js

@@ -4,6 +4,10 @@ import { Input } from "../input.js";
 import { Textarea } from "../textarea.js";
 import { onInputChange } from "../utils.js";
 import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
+/**
+ * Text input, or a textarea with `multiline`, bound to a TanStack Form
+ * `field`, with a label, optional hint, and the `form/*` error text.
+ */
 export function FormTextField({ field, id = field.name, label, placeholder, description, autoFocus, multiline, rows = 3, inputType = "text", showError, submitted, autoComplete, required, minLength, className, fieldClassName, }) {
     const onChange = onInputChange(field.handleChange);
     const errorText = metaErrorText(field.state.meta, { submitted, showError });

package/dist/form/toggle-group-field.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+import type { FormFieldBaseProps, FormFieldDescriptionProps, FormFieldMetaProps } from "./field-error.js";
+export type ToggleGroupFieldOption<T extends string> = {
+    /** Value passed to `onValueChange` when this item is pressed. */
+    value: T;
+    /** Content of the toggle item. */
+    label: ReactNode;
+};
+type Props<T extends string> = FormFieldBaseProps & FormFieldMetaProps & FormFieldDescriptionProps & {
+    /** The selected option, or `""` for none yet. */
+    value: T | "";
+    /** Called with an option's value; pressing the active item keeps it. */
+    onValueChange: (value: T) => void;
+    /** The items to choose from, in order. */
+    options: ToggleGroupFieldOption<T>[];
+    /** Marks the label. */
+    required?: boolean;
+    /** Disables every item in the group. */
+    disabled?: boolean;
+    /** Size of the toggle items. Default "sm". */
+    size?: "default" | "sm" | "lg";
+    /** Forwarded to the toggle group. */
+    className?: string;
+};
+/**
+ * One choice from a few as a joined outline toggle group (a segmented
+ * control), with a visible label and the `form/*` error wiring.
+ */
+export declare function FormToggleGroupField<T extends string>({ label, description, value, onValueChange, options, meta, submitted, showError, required, disabled, size, className, fieldClassName, }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/form/toggle-group-field.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
+import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, labelIdFor, metaErrorText, } from "./field-shell.js";
+/**
+ * One choice from a few as a joined outline toggle group (a segmented
+ * control), with a visible label and the `form/*` error wiring.
+ */
+export function FormToggleGroupField({ label, description, value, onValueChange, options, meta, submitted, showError, required, disabled, size = "sm", className, fieldClassName, }) {
+    const id = useId();
+    const errorText = metaErrorText(meta, { submitted, showError });
+    function handleValueChange(next) {
+        const option = options.find((o) => o.value === next);
+        if (option)
+            onValueChange(option.value);
+    }
+    return (_jsx(FormFieldShell, { id: id, label: label, labelFor: false, description: description, errorText: errorText, required: required, className: fieldClassName, children: _jsx(ToggleGroup, { id: id, type: "single", value: value, onValueChange: handleValueChange, variant: "outline", size: size, spacing: 0, disabled: disabled, "aria-labelledby": labelIdFor(id), "aria-invalid": invalidWhen(errorText), "aria-describedby": describedBy(id, errorText, description ? descriptionIdFor(id) : undefined), className: className, children: options.map((option) => (_jsx(ToggleGroupItem, { value: option.value, children: option.label }, option.value))) }) }));
+}

package/dist/info-tip.d.ts

@@ -4,15 +4,24 @@ export type InfoTipLayout = "box" | "inline";
 export type InfoTipProps = {
     /** Required name for the icon button (the glyph has no visible text). */
     label: string;
+    /** Panel heading; also names the panel. Without it the panel uses `label`. */
     title?: string;
+    /** Muted text under the title. */
     description?: React.ReactNode;
     /** Extra body after the title and description. */
     children?: React.ReactNode;
-    /** `inline` keeps the surrounding line height; the 44px hit area overflows. */
+    /**
+     * `inline` keeps the surrounding line height; the 44px hit area overflows.
+     * Default `box`.
+     */
     layout?: InfoTipLayout;
+    /** Panel side. Default `top`; Radix still flips on collision. */
     side?: React.ComponentProps<typeof PopoverContent>["side"];
+    /** Panel alignment against the trigger. Default `center`. */
     align?: React.ComponentProps<typeof PopoverContent>["align"];
+    /** Shown beside the title, e.g. a `Badge`. */
     badge?: React.ReactNode;
+    /** Replaces the default question-mark glyph. */
     icon?: React.ReactNode;
     /** Classes for the trigger button. */
     className?: string;

package/dist/internal/as-child.d.ts

@@ -0,0 +1,8 @@
+/** Not a public entry. The Slot prop that Button, Badge, and the links share. */
+export type AsChildProps = {
+    /**
+     * Render the single child (e.g. a router `Link`) with these styles instead
+     * of the default element. Default `false`.
+     */
+    asChild?: boolean;
+};

package/dist/internal/as-child.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/form-control.d.ts

@@ -9,9 +9,10 @@
 export declare const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";
 /**
  * Date and date-time picker trigger: the form-control chrome, start-aligned,
- * with muted text while empty (`data-empty`).
+ * with muted text while empty (`data-empty`). Intrinsic padding makes one
+ * line 40px tall while longer values wrap and consumer height classes work.
  */
-export declare const pickerTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background justify-start data-[empty=true]:text-muted-foreground";
+export declare const pickerTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] data-[empty=true]:text-muted-foreground";
 /** Calendar popover body: fits the viewport height and scrolls inside it. */
 export declare const pickerContentClassName = "max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0";
 /** Gutter used when a calendar popover collides with the viewport. */

package/dist/internal/form-control.js

@@ -9,9 +9,10 @@
 export const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";
 /**
  * Date and date-time picker trigger: the form-control chrome, start-aligned,
- * with muted text while empty (`data-empty`).
+ * with muted text while empty (`data-empty`). Intrinsic padding makes one
+ * line 40px tall while longer values wrap and consumer height classes work.
  */
-export const pickerTriggerClassName = `${formControlTriggerClassName} justify-start data-[empty=true]:text-muted-foreground`;
+export const pickerTriggerClassName = `${formControlTriggerClassName} h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] data-[empty=true]:text-muted-foreground`;
 /** Calendar popover body: fits the viewport height and scrolls inside it. */
 export const pickerContentClassName = "max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0";
 /** Gutter used when a calendar popover collides with the viewport. */

package/dist/internal/kanban-layout.d.ts

@@ -0,0 +1,55 @@
+/** Column id → ordered card ids, derived from the consumer's `items`. */
+export type KanbanGroups = Record<string, string[]>;
+/** Drop zone ids for the drag-time action rail. */
+export declare const KANBAN_COMPLETE_ID = "__kanban_complete__";
+export declare const KANBAN_DELETE_ID = "__kanban_delete__";
+export declare function buildKanbanGroups<T extends {
+    id: string;
+}>(columns: {
+    id: string;
+}[], items: T[], getColumnId: (item: T) => string): KanbanGroups;
+/** What dnd-kit reports at drag end, reduced to plain ids. */
+export type KanbanDropInput = {
+    itemId: string;
+    /** Droppable under the pointer: a column, a card, or a rail zone. */
+    targetId: string | null;
+    /** The target card's column, when the target is a card. */
+    targetGroup: string | null;
+    /** Column the card started in. */
+    initialGroup: string | null;
+    /** Column the card is over now. */
+    currentGroup: string | null;
+    /** Sortable index in the target column. */
+    index: number | undefined;
+};
+export type KanbanDrop = {
+    kind: "complete";
+    itemId: string;
+} | {
+    kind: "delete";
+    itemId: string;
+} | {
+    kind: "move";
+    itemId: string;
+    toColumnId: string;
+    beforeId: string | null;
+    afterId: string | null;
+};
+/**
+ * Turn a drop into a complete, delete, or move with the neighbours at the
+ * insertion slot. `null` when the drop changes nothing.
+ */
+export declare function resolveKanbanDrop(input: KanbanDropInput, groups: KanbanGroups): KanbanDrop | null;
+export type KanbanOverflowEdges = {
+    start: boolean;
+    end: boolean;
+};
+/** Whether a horizontal scroller has more content past either edge. */
+export declare function kanbanOverflowEdges(scrollLeft: number, clientWidth: number, scrollWidth: number): KanbanOverflowEdges;
+/** One "page" of columns: most of the viewport, at least one narrow column. */
+export declare function kanbanScrollStepPx(clientWidth: number): number;
+/** Smooth-scroll toward the start (`-1`) or end (`1`); no-op without a scroller. */
+export declare function kanbanScrollBy(scroller: {
+    clientWidth: number;
+    scrollBy: (options: ScrollToOptions) => void;
+} | null, direction: -1 | 1): void;

package/dist/internal/kanban-layout.js

@@ -0,0 +1,80 @@
+/** Drop zone ids for the drag-time action rail. */
+export const KANBAN_COMPLETE_ID = "__kanban_complete__";
+export const KANBAN_DELETE_ID = "__kanban_delete__";
+export function buildKanbanGroups(columns, items, getColumnId) {
+    const groups = {};
+    for (const column of columns)
+        groups[column.id] = [];
+    for (const item of items) {
+        const columnId = getColumnId(item);
+        const group = groups[columnId];
+        if (!group) {
+            console.warn(`[KanbanBoard] item "${item.id}" maps to unknown column "${columnId}" and is not rendered`);
+            continue;
+        }
+        group.push(item.id);
+    }
+    return groups;
+}
+function targetColumn(input, groups) {
+    const { targetId, targetGroup, currentGroup } = input;
+    if (targetId != null) {
+        if (targetId in groups)
+            return targetId;
+        if (targetGroup != null)
+            return targetGroup;
+        for (const [columnId, ids] of Object.entries(groups)) {
+            if (ids.includes(targetId))
+                return columnId;
+        }
+    }
+    return currentGroup;
+}
+/**
+ * Turn a drop into a complete, delete, or move with the neighbours at the
+ * insertion slot. `null` when the drop changes nothing.
+ */
+export function resolveKanbanDrop(input, groups) {
+    const { itemId, targetId, initialGroup, index: rawIndex } = input;
+    if (targetId === KANBAN_COMPLETE_ID)
+        return { kind: "complete", itemId };
+    if (targetId === KANBAN_DELETE_ID)
+        return { kind: "delete", itemId };
+    const toColumnId = targetColumn(input, groups);
+    if (!initialGroup || !toColumnId)
+        return null;
+    const columnItems = groups[toColumnId] ?? [];
+    const remaining = columnItems.filter((id) => id !== itemId);
+    const index = Math.max(0, Math.min(rawIndex ?? remaining.length, remaining.length));
+    if (initialGroup === toColumnId && index === columnItems.indexOf(itemId)) {
+        return null;
+    }
+    return {
+        kind: "move",
+        itemId,
+        toColumnId,
+        beforeId: index > 0 ? (remaining[index - 1] ?? null) : null,
+        afterId: remaining[index] ?? null,
+    };
+}
+/** Pixel slop so sub-pixel scrollWidth vs clientWidth does not flicker cues. */
+const OVERFLOW_EDGE_PX = 8;
+/** Whether a horizontal scroller has more content past either edge. */
+export function kanbanOverflowEdges(scrollLeft, clientWidth, scrollWidth) {
+    const maxScroll = Math.max(0, scrollWidth - clientWidth);
+    return {
+        start: scrollLeft > OVERFLOW_EDGE_PX,
+        end: scrollLeft < maxScroll - OVERFLOW_EDGE_PX,
+    };
+}
+/** One "page" of columns: most of the viewport, at least one narrow column. */
+export function kanbanScrollStepPx(clientWidth) {
+    return Math.max(140, Math.round(clientWidth * 0.75));
+}
+/** Smooth-scroll toward the start (`-1`) or end (`1`); no-op without a scroller. */
+export function kanbanScrollBy(scroller, direction) {
+    scroller?.scrollBy({
+        left: direction * kanbanScrollStepPx(scroller.clientWidth),
+        behavior: "smooth",
+    });
+}

package/dist/internal/kanban-plugins.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import type { DragDropProvider } from "@dnd-kit/react";
+type PluginsProp = NonNullable<ComponentProps<typeof DragDropProvider>["plugins"]>;
+/**
+ * Board plugins. AutoScroller stays (edge scroll while dragging). Feedback
+ * stays because it positions and sizes `DragOverlay`; `feedback: "none"`
+ * would leave the overlay behind. The drop animation is off so it does not
+ * snap twice against an optimistic update.
+ */
+export declare const configureKanbanPlugins: Extract<PluginsProp, (...args: never[]) => unknown>;
+/**
+ * Cards leave out OptimisticSortingPlugin: it moves DOM nodes under React and
+ * throws `removeChild` on re-render (dnd-kit #1747). Column layout comes from
+ * the consumer's `items`.
+ */
+export declare function configureCardSortablePlugins<T>(defaults: readonly T[]): T[];
+export {};

package/dist/internal/kanban-plugins.js

@@ -0,0 +1,17 @@
+import { Feedback } from "@dnd-kit/dom";
+import { OptimisticSortingPlugin } from "@dnd-kit/dom/sortable";
+/**
+ * Board plugins. AutoScroller stays (edge scroll while dragging). Feedback
+ * stays because it positions and sizes `DragOverlay`; `feedback: "none"`
+ * would leave the overlay behind. The drop animation is off so it does not
+ * snap twice against an optimistic update.
+ */
+export const configureKanbanPlugins = (defaults) => defaults.map((plugin) => plugin === Feedback ? Feedback.configure({ dropAnimation: null }) : plugin);
+/**
+ * Cards leave out OptimisticSortingPlugin: it moves DOM nodes under React and
+ * throws `removeChild` on re-render (dnd-kit #1747). Column layout comes from
+ * the consumer's `items`.
+ */
+export function configureCardSortablePlugins(defaults) {
+    return defaults.filter((plugin) => plugin !== OptimisticSortingPlugin);
+}

package/dist/internal/use-media-query.d.ts

@@ -1,7 +1,9 @@
 /** Tailwind `md` breakpoint. Used for range calendars that stack on small screens. */
 export declare const MD_MEDIA_QUERY = "(min-width: 768px)";
 /**
- * Subscribe to a CSS media query. `defaultMatches` covers SSR and environments
- * without `matchMedia` (jsdom unless the test stubs it).
+ * Subscribe to a CSS media query with `useSyncExternalStore`. The server
+ * render and hydration use `defaultMatches`, so the markup always agrees;
+ * React then re-renders with the real value. `defaultMatches` also covers
+ * environments without `matchMedia` (jsdom unless the test stubs it).
  */
 export declare function useMediaQuery(query: string, defaultMatches?: boolean): boolean;

package/dist/internal/use-media-query.js

@@ -2,26 +2,22 @@
 import * as React from "react";
 /** Tailwind `md` breakpoint. Used for range calendars that stack on small screens. */
 export const MD_MEDIA_QUERY = "(min-width: 768px)";
+function hasMatchMedia() {
+    return (typeof window !== "undefined" && typeof window.matchMedia === "function");
+}
 /**
- * Subscribe to a CSS media query. `defaultMatches` covers SSR and environments
- * without `matchMedia` (jsdom unless the test stubs it).
+ * Subscribe to a CSS media query with `useSyncExternalStore`. The server
+ * render and hydration use `defaultMatches`, so the markup always agrees;
+ * React then re-renders with the real value. `defaultMatches` also covers
+ * environments without `matchMedia` (jsdom unless the test stubs it).
  */
 export function useMediaQuery(query, defaultMatches = false) {
-    const [matches, setMatches] = React.useState(() => {
-        if (typeof window === "undefined" ||
-            typeof window.matchMedia !== "function") {
-            return defaultMatches;
-        }
-        return window.matchMedia(query).matches;
-    });
-    React.useEffect(() => {
-        if (typeof window.matchMedia !== "function")
-            return;
+    const subscribe = React.useCallback((onChange) => {
+        if (!hasMatchMedia())
+            return () => { };
         const media = window.matchMedia(query);
-        const onChange = () => setMatches(media.matches);
-        onChange();
         media.addEventListener("change", onChange);
         return () => media.removeEventListener("change", onChange);
     }, [query]);
-    return matches;
+    return React.useSyncExternalStore(subscribe, () => (hasMatchMedia() ? window.matchMedia(query).matches : defaultMatches), () => defaultMatches);
 }

package/dist/kanban.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+/**
+ * One board column. Columns render in the order given. `color` (any CSS
+ * color) draws a status dot; `badge` is trailing header meta such as a total.
+ */
+export type KanbanColumn = {
+    /** Matches what `getColumnId` returns for the column's cards. */
+    id: string;
+    /** Header text. */
+    label: string;
+    /** Any CSS color; draws a status dot before the label. No dot when omitted. */
+    color?: string;
+    /** Trailing header meta under the card count, such as a total. */
+    badge?: React.ReactNode;
+    /** Replaces the board's `emptyLabel` for this column. */
+    emptyLabel?: string;
+};
+/**
+ * Positions of the cards on either side of the drop slot (`undefined` at a
+ * column edge). Feed them to a fractional-index helper to store the order.
+ */
+export type KanbanDropTarget = {
+    /** `position` of the card above the drop slot; `undefined` at the top. */
+    beforePosition: number | undefined;
+    /** `position` of the card below the drop slot; `undefined` at the bottom. */
+    afterPosition: number | undefined;
+};
+export type KanbanBoardProps<T extends {
+    id: string;
+    position: number;
+}> = {
+    /** The board's columns, in display order. */
+    columns: KanbanColumn[];
+    /** Every card, in display order; sort by `position` first. A card whose column id is unknown is not shown. */
+    items: T[];
+    /** The id of the column a card belongs in. */
+    getColumnId: (item: T) => string;
+    /** Every drop that changes a column or the order, including same-column reorders. */
+    onMove: (item: T, toColumnId: string, target: KanbanDropTarget) => void;
+    /** Shows a Finish zone while dragging. */
+    onComplete?: (itemId: string) => void;
+    /** Shows a Remove zone while dragging. */
+    onDelete?: (itemId: string) => void;
+    /**
+     * Card body; the board adds the grip, chrome, and sorting. Cards re-render
+     * only when their item changes while this and `onCardClick` keep their
+     * identity, so define them outside the render or wrap them in `useCallback`.
+     */
+    renderCard: (item: T) => React.ReactNode;
+    /** Makes the card body a button. */
+    onCardClick?: (item: T) => void;
+    /** Skeleton cards on a first load with no items; dims the board on a refetch. */
+    isLoading?: boolean;
+    /** Text in a column with no cards. Default `"Drop here"`. */
+    emptyLabel?: string;
+    /** Text on the Finish zone. Default `"Finish"`. */
+    completeLabel?: string;
+    /** Text on the Remove zone. Default `"Remove"`. */
+    deleteLabel?: string;
+    /** Classes for the horizontal scroller that holds the columns. */
+    scrollerClassName?: string;
+    /** Classes for every column, e.g. its width. */
+    columnClassName?: string;
+    /** Classes for every card, including the one under the pointer while dragging. */
+    cardClassName?: string;
+} & Omit<React.ComponentProps<"div">, "children">;
+/**
+ * Drag-and-drop board built on dnd-kit. The consumer owns `items` and maps
+ * each to a column; the board derives its layout from them, so an optimistic
+ * cache update is the only state. Cards drag by their grip, the body stays
+ * clickable, and off-screen columns get edge fades and scroll buttons.
+ */
+declare function KanbanBoard<T extends {
+    id: string;
+    position: number;
+}>({ columns, items, getColumnId, onMove, onComplete, onDelete, renderCard, onCardClick, isLoading, emptyLabel, completeLabel, deleteLabel, className, scrollerClassName, columnClassName, cardClassName, ...props }: KanbanBoardProps<T>): React.JSX.Element;
+/** Board-shaped placeholder for a route `loading` file. */
+declare function KanbanSkeleton({ columnCount, className, columnClassName, ...props }: {
+    /** How many placeholder columns to draw. Default 4. */
+    columnCount?: number;
+    /** Classes for every placeholder column, e.g. to match the board's width. */
+    columnClassName?: string;
+} & Omit<React.ComponentProps<"div">, "children">): React.JSX.Element;
+export { KanbanBoard, KanbanSkeleton };