@particle-academy/react-fancy 5.62.0 → 5.64.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme-tokens.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Semantic theme tokens — the small set of colours the kit's DOM components\n * read, so a host can repaint the whole kit with its own palette WITHOUT\n * remapping Tailwind's `zinc` or `violet`.\n *\n * Each role is two CSS custom properties, one per mode:\n *\n *   --fancy-surface        the light value\n *   --fancy-surface-dark   the dark value\n *\n * Components read them through their var() FALLBACK, which is the colour the\n * component used before these existed:\n *\n *   bg-[color:var(--fancy-surface,var(--color-white))]\n *     dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\n *\n * So:\n *  - **Set nothing and nothing changes.** An unset custom property resolves to\n *    its fallback, which is the exact declaration the old `bg-white` produced.\n *  - **Set one and every surface follows**, wherever the variable is in scope:\n *    `:root`, `body`, or any wrapper element. No selector to match, no layer or\n *    specificity to win — a custom property is inherited, not cascaded against.\n *  - **Both modes are stated, not derived.** The dark value is a separate\n *    variable rather than a flip under `.dark`, so which one applies is decided\n *    by the host's own `dark:` variant — the same switch that drives every\n *    other `dark:` utility in the kit. (See `dark-variant.css` for a variant\n *    that follows `[data-theme=\"dark\"]` as well as `.dark`.)\n *\n * NOT covered, deliberately: colours that ENCODE DATA — chart series,\n * file-type marks, mood and confidence scales, event kinds. Repainting those\n * with a host's neutral palette would erase what they mean. A component's\n * explicit `color` prop (Badge, Button, Callout …) is also untouched: that is\n * the host choosing a hue, not the kit choosing one for it.\n *\n * `light` / `dark` are the defaults exactly as components write them in their\n * fallbacks. `tests/theme-tokens.test.tsx` fails if a component's fallback\n * disagrees with this table, so the table is the contract rather than a\n * description of it.\n */\nexport const THEME_TOKENS = {\n  surface: {\n    variable: \"--fancy-surface\",\n    darkVariable: \"--fancy-surface-dark\",\n    light: \"var(--color-white)\",\n    dark: \"var(--color-zinc-900)\",\n    description: \"Panels, cards, overlays (menus, modals, popovers, toasts), sidebars and navbars.\",\n  },\n  \"surface-muted\": {\n    variable: \"--fancy-surface-muted\",\n    darkVariable: \"--fancy-surface-muted-dark\",\n    light: \"var(--color-zinc-100)\",\n    dark: \"var(--color-zinc-800)\",\n    description: \"Hovered and selected rows, chips, inset wells, toolbar buttons.\",\n  },\n  border: {\n    variable: \"--fancy-border\",\n    darkVariable: \"--fancy-border-dark\",\n    light: \"var(--color-zinc-200)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"Outlines, dividers, separators and tracks (skeletons, progress, sliders).\",\n  },\n  \"border-strong\": {\n    variable: \"--fancy-border-strong\",\n    darkVariable: \"--fancy-border-strong-dark\",\n    light: \"var(--color-zinc-300)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"The firmer outline on form controls (inputs, checkboxes, radios) and keycaps.\",\n  },\n  input: {\n    variable: \"--fancy-input\",\n    darkVariable: \"--fancy-input-dark\",\n    light: \"var(--color-white)\",\n    dark: \"#1e1e24\",\n    description: \"The field surface of text inputs, checkboxes, radios, OTP cells and pickers.\",\n  },\n  text: {\n    variable: \"--fancy-text\",\n    darkVariable: \"--fancy-text-dark\",\n    light: \"var(--color-zinc-900)\",\n    dark: \"var(--color-zinc-100)\",\n    description: \"Strongest foreground: headings, values, field text, active items.\",\n  },\n  \"text-soft\": {\n    variable: \"--fancy-text-soft\",\n    darkVariable: \"--fancy-text-soft-dark\",\n    light: \"var(--color-zinc-700)\",\n    dark: \"var(--color-zinc-300)\",\n    description: \"Body copy and menu items: readable, one step back from text.\",\n  },\n  \"text-muted\": {\n    variable: \"--fancy-text-muted\",\n    darkVariable: \"--fancy-text-muted-dark\",\n    light: \"var(--color-zinc-500)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Descriptions, captions, secondary labels, axis labels.\",\n  },\n  \"text-faint\": {\n    variable: \"--fancy-text-faint\",\n    darkVariable: \"--fancy-text-faint-dark\",\n    light: \"var(--color-zinc-400)\",\n    dark: \"var(--color-zinc-500)\",\n    description: \"Placeholders, disabled hints, decorative icons.\",\n  },\n  \"text-subtle\": {\n    variable: \"--fancy-text-subtle\",\n    darkVariable: \"--fancy-text-subtle-dark\",\n    light: \"var(--color-zinc-600)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Inactive nav labels (Sidebar, Menu, Navbar, MultiSwitch) and secondary prose. Added 5.53.1.\",\n  },\n  \"surface-hover\": {\n    variable: \"--fancy-surface-hover\",\n    darkVariable: \"--fancy-surface-hover-dark\",\n    light: \"var(--color-zinc-50)\",\n    // Tailwind's `bg-zinc-800/50`, written out so a host's value is used as-is.\n    dark: \"color-mix(in oklab, var(--color-zinc-800) 50%, transparent)\",\n    description: \"The hover fill on nav items, list options and table rows. Added 5.53.1.\",\n  },\n  focus: {\n    variable: \"--fancy-focus\",\n    darkVariable: \"--fancy-focus-dark\",\n    light: \"var(--color-blue-500)\",\n    dark: \"var(--color-blue-400)\",\n    description: \"The focus border and ring on form controls.\",\n  },\n} as const;\n\nexport type ThemeTokenRole = keyof typeof THEME_TOKENS;\n"]}
+{"version":3,"sources":["../src/theme-tokens.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Semantic theme tokens — the small set of colours the kit's DOM components\n * read, so a host can repaint the whole kit with its own palette WITHOUT\n * remapping Tailwind's `zinc` or `violet`.\n *\n * Each role is two CSS custom properties, one per mode:\n *\n *   --fancy-surface        the light value\n *   --fancy-surface-dark   the dark value\n *\n * Components read them through their var() FALLBACK, which is the colour the\n * component used before these existed:\n *\n *   bg-[color:var(--fancy-surface,var(--color-white))]\n *     dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\n *\n * So:\n *  - **Set nothing and nothing changes.** An unset custom property resolves to\n *    its fallback, which is the exact declaration the old `bg-white` produced.\n *  - **Set one and every surface follows**, wherever the variable is in scope:\n *    `:root`, `body`, or any wrapper element. No selector to match, no layer or\n *    specificity to win — a custom property is inherited, not cascaded against.\n *  - **Both modes are stated, not derived.** The dark value is a separate\n *    variable rather than a flip under `.dark`, so which one applies is decided\n *    by the host's own `dark:` variant — the same switch that drives every\n *    other `dark:` utility in the kit. (See `dark-variant.css` for a variant\n *    that follows `[data-theme=\"dark\"]` as well as `.dark`.)\n *\n * NOT covered, deliberately: colours that ENCODE DATA — chart series,\n * file-type marks, mood and confidence scales, event kinds. Repainting those\n * with a host's neutral palette would erase what they mean. A component's\n * explicit `color` prop (Badge, Button, Callout …) is also untouched: that is\n * the host choosing a hue, not the kit choosing one for it.\n *\n * `light` / `dark` are the defaults exactly as components write them in their\n * fallbacks. `tests/theme-tokens.test.tsx` fails if a component's fallback\n * disagrees with this table, so the table is the contract rather than a\n * description of it.\n */\nexport const THEME_TOKENS = {\n  surface: {\n    variable: \"--fancy-surface\",\n    darkVariable: \"--fancy-surface-dark\",\n    light: \"var(--color-white)\",\n    dark: \"var(--color-zinc-900)\",\n    description: \"Panels, cards, overlays (menus, modals, popovers, toasts), sidebars and navbars.\",\n  },\n  \"surface-muted\": {\n    variable: \"--fancy-surface-muted\",\n    darkVariable: \"--fancy-surface-muted-dark\",\n    light: \"var(--color-zinc-100)\",\n    dark: \"var(--color-zinc-800)\",\n    description: \"Hovered and selected rows, chips, inset wells, toolbar buttons.\",\n  },\n  border: {\n    variable: \"--fancy-border\",\n    darkVariable: \"--fancy-border-dark\",\n    light: \"var(--color-zinc-200)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"Outlines, dividers, separators and tracks (skeletons, progress, sliders).\",\n  },\n  \"border-strong\": {\n    variable: \"--fancy-border-strong\",\n    darkVariable: \"--fancy-border-strong-dark\",\n    light: \"var(--color-zinc-300)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"The firmer outline on form controls (inputs, checkboxes, radios) and keycaps.\",\n  },\n  input: {\n    variable: \"--fancy-input\",\n    darkVariable: \"--fancy-input-dark\",\n    light: \"var(--color-white)\",\n    dark: \"#1e1e24\",\n    description: \"The field surface of text inputs, checkboxes, radios, OTP cells and pickers.\",\n  },\n  text: {\n    variable: \"--fancy-text\",\n    darkVariable: \"--fancy-text-dark\",\n    light: \"var(--color-zinc-900)\",\n    dark: \"var(--color-zinc-100)\",\n    description: \"Strongest foreground: headings, values, field text, active items.\",\n  },\n  \"text-soft\": {\n    variable: \"--fancy-text-soft\",\n    darkVariable: \"--fancy-text-soft-dark\",\n    light: \"var(--color-zinc-700)\",\n    dark: \"var(--color-zinc-300)\",\n    description: \"Body copy and menu items: readable, one step back from text.\",\n  },\n  \"text-muted\": {\n    variable: \"--fancy-text-muted\",\n    darkVariable: \"--fancy-text-muted-dark\",\n    light: \"var(--color-zinc-500)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Descriptions, captions, secondary labels, axis labels.\",\n  },\n  \"text-faint\": {\n    variable: \"--fancy-text-faint\",\n    darkVariable: \"--fancy-text-faint-dark\",\n    light: \"var(--color-zinc-400)\",\n    dark: \"var(--color-zinc-500)\",\n    description: \"Placeholders, disabled hints, decorative icons.\",\n  },\n  \"text-subtle\": {\n    variable: \"--fancy-text-subtle\",\n    darkVariable: \"--fancy-text-subtle-dark\",\n    light: \"var(--color-zinc-600)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Inactive nav labels (Sidebar, Menu, Navbar, MultiSwitch) and secondary prose. Added 5.53.1.\",\n  },\n  \"surface-hover\": {\n    variable: \"--fancy-surface-hover\",\n    darkVariable: \"--fancy-surface-hover-dark\",\n    light: \"var(--color-zinc-50)\",\n    // Tailwind's `bg-zinc-800/50`, written out so a host's value is used as-is.\n    dark: \"color-mix(in oklab, var(--color-zinc-800) 50%, transparent)\",\n    description: \"The hover fill on nav items, list options and table rows. Added 5.53.1.\",\n  },\n  focus: {\n    variable: \"--fancy-focus\",\n    darkVariable: \"--fancy-focus-dark\",\n    light: \"var(--color-blue-500)\",\n    dark: \"var(--color-blue-400)\",\n    description: \"The focus border and ring on form controls.\",\n  },\n} as const;\n\nexport type ThemeTokenRole = keyof typeof THEME_TOKENS;\n"]}

package/dist/inputs.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
 require('./chunk-O5IO7TCO.cjs');
+var chunkZ4UXLQSK_cjs = require('./chunk-Z4UXLQSK.cjs');
 require('./chunk-OYZDSMNP.cjs');
 require('./chunk-5FV6GMFP.cjs');
 var chunk6MDZQIMZ_cjs = require('./chunk-6MDZQIMZ.cjs');
+var chunkETNQ4AEQ_cjs = require('./chunk-ETNQ4AEQ.cjs');
 var chunkDJB3N4G3_cjs = require('./chunk-DJB3N4G3.cjs');
 require('./chunk-URTLYNZI.cjs');
 require('./chunk-QGPMVFZJ.cjs');
 var chunkIB673TEG_cjs = require('./chunk-IB673TEG.cjs');
 var chunkH7ELUIF6_cjs = require('./chunk-H7ELUIF6.cjs');
 require('./chunk-HXLSEBAL.cjs');
-var chunkZ4UXLQSK_cjs = require('./chunk-Z4UXLQSK.cjs');
-var chunkETNQ4AEQ_cjs = require('./chunk-ETNQ4AEQ.cjs');
 require('./chunk-I27K6NLX.cjs');
 var chunk2O5UXH5R_cjs = require('./chunk-2O5UXH5R.cjs');
 var chunkTLRFXSPA_cjs = require('./chunk-TLRFXSPA.cjs');
@@ -36,6 +36,10 @@ require('./chunk-ZU5Q77OT.cjs');
 
 
 
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () { return chunkZ4UXLQSK_cjs.Slider; }
+});
 Object.defineProperty(exports, "Form", {
   enumerable: true,
   get: function () { return chunk6MDZQIMZ_cjs.Form; }
@@ -44,6 +48,10 @@ Object.defineProperty(exports, "FormProvider", {
   enumerable: true,
   get: function () { return chunk6MDZQIMZ_cjs.FormProvider; }
 });
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () { return chunkETNQ4AEQ_cjs.Checkbox; }
+});
 Object.defineProperty(exports, "CheckboxGroup", {
   enumerable: true,
   get: function () { return chunkDJB3N4G3_cjs.CheckboxGroup; }
@@ -56,14 +64,6 @@ Object.defineProperty(exports, "RadioGroup", {
   enumerable: true,
   get: function () { return chunkH7ELUIF6_cjs.RadioGroup; }
 });
-Object.defineProperty(exports, "Slider", {
-  enumerable: true,
-  get: function () { return chunkZ4UXLQSK_cjs.Slider; }
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function () { return chunkETNQ4AEQ_cjs.Checkbox; }
-});
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function () { return chunk2O5UXH5R_cjs.Switch; }

package/dist/inputs.js

@@ -1,15 +1,15 @@
 import './chunk-VXHFR5MV.js';
+export { Slider } from './chunk-NVXTHTJI.js';
 import './chunk-NW3GJWJ7.js';
 import './chunk-ORCXPDDG.js';
 export { Form, FormProvider } from './chunk-PQWQ5K6J.js';
+export { Checkbox } from './chunk-OTM7RL2L.js';
 export { CheckboxGroup } from './chunk-TAYJSIOP.js';
 import './chunk-V4EARA4F.js';
 import './chunk-SHDSKHCC.js';
 export { MultiSwitch } from './chunk-YUNOVQQJ.js';
 export { RadioGroup } from './chunk-4FH2JHUY.js';
 import './chunk-GNHQVPZP.js';
-export { Slider } from './chunk-NVXTHTJI.js';
-export { Checkbox } from './chunk-OTM7RL2L.js';
 import './chunk-SV5BW3IA.js';
 export { Switch } from './chunk-DXZCKDYS.js';
 export { DatePicker } from './chunk-2UTN3EFK.js';

package/dist/kanban.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
-var chunkIEQK3LGI_cjs = require('./chunk-IEQK3LGI.cjs');
+var chunkS4FXY3B4_cjs = require('./chunk-S4FXY3B4.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Kanban", {
   enumerable: true,
-  get: function () { return chunkIEQK3LGI_cjs.Kanban; }
+  get: function () { return chunkS4FXY3B4_cjs.Kanban; }
 });
 Object.defineProperty(exports, "useKanban", {
   enumerable: true,
-  get: function () { return chunkIEQK3LGI_cjs.useKanban; }
+  get: function () { return chunkS4FXY3B4_cjs.useKanban; }
 });
 //# sourceMappingURL=kanban.cjs.map
 //# sourceMappingURL=kanban.cjs.map

package/dist/kanban.js

@@ -1,4 +1,4 @@
-export { Kanban, useKanban } from './chunk-35MF32VQ.js';
+export { Kanban, useKanban } from './chunk-2HPADT4X.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=kanban.js.map
 //# sourceMappingURL=kanban.js.map

package/dist/reorderable-grid.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var chunkQP6VNKLW_cjs = require('./chunk-QP6VNKLW.cjs');
+require('./chunk-I27K6NLX.cjs');
+require('./chunk-OUYC6EIL.cjs');
+require('./chunk-SNHU2AI4.cjs');
+require('./chunk-ZU5Q77OT.cjs');
+
+
+
+Object.defineProperty(exports, "ReorderableGrid", {
+  enumerable: true,
+  get: function () { return chunkQP6VNKLW_cjs.ReorderableGrid; }
+});
+Object.defineProperty(exports, "moveItem", {
+  enumerable: true,
+  get: function () { return chunkQP6VNKLW_cjs.moveItem; }
+});
+//# sourceMappingURL=reorderable-grid.cjs.map
+//# sourceMappingURL=reorderable-grid.cjs.map

package/dist/reorderable-grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"reorderable-grid.cjs"}

package/dist/reorderable-grid.d.cts

@@ -0,0 +1,141 @@
+import { HTMLAttributes, ReactNode, Ref, ReactElement } from 'react';
+
+/** The least an item needs. Anything else on it is yours, and reaches `renderItem` untouched. */
+interface ReorderableGridItem {
+    /** Stable id. The order is reported as these. */
+    id: string;
+    /**
+     * Pinned: this cell keeps its slot. It cannot be picked up or dragged, and
+     * nothing can be dropped onto it; other cells flow around it.
+     */
+    locked?: boolean;
+}
+/** What `renderItem` gets alongside the item. */
+interface ReorderableGridItemState {
+    /** 0-based index in the order currently shown (the live preview while dragging). */
+    index: number;
+    /** 1-based position. */
+    position: number;
+    /** 1-based row. */
+    row: number;
+    /** 1-based column. */
+    column: number;
+    total: number;
+    /** Being dragged with a pointer. */
+    dragging: boolean;
+    /** Picked up with the keyboard. */
+    pickedUp: boolean;
+    /** This cell's slot is where the active item will land. */
+    dropTarget: boolean;
+    locked: boolean;
+    disabled: boolean;
+    /**
+     * Spread on an element to make it the drag handle. Once a cell contains a
+     * handle, only the handle starts a pointer drag; without one, the whole cell
+     * does. The keyboard always works on the cell itself.
+     */
+    handleProps: {
+        "data-reorderable-handle": "";
+    };
+}
+/** Facts every announcement can use. Positions are 1-based. */
+interface ReorderableGridAnnouncementContext {
+    id: string;
+    /** From `getItemLabel`, else `item.label` when it is a string, else the id. */
+    label: string;
+    position: number;
+    total: number;
+    row: number;
+    column: number;
+}
+/** Every string the grid speaks or shows to assistive tech. Override any of them (i18n). */
+interface ReorderableGridLabels {
+    /** Read with each cell (`aria-describedby`). */
+    instructions: string;
+    /** `aria-roledescription` of each cell. */
+    roleDescription: string;
+    pickedUp: (ctx: ReorderableGridAnnouncementContext) => string;
+    moved: (ctx: ReorderableGridAnnouncementContext) => string;
+    dropped: (ctx: ReorderableGridAnnouncementContext) => string;
+    /** `ctx` is the restored (original) position. */
+    cancelled: (ctx: ReorderableGridAnnouncementContext) => string;
+    locked: (ctx: ReorderableGridAnnouncementContext) => string;
+}
+interface ReorderableGridProps<T extends ReorderableGridItem> extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> {
+    /** The cells' data. Each needs a unique `id`. */
+    items: T[];
+    /**
+     * Controlled order, as ids. Ids that are not in `items` are ignored, and
+     * items missing from it follow in `items` order, so a stale or partial order
+     * never drops a cell.
+     */
+    value?: string[];
+    /** Uncontrolled starting order. Omit both to start in `items` order. */
+    defaultValue?: string[];
+    /**
+     * The full new order, once per committed move: a pointer release or a
+     * keyboard drop that changed something. Never on a cancel, never on a
+     * no-op drop, never during the live preview.
+     */
+    onReorder?: (ids: string[]) => void;
+    /** Renders a cell's content. Default: the item's label. */
+    renderItem?: (item: T, state: ReorderableGridItemState) => ReactNode;
+    /** Columns, 1 to 12. Placement is row-major. Default `2`. */
+    columns?: number;
+    /** Gutter. Default `sm`. */
+    gap?: "none" | "sm" | "md" | "lg";
+    /** No reordering at all, and no tab stops. */
+    disabled?: boolean;
+    /** Accessible name of the grid. */
+    label?: string;
+    /** The name an item is announced by. */
+    getItemLabel?: (item: T) => string;
+    /** Overrides for any announcement or label. */
+    labels?: Partial<ReorderableGridLabels>;
+    /** Skip the cell's default visuals (border, surface, padding). Behaviour stays. */
+    unstyled?: boolean;
+    /** Extra classes on every cell. */
+    cellClassName?: string;
+}
+
+/**
+ * A grid of cells reordered in place, row-major, by pointer or keyboard.
+ *
+ * Built for field-order designers: the grid looks like the grid it designs.
+ * Order is a list of ids (`value` / `defaultValue` / `onReorder`); the pure
+ * `moveItem(ids, from, to, { locked })` is the same rule without a DOM, for
+ * agents.
+ */
+declare const ReorderableGrid: (<T extends ReorderableGridItem>(props: ReorderableGridProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement) & {
+    displayName?: string;
+};
+
+interface MoveItemOptions<T> {
+    /**
+     * Pinned entries. A locked entry keeps its absolute index: it cannot be
+     * moved, nothing can be dropped onto its slot, and the other entries flow
+     * around it. Either the locked ids themselves or a predicate.
+     */
+    locked?: Iterable<T> | ((id: T) => boolean);
+}
+/**
+ * Move the entry at `fromIndex` so that it ends up at `toIndex`, row-major,
+ * and return a NEW array. The input is never mutated.
+ *
+ * This is the whole reorder rule of `ReorderableGrid`, with no DOM: the grid's
+ * pointer drags and arrow keys both go through it, and an agent bridge can call
+ * it directly to reorder from a tool call.
+ *
+ * - `toIndex` is the entry's index in the RESULT, so `moveItem(ids, 0, ids.length - 1)`
+ *   moves the first entry to the end.
+ * - An index outside the list (or not an integer) throws `RangeError`. That is
+ *   a caller bug, and a silent no-op would hide it.
+ * - With `locked`: a locked entry keeps its absolute index and the move happens
+ *   among the free slots only. Moving a locked entry, or onto a locked slot,
+ *   returns the order unchanged: that is the rule doing its job, not an error.
+ */
+declare function moveItem<T>(ids: readonly T[], fromIndex: number, toIndex: number, options?: MoveItemOptions<T>): T[];
+
+export { type MoveItemOptions, ReorderableGrid, type ReorderableGridAnnouncementContext, type ReorderableGridItem, type ReorderableGridItemState, type ReorderableGridLabels, type ReorderableGridProps, moveItem };

package/dist/reorderable-grid.d.ts

@@ -0,0 +1,141 @@
+import { HTMLAttributes, ReactNode, Ref, ReactElement } from 'react';
+
+/** The least an item needs. Anything else on it is yours, and reaches `renderItem` untouched. */
+interface ReorderableGridItem {
+    /** Stable id. The order is reported as these. */
+    id: string;
+    /**
+     * Pinned: this cell keeps its slot. It cannot be picked up or dragged, and
+     * nothing can be dropped onto it; other cells flow around it.
+     */
+    locked?: boolean;
+}
+/** What `renderItem` gets alongside the item. */
+interface ReorderableGridItemState {
+    /** 0-based index in the order currently shown (the live preview while dragging). */
+    index: number;
+    /** 1-based position. */
+    position: number;
+    /** 1-based row. */
+    row: number;
+    /** 1-based column. */
+    column: number;
+    total: number;
+    /** Being dragged with a pointer. */
+    dragging: boolean;
+    /** Picked up with the keyboard. */
+    pickedUp: boolean;
+    /** This cell's slot is where the active item will land. */
+    dropTarget: boolean;
+    locked: boolean;
+    disabled: boolean;
+    /**
+     * Spread on an element to make it the drag handle. Once a cell contains a
+     * handle, only the handle starts a pointer drag; without one, the whole cell
+     * does. The keyboard always works on the cell itself.
+     */
+    handleProps: {
+        "data-reorderable-handle": "";
+    };
+}
+/** Facts every announcement can use. Positions are 1-based. */
+interface ReorderableGridAnnouncementContext {
+    id: string;
+    /** From `getItemLabel`, else `item.label` when it is a string, else the id. */
+    label: string;
+    position: number;
+    total: number;
+    row: number;
+    column: number;
+}
+/** Every string the grid speaks or shows to assistive tech. Override any of them (i18n). */
+interface ReorderableGridLabels {
+    /** Read with each cell (`aria-describedby`). */
+    instructions: string;
+    /** `aria-roledescription` of each cell. */
+    roleDescription: string;
+    pickedUp: (ctx: ReorderableGridAnnouncementContext) => string;
+    moved: (ctx: ReorderableGridAnnouncementContext) => string;
+    dropped: (ctx: ReorderableGridAnnouncementContext) => string;
+    /** `ctx` is the restored (original) position. */
+    cancelled: (ctx: ReorderableGridAnnouncementContext) => string;
+    locked: (ctx: ReorderableGridAnnouncementContext) => string;
+}
+interface ReorderableGridProps<T extends ReorderableGridItem> extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> {
+    /** The cells' data. Each needs a unique `id`. */
+    items: T[];
+    /**
+     * Controlled order, as ids. Ids that are not in `items` are ignored, and
+     * items missing from it follow in `items` order, so a stale or partial order
+     * never drops a cell.
+     */
+    value?: string[];
+    /** Uncontrolled starting order. Omit both to start in `items` order. */
+    defaultValue?: string[];
+    /**
+     * The full new order, once per committed move: a pointer release or a
+     * keyboard drop that changed something. Never on a cancel, never on a
+     * no-op drop, never during the live preview.
+     */
+    onReorder?: (ids: string[]) => void;
+    /** Renders a cell's content. Default: the item's label. */
+    renderItem?: (item: T, state: ReorderableGridItemState) => ReactNode;
+    /** Columns, 1 to 12. Placement is row-major. Default `2`. */
+    columns?: number;
+    /** Gutter. Default `sm`. */
+    gap?: "none" | "sm" | "md" | "lg";
+    /** No reordering at all, and no tab stops. */
+    disabled?: boolean;
+    /** Accessible name of the grid. */
+    label?: string;
+    /** The name an item is announced by. */
+    getItemLabel?: (item: T) => string;
+    /** Overrides for any announcement or label. */
+    labels?: Partial<ReorderableGridLabels>;
+    /** Skip the cell's default visuals (border, surface, padding). Behaviour stays. */
+    unstyled?: boolean;
+    /** Extra classes on every cell. */
+    cellClassName?: string;
+}
+
+/**
+ * A grid of cells reordered in place, row-major, by pointer or keyboard.
+ *
+ * Built for field-order designers: the grid looks like the grid it designs.
+ * Order is a list of ids (`value` / `defaultValue` / `onReorder`); the pure
+ * `moveItem(ids, from, to, { locked })` is the same rule without a DOM, for
+ * agents.
+ */
+declare const ReorderableGrid: (<T extends ReorderableGridItem>(props: ReorderableGridProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement) & {
+    displayName?: string;
+};
+
+interface MoveItemOptions<T> {
+    /**
+     * Pinned entries. A locked entry keeps its absolute index: it cannot be
+     * moved, nothing can be dropped onto its slot, and the other entries flow
+     * around it. Either the locked ids themselves or a predicate.
+     */
+    locked?: Iterable<T> | ((id: T) => boolean);
+}
+/**
+ * Move the entry at `fromIndex` so that it ends up at `toIndex`, row-major,
+ * and return a NEW array. The input is never mutated.
+ *
+ * This is the whole reorder rule of `ReorderableGrid`, with no DOM: the grid's
+ * pointer drags and arrow keys both go through it, and an agent bridge can call
+ * it directly to reorder from a tool call.
+ *
+ * - `toIndex` is the entry's index in the RESULT, so `moveItem(ids, 0, ids.length - 1)`
+ *   moves the first entry to the end.
+ * - An index outside the list (or not an integer) throws `RangeError`. That is
+ *   a caller bug, and a silent no-op would hide it.
+ * - With `locked`: a locked entry keeps its absolute index and the move happens
+ *   among the free slots only. Moving a locked entry, or onto a locked slot,
+ *   returns the order unchanged: that is the rule doing its job, not an error.
+ */
+declare function moveItem<T>(ids: readonly T[], fromIndex: number, toIndex: number, options?: MoveItemOptions<T>): T[];
+
+export { type MoveItemOptions, ReorderableGrid, type ReorderableGridAnnouncementContext, type ReorderableGridItem, type ReorderableGridItemState, type ReorderableGridLabels, type ReorderableGridProps, moveItem };

package/dist/reorderable-grid.js

@@ -0,0 +1,7 @@
+export { ReorderableGrid, moveItem } from './chunk-DTOIO42M.js';
+import './chunk-SV5BW3IA.js';
+import './chunk-YX6FTJ6N.js';
+import './chunk-EDYAXGUM.js';
+import './chunk-MMW2JGKZ.js';
+//# sourceMappingURL=reorderable-grid.js.map
+//# sourceMappingURL=reorderable-grid.js.map

package/dist/reorderable-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"reorderable-grid.js"}

package/docs/Editor.md

@@ -48,6 +48,7 @@ import { Editor } from "@particle-academy/react-fancy";
 | children | `ReactNode` | - | Custom toolbar content |
 | showSourceToggle | `boolean` | `true` | Append a Source toggle to the default toolbar. Ignored when `children` are supplied — custom toolbars compose their own `<Editor.SourceToggle />` |
 | showFullScreenToggle | `boolean` | `false` | Append a full-screen toggle (Lucide `maximize-2` / `minimize-2`) at the right end of the default toolbar. Ignored when `children` are supplied — use `<Editor.FullScreenToggle />` |
+| toolbarExtra | `ReactNode` | - | Host content (e.g. Save / Cancel) rendered inside the default toolbar at its trailing end: after the Source toggle, before the full-screen toggle. Wrapped in `[data-react-fancy-editor-toolbar-extra]`. Stays reachable in full screen. Same name and placement as fancy-sheets' `SheetWorkbook toolbarExtra`. Ignored when `children` are supplied |
 | className | `string` | - | Additional CSS classes |
 
 #### EditorAction
@@ -94,6 +95,23 @@ Toolbar button that takes the editor full screen and back. Carries `data-react-f
 
 While full screen the root has `data-fullscreen="true"`, `maxHeight` is ignored so the content fills the screen, and Escape leaves. The editor is not remounted, so the caret, undo history and text survive the round trip.
 
+A host's own actions belong in `toolbarExtra`, not in `children`: children replace the whole default toolbar, while `toolbarExtra` adds to it, so Save stays on screen while the editor is full screen.
+
+```tsx
+<Editor value={doc} onChange={setDoc}>
+  <Editor.Toolbar
+    showFullScreenToggle
+    toolbarExtra={
+      <>
+        <Button size="sm" variant="ghost" onClick={cancel}>Cancel</Button>
+        <Button size="sm" onClick={save}>Save</Button>
+      </>
+    }
+  />
+  <Editor.Content />
+</Editor>
+```
+
 ### Editor.Content
 
 | Prop | Type | Default | Description |

package/docs/Kanban.md

@@ -58,8 +58,10 @@ The board ships with a drop-position indicator (a thin blue line that appears wh
 | `title` | `string` | - | Column header text. When set, the column renders a built-in header with a count chip (and `count / wipLimit` if `wipLimit` is set). |
 | `wipLimit` | `number` | - | Soft work-in-progress limit. The header pill turns red when `cardCount > wipLimit`. Drops are not refused — enforce hard via `onCardMove`. *Since v2.8.0.* |
 | `hideWhenEmpty` | `boolean` | `false` | Render nothing when the column has zero card children. The column still re-mounts to receive drops while a card is being dragged elsewhere. *Since v2.8.0.* |
-| `unstyled` | `boolean` | `false` | Skip the default visuals (background, padding, min-height, fixed `w-72`) so you can render your own surface around the children. The drop target, drag-over ring, and column id wiring are kept. *Since v2.7.0.* |
-| `className` | `string` | - | Additional CSS classes |
+| `unstyled` | `boolean` | `false` | Skip the default visuals (background, padding, min-height, fixed `w-72 shrink-0`) so you can render your own surface around the children. The drop target, drag-over ring, and column id wiring are kept. *Since v2.7.0.* |
+| `className` | `string` | - | Additional CSS classes. Merged over the defaults, so `w-60` replaces `w-72` and `shrink` replaces `shrink-0` |
+
+Columns default to `w-72 shrink-0`, and the board root is a flex row with `overflow-x-auto`, so a board wider than its container scrolls horizontally instead of squeezing its columns.
 
 ### Kanban.Card