@alneas/appkit-react 0.3.0 → 0.3.1

package/dist/tools/components/kanban/kanban-primitives.js.map

@@ -1 +1 @@
-{"version":3,"file":"kanban-primitives.js","names":["React","React$1","KanbanDragSurface","card","controller","KanbanCardView","DragDropProvider","children","createPortal","DragOverlay","overlayClassName","KanbanDraggableCard","props","useDraggable","task","elementRef","cardRef","element","ref","disabled","registered","draggable","attribute","supplied","cn","isDragging","className","KanbanColumnFrame","setNodeRef","isOver","useDroppable","column","pointerIntersection","composedRef","node","cleanup","isOverLimit"],"sources":["../../../../src/tools/components/kanban/kanban-primitives.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { DragDropProvider, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/react';\nimport { pointerIntersection } from '@dnd-kit/collision';\nimport { cn } from '../../lib/utils';\nimport { KanbanCardView } from './KanbanCardView';\nimport type { KanbanColumn, KanbanTask } from './types';\nimport type { useKanbanDrag } from './use-kanban-drag';\n\n/**\n * Render the native Kanban provider and one body-portal overlay.\n * @param props - Native controller, optional overlay class and registered children.\n * @returns The provider and overlay; no portal is created during server rendering.\n * @remarks Uses immediate drop completion with native focus restoration. The\n * overlay is presentation only and never registers a second draggable.\n * @example\n * ```tsx\n * import {KanbanDragSurface, KanbanColumnFrame, KanbanDraggableCard, useKanbanDrag}\n *   from '@alneas/appkit-react/tools/kanban';\n * import '@alneas/appkit-react/styles';\n * export function CustomCards() {\n *   const tasks = [{id: 'one', title: 'Review', status: 'todo'}];\n *   const controller = useKanbanDrag({tasks});\n *   return <KanbanDragSurface controller={controller}>\n *     <KanbanColumnFrame column={{id: 'todo', title: 'Todo'}}>\n *       <KanbanDraggableCard task={tasks[0]}>Review</KanbanDraggableCard>\n *     </KanbanColumnFrame>\n *   </KanbanDragSurface>;\n * }\n * ```\n */\nexport function KanbanDragSurface({\n  controller,\n  overlayClassName,\n  children,\n}: {\n  controller: ReturnType<typeof useKanbanDrag>;\n  overlayClassName?: string;\n  children: React.ReactNode;\n}) {\n  const card = controller.activeTask && <KanbanCardView task={controller.activeTask} />;\n  return (\n    <DragDropProvider {...controller.contextProps}>\n      {children}\n      {typeof document !== 'undefined' &&\n        createPortal(\n          <DragOverlay dropAnimation={{duration: 0}}>\n            {card && (overlayClassName ? <div className={overlayClassName}>{card}</div> : card)}\n          </DragOverlay>,\n          document.body,\n        )}\n    </DragDropProvider>\n  );\n}\n\n/**\n * Register a native status-only Kanban card with custom content.\n * @param props - Task, optional disabled flag (default false), HTML attributes,\n * custom style and children. Caller-supplied accessibility attributes are retained.\n * @returns A div registered under the native Kanban surface.\n * @remarks Requires the same native provider as KanbanColumnFrame. Disabled cards\n * have no automatic drag tab stop; this component does not persist order or status.\n * @example\n * ```tsx\n * import {KanbanDragSurface, KanbanColumnFrame, KanbanDraggableCard, useKanbanDrag}\n *   from '@alneas/appkit-react/tools/kanban';\n * import '@alneas/appkit-react/styles';\n * export function CustomCards() {\n *   const tasks = [{id: 'one', title: 'Review', status: 'todo'}];\n *   const controller = useKanbanDrag({tasks});\n *   return <KanbanDragSurface controller={controller}>\n *     <KanbanColumnFrame column={{id: 'todo', title: 'Todo'}}>\n *       <KanbanDraggableCard task={tasks[0]}>Review</KanbanDraggableCard>\n *     </KanbanColumnFrame>\n *   </KanbanDragSurface>;\n * }\n * ```\n */\nexport function KanbanDraggableCard({\n  task,\n  disabled,\n  className,\n  children,\n  style,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & { task: KanbanTask; disabled?: boolean }) {\n  const { ref, draggable, isDragging } = useDraggable({\n    id: task.id,\n    type: 'kanban-task',\n    data: { type: 'Task', task },\n    disabled,\n  });\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n  const cardRef = React.useCallback((element: HTMLDivElement | null) => {\n    elementRef.current = element;\n    ref(disabled ? null : element);\n  }, [ref, disabled]);\n  React.useLayoutEffect(() => {\n    // Native ref cleanup retains an active source. Explicitly detach read-only\n    // cards so Accessibility cannot restore drag attributes after React clears them.\n    if (disabled) {\n      const registered = draggable.manager?.registry.draggables.get(task.id);\n      if (registered) registered.element = undefined;\n      for (const attribute of ['tabindex', 'role', 'aria-roledescription', 'aria-describedby', 'aria-disabled', 'aria-pressed', 'aria-grabbed']) {\n        const supplied = props[attribute === 'tabindex' ? 'tabIndex' : attribute as keyof typeof props];\n        if (supplied == null) elementRef.current?.removeAttribute(attribute);\n        else elementRef.current?.setAttribute(attribute, String(supplied));\n      }\n    }\n  });\n  return (\n    <div\n      ref={cardRef}\n      tabIndex={disabled ? undefined : 0}\n      role={disabled ? undefined : 'button'}\n      aria-roledescription={disabled ? undefined : 'draggable'}\n      style={style}\n      data-task-id={task.id}\n      {...props}\n      className={cn(\n        'cursor-grab active:cursor-grabbing',\n        disabled && 'cursor-default',\n        isDragging && 'opacity-30',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * Register a native Kanban column while retaining host-composed content.\n * @remarks Retain forwardRef to compose native registration and caller refs, including\n * callback cleanup; this is not a direct DOM-ref passthrough.\n * @param props - Column metadata, optional limit presentation, HTML attributes and children.\n * @param ref - Forwarded div ref, including React 19 callback cleanup support.\n * @returns A column div accepting Kanban task registrations.\n * @remarks Requires the native Kanban surface. Pointer intersection excludes outside\n * drops; WIP limits are presentational and do not reject a host status callback.\n * @example\n * ```tsx\n * import {KanbanDragSurface, KanbanColumnFrame, KanbanDraggableCard, useKanbanDrag}\n *   from '@alneas/appkit-react/tools/kanban';\n * import '@alneas/appkit-react/styles';\n * export function CustomCards() {\n *   const tasks = [{id: 'one', title: 'Review', status: 'todo'}];\n *   const controller = useKanbanDrag({tasks});\n *   return <KanbanDragSurface controller={controller}>\n *     <KanbanColumnFrame column={{id: 'todo', title: 'Todo'}}>\n *       <KanbanDraggableCard task={tasks[0]}>Review</KanbanDraggableCard>\n *     </KanbanColumnFrame>\n *   </KanbanDragSurface>;\n * }\n * ```\n */\nexport const KanbanColumnFrame = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { column: KanbanColumn; isOverLimit?: boolean }\n>(({ column, isOverLimit, className, children, ...props }, ref) => {\n  const { ref: setNodeRef, isDropTarget: isOver } = useDroppable({\n    id: column.id,\n    accept: 'kanban-task',\n    collisionDetector: pointerIntersection,\n    data: { type: 'Column', column },\n  });\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setNodeRef(node);\n      if (typeof ref === 'function') {\n        // ForwardedRef also supports React 18's void return type; React 19 may return cleanup.\n        const cleanup: unknown = ref(node);\n        if (typeof cleanup === 'function')\n          return () => {\n            setNodeRef(null);\n            cleanup();\n          };\n      } else if (ref) ref.current = node;\n    },\n    [setNodeRef, ref],\n  );\n  return (\n    <div\n      ref={composedRef}\n      data-slot='kanban-column'\n      data-column-id={column.id}\n      data-over={isOver || undefined}\n      data-over-limit={isOverLimit || undefined}\n      {...props}\n      className={cn(\n        'flex h-full w-[320px] min-w-[320px] flex-col rounded-lg bg-muted/30 dark:bg-muted/10 p-3 transition-colors duration-200',\n        isOver && 'bg-primary/5 ring-2 ring-primary/20',\n        isOverLimit && 'bg-destructive/5',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nKanbanColumnFrame.displayName = 'KanbanColumnFrame';\n"],"mappings":";;;;;;;;;AA+BA,SAAgBE,EAAkB,EAChC,eACA,qBACA,eAKC;CACD,IAAMC,IAAOC,EAAW,cAAc,kBAACC,GAAD,EAAgB,MAAMD,EAAW,WAAa,CAAA;CACpF,OACE,kBAACE,GAAD;EAAkB,GAAIF,EAAW;EAAjC,UAAA,CACGG,GACA,OAAO,WAAa,OACnBC,EACE,kBAACC,GAAD;GAAa,eAAe,EAAC,UAAU,EAAC;GACrC,UAAAN,MAASO,IAAmB,kBAAC,OAAD;IAAK,WAAWA;IAAmB,UAAAP;GAAU,CAAA,IAAIA;EACnE,CAAA,GACb,SAAS,IACX,CACc;;AAEtB;AAyBA,SAAgBQ,EAAoB,EAClC,SACA,aACA,cACA,aACA,UACA,GAAGC,KAC+E;CAClF,IAAM,EAAE,QAAK,cAAW,kBAAeC,EAAa;EAClD,IAAIC,EAAK;EACT,MAAM;EACN,MAAM;GAAE,MAAM;GAAQ;EAAK;EAC3B;CACF,CAAC,GACKC,IAAaf,EAAM,OAA8B,IAAI,GACrDgB,IAAUhB,EAAM,aAAa,MAAmC;EAEpE,AADA,EAAW,UAAUiB,GACrBC,EAAIC,IAAW,OAAOF,CAAO;CAC/B,GAAG,CAACC,GAAKC,CAAQ,CAAC;CAclB,OAbAlB,EAAM,sBAAsB;EAG1B,IAAIkB,GAAU;GACZ,IAAMC,IAAaC,EAAU,SAAS,SAAS,WAAW,IAAIP,EAAK,EAAE;GACrE,AAAIM,MAAY,EAAW,UAAU,KAAA;GACrC,KAAK,IAAME,KAAa;IAAC;IAAY;IAAQ;IAAwB;IAAoB;IAAiB;IAAgB;GAAc,GAAG;IACzI,IAAMC,IAAWX,EAAMU,MAAc,aAAa,aAAaA;IAC/D,AAAIC,KAAY,OAAMR,EAAW,SAAS,gBAAgBO,CAAS,IAC9DP,EAAW,SAAS,aAAaO,GAAW,OAAOC,CAAQ,CAAC;GACnE;EACF;CACF,CAAC,GAEC,kBAAC,OAAD;EACE,KAAKP;EACL,UAAUG,IAAW,KAAA,IAAY;EACjC,MAAMA,IAAW,KAAA,IAAY;EAC7B,wBAAsBA,IAAW,KAAA,IAAY;EACtC;EACP,gBAAcL,EAAK;EACnB,GAAIF;EACJ,WAAWY,EACT,sCACAL,KAAY,kBACZM,KAAc,cACdC,CACF;EAEC;CACE,CAAA;AAET;AA2BA,IAAaC,IAAoB3B,EAAM,YAGpC,EAAE,WAAQ,gBAAa,cAAW,aAAU,GAAGY,KAAS,MAAQ;CACjE,IAAM,EAAE,KAAKgB,GAAY,cAAcC,MAAWC,EAAa;EAC7D,IAAIC,EAAO;EACX,QAAQ;EACR,mBAAmBC;EACnB,MAAM;GAAE,MAAM;GAAU;EAAO;CACjC,CAAC,GACKC,IAAcjC,EAAM,aACvB,MAAgC;EAE/B,IADA4B,EAAWM,CAAI,GACX,OAAOhB,KAAQ,YAAY;GAE7B,IAAMiB,IAAmBjB,EAAIgB,CAAI;GACjC,IAAI,OAAOC,KAAY,YACrB,aAAa;IAEX,AADAP,EAAW,IAAI,GACfO,EAAQ;GACV;EACJ,OAAO,AAAIjB,MAAK,EAAI,UAAUgB;CAChC,GACA,CAACN,GAAYV,CAAG,CAClB;CACA,OACE,kBAAC,OAAD;EACE,KAAKe;EACL,aAAU;EACV,kBAAgBF,EAAO;EACvB,aAAWF,KAAU,KAAA;EACrB,mBAAiBO,KAAe,KAAA;EAChC,GAAIxB;EACJ,WAAWY,EACT,2HACAK,KAAU,uCACVO,KAAe,oBACfV,CACF;EAEC;CACE,CAAA;AAET,CAAC;AACD,EAAkB,cAAc"}
+{"version":3,"file":"kanban-primitives.js","names":["React","React$1","KanbanDragSurface","card","controller","KanbanCardView","DragDropProvider","children","createPortal","DragOverlay","overlayClassName","KanbanDraggableCard","props","useDraggable","task","elementRef","cardRef","element","ref","disabled","accessibleCardRef","useAccessibleDragRef","registered","draggable","attribute","supplied","cn","isDragging","className","KanbanColumnFrame","setNodeRef","isOver","useDroppable","column","pointerIntersection","composedRef","node","cleanup","isOverLimit"],"sources":["../../../../src/tools/components/kanban/kanban-primitives.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { DragDropProvider, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/react';\nimport { pointerIntersection } from '@dnd-kit/collision';\nimport { cn } from '../../lib/utils';\nimport {useAccessibleDragRef} from '../ui/dnd/use-accessible-drag-ref';\nimport { KanbanCardView } from './KanbanCardView';\nimport type { KanbanColumn, KanbanTask } from './types';\nimport type { useKanbanDrag } from './use-kanban-drag';\n\n/**\n * Render the native Kanban provider and one body-portal overlay.\n * @param props - Native controller, optional overlay class and registered children.\n * @returns The provider and overlay; no portal is created during server rendering.\n * @remarks Uses immediate drop completion with native focus restoration. The\n * overlay is presentation only and never registers a second draggable.\n * @example\n * ```tsx\n * import {KanbanDragSurface, KanbanColumnFrame, KanbanDraggableCard, useKanbanDrag}\n *   from '@alneas/appkit-react/tools/kanban';\n * import '@alneas/appkit-react/styles';\n * export function CustomCards() {\n *   const tasks = [{id: 'one', title: 'Review', status: 'todo'}];\n *   const controller = useKanbanDrag({tasks});\n *   return <KanbanDragSurface controller={controller}>\n *     <KanbanColumnFrame column={{id: 'todo', title: 'Todo'}}>\n *       <KanbanDraggableCard task={tasks[0]}>Review</KanbanDraggableCard>\n *     </KanbanColumnFrame>\n *   </KanbanDragSurface>;\n * }\n * ```\n */\nexport function KanbanDragSurface({\n  controller,\n  overlayClassName,\n  children,\n}: {\n  controller: ReturnType<typeof useKanbanDrag>;\n  overlayClassName?: string;\n  children: React.ReactNode;\n}) {\n  const card = controller.activeTask && <KanbanCardView task={controller.activeTask} />;\n  return (\n    <DragDropProvider {...controller.contextProps}>\n      {children}\n      {typeof document !== 'undefined' &&\n        createPortal(\n          <DragOverlay dropAnimation={{duration: 0}}>\n            {card && (overlayClassName ? <div className={overlayClassName}>{card}</div> : card)}\n          </DragOverlay>,\n          document.body,\n        )}\n    </DragDropProvider>\n  );\n}\n\n/**\n * Register a native status-only Kanban card with custom content.\n * @param props - Task, optional disabled flag (default false), HTML attributes,\n * custom style and children. Caller-supplied accessibility attributes are retained.\n * @returns A div registered under the native Kanban surface.\n * @remarks Requires the same native provider as KanbanColumnFrame. Disabled cards\n * have no automatic drag tab stop; this component does not persist order or status.\n * @example\n * ```tsx\n * import {KanbanDragSurface, KanbanColumnFrame, KanbanDraggableCard, useKanbanDrag}\n *   from '@alneas/appkit-react/tools/kanban';\n * import '@alneas/appkit-react/styles';\n * export function CustomCards() {\n *   const tasks = [{id: 'one', title: 'Review', status: 'todo'}];\n *   const controller = useKanbanDrag({tasks});\n *   return <KanbanDragSurface controller={controller}>\n *     <KanbanColumnFrame column={{id: 'todo', title: 'Todo'}}>\n *       <KanbanDraggableCard task={tasks[0]}>Review</KanbanDraggableCard>\n *     </KanbanColumnFrame>\n *   </KanbanDragSurface>;\n * }\n * ```\n */\nexport function KanbanDraggableCard({\n  task,\n  disabled,\n  className,\n  children,\n  style,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & { task: KanbanTask; disabled?: boolean }) {\n  const { ref, draggable, isDragging } = useDraggable({\n    id: task.id,\n    type: 'kanban-task',\n    data: { type: 'Task', task },\n    disabled,\n  });\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n  const cardRef = React.useCallback((element: HTMLDivElement | null) => {\n    elementRef.current = element;\n    ref(disabled ? null : element);\n  }, [ref, disabled]);\n  const accessibleCardRef = useAccessibleDragRef(cardRef, !disabled);\n  React.useLayoutEffect(() => {\n    // Native ref cleanup retains an active source. Explicitly detach read-only\n    // cards so Accessibility cannot restore drag attributes after React clears them.\n    if (disabled) {\n      const registered = draggable.manager?.registry.draggables.get(task.id);\n      if (registered) registered.element = undefined;\n      for (const attribute of ['tabindex', 'role', 'aria-roledescription', 'aria-describedby', 'aria-disabled', 'aria-pressed', 'aria-grabbed']) {\n        const supplied = props[attribute === 'tabindex' ? 'tabIndex' : attribute as keyof typeof props];\n        if (supplied == null) elementRef.current?.removeAttribute(attribute);\n        else elementRef.current?.setAttribute(attribute, String(supplied));\n      }\n    }\n  });\n  return (\n    <div\n      ref={accessibleCardRef}\n      tabIndex={disabled ? undefined : 0}\n      role={disabled ? undefined : 'button'}\n      aria-roledescription={disabled ? undefined : 'draggable'}\n      style={style}\n      data-task-id={task.id}\n      {...props}\n      className={cn(\n        'cursor-grab active:cursor-grabbing',\n        disabled && 'cursor-default',\n        isDragging && 'opacity-30',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * Register a native Kanban column while retaining host-composed content.\n * @remarks Retain forwardRef to compose native registration and caller refs, including\n * callback cleanup; this is not a direct DOM-ref passthrough.\n * Requires the native Kanban surface. Pointer intersection excludes outside\n * drops; WIP limits are presentational and do not reject a host status callback.\n * @param props - Column metadata, optional limit presentation, HTML attributes and children.\n * @param ref - Forwarded div ref, including React 19 callback cleanup support.\n * @returns A column div accepting Kanban task registrations.\n * @example\n * ```tsx\n * import {KanbanDragSurface, KanbanColumnFrame, KanbanDraggableCard, useKanbanDrag}\n *   from '@alneas/appkit-react/tools/kanban';\n * import '@alneas/appkit-react/styles';\n * export function CustomCards() {\n *   const tasks = [{id: 'one', title: 'Review', status: 'todo'}];\n *   const controller = useKanbanDrag({tasks});\n *   return <KanbanDragSurface controller={controller}>\n *     <KanbanColumnFrame column={{id: 'todo', title: 'Todo'}}>\n *       <KanbanDraggableCard task={tasks[0]}>Review</KanbanDraggableCard>\n *     </KanbanColumnFrame>\n *   </KanbanDragSurface>;\n * }\n * ```\n */\nexport const KanbanColumnFrame = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { column: KanbanColumn; isOverLimit?: boolean }\n>(({ column, isOverLimit, className, children, ...props }, ref) => {\n  const { ref: setNodeRef, isDropTarget: isOver } = useDroppable({\n    id: column.id,\n    accept: 'kanban-task',\n    collisionDetector: pointerIntersection,\n    data: { type: 'Column', column },\n  });\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setNodeRef(node);\n      if (typeof ref === 'function') {\n        // ForwardedRef also supports React 18's void return type; React 19 may return cleanup.\n        const cleanup: unknown = ref(node);\n        if (typeof cleanup === 'function')\n          return () => {\n            setNodeRef(null);\n            cleanup();\n          };\n      } else if (ref) ref.current = node;\n    },\n    [setNodeRef, ref],\n  );\n  return (\n    <div\n      ref={composedRef}\n      data-slot='kanban-column'\n      data-column-id={column.id}\n      data-over={isOver || undefined}\n      data-over-limit={isOverLimit || undefined}\n      {...props}\n      className={cn(\n        'flex h-full w-[320px] min-w-[320px] flex-col rounded-lg bg-muted/30 dark:bg-muted/10 p-3 transition-colors duration-200',\n        isOver && 'bg-primary/5 ring-2 ring-primary/20',\n        isOverLimit && 'bg-destructive/5',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nKanbanColumnFrame.displayName = 'KanbanColumnFrame';\n"],"mappings":";;;;;;;;;;AAgCA,SAAgBE,EAAkB,EAChC,eACA,qBACA,eAKC;CACD,IAAMC,IAAOC,EAAW,cAAc,kBAACC,GAAD,EAAgB,MAAMD,EAAW,WAAa,CAAA;CACpF,OACE,kBAACE,GAAD;EAAkB,GAAIF,EAAW;EAAjC,UAAA,CACGG,GACA,OAAO,WAAa,OACnBC,EACE,kBAACC,GAAD;GAAa,eAAe,EAAC,UAAU,EAAC;GACrC,UAAAN,MAASO,IAAmB,kBAAC,OAAD;IAAK,WAAWA;IAAmB,UAAAP;GAAU,CAAA,IAAIA;EACnE,CAAA,GACb,SAAS,IACX,CACc;;AAEtB;AAyBA,SAAgBQ,EAAoB,EAClC,SACA,aACA,cACA,aACA,UACA,GAAGC,KAC+E;CAClF,IAAM,EAAE,QAAK,cAAW,kBAAeC,EAAa;EAClD,IAAIC,EAAK;EACT,MAAM;EACN,MAAM;GAAE,MAAM;GAAQ;EAAK;EAC3B;CACF,CAAC,GACKC,IAAaf,EAAM,OAA8B,IAAI,GACrDgB,IAAUhB,EAAM,aAAa,MAAmC;EAEpE,AADA,EAAW,UAAUiB,GACrBC,EAAIC,IAAW,OAAOF,CAAO;CAC/B,GAAG,CAACC,GAAKC,CAAQ,CAAC,GACZC,IAAoBC,EAAqBL,GAAS,CAACG,CAAQ;CAcjE,OAbAlB,EAAM,sBAAsB;EAG1B,IAAIkB,GAAU;GACZ,IAAMG,IAAaC,EAAU,SAAS,SAAS,WAAW,IAAIT,EAAK,EAAE;GACrE,AAAIQ,MAAY,EAAW,UAAU,KAAA;GACrC,KAAK,IAAME,KAAa;IAAC;IAAY;IAAQ;IAAwB;IAAoB;IAAiB;IAAgB;GAAc,GAAG;IACzI,IAAMC,IAAWb,EAAMY,MAAc,aAAa,aAAaA;IAC/D,AAAIC,KAAY,OAAMV,EAAW,SAAS,gBAAgBS,CAAS,IAC9DT,EAAW,SAAS,aAAaS,GAAW,OAAOC,CAAQ,CAAC;GACnE;EACF;CACF,CAAC,GAEC,kBAAC,OAAD;EACE,KAAKL;EACL,UAAUD,IAAW,KAAA,IAAY;EACjC,MAAMA,IAAW,KAAA,IAAY;EAC7B,wBAAsBA,IAAW,KAAA,IAAY;EACtC;EACP,gBAAcL,EAAK;EACnB,GAAIF;EACJ,WAAWc,EACT,sCACAP,KAAY,kBACZQ,KAAc,cACdC,CACF;EAEC;CACE,CAAA;AAET;AA2BA,IAAaC,IAAoB7B,EAAM,YAGpC,EAAE,WAAQ,gBAAa,cAAW,aAAU,GAAGY,KAAS,MAAQ;CACjE,IAAM,EAAE,KAAKkB,GAAY,cAAcC,MAAWC,EAAa;EAC7D,IAAIC,EAAO;EACX,QAAQ;EACR,mBAAmBC;EACnB,MAAM;GAAE,MAAM;GAAU;EAAO;CACjC,CAAC,GACKC,IAAcnC,EAAM,aACvB,MAAgC;EAE/B,IADA8B,EAAWM,CAAI,GACX,OAAOlB,KAAQ,YAAY;GAE7B,IAAMmB,IAAmBnB,EAAIkB,CAAI;GACjC,IAAI,OAAOC,KAAY,YACrB,aAAa;IAEX,AADAP,EAAW,IAAI,GACfO,EAAQ;GACV;EACJ,OAAO,AAAInB,MAAK,EAAI,UAAUkB;CAChC,GACA,CAACN,GAAYZ,CAAG,CAClB;CACA,OACE,kBAAC,OAAD;EACE,KAAKiB;EACL,aAAU;EACV,kBAAgBF,EAAO;EACvB,aAAWF,KAAU,KAAA;EACrB,mBAAiBO,KAAe,KAAA;EAChC,GAAI1B;EACJ,WAAWc,EACT,2HACAK,KAAU,uCACVO,KAAe,oBACfV,CACF;EAEC;CACE,CAAA;AAET,CAAC;AACD,EAAkB,cAAc"}

package/dist/tools/components/ui/dnd/Draggable.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime"),t=require("@dnd-kit/react");function n({id:n,data:r,children:i}){let{ref:a,handleRef:o,isDragging:s}=(0,t.useDraggable)({id:n,data:r});return(0,e.jsx)(e.Fragment,{children:i({ref:a,handleRef:o,isDragging:s,style:{opacity:s?.5:void 0,cursor:`grab`}})})}exports.Draggable=n;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./use-accessible-drag-ref.cjs");let t=require("react/jsx-runtime"),n=require("@dnd-kit/react");function r({id:r,data:i,children:a}){let{ref:o,handleRef:s,isDragging:c}=(0,n.useDraggable)({id:r,data:i}),l=e.useAccessibleDragRef(o),u=e.useAccessibleDragRef(s);return(0,t.jsx)(t.Fragment,{children:a({ref:l,handleRef:u,isDragging:c,style:{opacity:c?.5:void 0,cursor:`grab`}})})}exports.Draggable=r;
 //# sourceMappingURL=Draggable.cjs.map

package/dist/tools/components/ui/dnd/Draggable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Draggable.cjs","names":["useDraggable","_Fragment","react_jsx_runtime","_dnd_kit_react","Draggable","children","isDragging"],"sources":["../../../../../src/tools/components/ui/dnd/Draggable.tsx"],"sourcesContent":["import type {CSSProperties, ReactNode} from 'react';\nimport {useDraggable} from '@dnd-kit/react';\n\n/** Native draggable options; render refs replace legacy attributes/listeners. */\nexport interface DraggableProps {\n  /** Unique identifier within the provider. */\n  id: string;\n  /** Native source.data payload. */\n  data?: Record<string, any>;\n  /** Attach ref to the moving element and optional handleRef to its activator. */\n  children: (props: {\n    /** Attach to the element moved by native feedback; pass null on removal. */\n    ref: (element: Element | null) => void;\n    /** Optional separate activator; otherwise the element itself activates dragging. */\n    handleRef: (element: Element | null) => void;\n    /** Whether this registration is the current dragging source. */\n    isDragging: boolean;\n    /** Cursor/opacity presentation only; native feedback owns movement transforms. */\n    style: CSSProperties;\n  }) => ReactNode;\n}\n\n/**\n * Register an element and optional separate handle with the native provider.\n * @param props - Unique string id, optional source.data payload and render callback.\n * @returns The rendered child inside a fragment; input listeners are installed natively.\n * @remarks Place under DnDProvider. Keep nested interactive controls outside the\n * handle when they must remain independently clickable. See the migration guide\n * for native event and feedback semantics.\n * @example\n * ```tsx\n * import {DnDProvider, Draggable} from '@alneas/appkit-react/tools/ui';\n * import '@alneas/appkit-react/styles';\n * export function MovableItem() {\n *   return <DnDProvider><Draggable id=\"report\" data={{name: 'Report'}}>\n *     {({ref, handleRef, style}) => <div ref={ref} style={style}>\n *       <button ref={handleRef}>Move report</button>\n *     </div>}\n *   </Draggable></DnDProvider>;\n * }\n * ```\n */\nexport function Draggable({id, data, children}: DraggableProps) {\n  const {ref, handleRef, isDragging} = useDraggable({id, data});\n  return <>{children({ref, handleRef, isDragging, style: {opacity: isDragging ? 0.5 : undefined, cursor: 'grab'}})}</>;\n}\n"],"mappings":"A,+IA0CA,SAAgBI,EAAU,CAAC,KAAI,OAAM,YAA2B,CAC9D,GAAM,CAAC,MAAK,YAAW,eAAA,EAAcJ,EAAAA,aAAAA,CAAa,CAAC,KAAI,MAAI,CAAC,EAC5D,OAAO,EAAAE,EAAA,IAAA,CAAAD,EAAAA,SAAA,CAAA,SAAGI,EAAS,CAAC,MAAK,YAAW,aAAY,MAAO,CAAC,QAASC,EAAa,GAAM,IAAA,GAAW,OAAQ,MAAM,CAAC,CAAC,CAAI,CAAA,CACrH,C"}
+{"version":3,"file":"Draggable.cjs","names":["useDraggable","useAccessibleDragRef","_Fragment","require_tools_components_ui_dnd_use_accessible_drag_ref","react_jsx_runtime","_dnd_kit_react","Draggable","accessibleRef","ref","accessibleHandleRef","handleRef","children","isDragging"],"sources":["../../../../../src/tools/components/ui/dnd/Draggable.tsx"],"sourcesContent":["import type {CSSProperties, ReactNode} from 'react';\nimport {useDraggable} from '@dnd-kit/react';\nimport {useAccessibleDragRef} from './use-accessible-drag-ref';\n\n/** Native draggable options; render refs replace legacy attributes/listeners. */\nexport interface DraggableProps {\n  /** Unique identifier within the provider. */\n  id: string;\n  /** Native source.data payload. */\n  data?: Record<string, any>;\n  /** Attach ref to the moving element and optional handleRef to its activator. */\n  children: (props: {\n    /** Attach to the element moved by native feedback; pass null on removal. */\n    ref: (element: Element | null) => void;\n    /** Optional separate activator; otherwise the element itself activates dragging. */\n    handleRef: (element: Element | null) => void;\n    /** Whether this registration is the current dragging source. */\n    isDragging: boolean;\n    /** Cursor/opacity presentation only; native feedback owns movement transforms. */\n    style: CSSProperties;\n  }) => ReactNode;\n}\n\n/**\n * Register an element and optional separate handle with the native provider.\n * @param props - Unique string id, optional source.data payload and render callback.\n * @returns The rendered child inside a fragment; input listeners are installed natively.\n * @remarks Place under DnDProvider. Keep nested interactive controls outside the\n * handle when they must remain independently clickable. See the migration guide\n * for native event and feedback semantics.\n * @example\n * ```tsx\n * import {DnDProvider, Draggable} from '@alneas/appkit-react/tools/ui';\n * import '@alneas/appkit-react/styles';\n * export function MovableItem() {\n *   return <DnDProvider><Draggable id=\"report\" data={{name: 'Report'}}>\n *     {({ref, handleRef, style}) => <div ref={ref} style={style}>\n *       <button ref={handleRef}>Move report</button>\n *     </div>}\n *   </Draggable></DnDProvider>;\n * }\n * ```\n */\nexport function Draggable({id, data, children}: DraggableProps) {\n  const {ref, handleRef, isDragging} = useDraggable({id, data});\n  const accessibleRef = useAccessibleDragRef(ref);\n  const accessibleHandleRef = useAccessibleDragRef(handleRef);\n  return <>{children({ref: accessibleRef, handleRef: accessibleHandleRef, isDragging, style: {opacity: isDragging ? 0.5 : undefined, cursor: 'grab'}})}</>;\n}\n"],"mappings":"A,gMA2CA,SAAgBM,EAAU,CAAC,KAAI,OAAM,YAA2B,CAC9D,GAAM,CAAC,MAAK,YAAW,eAAA,EAAcN,EAAAA,aAAAA,CAAa,CAAC,KAAI,MAAI,CAAC,EACtDO,EAAgBN,EAAAA,qBAAqBO,CAAG,EACxCC,EAAsBR,EAAAA,qBAAqBS,CAAS,EAC1D,OAAO,EAAAN,EAAA,IAAA,CAAAF,EAAAA,SAAA,CAAA,SAAGS,EAAS,CAAC,IAAKJ,EAAe,UAAWE,EAAqB,aAAY,MAAO,CAAC,QAASG,EAAa,GAAM,IAAA,GAAW,OAAQ,MAAM,CAAC,CAAC,CAAI,CAAA,CACzJ,C"}

package/dist/tools/components/ui/dnd/Draggable.js

@@ -1,23 +1,24 @@
 "use client";
-import { Fragment as e, jsx as t } from "react/jsx-runtime";
-import { useDraggable as n } from "@dnd-kit/react";
+import { useAccessibleDragRef as e } from "./use-accessible-drag-ref.js";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+import { useDraggable as r } from "@dnd-kit/react";
 //#region src/tools/components/ui/dnd/Draggable.tsx
-function r({ id: r, data: i, children: a }) {
-	let { ref: o, handleRef: s, isDragging: c } = n({
-		id: r,
-		data: i
-	});
-	return /* @__PURE__ */ t(e, { children: a({
-		ref: o,
-		handleRef: s,
-		isDragging: c,
+function i({ id: i, data: a, children: o }) {
+	let { ref: s, handleRef: c, isDragging: l } = r({
+		id: i,
+		data: a
+	}), u = e(s), d = e(c);
+	return /* @__PURE__ */ n(t, { children: o({
+		ref: u,
+		handleRef: d,
+		isDragging: l,
 		style: {
-			opacity: c ? .5 : void 0,
+			opacity: l ? .5 : void 0,
 			cursor: "grab"
 		}
 	}) });
 }
 //#endregion
-export { r as Draggable };
+export { i as Draggable };
 
 //# sourceMappingURL=Draggable.js.map

package/dist/tools/components/ui/dnd/Draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Draggable.js","names":["_Fragment","Draggable","useDraggable","Fragment","children","isDragging"],"sources":["../../../../../src/tools/components/ui/dnd/Draggable.tsx"],"sourcesContent":["import type {CSSProperties, ReactNode} from 'react';\nimport {useDraggable} from '@dnd-kit/react';\n\n/** Native draggable options; render refs replace legacy attributes/listeners. */\nexport interface DraggableProps {\n  /** Unique identifier within the provider. */\n  id: string;\n  /** Native source.data payload. */\n  data?: Record<string, any>;\n  /** Attach ref to the moving element and optional handleRef to its activator. */\n  children: (props: {\n    /** Attach to the element moved by native feedback; pass null on removal. */\n    ref: (element: Element | null) => void;\n    /** Optional separate activator; otherwise the element itself activates dragging. */\n    handleRef: (element: Element | null) => void;\n    /** Whether this registration is the current dragging source. */\n    isDragging: boolean;\n    /** Cursor/opacity presentation only; native feedback owns movement transforms. */\n    style: CSSProperties;\n  }) => ReactNode;\n}\n\n/**\n * Register an element and optional separate handle with the native provider.\n * @param props - Unique string id, optional source.data payload and render callback.\n * @returns The rendered child inside a fragment; input listeners are installed natively.\n * @remarks Place under DnDProvider. Keep nested interactive controls outside the\n * handle when they must remain independently clickable. See the migration guide\n * for native event and feedback semantics.\n * @example\n * ```tsx\n * import {DnDProvider, Draggable} from '@alneas/appkit-react/tools/ui';\n * import '@alneas/appkit-react/styles';\n * export function MovableItem() {\n *   return <DnDProvider><Draggable id=\"report\" data={{name: 'Report'}}>\n *     {({ref, handleRef, style}) => <div ref={ref} style={style}>\n *       <button ref={handleRef}>Move report</button>\n *     </div>}\n *   </Draggable></DnDProvider>;\n * }\n * ```\n */\nexport function Draggable({id, data, children}: DraggableProps) {\n  const {ref, handleRef, isDragging} = useDraggable({id, data});\n  return <>{children({ref, handleRef, isDragging, style: {opacity: isDragging ? 0.5 : undefined, cursor: 'grab'}})}</>;\n}\n"],"mappings":";;;;AA0CA,SAAgBC,EAAU,EAAC,OAAI,SAAM,eAA2B;CAC9D,IAAM,EAAC,QAAK,cAAW,kBAAcC,EAAa;EAAC;EAAI;CAAI,CAAC;CAC5D,OAAO,kBAAAF,GAAA,EAAA,UAAGI,EAAS;EAAC;EAAK;EAAW;EAAY,OAAO;GAAC,SAASC,IAAa,KAAM,KAAA;GAAW,QAAQ;EAAM;CAAC,CAAC,EAAI,CAAA;AACrH"}
+{"version":3,"file":"Draggable.js","names":["_Fragment","Draggable","useDraggable","accessibleRef","useAccessibleDragRef","ref","accessibleHandleRef","handleRef","Fragment","children","isDragging"],"sources":["../../../../../src/tools/components/ui/dnd/Draggable.tsx"],"sourcesContent":["import type {CSSProperties, ReactNode} from 'react';\nimport {useDraggable} from '@dnd-kit/react';\nimport {useAccessibleDragRef} from './use-accessible-drag-ref';\n\n/** Native draggable options; render refs replace legacy attributes/listeners. */\nexport interface DraggableProps {\n  /** Unique identifier within the provider. */\n  id: string;\n  /** Native source.data payload. */\n  data?: Record<string, any>;\n  /** Attach ref to the moving element and optional handleRef to its activator. */\n  children: (props: {\n    /** Attach to the element moved by native feedback; pass null on removal. */\n    ref: (element: Element | null) => void;\n    /** Optional separate activator; otherwise the element itself activates dragging. */\n    handleRef: (element: Element | null) => void;\n    /** Whether this registration is the current dragging source. */\n    isDragging: boolean;\n    /** Cursor/opacity presentation only; native feedback owns movement transforms. */\n    style: CSSProperties;\n  }) => ReactNode;\n}\n\n/**\n * Register an element and optional separate handle with the native provider.\n * @param props - Unique string id, optional source.data payload and render callback.\n * @returns The rendered child inside a fragment; input listeners are installed natively.\n * @remarks Place under DnDProvider. Keep nested interactive controls outside the\n * handle when they must remain independently clickable. See the migration guide\n * for native event and feedback semantics.\n * @example\n * ```tsx\n * import {DnDProvider, Draggable} from '@alneas/appkit-react/tools/ui';\n * import '@alneas/appkit-react/styles';\n * export function MovableItem() {\n *   return <DnDProvider><Draggable id=\"report\" data={{name: 'Report'}}>\n *     {({ref, handleRef, style}) => <div ref={ref} style={style}>\n *       <button ref={handleRef}>Move report</button>\n *     </div>}\n *   </Draggable></DnDProvider>;\n * }\n * ```\n */\nexport function Draggable({id, data, children}: DraggableProps) {\n  const {ref, handleRef, isDragging} = useDraggable({id, data});\n  const accessibleRef = useAccessibleDragRef(ref);\n  const accessibleHandleRef = useAccessibleDragRef(handleRef);\n  return <>{children({ref: accessibleRef, handleRef: accessibleHandleRef, isDragging, style: {opacity: isDragging ? 0.5 : undefined, cursor: 'grab'}})}</>;\n}\n"],"mappings":";;;;;AA2CA,SAAgBC,EAAU,EAAC,OAAI,SAAM,eAA2B;CAC9D,IAAM,EAAC,QAAK,cAAW,kBAAcC,EAAa;EAAC;EAAI;CAAI,CAAC,GACtDC,IAAgBC,EAAqBC,CAAG,GACxCC,IAAsBF,EAAqBG,CAAS;CAC1D,OAAO,kBAAAP,GAAA,EAAA,UAAGS,EAAS;EAAC,KAAKN;EAAe,WAAWG;EAAqB;EAAY,OAAO;GAAC,SAASI,IAAa,KAAM,KAAA;GAAW,QAAQ;EAAM;CAAC,CAAC,EAAI,CAAA;AACzJ"}

package/dist/tools/components/ui/dnd/use-accessible-drag-ref.cjs

@@ -0,0 +1,2 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react");function t(t,n=!0){return(0,e.useCallback)(e=>{if(!n)return t(e);if(!e){t(null);return}let r=()=>{e.hasAttribute(`aria-grabbed`)&&e.removeAttribute(`aria-grabbed`)},i=e.ownerDocument.defaultView.MutationObserver,a=new i(r);a.observe(e,{attributes:!0,attributeFilter:[`aria-grabbed`]});let o=t(e);return r(),()=>{a.disconnect(),typeof o==`function`?o():t(null)}},[t,n])}exports.useAccessibleDragRef=t;
+//# sourceMappingURL=use-accessible-drag-ref.cjs.map

package/dist/tools/components/ui/dnd/use-accessible-drag-ref.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-accessible-drag-ref.cjs","names":["useCallback","react","useAccessibleDragRef","enabled","handleRef","element","removeDeprecatedState","Observer","observer","cleanup"],"sources":["../../../../../src/tools/components/ui/dnd/use-accessible-drag-ref.ts"],"sourcesContent":["import {useCallback, type RefCallback} from 'react';\n\n/**\n * Keep native drag refs and modern button state while dnd-kit 0.5.1 also writes\n * the deprecated aria-grabbed attribute. Its Accessibility options cannot select\n * attributes; observing only this attribute preserves its instructions, live\n * announcements, aria-pressed state, keyboard sensor and pointer sensor.\n */\nexport function useAccessibleDragRef<T extends Element>(handleRef: RefCallback<T>, enabled = true): RefCallback<T> {\n  return useCallback((element: T | null) => {\n    if (!enabled) return handleRef(element);\n    if (!element) {\n      handleRef(null);\n      return;\n    }\n    const removeDeprecatedState = () => {\n      if (element.hasAttribute('aria-grabbed')) element.removeAttribute('aria-grabbed');\n    };\n    const Observer = element.ownerDocument.defaultView!.MutationObserver;\n    const observer = new Observer(removeDeprecatedState);\n    observer.observe(element, {attributes: true, attributeFilter: ['aria-grabbed']});\n    const cleanup = handleRef(element);\n    removeDeprecatedState();\n    return () => {\n      observer.disconnect();\n      if (typeof cleanup === 'function') cleanup();\n      else handleRef(null);\n    };\n  }, [handleRef, enabled]);\n}\n"],"mappings":"A,uGAQA,SAAgBE,EAAwC,EAA2B,EAAU,GAAsB,CACjH,OAAA,EAAOF,EAAAA,YAAAA,CAAa,GAAsB,CACxC,GAAI,CAACG,EAAS,OAAOC,EAAUC,CAAO,EACtC,GAAI,CAACA,EAAS,CACZD,EAAU,IAAI,EACd,MACF,CACA,IAAME,MAA8B,CAC9BD,EAAQ,aAAa,cAAc,GAAGA,EAAQ,gBAAgB,cAAc,CAClF,EACME,EAAWF,EAAQ,cAAc,YAAa,iBAC9CG,EAAW,IAAID,EAASD,CAAqB,EACnDE,EAAS,QAAQH,EAAS,CAAC,WAAY,GAAM,gBAAiB,CAAC,cAAc,CAAC,CAAC,EAC/E,IAAMI,EAAUL,EAAUC,CAAO,EAEjC,OADAC,EAAsB,MACT,CACXE,EAAS,WAAW,EAChB,OAAOC,GAAY,WAAYA,EAAQ,EACtCL,EAAU,IAAI,CACrB,CACF,EAAG,CAACA,EAAWD,CAAO,CAAC,CACzB,C"}

package/dist/tools/components/ui/dnd/use-accessible-drag-ref.d.cts

@@ -0,0 +1,8 @@
+import { RefCallback } from 'react';
+/**
+ * Keep native drag refs and modern button state while dnd-kit 0.5.1 also writes
+ * the deprecated aria-grabbed attribute. Its Accessibility options cannot select
+ * attributes; observing only this attribute preserves its instructions, live
+ * announcements, aria-pressed state, keyboard sensor and pointer sensor.
+ */
+export declare function useAccessibleDragRef<T extends Element>(handleRef: RefCallback<T>, enabled?: boolean): RefCallback<T>;

package/dist/tools/components/ui/dnd/use-accessible-drag-ref.d.ts

@@ -0,0 +1,8 @@
+import { RefCallback } from 'react';
+/**
+ * Keep native drag refs and modern button state while dnd-kit 0.5.1 also writes
+ * the deprecated aria-grabbed attribute. Its Accessibility options cannot select
+ * attributes; observing only this attribute preserves its instructions, live
+ * announcements, aria-pressed state, keyboard sensor and pointer sensor.
+ */
+export declare function useAccessibleDragRef<T extends Element>(handleRef: RefCallback<T>, enabled?: boolean): RefCallback<T>;

package/dist/tools/components/ui/dnd/use-accessible-drag-ref.js

@@ -0,0 +1,27 @@
+"use client";
+import { useCallback as e } from "react";
+//#region src/tools/components/ui/dnd/use-accessible-drag-ref.ts
+function t(t, n = !0) {
+	return e((e) => {
+		if (!n) return t(e);
+		if (!e) {
+			t(null);
+			return;
+		}
+		let r = () => {
+			e.hasAttribute("aria-grabbed") && e.removeAttribute("aria-grabbed");
+		}, i = e.ownerDocument.defaultView.MutationObserver, a = new i(r);
+		a.observe(e, {
+			attributes: !0,
+			attributeFilter: ["aria-grabbed"]
+		});
+		let o = t(e);
+		return r(), () => {
+			a.disconnect(), typeof o == "function" ? o() : t(null);
+		};
+	}, [t, n]);
+}
+//#endregion
+export { t as useAccessibleDragRef };
+
+//# sourceMappingURL=use-accessible-drag-ref.js.map

package/dist/tools/components/ui/dnd/use-accessible-drag-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-accessible-drag-ref.js","names":["useAccessibleDragRef","useCallback","enabled","handleRef","element","removeDeprecatedState","Observer","observer","cleanup"],"sources":["../../../../../src/tools/components/ui/dnd/use-accessible-drag-ref.ts"],"sourcesContent":["import {useCallback, type RefCallback} from 'react';\n\n/**\n * Keep native drag refs and modern button state while dnd-kit 0.5.1 also writes\n * the deprecated aria-grabbed attribute. Its Accessibility options cannot select\n * attributes; observing only this attribute preserves its instructions, live\n * announcements, aria-pressed state, keyboard sensor and pointer sensor.\n */\nexport function useAccessibleDragRef<T extends Element>(handleRef: RefCallback<T>, enabled = true): RefCallback<T> {\n  return useCallback((element: T | null) => {\n    if (!enabled) return handleRef(element);\n    if (!element) {\n      handleRef(null);\n      return;\n    }\n    const removeDeprecatedState = () => {\n      if (element.hasAttribute('aria-grabbed')) element.removeAttribute('aria-grabbed');\n    };\n    const Observer = element.ownerDocument.defaultView!.MutationObserver;\n    const observer = new Observer(removeDeprecatedState);\n    observer.observe(element, {attributes: true, attributeFilter: ['aria-grabbed']});\n    const cleanup = handleRef(element);\n    removeDeprecatedState();\n    return () => {\n      observer.disconnect();\n      if (typeof cleanup === 'function') cleanup();\n      else handleRef(null);\n    };\n  }, [handleRef, enabled]);\n}\n"],"mappings":";;;AAQA,SAAgBA,EAAwC,GAA2B,IAAU,IAAsB;CACjH,OAAOC,GAAa,MAAsB;EACxC,IAAI,CAACC,GAAS,OAAOC,EAAUC,CAAO;EACtC,IAAI,CAACA,GAAS;GACZ,EAAU,IAAI;GACd;EACF;EACA,IAAMC,UAA8B;GAClC,AAAID,EAAQ,aAAa,cAAc,KAAGA,EAAQ,gBAAgB,cAAc;EAClF,GACME,IAAWF,EAAQ,cAAc,YAAa,kBAC9CG,IAAW,IAAID,EAASD,CAAqB;EACnD,EAAS,QAAQD,GAAS;GAAC,YAAY;GAAM,iBAAiB,CAAC,cAAc;EAAC,CAAC;EAC/E,IAAMI,IAAUL,EAAUC,CAAO;EAEjC,OADAC,EAAsB,SACT;GAEX,AADAE,EAAS,WAAW,GAChB,OAAOC,KAAY,aAAYA,EAAQ,IACtCL,EAAU,IAAI;EACrB;CACF,GAAG,CAACA,GAAWD,CAAO,CAAC;AACzB"}

package/docs/migration.md

@@ -16,6 +16,26 @@ installing; source versions and a merged PR do not prove delivery. The default
 portal must retain the last delivered revision until publication is confirmed;
 then ingest the reviewed 0.3.0 source and API catalog together.
 
+## React 0.3.1 dependency alignment (release preparation)
+
+React 0.3.1 requires Core `^0.2.2`, starting at the confirmed published
+0.2.2 release. Applications keep an exact selected version in their lockfile. It adds no API migration beyond 0.3.0. Published React 0.3.0 retains its
+exact Core 0.2.0 dependency; the 0.3.0 commands below remain its historical route.
+
+After confirming React 0.3.1 is available, hosts with a direct Core dependency
+should install matching exact versions and refresh their lockfile:
+
+```bash
+npm view @alneas/appkit-react@0.3.1 version
+npm install --save-exact @alneas/appkit-react@0.3.1 @alneas/appkit-core@0.2.2 @tanstack/react-query@5.104.5 @tanstack/query-core@5.104.5
+npm ls @alneas/appkit-core
+```
+
+Confirm React and the host resolve the same Core 0.2.2 installation. Before npm
+publication, use verified candidate archives only for isolated checks; keep the
+portal and production consumers on their confirmed delivered versions. The
+remaining API migration sections apply to the 0.3 series.
+
 ## Prerequisites
 
 Use Node.js 24 or newer and React/React DOM matching `^19.2.3`. Confirm that
@@ -47,10 +67,10 @@ npm view @alneas/appkit-react@0.3.0 version
 npm install --save-exact @alneas/appkit-react@0.3.0 @alneas/appkit-core@0.2.0 @tanstack/react-query@5.104.5 @tanstack/query-core@5.104.5
 ```
 
-Core 0.2.1 is prepared separately for documentation improvements; it has no
-runtime/API migration and is not required by React 0.3.0. React's production Core
-pin remains exactly 0.2.0. A candidate Core archive is used only in the isolated
-compatibility lane; confirm each version's npm delivery independently.
+For the original React 0.3.0 release, Core remains exactly 0.2.0. Core 0.2.1 and 0.2.2
+contain documentation improvements with no runtime/API migration. React 0.3.1
+adopts the published Core `^0.2.2` patch as described above; confirm each version's npm
+delivery independently.
 Core does not advance to 0.3.0 in this release. Align both direct Query packages
 at **5.104.5**. Mixed 5.104.4 / 5.104.5 installations can make QueryClient and Query
 nominal types incompatible. Refresh the host lockfile and inspect `npm ls

package/docs/tools.md

@@ -32,6 +32,14 @@ import '@alneas/appkit-react/styles';
 export const components = {FormView, DataTable};
 ```
 
+DataTable is also available from `@alneas/appkit-react/tools/data-table`. Its
+column reorder button supports Space to pick up/drop, arrow keys to move, and
+Escape to cancel. It exposes `aria-pressed` for drag state and retains the native
+screen-reader instructions and live announcements. The deprecated `aria-grabbed`
+attribute is removed from column reorder buttons, shared Draggable activators
+(including FileBrowser grid/list handles), and enabled Kanban cards. Read-only
+Kanban cards retain explicitly supplied caller accessibility attributes.
+
 ## Verification
 
 Type-check this example in your application. See [the export reference](exports.md) for narrower entry points and exact optional peers. Package import/type checks do not certify hosted providers.

package/llms-full.txt

@@ -265,6 +265,26 @@ installing; source versions and a merged PR do not prove delivery. The default
 portal must retain the last delivered revision until publication is confirmed;
 then ingest the reviewed 0.3.0 source and API catalog together.
 
+## React 0.3.1 dependency alignment (release preparation)
+
+React 0.3.1 requires Core `^0.2.2`, starting at the confirmed published
+0.2.2 release. Applications keep an exact selected version in their lockfile. It adds no API migration beyond 0.3.0. Published React 0.3.0 retains its
+exact Core 0.2.0 dependency; the 0.3.0 commands below remain its historical route.
+
+After confirming React 0.3.1 is available, hosts with a direct Core dependency
+should install matching exact versions and refresh their lockfile:
+
+```bash
+npm view @alneas/appkit-react@0.3.1 version
+npm install --save-exact @alneas/appkit-react@0.3.1 @alneas/appkit-core@0.2.2 @tanstack/react-query@5.104.5 @tanstack/query-core@5.104.5
+npm ls @alneas/appkit-core
+```
+
+Confirm React and the host resolve the same Core 0.2.2 installation. Before npm
+publication, use verified candidate archives only for isolated checks; keep the
+portal and production consumers on their confirmed delivered versions. The
+remaining API migration sections apply to the 0.3 series.
+
 ## Prerequisites
 
 Use Node.js 24 or newer and React/React DOM matching `^19.2.3`. Confirm that
@@ -296,10 +316,10 @@ npm view @alneas/appkit-react@0.3.0 version
 npm install --save-exact @alneas/appkit-react@0.3.0 @alneas/appkit-core@0.2.0 @tanstack/react-query@5.104.5 @tanstack/query-core@5.104.5
 ```
 
-Core 0.2.1 is prepared separately for documentation improvements; it has no
-runtime/API migration and is not required by React 0.3.0. React's production Core
-pin remains exactly 0.2.0. A candidate Core archive is used only in the isolated
-compatibility lane; confirm each version's npm delivery independently.
+For the original React 0.3.0 release, Core remains exactly 0.2.0. Core 0.2.1 and 0.2.2
+contain documentation improvements with no runtime/API migration. React 0.3.1
+adopts the published Core `^0.2.2` patch as described above; confirm each version's npm
+delivery independently.
 Core does not advance to 0.3.0 in this release. Align both direct Query packages
 at **5.104.5**. Mixed 5.104.4 / 5.104.5 installations can make QueryClient and Query
 nominal types incompatible. Refresh the host lockfile and inspect `npm ls
@@ -918,6 +938,14 @@ import '@alneas/appkit-react/styles';
 export const components = {FormView, DataTable};
 ```
 
+DataTable is also available from `@alneas/appkit-react/tools/data-table`. Its
+column reorder button supports Space to pick up/drop, arrow keys to move, and
+Escape to cancel. It exposes `aria-pressed` for drag state and retains the native
+screen-reader instructions and live announcements. The deprecated `aria-grabbed`
+attribute is removed from column reorder buttons, shared Draggable activators
+(including FileBrowser grid/list handles), and enabled Kanban cards. Read-only
+Kanban cards retain explicitly supplied caller accessibility attributes.
+
 ## Verification
 
 Type-check this example in your application. See [the export reference](exports.md) for narrower entry points and exact optional peers. Package import/type checks do not certify hosted providers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alneas/appkit-react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Unified React 19 business UI toolkit: accessible primitives, schema-driven forms, data tables, and AI chat interfaces",
   "keywords": [
     "react",
@@ -411,7 +411,7 @@
     "typecheck:storybook:7": "tsc --project tsconfig.storybook.json"
   },
   "dependencies": {
-    "@alneas/appkit-core": "0.2.0",
+    "@alneas/appkit-core": "^0.2.2",
     "@base-ui/react": "^1.9.0",
     "@dnd-kit/collision": "0.5.1",
     "@dnd-kit/dom": "0.5.1",