@namroodinc/liquid-editorial 0.1.6 → 0.1.8

package/AGENTS.md

@@ -4,6 +4,10 @@
 
 Add a decision document for every change going forward.
 
+End every completed change handoff with a suggested Git commit subject and description in a copyable code block. Summarize the final change set and relevant verification.
+
+Render button controls through the shared `Button` component, including controls inside other components and examples. Native button markup belongs only in `src/components/Button` (isolated test fixtures may use native controls). Use Button's standard variants, sizes, icons, focus, and disabled styling instead of copying them into a component stylesheet. Specialized widgets may retain their semantic layout, shared Field skin, or switch track/knob geometry.
+
 Every releasable change set must update the `Unreleased` section in `UPGRADING.md` with changes, adoption steps, compatibility notes, and verification steps for agents in consuming projects. Related edits share that section. Leave version increments to `.github/workflows/release.yml`: every push to `main` automatically bumps the patch version, versions the upgrade notes, validates, commits the release files, and publishes to npm. Keep the manifest and lockfile versions aligned and include this file and `UPGRADING.md` in the package.
 
 ## Using the installed package

package/README.md

@@ -35,6 +35,16 @@ Every family also has a direct entry point:
 import { Button } from "@namroodinc/liquid-editorial/components/Button";
 ```
 
+Use `Button` for action controls, including controls rendered inside other components. Its variants, sizes, icons, focus rings, and disabled states supply the shared appearance. Use `size="xs"` for compact actions inside a field or chip, such as clear and remove. For a custom square glyph, omit `iconStart` and provide visual children plus an accessible name:
+
+```tsx
+<Button variant="simple" isIconOnly aria-label="Account: Ada Lovelace">
+  <Avatar name="Ada Lovelace" size={32} aria-hidden="true" />
+</Button>
+```
+
+Pending Buttons replace custom glyphs with the shared spinner. Button-backed selects and date fields retain the shared Field skin; Switch retains its track and knob while composing Button.
+
 If an application only needs the design tokens, import `@namroodinc/liquid-editorial/tokens.css`. A small global normalization is available separately at `@namroodinc/liquid-editorial/reset.css`; it is never included automatically.
 
 ## Content models
@@ -84,6 +94,38 @@ Links open a URL modal from the toolbar or by clicking an existing body link. Sa
 
 Empty `TableBody` children automatically show “No data found.” across the table; override the text with `Table.emptyMessage`. Use `isEmpty` when custom row components determine whether there are results, or set it to `false` to suppress the message while the UI loads data. Loading indicators and skeleton rows are composed by the consuming UI. Standalone `TableEmpty` uses the same default message and supports a custom `title`. See the [upgrade guide example](UPGRADING.md#013).
 
+## App shell
+
+`AppShell` places a full-width `TopNav` above the desktop `SideNav` and a scrolling `main` landmark. Below 768px of **shell width**, a hamburger opens navigation in a right-side drawer. Its default height is `100dvh`; native `style`, `className`, div attributes, and a forwarded ref allow it to fit an embedded frame.
+
+```tsx
+import { AppShell, Avatar, SideNavItem, SideNavSection } from "@namroodinc/liquid-editorial";
+
+<AppShell
+  brand={<a href="/">Liquid</a>}
+  navigation={<>
+    <SideNavSection label="Workspace">
+      <SideNavItem icon="home" label="Home" href="/" />
+      <SideNavItem icon="file-text" label="Stories" href="/stories" isActive />
+    </SideNavSection>
+  </>}
+  actions={(location) => <>
+    <Avatar name="Ada Lovelace" size={32} />
+    {location === "drawer" && <span>Ada Lovelace</span>}
+  </>}
+>
+  <h1>Stories</h1>
+</AppShell>
+```
+
+Pass sections/items as `navigation`, without an enclosing SideNav, header, footer, or collapse control. Applications own destinations and `isActive`; AppShell closes the drawer when a navigation link is activated. `navigationLabel` defaults to `"Main"`. Keep shared application state outside the responsive slots and use React `useId` inside custom slot components that need IDs, since the desktop and drawer presentations can coexist during transitions.
+
+The optional `actions` render function receives `"topnav"` or `"drawer"`. Return a compact desktop control and an expanded mobile presentation; return nothing to omit the drawer footer. Keep this function pure. The component supplies no account, menu destinations, centre navigation, or space picker.
+
+The drawer traps focus and locks body scroll. Escape, Close, the scrim, and navigation links dismiss it and return focus to the hamburger. A popup inside it, such as a Menu in the actions footer, closes first on Escape. Modifier-key clicks that open a link elsewhere leave the drawer open. Widening the shell to desktop closes it and moves focus to the active desktop link when focus was inside the drawer. Reduced motion skips the transition.
+
+For other navigation compositions, `Drawer` supports `variant="navigation"`, a React-node `title`, `closeLabel`, and `portalContainer`. By default the drawer portals to `document.body` and covers the viewport; pass a positioned element to keep it inside that element. Supply `aria-label` for a dialog name independent of its visual brand. This variant retains an inert, accessibility-hidden panel during its closing transition; the default Drawer keeps its existing appearance and immediate unmounting.
+
 ## Image cropping
 
 `ImageCropper` uses the library's custom engine with a fixed crop frame, diagonal background, shared `Slider` with a `Field` label/hint, and optional quarter-turn controls. Shared `Stack` components put the rotate/Reset buttons to the right of the zoom slider and wrap them below on narrow layouts. Supply one positive, finite `aspect` (width / height): `1` for an avatar, `16 / 9` for a cover, or `4 / 5` for a portrait.

package/UPGRADING.md

@@ -2,9 +2,72 @@
 
 ## Unreleased
 
-## 0.1.6
+## 0.1.8
+
+### Changes
+
+- Consolidated sortable ref forwarding and repeated test setup. Split EntryEditor validation and control rendering, Board drop resolution and keyboard coordinates, Select keyboard handling, Drawer exit state, and rich-text toolbar rendering into focused helpers. Catalogue sections use a typed lookup, and showcase smoke checks use separate interaction helpers.
+- Expanded `fallow:report` from dead-code analysis to dead code, duplication, and health. Reports include a recorded cleanup baseline, remaining health advisories, and coverage sources. `npm run fallow` now rejects duplicate groups as well as dead-code findings.
+- Coverage now includes component helper modules and emits `coverage/coverage-final.json` for Fallow. Added Board drop, keyboard, cancellation, and forwarded-ref regression checks.
+- Contributor handoffs now end with a suggested Git commit subject and description, including relevant verification.
+
+### Adoption
+
+No application code changes are required. For library maintenance, run `npm run test:coverage && npm run fallow:report` after source changes to refresh coverage and both report artifacts. Automated readers of `reports/fallow-report.json` must use the combined schema: `check.total_issues`, `dupes.stats`, and `health.findings` replace the former dead-code-only root fields.
+
+Contributing agents should finish each completed change handoff with the suggested commit subject and description in a copyable code block.
+
+### Compatibility
+
+Public component props, emitted values, validation messages, control appearance, and package dependencies are unchanged. The report command fails for dead code, duplicate groups, or functions above cyclomatic/cognitive limits. CRAP change-risk findings remain advisory and are listed with measured or estimated coverage; estimates are not executed test coverage. Package versions remain aligned at 0.1.7 until the release workflow versions this change set.
+
+### Verification
+
+Run the consuming project's typecheck, tests, and build. Exercise EntryEditor required and optional fields, scalar clearing, rich-text links, and single/multiple asset/reference selections. Check Select keyboard navigation and Escape inside a Drawer, navigation Drawer exit/reopening, and Board card/column dragging with pointer and keyboard. In this repository run lint, typecheck, coverage, Storybook build, package checks, `npm run fallow`, and `npm run fallow:report`; confirm the report contains no dead-code, duplicate-group, or cyclomatic/cognitive findings and review any remaining coverage-risk advisories.
+
+For the handoff guidance, check the documentation diff and confirm the final response ends with a copyable commit subject and description covering the completed change and its verification.
+
+## 0.1.7
+
+### Changes
 
-## 0.1.5
+- Added `AppShell`, composing a full-width TopNav above SideNav and a scrolling main landmark. Below 768px of shell width, navigation opens in a right-side drawer with a branded header and an optional actions footer.
+- Added Drawer `variant="navigation"`, React-node titles, `closeLabel`, and `portalContainer`. The navigation variant focuses Close first, slides/fades over `--duration-panel`, and retains an inert, accessibility-hidden panel until its exit completes. Explicit `aria-label` names the dialog instead of the visual title.
+- Rebuilt the combined navigation example to match the App Shell handoff, with fullscreen, narrow, no-actions, and long-content stories. Standalone navigation components remain available.
+- Fixed mobile navigation moving the underlying page during its slide-in. Navigation drawers clip their off-screen panel and move/restore focus without scrolling the shell.
+- Audited the library and examples and replaced custom button markup with shared `Button`: shell/drawer/sidebar controls, field clear/remove/step actions, drag handles, menus, selection rows, calendar/Select options, date/select triggers, Switch, and interactive Stepper/SubNav controls. Removed duplicate action-button styling. A contributor lint rule rejects raw buttons outside Button and test fixtures.
+- Icon-only Button now supports custom visual children when `iconStart` is absent, including Avatar and numeric calendar/progress glyphs. Pending state replaces those children with the shared spinner. Select/DateField retain the shared Field skin; Switch retains its track/knob mechanics.
+- Added Button `size="xs"` (24px) for compact actions inside fields and chips. SearchField clear and TagsInput remove use it, so tags no longer make an md TagsInput taller and the clear button fits a small SearchField.
+- Navigation Drawer covers the viewport, above page chrome, unless `portalContainer` is supplied. With a container, it stays inside that positioned element (AppShell does this). `side="start"` and right-to-left documents now slide out through the panel's own edge. Reduced motion applies to the panel, and panel content that does not scroll itself can scroll.
+- Drawer lets popups inside it handle Escape first. Menu, Select, DateField, and Modal mark the Escape they handle with `preventDefault()`, so closing a menu in AppShell's drawer footer leaves the drawer open.
+- AppShell renders without `ResizeObserver`. Modifier-key, non-primary-button, and `target="_blank"` link clicks no longer close its drawer.
+- Fixed regressions from the Button migration. AssetTile hover and press no longer paint over the thumbnail. Interactive Stepper markers match the rail's marker size. Calendar days outside the shown month are muted again. MenuItem labels wrap, and danger shortcuts use the item's text colour. Board handles show the grab cursor with the aggregate stylesheet. SubNavButton keeps `.ds-subnav__item` and the SubNav rail. Drag overlays draw a decorative grip instead of a hidden button.
+
+### Adoption
+
+Import `AppShell` from the root or `@namroodinc/liquid-editorial/components/AppShell`, retaining the existing aggregate CSS import. Move the product brand into `brand`, pass SideNavSection/SideNavItem content as `navigation`, and put page content directly inside AppShell. Do not wrap navigation in another SideNav or add a SideNavHeader/collapse toggle. The shell supplies the main landmark, so remove any enclosing/nested main from the replaced layout.
+
+Keep routes and active links in application state. Supply `actions={(location) => ...}` to render compact `"topnav"` controls and expanded `"drawer"` content. Omit the prop, or return nothing for the drawer, to omit its footer. Use `navigationLabel` to change the default `"Main"` name. Keep render callbacks pure and shared state outside slots; use React `useId` inside custom components instead of fixed IDs in content rendered in both locations.
+
+AppShell defaults to `100dvh`; override its height through native style/className for embedded frames. It responds to its own width with CSS container queries. The library owns drawer state and dismisses it on link activation and when the shell reaches 768px; no router dependency or prototype viewport prop is needed. The page-movement fix requires no prop changes; remove any local shell-scroll reset workaround added for the drawer animation.
+
+The Button cleanup needs no changes to existing component props. Remove local copies of button appearance and selectors for removed `.ds-search__clear`, `.ds-tags__remove`, and `.ds-asset-tile__hit-label` markup. Use accessible names in tests. Compose custom square controls as `<Button isIconOnly aria-label="Account">...</Button>` with no `iconStart`, using `aria-label` or `aria-labelledby` for their accessible name. New library controls and examples must compose Button; the existing variants/sizes supply their appearance. Shared field skin and specialized widget layout remain supported. Use `size="xs"` for a Button placed inside a field or chip.
+
+Use `Drawer variant="navigation"` without `portalContainer` to cover the viewport. To contain it in a layout region, pass a positioned element (for example, `position: relative`) as `portalContainer`. If a custom popup inside a Drawer handles Escape, call `event.preventDefault()` so the drawer stays open. Remove any ResizeObserver polyfill that was added only for AppShell.
+
+### Compatibility
+
+The AppShell/Drawer props are additive. The Button cleanup intentionally standardizes action appearance and sizes: shell navigation controls use large 48px Buttons; clear/remove actions use extra-small 24px Buttons and drag handles use small Buttons; numeric steppers follow their field's standard Button size. Menu danger actions use the shared danger variant. SubNavButton composes Button but keeps the SubNav rail and its `.ds-subnav__item` class. Interactive Stepper markers are square Buttons at the rail's marker size, while read-only markers remain indicators. `ButtonSize` now includes `"xs"`; TypeScript maps keyed by every `ButtonSize` need an `xs` entry. Drawer handles Escape and Tab on `window`, so keyboard events dispatched on `document` or on any element still reach it. An Escape already marked with `preventDefault()` no longer closes it. Select now ignores Escape while its listbox is closed, so an enclosing Drawer can close. Select option rows are now disabled-capable button elements with `role="option"`; selection and keyboard contracts are unchanged. Custom icon-only children that were previously hidden now render when no `iconStart` is supplied. Default Drawer dismissal timing and string titles remain supported. Navigation Drawer exits remain in the DOM briefly but are immediately inert and hidden from accessibility queries; tests that require actual removal should await the transition. Closed shells render on the server without accessing browser globals. Supported React versions and package versions are unchanged; the release workflow owns version increments. There is no new runtime dependency.
+
+### Verification
+
+Check 390px, 767px, 768px, and 1280px shell widths, including a narrow shell inside a wide viewport. Confirm the top bar spans the whole frame, the desktop rail has no brand/collapse header, content and navigation scroll independently, and the mobile footer appears only with actions. During opening and closing, confirm only the panel moves: the background frame and shell scroll offsets must stay fixed, including when main content is already scrolled. Test Escape, Close, scrim and link dismissal, initial Close focus, Tab/Shift+Tab trapping, focus restoration, body scroll restoration, desktop resize while open, reduced motion, and reopening during exit. Check multiple shell IDs and the consuming application's route/active-state behavior. Run the consuming project's typecheck, tests, and build after replacing its layout.
+
+Open the navigation drawer in a narrow AppShell. Press Escape inside an actions Menu or Select and confirm only the popup closes. Cmd/Ctrl-click a navigation link and confirm the drawer stays open. Outside AppShell, open `Drawer variant="navigation"` on a scrolled page without `portalContainer`, and also with `side="start"`, `dir="rtl"`, reduced motion, and content taller than the panel. Run consuming tests that render AppShell without a ResizeObserver polyfill.
+
+Compare the converted ordinary actions with standalone Buttons of the same size/variant, including keyboard focus and disabled state. Hover and press a selectable AssetTile and confirm the thumbnail stays visible. Check navigable Steppers at both sizes: connectors should run through marker centres, with labels level. Check calendar spill-over days, wrapped and danger MenuItems, Board grab cursors with the built aggregate CSS, SubNavs that mix links and buttons, tag chips in md TagsInput, and the clear button in a small SearchField. Check field clear/remove/step behavior, select/date validation and selection, disabled options, Switch state, menu actions, SubNav/Stepper activation, and pointer/keyboard dragging. Verify tag wrapping, calendar layout, and long selection rows at narrow widths and in every theme. Run library lint to enforce Button composition.
+
+## 0.1.6
 
 ### Changes
 
@@ -27,7 +90,11 @@ To adopt pagination, import `Pagination` from the package root or `@namroodinc/l
 ```tsx
 const [pagination, setPagination] = useState({ page: 1, pageSize: 25 });
 
-<Pagination totalResults={totalResults} {...pagination} onChange={setPagination} />
+<Pagination
+  totalResults={totalResults}
+  {...pagination}
+  onChange={setPagination}
+/>;
 ```
 
 Use the emitted page and page size together for requests or local slicing. Changing size preserves the first visible result (page 3 at size 25 becomes page 2 at size 50). Keep canonical state in bounds when filtering changes the total; prop changes do not emit corrections. Supply valid counts and positive integer sizes, with a nonempty `pageSizeOptions` containing the current size. The defaults are `[10, 25, 50, 100]`. The component handles no data loading or slicing; compose it beneath a table or another result view. The existing aggregate CSS import includes its styles. Give multiple pagination bars distinct `aria-label` values.
@@ -40,16 +107,28 @@ Update every `ImageCropper` call to supply a positive, finite `aspect` (width /
 
 ```tsx
 import { useState } from "react";
-import { cropToBlob, type CropRect, type CropState } from "@namroodinc/liquid-editorial";
-
-const [selection, setSelection] = useState<{ crop: CropRect; state: CropState } | null>(null);
-<ImageCropper src={src} aspect={16 / 9}
-  onChange={(crop, state) => setSelection({ crop, state })} />
+import {
+  cropToBlob,
+  type CropRect,
+  type CropState,
+} from "@namroodinc/liquid-editorial";
+
+const [selection, setSelection] = useState<{
+  crop: CropRect;
+  state: CropState;
+} | null>(null);
+<ImageCropper
+  src={src}
+  aspect={16 / 9}
+  onChange={(crop, state) => setSelection({ crop, state })}
+/>;
 
 // In your save handler:
 if (selection) {
   const blob = await cropToBlob(src, selection.crop, {
-    outputWidth: 1600, rotation: selection.state.rotation, type: "image/jpeg",
+    outputWidth: 1600,
+    rotation: selection.state.rotation,
+    type: "image/jpeg",
   });
   uploadCrop(blob);
 }
@@ -101,8 +180,11 @@ Use the shared empty message while keeping loading indicators in your applicatio
 
 ```tsx
 <TableFrame>
-  <Table emptyMessage="No matching articles."
-    isEmpty={!isLoading && articles.length === 0} aria-busy={isLoading}>
+  <Table
+    emptyMessage="No matching articles."
+    isEmpty={!isLoading && articles.length === 0}
+    aria-busy={isLoading}
+  >
     <TableHead>
       <TableRow>
         <TableHeaderCell>Title</TableHeaderCell>

package/dist/chunks/Board-BLhB5_xx.cjs

@@ -0,0 +1,2 @@
+const e=require("./Icon-CWsA1W83.cjs"),t=require("../components/Button/index.cjs"),n=require("./mergeRefs-Bc3qS0Tt.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@dnd-kit/core"),o=require("@dnd-kit/sortable"),s=require("@dnd-kit/utilities");function c({active:e,over:t},n){if(!t)return;let r=t.data.current??{},i=r.type===`column`?String(t.id):String(r.columnId??``),a=n.indexOf(i);if(!(a<0||i===String(e.id)))return{columnId:String(e.id),toIndex:a}}function l({active:e,over:t}){if(!t)return;let n=String(e.data.current?.columnId??``),r=t.data.current??{},i=r.type===`card`,a=String(r.columnId??(i?``:t.id)),o=i?r.sortable?.index??0:(r.items??[]).length;if(a&&(n!==a||String(e.id)!==String(t.id)))return{cardId:String(e.id),fromColumnId:n,toColumnId:a,toIndex:o}}var u=(e,t)=>{let{currentCoordinates:n,context:r}=t;if(e.code===`ArrowLeft`||e.code===`ArrowRight`){let t=r.droppableContainers.getEnabled().filter(e=>e.data.current?.type===`column-body`).sort((e,t)=>(e.rect.current?.left??0)-(t.rect.current?.left??0)),i=r.active?.rect.current.translated;if(!i)return;let a=t[t.findIndex(e=>(e.rect.current?.left??0)<=i.left+1&&(e.rect.current?.right??0)>=i.left-1)+(e.code===`ArrowRight`?1:-1)]?.rect.current;return a?(e.preventDefault(),{x:a.left+a.width/2-i.width/2,y:n.y}):void 0}return(0,o.sortableKeyboardCoordinates)(e,t)},d=e=>{let t=e.active.data.current?.type===`column`,n=e.droppableContainers.filter(e=>{let n=e.data.current?.type;return t?n===`column`:n!==`column`}),r={...e,droppableContainers:n};if(t)return(0,a.closestCorners)(r);let i=(0,a.pointerWithin)(r);if(i.length>0){let e=e=>n.find(t=>t.id===e)?.data.current?.type===`card`?0:1;return[...i].sort((t,n)=>e(t.id)-e(n.id))}return(0,a.closestCorners)(r)},f=(0,r.createContext)({activeId:null,activeType:null,overColumnId:null}),p=(0,r.forwardRef)(function({columnIds:t,onMove:n,onColumnMove:s,renderDragOverlay:p,renderColumnDragOverlay:m,className:h,children:g,..._},v){let y=(0,r.useId)(),[b,x]=(0,r.useState)(null),[S,C]=(0,r.useState)(null),[w,T]=(0,r.useState)(null),E=(0,a.useSensors)((0,a.useSensor)(a.PointerSensor,{activationConstraint:{distance:4}}),(0,a.useSensor)(a.KeyboardSensor,{coordinateGetter:u})),D=(0,r.useCallback)(e=>{x(String(e.active.id)),C(e.active.data.current?.type===`column`?`column`:`card`)},[]),O=(0,r.useCallback)(e=>{let t=e.over;if(!t){T(null);return}let n=t.data.current??{},r=n.type===`column`?String(t.id):String(n.columnId??``);T(r||null)},[]),k=(0,r.useCallback)(()=>{x(null),C(null),T(null)},[]),A=(0,r.useCallback)(e=>{let{active:r,over:i}=e;if(k(),i){if(r.data.current?.type===`column`){let n=c(e,t??[]);n&&s?.(n)}else{let t=l(e);t&&n?.(t)}}},[t,s,n,k]),j=(0,r.useMemo)(()=>({activeId:b,activeType:S,overColumnId:w}),[b,S,w]),M=(0,i.jsx)(`div`,{ref:v,className:[`ds-board`,h].filter(Boolean).join(` `),..._,children:g});return(0,i.jsx)(f.Provider,{value:j,children:(0,i.jsxs)(a.DndContext,{id:`ds-board-${y}`,sensors:E,collisionDetection:d,measuring:{droppable:{strategy:a.MeasuringStrategy.Always}},onDragStart:D,onDragOver:O,onDragEnd:A,onDragCancel:k,children:[t?(0,i.jsx)(o.SortableContext,{items:t,strategy:o.horizontalListSortingStrategy,children:M}):M,(0,i.jsxs)(a.DragOverlay,{children:[b&&S===`card`?(0,i.jsxs)(`div`,{className:`ds-board-card`,"data-overlay":!0,children:[(0,i.jsx)(`span`,{className:`ds-board-card__handle`,"aria-hidden":`true`,children:(0,i.jsx)(e.t,{name:`grip-vertical`})}),(0,i.jsx)(`div`,{className:`ds-board-card__content`,children:p?.(b)})]}):null,b&&S===`column`?(0,i.jsx)(`div`,{className:`ds-board-column`,"data-overlay":!0,children:m?.(b)}):null]})]})})}),m=(0,r.forwardRef)(function({id:e,title:c,itemIds:l,count:u,action:d,isDraggable:p=!0,className:m,children:h,...g},_){let{activeType:v,overColumnId:y}=(0,r.useContext)(f),{setNodeRef:b}=(0,a.useDroppable)({id:`${e}::body`,data:{type:`column-body`,columnId:e,items:l}}),{attributes:x,listeners:S,setNodeRef:C,transform:w,transition:T,isDragging:E}=(0,o.useSortable)({id:e,disabled:!p,data:{type:`column`,columnId:e,items:l}});return(0,i.jsxs)(`section`,{ref:n.t(C,_),style:{transform:s.CSS.Translate.toString(w),transition:T},className:[`ds-board-column`,m].filter(Boolean).join(` `),"data-over":v===`card`&&y===e||void 0,"data-dragging":E||void 0,"aria-label":c,...g,children:[p&&(0,i.jsx)(t.Button,{variant:`simple`,size:`sm`,iconStart:`grip-horizontal`,className:`ds-board-column__grip`,"aria-label":`Reorder ${c}`,...x,...S}),(0,i.jsxs)(`header`,{className:`ds-board-column__head`,children:[(0,i.jsx)(`span`,{className:`ds-board-column__title`,children:c}),(0,i.jsx)(`span`,{className:`ds-board-column__count`,children:u??l.length}),d&&(0,i.jsx)(`span`,{className:`ds-board-column__action`,children:d})]}),(0,i.jsx)(`div`,{ref:b,className:`ds-board-column__body`,children:(0,i.jsx)(o.SortableContext,{items:l,strategy:o.verticalListSortingStrategy,children:h})})]})}),h=(0,r.forwardRef)(function({id:e,columnId:a,label:c,className:l,children:u,...d},p){let{attributes:m,listeners:h,setNodeRef:g,transform:_,transition:v,isDragging:y}=(0,o.useSortable)({id:e,data:{type:`card`,columnId:a}}),{activeId:b}=(0,r.useContext)(f);return(0,i.jsxs)(`div`,{ref:n.t(g,p),style:{transform:s.CSS.Translate.toString(_),transition:v},className:[`ds-board-card`,l].filter(Boolean).join(` `),"data-dragging":y||void 0,"data-idle":b&&b!==e?``:void 0,...d,children:[(0,i.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`grip-vertical`,className:`ds-board-card__handle`,"aria-label":c?`Move ${c}`:`Move card`,...m,...h}),(0,i.jsx)(`div`,{className:`ds-board-card__content`,children:u})]})});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});
+//# sourceMappingURL=Board-BLhB5_xx.cjs.map

package/dist/chunks/Board-BLhB5_xx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Board-BLhB5_xx.cjs","names":["sortableKeyboardCoordinates","closestCorners","pointerWithin","createContext","forwardRef","useId","useState","useSensors","useSensor","PointerSensor","KeyboardSensor","useCallback","useMemo","DndContext","MeasuringStrategy","SortableContext","horizontalListSortingStrategy","DragOverlay","Icon","useContext","useDroppable","useSortable","mergeRefs","CSS","Button","verticalListSortingStrategy","require_Icon","require_components_Button_index","require_mergeRefs","react","react_jsx_runtime","_dnd_kit_core","_dnd_kit_sortable","_dnd_kit_utilities","columnMove","over","data","columnId","\"type\"","\"columnId\"","toIndex","columnIds","active","cardMove","fromColumnId","onCard","toColumnId","\"sortable\"","\"items\"","boardCoordinateGetter","args","event","containers","context","c","a","b","activeRect","rect","currentCoordinates","boardCollisionDetection","isColumn","type","container","scoped","within","rank","id","BoardContext","Board","rest","dndId","activeId","setActiveId","activeType","setActiveType","overColumnId","setOverColumnId","sensors","handleStart","handleOver","overData","reset","handleEnd","move","onColumnMove","onMove","value","board","className","renderDragOverlay","renderColumnDragOverlay","BoardColumn","setBodyRef","itemIds","setColumnRef","isDraggable","ref","transform","isDragging","title","attributes","listeners","count","action","BoardCard","setNodeRef","label"],"sources":["../../src/components/Board/moves.ts","../../src/components/Board/keyboard.ts","../../src/components/Board/index.tsx"],"sourcesContent":["import type { DragEndEvent } from \"@dnd-kit/core\";\nimport type { BoardColumnMove, BoardMove } from \".\";\n\nexport function columnMove({ active, over }: DragEndEvent, columnIds: string[]): BoardColumnMove | undefined {\n  if (!over) return;\n  const data = over.data.current ?? {};\n  const columnId = data[\"type\"] === \"column\" ? String(over.id) : String(data[\"columnId\"] ?? \"\");\n  const toIndex = columnIds.indexOf(columnId);\n  if (toIndex < 0 || columnId === String(active.id)) return;\n  return { columnId: String(active.id), toIndex };\n}\n\nexport function cardMove({ active, over }: DragEndEvent): BoardMove | undefined {\n  if (!over) return;\n  const fromColumnId = String(active.data.current?.[\"columnId\"] ?? \"\");\n  const data = over.data.current ?? {};\n  const onCard = data[\"type\"] === \"card\";\n  const toColumnId = String(data[\"columnId\"] ?? (onCard ? \"\" : over.id));\n  // A card occupies a precise slot; empty lane space appends to the lane.\n  const toIndex = onCard\n    ? (data[\"sortable\"] as { index: number } | undefined)?.index ?? 0\n    : ((data[\"items\"] as string[] | undefined) ?? []).length;\n  if (!toColumnId) return;\n  if (fromColumnId === toColumnId && String(active.id) === String(over.id)) return;\n  return { cardId: String(active.id), fromColumnId, toColumnId, toIndex };\n}\n","import type { KeyboardCoordinateGetter } from \"@dnd-kit/core\";\nimport { sortableKeyboardCoordinates } from \"@dnd-kit/sortable\";\n\n/**\n * Arrow up/down sorts inside a lane; left/right jumps lanes, which the stock\n * sortable getter does not do.\n */\nexport const boardCoordinateGetter: KeyboardCoordinateGetter = (event, args) => {\n  const { currentCoordinates, context } = args;\n  if (event.code === \"ArrowLeft\" || event.code === \"ArrowRight\") {\n    const containers = context.droppableContainers\n      .getEnabled()\n      .filter((c) => c.data.current?.[\"type\"] === \"column-body\")\n      .sort((a, b) => (a.rect.current?.left ?? 0) - (b.rect.current?.left ?? 0));\n    const activeRect = context.active?.rect.current.translated;\n    if (!activeRect) return undefined;\n    const index = containers.findIndex(\n      (c) => (c.rect.current?.left ?? 0) <= activeRect.left + 1 &&\n        (c.rect.current?.right ?? 0) >= activeRect.left - 1,\n    );\n    const next = containers[index + (event.code === \"ArrowRight\" ? 1 : -1)];\n    const rect = next?.rect.current;\n    if (!rect) return undefined;\n    event.preventDefault();\n    return { x: rect.left + rect.width / 2 - activeRect.width / 2, y: currentCoordinates.y };\n  }\n  return sortableKeyboardCoordinates(event, args);\n};\n\n","import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCorners,\n  pointerWithin,\n  MeasuringStrategy,\n\n  useDroppable,\n  useSensor,\n  useSensors,\n  type CollisionDetection,\n  type DragEndEvent,\n  type DragOverEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { mergeRefs } from \"../../internal/mergeRefs\";\nimport { cardMove, columnMove } from \"./moves\";\nimport { boardCoordinateGetter } from \"./keyboard\";\nimport \"./style.css\";\n\nexport interface BoardMove {\n  cardId: string;\n  fromColumnId: string;\n  toColumnId: string;\n  /** Index the card lands on inside the destination column. */\n  toIndex: number;\n}\n\nexport interface BoardColumnMove {\n  columnId: string;\n  toIndex: number;\n}\n\ninterface BoardContextValue {\n  activeId: string | null;\n  activeType: \"card\" | \"column\" | null;\n  /** The lane the pointer is currently over, whatever it is actually over. */\n  overColumnId: string | null;\n}\n\n/**\n * A lane's body sits inside the lane's frame, so a raw corner-distance\n * strategy lets the body steal the hit from the lane itself — most visibly at\n * the board ends, where the last lane then never shifts aside to open the\n * drop gap. Resolve by what is being dragged: a column only ever hits other\n * columns; a card hits the card under the pointer first, then the lane body\n * under it, then whatever is nearest.\n */\nconst boardCollisionDetection: CollisionDetection = (args) => {\n  const isColumn = args.active.data.current?.[\"type\"] === \"column\";\n  const containers = args.droppableContainers.filter((container) => {\n    const type = container.data.current?.[\"type\"];\n    return isColumn ? type === \"column\" : type !== \"column\";\n  });\n  const scoped = { ...args, droppableContainers: containers };\n  if (isColumn) return closestCorners(scoped);\n  const within = pointerWithin(scoped);\n  if (within.length > 0) {\n    const rank = (id: (typeof within)[number][\"id\"]) =>\n      containers.find((c) => c.id === id)?.data.current?.[\"type\"] === \"card\" ? 0 : 1;\n    return [...within].sort((a, b) => rank(a.id) - rank(b.id));\n  }\n  return closestCorners(scoped);\n};\n\nconst BoardContext = createContext<BoardContextValue>({\n  activeId: null,\n  activeType: null,\n  overColumnId: null,\n});\n\nexport interface BoardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onDragEnd\"> {\n  /** Column ids in render order. Required for columns to be re-orderable. */\n  columnIds?: string[];\n  /** Fired once a card is dropped somewhere new. Apply it to your own state. */\n  onMove?: (move: BoardMove) => void;\n  /** Fired once a column is dropped in a new position. */\n  onColumnMove?: (move: BoardColumnMove) => void;\n  /** Rendered inside the drag overlay while a card is in the air. */\n  renderDragOverlay?: (cardId: string) => ReactNode;\n  /** Rendered inside the drag overlay while a column is in the air. */\n  renderColumnDragOverlay?: (columnId: string) => ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * A column board with pointer and keyboard dragging. The board owns the drag\n * mechanics only — the card data stays yours; react to `onMove`.\n */\nexport const Board = forwardRef<HTMLDivElement, BoardProps>(function Board(\n  {\n    columnIds,\n    onMove,\n    onColumnMove,\n    renderDragOverlay,\n    renderColumnDragOverlay,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const dndId = useId();\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [activeType, setActiveType] = useState<\"card\" | \"column\" | null>(null);\n  const [overColumnId, setOverColumnId] = useState<string | null>(null);\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: boardCoordinateGetter }),\n  );\n\n  const handleStart = useCallback((event: DragStartEvent) => {\n    setActiveId(String(event.active.id));\n    setActiveType(event.active.data.current?.[\"type\"] === \"column\" ? \"column\" : \"card\");\n  }, []);\n\n  /* Cards land on cards as often as on empty space, so the lane a drag is over\n   * is always resolved back to a column id — one highlight, one meaning. */\n  const handleOver = useCallback((event: DragOverEvent) => {\n    const over = event.over;\n    if (!over) {\n      setOverColumnId(null);\n      return;\n    }\n    const overData = over.data.current ?? {};\n    const columnId =\n      overData[\"type\"] === \"column\" ? String(over.id) : String(overData[\"columnId\"] ?? \"\");\n    setOverColumnId(columnId || null);\n  }, []);\n\n  const reset = useCallback(() => {\n    setActiveId(null);\n    setActiveType(null);\n    setOverColumnId(null);\n  }, []);\n\n  const handleEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event;\n      reset();\n      if (!over) return;\n\n      /* Columns reorder among themselves; a column never lands inside a lane. */\n      if (active.data.current?.[\"type\"] === \"column\") {\n        const move = columnMove(event, columnIds ?? []);\n        if (move) onColumnMove?.(move);\n      } else {\n        const move = cardMove(event);\n        if (move) onMove?.(move);\n      }\n    },\n    [columnIds, onColumnMove, onMove, reset],\n  );\n\n  const value = useMemo(\n    () => ({ activeId, activeType, overColumnId }),\n    [activeId, activeType, overColumnId],\n  );\n\n  const board = (\n    <div ref={ref} className={[\"ds-board\", className].filter(Boolean).join(\" \")} {...rest}>\n      {children}\n    </div>\n  );\n\n  return (\n    <BoardContext.Provider value={value}>\n      <DndContext\n        id={`ds-board-${dndId}`}\n        sensors={sensors}\n        collisionDetection={boardCollisionDetection}\n        /* Lanes scroll and change height mid-drag, so positions are re-read\n         * continuously — without this the shift animation misfires. */\n        measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}\n\n        onDragStart={handleStart}\n        onDragOver={handleOver}\n        onDragEnd={handleEnd}\n        onDragCancel={reset}\n      >\n        {columnIds ? (\n          <SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>\n            {board}\n          </SortableContext>\n        ) : (\n          board\n        )}\n        <DragOverlay>\n          {activeId && activeType === \"card\" ? (\n            <div className=\"ds-board-card\" data-overlay>\n              <span className=\"ds-board-card__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-board-card__content\">{renderDragOverlay?.(activeId)}</div>\n            </div>\n          ) : null}\n          {activeId && activeType === \"column\" ? (\n            <div className=\"ds-board-column\" data-overlay>\n              {renderColumnDragOverlay?.(activeId)}\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    </BoardContext.Provider>\n  );\n});\n\nexport interface BoardColumnProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  title: string;\n  /** Card ids in render order — the sortable contract for this column. */\n  itemIds: string[];\n  /** Shown beside the title; defaults to the number of cards. */\n  count?: number;\n  /** A control in the column head, e.g. an add button or a menu. */\n  action?: ReactNode;\n  /** Set false to pin a lane in place. */\n  isDraggable?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * One lane of the board. Heavy frame, hairline head rule, scrolling body, and\n * a grip on top of the head that drags the whole lane sideways.\n */\nexport const BoardColumn = forwardRef<HTMLElement, BoardColumnProps>(\n  function BoardColumn(\n    { id, title, itemIds, count, action, isDraggable = true, className, children, ...rest },\n    ref,\n  ) {\n    const { activeType, overColumnId } = useContext(BoardContext);\n    const { setNodeRef: setBodyRef } = useDroppable({\n      id: `${id}::body`,\n      data: { type: \"column-body\", columnId: id, items: itemIds },\n    });\n    const {\n      attributes,\n      listeners,\n      setNodeRef: setColumnRef,\n      transform,\n      transition,\n      isDragging,\n    } = useSortable({\n      id,\n      disabled: !isDraggable,\n      data: { type: \"column\", columnId: id, items: itemIds },\n    });\n\n    return (\n      <section\n        ref={mergeRefs(setColumnRef, ref)}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-board-column\", className].filter(Boolean).join(\" \")}\n        data-over={(activeType === \"card\" && overColumnId === id) || undefined}\n        data-dragging={isDragging || undefined}\n\n        aria-label={title}\n        {...rest}\n      >\n        {isDraggable && (\n          <Button\n            variant=\"simple\"\n            size=\"sm\"\n            iconStart=\"grip-horizontal\"\n            className=\"ds-board-column__grip\"\n            aria-label={`Reorder ${title}`}\n            {...attributes}\n            {...listeners}\n          />\n        )}\n        <header className=\"ds-board-column__head\">\n          <span className=\"ds-board-column__title\">{title}</span>\n          <span className=\"ds-board-column__count\">{count ?? itemIds.length}</span>\n          {action && <span className=\"ds-board-column__action\">{action}</span>}\n        </header>\n        <div ref={setBodyRef} className=\"ds-board-column__body\">\n          <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>\n            {children}\n          </SortableContext>\n        </div>\n      </section>\n    );\n  },\n);\n\nexport interface BoardCardProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  columnId: string;\n  /** Accessible name announced when the card is picked up. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * A draggable card. The grip on the left is the handle, so the card body can\n * hold links and buttons; the grip is a real button for keyboard users:\n * space to pick up, arrows to move, space to drop.\n */\nexport const BoardCard = forwardRef<HTMLDivElement, BoardCardProps>(function BoardCard(\n  { id, columnId, label, className, children, ...rest },\n  ref,\n) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =\n    useSortable({ id, data: { type: \"card\", columnId } });\n  const { activeId } = useContext(BoardContext);\n\n  return (\n    <div\n      ref={mergeRefs(setNodeRef, ref)}\n      style={{ transform: CSS.Translate.toString(transform), transition }}\n      className={[\"ds-board-card\", className].filter(Boolean).join(\" \")}\n      data-dragging={isDragging || undefined}\n      data-idle={activeId && activeId !== id ? \"\" : undefined}\n      {...rest}\n    >\n      <Button\n        variant=\"simple\"\n        size=\"sm\"\n        isIconOnly\n        iconStart=\"grip-vertical\"\n        className=\"ds-board-card__handle\"\n        aria-label={label ? `Move ${label}` : \"Move card\"}\n        {...attributes}\n        {...listeners}\n      />\n      <div className=\"ds-board-card__content\">{children}</div>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/chunks/Board-BTFSzn6c.js

@@ -0,0 +1,239 @@
+import { t as e } from "./Icon-CGY1FNXT.js";
+import { Button as t } from "../components/Button/index.js";
+import { t as n } from "./mergeRefs-DGM402mE.js";
+import { createContext as r, forwardRef as i, useCallback as a, useContext as o, useId as s, useMemo as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { DndContext as f, DragOverlay as p, KeyboardSensor as m, MeasuringStrategy as h, PointerSensor as g, closestCorners as _, pointerWithin as v, useDroppable as y, useSensor as b, useSensors as x } from "@dnd-kit/core";
+import { SortableContext as S, horizontalListSortingStrategy as C, sortableKeyboardCoordinates as w, useSortable as T, verticalListSortingStrategy as E } from "@dnd-kit/sortable";
+import { CSS as D } from "@dnd-kit/utilities";
+//#region src/components/Board/moves.ts
+function O({ active: e, over: t }, n) {
+	if (!t) return;
+	let r = t.data.current ?? {}, i = r.type === "column" ? String(t.id) : String(r.columnId ?? ""), a = n.indexOf(i);
+	if (!(a < 0 || i === String(e.id))) return {
+		columnId: String(e.id),
+		toIndex: a
+	};
+}
+function k({ active: e, over: t }) {
+	if (!t) return;
+	let n = String(e.data.current?.columnId ?? ""), r = t.data.current ?? {}, i = r.type === "card", a = String(r.columnId ?? (i ? "" : t.id)), o = i ? r.sortable?.index ?? 0 : (r.items ?? []).length;
+	if (a && (n !== a || String(e.id) !== String(t.id))) return {
+		cardId: String(e.id),
+		fromColumnId: n,
+		toColumnId: a,
+		toIndex: o
+	};
+}
+//#endregion
+//#region src/components/Board/keyboard.ts
+var A = (e, t) => {
+	let { currentCoordinates: n, context: r } = t;
+	if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
+		let t = r.droppableContainers.getEnabled().filter((e) => e.data.current?.type === "column-body").sort((e, t) => (e.rect.current?.left ?? 0) - (t.rect.current?.left ?? 0)), i = r.active?.rect.current.translated;
+		if (!i) return;
+		let a = t[t.findIndex((e) => (e.rect.current?.left ?? 0) <= i.left + 1 && (e.rect.current?.right ?? 0) >= i.left - 1) + (e.code === "ArrowRight" ? 1 : -1)]?.rect.current;
+		return a ? (e.preventDefault(), {
+			x: a.left + a.width / 2 - i.width / 2,
+			y: n.y
+		}) : void 0;
+	}
+	return w(e, t);
+}, j = (e) => {
+	let t = e.active.data.current?.type === "column", n = e.droppableContainers.filter((e) => {
+		let n = e.data.current?.type;
+		return t ? n === "column" : n !== "column";
+	}), r = {
+		...e,
+		droppableContainers: n
+	};
+	if (t) return _(r);
+	let i = v(r);
+	if (i.length > 0) {
+		let e = (e) => n.find((t) => t.id === e)?.data.current?.type === "card" ? 0 : 1;
+		return [...i].sort((t, n) => e(t.id) - e(n.id));
+	}
+	return _(r);
+}, M = r({
+	activeId: null,
+	activeType: null,
+	overColumnId: null
+}), N = i(function({ columnIds: t, onMove: n, onColumnMove: r, renderDragOverlay: i, renderColumnDragOverlay: o, className: _, children: v, ...y }, w) {
+	let T = s(), [E, D] = l(null), [N, P] = l(null), [F, I] = l(null), L = x(b(g, { activationConstraint: { distance: 4 } }), b(m, { coordinateGetter: A })), R = a((e) => {
+		D(String(e.active.id)), P(e.active.data.current?.type === "column" ? "column" : "card");
+	}, []), z = a((e) => {
+		let t = e.over;
+		if (!t) {
+			I(null);
+			return;
+		}
+		let n = t.data.current ?? {}, r = n.type === "column" ? String(t.id) : String(n.columnId ?? "");
+		I(r || null);
+	}, []), B = a(() => {
+		D(null), P(null), I(null);
+	}, []), V = a((e) => {
+		let { active: i, over: a } = e;
+		if (B(), a) {
+			if (i.data.current?.type === "column") {
+				let n = O(e, t ?? []);
+				n && r?.(n);
+			} else {
+				let t = k(e);
+				t && n?.(t);
+			}
+		}
+	}, [
+		t,
+		r,
+		n,
+		B
+	]), H = c(() => ({
+		activeId: E,
+		activeType: N,
+		overColumnId: F
+	}), [
+		E,
+		N,
+		F
+	]), U = /* @__PURE__ */ u("div", {
+		ref: w,
+		className: ["ds-board", _].filter(Boolean).join(" "),
+		...y,
+		children: v
+	});
+	return /* @__PURE__ */ u(M.Provider, {
+		value: H,
+		children: /* @__PURE__ */ d(f, {
+			id: `ds-board-${T}`,
+			sensors: L,
+			collisionDetection: j,
+			measuring: { droppable: { strategy: h.Always } },
+			onDragStart: R,
+			onDragOver: z,
+			onDragEnd: V,
+			onDragCancel: B,
+			children: [t ? /* @__PURE__ */ u(S, {
+				items: t,
+				strategy: C,
+				children: U
+			}) : U, /* @__PURE__ */ d(p, { children: [E && N === "card" ? /* @__PURE__ */ d("div", {
+				className: "ds-board-card",
+				"data-overlay": !0,
+				children: [/* @__PURE__ */ u("span", {
+					className: "ds-board-card__handle",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ u(e, { name: "grip-vertical" })
+				}), /* @__PURE__ */ u("div", {
+					className: "ds-board-card__content",
+					children: i?.(E)
+				})]
+			}) : null, E && N === "column" ? /* @__PURE__ */ u("div", {
+				className: "ds-board-column",
+				"data-overlay": !0,
+				children: o?.(E)
+			}) : null] })]
+		})
+	});
+}), P = i(function({ id: e, title: r, itemIds: i, count: a, action: s, isDraggable: c = !0, className: l, children: f, ...p }, m) {
+	let { activeType: h, overColumnId: g } = o(M), { setNodeRef: _ } = y({
+		id: `${e}::body`,
+		data: {
+			type: "column-body",
+			columnId: e,
+			items: i
+		}
+	}), { attributes: v, listeners: b, setNodeRef: x, transform: C, transition: w, isDragging: O } = T({
+		id: e,
+		disabled: !c,
+		data: {
+			type: "column",
+			columnId: e,
+			items: i
+		}
+	});
+	return /* @__PURE__ */ d("section", {
+		ref: n(x, m),
+		style: {
+			transform: D.Translate.toString(C),
+			transition: w
+		},
+		className: ["ds-board-column", l].filter(Boolean).join(" "),
+		"data-over": h === "card" && g === e || void 0,
+		"data-dragging": O || void 0,
+		"aria-label": r,
+		...p,
+		children: [
+			c && /* @__PURE__ */ u(t, {
+				variant: "simple",
+				size: "sm",
+				iconStart: "grip-horizontal",
+				className: "ds-board-column__grip",
+				"aria-label": `Reorder ${r}`,
+				...v,
+				...b
+			}),
+			/* @__PURE__ */ d("header", {
+				className: "ds-board-column__head",
+				children: [
+					/* @__PURE__ */ u("span", {
+						className: "ds-board-column__title",
+						children: r
+					}),
+					/* @__PURE__ */ u("span", {
+						className: "ds-board-column__count",
+						children: a ?? i.length
+					}),
+					s && /* @__PURE__ */ u("span", {
+						className: "ds-board-column__action",
+						children: s
+					})
+				]
+			}),
+			/* @__PURE__ */ u("div", {
+				ref: _,
+				className: "ds-board-column__body",
+				children: /* @__PURE__ */ u(S, {
+					items: i,
+					strategy: E,
+					children: f
+				})
+			})
+		]
+	});
+}), F = i(function({ id: e, columnId: r, label: i, className: a, children: s, ...c }, l) {
+	let { attributes: f, listeners: p, setNodeRef: m, transform: h, transition: g, isDragging: _ } = T({
+		id: e,
+		data: {
+			type: "card",
+			columnId: r
+		}
+	}), { activeId: v } = o(M);
+	return /* @__PURE__ */ d("div", {
+		ref: n(m, l),
+		style: {
+			transform: D.Translate.toString(h),
+			transition: g
+		},
+		className: ["ds-board-card", a].filter(Boolean).join(" "),
+		"data-dragging": _ || void 0,
+		"data-idle": v && v !== e ? "" : void 0,
+		...c,
+		children: [/* @__PURE__ */ u(t, {
+			variant: "simple",
+			size: "sm",
+			isIconOnly: !0,
+			iconStart: "grip-vertical",
+			className: "ds-board-card__handle",
+			"aria-label": i ? `Move ${i}` : "Move card",
+			...f,
+			...p
+		}), /* @__PURE__ */ u("div", {
+			className: "ds-board-card__content",
+			children: s
+		})]
+	});
+});
+//#endregion
+export { F as n, P as r, N as t };
+
+//# sourceMappingURL=Board-BTFSzn6c.js.map

package/dist/chunks/Board-BTFSzn6c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Board-BTFSzn6c.js","names":["Icon","mergeRefs","columnMove","over","data","columnId","\"type\"","\"columnId\"","toIndex","columnIds","active","cardMove","fromColumnId","onCard","toColumnId","\"sortable\"","\"items\"","boardCoordinateGetter","args","event","containers","context","c","a","b","activeRect","rect","currentCoordinates","sortableKeyboardCoordinates","boardCollisionDetection","isColumn","type","container","scoped","closestCorners","within","pointerWithin","rank","id","BoardContext","createContext","Board","forwardRef","rest","dndId","useId","activeId","setActiveId","useState","activeType","setActiveType","overColumnId","setOverColumnId","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleStart","useCallback","handleOver","overData","reset","handleEnd","move","onColumnMove","onMove","value","useMemo","board","className","DndContext","MeasuringStrategy","SortableContext","horizontalListSortingStrategy","DragOverlay","renderDragOverlay","renderColumnDragOverlay","BoardColumn","useContext","setBodyRef","useDroppable","itemIds","setColumnRef","useSortable","isDraggable","ref","CSS","transform","isDragging","title","Button","attributes","listeners","count","action","verticalListSortingStrategy","BoardCard","setNodeRef","label"],"sources":["../../src/components/Board/moves.ts","../../src/components/Board/keyboard.ts","../../src/components/Board/index.tsx"],"sourcesContent":["import type { DragEndEvent } from \"@dnd-kit/core\";\nimport type { BoardColumnMove, BoardMove } from \".\";\n\nexport function columnMove({ active, over }: DragEndEvent, columnIds: string[]): BoardColumnMove | undefined {\n  if (!over) return;\n  const data = over.data.current ?? {};\n  const columnId = data[\"type\"] === \"column\" ? String(over.id) : String(data[\"columnId\"] ?? \"\");\n  const toIndex = columnIds.indexOf(columnId);\n  if (toIndex < 0 || columnId === String(active.id)) return;\n  return { columnId: String(active.id), toIndex };\n}\n\nexport function cardMove({ active, over }: DragEndEvent): BoardMove | undefined {\n  if (!over) return;\n  const fromColumnId = String(active.data.current?.[\"columnId\"] ?? \"\");\n  const data = over.data.current ?? {};\n  const onCard = data[\"type\"] === \"card\";\n  const toColumnId = String(data[\"columnId\"] ?? (onCard ? \"\" : over.id));\n  // A card occupies a precise slot; empty lane space appends to the lane.\n  const toIndex = onCard\n    ? (data[\"sortable\"] as { index: number } | undefined)?.index ?? 0\n    : ((data[\"items\"] as string[] | undefined) ?? []).length;\n  if (!toColumnId) return;\n  if (fromColumnId === toColumnId && String(active.id) === String(over.id)) return;\n  return { cardId: String(active.id), fromColumnId, toColumnId, toIndex };\n}\n","import type { KeyboardCoordinateGetter } from \"@dnd-kit/core\";\nimport { sortableKeyboardCoordinates } from \"@dnd-kit/sortable\";\n\n/**\n * Arrow up/down sorts inside a lane; left/right jumps lanes, which the stock\n * sortable getter does not do.\n */\nexport const boardCoordinateGetter: KeyboardCoordinateGetter = (event, args) => {\n  const { currentCoordinates, context } = args;\n  if (event.code === \"ArrowLeft\" || event.code === \"ArrowRight\") {\n    const containers = context.droppableContainers\n      .getEnabled()\n      .filter((c) => c.data.current?.[\"type\"] === \"column-body\")\n      .sort((a, b) => (a.rect.current?.left ?? 0) - (b.rect.current?.left ?? 0));\n    const activeRect = context.active?.rect.current.translated;\n    if (!activeRect) return undefined;\n    const index = containers.findIndex(\n      (c) => (c.rect.current?.left ?? 0) <= activeRect.left + 1 &&\n        (c.rect.current?.right ?? 0) >= activeRect.left - 1,\n    );\n    const next = containers[index + (event.code === \"ArrowRight\" ? 1 : -1)];\n    const rect = next?.rect.current;\n    if (!rect) return undefined;\n    event.preventDefault();\n    return { x: rect.left + rect.width / 2 - activeRect.width / 2, y: currentCoordinates.y };\n  }\n  return sortableKeyboardCoordinates(event, args);\n};\n\n","import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCorners,\n  pointerWithin,\n  MeasuringStrategy,\n\n  useDroppable,\n  useSensor,\n  useSensors,\n  type CollisionDetection,\n  type DragEndEvent,\n  type DragOverEvent,\n  type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { mergeRefs } from \"../../internal/mergeRefs\";\nimport { cardMove, columnMove } from \"./moves\";\nimport { boardCoordinateGetter } from \"./keyboard\";\nimport \"./style.css\";\n\nexport interface BoardMove {\n  cardId: string;\n  fromColumnId: string;\n  toColumnId: string;\n  /** Index the card lands on inside the destination column. */\n  toIndex: number;\n}\n\nexport interface BoardColumnMove {\n  columnId: string;\n  toIndex: number;\n}\n\ninterface BoardContextValue {\n  activeId: string | null;\n  activeType: \"card\" | \"column\" | null;\n  /** The lane the pointer is currently over, whatever it is actually over. */\n  overColumnId: string | null;\n}\n\n/**\n * A lane's body sits inside the lane's frame, so a raw corner-distance\n * strategy lets the body steal the hit from the lane itself — most visibly at\n * the board ends, where the last lane then never shifts aside to open the\n * drop gap. Resolve by what is being dragged: a column only ever hits other\n * columns; a card hits the card under the pointer first, then the lane body\n * under it, then whatever is nearest.\n */\nconst boardCollisionDetection: CollisionDetection = (args) => {\n  const isColumn = args.active.data.current?.[\"type\"] === \"column\";\n  const containers = args.droppableContainers.filter((container) => {\n    const type = container.data.current?.[\"type\"];\n    return isColumn ? type === \"column\" : type !== \"column\";\n  });\n  const scoped = { ...args, droppableContainers: containers };\n  if (isColumn) return closestCorners(scoped);\n  const within = pointerWithin(scoped);\n  if (within.length > 0) {\n    const rank = (id: (typeof within)[number][\"id\"]) =>\n      containers.find((c) => c.id === id)?.data.current?.[\"type\"] === \"card\" ? 0 : 1;\n    return [...within].sort((a, b) => rank(a.id) - rank(b.id));\n  }\n  return closestCorners(scoped);\n};\n\nconst BoardContext = createContext<BoardContextValue>({\n  activeId: null,\n  activeType: null,\n  overColumnId: null,\n});\n\nexport interface BoardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onDragEnd\"> {\n  /** Column ids in render order. Required for columns to be re-orderable. */\n  columnIds?: string[];\n  /** Fired once a card is dropped somewhere new. Apply it to your own state. */\n  onMove?: (move: BoardMove) => void;\n  /** Fired once a column is dropped in a new position. */\n  onColumnMove?: (move: BoardColumnMove) => void;\n  /** Rendered inside the drag overlay while a card is in the air. */\n  renderDragOverlay?: (cardId: string) => ReactNode;\n  /** Rendered inside the drag overlay while a column is in the air. */\n  renderColumnDragOverlay?: (columnId: string) => ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * A column board with pointer and keyboard dragging. The board owns the drag\n * mechanics only — the card data stays yours; react to `onMove`.\n */\nexport const Board = forwardRef<HTMLDivElement, BoardProps>(function Board(\n  {\n    columnIds,\n    onMove,\n    onColumnMove,\n    renderDragOverlay,\n    renderColumnDragOverlay,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const dndId = useId();\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [activeType, setActiveType] = useState<\"card\" | \"column\" | null>(null);\n  const [overColumnId, setOverColumnId] = useState<string | null>(null);\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: boardCoordinateGetter }),\n  );\n\n  const handleStart = useCallback((event: DragStartEvent) => {\n    setActiveId(String(event.active.id));\n    setActiveType(event.active.data.current?.[\"type\"] === \"column\" ? \"column\" : \"card\");\n  }, []);\n\n  /* Cards land on cards as often as on empty space, so the lane a drag is over\n   * is always resolved back to a column id — one highlight, one meaning. */\n  const handleOver = useCallback((event: DragOverEvent) => {\n    const over = event.over;\n    if (!over) {\n      setOverColumnId(null);\n      return;\n    }\n    const overData = over.data.current ?? {};\n    const columnId =\n      overData[\"type\"] === \"column\" ? String(over.id) : String(overData[\"columnId\"] ?? \"\");\n    setOverColumnId(columnId || null);\n  }, []);\n\n  const reset = useCallback(() => {\n    setActiveId(null);\n    setActiveType(null);\n    setOverColumnId(null);\n  }, []);\n\n  const handleEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event;\n      reset();\n      if (!over) return;\n\n      /* Columns reorder among themselves; a column never lands inside a lane. */\n      if (active.data.current?.[\"type\"] === \"column\") {\n        const move = columnMove(event, columnIds ?? []);\n        if (move) onColumnMove?.(move);\n      } else {\n        const move = cardMove(event);\n        if (move) onMove?.(move);\n      }\n    },\n    [columnIds, onColumnMove, onMove, reset],\n  );\n\n  const value = useMemo(\n    () => ({ activeId, activeType, overColumnId }),\n    [activeId, activeType, overColumnId],\n  );\n\n  const board = (\n    <div ref={ref} className={[\"ds-board\", className].filter(Boolean).join(\" \")} {...rest}>\n      {children}\n    </div>\n  );\n\n  return (\n    <BoardContext.Provider value={value}>\n      <DndContext\n        id={`ds-board-${dndId}`}\n        sensors={sensors}\n        collisionDetection={boardCollisionDetection}\n        /* Lanes scroll and change height mid-drag, so positions are re-read\n         * continuously — without this the shift animation misfires. */\n        measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}\n\n        onDragStart={handleStart}\n        onDragOver={handleOver}\n        onDragEnd={handleEnd}\n        onDragCancel={reset}\n      >\n        {columnIds ? (\n          <SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>\n            {board}\n          </SortableContext>\n        ) : (\n          board\n        )}\n        <DragOverlay>\n          {activeId && activeType === \"card\" ? (\n            <div className=\"ds-board-card\" data-overlay>\n              <span className=\"ds-board-card__handle\" aria-hidden=\"true\">\n                <Icon name=\"grip-vertical\" />\n              </span>\n              <div className=\"ds-board-card__content\">{renderDragOverlay?.(activeId)}</div>\n            </div>\n          ) : null}\n          {activeId && activeType === \"column\" ? (\n            <div className=\"ds-board-column\" data-overlay>\n              {renderColumnDragOverlay?.(activeId)}\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    </BoardContext.Provider>\n  );\n});\n\nexport interface BoardColumnProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  title: string;\n  /** Card ids in render order — the sortable contract for this column. */\n  itemIds: string[];\n  /** Shown beside the title; defaults to the number of cards. */\n  count?: number;\n  /** A control in the column head, e.g. an add button or a menu. */\n  action?: ReactNode;\n  /** Set false to pin a lane in place. */\n  isDraggable?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * One lane of the board. Heavy frame, hairline head rule, scrolling body, and\n * a grip on top of the head that drags the whole lane sideways.\n */\nexport const BoardColumn = forwardRef<HTMLElement, BoardColumnProps>(\n  function BoardColumn(\n    { id, title, itemIds, count, action, isDraggable = true, className, children, ...rest },\n    ref,\n  ) {\n    const { activeType, overColumnId } = useContext(BoardContext);\n    const { setNodeRef: setBodyRef } = useDroppable({\n      id: `${id}::body`,\n      data: { type: \"column-body\", columnId: id, items: itemIds },\n    });\n    const {\n      attributes,\n      listeners,\n      setNodeRef: setColumnRef,\n      transform,\n      transition,\n      isDragging,\n    } = useSortable({\n      id,\n      disabled: !isDraggable,\n      data: { type: \"column\", columnId: id, items: itemIds },\n    });\n\n    return (\n      <section\n        ref={mergeRefs(setColumnRef, ref)}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={[\"ds-board-column\", className].filter(Boolean).join(\" \")}\n        data-over={(activeType === \"card\" && overColumnId === id) || undefined}\n        data-dragging={isDragging || undefined}\n\n        aria-label={title}\n        {...rest}\n      >\n        {isDraggable && (\n          <Button\n            variant=\"simple\"\n            size=\"sm\"\n            iconStart=\"grip-horizontal\"\n            className=\"ds-board-column__grip\"\n            aria-label={`Reorder ${title}`}\n            {...attributes}\n            {...listeners}\n          />\n        )}\n        <header className=\"ds-board-column__head\">\n          <span className=\"ds-board-column__title\">{title}</span>\n          <span className=\"ds-board-column__count\">{count ?? itemIds.length}</span>\n          {action && <span className=\"ds-board-column__action\">{action}</span>}\n        </header>\n        <div ref={setBodyRef} className=\"ds-board-column__body\">\n          <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>\n            {children}\n          </SortableContext>\n        </div>\n      </section>\n    );\n  },\n);\n\nexport interface BoardCardProps extends HTMLAttributes<HTMLDivElement> {\n  id: string;\n  columnId: string;\n  /** Accessible name announced when the card is picked up. */\n  label?: string;\n  children?: ReactNode;\n}\n\n/**\n * A draggable card. The grip on the left is the handle, so the card body can\n * hold links and buttons; the grip is a real button for keyboard users:\n * space to pick up, arrows to move, space to drop.\n */\nexport const BoardCard = forwardRef<HTMLDivElement, BoardCardProps>(function BoardCard(\n  { id, columnId, label, className, children, ...rest },\n  ref,\n) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =\n    useSortable({ id, data: { type: \"card\", columnId } });\n  const { activeId } = useContext(BoardContext);\n\n  return (\n    <div\n      ref={mergeRefs(setNodeRef, ref)}\n      style={{ transform: CSS.Translate.toString(transform), transition }}\n      className={[\"ds-board-card\", className].filter(Boolean).join(\" \")}\n      data-dragging={isDragging || undefined}\n      data-idle={activeId && activeId !== id ? \"\" : undefined}\n      {...rest}\n    >\n      <Button\n        variant=\"simple\"\n        size=\"sm\"\n        isIconOnly\n        iconStart=\"grip-vertical\"\n        className=\"ds-board-card__handle\"\n        aria-label={label ? `Move ${label}` : \"Move card\"}\n        {...attributes}\n        {...listeners}\n      />\n      <div className=\"ds-board-card__content\">{children}</div>\n    </div>\n  );\n});\n"],"mappings":"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"}