[ { "path": ".browserslistrc", "content": "defaults\nlast 2 version\nnot IE 11\nnot dead\n" }, { "path": ".changeset/README.md", "content": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works\nwith multi-package repos, or single-package repos to help you version and publish your code. You can\nfind the full documentation for it [in our repository](https://github.com/changesets/changesets)\n\nWe have a quick list of common questions to get you started engaging with this project in\n[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)\n" }, { "path": ".changeset/animation-last-wins.md", "content": "---\n'@dnd-kit/dom': patch\n---\n\nAnimation resolution now uses last-wins semantics matching CSS composite order. `getFinalKeyframe` returns the last matching keyframe across all running animations instead of short-circuiting on the first match. `getProjectedTransform` collects the latest value per CSS property (`transform`, `translate`, `scale`) rather than accumulating transforms additively.\n" }, { "path": ".changeset/autoscroller-options.md", "content": "---\n'@dnd-kit/dom': minor\n---\n\nAdd `acceleration` and `threshold` options to the `AutoScroller` plugin.\n\n- `acceleration` controls the base scroll speed multiplier (default: `25`).\n- `threshold` controls the percentage of container dimensions that defines the scroll activation zone (default: `0.2`). Accepts a single number for both axes or `{ x, y }` for per-axis control. Setting an axis to `0` disables auto-scrolling on that axis.\n\n```ts\nAutoScroller.configure({\n acceleration: 15,\n threshold: { x: 0, y: 0.3 },\n})\n```\n" }, { "path": ".changeset/config.json", "content": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@1.5.0/schema.json\",\n \"changelog\": [\"@changesets/changelog-github\", {\"repo\": \"clauderic/dnd-kit\"}],\n \"commit\": false,\n \"fixed\": [\n [\n \"@dnd-kit/abstract\",\n \"@dnd-kit/collision\",\n \"@dnd-kit/dom\",\n \"@dnd-kit/geometry\",\n \"@dnd-kit/helpers\",\n \"@dnd-kit/react\",\n \"@dnd-kit/state\",\n \"@dnd-kit/vue\",\n \"@dnd-kit/solid\",\n \"@dnd-kit/svelte\"\n ]\n ],\n \"access\": \"public\",\n \"baseBranch\": \"experimental\",\n \"updateInternalDependencies\": \"patch\",\n \"ignore\": [],\n \"snapshot\": {\n \"useCalculatedVersion\": true\n }\n}\n" }, { "path": ".changeset/drop-animation-source-context.md", "content": "---\n'@dnd-kit/dom': minor\n---\n\nThe `DropAnimationFunction` context now includes `source`, providing access to the draggable entity for conditional animation logic.\n\n```tsx\nFeedback.configure({\n dropAnimation: async (context) => {\n if (context.source.type === 'service-draggable') return;\n // custom animation...\n },\n});\n```\n" }, { "path": ".changeset/entity-batched-id-changes.md", "content": "---\n'@dnd-kit/abstract': minor\n'@dnd-kit/dom': minor\n---\n\nBatch entity identity changes to prevent collision oscillation during virtualized sorting.\n\nWhen entities swap ids (e.g. as `react-window` recycles DOM nodes during a drag), multiple registry updates could fire in an interleaved order, causing the collision detector to momentarily see stale or duplicate entries and oscillate between targets.\n\nEntity `id` changes are now deferred to a microtask and flushed atomically in a single `batch()`, ensuring:\n- The collision notifier skips detection while id changes are pending\n- The registry cleans up ghost registrations (stale keys left behind after an id swap)\n" }, { "path": ".changeset/feedback-keyboard-transition.md", "content": "---\n'@dnd-kit/dom': minor\n---\n\nAdd `keyboardTransition` option to the `Feedback` plugin for customizing or disabling the CSS transition applied when moving elements via keyboard.\n\nBy default, keyboard-driven moves animate with `250ms cubic-bezier(0.25, 1, 0.5, 1)`. You can now customize the `duration` and `easing`, or set the option to `null` to disable the transition entirely.\n\n```ts\nFeedback.configure({\n keyboardTransition: { duration: 150, easing: 'ease-out' },\n})\n```\n" }, { "path": ".changeset/feedback-placeholder-sibling-reorder.md", "content": "---\n'@dnd-kit/dom': patch\n---\n\nFix Feedback plugin placeholder not repositioning when siblings are moved around a stationary source element.\n\nWhen a VDOM framework (e.g., Preact, Vue) reorders sibling elements during a drag operation, the source element and placeholder may remain in the DOM but no longer be adjacent. The existing `documentMutationObserver` only handled cases where the source or placeholder itself was re-added to the DOM. This adds a fallback adjacency check after processing all mutation entries, ensuring the placeholder stays next to the source element regardless of how siblings are rearranged.\n" }, { "path": ".changeset/feedback-transform-support.md", "content": "---\n'@dnd-kit/dom': minor\n---\n\nThe Feedback plugin now supports full CSS `transform` property for compatibility with libraries like react-window v2 that position elements via transforms. Transform-related CSS transitions are filtered out to prevent conflicts with Feedback-managed properties. The ResizeObserver computes shapes from CSS values rather than re-measuring the element, avoiding mid-transition measurement errors. Sortable's `animate()` cancels CSS transitions on transform-related properties before measuring to ensure correct FLIP deltas.\n" }, { "path": ".changeset/fix-event-type-aliases.md", "content": "---\n'@dnd-kit/abstract': minor\n'@dnd-kit/dom': minor\n'@dnd-kit/helpers': minor\n'@dnd-kit/react': minor\n'@dnd-kit/solid': minor\n'@dnd-kit/vue': minor\n'@dnd-kit/svelte': minor\n---\n\nRedesign event type system to follow the DOM EventMap pattern. Introduces `DragDropEventMap` for event object types and `DragDropEventHandlers` for event handler signatures, replacing the ambiguously named `DragDropEvents`. Event type aliases (`CollisionEvent`, `DragStartEvent`, etc.) now derive directly from `DragDropEventMap` rather than using `Parameters<>` extraction.\n\n### Migration guide\n\n- **`DragDropEvents`** has been split into two types:\n - `DragDropEventMap` — maps event names to event object types (like `WindowEventMap`)\n - `DragDropEventHandlers` — maps event names to `(event, manager) => void` handler signatures\n- If you were importing `DragDropEvents` to type **event objects**, use `DragDropEventMap` instead:\n ```ts\n // Before\n type MyEvent = Parameters['dragend']>[0];\n // After\n type MyEvent = DragDropEventMap['dragend'];\n ```\n- If you were importing `DragDropEvents` to type **event handlers**, use `DragDropEventHandlers` instead:\n ```ts\n // Before\n const handler: DragDropEvents['dragend'] = (event, manager) => {};\n // After\n const handler: DragDropEventHandlers['dragend'] = (event, manager) => {};\n ```\n- The `DragDropEvents` re-export from `@dnd-kit/react` and `@dnd-kit/solid` has been removed. Import `DragDropEventMap` or `DragDropEventHandlers` from `@dnd-kit/abstract` directly if needed.\n- Convenience aliases (`CollisionEvent`, `DragStartEvent`, `DragEndEvent`, etc.) are unchanged and continue to work as before.\n" }, { "path": ".changeset/fix-plugin-registry-dedup-ordering.md", "content": "---\n'@dnd-kit/abstract': patch\n---\n\nFixed plugin registration order when deduplicating configured plugins.\n\nWhen a plugin was provided via `Plugin.configure()` alongside an internally-registered instance of the same plugin, the dedup logic would reorder it to the end of the registration list. This broke plugins like `Feedback` that resolve `StyleInjector` from the registry during construction, since `StyleInjector` would not yet be registered.\n\nThis also prevented users from configuring `StyleInjector` with a CSP `nonce` without breaking drag feedback:\n\n```ts\nplugins: (defaults) => [...defaults, StyleInjector.configure({ nonce: 'abc123' })]\n```\n" }, { "path": ".changeset/fix-pointer-sensor-stale-activation.md", "content": "---\n'@dnd-kit/dom': patch\n---\n\nFixed `setPointerCapture` error on touch devices caused by stale pointer activation.\n\nWhen a touch was released during the activation delay and followed by a quick re-touch, the pending delay timer from the first touch could fire with a stale `pointerId`, causing `setPointerCapture` to throw. The `PointerSensor` now properly aborts the activation controller during cleanup to cancel pending delay timers, and defensively handles `setPointerCapture` failures.\n" }, { "path": ".changeset/per-entity-plugin-config.md", "content": "---\n'@dnd-kit/abstract': minor\n'@dnd-kit/dom': minor\n'@dnd-kit/react': minor\n'@dnd-kit/solid': minor\n'@dnd-kit/vue': minor\n'@dnd-kit/svelte': minor\n---\n\nAdded per-entity plugin configuration and moved `feedback` from the Draggable entity to the Feedback plugin.\n\nDraggable entities now accept a `plugins` property for per-entity plugin configuration, using the existing `Plugin.configure()` pattern. Plugins can read per-entity options via `source.pluginConfig(PluginClass)`.\n\nThe `feedback` property (`'default' | 'move' | 'clone' | 'none'`) has been moved from the Draggable entity to `FeedbackOptions`. Drop animation can also now be configured per-draggable.\n\nPlugins listed in an entity's `plugins` array are auto-registered on the manager if not already present. The Sortable class now uses this generic mechanism instead of its own custom registration logic.\n\n### Migration guide\n\nThe `feedback` property has been moved from the draggable/sortable hook input to per-entity Feedback plugin configuration.\n\n**Before:**\n\n```tsx\nimport { FeedbackType } from '@dnd-kit/dom';\n\nuseDraggable({ id: 'item', feedback: 'clone' });\nuseSortable({ id: 'item', index: 0, feedback: 'clone' });\n```\n\n**After:**\n\n```tsx\nimport { Feedback } from '@dnd-kit/dom';\n\nuseDraggable({\n id: 'item',\n plugins: [Feedback.configure({ feedback: 'clone' })],\n});\nuseSortable({\n id: 'item',\n index: 0,\n plugins: [Feedback.configure({ feedback: 'clone' })],\n});\n```\n\nDrop animation can now be configured per-draggable:\n\n```tsx\nuseDraggable({\n id: 'item',\n plugins: [Feedback.configure({ feedback: 'clone', dropAnimation: null })],\n});\n```\n" }, { "path": ".changeset/refactor-style-injector.md", "content": "---\n'@dnd-kit/dom': minor\n---\n\nRenamed `StyleSheetManager` to `StyleInjector` and centralized CSP `nonce` configuration.\n\nThe `StyleInjector` plugin now accepts a `nonce` option that is applied to all injected `\n" }, { "path": "apps/stories/.storybook/manager.ts", "content": "import {addons} from 'storybook/manager-api';\nimport type {API_PreparedIndexEntry} from 'storybook/internal/types';\n\nimport {theme} from './theme';\n\naddons.setConfig({\n theme,\n showPanel: false,\n});\n\naddons.setConfig({\n sidebar: {\n filters: {\n patterns: (\n item: API_PreparedIndexEntry\n ): boolean => {\n return !(item.tags ?? []).includes('hidden');\n },\n },\n },\n});\n" }, { "path": "apps/stories/.storybook/preview-head.html", "content": "\n" }, { "path": "apps/stories/.storybook/preview.tsx", "content": "import React from 'react';\nimport {Unstyled} from '@storybook/addon-docs/blocks';\n\nimport '@dnd-kit/stories-shared/register';\nimport {Code} from '../stories/components';\nimport {\n draggableStyles,\n droppableStyles,\n sortableStyles,\n multipleListsStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\nimport {withCodeSandbox} from '@dnd-kit/storybook-addon-codesandbox/decorator';\n\n// Inject sandbox-compatible CSS classes into Storybook so the Example\n// stories render identically to their CodeSandbox counterparts.\nif (typeof document !== 'undefined') {\n const style = document.createElement('style');\n style.setAttribute('data-sandbox-styles', '');\n style.textContent = [draggableStyles, droppableStyles, sortableStyles, multipleListsStyles].join('\\n\\n');\n document.head.appendChild(style);\n}\n\nconst preview = {\n decorators: [withCodeSandbox],\n parameters: {\n docs: {\n components: {\n pre: (props) => (\n \n 
\n          \n        ),\n        code: Code,\n      },\n    },\n    codesandbox: {\n      dependencies: {\n        '@dnd-kit/abstract': 'beta',\n        '@dnd-kit/dom': 'beta',\n        '@dnd-kit/react': 'beta',\n        '@dnd-kit/helpers': 'beta',\n        '@dnd-kit/collision': 'beta',\n        'react': '^19.0.0',\n        'react-dom': '^19.0.0',\n      },\n      entry: [\n        \"import './styles.css';\",\n        \"import React from 'react';\",\n        \"import {createRoot} from 'react-dom/client';\",\n        \"import App from './App';\",\n        \"\",\n        \"createRoot(document.getElementById('root')).render();\",\n      ].join('\\n'),\n      mainFile: 'src/App.tsx',\n    },\n    darkMode: {\n      stylePreview: true,\n    },\n    options: {\n      storySort: {\n        order: [\n          'Docs',\n          'React',\n          [\n            'Draggable',\n            'Droppable',\n            'Sortable',\n            [\n              'Vertical list',\n              'Horizontal list',\n              'Grid',\n              'Multiple lists',\n              'Iframe',\n              'Virtualized',\n            ],\n          ],\n        ],\n      },\n    },\n  },\n};\n\nexport default preview;\n"
  },
  {
    "path": "apps/stories/.storybook/theme.ts",
    "content": "import {create} from 'storybook/theming/create';\nimport {default as brandImage} from './assets/dnd-kit-banner.svg';\n\nexport const theme = create({\n  base: 'light',\n  brandImage,\n  appBg: '#F9F9F9',\n});\n"
  },
  {
    "path": "apps/stories/package.json",
    "content": "{\n  \"name\": \"@dnd-kit/stories\",\n  \"version\": \"0.0.0\",\n  \"type\": \"module\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"storybook dev -p 6006\",\n    \"build\": \"storybook build\",\n    \"preview-storybook\": \"serve storybook-static\",\n    \"clean\": \"rm -rf .turbo && rm -rf node_modules\",\n    \"lint\": \"eslint ./stories/*.stories.tsx --max-warnings 0\",\n    \"test:e2e\": \"playwright test\",\n    \"test:e2e:ui\": \"playwright test --ui\"\n  },\n  \"dependencies\": {\n    \"@dnd-kit/abstract\": \"*\",\n    \"@dnd-kit/dom\": \"*\",\n    \"@dnd-kit/react\": \"*\",\n    \"@dnd-kit/helpers\": \"*\",\n    \"@dnd-kit/stories-shared\": \"*\",\n    \"@dnd-kit/storybook-addon-codesandbox\": \"*\",\n    \"@tanstack/react-virtual\": \"^3.0.0-beta.54\",\n    \"clipboard\": \"^2.0.11\",\n    \"prismjs\": \"^1.29.0\",\n    \"react\": \"^19.0.0\",\n    \"react-dom\": \"^19.0.0\",\n    \"react-tiny-virtual-list\": \"^2.2.0\",\n    \"react-window\": \"1.8.9\"\n  },\n  \"devDependencies\": {\n    \"@dnd-kit/eslint-config\": \"*\",\n    \"@measured/auto-frame-component\": \"^0.1.7\",\n    \"@playwright/test\": \"^1.58.2\",\n    \"@storybook/addon-docs\": \"^9.0.15\",\n    \"@storybook/addon-links\": \"^9.0.15\",\n    \"@storybook/react-vite\": \"^9.0.15\",\n    \"@vitejs/plugin-react\": \"^4.2.1\",\n    \"@vueless/storybook-dark-mode\": \"^9.0.6\",\n    \"eslint\": \"^8.56.0\",\n    \"eslint-plugin-storybook\": \"9.0.15\",\n    \"http-server\": \"^14.1.1\",\n    \"serve\": \"^14.2.4\",\n    \"storybook\": \"^9.0.15\",\n    \"typescript\": \"^5.7.3\",\n    \"vite\": \"^6.0.0\"\n  }\n}\n"
  },
  {
    "path": "apps/stories/playwright.config.ts",
    "content": "import {defineConfig} from '@playwright/test';\n\nconst CI = !!process.env.CI;\n\nexport default defineConfig({\n  testDir: './tests',\n  timeout: 15_000,\n  expect: {\n    timeout: 5_000,\n  },\n  fullyParallel: true,\n  retries: CI ? 2 : 1,\n  reporter: CI ? 'html' : 'list',\n  use: {\n    baseURL: 'http://localhost:6006',\n    actionTimeout: 5_000,\n  },\n  projects: [\n    {\n      name: 'chromium',\n      use: {browserName: 'chromium'},\n    },\n  ],\n  webServer: {\n    command: 'npx http-server storybook-static --port 6006 --silent',\n    port: 6006,\n    reuseExistingServer: true,\n    timeout: 120_000,\n  },\n});\n"
  },
  {
    "path": "apps/stories/raw.d.ts",
    "content": "declare module '*.tsx?raw' {\n  const content: string;\n  export default content;\n}\n\ndeclare module '*.ts?raw' {\n  const content: string;\n  export default content;\n}\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Code/Code.module.css",
    "content": ".Code {\n  --background-color: #263038;\n  --border-radius: 8px;\n  --border-color: transparent;\n  --box-shadow:  0 1px 3px 0 rgba(0, 0, 0, 0.10), inset 0 0 1px hsla(203, 50%, 30%, 0.5);\n\n  max-width: 100%;\n  margin: 30px 0;\n  border: 1px solid var(--border-color);\n  background-color: var(--background-color);\n  border-radius: var(--border-radius);\n  color: #fff;\n  box-shadow: var(--box-shadow);\n}\n\n.InlineCode {\n  padding: 0.4em 0.6em !important;\n  border-radius: 4px !important;\n  color: rgb(0,37,158) !important;\n  background-color: rgba(1,68,255,0.059) !important;\n}\n\n\n:global(.dark) .Code {\n  --background-color: #2a2c2e;\n  --border-color: rgba(255,255,255,0.1);\n  --box-shadow: none;\n}\n\n:global(.dark) .InlineCode {\n  color: rgb(135 163 255) !important;\n  background-color: #2a2c2e !important;\n  border-color: rgba(255,255,255,0.1);\n}\n\n.TabContent {\n  padding: 20px 0;\n  padding-right: 20px;\n  overflow: auto;\n}\n\n.Tabs {\n  display: flex;\n  overflow-x: auto;\n  background-color: #1e272d;\n}\n\n:global(.dark) .Tabs {\n  background-color: #222425;\n}\n\n.Tab {\n  background-color: transparent;\n  appearance: none;\n  outline: none;\n  border: 0;\n  color: #97999e;\n  padding: 20px;\n  font-family: \"Roboto Mono\",Consolas,\"Andale Mono WT\",\"Andale Mono\",\"Lucida Console\",\"Lucida Sans Typewriter\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Liberation Mono\",\"Nimbus Mono L\",Monaco,\"Courier New\",Courier,monospace;\n\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 400;\n}\n\n.Tab[aria-selected=\"true\"] {\n  color: #fff;\n  background-color: var(--background-color);\n}\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Code/Code.tsx",
    "content": "import React, {useState} from 'react';\nimport {Unstyled} from '@storybook/addon-docs/blocks';\n\nimport {CodeHighlighter} from './components';\nimport styles from './Code.module.css';\n\ninterface Props {\n  children: string | string[];\n  tabs?: string[];\n  className?: string;\n}\n\nexport function Code(props: Props) {\n  const {children, className} = props;\n  const [selectedTab, setSelectedTab] = useState(0);\n  const contents = Array.isArray(children) ? children[selectedTab] : children;\n\n  return Array.isArray(children) || children.includes('\\n') ? (\n    \n      
\n        {props.tabs ? (\n          
\n            {props.tabs.map((tab, index) => (\n               setSelectedTab(index)}\n              >\n                {tab}\n              \n            ))}\n          
\n        ) : null}\n        
\n          \n            {contents}\n          \n        
\n      
\n    \n  ) : (\n    {children}\n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Code/components/CodeHighlighter/CodeHighlighter.module.css",
    "content": "@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');\n\n:root {\n  --mono-font-stack: 'Roboto Mono', Consolas, 'Andale Mono WT', 'Andale Mono',\n    'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono',\n    'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco,\n    'Courier New', Courier, monospace;\n}\n\n.CodeHighlighter {\n  position: relative;\n  font-size: 0.9rem;\n}\n\n.CodeHighlighter > pre {\n  position: relative;\n  overflow-y: hidden;\n  overflow-x: auto;\n  display: flex;\n  margin: 0;\n  padding-left: 50px;\n  padding-right: 20px;\n}\n\n.CodeHighlighter code {\n  flex-shrink: 0;\n  -webkit-text-size-adjust: none;\n  text-rendering: optimizeLegibility;\n}\n\n.CodeHighlighter code,\n.LineNumbers {\n  font-weight: 400;\n  font-family: var(--mono-font-stack);\n}\n\n.Copy {\n  position: absolute;\n  top: -18px;\n  right: -10px;\n  padding: 16px;\n  outline: none;\n  appearance: none;\n  border: none;\n  background: var(--background-color);\n  cursor: pointer;\n}\n\n.Copy img {\n  opacity: 0.5;\n}\n\n.Copy:active {\n  cursor: pointer;\n}\n\n.Copy:hover img {\n  opacity: 1;\n}\n\n.LineNumbers {\n  position: absolute;\n  left: 20px;\n  color: rgba(255, 255, 255, 0.2);\n  font-weight: 300;\n  user-select: none;\n}\n\n.CodeHighlighter :global .tag .token.spread .attr-value {\n  color: #fff;\n}\n\n.CodeHighlighter :global .token.parameter {\n  color: orange;\n}\n\n.CodeHighlighter :global .keyword,\n.CodeHighlighter :global .operator,\n.CodeHighlighter :global .tag .script.language-javascript .punctuation:not(.parentheses),\n.CodeHighlighter :global .tag .token.spread .punctuation {\n  color: #eb2b78;\n}\n\n.CodeHighlighter :global .comment {\n  color: #959595;\n}\n\n.CodeHighlighter :global .keyword.function,\n.CodeHighlighter :global .keyword.const,\n.CodeHighlighter :global .class-name,\n.CodeHighlighter :global .operator.arrow-function {\n  color: #70dcee;\n}\n\n.CodeHighlighter :global .operator + .keyword,\n.CodeHighlighter :global .boolean,\n.CodeHighlighter :global .token.keyword.null,\n.CodeHighlighter :global .number,\n.CodeHighlighter :global .token.token.punctuation.braces,\n.CodeHighlighter :global .token.token.punctuation.braces + .token.punctuation.parentheses,\n.CodeHighlighter :global .token.token.punctuation.parentheses.opening + .token.punctuation.parentheses.opening,\n.CodeHighlighter :global .token.token.punctuation.parentheses + .token.parameter + .token.punctuation.parentheses  {\n  color: #fc8bf5;\n}\n\n.CodeHighlighter :global .string,\n.CodeHighlighter :global .tag .attr-value {\n  color: #fdf0a2;\n}\n\n.CodeHighlighter :global .token.function + .punctuation,\n.CodeHighlighter :global .script.language-javascript .token.punctuation.braces,\n.CodeHighlighter :global .token.punctuation.parentheses,\n.CodeHighlighter :global .token.function ~ .token.punctuation.parentheses,\n.CodeHighlighter :global .token.token.punctuation.parentheses + .token.parameter + .token.punctuation.parentheses:has(+ .token.braces.opening) {\n  color: #ffd602;\n}\n\n.CodeHighlighter :global .function,\n.CodeHighlighter :global .attr-name {\n  color: #4bff83;\n}\n\n.CodeHighlighter :global .punctuation,\n.CodeHighlighter :global .script.language-javascript .token.punctuation.semicolon,\n.CodeHighlighter :global .tag .script.language-javascript {\n  color: #f9f9f4;\n}\n\n.CodeHighlighter :global .tag {\n  color: #fa2b7d;\n}\n\n.CodeHighlighter :global .token.punctuation.parentheses:where(+ .semicolon) {\n  color: #ffd602 !important;\n}\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Code/components/CodeHighlighter/CodeHighlighter.tsx",
    "content": "import React, {useEffect, useMemo, useRef} from 'react';\nimport Prism from 'prismjs';\nimport Clipboard from 'clipboard';\nimport 'prismjs/components/prism-jsx.min';\n\nimport copy from './copy.svg';\nimport styles from './CodeHighlighter.module.css';\nimport {classNames, createRange} from '@dnd-kit/stories-shared/utilities';\n\ninterface Props {\n  children: string;\n  language?: string;\n}\n\nexport function CodeHighlighter({children = '', language = 'jsx'}: Props) {\n  const lineCount = children.split('\\n').length - 1;\n  const nodeRef = useRef(null);\n  const highlightedCode = useMemo(\n    () =>\n      syntaxReplacements(\n        Prism.highlight(\n          children.trim(),\n          Prism.languages[language] ?? Prism.languages.txt,\n          language\n        )\n      ),\n    [children]\n  );\n\n  useEffect(() => {\n    const clipboard = new Clipboard(nodeRef.current as Element);\n    return () => clipboard.destroy();\n  }, []);\n\n  return (\n    \n      
\n        
\n          {lineCount > 1\n            ? createRange(lineCount).map((line) => (\n                \n                  {line}\n                  
\n                \n              ))\n            : null}\n        
\n        \n      
\n      \n        \"Copy\"\n      \n    \n  );\n}\n\nfunction syntaxReplacements(value: string) {\n  const markup = (string, newAttribute = '') =>\n    `${string}`;\n  const replacements = [\n    ['const', 'token', 'const'],\n    ['null', 'token', 'null'],\n    ['function', 'token', 'function'],\n    ['[(]', 'punctuation', 'parentheses opening', '('],\n    ['[)]', 'punctuation', 'parentheses closing', ')'],\n    ['{', 'punctuation', 'braces opening'],\n    ['}', 'punctuation', 'braces closing'],\n    [';', 'punctuation', 'semicolon'],\n    ['=>', 'operator', 'arrow-function'],\n  ];\n\n  return replacements.reduce(\n    (accumulator, [value, label, annotation, replacement]) =>\n      accumulator.replace(\n        new RegExp(markup(value, label), 'g'),\n        markup(replacement ?? value, `${label} ${annotation}`)\n      ),\n    value\n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Code/components/CodeHighlighter/index.ts",
    "content": "export {CodeHighlighter} from './CodeHighlighter';\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Code/components/index.ts",
    "content": "export {CodeHighlighter} from './CodeHighlighter';\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Code/index.ts",
    "content": "export {Code} from './Code';\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Info/Info.module.css",
    "content": ".Info {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: stretch;\n  padding: 16px 24px;\n  color: #333;\n  background-color: #f9f9f9;\n  border: 1px solid #57595a42;\n  border-radius: 10px;\n}\n\n:global(.dark) .Info {\n  background-color: #ffffff05;\n}\n\n.Info > p {\n  color: inherit;\n  margin: 0;\n}\n\n.Info > svg {\n  color: #2196F3;\n  width: 20px;\n  height: 20px;\n}\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Info/Info.tsx",
    "content": "import React, {type PropsWithChildren} from 'react';\n\nimport styles from './Info.module.css';\n\nconst icon = (\n  \n    \n  \n);\n\nexport function Info({children}: PropsWithChildren) {\n  return (\n    
\n      {icon}\n      
{children}
\n    
\n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Info/index.ts",
    "content": "export {Info} from './Info';\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Preview/Preview.module.css",
    "content": ".Preview {\n  --background-color: #FCFCFC;\n\n  overflow-y: auto;\n  padding: 30px 40px;\n  margin: 25px 0 40px;\n  border-radius: 8px;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), inset 0 0 1px hsla(203, 50%, 30%, 0.5);\n  background: var(--background-color);\n}\n\n.Preview:has( + .Code) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  margin-bottom: 0;\n}\n\n.Preview + .Code > div > div {\n  margin-top: 0px;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.hero {\n  position: relative;\n  --gradient: linear-gradient(65deg, #56fff420, #001AFF20, #5F6AF220, #F25FD020, #56FFF520, #F25FD020, #001AFF20, #56fff420);\n  display: grid;\n  align-items: center;\n  min-height: 200px;\n  max-height: 400px;\n  background-image: var(--gradient);\n  animation: gradient 16s linear infinite;\n  animation-direction: alternate;\n  background-size: 600% 100%;\n}\n\n.hero > * {\n  position: relative;\n  z-index: 1;\n}\n\n\n:global(.dark) .hero {\n  --gradient: linear-gradient(65deg, #56fff480, #001AFF80, #5F6AF280, #F25FD080, #56FFF580, #F25FD080, #001AFF80, #56fff480);\n\n  animation: background 16s linear infinite, gradient 60s linear infinite;\n}\n\n:global(.dark) .Preview {\n  --background-color: #38393c;\n}\n\n@keyframes background {\n  0% {\n    background-color: #ff0000;\n  }\n  25% {\n    background-color: #7f00ff;\n  }\n  50% {\n    background-color: #00affa;\n  }\n  75% {\n    background-color: #00f594;\n  }\n  100% {\n    background-color: #ff0000\n  }\n}\n\n\n@keyframes gradient {\n  0% {background-position: 0%}\n  100% {background-position: 100%}\n}\n\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Preview/Preview.tsx",
    "content": "import React from 'react';\nimport {Story, Unstyled} from '@storybook/addon-docs/blocks';\nimport {type StoryFn} from '@storybook/react';\n\nimport {classNames} from '@dnd-kit/stories-shared/utilities';\nimport {Code} from '../Code';\nimport styles from './Preview.module.css';\n\ninterface Props {\n  of?: StoryFn;\n  code?: string;\n  id?: string;\n  hero?: boolean;\n  tabs?: string[];\n  children?: React.ReactNode;\n}\n\nexport function Preview({children, code, of, hero, id, tabs}: Props) {\n  return (\n    \n      \n        {children ?? }\n      \n      {code ? (\n        
\n          {code}\n        
\n      ) : null}\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/components/docs/Preview/index.ts",
    "content": "export {Preview} from './Preview';\n"
  },
  {
    "path": "apps/stories/stories/components/docs/index.ts",
    "content": "export {Code} from './Code';\nexport {Info} from './Info';\nexport {Preview} from './Preview';\n"
  },
  {
    "path": "apps/stories/stories/components/index.ts",
    "content": "export {Code, Info, Preview} from './docs';\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/DragHandles/DragHandles.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport docs from './docs/DragHandles.mdx';\nimport {DraggableExample} from '../DraggableExample.tsx';\nimport {PointerSensor, KeyboardSensor} from '@dnd-kit/dom';\n\nconst meta: Meta = {\n  title: 'React/Draggable/Drag handles',\n  component: DraggableExample,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      page: docs,\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const DragHandle: Story = {\n  name: 'Example',\n  args: {\n    handle: true,\n  },\n};\n\nexport const DualActivators: Story = {\n  name: 'Dual activators',\n  args: {\n    handle: true,\n    sensors: [\n      PointerSensor.configure({\n        activatorElements(source) {\n          return [source.handle, source.element];\n        },\n      }),\n      KeyboardSensor,\n    ],\n  },\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/DragHandles/docs/DragHandles.mdx",
    "content": "import {RestrictToElement} from '@dnd-kit/dom/modifiers';\n\nimport {Info, Preview} from '../../../../components';\nimport {DragHandle} from '../DragHandles.stories.tsx';\n\n# Drag handles\n\nRestrict dragging to a specific element within a draggable element.\n\n\n\n## Usage\n\nTo create a drag handle, provide a `handle` element to the `useDraggable` hook by consuming the `handleRef` from the output object of the `useDraggable` hook.\n\n```jsx\nimport {useDraggable} from '@dnd-kit/react';\n\nfunction Draggable(props) {\n  const {handleRef, ref} = useDraggable({\n    id: props.id,\n  });\n\n  return (\n    
\n      {props.children}\n      \n    
\n  );\n}\n```\n\nAlternatively, you can also pass an `Element` or `ref` to an element as an argument to the `handle` option of `useDraggable`:\n\n```jsx\nimport {useDraggable} from '@dnd-kit/react';\n\nfunction Draggable(props) {\n  const handleRef = useRef(null);\n  const {ref} = useDraggable({\n    id: props.id,\n    handle: handleRef,\n  });\n\n  return (\n    
\n      {props.children}\n      \n    
\n  );\n}\n```\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/DragOverlay/DragOverlay.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {DraggableExample} from '../DraggableExample.tsx';\n\nconst meta: Meta = {\n  title: 'React/Draggable/Drag overlay',\n  component: DraggableExample,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const DragOverlay: Story = {\n  name: 'Example',\n  args: {\n    overlay: true,\n  },\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/Draggable.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport DraggableApp from './DraggableApp.tsx';\nimport draggableSource from './DraggableApp.tsx?raw';\nimport {baseStyles, draggableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\nimport docs from './docs/DraggableDocs.mdx';\n\nconst meta: Meta = {\n  title: 'React/Draggable',\n  component: DraggableApp,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      page: docs,\n    },\n    codesandbox: {\n      files: {\n        'src/App.tsx': draggableSource,\n        'src/styles.css': [baseStyles, draggableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  name: 'Example',\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/DraggableApp.tsx",
    "content": "import React from 'react';\nimport {DragDropProvider, useDraggable} from '@dnd-kit/react';\n\nfunction Draggable() {\n  const {ref} = useDraggable({id: 'draggable'});\n\n  return ;\n}\n\nexport default function App() {\n  return (\n    \n      \n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/DraggableExample.tsx",
    "content": "import React, {\n  type PropsWithChildren,\n  type CSSProperties,\n  useRef,\n  useState,\n} from 'react';\nimport type {Modifiers, Plugins, Sensors} from '@dnd-kit/abstract';\nimport {DragDropProvider, DragOverlay, useDraggable} from '@dnd-kit/react';\n\nimport {Button, Handle} from '../components';\n\ninterface Props {\n  container?: React.FC> | string;\n  handle?: boolean;\n  overlay?: boolean;\n  modifiers?: Modifiers;\n  sensors?: Sensors;\n}\n\nexport function DraggableExample(props: Props) {\n  const {container, overlay, sensors} = props;\n  const Wrapper = container ?? 'div';\n\n  return (\n    \n      \n        \n        {overlay && (\n          \n            \n          \n        )}\n      \n    \n  );\n}\n\ninterface DraggableProps {\n  id: string;\n  handle?: boolean;\n  plugins?: Plugins;\n  modifiers?: Modifiers;\n  style?: CSSProperties;\n  overlay?: boolean;\n}\n\nexport function Draggable({\n  id,\n  modifiers,\n  handle,\n  plugins,\n  style,\n  overlay,\n}: DraggableProps) {\n  const [element, setElement] = useState(null);\n  const handleRef = useRef(null);\n\n  const {isDragging} = useDraggable({\n    id,\n    modifiers,\n    element,\n    plugins,\n    handle: handleRef,\n  });\n\n  return (\n     : undefined}\n      disabled={isDragging && overlay}\n      shadow={isDragging && !overlay}\n      style={style}\n    >\n      draggable\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/Modifiers/Modifiers.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\nimport {\n  RestrictToHorizontalAxis,\n  RestrictToVerticalAxis,\n} from '@dnd-kit/abstract/modifiers';\nimport {RestrictToElement, RestrictToWindow} from '@dnd-kit/dom/modifiers';\n\nimport docs from './docs/ModifierDocs.mdx';\nimport {DraggableExample} from '../DraggableExample';\nimport {SnapToGridExample} from './SnapToGridExample';\nimport styles from './styles.module.css';\n\nconst meta: Meta = {\n  title: 'React/Draggable/Modifiers',\n  component: DraggableExample,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      page: docs,\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const VerticalAxis: Story = {\n  name: 'Vertical axis',\n  args: {\n    modifiers: [RestrictToVerticalAxis],\n  },\n};\n\nexport const HorizontalAxis: Story = {\n  name: 'Horizontal axis',\n  args: {\n    modifiers: [RestrictToHorizontalAxis],\n  },\n};\n\nexport const WindowModifier: Story = {\n  name: 'Restrict to window',\n  args: {\n    modifiers: [RestrictToWindow],\n  },\n};\n\nexport const ContainerModifier: Story = {\n  name: 'Restrict to container',\n  args: {\n    container({children}) {\n      return (\n        
\n          {children}\n        
\n      );\n    },\n    modifiers: [\n      RestrictToElement.configure({\n        element() {\n          return document.querySelector('[data-container]');\n        },\n      }),\n    ],\n  },\n};\n\nexport const SnapModifierExample: Story = {\n  name: 'Snap to grid',\n  render: SnapToGridExample,\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/Modifiers/SnapToGridExample.tsx",
    "content": "import {useState} from 'react';\nimport {RestrictToWindow} from '@dnd-kit/dom/modifiers';\nimport {SnapModifier} from '@dnd-kit/abstract/modifiers';\nimport {DragDropProvider} from '@dnd-kit/react';\n\nimport {Grid} from '../../components/index.ts';\nimport {Draggable} from '../DraggableExample.tsx';\n\nexport function SnapToGridExample() {\n  const [gridSize, setGridSize] = useState(30);\n  const [position, setPosition] = useState({x: gridSize, y: gridSize});\n\n  return (\n     {\n        setPosition(({x, y}) => ({\n          x: x + event.operation.transform.x,\n          y: y + event.operation.transform.y,\n        }));\n      }}\n    >\n      \n        \n      \n      \n        Grid size\n        
\n         {\n            const gridSize = parseInt(e.target.value, 10);\n\n            setGridSize(gridSize);\n            setPosition({\n              x: gridSize,\n              y: gridSize,\n            });\n          }}\n        />\n      \n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/Modifiers/docs/ModifierDocs.mdx",
    "content": "import {RestrictToElement} from '@dnd-kit/dom/modifiers';\n\nimport {Info, Preview} from '../../../../components';\nimport {DraggableExample} from '../../DraggableExample';\n\n# Modifiers\n\nModify or restrict the behavior of draggable elements.\n\n\n  \n\n\nModifiers let you dynamically modify the movement coordinates that are detected by sensors. They can be used for a wide range of use cases, for example:\n\n- Restricting motion to a single axis\n- Restricting motion to the draggable node container's bounding rectangle\n- Restricting motion to the draggable node's scroll container bounding rectangle\n- Applying resistance or clamping the motion\n\n## Usage\n\nModifiers can be applied globally or to individual draggable elements.\n\n### Global modifiers\n\nModifiers can be applied globally by passing them to the `` component.\n\n```jsx\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {RestrictToVerticalAxis} from '@dnd-kit/abstract/modifiers';\nimport {RestrictToWindow} from '@dnd-kit/dom/modifiers';\n\nfunction App() {\n  return (\n    \n      {...}\n    \n  )\n}\n```\n\n### Local modifiers\n\nLocal modifiers take precedence over global modifiers.\n\nModifiers can also be applied to individual draggable elements by passing them to the `modifiers` prop.\n\n```jsx\nimport {useDraggable} from '@dnd-kit/react';\nimport {RestrictToVerticalAxis} from '@dnd-kit/abstract/modifiers';\nimport {RestrictToWindow} from '@dnd-kit/dom/modifiers';\n\nfunction Draggable({id}) {\n  const {ref} = useDraggable({\n    id,\n    modifiers: [RestrictToVerticalAxis, RestrictToWindow],\n  });\n}\n```\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/Modifiers/styles.module.css",
    "content": ".Container {\n  display: flex;\n  width: 60%;\n  min-width: 300px;\n  margin: 40px 80px;\n  height: 350px;\n  outline: 3px solid rgba(0,0,0,0.2);\n  background: #FFF;\n  align-items: center;\n  justify-content: center;\n  padding: 30px;\n  border-radius: 8px;\n}\n\n:global(.dark) .Container {\n  outline: 1px solid rgba(255,255,255,0.3);\n  background: rgba(255,255,255,0.05);\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/Sensors/Sensors.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport docs from './docs/SensorDocs.mdx';\nimport {DraggableExample} from '../DraggableExample';\n\nconst meta: Meta = {\n  title: 'React/Draggable/Sensors',\n  component: DraggableExample,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      page: docs,\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Pointer: Story = {\n  name: 'Default sensors',\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/Sensors/docs/SensorDocs.mdx",
    "content": "import {Info, Preview} from '../../../../components';\nimport {DraggableExample} from '../../DraggableExample';\n\n# Sensors\n\nDetect user input and translate them into drag operations.\n\n## Overview\n\nSensors are an abstraction to detect different input methods in order to initiate drag operations, respond to movement and end or cancel the operation.\n\n## Built-in sensors\n\nThe `@dnd-kit/dom` package provides built-in sensors that can be used to detect user input in the browser.\n\n### Pointer sensor\n\nThe Pointer sensor responds to [Pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events). This sensor is enabled by default.\n\n> Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers).\n> The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.\n>\n> – Source: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)\n\n#### Activation constraints\n\nThe Pointer sensor has two types of activation constraints:\n\n- Distance constraint\n- Delay constraint\n\nThese activation constraints are not mutually exclusive, they can be used simultaneously. In case both constraints are used, the Pointer sensor will activate as soon as one of the constraints is met.\n\n```js\nimport {PointerSensor, PointerActivationConstraints} from '@dnd-kit/dom';\n\nconst sensors = [\n  PointerSensor.configure({\n    activationConstraints: [\n      new PointerActivationConstraints.Delay({value: 200, tolerance: 10}),\n      new PointerActivationConstraints.Distance({value: 5}),\n    ],\n  }),\n];\n```\n\nThe **distance** `value` property represents the distance, in _pixels_, that a pointer needs to be moved by before a drag operation is initiated.\n\nThe **delay** `value` property represents the duration, in _milliseconds_, that a draggable item needs to be held by the primary pointer for before a drag start event is emitted.\n\nThe `tolerance` property represents the distance, in pixels, of motion that is tolerated before the drag operation is aborted. If the pointer is moved during the delay duration and the tolerance is set to zero, the drag operation will be immediately aborted. If a higher tolerance is set, for example, a tolerance of 5 pixels, the operation will only be aborted if the pointer is moved by more than 5 pixels during the delay.\n\nThis property is particularly useful for touch input, where some tolerance should be accounted for when using a delay constraint, as touch input is less precise than mouse input.\n\n#### Default behavior\n\nBy default, the `PointerSensor` applies sensible activation constraints depending on the context:\n\n- Mouse on handle: activates immediately.\n- Touch: `Delay({value: 250, tolerance: 5})`.\n- Text inputs: `Delay({value: 200, tolerance: 0})`.\n- Other cases: `Delay({value: 200, tolerance: 10})` and `Distance({value: 5})`.\n\nYou can override this with `activationConstraints`, which may be an array of constraints or a function `(event, source) => ActivationConstraints | undefined` to compute them per interaction.\n\n```js\nimport {PointerSensor, PointerActivationConstraints} from '@dnd-kit/dom';\n\nPointerSensor.configure({\n  activationConstraints(event, source) {\n    if (event.pointerType === 'touch') {\n      return [\n        new PointerActivationConstraints.Delay({value: 300, tolerance: 8}),\n      ];\n    }\n    return [new PointerActivationConstraints.Distance({value: 6})];\n  },\n});\n```\n\n#### Activator elements\n\nYou may specify additional elements that can start a pointer interaction via `activatorElements`:\n\n```js\nimport {PointerSensor} from '@dnd-kit/dom';\n\nPointerSensor.configure({\n  activatorElements(source) {\n    return [\n      source.handle,\n      document.querySelector('[data-dnd-activator]'),\n    ];\n  },\n});\n```\n\n### Keyboard sensor\n\nThe Keyboard sensor responds to [Keyboard events](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent). This sensor is enabled by default.\n\nThe keyboard sensor activates when the `handle` or `element` of a draggable source is focused and the `Space` or `Enter` key is pressed.\n\n#### Configuration\n\nThe Keyboard sensor can be configured to respond to different keyboard codes:\n\n```js\nimport {KeyboardSensor} from '@dnd-kit/dom';\n\nconst sensors = [\n  KeyboardSensor.configure({\n    keyboardCodes: {\n      start: ['Space', 'Enter'],\n      cancel: ['Escape'],\n      end: ['Space', 'Enter'],\n      up: ['ArrowUp'],\n      down: ['ArrowDown'],\n      left: ['ArrowLeft'],\n      right: ['ArrowRight'],\n    },\n  }),\n];\n```\n\nYou may customize these values, but do keep in mind that the [third rule of ARIA](https://www.w3.org/TR/using-aria/#3rdrule) requires that a user must be able to activate the action associated with a draggable widget using both the enter (on Windows) or return (on macOS) and the space key. To learn more, read the in-depth accessibility guide.\n\n## Usage\n\nSensors can be applied globally or to individual draggable elements.\n\n### Global sensors\n\nSensors can be applied globally by passing them to the `` component.\n\n```jsx\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {PointerSensor, KeyboardSensor} from '@dnd-kit/dom';\n\nfunction App() {\n  return (\n    \n      {...}\n    \n  )\n}\n```\n\n### Local sensors\n\nLocal sensors take precedence over global sensors.\n\nSensors can also be applied to individual draggable elements by passing them to the `sensors` prop.\n\n```jsx\nimport {useDraggable} from '@dnd-kit/react';\nimport {KeyboardSensor} from '@dnd-kit/dom';\n\nfunction Draggable({id}) {\n  const {ref} = useDraggable({\n    id,\n    sensors: [KeyboardSensor],\n  });\n}\n```\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/docs/DraggableDocs.mdx",
    "content": "import {Preview} from '../../../components';\nimport {Example as Hero} from '../Draggable.stories';\nimport {Example} from './examples/QuickStart';\nimport ExampleSource from './examples/QuickStart?raw';\nimport DraggableSource from './examples/Draggable?raw';\nimport {Example as MultipleDraggableExample} from './examples/MultipleDraggable';\nimport MultipleDraggableExampleSource from './examples/MultipleDraggable?raw';\n\n# Draggable\n\nMake elements draggable and drop them over targets.\n\n\n\n## Usage\n\nUse the `useDraggable` hook to create draggable elements that `draggable` elements can be dropped over `droppable` targets.\n\n```jsx\nimport {useDraggable} from '@dnd-kit/react';\n\nfunction Draggable(props) {\n  const {ref} = useDraggable({\n    id: props.id,\n  });\n\n  return ;\n}\n```\n\n## Getting started\n\nTo get started, we will create two files, `App.js` and `Draggable.js`.\n\n\n  \n\n\nTo render multiple draggable elements, we can simply render the `` component multiple times:\n\n\n  \n\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/docs/examples/Draggable.jsx",
    "content": "import React from 'react';\nimport {useDraggable} from '@dnd-kit/react';\n\nexport function Draggable({id}) {\n  const {ref} = useDraggable({\n    id,\n  });\n\n  return (\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/docs/examples/MultipleDraggable.jsx",
    "content": "import React from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\n\nimport {Draggable} from './Draggable';\n\nexport function Example() {\n  return (\n    \n      
\n        \n        \n        \n      
\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Draggable/docs/examples/QuickStart.jsx",
    "content": "import React from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\n\nimport {Draggable} from './Draggable';\n\nexport function Example() {\n  return (\n    \n      \n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Droppable/Droppable.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport DroppableApp from './DroppableApp.tsx';\nimport droppableSource from './DroppableApp.tsx?raw';\nimport {baseStyles, draggableStyles, droppableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\nimport docs from './docs/DroppableDocs.mdx';\n\nconst meta: Meta = {\n  title: 'React/Droppable',\n  component: DroppableApp,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      page: docs,\n    },\n    codesandbox: {\n      files: {\n        'src/App.tsx': droppableSource,\n        'src/styles.css': [baseStyles, draggableStyles, droppableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  name: 'Example',\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Droppable/DroppableApp.tsx",
    "content": "import React, {useState} from 'react';\nimport {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/react';\n\nfunction Draggable({id}: {id: string}) {\n  const {ref} = useDraggable({id});\n\n  return ;\n}\n\nfunction Droppable({id, children}: {id: string; children?: React.ReactNode}) {\n  const {ref, isDropTarget} = useDroppable({id});\n\n  return (\n    
\n      {children}\n    
\n  );\n}\n\nexport default function App() {\n  const [parent, setParent] = useState(undefined);\n  const draggable = ;\n\n  return (\n     {\n        if (event.canceled) return;\n        setParent(event.operation.target?.id as string);\n      }}\n    >\n      
\n        {parent == null ? draggable : null}\n        \n          {parent === 'droppable' ? draggable : null}\n        \n      
\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Droppable/DroppableExample.tsx",
    "content": "import React, {useState} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/react';\nimport {Debug} from '@dnd-kit/dom/plugins/debug';\n\nimport {createRange} from '@dnd-kit/stories-shared/utilities';\nimport {Button} from '../components/Button/Button.tsx';\nimport {Dropzone} from '../components/Dropzone/Dropzone.tsx';\n\ninterface Props {\n  droppableCount?: number;\n  debug?: boolean;\n}\n\nexport function DroppableExample({droppableCount = 1, debug}: Props) {\n  const [parent, setParent] = useState();\n  const draggable = ;\n\n  return (\n     [...defaults, Debug] : undefined}\n      onDragEnd={(event) => {\n        const {target} = event.operation;\n\n        if (event.canceled) {\n          return;\n        }\n\n        setParent(target?.id);\n      }}\n    >\n      
\n        
\n          {parent == null ? draggable : null}\n        
\n        {createRange(droppableCount).map((id) => (\n          \n            {parent === id ? draggable : null}\n          \n        ))}\n      
\n    \n  );\n}\n\ninterface DraggableProps {\n  id: UniqueIdentifier;\n}\n\nfunction Draggable({id}: DraggableProps) {\n  const [element, setElement] = useState(null);\n\n  const {isDragging} = useDraggable({\n    id,\n    element,\n  });\n\n  return (\n    \n  );\n}\n\ninterface DroppableProps {\n  id: UniqueIdentifier;\n}\n\nfunction Droppable({id, children}: PropsWithChildren) {\n  const {ref, isDropTarget} = useDroppable({id});\n\n  return (\n    \n      {children}\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Droppable/MultipleDroppable/MultipleDroppable.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport MultipleDroppableApp from './MultipleDroppableApp';\nimport multipleDroppableSource from './MultipleDroppableApp.tsx?raw';\nimport {baseStyles, draggableStyles, droppableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'React/Droppable/Multiple drop targets',\n  component: MultipleDroppableApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.tsx': multipleDroppableSource,\n        'src/styles.css': [baseStyles, draggableStyles, droppableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Droppable/MultipleDroppable/MultipleDroppableApp.tsx",
    "content": "import React, {useState} from 'react';\nimport {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/react';\n\nfunction Draggable({id}: {id: string}) {\n  const {ref} = useDraggable({id});\n\n  return ;\n}\n\nfunction Droppable({id, children}: {id: string; children?: React.ReactNode}) {\n  const {ref, isDropTarget} = useDroppable({id});\n\n  return (\n    
\n      {children}\n    
\n  );\n}\n\nexport default function App() {\n  const [parent, setParent] = useState(undefined);\n  const draggable = ;\n  const droppables = ['A', 'B', 'C'];\n\n  return (\n     {\n        if (event.canceled) return;\n        setParent(event.operation.target?.id as string);\n      }}\n    >\n      
\n        
\n          {parent == null ? draggable : null}\n        
\n        {droppables.map((id) => (\n          \n            {parent === id ? draggable : null}\n          \n        ))}\n      
\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Droppable/docs/DroppableDocs.mdx",
    "content": "import {Preview} from '../../../components';\nimport {Example as Hero} from '../Droppable.stories';\nimport {Example} from './examples/QuickStart';\nimport ExampleSource from './examples/QuickStart?raw';\nimport DraggableSource from './examples/Draggable?raw';\nimport DroppableSource from './examples/Droppable?raw';\nimport {Example as MultipleDroppableExample} from './examples/MultipleDroppable';\nimport MultipleDroppableExampleSource from './examples/MultipleDroppable?raw';\n\n# Droppable\n\nCreate droppable targets for draggable elements.\n\n\n\n## Usage\n\nUse the `useDroppable` hook to create droppable targets that `draggable` elements can be dropped over.\n\n```jsx\nimport {useDroppable} from '@dnd-kit/react';\n\nfunction Droppable(props) {\n  const {ref} = useDroppable({\n    id: props.id,\n  });\n\n  return 
{props.children}
;\n}\n```\n\nOn its own, the `useDroppable` hook does not provide a lot of functionality. It is meant to be used in conjunction with the `useDraggable` hook, along with a parent `` component to listen for and respond to drag and drop events.\n\nYou can set up as many droppable targets as needed, either by calling the `useDroppable` hook multiple times within the same component, or by setting up a generic component that calls `useDroppable` and rendering that component multiple times. Just remember to make sure they all have a unique `id` so that they can be differentiated.\n\n## Getting started\n\nTo get started, we will create three files, `App.js`, `Droppable.js`, and `Draggable.js`.\n\n\n  \n\n\nTo render multiple droppable targets, we can simply render the `` component multiple times:\n\n\n  \n\n"
  },
  {
    "path": "apps/stories/stories/react/Droppable/docs/examples/Draggable.jsx",
    "content": "import React from 'react';\nimport {useDraggable} from '@dnd-kit/react';\n\nexport function Draggable({id}) {\n  const {ref} = useDraggable({\n    id,\n  });\n\n  return (\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Droppable/docs/examples/Droppable.jsx",
    "content": "import React from 'react';\nimport {useDroppable} from '@dnd-kit/react';\n\nexport function Droppable({id, children}) {\n  const {ref, isDropTarget} = useDroppable({id});\n\n  return (\n    
\n      {children}\n    
\n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Droppable/docs/examples/MultipleDroppable.jsx",
    "content": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\n\nimport {Droppable} from './Droppable';\nimport {Draggable} from './Draggable';\n\nexport function Example() {\n  const [parent, setParent] = useState();\n  const parents = ['A', 'B', 'C'];\n  const draggable = ;\n\n  return (\n     {\n        const {target} = event.operation;\n\n        if (event.canceled) return;\n\n        setParent(target ? target.id : undefined);\n      }}\n    >\n      
\n        
{parent == null ? draggable : null}
\n        {parents.map((id) => (\n          \n            {parent === id ? draggable : null}\n          \n        ))}\n      
\n    \n  );\n}\n\n\n"
  },
  {
    "path": "apps/stories/stories/react/Droppable/docs/examples/QuickStart.jsx",
    "content": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\n\nimport {Droppable} from './Droppable';\nimport {Draggable} from './Draggable';\n\nexport function Example() {\n  const [parent, setParent] = useState();\n  const draggable = ;\n\n  return (\n     {\n        const {target} = event.operation;\n\n        if (event.canceled) return;\n\n        setParent(target ? target.id : undefined);\n      }}\n    >\n      
\n        
{parent == null ? draggable : null}
\n        \n          {parent === 'dropzone' ? draggable : null}\n        \n      
\n    \n  );\n}\n\n\n"
  },
  {
    "path": "apps/stories/stories/react/Resizeable/Resizeable.css",
    "content": "body, html, #root {\n\theight: 100%;\n}\n\n.Test {\n\t--max-width: 1600px;\n\t--gutter: 3vw;\n\n\t--grid-gutter: calc(var(--gutter, 4vw) - 11px);\n\t--cell-max-width: calc( ( var(--max-width, 1500px) - (11px * 23) ) / 24 );\n\t--inset-padding: 0vw;\n\t--container-width: min(var(--max-width, 1500px), calc(100vw - var(--gutter, 4vw) * 2 - var(--inset-padding) ));\n\n\tgrid-template-rows: repeat(20,minmax(calc(var(--container-width) * 0.0215), auto));\n\tgrid-template-columns: minmax(var(--grid-gutter), 1fr) repeat(24, minmax(0, var(--cell-max-width))) minmax(var(--grid-gutter), 1fr);\n}\n\n.Grid {\n\tdisplay: grid;\n\tposition: relative;\n\tgrid-area: 1/1/-1/-1;\n\n\t--max-width: 1600px;\n\t--gap: 11px;\n\t--gutter: 3vw;\n\t--grid-gutter: calc(var(--gutter, 4vw) - 11px);\n\n\t--cell-max-width: calc( ( var(--max-width, 1500px) - (11px * 23) ) / 24 );\n\t--inset-padding: 0vw;\n\t--container-width: min(var(--max-width, 1500px), calc(100vw - var(--gutter, 4vw) * 2 - var(--inset-padding) ));\n\n\t--column-width: var(--cell-max-width);\n\t--column-height: calc(var(--container-width) * 0.0215);\n\n\tgrid-template-rows: repeat(20,minmax(var(--column-height), auto));\n\tgrid-template-columns: repeat(24, minmax(0, var(--column-width)));\n\n\trow-gap: var(--gap);\n  column-gap: var(--gap);\n}\n\n.reveal::before {\n\t--bg-width: calc(var(--column-width) + var(--gap));\n\t--bg-height: calc(var(--column-height) + var(--gap));\n\n\t--border-color: #EEE;\n\t--gap-color: #EEE;\n\t--cell-color: transparent;\n\n\tcontent: '';\n\tposition: absolute;\n\tinset: 0;\n\tpointer-events: none;\n\tbackground-image:\n\t\trepeating-linear-gradient(\n\t\t\t-90deg,\n\t\t\tvar(--gap-color) 0px,\n\t\t\tvar(--gap-color) calc(var(--gap) - 1px),\n\t\t\tvar(--border-color) var(--gap),\n\t\t\tvar(--cell-color) calc(var(--gap)),\n\t\t\tvar(--cell-color) calc(var(--bg-width) - 1px),\n\t\t\tvar(--border-color) var(--bg-width)\n\t\t),\n\t\trepeating-linear-gradient(\n\t\t\t0deg,\n\t\t\tvar(--gap-color) 0px,\n\t\t\tvar(--gap-color) calc(var(--gap) - 1px),\n\t\t\tvar(--border-color) var(--gap),\n\t\t\tvar(--cell-color) var(--gap),\n\t\t\tvar(--cell-color) calc(var(--bg-height) - 1px),\n\t\t\tvar(--border-color) var(--bg-height)\n\t\t);\n\tbackground-size: var(--bg-width) var(--bg-height);\n}\n\n\n.GridItem {\n\tposition: relative;\n\tpadding: 20px;\n\t// grid-area: attr(data-position);\n}\n\n.GridItem:hover, .selected {\n\toutline: 2px solid blue;\n}\n\n\n.Handle {\n\tposition: absolute;\n\tpadding: 10px;\n\tdisplay: flex;\n}\n\n.Handle::after {\n\tcontent: '';\n\twidth: 10px;\n\theight: 10px;\n\tline-height: 0;\n\tmargin: 0;\n\tborder-radius: 3px;\n\tborder: 2px solid blue;\n\tbackground-color: white;\n\tbox-sizing: border-box;\n}\n\n.Handle[data-direction=\"N\"] {\n\ttop: -1px;\n\tleft: 50%;\n\ttransform: translate3d(-50%, -50%, 0);\n\tcursor: row-resize;\n}\n\n.Handle[data-direction=\"NW\"] {\n\ttop: -1px;\n\tleft: -1px;\n\ttransform: translate3d(-50%, -50%, 0);\n\tcursor: nw-resize;\n}\n\n.Handle[data-direction=\"NE\"] {\n\ttop: -1px;\n\tright: -1px;\n\ttransform: translate3d(50%, -50%, 0);\n\tcursor: ne-resize;\n}\n\n.Handle[data-direction=\"S\"] {\n\tbottom: -1px;\n\tleft: 50%;\n\ttransform: translate3d(-50%, 50%, 0);\n\tcursor: row-resize;\n}\n\n.Handle[data-direction=\"SW\"] {\n\tbottom: -1px;\n\tleft: -1px;\n\ttransform: translate3d(-50%, 50%, 0);\n\tcursor: sw-resize;\n}\n\n.Handle[data-direction=\"W\"] {\n\ttop: 50%;\n\tleft: -1px;\n\ttransform: translate3d(-50%, -50%, 0);\n\tcursor: col-resize;\n}\n\n.Handle[data-direction=\"SE\"] {\n\tbottom: -1px;\n\tright: -1px;\n\ttransform: translate3d(50%, 50%, 0);\n\tcursor: se-resize;\n}\n\n.Handle[data-direction=\"E\"] {\n\ttop: 50%;\n\tright: -1px;\n\ttransform: translate3d(50%, -50%, 0);\n\tcursor: col-resize;\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Resizeable/Resizeable.tsx",
    "content": "import React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n  useReducer,\n  useRef,\n} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport {DragDropProvider, useDraggable} from '@dnd-kit/react';\n\nimport './Resizeable.css';\nimport {Coordinates} from '@dnd-kit/geometry';\n\ninterface Layout {\n  /** @x integer that represents the number of grid cells from the left edge */\n  x: number;\n  /** @y integer that represents the number of grid cells from the top edge */\n  y: number;\n  /** @z integer that represents the stacking order of the item */\n  z: number;\n  /** @width Integer that represents the number of grid cells representing the width of the item */\n  width: number;\n  /** @height Integer that represents the number of grid cells representing the height of the item */\n  height: number;\n}\n\ninterface State {\n  layouts: Record;\n}\n\ninterface GridArea {\n  columnStart: number;\n  columnEnd: number;\n  rowStart: number;\n  rowEnd: number;\n}\n\nfunction toGridArea({x, y, width, height}: Layout): GridArea {\n  return {\n    columnStart: x,\n    columnEnd: x + width,\n    rowStart: y,\n    rowEnd: y + height,\n  };\n}\n\nfunction toString({rowStart, columnStart, rowEnd, columnEnd}: GridArea) {\n  return `${rowStart}/${columnEnd}/${rowEnd}/${columnStart}`;\n}\n\nconst CELL_WIDTH = 56;\nconst ROW_HEIGHT = 35;\n\ntype Action =\n  | {\n      type: 'move';\n      id: UniqueIdentifier;\n      data: Coordinates;\n    }\n  | {\n      type: 'resize';\n      id: UniqueIdentifier;\n      data: ResizeEvent;\n    };\n\nfunction sanitize(layout: Layout): Layout {\n  const {x, y, z, width, height} = layout;\n\n  return {\n    ...layout,\n    x: Math.min(Math.max(x, 1), CELL_WIDTH - (x + width)),\n    y: Math.max(y, 1),\n    z: Math.max(z, 0),\n    width,\n    height,\n  };\n}\n\nfunction move(layout: Layout, coordinates: Coordinates): Layout {\n  const {x, y} = coordinates;\n\n  return sanitize({\n    ...layout,\n    x: layout.x + x,\n    y: layout.y + y,\n  });\n}\n\nfunction resize(layout: Layout, data: ResizeEvent): Layout {\n  const {x, y, width, height} = data;\n\n  return sanitize({\n    ...layout,\n    width: layout.width + width,\n    height: layout.height + height,\n    x: layout.x + x,\n    y: layout.y + y,\n  });\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'move': {\n      const {id, data} = action;\n\n      return {\n        ...state,\n        layouts: {\n          ...state.layouts,\n          [id]: move(state.layouts[id], data),\n        },\n      };\n    }\n    case 'resize': {\n      const {id, data} = action;\n\n      return {\n        ...state,\n        layouts: {\n          ...state.layouts,\n          [id]: resize(state.layouts[id], data),\n        },\n      };\n    }\n  }\n\n  return state;\n}\n\nexport function App() {\n  const [selectedIds, setSelectedIds] = useState(\n    null\n  );\n  const [draggingIds, setDraggingIds] = useState(\n    null\n  );\n  const isDragging = draggingIds != null;\n\n  const [state, dispatch] = useReducer(reducer, {\n    layouts: {\n      A: {\n        x: 2,\n        y: 3,\n        z: 0,\n        width: 6,\n        height: 3,\n      },\n      B: {\n        x: 3,\n        y: 10,\n        z: 0,\n        width: 4,\n        height: 2,\n      },\n    },\n  });\n  const {layouts} = state;\n\n  const handleMove = useCallback(\n    (id: UniqueIdentifier, coordinates: Coordinates) => {\n      dispatch({type: 'move', id, data: coordinates});\n    },\n    []\n  );\n\n  const handleResize = useCallback(\n    (id: UniqueIdentifier, data: ResizeEvent) => {\n      dispatch({type: 'resize', id, data});\n    },\n    []\n  );\n\n  return (\n     {\n        if (selectedIds?.length) {\n          manager.actions.initalize(selectedIds);\n        }\n\n        setDraggingIds(manager.dragOperation.selectedIds);\n        setSelectedIds(manager.dragOperation.selectedIds);\n      }}\n      onDragEnd={() => setDraggingIds(null)}\n    >\n       setSelectedIds(null)}>\n        {Object.entries(layouts).map(([id, layout]) => (\n          \n              setSelectedIds((ids) => (shiftKey ? [id, ...(ids ?? [])] : [id]))\n            }\n            dragging={draggingIds?.includes(id)}\n            selected={selectedIds?.includes(id)}\n          >\n            Lorem ipsum dolor sit amet\n          \n        ))}\n      \n    \n  );\n}\n\ninterface GridProps {\n  reveal?: boolean;\n  onClick?(): void;\n}\n\nfunction Grid({children, onClick, reveal}: PropsWithChildren) {\n  const className = classNames('Grid', reveal && 'reveal');\n\n  return (\n    
\n      {children}\n    
\n  );\n}\n\ninterface GridItemProps {\n  id: UniqueIdentifier;\n  layout: Layout;\n  selected?: boolean;\n  dragging?: boolean;\n  onMove(id: UniqueIdentifier, coordinates: Coordinates): void;\n  onSelect(id: UniqueIdentifier, shiftKey: boolean): void;\n  onResize(id: UniqueIdentifier, event: ResizeEvent): void;\n}\n\nfunction GridItem({\n  id,\n  layout,\n  children,\n  dragging,\n  selected,\n  onMove,\n  onSelect,\n  onResize,\n}: PropsWithChildren) {\n  const [ref, setRef] = useState(null);\n  const {transform} = useDraggable({\n    handle: ref,\n    element: null,\n    id,\n  });\n  const x = transform ? Math.ceil(transform.x / CELL_WIDTH) : null;\n  const y = transform ? Math.ceil(transform.y / ROW_HEIGHT) : null;\n  const previous = useRef({x, y});\n  const showResizeControls = selected && !dragging;\n\n  useLayoutEffect(() => {\n    if (\n      x === null ||\n      y === null ||\n      (x === previous.current.x && y === previous.current.y)\n    ) {\n      previous.current = {x, y};\n      return;\n    }\n\n    const previousX = previous.current.x ?? 0;\n    const previousY = previous.current.y ?? 0;\n\n    onMove(id, {x: x - previousX, y: y - previousY});\n\n    previous.current = {x, y};\n  }, [x, y]);\n\n  const className = classNames('GridItem', selected && 'selected');\n\n  return (\n     {\n        event.stopPropagation();\n        onSelect(id, event.shiftKey);\n      }}\n    >\n      {children}\n       onResize(id, event)}\n      />\n    \n  );\n}\n\ninterface ResizeEvent {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ninterface ResizeableProps {\n  disabled?: boolean;\n  onResize(event: ResizeEvent): void;\n}\n\nconst DIRECTIONS: Direction[] = ['NE', 'N', 'NW', 'E', 'W', 'SE', 'S', 'SW'];\n\nexport function Resizeable({disabled, onResize}: ResizeableProps) {\n  const handles = disabled ? null : (\n    <>\n      {DIRECTIONS.map((direction) => (\n        \n      ))}\n    \n  );\n\n  return {handles};\n}\n\ntype Direction = 'NE' | 'N' | 'NW' | 'SE' | 'S' | 'SW' | 'E' | 'W';\n\ninterface HandleProps {\n  direction: Direction;\n  onResize(event: ResizeEvent): void;\n}\n\nfunction Handle({direction, onResize}: HandleProps) {\n  const ref = useRef(null);\n  const {transform} = useDraggable({\n    handle: ref,\n    element: null,\n    id: direction,\n    type: 'handle',\n  });\n  const previousTransform = useRef(transform);\n  const previous = useRef({x: 0, y: 0});\n\n  useEffect(() => {\n    if (\n      JSON.stringify(transform) === JSON.stringify(previousTransform.current)\n    ) {\n      return;\n    }\n\n    previousTransform.current = transform;\n\n    if (!transform) {\n      return;\n    }\n\n    const x = Math.ceil(transform.x / CELL_WIDTH) - previous.current.x;\n    const y = Math.ceil(transform.y / ROW_HEIGHT) - previous.current.y;\n\n    previous.current.x = x;\n    previous.current.y = x;\n\n    const delta = {\n      width: x,\n      height: y,\n      x: 0,\n      y: 0,\n    };\n\n    if (direction.includes('N')) {\n      delta.y = y;\n      delta.height = -1 * y;\n    }\n\n    if (direction.includes('W')) {\n      delta.x = x;\n      delta.width = -1 * x;\n    }\n\n    switch (direction) {\n      case 'N':\n      case 'S':\n        delta.width = 0;\n        break;\n      case 'E':\n      case 'W':\n        delta.height = 0;\n        break;\n    }\n\n    onResize(delta);\n  }, [transform, onResize, direction]);\n\n  return ;\n}\n\nfunction classNames(...classes: (string | boolean | undefined | null)[]) {\n  return classes.filter(Boolean).join(' ');\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Resizeable/index.ts",
    "content": "export {App} from './Resizeable';\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/CSSLayers/CSSLayers.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {CSSLayersExample} from './CSSLayersExample';\n\nconst meta: Meta = {\n  title: 'React/Sortable/CSS Layers',\n  component: CSSLayersExample,\n  tags: ['hidden'],\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/CSSLayers/CSSLayersExample.tsx",
    "content": "import React, {useState, memo, useEffect} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\n\nconst LAYER_STYLES = `\n@layer base, components;\n\n@layer base {\n  .test {\n    appearance: none;\n    padding: 12px 20px;\n    border: 2px solid rgb(76, 159, 254);\n    border-radius: 8px;\n    background: rgb(232, 240, 254);\n    color: rgb(26, 58, 92);\n    font-size: 15px;\n    cursor: grab;\n    white-space: nowrap;\n    outline: none;\n  }\n}\n\n@layer components {\n  .test[data-shadow=\"true\"] {\n    opacity: 0.6;\n  }\n}\n`;\n\nexport function CSSLayersExample() {\n  const [items, setItems] = useState([1, 2, 3, 4, 5]);\n\n  useEffect(() => {\n    const style = document.createElement('style');\n    style.setAttribute('data-test-layers', '');\n    style.textContent = LAYER_STYLES;\n    document.head.appendChild(style);\n\n    return () => {\n      style.remove();\n    };\n  }, []);\n\n  return (\n     {\n        setItems((items) => move(items, event));\n      }}\n    >\n      \n        {items.map((id, index) => (\n          \n        ))}\n      \n    \n  );\n}\n\nconst LayerItem = memo(function LayerItem({\n  id,\n  index,\n}: PropsWithChildren<{id: UniqueIdentifier; index: number}>) {\n  const [element, setElement] = useState(null);\n  const {isDragging} = useSortable({id, index, element});\n\n  return (\n    \n      Item {id}\n    \n  );\n});\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Grid/Grid.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\nimport {pointerIntersection} from '@dnd-kit/collision';\nimport {Feedback} from '@dnd-kit/dom';\n\nimport {SortableExample} from '../SortableExample';\nimport gridSortableSource from './GridSortableApp.tsx?raw';\nimport {baseStyles, sortableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'React/Sortable/Grid',\n  component: SortableExample,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nconst defaultArgs = {\n  debug: false,\n  layout: 'grid',\n} as const;\n\nexport const Grid: Story = {\n  name: 'Basic setup',\n  args: defaultArgs,\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.tsx': gridSortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n\nexport const DragHandle: Story = {\n  name: 'Drag handle',\n  args: {\n    ...defaultArgs,\n    dragHandle: true,\n  },\n};\n\nexport const VariableSizes: Story = {\n  name: 'Variable sizes',\n  args: {\n    ...defaultArgs,\n    itemCount: 14,\n    collisionDetector: pointerIntersection,\n    optimistic: false,\n    getItemStyle(_: number, index: number) {\n      if (index === 0 || index === 10) {\n        return {\n          maxWidth: 'initial',\n          gridRowStart: 'span 2',\n          gridColumnStart: 'span 2',\n        };\n      }\n    },\n  },\n};\n\nexport const Clone: Story = {\n  name: 'Clone feedback',\n  args: {\n    ...defaultArgs,\n    collisionDetector: pointerIntersection,\n    optimistic: false,\n    getItemStyle(_, index) {\n      if (index === 0 || index === 2 || index === 10) {\n        return {\n          maxWidth: 'initial',\n          gridRowStart: 'span 2',\n          gridColumnStart: 'span 2',\n        };\n      }\n\n      if (index === 12) {\n        return {\n          gridRowStart: 'span 2',\n        };\n      }\n    },\n    plugins: [Feedback.configure({feedback: 'clone'})],\n  },\n};\n\nexport const Debug: Story = {\n  name: 'Debug',\n  args: {\n    ...defaultArgs,\n    debug: true,\n  },\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Grid/GridSortableApp.tsx",
    "content": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\n\nfunction Sortable({id, index}: {id: number; index: number}) {\n  const [element, setElement] = useState(null);\n  const {isDragging} = useSortable({id, index, element});\n\n  return (\n    \n      {id}\n    \n  );\n}\n\nexport default function App() {\n  const [items, setItems] = useState(createRange(20));\n\n  return (\n     {\n        setItems((items) => move(items, event));\n      }}\n    >\n      
\n        {items.map((id, index) => (\n          \n        ))}\n      
\n    \n  );\n}\n\nfunction createRange(length: number) {\n  return Array.from({length}, (_, i) => i + 1);\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Horizontal/Horizontal.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\nimport {RestrictToHorizontalAxis} from '@dnd-kit/abstract/modifiers';\nimport {Feedback} from '@dnd-kit/dom';\n\nimport {SortableExample} from '../SortableExample';\nimport horizontalSortableSource from './HorizontalSortableApp.tsx?raw';\nimport {baseStyles, sortableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'React/Sortable/Horizontal list',\n  component: SortableExample,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nconst defaultArgs = {\n  debug: false,\n  layout: 'horizontal',\n  getItemStyle() {\n    return {width: 180};\n  },\n} as const;\n\nexport const Horizontal: Story = {\n  name: 'Basic setup',\n  args: defaultArgs,\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.tsx': horizontalSortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n\nexport const DragHandle: Story = {\n  name: 'Drag handle',\n  args: {\n    ...defaultArgs,\n    dragHandle: true,\n  },\n};\n\nexport const VariableWidths: Story = {\n  name: 'Variable widths',\n  args: {\n    ...defaultArgs,\n    getItemStyle(id) {\n      const widths = {0: 140, 2: 120, 4: 140, 5: 240, 8: 100, 12: 150};\n\n      return {\n        width: widths[id] ?? 180,\n      };\n    },\n  },\n};\n\nexport const Clone: Story = {\n  name: 'Clone feedback',\n  args: {\n    ...defaultArgs,\n    plugins: [Feedback.configure({feedback: 'clone'})],\n  },\n};\n\nexport const HorizontalAxis: Story = {\n  name: 'Restrict axis',\n  args: {\n    ...defaultArgs,\n    modifiers: [RestrictToHorizontalAxis],\n  },\n};\n\nexport const Debug: Story = {\n  name: 'Debug',\n  args: {\n    ...defaultArgs,\n    debug: true,\n  },\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Horizontal/HorizontalSortableApp.tsx",
    "content": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\n\nfunction Sortable({id, index}: {id: number; index: number}) {\n  const [element, setElement] = useState(null);\n  const {isDragging} = useSortable({id, index, element});\n\n  return (\n    \n      {id}\n    \n  );\n}\n\nexport default function App() {\n  const [items, setItems] = useState(createRange(10));\n\n  return (\n     {\n        setItems((items) => move(items, event));\n      }}\n    >\n      
\n        {items.map((id, index) => (\n          \n        ))}\n      
\n    \n  );\n}\n\nfunction createRange(length: number) {\n  return Array.from({length}, (_, i) => i + 1);\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Iframe/Iframe.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {IframeLists} from './IframeExample.tsx';\n\nconst meta: Meta = {\n  title: 'React/Sortable/Iframe',\n  component: IframeLists,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Iframe: Story = {\n  name: 'Iframe',\n  args: {\n    debug: false,\n    itemCount: 6,\n  },\n};\n\nexport const IframeTransformed: Story = {\n  name: 'Transformed Iframe',\n  args: {\n    debug: false,\n    itemCount: 6,\n    transform: true,\n  },\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Iframe/IframeExample.tsx",
    "content": "import React, {useEffect, useRef, useState} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {DragOverlay} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\nimport {Debug} from '@dnd-kit/dom/plugins/debug';\nimport AutoFrameComponent from '@measured/auto-frame-component';\n\nimport {Container, Item} from '../../components/index.ts';\nimport {createRange} from '@dnd-kit/stories-shared/utilities';\n\nconst AutoFrame = AutoFrameComponent.default || AutoFrameComponent;\n\ninterface Props {\n  debug?: boolean;\n  defaultItems?: Record;\n  columnStyle?: Record;\n  itemCount: number;\n  scrollable?: boolean;\n  transform?: boolean;\n}\n\nexport function IframeLists({\n  debug,\n  defaultItems,\n  itemCount,\n  columnStyle,\n  scrollable,\n  transform,\n}: Props) {\n  const [items, setItems] = useState(\n    defaultItems ?? {\n      host: createRange(itemCount).map((id) => `Host: ${id}`),\n      iframe: createRange(itemCount).map((id) => `Iframe: ${id}`),\n    }\n  );\n  const snapshot = useRef(structuredClone(items));\n\n  const [bodyClassName, setBodyClassName] = useState('');\n\n  useEffect(() => {\n    const body = document.querySelector('body');\n\n    if (!body) return;\n\n    if (body.classList.contains('dark')) {\n      setBodyClassName('dark');\n    }\n  }, []);\n\n  return (\n     [...defaults, Debug] : undefined}\n      onDragStart={() => {\n        snapshot.current = structuredClone(items);\n      }}\n      onDragOver={(event) => {\n        setItems((items) => move(items, event));\n      }}\n      onDragEnd={(event) => {\n        if (event.canceled) {\n          setItems(snapshot.current);\n          return;\n        }\n      }}\n    >\n      \n        \n          {items.host.map((id, index) => (\n            \n          ))}\n        \n\n        \n          \n\n          \n          
\n            \n              {items.iframe.map((id, index) => (\n                \n              ))}\n            \n          
\n        \n      \n      \n        {(source) => {source.id}}\n      \n    \n  );\n}\n\ninterface SortableItemProps {\n  id: string;\n  column: string;\n  index: number;\n  style?: React.CSSProperties;\n}\n\nconst COLORS: Record = {\n  Host: '#7193f1',\n  Iframe: '#FF851B',\n};\n\nfunction SortableItem({\n  id,\n  column,\n  index,\n  style,\n}: PropsWithChildren) {\n  const group = column;\n  const {ref, isDragSource} = useSortable({\n    id,\n    group,\n    accept: 'item',\n    type: 'item',\n    index,\n    data: {group},\n  });\n\n  return (\n    \n      {id}\n    \n  );\n}\n\ninterface ColumnProps {\n  id: string;\n  scrollable?: boolean;\n  style?: React.CSSProperties;\n}\n\nfunction Column({\n  children,\n  id,\n  scrollable,\n  style,\n}: PropsWithChildren) {\n  return (\n    \n      {children}\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/MultipleLists/MultipleLists.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {MultipleLists} from './MultipleLists';\nimport MultipleListsApp from './MultipleListsApp';\nimport docs from './docs/MultipleLists.mdx';\nimport multipleListsSource from './MultipleListsApp.tsx?raw';\nimport {baseStyles, sortableStyles, multipleListsStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'React/Sortable/Multiple lists',\n  component: MultipleLists,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      page: docs,\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  name: 'Example',\n  render: () => ,\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.tsx': multipleListsSource,\n        'src/styles.css': [baseStyles, sortableStyles, multipleListsStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n\nexport const Hero: Story = {\n  name: 'Hero',\n  tags: ['hidden'],\n  args: {\n    columnStyle: {\n      '--min-width': '250px',\n      flexGrow: '1',\n      flexBasis: '33%',\n      backgroundColor: 'rgba(246, 246, 246, 0.7)',\n    },\n    defaultItems: {\n      A: ['A1', 'A2', 'A3'],\n      B: ['B1', 'B2'],\n      C: [],\n    },\n  },\n};\n\nexport const Scrollable: Story = {\n  name: 'Scrollable containers',\n  args: {\n    debug: false,\n    itemCount: 25,\n    scrollable: true,\n  },\n};\n\nexport const Grid: Story = {\n  name: 'Grid',\n  args: {\n    debug: false,\n    itemCount: 5,\n    grid: true,\n  },\n};\n\nexport const VerticalSetup: Story = {\n  name: 'Vertical',\n  args: {\n    debug: false,\n    itemCount: 3,\n    vertical: true,\n  },\n};\n\nexport const VerticalScrollable: Story = {\n  name: 'Vertical & scrollable',\n  args: {\n    debug: false,\n    itemCount: 25,\n    scrollable: true,\n    vertical: true,\n  },\n};\n\nexport const RightToLeft: Story = {\n  name: 'RTL',\n  args: {\n    rtl: true,\n    itemCount: 6,\n  },\n};\n\nexport const Debug: Story = {\n  name: 'Debug',\n  args: {\n    debug: true,\n    itemCount: 6,\n  },\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/MultipleLists/MultipleLists.tsx",
    "content": "import React, {memo, useCallback, useMemo, useRef, useState} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport {flushSync} from 'react-dom';\nimport {CollisionPriority} from '@dnd-kit/abstract';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\nimport {Feedback, PointerSensor, KeyboardSensor} from '@dnd-kit/dom';\nimport {Debug} from '@dnd-kit/dom/plugins/debug';\nimport {supportsViewTransition} from '@dnd-kit/dom/utilities';\nimport {DragDropEventHandlers} from '@dnd-kit/react';\n\nimport {\n  Actions,\n  Container,\n  Item,\n  Handle,\n  Remove,\n} from '../../components/index.ts';\nimport {createRange} from '@dnd-kit/stories-shared/utilities';\n\ninterface Props {\n  debug?: boolean;\n  grid?: boolean;\n  defaultItems?: Record;\n  columnStyle?: Record;\n  itemCount: number;\n  rtl?: boolean;\n  scrollable?: boolean;\n  vertical?: boolean;\n}\n\nconst sensors = [\n  PointerSensor.configure({\n    activatorElements(source) {\n      return [source.element, source.handle];\n    },\n  }),\n  KeyboardSensor,\n];\n\nexport function MultipleLists({\n  debug,\n  defaultItems,\n  grid,\n  itemCount,\n  columnStyle,\n  rtl,\n  scrollable,\n  vertical,\n}: Props) {\n  const [items, setItems] = useState(\n    defaultItems ?? {\n      A: createRange(itemCount).map((id) => `A${id}`),\n      B: createRange(itemCount).map((id) => `B${id}`),\n      C: createRange(itemCount).map((id) => `C${id}`),\n      D: [],\n    }\n  );\n  const [columns] = useState(Object.keys(items));\n  const snapshot = useRef(structuredClone(items));\n  const handleRemoveItem = useCallback((id: string, column: string) => {\n    const remove = () =>\n      setItems((items) => ({\n        ...items,\n        [column]: items[column].filter((item) => item !== id),\n      }));\n\n    if (supportsViewTransition(document)) {\n      document.startViewTransition(() => flushSync(remove));\n    } else {\n      remove();\n    }\n  }, []);\n\n  return (\n     [...defaults, Debug] : undefined}\n      sensors={sensors}\n      onDragStart={useCallback(() => {\n        snapshot.current = structuredClone(items);\n      }, [items])}\n      onDragOver={useCallback((event) => {\n        const {source} = event.operation;\n\n        if (source?.type === 'column') {\n          // We can rely on optimistic sorting for columns\n          return;\n        }\n\n        setItems((items) => move(items, event));\n      }, [])}\n      onDragEnd={useCallback((event) => {\n        if (event.canceled) {\n          setItems(snapshot.current);\n          return;\n        }\n      }, [])}\n    >\n      {rtl ?  : null}\n      \n        {columns.map((column, columnIndex) => {\n          const rows = items[column];\n\n          return (\n            \n          );\n        })}\n      \n    \n  );\n}\n\ninterface SortableItemProps {\n  id: string;\n  column: string;\n  index: number;\n  style?: React.CSSProperties;\n  onRemove?: (id: string, column: string) => void;\n}\n\nconst COLORS: Record = {\n  A: '#7193f1',\n  B: '#FF851B',\n  C: '#2ECC40',\n  D: '#ff3680',\n};\n\nconst SortableItem = memo(function SortableItem({\n  id,\n  column,\n  index,\n  style,\n  onRemove,\n}: PropsWithChildren) {\n  const group = column;\n  const {handleRef, ref, isDragging} = useSortable({\n    id,\n    group,\n    accept: 'item',\n    type: 'item',\n    plugins: [Feedback.configure({feedback: 'clone'})],\n    index,\n    data: {group},\n  });\n\n  return (\n    \n          {onRemove && !isDragging ? (\n             onRemove(id, column)} />\n          ) : null}\n          \n        \n      }\n      accentColor={COLORS[column]}\n      shadow={isDragging}\n      style={style}\n      transitionId={`sortable-${column}-${id}`}\n    >\n      {id}\n    \n  );\n});\n\ninterface SortableColumnProps {\n  columns: number;\n  id: string;\n  index: number;\n  scrollable?: boolean;\n  style?: React.CSSProperties;\n  rows: string[];\n  onRemove?: SortableItemProps['onRemove'];\n}\n\nconst SortableColumn = memo(function SortableColumn({\n  rows,\n  columns,\n  id,\n  index,\n  scrollable,\n  style,\n  onRemove,\n}: PropsWithChildren) {\n  const {handleRef, isDragging, ref} = useSortable({\n    id,\n    accept: ['column', 'item'],\n    collisionPriority: CollisionPriority.Low,\n    type: 'column',\n    index,\n  });\n  const actions = useMemo(() => {\n    return (\n      \n        \n      \n    );\n  }, [handleRef]);\n  const handleRemoveItem = useCallback(\n    (itemId: string) => {\n      onRemove?.(itemId, id);\n    },\n    [id, onRemove]\n  );\n\n  return (\n    \n      {rows.map((itemId, index) => (\n        \n      ))}\n    \n  );\n});\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/MultipleLists/MultipleListsApp.tsx",
    "content": "import React, {memo, useCallback, useRef, useState} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport {CollisionPriority} from '@dnd-kit/abstract';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\nimport {Feedback, PointerSensor, KeyboardSensor} from '@dnd-kit/dom';\nimport {DragDropEventHandlers} from '@dnd-kit/react';\n\nfunction createRange(length: number) {\n  return Array.from({length}, (_, i) => i + 1);\n}\n\nconst ITEM_COUNT = 6;\n\nconst sensors = [\n  PointerSensor.configure({\n    activatorElements(source) {\n      return [source.element, source.handle];\n    },\n  }),\n  KeyboardSensor,\n];\n\ninterface SortableItemProps {\n  id: string;\n  column: string;\n  index: number;\n  accentColor: string;\n}\n\nconst COLORS: Record = {\n  A: '#7193f1',\n  B: '#FF851B',\n  C: '#2ECC40',\n  D: '#ff3680',\n};\n\nconst SortableItem = memo(function SortableItem({\n  id,\n  column,\n  index,\n  accentColor,\n}: PropsWithChildren) {\n  const group = column;\n  const {handleRef, ref, isDragging} = useSortable({\n    id,\n    group,\n    accept: 'item',\n    type: 'item',\n    plugins: [Feedback.configure({feedback: 'clone'})],\n    index,\n    data: {group},\n  });\n\n  return (\n    \n      {id}\n      ;\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/MultipleLists/docs/examples/QuickStart.jsx",
    "content": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {move} from '@dnd-kit/helpers';\n\nimport {Column} from './Column';\nimport {Item} from './Item';\n\nconst styles = {display: 'inline-flex', flexDirection: 'row', gap: 20};\n\nexport function Example({style = styles}) {\n  const [items, setItems] = useState({\n    A: ['A0', 'A1', 'A2'],\n    B: ['B0', 'B1'],\n    C: [],\n  });\n\n  return (\n     {\n        setItems((items) => move(items, event));\n      }}\n    >\n      
\n        {Object.entries(items).map(([column, items]) => (\n          \n            {items.map((id, index) => (\n              \n            ))}\n          \n        ))}\n      
\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Quickstart.tsx",
    "content": "import {useSortable} from '@dnd-kit/react/sortable';\n\nexport function Sortable({id, index}: {id: number; index: number}) {\n  const {ref} = useSortable({id, index});\n\n  return 
  • Item {id}
    • ;\n}\n\nexport function QuickstartExample() {\n  const items = [1, 2, 3, 4];\n\n  return (\n    
      \n      {items.map((id, index) => (\n        \n      ))}\n    
    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Sortable.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport SortableApp from './SortableApp.tsx';\nimport sortableSource from './SortableApp.tsx?raw';\nimport {baseStyles, sortableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\nimport {QuickstartExample} from './Quickstart.tsx';\n\nimport docs from './docs/SortableDocs.mdx';\n\nconst meta: Meta = {\n  component: SortableApp,\n  title: 'React/Sortable',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      page: docs,\n    },\n    codesandbox: {\n      files: {\n        'src/App.tsx': sortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  name: 'Example',\n};\n\nexport const Quickstart: Story = {\n  name: 'Quickstart',\n  tags: ['hidden'],\n  render: () => ,\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/SortableApp.tsx",
    "content": "import React, {useRef, useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\n\nfunction Sortable({id, index}: {id: number; index: number}) {\n  const [element, setElement] = useState(null);\n  const handleRef = useRef(null);\n  const {isDragging} = useSortable({id, index, element, handle: handleRef});\n\n  return (\n    
  • \n      {id}\n      
    • \n  );\n}\n\nexport default function App() {\n  const [items, setItems] = useState(createRange(100));\n\n  return (\n     {\n        setItems((items) => move(items, event));\n      }}\n    >\n      
      \n        {items.map((id, index) => (\n          \n        ))}\n      
    \n    \n  );\n}\n\nfunction createRange(length: number) {\n  return Array.from({length}, (_, i) => i + 1);\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/SortableExample.tsx",
    "content": "import React, {useRef, useState, memo} from 'react';\nimport type {CSSProperties, PropsWithChildren} from 'react';\nimport type {\n  CollisionDetector,\n  Modifiers,\n  Plugins,\n  UniqueIdentifier,\n} from '@dnd-kit/abstract';\nimport {type SortableTransition} from '@dnd-kit/dom/sortable';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {directionBiased} from '@dnd-kit/collision';\nimport {move} from '@dnd-kit/helpers';\nimport {Debug} from '@dnd-kit/dom/plugins/debug';\n\nimport {Item, Handle} from '../components/index.ts';\nimport {createRange} from '@dnd-kit/stories-shared/utilities';\n\ninterface Props {\n  debug?: boolean;\n  dragHandle?: boolean;\n  disabled?: UniqueIdentifier[];\n  plugins?: Plugins;\n  modifiers?: Modifiers;\n  layout?: 'vertical' | 'horizontal' | 'grid';\n  transition?: SortableTransition;\n  itemCount?: number;\n  optimistic?: boolean;\n  collisionDetector?: CollisionDetector;\n  getItemStyle?(id: UniqueIdentifier, index: number): CSSProperties;\n}\n\nexport function SortableExample({\n  debug,\n  itemCount = 15,\n  collisionDetector,\n  disabled,\n  dragHandle,\n  plugins,\n  layout = 'vertical',\n  optimistic = true,\n  modifiers,\n  transition,\n  getItemStyle,\n}: Props) {\n  const [items, setItems] = useState(createRange(itemCount));\n\n  return (\n     [Debug, ...defaults] : undefined}\n      modifiers={modifiers}\n      onDragOver={(event) => {\n        if (optimistic) return;\n\n        setItems((items) => move(items, event));\n      }}\n      onDragEnd={(event) => {\n        setItems((items) => move(items, event));\n      }}\n    >\n      \n        {items.map((id, index) => (\n          \n        ))}\n      \n    \n  );\n}\n\ninterface SortableProps {\n  id: UniqueIdentifier;\n  index: number;\n  collisionDetector?: CollisionDetector;\n  disabled?: boolean;\n  dragHandle?: boolean;\n  plugins?: Plugins;\n  optimistic?: boolean;\n  transition?: SortableTransition;\n  style?: React.CSSProperties;\n}\n\nconst SortableItem = memo(function SortableItem({\n  id,\n  index,\n  collisionDetector = directionBiased,\n  disabled,\n  dragHandle,\n  plugins,\n  transition,\n  style,\n}: PropsWithChildren) {\n  const [element, setElement] = useState(null);\n  const handleRef = useRef(null);\n  const {isDragging} = useSortable({\n    id,\n    index,\n    element,\n    plugins,\n    transition,\n    handle: handleRef,\n    disabled,\n    collisionDetector,\n  });\n\n  return (\n     : null}\n      shadow={isDragging}\n      style={style}\n    >\n      {id}\n    \n  );\n});\n\nfunction Wrapper({\n  layout,\n  children,\n}: PropsWithChildren<{layout: 'vertical' | 'horizontal' | 'grid'}>) {\n  return 
    {children}
    ;\n}\n\nfunction getWrapperStyles(\n  layout: 'vertical' | 'horizontal' | 'grid'\n): CSSProperties {\n  const baseStyles: CSSProperties = {\n    gap: 18,\n    padding: '0 30px',\n  };\n\n  switch (layout) {\n    case 'grid':\n      return {\n        ...baseStyles,\n        display: 'grid',\n        maxWidth: 900,\n        marginInline: 'auto',\n        gridTemplateColumns: 'repeat(auto-fill, 150px)',\n        gridAutoFlow: 'dense',\n        gridAutoRows: '150px',\n        justifyContent: 'center',\n      };\n    case 'horizontal':\n      return {\n        ...baseStyles,\n        display: 'inline-flex',\n        flexDirection: 'row',\n        alignItems: 'stretch',\n        height: 180,\n      };\n    case 'vertical':\n      return {\n        ...baseStyles,\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n      };\n  }\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Table/Table.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {TableExample} from './TableExample.tsx';\n\nconst meta: Meta = {\n  title: 'React/Sortable/Table',\n  component: TableExample,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  name: 'Example',\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Table/TableExample.tsx",
    "content": "import React, {useRef, useState} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport {RestrictToHorizontalAxis} from '@dnd-kit/abstract/modifiers';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\n\nimport {Handle} from '../../components/index.ts';\n\ntype ColumnKey = 'name' | 'role' | 'email' | 'status';\n\ninterface Column {\n  id: ColumnKey;\n  label: string;\n}\n\nconst initialColumns: Column[] = [\n  {id: 'name', label: 'Name'},\n  {id: 'role', label: 'Role'},\n  {id: 'email', label: 'Email'},\n  {id: 'status', label: 'Status'},\n];\n\ninterface RowData {\n  id: UniqueIdentifier;\n  name: string;\n  role: string;\n  email: string;\n  status: string;\n}\n\nconst initialData: RowData[] = [\n  {\n    id: 1,\n    name: 'Alice Johnson',\n    role: 'Engineer',\n    email: 'alice@example.com',\n    status: 'Active',\n  },\n  {\n    id: 2,\n    name: 'Bob Smith',\n    role: 'Designer',\n    email: 'bob@example.com',\n    status: 'Active',\n  },\n  {\n    id: 3,\n    name: 'Charlie Brown',\n    role: 'Manager',\n    email: 'charlie@example.com',\n    status: 'Away',\n  },\n  {\n    id: 4,\n    name: 'Diana Ross',\n    role: 'Engineer',\n    email: 'diana@example.com',\n    status: 'Active',\n  },\n  {\n    id: 5,\n    name: 'Eve Williams',\n    role: 'Designer',\n    email: 'eve@example.com',\n    status: 'Offline',\n  },\n  {\n    id: 6,\n    name: 'Frank Miller',\n    role: 'Engineer',\n    email: 'frank@example.com',\n    status: 'Active',\n  },\n  {\n    id: 7,\n    name: 'Grace Lee',\n    role: 'Manager',\n    email: 'grace@example.com',\n    status: 'Away',\n  },\n  {\n    id: 8,\n    name: 'Hank Davis',\n    role: 'Designer',\n    email: 'hank@example.com',\n    status: 'Active',\n  },\n];\n\nexport function TableExample() {\n  const [rows, setRows] = useState(initialData);\n  const [columns, setColumns] = useState(initialColumns);\n  const initialOrder = useRef({\n    columns,\n    rows,\n  });\n\n  return (\n     {\n        initialOrder.current = {\n          columns,\n          rows,\n        };\n      }}\n      onDragOver={(event) => {\n        const {source} = event.operation;\n\n        if (source?.type === 'column') {\n          setColumns((columns) => move(columns, event));\n        } else {\n          setRows((rows) => move(rows, event));\n        }\n      }}\n      onDragEnd={(event) => {\n        if (event.canceled) {\n          setColumns(initialOrder.current.columns);\n          setRows(initialOrder.current.rows);\n        }\n      }}\n    >\n      \n        \n          \n            \n              \n          \n          \n            {rows.map((row, index) => (\n              \n            ))}\n          \n        
    \n              {columns.map((column, index) => (\n                \n              ))}\n            
    \n      \n    \n  );\n}\n\ninterface SortableColumnProps {\n  column: Column;\n  index: number;\n}\n\nfunction SortableColumn({column, index}: SortableColumnProps) {\n  const {ref, isDragging} = useSortable({\n    id: column.id,\n    index,\n    type: 'column',\n    accept: 'column',\n    modifiers: [RestrictToHorizontalAxis],\n  });\n\n  return (\n    \n      {column.label}\n    \n  );\n}\n\ninterface SortableRowProps {\n  row: RowData;\n  columns: Column[];\n  index: number;\n  lastRow?: boolean;\n}\n\nfunction SortableRow({row, columns, index, lastRow}: SortableRowProps) {\n  const {ref, handleRef, isDragging} = useSortable({\n    id: row.id,\n    index,\n    type: 'row',\n    accept: 'row',\n  });\n\n  return (\n    \n      \n        \n      \n      {columns.map((column) => (\n        \n          {column.id === 'status' ? (\n            \n              {row[column.id]}\n            \n          ) : (\n            row[column.id]\n          )}\n        \n      ))}\n    \n  );\n}\n\nconst tableStyles: React.CSSProperties = {\n  width: '100%',\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: 'system-ui, sans-serif',\n  fontSize: 14,\n};\n\nconst thStyles: React.CSSProperties = {\n  textAlign: 'left',\n  padding: '10px 16px',\n  borderBottom: '2px solid #e2e8f0',\n  color: '#64748b',\n  fontWeight: 600,\n  fontSize: 12,\n  textTransform: 'uppercase',\n  letterSpacing: '0.05em',\n};\n\nconst trStyles: React.CSSProperties = {\n  backgroundColor: '#fff',\n};\n\nconst tdStyles: React.CSSProperties = {\n  padding: '12px 16px',\n  borderBottom: '1px solid #e2e8f0',\n};\n\nconst tdLastRowStyles: React.CSSProperties = {\n  padding: '12px 16px',\n};\n\nfunction getStatusStyles(status: string): React.CSSProperties {\n  const colors: Record = {\n    Active: {bg: '#dcfce7', text: '#166534'},\n    Away: {bg: '#fef9c3', text: '#854d0e'},\n    Offline: {bg: '#f1f5f9', text: '#475569'},\n  };\n\n  const {bg, text} = colors[status] ?? colors.Offline;\n\n  return {\n    padding: '2px 10px',\n    borderRadius: 12,\n    fontSize: 12,\n    fontWeight: 500,\n    backgroundColor: bg,\n    color: text,\n  };\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Transformed/Transformed.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {TransformedExample} from './TransformedExample';\n\nconst meta: Meta = {\n  title: 'React/Sortable/Transformed',\n  component: TransformedExample,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const WithoutOverlay: Story = {\n  name: 'Without overlay',\n  args: {\n    overlay: false,\n  },\n};\n\nexport const WithOverlay: Story = {\n  name: 'With overlay',\n  args: {\n    overlay: true,\n  },\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Transformed/TransformedExample.tsx",
    "content": "import React, {useState} from 'react';\nimport type {CSSProperties} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport {DragDropProvider, DragOverlay} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {Debug} from '@dnd-kit/dom/plugins/debug';\nimport {move} from '@dnd-kit/helpers';\n\nimport {Item} from '../../components/index.ts';\nimport {createRange} from '@dnd-kit/stories-shared/utilities';\n\nconst ITEM_HEIGHT = 62;\n\ninterface Props {\n  debug?: boolean;\n  overlay?: boolean;\n}\n\n/**\n * Sortable list where items are absolutely positioned using CSS\n * `transform: translateY()`. This mimics the positioning strategy used by\n * virtualization libraries like react-window v2 and is useful for testing\n * that @dnd-kit correctly handles elements with pre-existing CSS transforms.\n */\nexport function TransformedExample({debug, overlay}: Props) {\n  const [items, setItems] = useState(createRange(10));\n\n  return (\n     [Debug, ...defaults] : undefined}\n      onDragOver={(event) => {\n        setItems((items) => move(items, event));\n      }}\n      onDragEnd={(event) => {\n        setItems((items) => move(items, event));\n      }}\n    >\n      \n        {items.map((id, index) => (\n          \n        ))}\n      \n      {overlay ? (\n        \n          {(source) => (\n            {source.id}\n          )}\n        \n      ) : null}\n    \n  );\n}\n\ninterface TransformedItemProps {\n  id: UniqueIdentifier;\n  index: number;\n  overlay?: boolean;\n  style: CSSProperties;\n}\n\nfunction TransformedItem({id, index, overlay, style}: TransformedItemProps) {\n  const {isDragSource, isDragging, ref} = useSortable({\n    id,\n    index,\n  });\n\n  return (\n    }\n      style={{\n        ...style,\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        boxSizing: 'border-box',\n      }}\n      data-index={index}\n      shadow={!overlay && isDragging}\n      aria-hidden={overlay ? isDragSource : undefined}\n    >\n      {id}\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Tree/Tree.module.css",
    "content": ".Tree {\n  max-width: 600px;\n  padding: 10px;\n  margin: 10% auto 0px;\n}\n\n.TreeItem {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 10px;\n  gap: 10px;\n  background-color: #fff;\n  border: 1px solid #dedede;\n  margin-bottom: -1px;\n  color: #222;\n  box-sizing: border-box;\n\n  &:first-child {\n    border-top-left-radius: 6px;\n    border-top-right-radius: 6px;\n  }\n\n  &:last-child {\n    border-bottom-left-radius: 6px;\n    border-bottom-right-radius: 6px;\n  }\n\n  &[data-overlay] {\n    width: max-content !important;\n    padding-right: 24px;\n    border-radius: 6px;\n    box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);\n  }\n}\n\n.TreeItem[aria-hidden=\"true\"] {\n  opacity: 0.4;\n\n  .Handle {\n    visibility: hidden;\n  }\n}\n\n.Action {\n  margin-left: auto;\n}\n\n.Badge {\n  position: absolute;\n  top: -10px;\n  right: -10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background-color: #2389ff;\n  font-size: 0.8rem;\n  font-weight: 500;\n  color: #fff;\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Tree/Tree.stories.tsx",
    "content": "import React, {useState} from 'react';\nimport type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {Tree} from './Tree';\nimport type {Item} from './types';\n\nconst meta: Meta = {\n  title: 'React/Sortable/Tree',\n  component: Tree,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  name: 'Example',\n  render: () => {\n    const [items, setItems] = useState([\n      {\n        id: 'Home',\n        children: [],\n      },\n      {\n        id: 'Collections',\n        children: [\n          {id: 'Spring', children: []},\n          {id: 'Summer', children: []},\n          {id: 'Fall', children: []},\n          {id: 'Winter', children: []},\n        ],\n      },\n      {\n        id: 'About Us',\n        children: [],\n      },\n      {\n        id: 'My Account',\n        children: [\n          {id: 'Addresses', children: []},\n          {id: 'Order History', children: []},\n        ],\n      },\n    ]);\n\n    return ;\n  },\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Tree/Tree.tsx",
    "content": "import {useRef, useState} from 'react';\nimport {DragDropProvider, DragOverlay} from '@dnd-kit/react';\nimport {isKeyboardEvent} from '@dnd-kit/dom/utilities';\nimport {move} from '@dnd-kit/helpers';\n\nimport {FlattenedItem, type Item} from './types.js';\nimport {\n  flattenTree,\n  buildTree,\n  getProjection,\n  getDragDepth,\n  getDescendants,\n} from './utilities.js';\nimport {TreeItem} from './TreeItem.js';\nimport {TreeItemOverlay} from './TreeItemOverlay.js';\nimport styles from './Tree.module.css';\n\ninterface Props {\n  items: Item[];\n  indentation?: number;\n  onChange(items: Item[]): void;\n}\n\nexport function Tree({items, indentation = 50, onChange}: Props) {\n  const [flattenedItems, setFlattenedItems] = useState(() =>\n    flattenTree(items)\n  );\n  const initialDepth = useRef(0);\n  const sourceChildren = useRef([]);\n\n  return (\n     {\n        const {source} = event.operation;\n\n        if (!source) return;\n\n        const {depth} = flattenedItems.find(({id}) => id === source.id)!;\n\n        // Store the source item's initial depth for later use\n        initialDepth.current = depth;\n\n        setFlattenedItems((flattenedItems) => {\n          sourceChildren.current = [];\n\n          // Get all descendants of the source item\n          const descendants = getDescendants(flattenedItems, source.id);\n\n          return flattenedItems.filter((item) => {\n            if (descendants.has(item.id)) {\n              sourceChildren.current = [...sourceChildren.current, item];\n              return false;\n            }\n\n            return true;\n          });\n        });\n\n        initialDepth.current = depth;\n      }}\n      onDragOver={(event, manager) => {\n        const {source, target} = event.operation;\n\n        event.preventDefault();\n\n        if (source && target && source.id !== target.id) {\n          setFlattenedItems((flattenedItems) => {\n            const offsetLeft = manager.dragOperation.transform.x;\n            const dragDepth = getDragDepth(offsetLeft, indentation);\n            const projectedDepth = initialDepth.current + dragDepth;\n\n            const {depth, parentId} = getProjection(\n              flattenedItems,\n              target.id,\n              projectedDepth\n            );\n\n            const sortedItems = move(flattenedItems, event);\n            const newItems = sortedItems.map((item) =>\n              item.id === source.id ? {...item, depth, parentId} : item\n            );\n\n            return newItems;\n          });\n        }\n      }}\n      onDragMove={(event, manager) => {\n        if (event.defaultPrevented) {\n          return;\n        }\n\n        const {source, target} = event.operation;\n\n        if (source && target) {\n          const keyboard = isKeyboardEvent(event.operation.activatorEvent);\n          const currentDepth = source.data!.depth ?? 0;\n          let keyboardDepth;\n\n          if (keyboard) {\n            const isHorizontal = event.by?.x !== 0 && event.by?.y === 0;\n\n            if (isHorizontal) {\n              event.preventDefault();\n\n              keyboardDepth = currentDepth + Math.sign(event.by!.x);\n            }\n          }\n\n          const offsetLeft = manager.dragOperation.transform.x;\n          const dragDepth = getDragDepth(offsetLeft, indentation);\n\n          const projectedDepth =\n            keyboardDepth ?? initialDepth.current + dragDepth;\n\n          const {depth, parentId} = getProjection(\n            flattenedItems,\n            source.id,\n            projectedDepth\n          );\n\n          if (keyboard) {\n            if (currentDepth !== depth) {\n              const offset = indentation * (depth - currentDepth);\n\n              manager.actions.move({\n                by: {x: offset, y: 0},\n                propagate: false,\n              });\n            }\n          }\n\n          if (\n            source.data!.depth !== depth ||\n            source.data!.parentId !== parentId\n          ) {\n            setFlattenedItems((flattenedItems) => {\n              return flattenedItems.map((item) =>\n                item.id === source.id ? {...item, depth, parentId} : item\n              );\n            });\n          }\n        }\n      }}\n      onDragEnd={(event) => {\n        if (event.canceled) {\n          return setFlattenedItems(flattenTree(items));\n        }\n\n        const updatedTree = buildTree([\n          ...flattenedItems,\n          ...sourceChildren.current,\n        ]);\n\n        setFlattenedItems(flattenTree(updatedTree));\n\n        onChange(updatedTree);\n      }}\n    >\n      
      \n        {flattenedItems.map((item, index) => (\n           {\n              const newItems = flattenedItems.filter(({id}) => id !== item.id);\n              const tree = buildTree(newItems);\n\n              setFlattenedItems(flattenTree(tree));\n              onChange(tree);\n            }}\n          />\n        ))}\n      
    \n      \n        {(source) => (\n          \n        )}\n      \n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Tree/TreeItem.tsx",
    "content": "import {useSortable} from '@dnd-kit/react/sortable';\n\nimport {Handle} from '../../components/Handle/Handle.tsx';\nimport {Remove} from '../../components/Actions/Remove.tsx';\n\nimport {FlattenedItem} from './types.ts';\nimport styles from './Tree.module.css';\n\nexport interface Props extends FlattenedItem {\n  onRemove?(): void;\n}\n\nconst INDENTATION = 50;\n\nconst config = {\n  alignment: {\n    x: 'start',\n    y: 'center',\n  },\n  transition: {\n    idle: true,\n  },\n} as const;\n\nexport function TreeItem({depth, id, index, parentId, onRemove}: Props) {\n  const {ref, handleRef, isDragSource} = useSortable({\n    ...config,\n    id,\n    index,\n    data: {\n      depth,\n      parentId,\n    },\n  });\n\n  return (\n    \n      \n        \n      \n      {id}\n      {onRemove && (\n        
    \n          \n        
    \n      )}\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Tree/TreeItemOverlay.tsx",
    "content": "import type {UniqueIdentifier} from '@dnd-kit/abstract';\n\nimport {Handle} from '../../components/Handle/Handle.tsx';\nimport styles from './Tree.module.css';\n\ninterface Props {\n  id: UniqueIdentifier;\n  count: number;\n}\n\nexport function TreeItemOverlay({id, count}: Props) {\n  return (\n    
    \n      \n      {id}\n      {count > 0 ? {count} : null}\n    
    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Tree/types.ts",
    "content": "export interface Item {\n  id: string;\n  children: Item[];\n  collapsed?: boolean;\n}\n\nexport interface FlattenedItem extends Item {\n  parentId: string | null;\n  depth: number;\n  index: number;\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Tree/utilities.ts",
    "content": "import {UniqueIdentifier} from '@dnd-kit/abstract';\n\nimport type {Item, FlattenedItem} from './types.ts';\n\nexport function flattenTree(\n  items: Item[],\n  parentId: string | null = null,\n  depth = 0\n): FlattenedItem[] {\n  return items.reduce((acc, item, index) => {\n    return [\n      ...acc,\n      {...item, parentId, depth, index},\n      ...flattenTree(item.children, item.id, depth + 1),\n    ];\n  }, []);\n}\n\nexport function buildTree(flattenedItems: FlattenedItem[]): Item[] {\n  const root: Item = {id: 'root', children: []};\n  const nodes: Record = {[root.id]: root};\n  const items = flattenedItems.map((item) => ({...item, children: []}));\n\n  for (const item of items) {\n    const {id, children} = item;\n    const parentId = item.parentId ?? root.id;\n    const parent = nodes[parentId] ?? items.find(({id}) => id === parentId);\n\n    if (!parent) continue;\n\n    nodes[id] = {id, children};\n    parent.children.push(item);\n  }\n\n  return root.children;\n}\n\nexport function getDragDepth(offset: number, indentationWidth: number) {\n  return Math.round(offset / indentationWidth);\n}\n\nexport function getProjection(\n  items: FlattenedItem[],\n  targetId: UniqueIdentifier,\n  projectedDepth: number\n) {\n  const targetItemIndex = items.findIndex(({id}) => id === targetId);\n  const previousItem = items[targetItemIndex - 1];\n  const targetItem = items[targetItemIndex];\n  const nextItem = items[targetItemIndex + 1];\n  const maxDepth = getMaxDepth(targetItem, previousItem);\n  const minDepth = getMinDepth(nextItem);\n  let depth = projectedDepth;\n\n  if (projectedDepth >= maxDepth) {\n    depth = maxDepth;\n  } else if (projectedDepth < minDepth) {\n    depth = minDepth;\n  }\n\n  return {depth, maxDepth, minDepth, parentId: getParentId()};\n\n  function getParentId() {\n    if (depth === 0 || !previousItem) {\n      return null;\n    }\n\n    if (depth === previousItem.depth) {\n      return previousItem.parentId;\n    }\n\n    if (depth > previousItem.depth) {\n      return previousItem.id;\n    }\n\n    const newParent = items\n      .slice(0, targetItemIndex)\n      .reverse()\n      .find((item) => item.depth === depth)?.parentId;\n\n    return newParent ?? null;\n  }\n}\n\nfunction getMaxDepth(\n  targetItem: FlattenedItem,\n  previousItem: FlattenedItem | undefined\n) {\n  if (!previousItem) return 0;\n\n  return Math.min(targetItem.depth + 1, previousItem.depth + 1);\n}\n\nfunction getMinDepth(nextItem: FlattenedItem) {\n  return nextItem ? nextItem.depth : 0;\n}\n\nexport function getDescendants(\n  items: FlattenedItem[],\n  parentId: UniqueIdentifier\n): Set {\n  const directChildren = items.filter((item) => item.parentId === parentId);\n\n  return directChildren.reduce((descendants, child) => {\n    return new Set([\n      ...descendants,\n      child.id,\n      ...getDescendants(items, child.id),\n    ]);\n  }, new Set());\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Vertical/AutoScrollExample.tsx",
    "content": "import React, {useState, memo} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport type {Axis} from '@dnd-kit/geometry';\nimport {AutoScroller} from '@dnd-kit/dom';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\nimport {directionBiased} from '@dnd-kit/collision';\n\nimport {Item} from '../../components/index.ts';\nimport {createRange} from '@dnd-kit/stories-shared/utilities';\n\ninterface Props {\n  itemCount?: number;\n  acceleration?: number;\n  threshold?: number | Record;\n}\n\nexport function AutoScrollExample({\n  itemCount = 100,\n  acceleration,\n  threshold,\n}: Props) {\n  const [items, setItems] = useState(createRange(itemCount));\n\n  const plugins =\n    acceleration != null || threshold != null\n      ? (defaults: any) => [\n          ...defaults,\n          AutoScroller.configure({acceleration, threshold}),\n        ]\n      : undefined;\n\n  return (\n     {\n        setItems((items) => move(items, event));\n      }}\n    >\n      
    \n        {items.map((id, index) => (\n          \n        ))}\n      
    \n    \n  );\n}\n\nconst SortableItem = memo(function SortableItem({\n  id,\n  index,\n}: PropsWithChildren<{id: number; index: number}>) {\n  const [element, setElement] = useState(null);\n  const {isDragging} = useSortable({\n    id,\n    index,\n    element,\n    collisionDetector: directionBiased,\n  });\n\n  return (\n    \n      {id}\n    \n  );\n});\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Vertical/Vertical.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\nimport {RestrictToVerticalAxis} from '@dnd-kit/abstract/modifiers';\nimport {Feedback} from '@dnd-kit/dom';\n\nimport {SortableExample} from '../SortableExample';\nimport {AutoScrollExample} from './AutoScrollExample';\n\nconst meta: Meta = {\n  title: 'React/Sortable/Vertical list',\n  component: SortableExample,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  args: {\n    debug: false,\n    itemCount: 100,\n  },\n};\n\nexport const WithDragHandle: Story = {\n  name: 'Drag handle',\n  args: {\n    debug: false,\n    dragHandle: true,\n    itemCount: 100,\n  },\n};\n\nexport const VariableHeights: Story = {\n  name: 'Variable heights',\n  args: {\n    debug: false,\n    getItemStyle(id: number) {\n      const heights: Record = {\n        1: 100,\n        3: 150,\n        5: 200,\n        8: 100,\n        12: 150,\n      };\n\n      return {\n        height: heights[id],\n      };\n    },\n  },\n};\n\nexport const DynamicHeights: Story = {\n  name: 'Dynamic heights',\n  args: {\n    debug: false,\n    optimistic: false,\n    getItemStyle(_: number, index: number) {\n      const heights: Record = {\n        1: 100,\n        3: 150,\n        5: 200,\n        8: 100,\n        12: 150,\n      };\n\n      return {\n        height: heights[index],\n      };\n    },\n  },\n};\n\nexport const Clone: Story = {\n  name: 'Clone feedback',\n  args: {\n    debug: false,\n    plugins: [Feedback.configure({feedback: 'clone'})],\n  },\n};\n\nexport const RestrictAxis: Story = {\n  name: 'Restrict axis',\n  args: {\n    debug: false,\n    modifiers: [RestrictToVerticalAxis],\n  },\n};\n\nexport const DisabledItems: Story = {\n  name: 'Disabled items',\n  args: {\n    debug: false,\n    disabled: [2, 3, 8, 12],\n  },\n};\n\nexport const CustomTransition: Story = {\n  name: 'Custom transition',\n  args: {\n    debug: false,\n    transition: {\n      duration: 300,\n      easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n    },\n  },\n};\n\nexport const DisableTransition: Story = {\n  name: 'Disable transition',\n  args: {\n    debug: false,\n    transition: {\n      duration: 0,\n    },\n  },\n};\n\nexport const Debug: Story = {\n  name: 'Debug',\n  args: {\n    debug: true,\n  },\n};\n\ntype AutoScrollStory = StoryObj;\n\nexport const AutoScrollDisabled: AutoScrollStory = {\n  name: 'Auto-scroll disabled',\n  render: (args: React.ComponentProps) => ,\n  args: {\n    itemCount: 100,\n    threshold: 0,\n  },\n};\n\nexport const AutoScrollCustomSpeed: AutoScrollStory = {\n  name: 'Auto-scroll custom speed',\n  render: (args: React.ComponentProps) => ,\n  args: {\n    itemCount: 100,\n    acceleration: 50,\n  },\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Virtualized/ReactTinyVirtualListExample.tsx",
    "content": "import React, {useRef, useState} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {Debug} from '@dnd-kit/dom/plugins/debug';\nimport {move} from '@dnd-kit/helpers';\nimport VirtualList from 'react-tiny-virtual-list';\n\nimport {Item, Handle} from '../../components';\nimport {createRange} from '@dnd-kit/stories-shared/utilities';\n\ninterface Props {\n  debug?: boolean;\n}\n\nexport function ReactTinyVirtualListExample({debug}: Props) {\n  const [items, setItems] = useState(createRange(1000));\n  const snapshot = useRef(structuredClone(items));\n\n  return (\n     [Debug, ...defaults] : undefined}\n      onDragStart={() => {\n        snapshot.current = structuredClone(items);\n      }}\n      onDragOver={(event) => {\n        setItems((items) => move(items, event));\n      }}\n      onDragEnd={(event) => {\n        if (event.canceled) {\n          setItems(snapshot.current);\n        }\n      }}\n    >\n       {\n          const id = items[index];\n\n          return ;\n        }}\n      />\n    \n  );\n}\n\ninterface SortableProps {\n  id: UniqueIdentifier;\n  index: number;\n  style: React.CSSProperties;\n}\n\nfunction Sortable({id, index, style}: SortableProps) {\n  const {isDragging, ref, handleRef} = useSortable({\n    id,\n    index,\n  });\n\n  return (\n    \n      }\n        data-index={index}\n        shadow={isDragging}\n      >\n        {id}\n      \n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx",
    "content": "import React, {forwardRef, useLayoutEffect, useRef, useState} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {Feedback} from '@dnd-kit/dom';\nimport {Debug} from '@dnd-kit/dom/plugins/debug';\nimport {move} from '@dnd-kit/helpers';\nimport {useWindowVirtualizer} from '@tanstack/react-virtual';\n\nimport {Item, Handle} from '../../components';\nimport {createRange} from '@dnd-kit/stories-shared/utilities';\n\ninterface Props {\n  debug?: boolean;\n}\n\nexport function ReactVirtualExample({debug}: Props) {\n  const [items, setItems] = useState(createRange(1000));\n  const snapshot = useRef(structuredClone(items));\n\n  const parentRef = React.useRef(null);\n  const parentOffsetRef = React.useRef(0);\n\n  const virtualizer = useWindowVirtualizer({\n    count: items.length,\n    estimateSize: () => 72,\n    scrollMargin: parentOffsetRef.current,\n    getItemKey: (index) => items[index],\n  });\n  const virtualItems = virtualizer.getVirtualItems();\n\n  useLayoutEffect(() => {\n    parentOffsetRef.current = parentRef.current?.offsetTop ?? 0;\n  }, []);\n\n  return (\n     [Debug, ...defaults] : undefined}\n      onDragStart={() => {\n        snapshot.current = structuredClone(items);\n      }}\n      onDragOver={(event) => {\n        setItems((items) => move(items, event));\n      }}\n      onDragEnd={(event) => {\n        if (event.canceled) {\n          setItems(snapshot.current);\n        }\n      }}\n    >\n      
    \n        \n          \n            {virtualItems.map(({key, index}) => {\n              return (\n                \n              );\n            })}\n          
    \n        \n      \n    \n  );\n}\n\ninterface SortableProps {\n  id: UniqueIdentifier;\n  index: number;\n}\n\nconst Sortable = forwardRef>(\n  function Sortable({id, index}, ref) {\n    const [element, setElement] = useState(null);\n    const handleRef = useRef(null);\n\n    const {isDragging} = useSortable({\n      id,\n      index,\n      element,\n      plugins: [Feedback.configure({feedback: 'clone'})],\n      handle: handleRef,\n    });\n\n    return (\n      }\n        data-index={index}\n        shadow={isDragging}\n      >\n        {id}\n      \n    );\n  }\n);\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Virtualized/ReactWindowExample.tsx",
    "content": "import React, {useRef, useEffect, useState} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {Debug} from '@dnd-kit/dom/plugins/debug';\nimport {move} from '@dnd-kit/helpers';\nimport {FixedSizeList as List} from 'react-window';\n\nimport {Item, Handle} from '../../components';\nimport {createRange} from '@dnd-kit/stories-shared/utilities';\n\ninterface Props {\n  debug?: boolean;\n}\n\nexport function ReactWindowExample({debug}: Props) {\n  const [items, setItems] = useState(createRange(1000));\n  const snapshot = useRef(structuredClone(items));\n\n  return (\n     [Debug, ...defaults] : undefined}\n      onDragStart={() => {\n        snapshot.current = structuredClone(items);\n      }}\n      onDragOver={(event) => {\n        setItems((items) => move(items, event));\n      }}\n      onDragEnd={(event) => {\n        if (event.canceled) {\n          setItems(snapshot.current);\n        }\n      }}\n    >\n       items[index]}\n        style={{margin: '0 auto'}}\n      >\n        {Row}\n      \n    \n  );\n}\n\nfunction Row({\n  data,\n  index,\n  style,\n}: {\n  data: UniqueIdentifier[];\n  index: number;\n  style: React.CSSProperties;\n}) {\n  return ;\n}\n\ninterface SortableProps {\n  id: UniqueIdentifier;\n  index: number;\n  style: React.CSSProperties;\n}\n\nfunction Sortable({id, index, style}: SortableProps) {\n  const {isDragging, ref, handleRef} = useSortable({\n    id,\n    index,\n  });\n\n  return (\n    \n      }\n        data-index={index}\n        shadow={isDragging}\n      >\n        {id}\n      \n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/Virtualized/Virtualized.stories.tsx",
    "content": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {ReactWindowExample} from './ReactWindowExample';\nimport {ReactVirtualExample} from './ReactVirtualExample';\nimport {ReactTinyVirtualListExample} from './ReactTinyVirtualListExample';\n\nconst meta: Meta = {\n  title: 'React/Sortable/Virtualized',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const ReactWindow: Story = {\n  name: 'react-window',\n  render: ReactWindowExample,\n};\n\nexport const ReactTinyVirtualList: Story = {\n  name: 'react-tiny-virtual-list',\n  render: ReactTinyVirtualListExample,\n};\n\nexport const ReactVirtual: Story = {\n  name: 'react-virtual',\n  render: ReactVirtualExample,\n};\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/docs/SortableDocs.mdx",
    "content": "import {Code, Preview} from '../../../components';\nimport {Example as Hero} from '../Sortable.stories';\nimport BasicSetupSource from '../SortableExample?raw';\nimport {Example} from './examples/Example';\nimport {Example as UncontrolledExample} from './examples/UncontrolledExample';\nimport UncontrolledExampleSource from './examples/UncontrolledExample?raw';\nimport ControlledExampleSource from './examples/ControlledExample?raw';\nimport image from './assets/useSortable.png';\n\n# Sortable\n\nReorder elements in a list or across multiple lists.\n\n\n\n## Installation\n\nBefore getting started, make sure to install the `@dnd-kit/react` package:\n\n```bash\nnpm install @dnd-kit/react\n```\n\n## Getting started\n\nThe fastest way to get started is to the `useSortable` hook and provide it an `id` and an `index`:\n\n  \n\n\nThis will create an uncontrolled sortable list that will automatically update the order of the items in the DOM when they are dragged and dropped.\n\nTo create a controlled sortable list and update the order of the items in React, we can listen to the `onDragEnd` event emitted by the `` component:\n\n  \n\n\nTo create a vertical list, we can update the of the `flex-direction` style property to `column`, without any other configuration changes.\n\n\n  \n\n\nTo create a grid list, we can update the of the `display` style property to `grid`, and set the `grid-template-columns` property to the desired number of columns.\n\n\n  \n\n\n## Architecture\n\nThe sortable plugin composes the `Draggable` and `Droppable` items to provide a simple API for building sortable interfaces.\n\nThe `useSortable` hook is an abstraction that composes the `useDroppable` and `useDraggable` hooks:\n\n\n\nAs a result, the `useSortable` hook accepts all of the props that the `useDraggable` and `useDroppable` hooks accept.\n\n## Modifiers\n\nBecause the `useSortable` hook invokes the `useDraggable` hook under the hood, we can pass local `modifiers` to the `useSortable` hook just as we would with the `useDraggable` hook:\n\n```jsx\nconst sortable = useSortable({\n  id,\n  modifiers: [RestrictToVerticalAxis],\n});\n```\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/docs/examples/ControlledExample.jsx",
    "content": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\n\nconst styles = {display: 'inline-flex', flexDirection: 'row', gap: 20};\n\nexport function ControlledExample() {\n  const [items, setItems] = useState([0, 1, 2, 3]);\n\n  return (\n     {\n        setItems((items) => move(items, event));\n      }}\n    >\n      
    \n        {items.map((id, index) => (\n          \n        ))}\n      
    \n        \n  );\n}\n\nfunction Sortable({id, index}) {\n  const {ref} = useSortable({id, index});\n\n  return ;\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/docs/examples/Example.jsx",
    "content": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\n\nconst styles = {display: 'inline-flex', flexDirection: 'row', gap: 20};\n\nexport function Example({style = styles}) {\n  const [items, setItems] = useState([0, 1, 2, 3]);\n\n  return (\n     {\n        setItems((items) => move(items, event));\n      }}\n    >\n      
    \n        {items.map((id, index) => (\n          \n        ))}\n      
    \n    \n  );\n}\n\nfunction Sortable({id, index}) {\n  const {ref} = useSortable({id, index});\n\n  return ;\n}\n"
  },
  {
    "path": "apps/stories/stories/react/Sortable/docs/examples/UncontrolledExample.jsx",
    "content": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {move} from '@dnd-kit/helpers';\n\nconst styles = {display: 'inline-flex', flexDirection: 'row', gap: 20};\n\nexport function Example() {\n  const items = [0, 1, 2, 3];\n\n  return (\n    
    \n      {items.map((id, index) => (\n        \n      ))}\n    
    \n  );\n}\n\nfunction Sortable({id, index}) {\n  const {ref} = useSortable({id, index});\n\n  return ;\n}\n"
  },
  {
    "path": "apps/stories/stories/react/components/Actions/Action.tsx",
    "content": "import React, {forwardRef, CSSProperties, Ref} from 'react';\n\nimport {classNames} from '@dnd-kit/stories-shared/utilities';\n\nimport styles from './Actions.module.css';\n\nexport interface Props extends React.HTMLAttributes {\n  variant?: 'light' | 'dark' | 'destructive';\n  cursor?: CSSProperties['cursor'];\n}\n\nexport const Action = forwardRef(\n  ({className, cursor, style, variant = 'light', ...props}, ref) => {\n    return (\n      \n    );\n  }\n);\n"
  },
  {
    "path": "apps/stories/stories/react/components/Actions/Actions.module.css",
    "content": ".Actions {\n  display: flex;\n}\n\n.Action {\n  display: flex;\n  width: 12px;\n  padding: 15px;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  touch-action: none;\n  cursor: var(--cursor, pointer);\n  border-radius: 5px;\n  border: none;\n  outline: none;\n  appearance: none;\n  background-color: transparent;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n  -webkit-user-select: none;\n\n  --fill: #919eab;\n}\n\n.Action:hover, .Action:active {\n  background-color: var(--background, rgba(0, 0, 0, 0.05));\n}\n\n.Action:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), inset 0 0px 0px 2.5px #4c9ffe;\n}\n\n.Action svg {\n  flex: 0 0 auto;\n  margin: auto;\n  height: 100%;\n  overflow: visible;\n  fill: var(--fill);\n}\n\n.Action:active, .Action:hover {\n  --fill: #6f7b88;\n}\n\n.dark {\n  --background: rgba(255, 255, 255, 0.1);\n}\n\n.destructive {\n  visibility: hidden;\n}\n\n.destructive:hover {\n  --fill: rgba(255, 70, 70, 0.95);\n  --background: rgba(255, 70, 70, 0.1);\n}\n\n\n*:hover > .Actions .destructive, li:hover .destructive {\n  visibility: visible;\n}\n"
  },
  {
    "path": "apps/stories/stories/react/components/Actions/Actions.tsx",
    "content": "import React, {type PropsWithChildren} from 'react';\n\nimport styles from './Actions.module.css';\n\nexport function Actions(props: PropsWithChildren) {\n  return 
    {props.children}
    ;\n}\n"
  },
  {
    "path": "apps/stories/stories/react/components/Actions/Remove.tsx",
    "content": "import React from 'react';\n\nimport {Action, Props as ActionProps} from './Action';\n\ninterface Props extends Omit {}\n\nexport function Remove(props: Props) {\n  return (\n    \n      \n        \n      \n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/components/Actions/index.ts",
    "content": "export {Action} from './Action';\nexport type {Props as ActionProps} from './Action';\n\nexport {Actions} from './Actions';\n\nexport {Remove} from './Remove';\n"
  },
  {
    "path": "apps/stories/stories/react/components/Button/Button.tsx",
    "content": "import React, {\n  forwardRef,\n  Fragment,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\n\nexport interface Props extends HTMLAttributes {\n  actions?: React.ReactNode;\n  shadow?: boolean;\n}\n\nexport const Button = forwardRef>(\n  function Button({actions, children, shadow, ...props}, ref) {\n    return (\n      \n        {children}\n        {actions}\n      \n    );\n  }\n);\n"
  },
  {
    "path": "apps/stories/stories/react/components/Container/Container.tsx",
    "content": "import React, {forwardRef} from 'react';\n\nexport interface Props {\n  children: React.ReactNode;\n  actions?: React.ReactNode;\n  columns?: number;\n  label?: string;\n  scrollable?: boolean;\n  shadow?: boolean;\n  style?: React.CSSProperties;\n  transitionId?: string;\n}\n\nexport const Container = forwardRef(\n  (\n    {\n      actions,\n      children,\n      columns = 1,\n      label,\n      style,\n      scrollable,\n      shadow,\n      transitionId,\n      ...props\n    }: Props,\n    ref\n  ) => {\n    return React.createElement(\n      'container-component',\n      {\n        ...props,\n        ref,\n        style: {\n          ...style,\n          viewTransitionName: transitionId,\n          '--columns': columns,\n        } as React.CSSProperties,\n        'data-shadow': shadow ? 'true' : undefined,\n        'data-scrollable': scrollable ? 'true' : undefined,\n      },\n      <>\n        {label ? (\n          
    \n            {label}\n            {actions}\n          
    \n        ) : null}\n        
      {children}
    \n      \n    );\n  }\n);\n"
  },
  {
    "path": "apps/stories/stories/react/components/Dropzone/Dropzone.tsx",
    "content": "import React, {forwardRef} from 'react';\n\ninterface Props {\n  children: React.ReactNode;\n  highlight?: boolean;\n}\n\nexport const Dropzone = forwardRef(function Dropzone(\n  {children, highlight},\n  ref\n) {\n  return (\n    
    \n      {children}\n    
    \n  );\n});\n"
  },
  {
    "path": "apps/stories/stories/react/components/Grid/Grid.module.css",
    "content": ".Grid {\n  position: fixed;\n  inset: 0;\n  background-image: repeating-linear-gradient(\n      0deg,\n      transparent,\n      transparent calc(var(--grid-size) - 1px),\n      #ddd calc(var(--grid-size) - 1px),\n      #ddd var(--grid-size)\n    ),\n    repeating-linear-gradient(\n      -90deg,\n      transparent,\n      transparent calc(var(--grid-size) - 1px),\n      #ddd calc(var(--grid-size) - 1px),\n      #ddd var(--grid-size)\n    );\n  background-size: var(--grid-size) var(--grid-size);\n}\n"
  },
  {
    "path": "apps/stories/stories/react/components/Grid/Grid.tsx",
    "content": "import React, {type PropsWithChildren} from 'react';\n\nimport styles from './Grid.module.css';\n\nexport interface Props extends PropsWithChildren {\n  size: number;\n}\n\nexport function Grid({children, size}: Props) {\n  return (\n    \n      {children}\n    \n  );\n}\n"
  },
  {
    "path": "apps/stories/stories/react/components/Handle/Handle.tsx",
    "content": "import React, {forwardRef} from 'react';\n\nexport interface HandleProps extends React.HTMLAttributes {\n  variant?: string;\n}\n\nexport const Handle = forwardRef(\n  ({variant, ...props}, ref) => {\n    return ;\n}\n\nexport default function App() {\n  return (\n    \n      \n    \n  );\n}\n"
  },
  {
    "path": "apps/stories-solid/stories/Droppable/Droppable.stories.tsx",
    "content": "import type {Meta, StoryObj} from 'storybook-solidjs';\n\nimport App from './DroppableApp';\nimport droppableSource from './DroppableApp.tsx?raw';\nimport {baseStyles, draggableStyles, droppableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Droppable/Basic setup',\n  component: App,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.tsx': droppableSource,\n        'src/styles.css': [baseStyles, draggableStyles, droppableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-solid/stories/Droppable/DroppableApp.tsx",
    "content": "import {createSignal} from 'solid-js';\nimport {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/solid';\n\nfunction Draggable() {\n  const {ref} = useDraggable({id: 'draggable'});\n\n  return ;\n}\n\nfunction Droppable(props: {children?: any}) {\n  const {isDropTarget, ref} = useDroppable({id: 'droppable'});\n\n  return (\n    
    \n      {props.children}\n    
    \n  );\n}\n\nexport default function App() {\n  const [parent, setParent] = createSignal();\n\n  return (\n     {\n        if (event.canceled) return;\n        setParent(event.operation.target?.id as string);\n      }}\n    >\n      
    \n        {parent() == null ?  : null}\n        \n          {parent() === 'droppable' ?  : null}\n        \n      
    \n    \n  );\n}\n"
  },
  {
    "path": "apps/stories-solid/stories/Droppable/MultipleDroppable/MultipleDroppable.stories.tsx",
    "content": "import type {Meta, StoryObj} from 'storybook-solidjs';\n\nimport App from './MultipleDroppableApp';\nimport multipleDroppableSource from './MultipleDroppableApp.tsx?raw';\nimport {baseStyles, draggableStyles, droppableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Droppable/Multiple drop targets',\n  component: App,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.tsx': multipleDroppableSource,\n        'src/styles.css': [baseStyles, draggableStyles, droppableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-solid/stories/Droppable/MultipleDroppable/MultipleDroppableApp.tsx",
    "content": "import {createSignal, For} from 'solid-js';\nimport {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/solid';\n\nfunction Draggable() {\n  const {ref} = useDraggable({id: 'draggable'});\n\n  return ;\n}\n\nfunction Droppable(props: {id: string; children?: any}) {\n  const {isDropTarget, ref} = useDroppable({id: props.id});\n\n  return (\n    
    \n      {props.children}\n    
    \n  );\n}\n\nexport default function App() {\n  const [parent, setParent] = createSignal();\n  const droppables = ['A', 'B', 'C'];\n\n  return (\n     {\n        if (event.canceled) return;\n        setParent(event.operation.target?.id as string);\n      }}\n    >\n      
    \n        
    \n          {parent() == null ?  : null}\n        
    \n        \n          {(id) => (\n            \n              {parent() === id ?  : null}\n            \n          )}\n        \n      
    \n    \n  );\n}\n"
  },
  {
    "path": "apps/stories-solid/stories/Sortable/Grid/Grid.stories.tsx",
    "content": "import type {Meta, StoryObj} from 'storybook-solidjs';\n\nimport App from './GridSortableApp';\nimport gridSortableSource from './GridSortableApp.tsx?raw';\nimport {baseStyles, sortableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Grid',\n  component: App,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.tsx': gridSortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-solid/stories/Sortable/Grid/GridSortableApp.tsx",
    "content": "import {createSignal, For} from 'solid-js';\nimport {DragDropProvider} from '@dnd-kit/solid';\nimport {useSortable} from '@dnd-kit/solid/sortable';\nimport {move} from '@dnd-kit/helpers';\n\nfunction Sortable(props: {id: number; index: number}) {\n  const {isDragging, ref} = useSortable({\n    get id() { return props.id; },\n    get index() { return props.index; },\n  });\n\n  return (\n    \n      {props.id}\n    \n  );\n}\n\nexport default function App() {\n  const [items, setItems] = createSignal(createRange(20));\n\n  return (\n     {\n        setItems((items) => move(items, event));\n      }}\n    >\n      
    \n        \n          {(id, index) => }\n        \n      
    \n    \n  );\n}\n\nfunction createRange(length: number) {\n  return Array.from({length}, (_, i) => i + 1);\n}\n"
  },
  {
    "path": "apps/stories-solid/stories/Sortable/Horizontal/Horizontal.stories.tsx",
    "content": "import type {Meta, StoryObj} from 'storybook-solidjs';\n\nimport App from './HorizontalSortableApp';\nimport horizontalSortableSource from './HorizontalSortableApp.tsx?raw';\nimport {baseStyles, sortableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Horizontal list',\n  component: App,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.tsx': horizontalSortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-solid/stories/Sortable/Horizontal/HorizontalSortableApp.tsx",
    "content": "import {createSignal, For} from 'solid-js';\nimport {DragDropProvider} from '@dnd-kit/solid';\nimport {useSortable} from '@dnd-kit/solid/sortable';\nimport {move} from '@dnd-kit/helpers';\n\nfunction Sortable(props: {id: number; index: number}) {\n  const {isDragging, ref} = useSortable({\n    get id() { return props.id; },\n    get index() { return props.index; },\n  });\n\n  return (\n    \n      {props.id}\n    \n  );\n}\n\nexport default function App() {\n  const [items, setItems] = createSignal(createRange(10));\n\n  return (\n     {\n        setItems((items) => move(items, event));\n      }}\n    >\n      
    \n        \n          {(id, index) => }\n        \n      
    \n    \n  );\n}\n\nfunction createRange(length: number) {\n  return Array.from({length}, (_, i) => i + 1);\n}\n"
  },
  {
    "path": "apps/stories-solid/stories/Sortable/MultipleLists/MultipleLists.stories.tsx",
    "content": "import type {Meta, StoryObj} from 'storybook-solidjs';\n\nimport MultipleListsApp from './MultipleListsApp.tsx';\nimport multipleListsSource from './MultipleListsApp.tsx?raw';\nimport {baseStyles, sortableStyles, multipleListsStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst styles = [baseStyles, sortableStyles, multipleListsStyles].join('\\n\\n');\n\nconst meta: Meta = {\n  title: 'Sortable/Multiple lists',\n  component: MultipleListsApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => (\n    <>\n      \n      \n    \n  ),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.tsx': multipleListsSource,\n        'src/styles.css': styles,\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-solid/stories/Sortable/MultipleLists/MultipleListsApp.tsx",
    "content": "import {createSignal, For} from 'solid-js';\nimport {CollisionPriority} from '@dnd-kit/abstract';\nimport {DragDropProvider} from '@dnd-kit/solid';\nimport {useSortable} from '@dnd-kit/solid/sortable';\nimport {defaultPreset, PointerSensor, KeyboardSensor} from '@dnd-kit/dom';\nimport {move} from '@dnd-kit/helpers';\n\nfunction createRange(length: number) {\n  return Array.from({length}, (_, i) => i + 1);\n}\n\nconst ITEM_COUNT = 6;\n\nconst COLORS: Record = {\n  A: '#7193f1',\n  B: '#FF851B',\n  C: '#2ECC40',\n  D: '#ff3680',\n};\n\nconst sensors = [\n  PointerSensor.configure({\n    activatorElements(source) {\n      return [source.element, source.handle];\n    },\n  }),\n  KeyboardSensor,\n];\n\nfunction SortableItem(props: {id: string; column: string; index: number}) {\n  const {isDragging, ref, handleRef} = useSortable({\n    get id() {\n      return props.id;\n    },\n    get index() {\n      return props.index;\n    },\n    get group() {\n      return props.column;\n    },\n    get data() {\n      return {group: props.column};\n    },\n    accept: 'item',\n    type: 'item',\n    feedback: 'clone',\n  });\n\n  return (\n    \n      {props.id}\n      \n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Draggable/DragOverlay/DragOverlay.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/svelte-vite';\n\nimport DragOverlayApp from './DragOverlayApp.svelte';\nimport dragOverlaySource from './DragOverlayApp.svelte?raw';\nimport draggableItemSource from './DraggableItem.svelte?raw';\nimport {\n  baseStyles,\n  draggableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Draggable/Drag overlay',\n  component: DragOverlayApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.svelte': dragOverlaySource,\n        'src/DraggableItem.svelte': draggableItemSource,\n        'src/styles.css': [baseStyles, draggableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-svelte/stories/Draggable/DragOverlay/DragOverlayApp.svelte",
    "content": "\n\n\n  
    \n    \n    \n      {#snippet children(source)}\n        \n      {/snippet}\n    \n  
    \n    \n"
  },
  {
    "path": "apps/stories-svelte/stories/Draggable/DragOverlay/DraggableItem.svelte",
    "content": "\n\n\n  draggable\n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Draggable/Draggable.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/svelte-vite';\n\nimport DraggableApp from './DraggableApp.svelte';\nimport draggableSource from './DraggableApp.svelte?raw';\nimport draggableComponentSource from './Draggable.svelte?raw';\nimport {\n  baseStyles,\n  draggableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Draggable/Basic setup',\n  component: DraggableApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.svelte': draggableSource,\n        'src/Draggable.svelte': draggableComponentSource,\n        'src/styles.css': [baseStyles, draggableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-svelte/stories/Draggable/Draggable.svelte",
    "content": "\n\n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Draggable/DraggableApp.svelte",
    "content": "\n\n\n  \n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Droppable/DraggableItem.svelte",
    "content": "\n\n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Droppable/Droppable.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/svelte-vite';\n\nimport DroppableApp from './DroppableApp.svelte';\nimport droppableSource from './DroppableApp.svelte?raw';\nimport draggableItemSource from './DraggableItem.svelte?raw';\nimport droppableZoneSource from './DroppableZone.svelte?raw';\nimport {\n  baseStyles,\n  draggableStyles,\n  droppableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Droppable/Basic setup',\n  component: DroppableApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.svelte': droppableSource,\n        'src/DraggableItem.svelte': draggableItemSource,\n        'src/DroppableZone.svelte': droppableZoneSource,\n        'src/styles.css': [baseStyles, draggableStyles, droppableStyles].join(\n          '\\n\\n'\n        ),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-svelte/stories/Droppable/DroppableApp.svelte",
    "content": "\n\n\n  
    \n    {#if parent == null}\n      \n    {/if}\n    \n      {#if parent === 'droppable'}\n        \n      {/if}\n    \n  
    \n    \n"
  },
  {
    "path": "apps/stories-svelte/stories/Droppable/DroppableZone.svelte",
    "content": "\n\n\n  {@render children?.()}\n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Droppable/MultipleDroppable/MultipleDroppable.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/svelte-vite';\n\nimport MultipleDroppableApp from './MultipleDroppableApp.svelte';\nimport multipleDroppableSource from './MultipleDroppableApp.svelte?raw';\nimport draggableItemSource from '../DraggableItem.svelte?raw';\nimport droppableZoneSource from '../DroppableZone.svelte?raw';\nimport {\n  baseStyles,\n  draggableStyles,\n  droppableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Droppable/Multiple drop targets',\n  component: MultipleDroppableApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.svelte': multipleDroppableSource.replace(\n          /from '\\.\\.\\/(\\w+\\.svelte)'/g,\n          \"from './$1'\"\n        ),\n        'src/DraggableItem.svelte': draggableItemSource,\n        'src/DroppableZone.svelte': droppableZoneSource,\n        'src/styles.css': [baseStyles, draggableStyles, droppableStyles].join(\n          '\\n\\n'\n        ),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-svelte/stories/Droppable/MultipleDroppable/MultipleDroppableApp.svelte",
    "content": "\n\n\n  
    \n    
    \n      {#if parent == null}\n        \n      {/if}\n    
    \n    {#each droppables as id (id)}\n      \n        {#if parent === id}\n          \n        {/if}\n      \n    {/each}\n  
    \n    \n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/Grid/Grid.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/svelte-vite';\n\nimport GridSortableApp from './GridSortableApp.svelte';\nimport gridSortableSource from './GridSortableApp.svelte?raw';\nimport gridSortableItemSource from './GridSortableItem.svelte?raw';\nimport {\n  baseStyles,\n  sortableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Grid',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => ({Component: GridSortableApp}),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.svelte': gridSortableSource,\n        'src/GridSortableItem.svelte': gridSortableItemSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/Grid/GridSortableApp.svelte",
    "content": "\n\n\n  
    \n    {#each items as id, index (id)}\n      \n    {/each}\n  
    \n    \n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/Grid/GridSortableItem.svelte",
    "content": "\n\n\n  {id}\n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/Horizontal/Horizontal.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/svelte-vite';\n\nimport HorizontalSortableApp from './HorizontalSortableApp.svelte';\nimport horizontalSortableSource from './HorizontalSortableApp.svelte?raw';\nimport horizontalSortableItemSource from './HorizontalSortableItem.svelte?raw';\nimport {\n  baseStyles,\n  sortableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Horizontal list',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => ({Component: HorizontalSortableApp}),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.svelte': horizontalSortableSource,\n        'src/HorizontalSortableItem.svelte': horizontalSortableItemSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/Horizontal/HorizontalSortableApp.svelte",
    "content": "\n\n\n  
    \n    {#each items as id, index (id)}\n      \n    {/each}\n  
    \n    \n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/Horizontal/HorizontalSortableItem.svelte",
    "content": "\n\n\n  {id}\n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/MultipleLists/MultipleLists.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/svelte-vite';\n\nimport MultipleListsApp from './MultipleListsApp.svelte';\nimport multipleListsSource from './MultipleListsApp.svelte?raw';\nimport sortableColumnSource from './SortableColumn.svelte?raw';\nimport sortableItemSource from './SortableItem.svelte?raw';\nimport {\n  baseStyles,\n  sortableStyles,\n  multipleListsStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst styles = [baseStyles, sortableStyles, multipleListsStyles].join('\\n\\n');\n\nconst meta: Meta = {\n  title: 'Sortable/Multiple lists',\n  component: MultipleListsApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.svelte': multipleListsSource,\n        'src/SortableColumn.svelte': sortableColumnSource,\n        'src/SortableItem.svelte': sortableItemSource,\n        'src/styles.css': styles,\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/MultipleLists/MultipleListsApp.svelte",
    "content": "\n\n\n  
    \n    {#each columns as column, columnIndex (column)}\n      \n    {/each}\n  
    \n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/MultipleLists/SortableColumn.svelte",
    "content": "\n\n\n  
    \n    {id}\n    \n  
    \n  
      \n    {#each rows as itemId, itemIndex (itemId)}\n      \n    {/each}\n  
    \n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/MultipleLists/SortableItem.svelte",
    "content": "\n\n\n  {id}\n  \n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/SortableApp.svelte",
    "content": "\n\n\n  
      \n    {#each items as id, index (id)}\n      \n    {/each}\n  
    \n    \n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/SortableDragHandleApp.svelte",
    "content": "\n\n\n  
      \n    {#each items as id, index (id)}\n      \n    {/each}\n  
    \n    \n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/SortableItem.svelte",
    "content": "\n\n\n  {id}\n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/SortableItemWithHandle.svelte",
    "content": "\n\n\n  {id}\n  \n\n"
  },
  {
    "path": "apps/stories-svelte/stories/Sortable/Vertical/Vertical.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/svelte-vite';\n\nimport SortableApp from '../SortableApp.svelte';\nimport sortableSource from '../SortableApp.svelte?raw';\nimport sortableItemSource from '../SortableItem.svelte?raw';\nimport SortableDragHandleApp from '../SortableDragHandleApp.svelte';\nimport sortableDragHandleSource from '../SortableDragHandleApp.svelte?raw';\nimport sortableItemWithHandleSource from '../SortableItemWithHandle.svelte?raw';\nimport {\n  baseStyles,\n  handleStyles,\n  sortableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Vertical list',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => ({Component: SortableApp}),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.svelte': sortableSource,\n        'src/SortableItem.svelte': sortableItemSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n\nexport const WithDragHandle: Story = {\n  name: 'Drag handle',\n  render: () => ({Component: SortableDragHandleApp}),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.svelte': sortableDragHandleSource,\n        'src/SortableItemWithHandle.svelte': sortableItemWithHandleSource,\n        'src/styles.css': [baseStyles, sortableStyles, handleStyles].join(\n          '\\n\\n'\n        ),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-svelte/tests/draggable.spec.ts",
    "content": "import {draggableTests} from '../../stories-shared/tests/draggable.tests.ts';\n\ndraggableTests({\n  example: 'draggable-basic-setup--example',\n  dragHandle: 'draggable-drag-handles--example',\n});\n"
  },
  {
    "path": "apps/stories-svelte/tests/droppable.spec.ts",
    "content": "import {droppableTests} from '../../stories-shared/tests/droppable.tests.ts';\n\ndroppableTests({\n  example: 'droppable-basic-setup--example',\n  multipleDropTargets: 'droppable-multiple-drop-targets--example',\n});\n"
  },
  {
    "path": "apps/stories-svelte/tests/sortable-vertical.spec.ts",
    "content": "import {sortableVerticalTests} from '../../stories-shared/tests/sortable-vertical.tests.ts';\n\nsortableVerticalTests({\n  basicSetup: 'sortable-vertical-list--basic-setup',\n  withDragHandle: 'sortable-vertical-list--with-drag-handle',\n});\n"
  },
  {
    "path": "apps/stories-svelte/vite.config.ts",
    "content": "import {defineConfig} from 'vite';\nimport {svelte} from '@sveltejs/vite-plugin-svelte';\n\nexport default defineConfig({\n  plugins: [\n    svelte(),\n  ],\n});\n"
  },
  {
    "path": "apps/stories-vanilla/.storybook/main.ts",
    "content": "import {readFileSync} from 'fs';\nimport {dirname, join} from 'path';\nimport {mergeConfig} from 'vite';\n\nconst sharedPreviewHead = readFileSync(\n  join(__dirname, '..', '..', 'stories-shared', 'preview-head.html'),\n  'utf-8'\n);\n\nexport default {\n  previewHead: (head: string) => `${sharedPreviewHead}\\n${head}`,\n  stories: ['../stories/**/*.stories.ts'],\n\n  addons: [\n    getAbsolutePath('@storybook/addon-links'),\n    getAbsolutePath('@vueless/storybook-dark-mode'),\n    getAbsolutePath('@dnd-kit/storybook-addon-codesandbox'),\n  ],\n\n  framework: {\n    name: getAbsolutePath('@storybook/html-vite'),\n    options: {},\n  },\n\n  async viteFinal(config) {\n    return mergeConfig(config, {\n      define: {\n        'process.env': {},\n      },\n      optimizeDeps: {\n        exclude: ['@dnd-kit/*'],\n      },\n    });\n  },\n};\n\nfunction getAbsolutePath(value) {\n  return dirname(require.resolve(join(value, 'package.json')));\n}\n"
  },
  {
    "path": "apps/stories-vanilla/.storybook/manager-head.html",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vanilla/.storybook/manager.ts",
    "content": "import {addons} from 'storybook/manager-api';\n\nimport {theme} from './theme';\n\naddons.setConfig({\n  theme,\n  showPanel: false,\n});\n"
  },
  {
    "path": "apps/stories-vanilla/.storybook/preview.ts",
    "content": "import '@dnd-kit/stories-shared/register';\nimport {withCodeSandbox} from '@dnd-kit/storybook-addon-codesandbox/decorator-dom';\n\nconst preview = {\n  decorators: [withCodeSandbox],\n  parameters: {\n    codesandbox: {\n      dependencies: {\n        '@dnd-kit/abstract': 'beta',\n        '@dnd-kit/dom': 'beta',\n        '@dnd-kit/helpers': 'beta',\n        '@dnd-kit/collision': 'beta',\n      },\n      entry: [\n        \"import './styles.css';\",\n        \"import App from './App';\",\n        \"\",\n        \"App();\",\n      ].join('\\n'),\n      mainFile: 'src/App.ts',\n    },\n    darkMode: {\n      stylePreview: true,\n    },\n    options: {\n      storySort: {\n        order: [\n          'Draggable',\n          [\n            'Basic setup',\n            'Drag handle',\n          ],\n          'Droppable',\n          'Sortable',\n          [\n            'Vertical list',\n            'Horizontal list',\n            'Grid',\n            'Multiple lists',\n          ],\n        ],\n      },\n    },\n  },\n};\n\nexport default preview;\n"
  },
  {
    "path": "apps/stories-vanilla/.storybook/theme.ts",
    "content": "import {create} from 'storybook/theming/create';\nimport {default as brandImage} from './assets/dnd-kit-banner.svg';\n\nexport const theme = create({\n  base: 'light',\n  brandImage,\n  appBg: '#F9F9F9',\n});\n"
  },
  {
    "path": "apps/stories-vanilla/package.json",
    "content": "{\n  \"name\": \"@dnd-kit/stories-vanilla\",\n  \"version\": \"0.0.0\",\n  \"type\": \"module\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"storybook dev -p 6007\",\n    \"build\": \"storybook build\",\n    \"clean\": \"rm -rf .turbo && rm -rf node_modules\"\n  },\n  \"dependencies\": {\n    \"@dnd-kit/abstract\": \"*\",\n    \"@dnd-kit/dom\": \"*\",\n    \"@dnd-kit/helpers\": \"*\",\n    \"@dnd-kit/stories-shared\": \"*\",\n    \"@dnd-kit/storybook-addon-codesandbox\": \"*\"\n  },\n  \"devDependencies\": {\n    \"@storybook/addon-links\": \"^9.0.15\",\n    \"@storybook/html-vite\": \"^9.0.15\",\n    \"@vueless/storybook-dark-mode\": \"^9.0.6\",\n    \"storybook\": \"^9.0.15\",\n    \"typescript\": \"^5.7.3\",\n    \"vite\": \"^6.0.0\"\n  }\n}\n"
  },
  {
    "path": "apps/stories-vanilla/raw.d.ts",
    "content": "declare module '*.ts?raw' {\n  const content: string;\n  export default content;\n}\n\ndeclare module '*.js?raw' {\n  const content: string;\n  export default content;\n}\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Draggable/DragHandle/DragHandle.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/html-vite';\n\nimport App from './DragHandleApp.ts';\nimport dragHandleSource from './DragHandleApp.ts?raw';\nimport {baseStyles, draggableStyles, handleStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Draggable/Drag handle',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  render: () => App(),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.ts': dragHandleSource,\n        'src/styles.css': [baseStyles, draggableStyles, handleStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Draggable/DragHandle/DragHandleApp.ts",
    "content": "import {DragDropManager, Draggable} from '@dnd-kit/dom';\n\nexport default function App() {\n  const root = document.createElement('div');\n\n  const button = document.createElement('div');\n  button.className = 'btn';\n  button.append('draggable');\n\n  const handle = document.createElement('button');\n  handle.className = 'handle';\n  button.appendChild(handle);\n\n  root.appendChild(button);\n\n  const manager = new DragDropManager();\n\n  new Draggable(\n    {\n      id: 'draggable',\n      element: button,\n      handle,\n    },\n    manager\n  );\n\n  return root;\n}\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Draggable/Draggable.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/html-vite';\n\nimport App from './DraggableApp.ts';\nimport draggableSource from './DraggableApp.ts?raw';\nimport {baseStyles, draggableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Draggable/Basic setup',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  render: () => App(),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.ts': draggableSource,\n        'src/styles.css': [baseStyles, draggableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Draggable/DraggableApp.ts",
    "content": "import {DragDropManager, Draggable} from '@dnd-kit/dom';\n\nexport default function App() {\n  const root = document.createElement('div');\n\n  const button = document.createElement('button');\n  button.className = 'btn';\n  button.textContent = 'draggable';\n  root.appendChild(button);\n\n  const manager = new DragDropManager();\n  new Draggable({id: 'draggable', element: button}, manager);\n\n  return root;\n}\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Droppable/Droppable.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/html-vite';\n\nimport App from './DroppableApp.ts';\nimport droppableSource from './DroppableApp.ts?raw';\nimport {\n  baseStyles,\n  draggableStyles,\n  droppableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Droppable/Basic setup',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  render: () => App(),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.ts': droppableSource,\n        'src/styles.css': [baseStyles, draggableStyles, droppableStyles].join(\n          '\\n\\n'\n        ),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Droppable/DroppableApp.ts",
    "content": "import {DragDropManager, Draggable, Droppable} from '@dnd-kit/dom';\n\nexport default function App() {\n  const section = document.createElement('section');\n  section.className = 'drop-layout';\n\n  const button = document.createElement('button');\n  button.className = 'btn';\n  button.textContent = 'draggable';\n\n  const dropzone = document.createElement('div');\n  dropzone.className = 'droppable';\n\n  section.append(button, dropzone);\n\n  const manager = new DragDropManager();\n\n  const draggable = new Draggable({id: 'draggable', element: button}, manager);\n\n  const droppable = new Droppable(\n    {\n      id: 'droppable',\n      element: dropzone,\n      effects: () => [\n        () => {\n          if (droppable.isDropTarget) {\n            dropzone.classList.add('active');\n            return () => dropzone.classList.remove('active');\n          }\n        },\n      ],\n    },\n    manager\n  );\n\n  manager.monitor.addEventListener('dragend', (event) => {\n    if (event.canceled) return;\n\n    const isInside = dropzone.contains(button);\n\n    if (event.operation.target?.id === 'droppable') {\n      if (!isInside) dropzone.appendChild(button);\n    } else if (isInside) {\n      section.prepend(button);\n    }\n  });\n\n  return section;\n}\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Droppable/MultipleDroppable/MultipleDroppable.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/html-vite';\n\nimport App from './MultipleDroppableApp.ts';\nimport multipleDroppableSource from './MultipleDroppableApp.ts?raw';\nimport {\n  baseStyles,\n  draggableStyles,\n  droppableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Droppable/Multiple drop targets',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  render: () => App(),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.ts': multipleDroppableSource,\n        'src/styles.css': [baseStyles, draggableStyles, droppableStyles].join(\n          '\\n\\n'\n        ),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Droppable/MultipleDroppable/MultipleDroppableApp.ts",
    "content": "import {DragDropManager, Draggable, Droppable} from '@dnd-kit/dom';\n\nexport default function App() {\n  const root = document.createElement('div');\n  root.style.display = 'grid';\n  root.style.gridTemplateColumns = '1fr 1fr';\n  root.style.gap = '20px';\n  root.style.maxWidth = '500px';\n  root.style.margin = '0 auto';\n\n  const buttonWrapper = document.createElement('div');\n  buttonWrapper.style.display = 'flex';\n  buttonWrapper.style.alignItems = 'center';\n  buttonWrapper.style.justifyContent = 'center';\n\n  const button = document.createElement('button');\n  button.className = 'btn';\n  button.textContent = 'draggable';\n\n  buttonWrapper.appendChild(button);\n  root.appendChild(buttonWrapper);\n\n  const manager = new DragDropManager();\n  const droppableIds = ['A', 'B', 'C'];\n  const dropzones: Record = {};\n\n  new Draggable({id: 'draggable', element: button}, manager);\n\n  for (const id of droppableIds) {\n    const dropzone = document.createElement('div');\n    dropzone.className = 'droppable';\n    dropzones[id] = dropzone;\n    root.appendChild(dropzone);\n\n    const droppable = new Droppable(\n      {\n        id,\n        element: dropzone,\n        effects: () => [\n          () => {\n            if (droppable.isDropTarget) {\n              dropzone.classList.add('active');\n              return () => dropzone.classList.remove('active');\n            }\n          },\n        ],\n      },\n      manager\n    );\n  }\n\n  manager.monitor.addEventListener('dragend', (event) => {\n    if (event.canceled) return;\n\n    const targetId = event.operation.target?.id as string;\n\n    // Find which dropzone currently contains the button\n    const currentParent = Object.entries(dropzones).find(([, el]) =>\n      el.contains(button)\n    );\n\n    if (targetId && dropzones[targetId]) {\n      if (!dropzones[targetId].contains(button)) {\n        dropzones[targetId].appendChild(button);\n      }\n    } else if (currentParent) {\n      buttonWrapper.appendChild(button);\n    }\n  });\n\n  return root;\n}\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Sortable/Grid/Grid.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/html-vite';\n\nimport App from './GridSortableApp.ts';\nimport gridSortableSource from './GridSortableApp.ts?raw';\nimport {baseStyles, sortableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Grid',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => App(),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.ts': gridSortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Sortable/Grid/GridSortableApp.ts",
    "content": "import {DragDropManager} from '@dnd-kit/dom';\nimport {Sortable} from '@dnd-kit/dom/sortable';\n\nexport default function App() {\n  const wrapper = document.createElement('div');\n  wrapper.style.display = 'grid';\n  wrapper.style.gridTemplateColumns = 'repeat(auto-fill, 150px)';\n  wrapper.style.gridAutoRows = '150px';\n  wrapper.style.gridAutoFlow = 'dense';\n  wrapper.style.gap = '18px';\n  wrapper.style.padding = '0 30px';\n  wrapper.style.maxWidth = '900px';\n  wrapper.style.marginInline = 'auto';\n  wrapper.style.justifyContent = 'center';\n\n  const manager = new DragDropManager();\n  const items = createRange(20);\n\n  for (const id of items) {\n    const element = document.createElement('div');\n    element.classList.add('item');\n    element.textContent = String(id);\n    element.style.height = '100%';\n    element.style.justifyContent = 'center';\n\n    wrapper.appendChild(element);\n\n    const sortable = new Sortable(\n      {\n        id,\n        element,\n        index: id - 1,\n        effects: () => [\n          () => {\n            if (sortable.isDragging) {\n              element.dataset.shadow = '';\n              return () => delete element.dataset.shadow;\n            }\n          },\n        ],\n      },\n      manager\n    );\n  }\n\n  return wrapper;\n}\n\nfunction createRange(length: number) {\n  return Array.from({length}, (_, i) => i + 1);\n}\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Sortable/Horizontal/Horizontal.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/html-vite';\n\nimport App from './HorizontalSortableApp.ts';\nimport horizontalSortableSource from './HorizontalSortableApp.ts?raw';\nimport {baseStyles, sortableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Horizontal list',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => App(),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.ts': horizontalSortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Sortable/Horizontal/HorizontalSortableApp.ts",
    "content": "import {DragDropManager} from '@dnd-kit/dom';\nimport {Sortable} from '@dnd-kit/dom/sortable';\n\nexport default function App() {\n  const wrapper = document.createElement('div');\n  wrapper.style.display = 'inline-flex';\n  wrapper.style.flexDirection = 'row';\n  wrapper.style.alignItems = 'stretch';\n  wrapper.style.height = '180px';\n  wrapper.style.gap = '18px';\n  wrapper.style.padding = '0 30px';\n\n  const manager = new DragDropManager();\n  const items = createRange(10);\n\n  for (const id of items) {\n    const element = document.createElement('div');\n    element.classList.add('item');\n    element.textContent = String(id);\n    element.style.aspectRatio = '1';\n    element.style.justifyContent = 'center';\n\n    wrapper.appendChild(element);\n\n    const sortable = new Sortable(\n      {\n        id,\n        element,\n        index: id - 1,\n        effects: () => [\n          () => {\n            if (sortable.isDragging) {\n              element.dataset.shadow = '';\n              return () => delete element.dataset.shadow;\n            }\n          },\n        ],\n      },\n      manager\n    );\n  }\n\n  return wrapper;\n}\n\nfunction createRange(length: number) {\n  return Array.from({length}, (_, i) => i + 1);\n}\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Sortable/Sortable.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/html-vite';\n\nimport App from './SortableApp.ts';\nimport sortableSource from './SortableApp.ts?raw';\nimport {baseStyles, sortableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Vertical list',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => App(),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.ts': sortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vanilla/stories/Sortable/SortableApp.ts",
    "content": "import {DragDropManager} from '@dnd-kit/dom';\nimport {Sortable} from '@dnd-kit/dom/sortable';\n\nexport default function App() {\n  const list = document.createElement('ul');\n  list.className = 'list';\n\n  const manager = new DragDropManager();\n  const items = createRange(100);\n\n  for (const id of items) {\n    const li = document.createElement('li');\n    li.className = 'item';\n    li.textContent = String(id);\n\n    list.appendChild(li);\n\n    const sortable = new Sortable(\n      {\n        id,\n        element: li,\n        index: id - 1,\n        effects: () => [\n          () => {\n            if (sortable.isDragging) {\n              li.dataset.shadow = '';\n              return () => delete li.dataset.shadow;\n            }\n          },\n        ],\n      },\n      manager\n    );\n  }\n\n  return list;\n}\n\nfunction createRange(length: number) {\n  return Array.from({length}, (_, i) => i + 1);\n}\n"
  },
  {
    "path": "apps/stories-vue/.storybook/main.ts",
    "content": "import {readFileSync} from 'fs';\nimport {dirname, join} from 'path';\nimport {mergeConfig} from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nconst sharedPreviewHead = readFileSync(\n  join(__dirname, '..', '..', 'stories-shared', 'preview-head.html'),\n  'utf-8'\n);\n\nexport default {\n  previewHead: (head: string) => `${sharedPreviewHead}\\n${head}`,\n  stories: ['../stories/**/*.stories.ts'],\n\n  addons: [\n    getAbsolutePath('@storybook/addon-links'),\n    getAbsolutePath('@vueless/storybook-dark-mode'),\n    getAbsolutePath('@dnd-kit/storybook-addon-codesandbox'),\n  ],\n\n  framework: {\n    name: getAbsolutePath('@storybook/vue3-vite'),\n    options: {},\n  },\n\n  async viteFinal(config) {\n    return mergeConfig(config, {\n      plugins: [\n        vue({\n          template: {\n            compilerOptions: {\n              isCustomElement: (tag) => tag.includes('-'),\n            },\n          },\n        }),\n      ],\n      define: {\n        'process.env': {},\n      },\n      optimizeDeps: {\n        exclude: ['@dnd-kit/*'],\n      },\n    });\n  },\n};\n\nfunction getAbsolutePath(value) {\n  return dirname(require.resolve(join(value, 'package.json')));\n}\n"
  },
  {
    "path": "apps/stories-vue/.storybook/manager-head.html",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vue/.storybook/manager.ts",
    "content": "import {addons} from 'storybook/manager-api';\n\nimport {theme} from './theme';\n\naddons.setConfig({\n  theme,\n  showPanel: false,\n});\n"
  },
  {
    "path": "apps/stories-vue/.storybook/preview.ts",
    "content": "import '@dnd-kit/stories-shared/register';\nimport {withCodeSandbox} from '@dnd-kit/storybook-addon-codesandbox/decorator-dom';\n\nconst preview = {\n  decorators: [withCodeSandbox],\n  parameters: {\n    codesandbox: {\n      template: 'vue-cli',\n      files: {\n        'src/main.js': [\n          \"import {createApp} from 'vue';\",\n          \"import App from './App.vue';\",\n          \"import './styles.css';\",\n          \"\",\n          \"createApp(App).mount('#app');\",\n        ].join('\\n'),\n        'package.json': JSON.stringify(\n          {\n            name: 'dnd-kit-sandbox',\n            version: '0.1.0',\n            private: true,\n            main: '/src/main.js',\n            alias: {\n              vue: 'vue/dist/vue.esm-bundler.js',\n            },\n            scripts: {\n              serve: 'vue-cli-service serve',\n              build: 'vue-cli-service build',\n            },\n            dependencies: {\n              'core-js': '^3.26.1',\n              '@dnd-kit/abstract': 'beta',\n              '@dnd-kit/dom': 'beta',\n              '@dnd-kit/vue': 'beta',\n              '@dnd-kit/helpers': 'beta',\n              '@dnd-kit/collision': 'beta',\n              'vue': '^3.5.0',\n            },\n            devDependencies: {\n              '@vue/cli-plugin-babel': '^5.0.8',\n              '@vue/cli-plugin-typescript': '^5.0.8',\n              '@vue/cli-service': '^5.0.8',\n              'typescript': '^4.9.3',\n            },\n          },\n          null,\n          2\n        ),\n      },\n      mainFile: 'src/App.vue',\n    },\n    darkMode: {\n      stylePreview: true,\n    },\n    options: {\n      storySort: {\n        order: [\n          'Draggable',\n          [\n            'Basic setup',\n            'Drag handles',\n            'Drag overlay',\n          ],\n          'Droppable',\n          'Sortable',\n          [\n            'Vertical list',\n            'Horizontal list',\n            'Grid',\n            'Multiple lists',\n          ],\n        ],\n      },\n    },\n  },\n};\n\nexport default preview;\n"
  },
  {
    "path": "apps/stories-vue/.storybook/theme.ts",
    "content": "import {create} from 'storybook/theming/create';\nimport {default as brandImage} from './assets/dnd-kit-banner.svg';\n\nexport const theme = create({\n  base: 'light',\n  brandImage,\n  appBg: '#F9F9F9',\n});\n"
  },
  {
    "path": "apps/stories-vue/package.json",
    "content": "{\n  \"name\": \"@dnd-kit/stories-vue\",\n  \"version\": \"0.0.0\",\n  \"type\": \"module\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"storybook dev -p 6008\",\n    \"build\": \"storybook build\",\n    \"clean\": \"rm -rf .turbo && rm -rf node_modules\",\n    \"test:e2e\": \"playwright test\",\n    \"test:e2e:ui\": \"playwright test --ui\"\n  },\n  \"dependencies\": {\n    \"@dnd-kit/abstract\": \"*\",\n    \"@dnd-kit/dom\": \"*\",\n    \"@dnd-kit/vue\": \"*\",\n    \"@dnd-kit/helpers\": \"*\",\n    \"@dnd-kit/stories-shared\": \"*\",\n    \"@dnd-kit/storybook-addon-codesandbox\": \"*\",\n    \"vue\": \"^3.5.0\"\n  },\n  \"devDependencies\": {\n    \"@playwright/test\": \"^1.58.2\",\n    \"@storybook/addon-links\": \"^9.0.15\",\n    \"@storybook/vue3-vite\": \"^9.0.15\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"@vueless/storybook-dark-mode\": \"^9.0.6\",\n    \"storybook\": \"^9.0.15\",\n    \"typescript\": \"^5.7.3\",\n    \"vite\": \"^6.0.0\"\n  }\n}\n"
  },
  {
    "path": "apps/stories-vue/playwright.config.ts",
    "content": "import {defineConfig} from '@playwright/test';\n\nconst CI = !!process.env.CI;\n\nexport default defineConfig({\n  testDir: './tests',\n  timeout: 15_000,\n  expect: {\n    timeout: 5_000,\n  },\n  fullyParallel: true,\n  retries: CI ? 2 : 1,\n  reporter: CI ? 'html' : 'list',\n  use: {\n    baseURL: 'http://localhost:6008',\n    actionTimeout: 5_000,\n  },\n  projects: [\n    {\n      name: 'chromium',\n      use: {browserName: 'chromium'},\n    },\n  ],\n  webServer: {\n    command: 'npx http-server storybook-static --port 6008 --silent',\n    port: 6008,\n    reuseExistingServer: !CI,\n    timeout: 120_000,\n  },\n});\n"
  },
  {
    "path": "apps/stories-vue/raw.d.ts",
    "content": "declare module '*.vue?raw' {\n  const content: string;\n  export default content;\n}\n\ndeclare module '*.ts?raw' {\n  const content: string;\n  export default content;\n}\n"
  },
  {
    "path": "apps/stories-vue/stories/Draggable/DragHandles/DragHandles.stories.ts",
    "content": "import {h} from 'vue';\nimport type {Meta, StoryObj} from '@storybook/vue3-vite';\n\nimport DragHandlesApp from './DragHandlesApp.vue';\nimport dragHandlesSource from './DragHandlesApp.vue?raw';\nimport {\n  baseStyles,\n  draggableStyles,\n  handleStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Draggable/Drag handles',\n  component: DragHandlesApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  decorators: [\n    (story) => ({\n      setup() {\n        return () =>\n          h('div', [\n            h('style', baseStyles),\n            h('style', draggableStyles),\n            h('style', handleStyles),\n            h(story()),\n          ]);\n      },\n    }),\n  ],\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.vue': dragHandlesSource,\n        'src/styles.css': [baseStyles, draggableStyles, handleStyles].join(\n          '\\n\\n'\n        ),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vue/stories/Draggable/DragHandles/DragHandlesApp.vue",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Draggable/DragOverlay/DragOverlay.stories.ts",
    "content": "import {h} from 'vue';\nimport type {Meta, StoryObj} from '@storybook/vue3-vite';\n\nimport DragOverlayApp from './DragOverlayApp.vue';\nimport dragOverlaySource from './DragOverlayApp.vue?raw';\nimport {\n  baseStyles,\n  draggableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Draggable/Drag overlay',\n  component: DragOverlayApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  decorators: [\n    (story) => ({\n      setup() {\n        return () =>\n          h('div', [\n            h('style', baseStyles),\n            h('style', draggableStyles),\n            h(story()),\n          ]);\n      },\n    }),\n  ],\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.vue': dragOverlaySource,\n        'src/styles.css': [baseStyles, draggableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vue/stories/Draggable/DragOverlay/DragOverlayApp.vue",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Draggable/Draggable.stories.ts",
    "content": "import {h} from 'vue';\nimport type {Meta, StoryObj} from '@storybook/vue3-vite';\n\nimport DraggableApp from './DraggableApp.vue';\nimport draggableSource from './DraggableApp.vue?raw';\nimport {\n  baseStyles,\n  draggableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Draggable/Basic setup',\n  component: DraggableApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  decorators: [\n    (story) => ({\n      setup() {\n        return () =>\n          h('div', [\n            h('style', baseStyles),\n            h('style', draggableStyles),\n            h(story()),\n          ]);\n      },\n    }),\n  ],\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.vue': draggableSource,\n        'src/styles.css': [baseStyles, draggableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vue/stories/Draggable/DraggableApp.vue",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Droppable/Droppable.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/vue3-vite';\n\nimport DroppableApp from './DroppableApp.vue';\nimport droppableSource from './DroppableApp.vue?raw';\nimport {baseStyles, draggableStyles, droppableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Droppable/Basic setup',\n  component: DroppableApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.vue': droppableSource,\n        'src/styles.css': [baseStyles, draggableStyles, droppableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vue/stories/Droppable/DroppableApp.vue",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Droppable/MultipleDroppable/MultipleDroppable.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/vue3-vite';\n\nimport MultipleDroppableApp from './MultipleDroppableApp.vue';\nimport multipleDroppableSource from './MultipleDroppableApp.vue?raw';\nimport {baseStyles, draggableStyles, droppableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Droppable/Multiple drop targets',\n  component: MultipleDroppableApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.vue': multipleDroppableSource,\n        'src/styles.css': [baseStyles, draggableStyles, droppableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vue/stories/Droppable/MultipleDroppable/MultipleDroppableApp.vue",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/Grid/Grid.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/vue3-vite';\n\nimport GridSortableApp from './GridSortableApp.vue';\nimport gridSortableSource from './GridSortableApp.vue?raw';\nimport {baseStyles, sortableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Grid',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => ({components: {GridSortableApp}, template: ''}),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.vue': gridSortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/Grid/GridSortableApp.vue",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/Horizontal/Horizontal.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/vue3-vite';\n\nimport HorizontalSortableApp from './HorizontalSortableApp.vue';\nimport horizontalSortableSource from './HorizontalSortableApp.vue?raw';\nimport {baseStyles, sortableStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Horizontal list',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => ({components: {HorizontalSortableApp}, template: ''}),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.vue': horizontalSortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/Horizontal/HorizontalSortableApp.vue",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/MultipleLists/MultipleLists.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/vue3-vite';\nimport {h} from 'vue';\n\nimport MultipleListsApp from './MultipleListsApp.vue';\nimport multipleListsSource from './MultipleListsApp.vue?raw';\nimport sortableColumnSource from './SortableColumn.vue?raw';\nimport sortableItemSource from './SortableItem.vue?raw';\nimport {baseStyles, sortableStyles, multipleListsStyles} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst styles = [baseStyles, sortableStyles, multipleListsStyles].join('\\n\\n');\n\nconst meta: Meta = {\n  title: 'Sortable/Multiple lists',\n  component: MultipleListsApp,\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => ({\n    setup() {\n      return () => h('div', [h('style', styles), h(MultipleListsApp)]);\n    },\n  }),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.vue': multipleListsSource,\n        'src/SortableColumn.vue': sortableColumnSource,\n        'src/SortableItem.vue': sortableItemSource,\n        'src/styles.css': styles,\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/MultipleLists/MultipleListsApp.vue",
    "content": "\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/MultipleLists/SortableColumn.vue",
    "content": "\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/MultipleLists/SortableItem.vue",
    "content": "\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/SortableApp.vue",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/SortableDragHandleApp.vue",
    "content": "\n\n\n\n\n"
  },
  {
    "path": "apps/stories-vue/stories/Sortable/Vertical/Vertical.stories.ts",
    "content": "import type {Meta, StoryObj} from '@storybook/vue3-vite';\n\nimport SortableApp from '../SortableApp.vue';\nimport sortableSource from '../SortableApp.vue?raw';\nimport SortableDragHandleApp from '../SortableDragHandleApp.vue';\nimport sortableDragHandleSource from '../SortableDragHandleApp.vue?raw';\nimport {\n  baseStyles,\n  handleStyles,\n  sortableStyles,\n} from '@dnd-kit/stories-shared/styles/sandbox';\n\nconst meta: Meta = {\n  title: 'Sortable/Vertical list',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const BasicSetup: Story = {\n  name: 'Basic setup',\n  render: () => ({components: {SortableApp}, template: ''}),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.vue': sortableSource,\n        'src/styles.css': [baseStyles, sortableStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n\nexport const WithDragHandle: Story = {\n  name: 'Drag handle',\n  render: () => ({components: {SortableDragHandleApp}, template: ''}),\n  parameters: {\n    codesandbox: {\n      files: {\n        'src/App.vue': sortableDragHandleSource,\n        'src/styles.css': [baseStyles, sortableStyles, handleStyles].join('\\n\\n'),\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "apps/stories-vue/tests/draggable.spec.ts",
    "content": "import {draggableTests} from '../../stories-shared/tests/draggable.tests.ts';\n\ndraggableTests({\n  example: 'draggable-basic-setup--example',\n  dragHandle: 'draggable-drag-handles--example',\n});\n"
  },
  {
    "path": "apps/stories-vue/tests/droppable.spec.ts",
    "content": "import {droppableTests} from '../../stories-shared/tests/droppable.tests.ts';\n\ndroppableTests({\n  example: 'droppable-basic-setup--example',\n  multipleDropTargets: 'droppable-multiple-drop-targets--example',\n});\n"
  },
  {
    "path": "apps/stories-vue/tests/sortable-vertical.spec.ts",
    "content": "import {sortableVerticalTests} from '../../stories-shared/tests/sortable-vertical.tests.ts';\n\nsortableVerticalTests({\n  basicSetup: 'sortable-vertical-list--basic-setup',\n  withDragHandle: 'sortable-vertical-list--with-drag-handle',\n});\n"
  },
  {
    "path": "config/typescript/base.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"display\": \"Default\",\n  \"compilerOptions\": {\n    \"composite\": false,\n    \"declaration\": true,\n    \"declarationMap\": true,\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"inlineSources\": false,\n    \"isolatedModules\": true,\n    \"noUnusedLocals\": false,\n    \"noUnusedParameters\": false,\n    \"preserveWatchOutput\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"allowImportingTsExtensions\": true,\n    \"emitDeclarationOnly\": true\n  },\n  \"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "config/typescript/react.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"display\": \"React\",\n  \"extends\": \"./base.json\",\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"lib\": [\"dom\", \"ES2015\"],\n    \"target\": \"es6\",\n    \"module\": \"NodeNext\",\n    \"moduleResolution\": \"NodeNext\",\n    \"importHelpers\": true\n  }\n}\n"
  },
  {
    "path": "config/typescript/solid.json",
    "content": "{\n  \"$schema\": \"https://json-schema.org/tsconfig\",\n  \"display\": \"Solid\",\n  \"extends\": \"./base.json\",\n  \"compilerOptions\": {\n    \"lib\": [\"dom\", \"ES2022\"],\n    \"target\": \"es6\",\n    \"module\": \"NodeNext\",\n    \"moduleResolution\": \"NodeNext\",\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"solid-js\",\n    \"importHelpers\": true,\n    \"sourceMap\": true\n  }\n}\n"
  },
  {
    "path": "config/typescript/svelte.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"display\": \"Svelte\",\n  \"extends\": \"./base.json\",\n  \"compilerOptions\": {\n    \"lib\": [\"dom\", \"ES2022\"],\n    \"target\": \"es6\",\n    \"module\": \"NodeNext\",\n    \"moduleResolution\": \"NodeNext\",\n    \"importHelpers\": true,\n    \"sourceMap\": true,\n    \"verbatimModuleSyntax\": true\n  }\n}\n"
  },
  {
    "path": "config/typescript/vanilla.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"display\": \"Vanilla\",\n  \"extends\": \"./base.json\",\n  \"compilerOptions\": {\n    \"lib\": [\"dom\", \"ES2015\"],\n    \"target\": \"es6\",\n    \"module\": \"NodeNext\",\n    \"moduleResolution\": \"NodeNext\",\n    \"importHelpers\": true,\n    \"sourceMap\": true\n  }\n}\n"
  },
  {
    "path": "config/typescript/vue.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"display\": \"Vue\",\n  \"extends\": \"./base.json\",\n  \"compilerOptions\": {\n    \"lib\": [\"dom\", \"ES2022\"],\n    \"target\": \"es6\",\n    \"module\": \"NodeNext\",\n    \"moduleResolution\": \"NodeNext\",\n    \"importHelpers\": true,\n    \"sourceMap\": true\n  }\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"turbo run build\",\n    \"dev\": \"turbo run dev --concurrency 20\",\n    \"test\": \"turbo run test\",\n    \"test:e2e\": \"turbo run test:e2e\",\n    \"lint\": \"turbo run lint\",\n    \"clean\": \"turbo run clean && rm -rf node_modules\",\n    \"format\": \"prettier --write \\\"**/*.{ts,tsx,md}\\\"\",\n    \"changeset\": \"changeset\",\n    \"version-packages\": \"changeset version\",\n    \"release\": \"changeset publish\",\n    \"version-packages:beta\": \"changeset version --snapshot beta\",\n    \"release:beta\": \"changeset publish --snapshot --tag beta\"\n  },\n  \"devDependencies\": {\n    \"@changesets/changelog-github\": \"^0.5.1\",\n    \"@changesets/cli\": \"^2.29.2\",\n    \"prettier\": \"^3.1.1\",\n    \"turbo\": \"^2.5.2\"\n  },\n  \"packageManager\": \"bun@1.1.12\",\n  \"workspaces\": [\n    \"packages/*\",\n    \"apps/*\"\n  ],\n  \"name\": \"dnd-kit-experimental\"\n}\n"
  },
  {
    "path": "packages/abstract/CHANGELOG.md",
    "content": "# @dnd-kit/abstract\n\n## 0.3.2\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.3.2\n  - @dnd-kit/state@0.3.2\n\n## 0.3.1\n\n### Patch Changes\n\n- [#1899](https://github.com/clauderic/dnd-kit/pull/1899) [`4341114`](https://github.com/clauderic/dnd-kit/commit/43411143063349caeded4f778923473624ce25cf) Thanks [@hanneskuettner](https://github.com/hanneskuettner)! - Fix modifiers passed to `DragDropProvider` being silently destroyed before they could take effect. An array reference comparison in the modifier lifecycle effect always evaluated to true, causing manager-level modifier instances to be destroyed and reassigned in a broken state on every drag start.\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.3.1\n  - @dnd-kit/state@0.3.1\n\n## 0.3.0\n\n### Minor Changes\n\n- [`6a59647`](https://github.com/clauderic/dnd-kit/commit/6a59647ebba2114b2e423f282ab25bf2ea40318d) Thanks [@clauderic](https://github.com/clauderic)! - Allow `plugins`, `sensors`, and `modifiers` to accept a function that receives the defaults, making it easy to extend or configure them without replacing the entire array.\n\n  ```ts\n  // Add a plugin alongside the defaults\n  const manager = new DragDropManager({\n    plugins: (defaults) => [...defaults, MyPlugin],\n  });\n  ```\n\n  ```tsx\n  // Configure a default plugin in React\n   [\n      ...defaults,\n      Feedback.configure({dropAnimation: null}),\n    ]}\n  />\n  ```\n\n  Previously, passing `plugins`, `sensors`, or `modifiers` would replace the defaults entirely, requiring consumers to import and spread `defaultPreset`. The function form receives the default values as an argument, so consumers can add, remove, or configure individual entries without needing to know or maintain the full default list.\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.3.0\n  - @dnd-kit/state@0.3.0\n\n## 0.2.4\n\n### Patch Changes\n\n- [#1874](https://github.com/clauderic/dnd-kit/pull/1874) [`de27fbc`](https://github.com/clauderic/dnd-kit/commit/de27fbca9df12eece3cd53ccbbac34e0eaf113e1) Thanks [@clauderic](https://github.com/clauderic)! - Expose ergonomic type aliases for drag and drop event handlers: `CollisionEvent`, `BeforeDragStartEvent`, `DragStartEvent`, `DragMoveEvent`, `DragOverEvent`, and `DragEndEvent`. These types are re-exported from `@dnd-kit/dom` and `@dnd-kit/react` for convenience.\n\n- [#1866](https://github.com/clauderic/dnd-kit/pull/1866) [`be7cfe3`](https://github.com/clauderic/dnd-kit/commit/be7cfe3b6cf6a989aefd3e39fd145fe271942b3a) Thanks [@github-actions](https://github.com/apps/github-actions)! - Fix TypeScript type incompatibility when using abstract modifiers (`RestrictToVerticalAxis`, `RestrictToHorizontalAxis`, `SnapModifier`) with DOM or React `DragDropManager`. The `AxisModifier` and `SnapModifier` classes no longer over-constrain their generic manager type parameter.\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.2.4\n  - @dnd-kit/state@0.2.4\n\n## 0.2.3\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.2.3\n  - @dnd-kit/state@0.2.3\n\n## 0.2.2\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.2.2\n  - @dnd-kit/state@0.2.2\n\n## 0.2.1\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.2.1\n  - @dnd-kit/state@0.2.1\n\n## 0.2.0\n\n### Minor Changes\n\n- [#1821](https://github.com/clauderic/dnd-kit/pull/1821) [`e95a9c8`](https://github.com/clauderic/dnd-kit/commit/e95a9c8f448d6b339e0b6fd37546ac7cfdf18edb) Thanks [@clauderic](https://github.com/clauderic)! - - Added `ActivationController` and `ActivationConstraint` primitives for input activation orchestration.\n  - Exported `ActivationConstraints` type for composing multiple constraints.\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.2.0\n  - @dnd-kit/state@0.2.0\n\n## 0.1.21\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.21\n  - @dnd-kit/state@0.1.21\n\n## 0.1.20\n\n### Patch Changes\n\n- Updated dependencies [[`98d4cd4`](https://github.com/clauderic/dnd-kit/commit/98d4cd4047c56589cdf21067526426717bba01c4), [`32448ff`](https://github.com/clauderic/dnd-kit/commit/32448ff11eb3e86a28fc8f6ef7a8a3761e092412)]:\n  - @dnd-kit/state@0.1.20\n  - @dnd-kit/geometry@0.1.20\n\n## 0.1.19\n\n### Patch Changes\n\n- Updated dependencies [[`d848327`](https://github.com/clauderic/dnd-kit/commit/d848327b242c6714b36207071ad30e6b4183e865)]:\n  - @dnd-kit/state@0.1.19\n  - @dnd-kit/geometry@0.1.19\n\n## 0.1.18\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.18\n  - @dnd-kit/state@0.1.18\n\n## 0.1.17\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.17\n  - @dnd-kit/state@0.1.17\n\n## 0.1.16\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.16\n  - @dnd-kit/state@0.1.16\n\n## 0.1.15\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.15\n  - @dnd-kit/state@0.1.15\n\n## 0.1.14\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.14\n  - @dnd-kit/state@0.1.14\n\n## 0.1.13\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.13\n  - @dnd-kit/state@0.1.13\n\n## 0.1.12\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.12\n  - @dnd-kit/state@0.1.12\n\n## 0.1.11\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.11\n  - @dnd-kit/state@0.1.11\n\n## 0.1.10\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.10\n  - @dnd-kit/state@0.1.10\n\n## 0.1.9\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.9\n  - @dnd-kit/state@0.1.9\n\n## 0.1.8\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.8\n  - @dnd-kit/state@0.1.8\n\n## 0.1.7\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.7\n  - @dnd-kit/state@0.1.7\n\n## 0.1.6\n\n### Patch Changes\n\n- [#1671](https://github.com/clauderic/dnd-kit/pull/1671) [`7ceb799`](https://github.com/clauderic/dnd-kit/commit/7ceb799c7d214bc8223ec845357a0040c28ae40e) Thanks [@github-actions](https://github.com/apps/github-actions)! - Fix shape snapshotting in DragOperation\n\n  - Ensure shape is properly snapshotted when creating operation state snapshot\n\n- Updated dependencies [[`299389b`](https://github.com/clauderic/dnd-kit/commit/299389befcc747fe8d79231ba32f73afae88615e)]:\n  - @dnd-kit/state@0.1.6\n  - @dnd-kit/geometry@0.1.6\n\n## 0.1.5\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.5\n  - @dnd-kit/state@0.1.5\n\n## 0.1.4\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.4\n  - @dnd-kit/state@0.1.4\n\n## 0.1.3\n\n### Patch Changes\n\n- [#1663](https://github.com/clauderic/dnd-kit/pull/1663) [`6c9a9ea`](https://github.com/clauderic/dnd-kit/commit/6c9a9ea060095884c90c72cd5d6b73820467ec29) Thanks [@github-actions](https://github.com/apps/github-actions)! - Prevent race conditions in `dragOperation` when `actions.stop()` is invoked before `actions.start()` has completed.\n\n- [#1663](https://github.com/clauderic/dnd-kit/pull/1663) [`1bef872`](https://github.com/clauderic/dnd-kit/commit/1bef8722d515079f998dc0608084e1d853e74d3a) Thanks [@github-actions](https://github.com/apps/github-actions)! - Improve drag operation control by:\n\n  - Introducing `AbortController` for better operation lifecycle management\n  - Remove `requestAnimationFram()` from `start()` action\n  - Replacing boolean returns with proper abort control\n  - Ensure proper cleanup of drag operations\n  - Improving status handling and initialization checks\n  - Making feedback plugin respect operation initialization state\n\n- Updated dependencies [[`8f91d91`](https://github.com/clauderic/dnd-kit/commit/8f91d9112608d2077c3b6c8fc939aa052606148c), [`2522836`](https://github.com/clauderic/dnd-kit/commit/2522836fdb80520913ea35d94c6558bf7784afc9), [`9a0edf6`](https://github.com/clauderic/dnd-kit/commit/9a0edf64cbde1bd761f3650e043b6612e61a5fab), [`a9db4c7`](https://github.com/clauderic/dnd-kit/commit/a9db4c73467d9eda9f95fe5b582948c9fc735f57)]:\n  - @dnd-kit/state@0.1.3\n  - @dnd-kit/geometry@0.1.3\n\n## 0.1.2\n\n### Patch Changes\n\n- [#1658](https://github.com/clauderic/dnd-kit/pull/1658) [`4682570`](https://github.com/clauderic/dnd-kit/commit/4682570a6b80868af0e51b1bbbf902430117df43) Thanks [@github-actions](https://github.com/apps/github-actions)! - Fix handling of aborted drag operations across sensors. The `start` method now returns a boolean to indicate whether the operation was aborted, allowing sensors to properly clean up when a drag operation is prevented. This affects the Keyboard and Pointer sensors, ensuring they properly handle cases where `beforeDragStart` events are prevented.\n\n- [#1658](https://github.com/clauderic/dnd-kit/pull/1658) [`f8d69b0`](https://github.com/clauderic/dnd-kit/commit/f8d69b01f4cf53fc368ef1fca9188c313192928d) Thanks [@github-actions](https://github.com/apps/github-actions)! - Allow `actions.start()` to optionally receive a `source` as input.\n\n- [#1658](https://github.com/clauderic/dnd-kit/pull/1658) [`d04e9a2`](https://github.com/clauderic/dnd-kit/commit/d04e9a2879fb00f092c3f8280c8081a48eebf193) Thanks [@github-actions](https://github.com/apps/github-actions)! - Prevent starting a new drag operation while another one is active by adding a status check in the drag operation manager. This change throws an error if an attempt is made to start a drag operation while another one is in progress.\n\n- [#1658](https://github.com/clauderic/dnd-kit/pull/1658) [`ee55f58`](https://github.com/clauderic/dnd-kit/commit/ee55f582f92dc42cc6eea9ad7492fc782ca6455a) Thanks [@github-actions](https://github.com/apps/github-actions)! - Refactor the drag operation system to improve code organization and maintainability:\n\n  - Split `dragOperation.ts` into multiple focused files:\n    - `operation.ts` - Core drag operation logic\n    - `status.ts` - Status management\n    - `actions.ts` - Drag actions\n  - Update imports and exports to reflect new file structure\n  - Improve type definitions and exports\n\n- Updated dependencies [[`ee55f58`](https://github.com/clauderic/dnd-kit/commit/ee55f582f92dc42cc6eea9ad7492fc782ca6455a)]:\n  - @dnd-kit/state@0.1.2\n  - @dnd-kit/geometry@0.1.2\n\n## 0.1.1\n\n### Patch Changes\n\n- [#1656](https://github.com/clauderic/dnd-kit/pull/1656) [`f13cbc9`](https://github.com/clauderic/dnd-kit/commit/f13cbc978229844770d3c8aa03135e4352ee2532) Thanks [@github-actions](https://github.com/apps/github-actions)! - Add a new `initialization-pending` status to the drag operation lifecycle. This status is set after a dragOperation is initiated but before the `beforedragstart` event fires, which allows consumers to prevent a drag operation from being initialized. This provides better control over the drag operation lifecycle and enables cancellation of drag operations before they are initialized.\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.1\n  - @dnd-kit/state@0.1.1\n\n## 0.1.0\n\n### Minor Changes\n\n- [#1650](https://github.com/clauderic/dnd-kit/pull/1650) [`00a33c9`](https://github.com/clauderic/dnd-kit/commit/00a33c99e777ab205a45309a4efc8b3560bafdaf) Thanks [@MateusJabour](https://github.com/MateusJabour)! - Adds new `data` property to `Collision` type\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.1.0\n  - @dnd-kit/state@0.1.0\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.0.10\n  - @dnd-kit/state@0.0.10\n\n## 0.0.9\n\n### Patch Changes\n\n- [#1600](https://github.com/clauderic/dnd-kit/pull/1600) [`e36d954`](https://github.com/clauderic/dnd-kit/commit/e36d95420148659ba78bdbefd3a0a24ec5d02b8f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Added `nativeEvent` property to `dragstart`, `dragmove` and `dragend` events. This can be used to distinguish user triggered events from sensor triggered events, as user or plugin triggered events will typically not have an associated `event` attached.\n\n- [#1600](https://github.com/clauderic/dnd-kit/pull/1600) [`b7f1cf8`](https://github.com/clauderic/dnd-kit/commit/b7f1cf8f9e15a285c45f896e092f61001335cdff) Thanks [@github-actions](https://github.com/apps/github-actions)! - Fixed a bug in the `CollisionObserver` where the initial set of collisions when a drag operation is initiated were not being set and notified.\n\n- [#1600](https://github.com/clauderic/dnd-kit/pull/1600) [`3e629cc`](https://github.com/clauderic/dnd-kit/commit/3e629cc81dbaf9d112c4f1d2c10c75eb6779cf4e) Thanks [@github-actions](https://github.com/apps/github-actions)! - Added the option to trigger `move` actions that are not propagated to `dragmove` listeners. This can be useful when firing a `dragmove` action in response to another `dragmove` event to avoid an infinite loop.\n\n- [#1600](https://github.com/clauderic/dnd-kit/pull/1600) [`ce31da7`](https://github.com/clauderic/dnd-kit/commit/ce31da736ec5d4f48bab45430be7b57223d60ee7) Thanks [@github-actions](https://github.com/apps/github-actions)! - Added `dragOperation.shape.initial` to the list of dependencies that cause the `transform` and `modifiers` to be re-calculated.\n\n- Updated dependencies [[`60e7297`](https://github.com/clauderic/dnd-kit/commit/60e72979850bfe4cbb8e2b2e2b8e84bce9edc9f5), [`8ae7014`](https://github.com/clauderic/dnd-kit/commit/8ae70143bc404bff7678fa8e8390a640c16f2579)]:\n  - @dnd-kit/geometry@0.0.9\n  - @dnd-kit/state@0.0.9\n\n## 0.0.8\n\n### Patch Changes\n\n- [#1598](https://github.com/clauderic/dnd-kit/pull/1598) [`c9716cf`](https://github.com/clauderic/dnd-kit/commit/c9716cf7b8b846faab451bd2f60c53c77d2d24ba) Thanks [@github-actions](https://github.com/apps/github-actions)! - Added `isDragging` and `isDropping` properties to `draggable` and `sortable` instances.\n\n- [#1598](https://github.com/clauderic/dnd-kit/pull/1598) [`3ea0d31`](https://github.com/clauderic/dnd-kit/commit/3ea0d314649b186bfe0524d50145625da13a8787) Thanks [@github-actions](https://github.com/apps/github-actions)! - Added optional `register` argument to instances of `Entity` to disable automatic registration of instances that have a manager supplied on initialization.\n\n- [#1597](https://github.com/clauderic/dnd-kit/pull/1597) [`3cf4db1`](https://github.com/clauderic/dnd-kit/commit/3cf4db126813ebe6ddfc025df5e42e9bfcfa9c38) Thanks [@clauderic](https://github.com/clauderic)! - Added the `registerEffect` method that can be invoked by sub-classes that extend the base `Plugin` class to register effects and automatically dispose of them when the plugin instance is destroyed.\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.0.8\n  - @dnd-kit/state@0.0.8\n\n## 0.0.7\n\n### Patch Changes\n\n- [#1592](https://github.com/clauderic/dnd-kit/pull/1592) [`c1dadef`](https://github.com/clauderic/dnd-kit/commit/c1dadef118f8f5f096d36dac314bfe317ea950ce) Thanks [@github-actions](https://github.com/apps/github-actions)! - Fire a cancelled `dragend` event when a drag operation is interrupted by the `DragDropManager` being destroyed during an operation.\n\n- [#1592](https://github.com/clauderic/dnd-kit/pull/1592) [`cef9b46`](https://github.com/clauderic/dnd-kit/commit/cef9b46c5ed017e6a601b1d0ee9d0f05b7bbd19f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Fix global modifiers set on `DragDropManager` / `` being destroyed after the first drag operation.\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.0.7\n  - @dnd-kit/state@0.0.7\n\n## 0.0.6\n\n### Patch Changes\n\n- [#1553](https://github.com/clauderic/dnd-kit/pull/1553) [`984b5ab`](https://github.com/clauderic/dnd-kit/commit/984b5ab7bec3145dedb9c9b3b560ffbf7e54b919) Thanks [@chrisvxd](https://github.com/chrisvxd)! - Reconfigure the manager when the input changes.\n\n- [#1567](https://github.com/clauderic/dnd-kit/pull/1567) [`081b7f2`](https://github.com/clauderic/dnd-kit/commit/081b7f2a11da2aad8ce3da7f0579974415d1fdf0) Thanks [@chrisvxd](https://github.com/chrisvxd)! - Add source maps to output.\n\n- [#1454](https://github.com/clauderic/dnd-kit/pull/1454) [`a04d3f8`](https://github.com/clauderic/dnd-kit/commit/a04d3f88d380853b97585ab3b608561f7b02ce69) Thanks [@github-actions](https://github.com/apps/github-actions)! - Rework how collisions are detected and how the position of elements is observed using a new `PositionObserver`.\n\n- [#1454](https://github.com/clauderic/dnd-kit/pull/1454) [`a8542de`](https://github.com/clauderic/dnd-kit/commit/a8542de56d39c3cd3b6ef981172a0782454295b2) Thanks [@github-actions](https://github.com/apps/github-actions)! - Fix issues with `collisionPriority` not being respected.\n\n- [#1454](https://github.com/clauderic/dnd-kit/pull/1454) [`f7458d9`](https://github.com/clauderic/dnd-kit/commit/f7458d9dc32824dbea3a6d5dfb29236f19a2c073) Thanks [@github-actions](https://github.com/apps/github-actions)! - Fixed a bug where the `accept` function of `Droppable` was never invoked if the `draggable` did not have a `type` set.\n\n- [#1454](https://github.com/clauderic/dnd-kit/pull/1454) [`e70b29a`](https://github.com/clauderic/dnd-kit/commit/e70b29ae64837e424f7279c95112fb6e420c4dcc) Thanks [@github-actions](https://github.com/apps/github-actions)! - Make sure the generic for `DragDropManager` is passed through to `Entity` so that the `manager` reference on classes extending `Entity` is strongly typed.\n\n- [#1454](https://github.com/clauderic/dnd-kit/pull/1454) [`4d1a030`](https://github.com/clauderic/dnd-kit/commit/4d1a0306c920ae064eb5b30c4c02961f50460c84) Thanks [@github-actions](https://github.com/apps/github-actions)! - Make sure the cleanup function of effects is invoked when registering a new instance with the same `id` before the old instance has been unregistered.\n\n- [#1454](https://github.com/clauderic/dnd-kit/pull/1454) [`a5933d8`](https://github.com/clauderic/dnd-kit/commit/a5933d8607e63ed08818ffab43e858863cb35d47) Thanks [@github-actions](https://github.com/apps/github-actions)! - Move responsibility from `CollisionObserver` to `CollisionNotifier` to check if the previous collisions are equal to the next collisions.\n\n- [#1454](https://github.com/clauderic/dnd-kit/pull/1454) [`a5a556a`](https://github.com/clauderic/dnd-kit/commit/a5a556abfeec1d78effb3e047f529555e444c020) Thanks [@github-actions](https://github.com/apps/github-actions)! - Fixed React lifecycle regressions related to StrictMode.\n\n- [#1448](https://github.com/clauderic/dnd-kit/pull/1448) [`96f28ef`](https://github.com/clauderic/dnd-kit/commit/96f28ef86adf95e77540732d39033c7f3fb0fd04) Thanks [@lfades](https://github.com/lfades)! - Allow entities to receive a new id during the lifecycle of the entity\n\n- Updated dependencies [[`081b7f2`](https://github.com/clauderic/dnd-kit/commit/081b7f2a11da2aad8ce3da7f0579974415d1fdf0), [`b750c05`](https://github.com/clauderic/dnd-kit/commit/b750c05b4b14f5d9817dc07d974d40b74470e904), [`71dc39f`](https://github.com/clauderic/dnd-kit/commit/71dc39fb2ec21b9a680238a91be419c71ecabe86)]:\n  - @dnd-kit/geometry@0.0.6\n  - @dnd-kit/state@0.0.6\n\n## 0.0.5\n\n### Patch Changes\n\n- [`e9be505`](https://github.com/clauderic/dnd-kit/commit/e9be5051b5c99e522fb6efd028d425220b171890) Thanks [@clauderic](https://github.com/clauderic)! - Fix lifecycle of local modifiers now that it's possible to initialize a Draggable instance without a manager instance.\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.0.5\n  - @dnd-kit/state@0.0.5\n\n## 0.0.4\n\n### Patch Changes\n\n- [#1443](https://github.com/clauderic/dnd-kit/pull/1443) [`2ccc27c`](https://github.com/clauderic/dnd-kit/commit/2ccc27c566b13d6de46719d0ad5978d655261177) Thanks [@clauderic](https://github.com/clauderic)! - Added `status` property to draggable instances to know the current status of a draggable instance. Useful to know if an instance is being dropped.\n\n- [#1443](https://github.com/clauderic/dnd-kit/pull/1443) [`e0d80f5`](https://github.com/clauderic/dnd-kit/commit/e0d80f59c733b3adcf1fc89d29aa80257e7edd98) Thanks [@clauderic](https://github.com/clauderic)! - Refactor the lifecycle to allow `manager` to be optional and provided later during the lifecycle of `draggable` / `droppable` / `sortable` instances.\n\n- [#1443](https://github.com/clauderic/dnd-kit/pull/1443) [`794cf2f`](https://github.com/clauderic/dnd-kit/commit/794cf2f4bdeeb57a197effb1df654c7c44cf34a3) Thanks [@clauderic](https://github.com/clauderic)! - Removed `options` and `options.register` from `Entity` base class. Passing an `undefined` manager when instantiating `Draggable` and `Droppable` now has the same effect.\n\n- Updated dependencies [[`a4d9150`](https://github.com/clauderic/dnd-kit/commit/a4d91500124698abf58355592913f84d438faa3d)]:\n  - @dnd-kit/state@0.0.4\n  - @dnd-kit/geometry@0.0.4\n\n## 0.0.3\n\n### Patch Changes\n\n- [#1440](https://github.com/clauderic/dnd-kit/pull/1440) [`5ccd5e6`](https://github.com/clauderic/dnd-kit/commit/5ccd5e668fb8d736ec3c195116559cb5c5684e80) Thanks [@clauderic](https://github.com/clauderic)! - Add the ability for modifiers to be set dynamically on the `Draggable` instances\n\n- [#1440](https://github.com/clauderic/dnd-kit/pull/1440) [`886de33`](https://github.com/clauderic/dnd-kit/commit/886de33d0df851ebdcb3fcf2915f9623069b06d1) Thanks [@clauderic](https://github.com/clauderic)! - Introduced `SnapModifier` to snap to grid\n\n- Updated dependencies []:\n  - @dnd-kit/geometry@0.0.3\n  - @dnd-kit/state@0.0.3\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`6c84308`](https://github.com/clauderic/dnd-kit/commit/6c84308b45c55ca1324a5c752b0ec117235da9e2)]:\n  - @dnd-kit/state@0.0.2\n  - @dnd-kit/geometry@0.0.2\n"
  },
  {
    "path": "packages/abstract/README.md",
    "content": "# @dnd-kit/abstract\n\n[![Stable release](https://img.shields.io/npm/v/@dnd-kit/abstract.svg)](https://npm.im/@dnd-kit/abstract)\n\nAbstract implementation of @dnd-kit, which can be extended by concrete implementation layers, such as @dnd-kit/dom.\n\n## Overview\n\nThis package provides the core abstractions and utilities for implementing drag and drop functionality. It serves as the foundation for building concrete implementation layers on top of @dnd-kit, such as the [DOM implementation layer](../dom).\n\n> [!NOTE]\n> This package is not meant to be used by most consumers, unless you are planning on building a concrete implementation layer on top of @dnd-kit.\n\n## Core Concepts\n\n### Entities\n\nThe library defines two main entity types:\n\n- **Draggable**: Represents elements that can be dragged\n- **Droppable**: Represents elements that can receive dragged items\n\n### Sensors\n\nSensors are responsible for detecting and initiating drag operations. They handle user interactions and translate them into drag operations. The library provides:\n\n- Abstract `Sensor` base class\n- Support for multiple sensor types\n- Custom sensor configuration\n- Configurable sensor options\n\n### Collision Detection\n\nThe collision system provides:\n\n- Multiple collision detection strategies\n- Priority-based collision resolution\n- Custom collision detectors\n- Collision observation and management\n\n### Plugins\n\nThe plugin system allows extending core functionality:\n\n- Plugin-based architecture\n- Plugin configuration and descriptors\n- Plugin lifecycle management\n\n### Modifiers\n\nModifiers provide a way to transform or modify drag operations:\n\n- Abstract `Modifier` base class\n- Ability to modify coordinates and operations\n- Chainable modifier system\n- Configurable modifier options\n\n## API\n\n### Core Types\n\n- `DragDropManager`: Manages drag and drop state and operations\n- `Draggable`: Interface for draggable elements\n- `Droppable`: Interface for droppable elements\n- `Plugin`: Base class for plugins\n- `Sensor`: Abstract base class for sensors\n- `Modifier`: Abstract base class to modify drag operations\n\n## Contributing\n\nThis package is part of the dnd-kit monorepo. Please refer to the main repository's [contributing guidelines](/CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.\n\n## License\n\nThis package is licensed under the MIT License - see the [LICENSE](/LICENSE) file for details.\n"
  },
  {
    "path": "packages/abstract/package.json",
    "content": "{\n  \"name\": \"@dnd-kit/abstract\",\n  \"version\": \"0.3.2\",\n  \"type\": \"module\",\n  \"main\": \"./index.cjs\",\n  \"module\": \"./index.js\",\n  \"types\": \"./index.d.ts\",\n  \"sideEffects\": false,\n  \"license\": \"MIT\",\n  \"files\": [\n    \"LICENSE\",\n    \"README.md\",\n    \"index.js\",\n    \"index.js.map\",\n    \"index.d.ts\",\n    \"index.d.cts\",\n    \"index.cjs\",\n    \"index.cjs.map\",\n    \"modifiers.js\",\n    \"modifiers.js.map\",\n    \"modifiers.d.ts\",\n    \"modifiers.d.cts\",\n    \"modifiers.cjs\",\n    \"modifiers.cjs.map\"\n  ],\n  \"exports\": {\n    \".\": {\n      \"types\": \"./index.d.ts\",\n      \"import\": \"./index.js\",\n      \"require\": \"./index.cjs\"\n    },\n    \"./modifiers\": {\n      \"types\": \"./modifiers.d.ts\",\n      \"import\": \"./modifiers.js\",\n      \"require\": \"./modifiers.cjs\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"bun build:core && bun build:modifiers\",\n    \"build:core\": \"tsup src/core/index.ts\",\n    \"build:modifiers\": \"tsup --entry.modifiers src/modifiers/index.ts\",\n    \"dev\": \"bun build:core --watch & bun build:modifiers --watch\",\n    \"test\": \"bun test\",\n    \"lint\": \"TIMING=1 eslint src/**/*.ts* --fix\",\n    \"clean\": \"rm -rf .turbo && rm -rf node_modules && rm -rf dist\"\n  },\n  \"dependencies\": {\n    \"@dnd-kit/geometry\": \"^0.3.2\",\n    \"@dnd-kit/state\": \"^0.3.2\",\n    \"tslib\": \"^2.6.2\"\n  },\n  \"devDependencies\": {\n    \"@dnd-kit/eslint-config\": \"*\",\n    \"eslint\": \"^8.38.0\",\n    \"tsup\": \"8.3.0\",\n    \"typescript\": \"^5.5.2\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/clauderic/dnd-kit\"\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/collision/index.ts",
    "content": "export {CollisionObserver} from './observer.ts';\nexport {CollisionNotifier} from './notifier.ts';\nexport {sortCollisions} from './utilities.ts';\nexport * from './types.ts';\n"
  },
  {
    "path": "packages/abstract/src/core/collision/notifier.ts",
    "content": "import {effects, untracked} from '@dnd-kit/state';\n\nimport {Entity} from '../entities/index.ts';\nimport {DragDropManager} from '../manager/index.ts';\nimport {CorePlugin} from '../plugins/index.ts';\nimport {defaultPreventable} from '../manager/events.ts';\n\nimport type {Collision} from './types.ts';\n\nexport class CollisionNotifier extends CorePlugin {\n  constructor(manager: DragDropManager) {\n    super(manager);\n\n    const isEqual = (a: Collision[], b: Collision[]) =>\n      a.map(({id}) => id).join('') === b.map(({id}) => id).join('');\n\n    let previousCollisions: Collision[] = [];\n\n    this.destroy = effects(\n      () => {\n        const {dragOperation, collisionObserver} = manager;\n\n        if (dragOperation.status.initializing) {\n          previousCollisions = [];\n          collisionObserver.enable();\n        }\n      },\n      () => {\n        const {collisionObserver, monitor} = manager;\n        const {collisions} = collisionObserver;\n\n        if (collisionObserver.isDisabled()) {\n          return;\n        }\n\n        if (Entity.pendingIdChanges) {\n          return;\n        }\n\n        const event = defaultPreventable({\n          collisions,\n        });\n\n        monitor.dispatch('collision', event);\n\n        if (event.defaultPrevented) {\n          return;\n        }\n\n        if (isEqual(collisions, previousCollisions)) {\n          return;\n        } else {\n          previousCollisions = collisions;\n        }\n\n        const [firstCollision] = collisions;\n\n        untracked(() => {\n          if (firstCollision?.id !== manager.dragOperation.target?.id) {\n            collisionObserver.disable();\n\n            manager.actions.setDropTarget(firstCollision?.id).then(() => {\n              collisionObserver.enable();\n            });\n          }\n        });\n      }\n    );\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/collision/observer.ts",
    "content": "import {signal, untracked, type Signal, effects} from '@dnd-kit/state';\nimport type {Coordinates} from '@dnd-kit/geometry';\n\nimport type {DragDropManager} from '../manager/index.ts';\nimport type {Draggable, Droppable} from '../entities/index.ts';\nimport {Plugin} from '../plugins/index.ts';\nimport type {Collision, CollisionDetector, Collisions} from './types.ts';\nimport {sortCollisions} from './utilities.ts';\n\nconst DEFAULT_VALUE: Collisions = [];\n\n/**\n * Observes and manages collision detection between draggable and droppable elements.\n *\n * @template T - The type of draggable entities\n * @template U - The type of droppable entities\n * @template V - The type of drag drop manager\n *\n * @remarks\n * The CollisionObserver is responsible for:\n * - Computing collisions between draggable and droppable elements\n * - Maintaining a signal of current collisions\n * - Updating collision state based on drag operation changes\n */\nexport class CollisionObserver<\n  T extends Draggable = Draggable,\n  U extends Droppable = Droppable,\n  V extends DragDropManager = DragDropManager,\n> extends Plugin {\n  /**\n   * Creates a new CollisionObserver instance.\n   *\n   * @param manager - The drag drop manager instance\n   */\n  constructor(manager: V) {\n    super(manager);\n\n    this.computeCollisions = this.computeCollisions.bind(this);\n    this.#collisions = signal(DEFAULT_VALUE);\n\n    this.destroy = effects(\n      () => {\n        const collisions = this.computeCollisions();\n        const coordinates = untracked(\n          () => this.manager.dragOperation.position.current\n        );\n\n        if (collisions !== DEFAULT_VALUE) {\n          const previousCoordinates = this.#previousCoordinates;\n          this.#previousCoordinates = coordinates;\n\n          if (\n            previousCoordinates &&\n            coordinates.x == previousCoordinates.x &&\n            coordinates.y == previousCoordinates.y\n          ) {\n            return;\n          }\n        } else {\n          this.#previousCoordinates = undefined;\n        }\n\n        this.#collisions.value = collisions;\n      },\n      () => {\n        const {dragOperation} = this.manager;\n\n        if (dragOperation.status.initialized) {\n          this.forceUpdate();\n        }\n      }\n    );\n  }\n\n  #previousCoordinates: Coordinates | undefined;\n\n  /**\n   * Forces an immediate update of collision detection.\n   *\n   * @param immediate - If true, updates collisions immediately. If false, resets previous coordinates.\n   */\n  public forceUpdate(immediate = true) {\n    untracked(() => {\n      if (immediate) {\n        this.#collisions.value = this.computeCollisions();\n      } else {\n        this.#previousCoordinates = undefined;\n      }\n    });\n  }\n\n  /**\n   * Computes collisions between draggable and droppable elements.\n   *\n   * @param entries - Optional array of droppable elements to check. If not provided, uses all registered droppables.\n   * @param collisionDetector - Optional custom collision detector function\n   * @returns Array of detected collisions, sorted by priority\n   */\n  public computeCollisions(\n    entries?: Droppable[],\n    collisionDetector?: CollisionDetector\n  ) {\n    const {registry, dragOperation} = this.manager;\n    const {source, shape, status} = dragOperation;\n\n    if (!status.initialized || !shape) {\n      return DEFAULT_VALUE;\n    }\n\n    const collisions: Collision[] = [];\n    const potentialTargets = [];\n\n    for (const entry of entries ?? registry.droppables) {\n      if (entry.disabled) {\n        continue;\n      }\n\n      if (source && !entry.accepts(source)) {\n        continue;\n      }\n\n      const detectCollision = collisionDetector ?? entry.collisionDetector;\n\n      if (!detectCollision) {\n        continue;\n      }\n\n      potentialTargets.push(entry);\n\n      // Force collisions to be recomputed when the shape changes\n      void entry.shape;\n\n      const collision = untracked(() =>\n        detectCollision({\n          droppable: entry,\n          dragOperation,\n        })\n      );\n\n      if (collision) {\n        if (entry.collisionPriority != null) {\n          collision.priority = entry.collisionPriority;\n        }\n\n        collisions.push(collision);\n      }\n    }\n\n    if (potentialTargets.length === 0) {\n      return DEFAULT_VALUE;\n    }\n\n    collisions.sort(sortCollisions);\n\n    return collisions;\n  }\n\n  /**\n   * Gets the current collisions signal value.\n   */\n  public get collisions() {\n    return this.#collisions.value;\n  }\n\n  #collisions: Signal;\n}\n"
  },
  {
    "path": "packages/abstract/src/core/collision/types.ts",
    "content": "import type {DragOperation} from '../manager/index.ts';\nimport type {\n  Draggable,\n  Droppable,\n  UniqueIdentifier,\n} from '../entities/index.ts';\n\n/**\n * Priority levels for collision detection.\n *\n * @remarks\n * Higher priority collisions take precedence over lower priority ones.\n * Custom numeric priorities can also be used for fine-grained control.\n */\nexport enum CollisionPriority {\n  /** Lowest priority level */\n  Lowest,\n  /** Low priority level */\n  Low,\n  /** Normal priority level */\n  Normal,\n  /** High priority level */\n  High,\n  /** Highest priority level */\n  Highest,\n}\n\n/**\n * Types of collision detection.\n *\n * @remarks\n * Different collision types can be used to implement various\n * drag and drop behaviors and visual feedback.\n */\nexport enum CollisionType {\n  /** Basic collision detection */\n  Collision,\n  /** Shape-based intersection detection */\n  ShapeIntersection,\n  /** Pointer-based intersection detection */\n  PointerIntersection,\n}\n\n/**\n * Represents a detected collision between a draggable and droppable.\n *\n * @remarks\n * Contains information about the collision type, priority, and\n * additional data that can be used for custom behaviors.\n */\nexport interface Collision {\n  /** Unique identifier of the droppable involved in the collision */\n  id: UniqueIdentifier;\n  /** Priority of the collision */\n  priority: CollisionPriority | number;\n  /** Type of collision detected */\n  type: CollisionType;\n  /** Numeric value representing the collision strength or overlap */\n  value: number;\n  /** Additional data associated with the collision */\n  data?: Record;\n}\n\n/** Array of detected collisions */\nexport type Collisions = Collision[];\n\n/**\n * Input for collision detection functions.\n *\n * @template T - The type of draggable entities\n * @template U - The type of droppable entities\n */\nexport interface CollisionDetectorInput<\n  T extends Draggable = Draggable,\n  U extends Droppable = Droppable,\n> {\n  /** The droppable to check for collisions */\n  droppable: U;\n  /** The current drag operation state */\n  dragOperation: DragOperation;\n}\n\n/**\n * Function type for detecting collisions between draggables and droppables.\n *\n * @template T - The type of draggable entities\n * @template U - The type of droppable entities\n * @param input - The collision detection input\n * @returns A collision object if detected, null otherwise\n */\nexport type CollisionDetector = <\n  T extends Draggable = Draggable,\n  U extends Droppable = Droppable,\n>(\n  input: CollisionDetectorInput\n) => Collision | null;\n"
  },
  {
    "path": "packages/abstract/src/core/collision/utilities.ts",
    "content": "import {Collision} from './types.ts';\n\n/**\n * Sort collisions from greatest to smallest priority\n * Collisions of equal priority are sorted from greatest to smallest value\n */\nexport function sortCollisions(a: Collision, b: Collision) {\n  if (a.priority === b.priority) {\n    if (a.type === b.type) {\n      return b.value - a.value;\n    }\n\n    return b.type - a.type;\n  }\n\n  return b.priority - a.priority;\n}\n"
  },
  {
    "path": "packages/abstract/src/core/entities/draggable/draggable.ts",
    "content": "import {derived, reactive} from '@dnd-kit/state';\nimport type {Alignment} from '@dnd-kit/geometry';\n\nimport {Entity} from '../entity/index.ts';\nimport type {EntityInput, Data, Type} from '../entity/index.ts';\nimport type {Modifiers} from '../../modifiers/index.ts';\nimport type {DragDropManager} from '../../manager/index.ts';\nimport type {Sensors} from '../../sensors/sensor.ts';\nimport type {\n  Plugins,\n  PluginConstructor,\n  PluginDescriptor,\n} from '../../plugins/index.ts';\nimport {descriptor as toDescriptor} from '../../plugins/index.ts';\n\n/**\n * Input configuration for creating a draggable entity.\n *\n * @template T - The type of data associated with the draggable\n *\n * @remarks\n * Extends the base entity input with draggable-specific configuration:\n * - Type for categorization\n * - Sensors for handling drag interactions\n * - Modifiers for transforming drag behavior\n * - Alignment for positioning\n */\nexport interface Input extends EntityInput {\n  type?: Type;\n  sensors?: Sensors;\n  modifiers?: Modifiers;\n  alignment?: Alignment;\n  plugins?: Plugins;\n}\n\n/**\n * Possible status values for a draggable entity.\n *\n * @remarks\n * - idle: Not being dragged\n * - dragging: Currently being dragged\n * - dropping: Currently being dropped\n */\nexport type DraggableStatus = 'idle' | 'dragging' | 'dropping';\n\n/**\n * Represents an entity that can be dragged in a drag and drop operation.\n *\n * @template T - The type of data associated with the draggable\n * @template U - The type of drag and drop manager\n *\n * @remarks\n * This class extends the base Entity class with draggable-specific functionality:\n * - Type-based categorization\n * - Sensor-based interaction handling\n * - Modifier-based behavior transformation\n * - Status tracking during drag operations\n */\nexport class Draggable<\n  T extends Data = Data,\n  U extends DragDropManager = DragDropManager,\n> extends Entity {\n  constructor(\n    {modifiers, type, sensors, plugins, effects, ...input}: Input,\n    manager: U | undefined\n  ) {\n    super(\n      {\n        ...input,\n        effects: () => [\n          ...(effects?.() ?? []),\n          () => {\n            const {manager, plugins} = this;\n            if (!manager || !plugins) return;\n\n            for (const entry of plugins) {\n              const {plugin} = toDescriptor(entry);\n              manager.registry.plugins.register(plugin);\n            }\n          },\n        ],\n      },\n      manager\n    );\n\n    this.type = type;\n    this.sensors = sensors;\n    this.modifiers = modifiers;\n    this.alignment = input.alignment;\n    this.plugins = plugins;\n  }\n\n  /** The type of the draggable entity */\n  @reactive\n  public accessor type: Type | undefined;\n\n  /** The sensors associated with the draggable entity */\n  public sensors: Sensors | undefined;\n\n  /** The modifiers associated with the draggable entity */\n  @reactive\n  public accessor modifiers: Modifiers | undefined;\n\n  /** The alignment of the draggable entity */\n  public alignment: Alignment | undefined;\n\n  /** Per-entity plugin configuration descriptors */\n  public plugins: Plugins | undefined;\n\n  /**\n   * Look up per-entity options for a given plugin constructor.\n   */\n  public pluginConfig
    (\n    plugin: P\n  ): PluginDescriptor['options'] | undefined {\n    if (!this.plugins) return undefined;\n\n    for (const entry of this.plugins) {\n      const desc = toDescriptor(entry);\n      if (desc.plugin === plugin) return desc.options;\n    }\n\n    return undefined;\n  }\n\n  /** The current status of the draggable entity */\n  @reactive\n  public accessor status: DraggableStatus = this.isDragSource\n    ? 'dragging'\n    : 'idle';\n\n  /**\n   * Checks if the draggable entity is currently being dropped.\n   *\n   * @returns true if the entity is being dropped and is the drag source\n   */\n  @derived\n  public get isDropping() {\n    return this.status === 'dropping' && this.isDragSource;\n  }\n\n  /**\n   * Checks if the draggable entity is currently being dragged.\n   *\n   * @returns true if the entity is being dragged and is the drag source\n   */\n  @derived\n  public get isDragging() {\n    return this.status === 'dragging' && this.isDragSource;\n  }\n\n  /**\n   * Checks if the draggable entity is the source of the current drag operation.\n   *\n   * @returns true if the entity's ID matches the current drag operation's source ID\n   */\n  @derived\n  public get isDragSource() {\n    return this.manager?.dragOperation.source?.id === this.id;\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/entities/draggable/index.ts",
    "content": "export {Draggable} from './draggable.ts';\nexport type {Input as DraggableInput} from './draggable.ts';\n"
  },
  {
    "path": "packages/abstract/src/core/entities/droppable/droppable.ts",
    "content": "import {derived, effects, reactive, type Effect} from '@dnd-kit/state';\nimport type {Shape} from '@dnd-kit/geometry';\n\nimport {Entity} from '../entity/index.ts';\nimport type {EntityInput, Data, Type} from '../entity/index.ts';\nimport {\n  CollisionPriority,\n  type CollisionDetector,\n} from '../../collision/index.ts';\nimport type {DragDropManager} from '../../manager/index.ts';\nimport {Draggable} from '../draggable/draggable.ts';\n\n/**\n * Input configuration for creating a droppable entity.\n *\n * @template T - The type of data associated with the droppable\n *\n * @remarks\n * Extends the base entity input with droppable-specific configuration:\n * - Accept rules for determining compatible draggables\n * - Collision detection configuration\n * - Type for categorization\n */\nexport interface Input extends EntityInput {\n  /** Types of draggables that can be dropped here, or a function to determine compatibility */\n  accept?: Type | Type[] | ((source: Draggable) => boolean);\n  /** Priority for collision detection */\n  collisionPriority?: CollisionPriority | number;\n  /** Detector for determining collisions with draggables */\n  collisionDetector: CollisionDetector;\n  /** Type for categorization */\n  type?: Type;\n}\n\n/**\n * Represents an entity that can receive draggable items in a drag and drop operation.\n *\n * @template T - The type of data associated with the droppable\n * @template U - The type of drag and drop manager\n *\n * @remarks\n * This class extends the base Entity class with droppable-specific functionality:\n * - Type-based acceptance rules\n * - Collision detection\n * - Shape tracking\n * - Target status tracking\n */\nexport class Droppable<\n  T extends Data = Data,\n  U extends DragDropManager = DragDropManager,\n> extends Entity {\n  constructor(\n    {accept, collisionDetector, collisionPriority, type, ...input}: Input,\n    manager: U | undefined\n  ) {\n    super(input, manager);\n\n    this.accept = accept;\n    this.collisionDetector = collisionDetector;\n    this.collisionPriority = collisionPriority;\n    this.type = type;\n  }\n\n  /**\n   * Types of draggables that can be dropped here, or a function to determine compatibility.\n   *\n   * @remarks\n   * If undefined, all draggables are accepted.\n   * If a function, it determines compatibility based on the draggable.\n   * If a type or array of types, only draggables of matching types are accepted.\n   */\n  @reactive\n  public accessor accept:\n    | Type\n    | Type[]\n    | ((draggable: Draggable) => boolean)\n    | undefined;\n\n  /** The type of the droppable entity */\n  @reactive\n  public accessor type: Type | undefined;\n\n  /**\n   * Checks whether or not the droppable accepts a given draggable.\n   *\n   * @param draggable - The draggable to check\n   * @returns true if the draggable can be dropped here\n   */\n  public accepts(draggable: Draggable): boolean {\n    const {accept} = this;\n\n    if (!accept) {\n      return true;\n    }\n\n    if (typeof accept === 'function') {\n      return accept(draggable);\n    }\n\n    if (!draggable.type) {\n      return false;\n    }\n\n    if (Array.isArray(accept)) {\n      return accept.includes(draggable.type);\n    }\n\n    return draggable.type === accept;\n  }\n\n  /** The collision detector for this droppable */\n  @reactive\n  public accessor collisionDetector: CollisionDetector;\n\n  /** The collision priority for this droppable */\n  @reactive\n  public accessor collisionPriority: CollisionPriority | number | undefined;\n\n  /** The current shape of this droppable */\n  @reactive\n  public accessor shape: Shape | undefined;\n\n  /**\n   * Checks if this droppable is the current drop target.\n   *\n   * @returns true if this droppable's ID matches the current drag operation's target ID\n   */\n  @derived\n  public get isDropTarget() {\n    return this.manager?.dragOperation.target?.id === this.id;\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/entities/droppable/index.ts",
    "content": "export {Droppable} from './droppable.ts';\nexport type {Input as DroppableInput} from './droppable.ts';\n"
  },
  {
    "path": "packages/abstract/src/core/entities/entity/entity.ts",
    "content": "import {\n  batch,\n  CleanupFunction,\n  reactive,\n  signal,\n  type Signal,\n  type Effect,\n} from '@dnd-kit/state';\n\nimport {DragDropManager} from '../../manager/index.ts';\nimport type {Data, UniqueIdentifier} from './types.ts';\n\nexport interface Input {\n  /**\n   * The unique identifier of the entity.\n   */\n  id: UniqueIdentifier;\n  /**\n   * Optional data associated with the entity.\n   */\n  data?: T;\n  /**\n   * Whether the entity should initially be disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the entity should be automatically registered with the manager when it is created.\n   * @default true\n   */\n  register?: boolean;\n  /**\n   * An array of effects that are set up when the entity is registered and cleaned up when it is unregistered.\n   */\n  effects?(): Effect[];\n}\n\n/**\n * The `Entity` class is an abstract representation of a distinct unit in the drag and drop system.\n * It is a base class that other concrete classes like `Draggable` and `Droppable` can extend.\n *\n * @template T - The type of data associated with the entity.\n */\nexport class Entity<\n  T extends Data = Data,\n  U extends DragDropManager = DragDropManager,\n> {\n  static pendingIdChanges: Map | null = null;\n\n  static #flushIdChanges() {\n    const changes = Entity.pendingIdChanges;\n    Entity.pendingIdChanges = null;\n\n    if (changes) {\n      batch(() => {\n        for (const [entity, id] of changes) {\n          entity.#idSignal.value = id;\n        }\n      });\n    }\n  }\n\n  /**\n   * Creates a new instance of the `Entity` class.\n   *\n   * @param input - An object containing the initial properties of the entity.\n   * @param manager - The manager that controls the drag and drop operations.\n   */\n  constructor(input: Input, manager: U | undefined) {\n    const {effects, id, data = {} as T, disabled = false, register = true} = input;\n\n    let previousId = id;\n\n    this.#idSignal = signal(id);\n    this.manager = manager;\n    this.data = data;\n    this.disabled = disabled;\n    this.effects = () => [\n      () => {\n        const {id, manager} = this;\n\n        if (id === previousId) {\n          return;\n        }\n\n        previousId = id;\n        manager?.registry.register(this);\n\n        return () => manager?.registry.unregister(this);\n      },\n      ...(effects?.() ?? []),\n    ];\n\n    this.register = this.register.bind(this);\n    this.unregister = this.unregister.bind(this);\n    this.destroy = this.destroy.bind(this);\n\n    if (manager && register) {\n      queueMicrotask(this.register);\n    }\n  }\n\n  /**\n   * The manager that controls the drag and drop operations.\n   */\n  @reactive\n  public accessor manager: U | undefined;\n\n  /**\n   * The unique identifier of the entity.\n   *\n   * Setting this property defers the signal update to a microtask,\n   * batching multiple id changes together atomically. This ensures\n   * that when entities swap ids (e.g. during sorting with virtualization),\n   * all registry updates happen in a single transaction.\n   */\n  #idSignal: Signal;\n\n  public get id(): UniqueIdentifier {\n    const signalValue = this.#idSignal.value;\n    return Entity.pendingIdChanges?.get(this) ?? signalValue;\n  }\n\n  public set id(value: UniqueIdentifier) {\n    const current = Entity.pendingIdChanges?.get(this) ?? this.#idSignal.peek();\n    if (value === current) return;\n\n    if (!Entity.pendingIdChanges) {\n      Entity.pendingIdChanges = new Map();\n      queueMicrotask(() => Entity.#flushIdChanges());\n    }\n\n    Entity.pendingIdChanges.set(this, value);\n  }\n\n  /**\n   * The data associated with the entity.\n   */\n  @reactive\n  public accessor data: T;\n\n  /**\n   * A boolean indicating whether the entity is disabled.\n   */\n  @reactive\n  public accessor disabled: boolean;\n\n  /**\n   * An array of effects that are applied to the entity.\n   */\n  public effects: () => Effect[];\n\n  /**\n   * A method that registers the entity with the manager.\n   * @returns CleanupFunction | void\n   */\n  public register(): CleanupFunction | void {\n    return this.manager?.registry.register(this);\n  }\n\n  /**\n   * A method that unregisters the entity from the manager.\n   * @returns void\n   */\n  public unregister(): void {\n    this.manager?.registry.unregister(this);\n  }\n\n  /**\n   * A method that cleans up the entity when it is no longer needed.\n   * @returns void\n   */\n  public destroy(): void {\n    this.manager?.registry.unregister(this);\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/entities/entity/index.ts",
    "content": "export {Entity} from './entity.ts';\nexport type {Input as EntityInput} from './entity.ts';\n\nexport type {Data, Type, UniqueIdentifier} from './types.ts';\n\nexport {EntityRegistry} from './registry.ts';\n"
  },
  {
    "path": "packages/abstract/src/core/entities/entity/registry.ts",
    "content": "import {effects, signal} from '@dnd-kit/state';\n\nimport type {Entity} from './entity.ts';\nimport type {UniqueIdentifier} from './types.ts';\n\n/**\n * Reactive class representing a registry for entities.\n * @template T - The type of entries that the registry manages,\n * for example, `Draggable` or `Droppable` entities.\n */\nexport class EntityRegistry {\n  private map = signal>(new Map());\n  private cleanupFunctions = new WeakMap void>();\n\n  /**\n   * Iterator for the EntityRegistry class.\n   * @returns An iterator for the values in the map.\n   */\n  public [Symbol.iterator]() {\n    return this.map.peek().values();\n  }\n\n  public get value() {\n    return this.map.value.values();\n  }\n\n  /**\n   * Checks if a entity with the given identifier exists in the registry.\n   * @param identifier - The unique identifier of the entity.\n   * @returns True if the entity exists, false otherwise.\n   */\n  public has(identifier: UniqueIdentifier): boolean {\n    return this.map.value.has(identifier);\n  }\n\n  /**\n   * Retrieves a entity from the registry using its identifier.\n   * @param identifier - The unique identifier of the entity.\n   * @returns The entity if it exists, undefined otherwise.\n   */\n  public get(identifier: UniqueIdentifier): T | undefined {\n    return this.map.value.get(identifier);\n  }\n\n  /**\n   * Registers a entity in the registry.\n   * @param key - The unique identifier of the entity.\n   * @param value - The entity to register.\n   * @returns A function that unregisters the entity.\n   */\n  public register = (key: UniqueIdentifier, value: T) => {\n    const current = this.map.peek();\n    const currentValue = current.get(key);\n    const unregister = () => this.unregister(key, value);\n\n    if (currentValue === value) return unregister;\n\n    if (currentValue) {\n      if (currentValue.id === key) {\n        const cleanup = this.cleanupFunctions.get(currentValue);\n        cleanup?.();\n        this.cleanupFunctions.delete(currentValue);\n      }\n    }\n\n    const updatedMap = new Map(current);\n\n    // Remove ghost registrations: if this entity exists at a different key\n    // (stale entry from before its id changed), clean it up\n    for (const [existingKey, existingValue] of current) {\n      if (existingValue === value && existingKey !== key) {\n        updatedMap.delete(existingKey);\n        break;\n      }\n    }\n\n    updatedMap.set(key, value);\n\n    this.map.value = updatedMap;\n\n    const cleanup = effects(...value.effects());\n    this.cleanupFunctions.set(value, cleanup);\n\n    return unregister;\n  };\n\n  /**\n   * Unregisters an entity from the registry.\n   * @param key - The unique identifier of the entity.\n   * @param value - The entity instance to unregister.\n   */\n  public unregister = (key: UniqueIdentifier, value: T) => {\n    const current = this.map.peek();\n\n    if (current.get(key) !== value) {\n      return;\n    }\n\n    const cleanup = this.cleanupFunctions.get(value);\n    cleanup?.();\n    this.cleanupFunctions.delete(value);\n\n    const updatedMap = new Map(current);\n    updatedMap.delete(key);\n\n    this.map.value = updatedMap;\n  };\n\n  /**\n   * Destroys all entries in the registry and clears the registry.\n   */\n  public destroy() {\n    for (const entry of this) {\n      const cleanup = this.cleanupFunctions.get(entry);\n      cleanup?.();\n      entry.destroy();\n    }\n\n    this.map.value = new Map();\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/entities/entity/types.ts",
    "content": "/**\n * Type representing arbitrary data associated with an entity.\n *\n * @remarks\n * This type is used to store additional information about entities\n * that can be accessed during drag and drop operations.\n */\nexport type Data = Record;\n\n/**\n * Type representing a unique identifier for an entity.\n *\n * @remarks\n * This type is used to uniquely identify draggable and droppable entities\n * within the drag and drop system.\n */\nexport type UniqueIdentifier = string | number;\n\n/**\n * Type representing the type of an entity.\n *\n * @remarks\n * This type is used to categorize entities and can be used to\n * implement type-based filtering or matching.\n */\nexport type Type = Symbol | string | number;\n"
  },
  {
    "path": "packages/abstract/src/core/entities/index.ts",
    "content": "export * from './entity/index.ts';\nexport * from './draggable/index.ts';\nexport * from './droppable/index.ts';\n"
  },
  {
    "path": "packages/abstract/src/core/index.ts",
    "content": "export {\n  DragDropManager,\n  DragOperationStatus,\n  resolveCustomizable,\n} from './manager/index.ts';\nexport type {\n  DragDropManagerInput,\n  Customizable,\n  DragActions,\n  DragDropEventMap,\n  DragDropEventHandlers,\n  CollisionEvent,\n  BeforeDragStartEvent,\n  DragStartEvent,\n  DragMoveEvent,\n  DragOverEvent,\n  DragEndEvent,\n  DragOperation,\n  Renderer,\n} from './manager/index.ts';\n\nexport {\n  CollisionPriority,\n  CollisionType,\n  sortCollisions,\n} from './collision/index.ts';\nexport type {Collision, CollisionDetector} from './collision/index.ts';\n\nexport {Modifier} from './modifiers/index.ts';\nexport type {Modifiers, ModifierConstructor} from './modifiers/index.ts';\n\nexport {Draggable, Droppable} from './entities/index.ts';\nexport type {\n  Data,\n  DraggableInput,\n  DroppableInput,\n  Entity,\n  Type,\n  UniqueIdentifier,\n} from './entities/index.ts';\n\nexport {\n  Plugin,\n  PluginRegistry,\n  CorePlugin,\n  configure,\n  configurator,\n  descriptor,\n} from './plugins/index.ts';\nexport type {\n  Plugins,\n  PluginConstructor,\n  PluginDescriptor,\n  PluginOptions,\n} from './plugins/index.ts';\n\nexport {\n  ActivationConstraint,\n  ActivationController,\n  Sensor,\n} from './sensors/index.ts';\nexport type {\n  ActivationConstraints,\n  Sensors,\n  SensorConstructor,\n  SensorDescriptor,\n  SensorOptions,\n} from './sensors/index.ts';\n"
  },
  {
    "path": "packages/abstract/src/core/manager/actions.ts",
    "content": "import type {Coordinates} from '@dnd-kit/geometry';\nimport {batch, effect, untracked} from '@dnd-kit/state';\n\nimport type {\n  Draggable,\n  Droppable,\n  UniqueIdentifier,\n} from '../entities/index.ts';\n\nimport type {DragDropManager} from './manager.ts';\nimport {defaultPreventable} from './events.ts';\nimport {StatusValue} from './status.ts';\n\n/**\n * Provides actions for controlling drag and drop operations.\n *\n * @template T - The type of draggable entities\n * @template U - The type of droppable entities\n * @template V - The type of drag and drop manager\n */\nexport class DragActions<\n  T extends Draggable,\n  U extends Droppable,\n  V extends DragDropManager,\n> {\n  /**\n   * Creates a new instance of drag actions.\n   *\n   * @param manager - The drag and drop manager instance\n   */\n  constructor(private readonly manager: V) {}\n\n  /**\n   * Sets the source of the drag operation.\n   *\n   * @param source - The draggable entity or its unique identifier\n   */\n  setDragSource(source: T | UniqueIdentifier) {\n    const {dragOperation} = this.manager;\n    dragOperation.sourceIdentifier =\n      typeof source === 'string' || typeof source === 'number'\n        ? source\n        : source.id;\n  }\n\n  /**\n   * Sets the target of the drop operation.\n   *\n   * @param identifier - The unique identifier of the droppable entity or null/undefined\n   * @returns A promise that resolves to true if the drop was prevented\n   */\n  setDropTarget(\n    identifier: UniqueIdentifier | null | undefined\n  ): Promise {\n    return untracked(() => {\n      const {dragOperation} = this.manager;\n      const id = identifier ?? null;\n\n      if (dragOperation.targetIdentifier === id) {\n        return Promise.resolve(false);\n      }\n\n      dragOperation.targetIdentifier = id;\n\n      const event = defaultPreventable({\n        operation: dragOperation.snapshot(),\n      });\n\n      if (dragOperation.status.dragging) {\n        this.manager.monitor.dispatch('dragover', event);\n      }\n\n      return this.manager.renderer.rendering.then(() => event.defaultPrevented);\n    });\n  }\n\n  /**\n   * Starts a new drag operation.\n   *\n   * @param args - Configuration for the drag operation\n   * @param args.event - The event that initiated the drag\n   * @param args.source - The source draggable entity or its identifier\n   * @param args.coordinates - The initial coordinates of the drag\n   * @returns true if the drag operation started successfully\n   * @throws {Error} If there is no drag source or another operation is active\n   */\n  start(args: {\n    /** The event that initiated the drag. */\n    event?: Event;\n    /** The source draggable entity or its identifier. */\n    source?: T | UniqueIdentifier;\n    /** The initial coordinates of the drag. */\n    coordinates: Coordinates;\n  }): AbortController {\n    return untracked(() => {\n      const {dragOperation} = this.manager;\n\n      if (args.source != null) {\n        this.setDragSource(args.source);\n      }\n\n      const sourceInstance = dragOperation.source;\n\n      if (!sourceInstance) {\n        throw new Error('Cannot start a drag operation without a drag source');\n      }\n\n      if (!dragOperation.status.idle) {\n        throw new Error(\n          'Cannot start a drag operation while another is active'\n        );\n      }\n\n      const controller = new AbortController();\n\n      const {event: nativeEvent, coordinates} = args;\n\n      batch(() => {\n        dragOperation.status.set(StatusValue.InitializationPending);\n        dragOperation.shape = null;\n        dragOperation.canceled = false;\n        dragOperation.activatorEvent = nativeEvent ?? null;\n        dragOperation.position.reset(coordinates);\n      });\n\n      const beforeStartEvent = defaultPreventable({\n        operation: dragOperation.snapshot(),\n      });\n\n      this.manager.monitor.dispatch('beforedragstart', beforeStartEvent);\n\n      if (beforeStartEvent.defaultPrevented) {\n        dragOperation.reset();\n        controller.abort();\n        return controller;\n      }\n\n      dragOperation.status.set(StatusValue.Initializing);\n      dragOperation.controller = controller;\n\n      this.manager.renderer.rendering.then(() => {\n        if (controller.signal.aborted) return;\n\n        const {status} = dragOperation;\n        if (status.current !== StatusValue.Initializing) return;\n\n        dragOperation.status.set(StatusValue.Dragging);\n\n        this.manager.monitor.dispatch('dragstart', {\n          nativeEvent,\n          operation: dragOperation.snapshot(),\n          cancelable: false,\n        });\n      });\n\n      return controller;\n    });\n  }\n\n  /**\n   * Moves the dragged entity to a new position.\n   *\n   * @param args - Configuration for the move operation\n   * @param args.by - Relative coordinates to move by\n   * @param args.to - Absolute coordinates to move to\n   * @param args.event - The event that triggered the move\n   * @param args.cancelable - Whether the move can be canceled\n   * @param args.propagate - Whether to dispatch dragmove events\n   */\n  move(args: {\n    /** The relative coordinates to move by. */\n    by?: Coordinates;\n    /** The absolute coordinates to move to. */\n    to?: Coordinates;\n    /** The event that triggered the move. */\n    event?: Event;\n    /** Whether the move can be canceled. */\n    cancelable?: boolean;\n    /** Whether to propagate the dragmove event to the manager. */\n    propagate?: boolean;\n  }): void {\n    return untracked(() => {\n      const {dragOperation} = this.manager;\n      const {status, controller} = dragOperation;\n\n      if (!status.dragging || !controller || controller.signal.aborted) {\n        return;\n      }\n\n      const event = defaultPreventable(\n        {\n          nativeEvent: args.event,\n          operation: dragOperation.snapshot(),\n          by: args.by,\n          to: args.to,\n        },\n        args.cancelable ?? true\n      );\n\n      if (args.propagate ?? true) {\n        this.manager.monitor.dispatch('dragmove', event);\n      }\n\n      queueMicrotask(() => {\n        if (event.defaultPrevented) {\n          return;\n        }\n\n        const coordinates = args.to ?? {\n          x: dragOperation.position.current.x + (args.by?.x ?? 0),\n          y: dragOperation.position.current.y + (args.by?.y ?? 0),\n        };\n\n        dragOperation.position.current = coordinates;\n      });\n    });\n  }\n\n  /**\n   * Stops the current drag operation.\n   *\n   * @param args - Configuration for stopping the operation\n   * @param args.event - The event that triggered the stop\n   * @param args.canceled - Whether the operation was canceled\n   * @remarks\n   * This method:\n   * - Dispatches a dragend event\n   * - Allows suspension of the operation\n   * - Handles cleanup of the operation state\n   */\n  stop(\n    args: {\n      /**\n       * The event that triggered the stop.\n       */\n      event?: Event;\n      /**\n       * Whether the operation was canceled.\n       *\n       * @default false\n       */\n      canceled?: boolean;\n    } = {}\n  ): void {\n    return untracked(() => {\n      const {dragOperation} = this.manager;\n      const {controller} = dragOperation;\n\n      if (!controller || controller.signal.aborted) return;\n\n      let promise: Promise | undefined;\n      const suspend = () => {\n        const output = {\n          resume: () => {},\n          abort: () => {},\n        };\n\n        promise = new Promise((resolve, reject) => {\n          output.resume = resolve;\n          output.abort = reject;\n        });\n\n        return output;\n      };\n\n      controller.abort();\n\n      const end = () => {\n        this.manager.renderer.rendering.then(() => {\n          dragOperation.status.set(StatusValue.Dropped);\n\n          const dropping = untracked(\n            () => dragOperation.source?.status === 'dropping'\n          );\n\n          const cleanup = () => {\n            if (dragOperation.controller === controller) {\n              dragOperation.controller = undefined;\n            }\n            dragOperation.reset();\n          };\n\n          if (dropping) {\n            const {source} = dragOperation;\n\n            // Wait until the source has finished dropping before resetting the operation\n            const dispose = effect(() => {\n              if (source?.status === 'idle') {\n                dispose();\n                cleanup();\n              }\n            });\n          } else {\n            this.manager.renderer.rendering.then(cleanup);\n          }\n        });\n      };\n\n      dragOperation.canceled = args.canceled ?? false;\n\n      this.manager.monitor.dispatch('dragend', {\n        nativeEvent: args.event,\n        operation: dragOperation.snapshot(),\n        canceled: args.canceled ?? false,\n        suspend,\n      });\n\n      if (promise) {\n        promise.then(end).catch(() => dragOperation.reset());\n      } else {\n        end();\n      }\n    });\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/manager/events.ts",
    "content": "import type {Coordinates} from '@dnd-kit/geometry';\n\nimport type {Draggable, Droppable} from '../entities/index.ts';\nimport type {Collisions} from '../collision/index.ts';\nimport type {DragDropManager} from './manager.ts';\nimport type {DragOperationSnapshot} from './operation.ts';\n\n/** Base type for event handler functions */\nexport type Events = Record void>;\n\n/**\n * Extends an event type with preventable functionality.\n *\n * @template T - The base event type\n */\nexport type Preventable = T & {\n  /** Whether the event can be canceled */\n  cancelable: boolean;\n  /** Whether the default action was prevented */\n  defaultPrevented: boolean;\n  /** Prevents the default action of the event */\n  preventDefault(): void;\n};\n\n/**\n * Base class for event monitoring and dispatching.\n *\n * @template T - The type of events to monitor\n */\nclass Monitor {\n  private registry = new Map>();\n\n  /**\n   * Adds an event listener for the specified event type.\n   *\n   * @param name - The name of the event to listen for\n   * @param handler - The function to call when the event occurs\n   * @returns A function to remove the event listener\n   */\n  public addEventListener(name: U, handler: T[U]) {\n    const {registry} = this;\n    const listeners = new Set(registry.get(name));\n\n    listeners.add(handler);\n    registry.set(name, listeners);\n\n    return () => this.removeEventListener(name, handler);\n  }\n\n  /**\n   * Removes an event listener for the specified event type.\n   *\n   * @param name - The name of the event\n   * @param handler - The function to remove\n   */\n  public removeEventListener(name: keyof T, handler: T[keyof T]) {\n    const {registry} = this;\n    const listeners = new Set(registry.get(name));\n\n    listeners.delete(handler);\n    registry.set(name, listeners);\n  }\n\n  /**\n   * Dispatches an event to all registered listeners.\n   *\n   * @param name - The name of the event to dispatch\n   * @param args - Arguments to pass to the event handlers\n   */\n  protected dispatch(name: U, ...args: any[]) {\n    const {registry} = this;\n    const listeners = registry.get(name);\n\n    if (!listeners) {\n      return;\n    }\n\n    for (const listener of listeners) {\n      listener(...args);\n    }\n  }\n}\n\n/**\n * Map of drag and drop event objects, keyed by event name.\n * Follows the same pattern as the DOM's `WindowEventMap`.\n *\n * @template T - The type of draggable entities\n * @template U - The type of droppable entities\n * @template V - The type of drag and drop manager\n */\nexport type DragDropEventMap<\n  T extends Draggable,\n  U extends Droppable,\n  V extends DragDropManager,\n> = {\n  /** Event fired when collisions are detected */\n  collision: Preventable<{\n    collisions: Collisions;\n  }>;\n  /** Event fired before a drag operation starts */\n  beforedragstart: Preventable<{\n    operation: DragOperationSnapshot;\n    nativeEvent?: Event;\n  }>;\n  /** Event fired when a drag operation starts */\n  dragstart: {\n    cancelable: false;\n    operation: DragOperationSnapshot;\n    nativeEvent?: Event;\n  };\n  /** Event fired when a drag operation moves */\n  dragmove: Preventable<{\n    operation: DragOperationSnapshot;\n    to?: Coordinates;\n    by?: Coordinates;\n    nativeEvent?: Event;\n  }>;\n  /** Event fired when a drag operation hovers over a droppable */\n  dragover: Preventable<{\n    operation: DragOperationSnapshot;\n  }>;\n  /** Event fired when a drag operation ends */\n  dragend: {\n    operation: DragOperationSnapshot;\n    nativeEvent?: Event;\n    canceled: boolean;\n    suspend(): {resume(): void; abort(): void};\n  };\n};\n\n/**\n * Map of drag and drop event handler signatures, keyed by event name.\n * Each handler receives the event object and the manager instance.\n * Derived from `DragDropEventMap`.\n *\n * @template T - The type of draggable entities\n * @template U - The type of droppable entities\n * @template V - The type of drag and drop manager\n */\nexport type DragDropEventHandlers<\n  T extends Draggable,\n  U extends Droppable,\n  V extends DragDropManager,\n> = {\n  [K in keyof DragDropEventMap]: (\n    event: DragDropEventMap[K],\n    manager: V\n  ) => void;\n};\n\nexport type CollisionEvent<\n  T extends Draggable = Draggable,\n  U extends Droppable = Droppable,\n  V extends DragDropManager = DragDropManager,\n> = DragDropEventMap['collision'];\n\nexport type BeforeDragStartEvent<\n  T extends Draggable = Draggable,\n  U extends Droppable = Droppable,\n  V extends DragDropManager = DragDropManager,\n> = DragDropEventMap['beforedragstart'];\n\nexport type DragStartEvent<\n  T extends Draggable = Draggable,\n  U extends Droppable = Droppable,\n  V extends DragDropManager = DragDropManager,\n> = DragDropEventMap['dragstart'];\n\nexport type DragMoveEvent<\n  T extends Draggable = Draggable,\n  U extends Droppable = Droppable,\n  V extends DragDropManager = DragDropManager,\n> = DragDropEventMap['dragmove'];\n\nexport type DragOverEvent<\n  T extends Draggable = Draggable,\n  U extends Droppable = Droppable,\n  V extends DragDropManager = DragDropManager,\n> = DragDropEventMap['dragover'];\n\nexport type DragEndEvent<\n  T extends Draggable = Draggable,\n  U extends Droppable = Droppable,\n  V extends DragDropManager = DragDropManager,\n> = DragDropEventMap['dragend'];\n\n/**\n * Monitors and dispatches drag and drop events.\n *\n * @template T - The type of draggable entities\n * @template U - The type of droppable entities\n * @template V - The type of drag and drop manager\n */\nexport class DragDropMonitor<\n  T extends Draggable,\n  U extends Droppable,\n  V extends DragDropManager,\n> extends Monitor> {\n  /**\n   * Creates a new drag and drop monitor.\n   *\n   * @param manager - The drag and drop manager to monitor\n   */\n  constructor(private manager: V) {\n    super();\n  }\n\n  /**\n   * Dispatches a drag and drop event.\n   *\n   * @param type - The type of event to dispatch\n   * @param event - The event data to dispatch\n   */\n  public dispatch>(\n    type: Key,\n    event: DragDropEventMap[Key]\n  ) {\n    const args = [event, this.manager] as any;\n\n    super.dispatch(type, ...args);\n  }\n}\n\n/**\n * Creates a preventable event object.\n *\n * @param event - The base event object\n * @param cancelable - Whether the event can be canceled\n * @returns A preventable event object\n */\nexport function defaultPreventable(\n  event: T,\n  cancelable = true\n): Preventable {\n  let defaultPrevented = false;\n\n  return {\n    ...event,\n    cancelable,\n    get defaultPrevented() {\n      return defaultPrevented;\n    },\n    preventDefault() {\n      if (!cancelable) {\n        return;\n      }\n\n      defaultPrevented = true;\n    },\n  };\n}\n"
  },
  {
    "path": "packages/abstract/src/core/manager/index.ts",
    "content": "export {DragDropManager, resolveCustomizable} from './manager.ts';\nexport type {DragDropManagerInput, Customizable} from './manager.ts';\nexport type {DragActions} from './actions.ts';\nexport type {\n  DragDropEventMap,\n  DragDropEventHandlers,\n  CollisionEvent,\n  BeforeDragStartEvent,\n  DragStartEvent,\n  DragMoveEvent,\n  DragOverEvent,\n  DragEndEvent,\n} from './events.ts';\nexport {Status as DragOperationStatus} from './status.ts';\nexport type {DragOperationSnapshot as DragOperation} from './operation.ts';\nexport type {DragDropRegistry} from './registry.ts';\nexport type {InferDraggable, InferDroppable} from './types.ts';\nexport type {Renderer} from './renderer.ts';\n"
  },
  {
    "path": "packages/abstract/src/core/manager/manager.ts",
    "content": "import {effects, untracked} from '@dnd-kit/state';\n\nimport type {Draggable, Droppable} from '../entities/index.ts';\nimport {CollisionObserver, CollisionNotifier} from '../collision/index.ts';\nimport type {Plugins, Plugin} from '../plugins/index.ts';\nimport type {Sensor, Sensors} from '../sensors/index.ts';\nimport type {Modifier, Modifiers} from '../modifiers/index.ts';\nimport {descriptor} from '../plugins/utilities.ts';\n\nimport {DragActions} from './actions.ts';\nimport {DragDropRegistry} from './registry.ts';\nimport {DragOperation} from './operation.ts';\nimport {DragDropMonitor} from './events.ts';\nimport {defaultRenderer, type Renderer} from './renderer.ts';\n\n/**\n * A value that can be provided as-is or as a function that receives defaults.\n *\n * @example\n * // As a plain array (replaces defaults)\n * plugins: [MyPlugin]\n *\n * // As a function (receives defaults)\n * plugins: (defaults) => [...defaults, MyPlugin]\n */\nexport type Customizable = T | ((defaults: T) => T);\n\n/**\n * Resolves a customizable value by applying it to defaults.\n *\n * @param value - A value or function that receives defaults\n * @param defaults - The default value to use when undefined, or to pass to a function\n * @returns The resolved value\n */\nexport function resolveCustomizable(\n  value: Customizable | undefined,\n  defaults: T\n): T {\n  if (typeof value === 'function') {\n    return (value as (defaults: T) => T)(defaults);\n  }\n\n  return value ?? defaults;\n}\n\nexport type DragDropManagerInput> = {\n  plugins?: Customizable>;\n  sensors?: Customizable>;\n  modifiers?: Customizable>;\n  renderer?: Renderer;\n};\n\n/**\n * Central manager class that orchestrates drag and drop operations.\n *\n * @template T - The type of draggable entities\n * @template U - The type of droppable entities\n */\nexport class DragDropManager {\n  /** Actions that can be performed during drag operations */\n  public actions: DragActions>;\n\n  /** Observes and manages collision detection between draggable and droppable entities */\n  public collisionObserver: CollisionObserver;\n\n  /** Tracks the current drag operation state and metadata */\n  public dragOperation: DragOperation;\n\n  /** Monitors and emits drag and drop events */\n  public monitor: DragDropMonitor>;\n\n  /** Registry that manages draggable and droppable entities */\n  public registry: DragDropRegistry>;\n\n  /** Handles rendering of drag and drop visual feedback */\n  public renderer: Renderer;\n\n  /**\n   * Creates a new drag and drop manager instance.\n   *\n   * @param config - Optional configuration for plugins, sensors, modifiers, and renderer\n   */\n  constructor(config?: DragDropManagerInput) {\n    type V = DragDropManager;\n\n    const raw = config ?? {};\n    const plugins = resolveCustomizable(raw.plugins, []);\n    const sensors = resolveCustomizable(raw.sensors, []);\n    const modifiers = resolveCustomizable(raw.modifiers, []);\n    const renderer = raw.renderer ?? defaultRenderer;\n    const monitor = new DragDropMonitor(this);\n    const registry = new DragDropRegistry(this);\n\n    this.registry = registry;\n    this.monitor = monitor;\n    this.renderer = renderer;\n\n    this.actions = new DragActions(this);\n    this.dragOperation = new DragOperation(this);\n    this.collisionObserver = new CollisionObserver(this);\n    this.plugins = [CollisionNotifier, ...plugins];\n    this.modifiers = modifiers;\n    this.sensors = sensors;\n\n    const {destroy} = this;\n\n    const cleanup = effects(() => {\n      const currentModifiers = untracked(() => this.dragOperation.modifiers);\n      const managerModifiers = this.modifiers;\n\n      for (const modifier of currentModifiers) {\n        if (!managerModifiers.includes(modifier)) {\n          modifier.destroy();\n        }\n      }\n\n      this.dragOperation.modifiers =\n        this.dragOperation.source?.modifiers?.map((modifier) => {\n          const {plugin, options} = descriptor(modifier);\n          return new plugin(this, options);\n        }) ?? managerModifiers;\n    });\n\n    this.destroy = () => {\n      cleanup();\n      destroy();\n    };\n  }\n\n  /**\n   * Gets the list of active plugins.\n   *\n   * @returns Array of active plugin instances\n   */\n  get plugins(): Plugin[] {\n    return this.registry.plugins.values;\n  }\n\n  /**\n   * Sets the list of plugins to be used by the manager.\n   *\n   * @param plugins - Array of plugin constructors or instances\n   */\n  set plugins(plugins: Plugins) {\n    this.registry.plugins.values = plugins;\n  }\n\n  /**\n   * Gets the list of active modifiers.\n   *\n   * @returns Array of active modifier instances\n   */\n  get modifiers(): Modifier[] {\n    return this.registry.modifiers.values;\n  }\n\n  /**\n   * Sets the list of modifiers to be used by the manager.\n   *\n   * @param modifiers - Array of modifier constructors or instances\n   */\n  set modifiers(modifiers: Modifiers) {\n    this.registry.modifiers.values = modifiers;\n  }\n\n  /**\n   * Gets the list of active sensors.\n   *\n   * @returns Array of active sensor instances\n   */\n  get sensors(): Sensor[] {\n    return this.registry.sensors.values;\n  }\n\n  /**\n   * Sets the list of sensors to be used by the manager.\n   *\n   * @param sensors - Array of sensor constructors or instances\n   */\n  set sensors(sensors: Sensors) {\n    this.registry.sensors.values = sensors;\n  }\n\n  /**\n   * Cleans up resources and stops any active drag operations.\n   */\n  public destroy = () => {\n    if (!this.dragOperation.status.idle) {\n      this.actions.stop({canceled: true});\n    }\n\n    this.dragOperation.modifiers.forEach((modifier) => modifier.destroy());\n\n    this.registry.destroy();\n    this.collisionObserver.destroy();\n  };\n}\n"
  },
  {
    "path": "packages/abstract/src/core/manager/operation.ts",
    "content": "import {Position, type Shape} from '@dnd-kit/geometry';\nimport type {Coordinates} from '@dnd-kit/geometry';\nimport {\n  batch,\n  derived,\n  reactive,\n  snapshot,\n  untracked,\n  ValueHistory,\n  type WithHistory,\n} from '@dnd-kit/state';\n\nimport type {\n  Draggable,\n  Droppable,\n  UniqueIdentifier,\n} from '../entities/index.ts';\nimport type {Modifier} from '../modifiers/index.ts';\n\nimport type {DragDropManager} from './manager.ts';\nimport {Status, StatusValue} from './status.ts';\n\nexport interface DragOperationSnapshot<\n  T extends Draggable = Draggable,\n  U extends Droppable = Droppable,\n> {\n  readonly activatorEvent: Event | null;\n  readonly canceled: boolean;\n  readonly position: Position;\n  readonly transform: Coordinates;\n  readonly status: Status;\n  get shape(): WithHistory | null;\n  set shape(value: Shape | null);\n  readonly source: T | null;\n  readonly target: U | null;\n}\n\n/**\n * Represents the current state of a drag operation.\n *\n * @template T - The type of draggable entities\n * @template U - The type of droppable entities\n */\nexport class DragOperation\n  implements DragOperationSnapshot\n{\n  /**\n   * Creates a new drag operation instance.\n   *\n   * @param manager - The drag and drop manager that owns this operation\n   */\n  constructor(manager: DragDropManager) {\n    this.#manager = manager;\n  }\n\n  #manager: DragDropManager;\n\n  #previousSource?: T;\n\n  #shape = new ValueHistory(undefined, (a, b) =>\n    a && b ? a.equals(b) : a === b\n  );\n\n  /** Current status of the drag operation */\n  public readonly status = new Status();\n\n  /** The controller for the currentdrag operation */\n  public controller: AbortController | undefined;\n\n  /**\n   * Gets the current shape of the dragged entity with history.\n   *\n   * @returns The shape history or null if no shape is set\n   */\n  @derived\n  public get shape(): WithHistory | null {\n    const {current, initial, previous} = this.#shape;\n\n    if (!current || !initial) {\n      return null;\n    }\n\n    return {current, initial, previous};\n  }\n\n  /**\n   * Sets the shape of the dragged entity.\n   *\n   * @param value - The new shape or null to reset\n   */\n  public set shape(value: Shape | null) {\n    if (!value) {\n      this.#shape.reset();\n    } else {\n      this.#shape.current = value;\n    }\n  }\n\n  /** Whether the drag operation was canceled */\n  @reactive\n  public accessor canceled = false;\n\n  /** The event that initiated the drag operation */\n  @reactive\n  public accessor activatorEvent: Event | null = null;\n\n  /** Unique identifier of the source draggable entity */\n  @reactive\n  public accessor sourceIdentifier: UniqueIdentifier | null = null;\n\n  /** Unique identifier of the target droppable entity */\n  @reactive\n  public accessor targetIdentifier: UniqueIdentifier | null = null;\n\n  /** List of modifiers applied to the drag operation */\n  @reactive\n  public accessor modifiers: Modifier[] = [];\n\n  /** Current position of the dragged entity */\n  public position = new Position({x: 0, y: 0});\n\n  /**\n   * Gets the source draggable entity.\n   *\n   * @returns The current draggable entity, falling back to the previous\n   * instance to bridge the gap when React unmounts and remounts a sortable\n   * during reparenting (e.g. moving an item between columns).\n   */\n  @derived\n  public get source(): T | null {\n    const identifier = this.sourceIdentifier;\n    if (identifier == null) return null;\n\n    const value = this.#manager.registry.draggables.get(identifier);\n\n    if (value) {\n      this.#previousSource = value;\n    }\n\n    return value ?? this.#previousSource ?? null;\n  }\n\n  /**\n   * Gets the target droppable entity.\n   *\n   * @returns The current droppable entity or null if not found\n   */\n  @derived\n  public get target(): U | null {\n    const identifier = this.targetIdentifier;\n    return identifier != null\n      ? (this.#manager.registry.droppables.get(identifier) ?? null)\n      : null;\n  }\n\n  #transform = {x: 0, y: 0};\n\n  /**\n   * Gets the current transform after applying all modifiers.\n   *\n   * @returns The transformed coordinates\n   */\n  @derived\n  public get transform() {\n    const {x, y} = this.position.delta;\n    let transform = {x, y};\n\n    for (const modifier of this.modifiers) {\n      transform = modifier.apply({\n        ...this.snapshot(),\n        transform,\n      });\n    }\n\n    this.#transform = transform;\n\n    return transform;\n  }\n\n  /**\n   * Creates a snapshot of the current drag operation state.\n   *\n   * @returns An immutable snapshot of the current operation state\n   */\n  public snapshot(): DragOperationSnapshot {\n    return untracked(() => ({\n      source: this.source,\n      target: this.target,\n      activatorEvent: this.activatorEvent,\n      transform: this.#transform,\n      shape: this.shape ? snapshot(this.shape) : null,\n      position: snapshot(this.position),\n      status: snapshot(this.status),\n      canceled: this.canceled,\n    }));\n  }\n\n  /**\n   * Resets the drag operation to its initial state.\n   *\n   * @remarks\n   * This method:\n   * - Sets status to idle\n   * - Clears source and target identifiers\n   * - Resets shape history\n   * - Resets position and transform\n   * - Clears modifiers\n   */\n  public reset() {\n    batch(() => {\n      this.status.set(StatusValue.Idle);\n      this.sourceIdentifier = null;\n      this.targetIdentifier = null;\n      this.#shape.reset();\n      this.position.reset({x: 0, y: 0});\n      this.#transform = {x: 0, y: 0};\n      this.modifiers = [];\n    });\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/manager/registry.ts",
    "content": "import type {CleanupFunction} from '@dnd-kit/state';\n\nimport {\n  Draggable,\n  Droppable,\n  Entity,\n  EntityRegistry,\n} from '../entities/index.ts';\nimport {\n  PluginRegistry,\n  Plugin,\n  type PluginConstructor,\n  PluginOptions,\n} from '../plugins/index.ts';\nimport {\n  Sensor,\n  SensorOptions,\n  type SensorConstructor,\n} from '../sensors/index.ts';\nimport {Modifier, type ModifierConstructor} from '../modifiers/index.ts';\nimport type {DragDropManager} from './manager.ts';\n\n/**\n * Manages the registration and lifecycle of draggable and droppable entities,\n * as well as plugins, sensors, and modifiers.\n *\n * @template T - The type of draggable entities\n * @template U - The type of droppable entities\n * @template V - The type of drag and drop manager\n */\nexport class DragDropRegistry<\n  T extends Draggable,\n  U extends Droppable,\n  V extends DragDropManager,\n> {\n  /**\n   * Creates a new registry instance.\n   *\n   * @param manager - The drag and drop manager that owns this registry\n   */\n  constructor(manager: V) {\n    this.plugins = new PluginRegistry>(manager);\n    this.sensors = new PluginRegistry>(manager);\n    this.modifiers = new PluginRegistry>(manager);\n  }\n\n  /** Registry for draggable entities */\n  public draggables = new EntityRegistry();\n\n  /** Registry for droppable entities */\n  public droppables = new EntityRegistry();\n\n  /** Registry for plugins */\n  public plugins: PluginRegistry>;\n\n  /** Registry for sensors */\n  public sensors: PluginRegistry>;\n\n  /** Registry for modifiers */\n  public modifiers: PluginRegistry>;\n\n  /**\n   * Registers a new entity, plugin, sensor, or modifier.\n   *\n   * @param input - The entity, plugin constructor, sensor constructor, or modifier constructor to register\n   * @param options - Optional configuration for plugins and sensors\n   * @returns A cleanup function or the registered instance\n   * @throws {Error} If the input type is invalid\n   */\n  public register(input: Entity): () => void;\n  public register(input: Draggable): () => void;\n  public register(input: Droppable): () => void;\n  public register(input: SensorConstructor, options?: SensorOptions): Sensor;\n  public register(input: ModifierConstructor): Modifier;\n  public register(input: PluginConstructor, options?: PluginOptions): Plugin;\n  public register(input: any, options?: Record) {\n    if (input instanceof Draggable) {\n      return this.draggables.register(input.id, input as T);\n    }\n\n    if (input instanceof Droppable) {\n      return this.droppables.register(input.id, input as U);\n    }\n\n    if (input.prototype instanceof Modifier) {\n      return this.modifiers.register(input, options);\n    }\n\n    if (input.prototype instanceof Sensor) {\n      return this.sensors.register(input, options);\n    }\n\n    if (input.prototype instanceof Plugin) {\n      return this.plugins.register(input, options);\n    }\n\n    throw new Error('Invalid instance type');\n  }\n\n  /**\n   * Unregisters an entity, plugin, sensor, or modifier.\n   *\n   * @param input - The entity, plugin constructor, sensor constructor, or modifier constructor to unregister\n   * @returns A cleanup function\n   * @throws {Error} If the input type is invalid\n   */\n  public unregister(input: Entity): CleanupFunction;\n  public unregister(input: Draggable): CleanupFunction;\n  public unregister(input: Droppable): CleanupFunction;\n  public unregister(input: SensorConstructor): CleanupFunction;\n  public unregister(input: ModifierConstructor): CleanupFunction;\n  public unregister(input: PluginConstructor): CleanupFunction;\n  public unregister(input: any) {\n    if (input instanceof Entity) {\n      if (input instanceof Draggable) {\n        return this.draggables.unregister(input.id, input as T);\n      }\n\n      if (input instanceof Droppable) {\n        return this.droppables.unregister(input.id, input as U);\n      }\n\n      // no-op\n      return () => {};\n    }\n\n    if (input.prototype instanceof Modifier) {\n      return this.modifiers.unregister(input);\n    }\n\n    if (input.prototype instanceof Sensor) {\n      return this.sensors.unregister(input);\n    }\n\n    if (input.prototype instanceof Plugin) {\n      return this.plugins.unregister(input);\n    }\n\n    throw new Error('Invalid instance type');\n  }\n\n  /**\n   * Destroys all registered entities and cleans up resources.\n   *\n   * @remarks\n   * This method:\n   * - Destroys all draggable and droppable entities\n   * - Destroys all plugins, sensors, and modifiers\n   * - Cleans up any associated resources\n   */\n  destroy() {\n    this.draggables.destroy();\n    this.droppables.destroy();\n    this.plugins.destroy();\n    this.sensors.destroy();\n    this.modifiers.destroy();\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/manager/renderer.ts",
    "content": "/**\n * Interface for handling visual feedback during drag operations.\n *\n * @remarks\n * Implementations of this interface are responsible for managing\n * the visual state of dragged elements and ensuring smooth animations.\n */\nexport interface Renderer {\n  /**\n   * Gets a promise that resolves when the current rendering operation is complete.\n   *\n   * @returns A promise that resolves when rendering is finished\n   */\n  get rendering(): Promise;\n}\n\n/**\n * Default renderer implementation.\n *\n * @remarks\n * This implementation immediately resolves rendering promises,\n * making it suitable for environments where custom rendering\n * is not required or handled externally.\n */\nexport const defaultRenderer: Renderer = {\n  get rendering() {\n    return Promise.resolve();\n  },\n};\n"
  },
  {
    "path": "packages/abstract/src/core/manager/status.ts",
    "content": "import {derived, reactive} from '@dnd-kit/state';\n\n/**\n * Enum representing the possible states of a drag operation.\n */\nexport enum StatusValue {\n  /** No drag operation is in progress */\n  Idle = 'idle',\n  /** A drag operation is about to start */\n  InitializationPending = 'initialization-pending',\n  /** A drag operation is being initialized */\n  Initializing = 'initializing',\n  /** A drag operation is in progress */\n  Dragging = 'dragging',\n  /** A drag operation has completed */\n  Dropped = 'dropped',\n}\n\n/**\n * Manages the status of a drag operation.\n *\n * @remarks\n * This class provides reactive accessors for checking the current state\n * of a drag operation and methods for updating it.\n */\nexport class Status {\n  /** The current status value */\n  @reactive\n  private accessor value: StatusValue = StatusValue.Idle;\n\n  /**\n   * Gets the current status value.\n   *\n   * @returns The current status value\n   */\n  @derived\n  public get current(): StatusValue {\n    return this.value;\n  }\n\n  /**\n   * Checks if the status is idle.\n   *\n   * @returns true if no drag operation is in progress\n   */\n  @derived\n  public get idle(): boolean {\n    return this.value === StatusValue.Idle;\n  }\n\n  /**\n   * Checks if the status is initializing.\n   *\n   * @returns true if a drag operation is being initialized\n   */\n  @derived\n  public get initializing(): boolean {\n    return this.value === StatusValue.Initializing;\n  }\n\n  /**\n   * Checks if the status is initialized.\n   *\n   * @returns true if a drag operation has started initialization\n   */\n  @derived\n  public get initialized(): boolean {\n    const {value} = this;\n\n    return (\n      value !== StatusValue.Idle && value !== StatusValue.InitializationPending\n    );\n  }\n\n  /**\n   * Checks if the status is dragging.\n   *\n   * @returns true if a drag operation is in progress\n   */\n  @derived\n  public get dragging(): boolean {\n    return this.value === StatusValue.Dragging;\n  }\n\n  /**\n   * Checks if the status is dropped.\n   *\n   * @returns true if a drag operation has completed\n   */\n  @derived\n  public get dropped(): boolean {\n    return this.value === StatusValue.Dropped;\n  }\n\n  /**\n   * Sets the current status value.\n   *\n   * @param value - The new status value\n   */\n  public set(value: StatusValue) {\n    this.value = value;\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/manager/types.ts",
    "content": "import type {DragDropManager} from './manager.ts';\n\n/**\n * Infers the draggable type from a drag and drop manager type.\n *\n * @template P - The drag and drop manager type\n * @returns The inferred draggable type\n *\n * @example\n * ```typescript\n * type MyDraggable = InferDraggable>;\n * // MyDraggable is HTMLDivElement\n * ```\n */\nexport type InferDraggable
     =\n  P extends DragDropManager ? T : never;\n\n/**\n * Infers the droppable type from a drag and drop manager type.\n *\n * @template P - The drag and drop manager type\n * @returns The inferred droppable type\n *\n * @example\n * ```typescript\n * type MyDroppable = InferDroppable>;\n * // MyDroppable is HTMLDivElement\n * ```\n */\nexport type InferDroppable
     =\n  P extends DragDropManager ? T : never;\n"
  },
  {
    "path": "packages/abstract/src/core/modifiers/index.ts",
    "content": "export {Modifier} from './modifier.ts';\n\nexport type {\n  Modifiers,\n  ModifierConstructor,\n  ModifierDescriptor,\n  ModifierOptions,\n} from './modifier.ts';\n"
  },
  {
    "path": "packages/abstract/src/core/modifiers/modifier.ts",
    "content": "import type {Coordinates} from '@dnd-kit/geometry';\n\nimport {\n  Plugin,\n  type PluginOptions,\n  type PluginConstructor,\n  type PluginDescriptor,\n} from '../plugins/index.ts';\nimport type {DragDropManager} from '../manager/manager.ts';\nimport type {DragOperationSnapshot} from '../manager/operation.ts';\n\n/** Options that can be passed to a modifier */\nexport type ModifierOptions = PluginOptions;\n\n/**\n * Base class for drag operation modifiers.\n *\n * @template T - The type of drag and drop manager\n * @template U - The type of modifier options\n *\n * @remarks\n * Modifiers can transform the coordinates of a drag operation,\n * enabling features like snapping, constraints, and custom behaviors.\n */\nexport class Modifier<\n  T extends DragDropManager = DragDropManager,\n  U extends ModifierOptions = ModifierOptions,\n> extends Plugin {\n  /**\n   * Creates a new modifier instance.\n   *\n   * @param manager - The drag and drop manager that owns this modifier\n   * @param options - Optional configuration for the modifier\n   */\n  constructor(\n    public manager: T,\n    public options?: U\n  ) {\n    super(manager, options);\n  }\n\n  /**\n   * Applies the modifier to the current drag operation.\n   *\n   * @param operation - The current state of the drag operation\n   * @returns The transformed coordinates\n   *\n   * @remarks\n   * Override this method to implement custom transformation logic.\n   * The default implementation returns the original transform unchanged.\n   */\n  public apply(operation: DragOperationSnapshot): Coordinates {\n    return operation.transform;\n  }\n}\n\n/**\n * Constructor type for modifiers.\n *\n * @template T - The type of drag and drop manager\n */\nexport type ModifierConstructor<\n  T extends DragDropManager = DragDropManager,\n> = PluginConstructor>;\n\n/**\n * Descriptor type for modifiers.\n *\n * @template T - The type of drag and drop manager\n */\nexport type ModifierDescriptor<\n  T extends DragDropManager = DragDropManager,\n> = PluginDescriptor, ModifierConstructor>;\n\n/**\n * Array type for modifier constructors or descriptors.\n *\n * @template T - The type of drag and drop manager\n */\nexport type Modifiers<\n  T extends DragDropManager = DragDropManager,\n> = (ModifierConstructor | ModifierDescriptor)[];\n"
  },
  {
    "path": "packages/abstract/src/core/plugins/index.ts",
    "content": "export {Plugin, CorePlugin} from './plugin.ts';\nexport {PluginRegistry} from './registry.ts';\nexport type {\n  Plugins,\n  PluginConstructor,\n  PluginDescriptor,\n  PluginOptions,\n} from './types.ts';\nexport {configure, configurator, descriptor} from './utilities.ts';\n"
  },
  {
    "path": "packages/abstract/src/core/plugins/plugin.ts",
    "content": "import {\n  type CleanupFunction,\n  effect,\n  reactive,\n  untracked,\n} from '@dnd-kit/state';\n\nimport type {DragDropManager} from '../manager/index.ts';\nimport type {PluginOptions} from './types.ts';\nimport {configure} from './utilities.ts';\n\n/**\n * Base class for plugins that extend drag and drop functionality.\n *\n * @template T - The type of drag and drop manager\n * @template U - The type of plugin options\n *\n * @remarks\n * Plugins can add new features and behaviors to the drag and drop system\n * by extending this class and implementing custom functionality.\n */\nexport abstract class Plugin<\n  T extends DragDropManager = DragDropManager,\n  U extends PluginOptions = PluginOptions,\n> {\n  /**\n   * Creates a new plugin instance.\n   *\n   * @param manager - The drag and drop manager that owns this plugin\n   * @param options - Optional configuration for the plugin\n   */\n  constructor(\n    public manager: T,\n    public options?: U\n  ) {}\n\n  /**\n   * Whether the plugin instance is disabled.\n   *\n   * @remarks\n   * This property is reactive and triggers effects when accessed.\n   */\n  @reactive\n  public accessor disabled: boolean = false;\n\n  /**\n   * Enables a disabled plugin instance.\n   *\n   * @remarks\n   * This method triggers effects when called.\n   */\n  public enable() {\n    this.disabled = false;\n  }\n\n  /**\n   * Disables an enabled plugin instance.\n   *\n   * @remarks\n   * This method triggers effects when called.\n   */\n  public disable() {\n    this.disabled = true;\n  }\n\n  /**\n   * Checks if the plugin instance is disabled.\n   *\n   * @returns true if the plugin is disabled\n   * @remarks\n   * This method does not trigger effects when accessed.\n   */\n  public isDisabled() {\n    return untracked(() => {\n      return this.disabled;\n    });\n  }\n\n  /**\n   * Configures a plugin instance with new options.\n   *\n   * @param options - The new options to apply\n   */\n  public configure(options?: U) {\n    this.options = options;\n  }\n\n  #cleanupFunctions = new Set();\n\n  /**\n   * Registers an effect that will be cleaned up when the plugin is destroyed.\n   *\n   * @param callback - The effect callback to register\n   * @returns A function to dispose of the effect\n   */\n  protected registerEffect(callback: () => void) {\n    const dispose = effect(callback.bind(this));\n\n    this.#cleanupFunctions.add(dispose);\n\n    return dispose;\n  }\n\n  /**\n   * Destroys a plugin instance and cleans up its resources.\n   *\n   * @remarks\n   * This method:\n   * - Calls all registered cleanup functions\n   * - Should be overridden by subclasses to clean up additional resources\n   */\n  public destroy() {\n    this.#cleanupFunctions.forEach((cleanup) => cleanup());\n  }\n\n  /**\n   * Configures a plugin constructor with options.\n   *\n   * @param options - The options to configure the constructor with\n   * @returns The configured plugin constructor\n   *\n   * @remarks\n   * This method is used to configure the options that the\n   * plugin constructor will use to create plugin instances.\n   */\n  static configure(options: PluginOptions) {\n    return configure(this as any, options);\n  }\n}\n\n/**\n * Base class for core plugins that ship with the library.\n *\n * @template T - The type of drag and drop manager\n * @template U - The type of plugin options\n */\nexport class CorePlugin<\n  T extends DragDropManager = DragDropManager,\n  U extends PluginOptions = PluginOptions,\n> extends Plugin {}\n"
  },
  {
    "path": "packages/abstract/src/core/plugins/registry.ts",
    "content": "import {DragDropManager} from '../manager/index.ts';\nimport {CorePlugin, type Plugin} from './plugin.ts';\nimport type {\n  InferPluginOptions,\n  PluginDescriptor,\n  PluginConstructor,\n  Plugins,\n} from './types.ts';\nimport {descriptor} from './utilities.ts';\n\n/**\n * Manages the registration and lifecycle of plugin instances.\n *\n * @template T - The type of drag and drop manager\n * @template W - The type of plugin constructor\n * @template U - The type of plugin instance\n */\nexport class PluginRegistry<\n  T extends DragDropManager,\n  W extends PluginConstructor = PluginConstructor,\n  U extends Plugin = InstanceType,\n> {\n  private instances: Map = new Map();\n\n  /**\n   * Creates a new plugin registry.\n   *\n   * @param manager - The drag and drop manager that owns this registry\n   */\n  constructor(private manager: T) {}\n\n  /**\n   * Gets all registered plugin instances.\n   *\n   * @returns An array of all active plugin instances\n   */\n  public get values(): U[] {\n    return Array.from(this.instances.values());\n  }\n\n  #previousValues: PluginConstructor[] = [];\n\n  /**\n   * Sets the list of plugins to be used by the registry.\n   *\n   * @param entries - Array of plugin constructors or descriptors\n   * @remarks\n   * This method:\n   * - Filters out duplicate plugins\n   * - Unregisters plugins that are no longer in use\n   * - Registers new plugins with their options\n   */\n  public set values(entries: Plugins) {\n    const descriptors = entries\n      .map(descriptor)\n      .reduce[]>((acc, descriptor) => {\n        const existing = acc.find(({plugin}) => plugin === descriptor.plugin);\n\n        if (existing) {\n          // Keep the first occurrence's position, apply latest options\n          existing.options = descriptor.options;\n          return acc;\n        }\n\n        return [...acc, descriptor];\n      }, []);\n    const constructors = descriptors.map(({plugin}) => plugin);\n\n    for (const plugin of this.#previousValues) {\n      if (!constructors.includes(plugin)) {\n        if (plugin.prototype instanceof CorePlugin) {\n          continue;\n        }\n\n        this.unregister(plugin as W);\n      }\n    }\n\n    for (const {plugin, options} of descriptors) {\n      this.register(plugin as W, options as InferPluginOptions);\n    }\n\n    this.#previousValues = constructors;\n  }\n\n  /**\n   * Gets a plugin instance by its constructor.\n   *\n   * @param plugin - The plugin constructor to look up\n   * @returns The plugin instance or undefined if not found\n   */\n  public get(plugin: X): InstanceType | undefined {\n    const instance = this.instances.get(plugin);\n\n    return instance as any;\n  }\n\n  /**\n   * Registers a new plugin instance.\n   *\n   * @param plugin - The plugin constructor to register\n   * @param options - Optional configuration for the plugin\n   * @returns The registered plugin instance\n   * @remarks\n   * If the plugin is already registered, its options will be updated\n   * and the existing instance will be returned.\n   */\n  public register(\n    plugin: X,\n    options?: InferPluginOptions\n  ): InstanceType {\n    const existingInstance = this.instances.get(plugin);\n\n    if (existingInstance) {\n      if (existingInstance.options !== options) {\n        existingInstance.options = options;\n      }\n\n      return existingInstance as InstanceType;\n    }\n\n    const instance = new plugin(this.manager, options) as U;\n\n    this.instances.set(plugin, instance);\n\n    return instance as InstanceType;\n  }\n\n  /**\n   * Unregisters a plugin instance.\n   *\n   * @param plugin - The plugin constructor to unregister\n   * @remarks\n   * This method:\n   * - Destroys the plugin instance\n   * - Removes it from the registry\n   */\n  public unregister(plugin: X) {\n    const instance = this.instances.get(plugin);\n\n    if (instance) {\n      instance.destroy();\n      this.instances.delete(plugin);\n    }\n  }\n\n  /**\n   * Destroys all registered plugin instances.\n   *\n   * @remarks\n   * This method:\n   * - Calls destroy() on all plugin instances\n   * - Clears the registry\n   */\n  public destroy() {\n    for (const plugin of this.instances.values()) {\n      plugin.destroy();\n    }\n\n    this.instances.clear();\n  }\n}\n"
  },
  {
    "path": "packages/abstract/src/core/plugins/types.ts",
    "content": "import type {DragDropManager} from '../manager/index.ts';\nimport type {Plugin} from './plugin.ts';\n\n/** Base type for plugin options */\nexport type PluginOptions = Record;\n\n/**\n * Constructor type for plugins.\n *\n * @template T - The type of drag and drop manager\n * @template U - The type of plugin instance\n * @template V - The type of plugin options\n */\nexport interface PluginConstructor<\n  T extends DragDropManager = DragDropManager,\n  U extends Plugin = Plugin,\n  V extends PluginOptions = InferPluginOptions,\n> {\n  /** Creates a new plugin instance */\n  new (manager: T, options?: V): U;\n}\n\n/**\n * Descriptor type for plugins.\n *\n * @template T - The type of drag and drop manager\n * @template U - The type of plugin instance\n * @template V - The type of plugin constructor\n */\nexport type PluginDescriptor<\n  T extends DragDropManager = DragDropManager,\n  U extends Plugin = Plugin,\n  V extends PluginConstructor = PluginConstructor,\n> = {\n  /** The plugin constructor */\n  plugin: V;\n  /** Optional configuration for the plugin */\n  options?: InferPluginOptions;\n};\n\n/**\n * Array type for plugin constructors or descriptors.\n *\n * @template T - The type of drag and drop manager\n */\nexport type Plugins<\n  T extends DragDropManager = DragDropManager,\n> = (PluginConstructor | PluginDescriptor)[];\n\n/**\n * Infers the options type from a plugin constructor or instance.\n *\n * @template P - The plugin constructor or instance type\n */\nexport type InferPluginOptions
     =\n  P extends PluginConstructor\n    ? T\n    : P extends Plugin\n      ? T\n      : never;\n\n/**\n * Infers the manager type from a plugin instance.\n *\n * @template P - The plugin instance type\n */\nexport type InferManager
     =\n  P extends Plugin> ? T : never;\n"
  },
  {
    "path": "packages/abstract/src/core/plugins/utilities.ts",
    "content": "import type {\n  PluginConstructor,\n  PluginOptions,\n  PluginDescriptor,\n  InferPluginOptions,\n} from './types.ts';\n\n/**\n * Creates a plugin descriptor with the given plugin constructor and options.\n *\n * @template T - The plugin constructor type\n * @template V - The plugin options type\n * @param plugin - The plugin constructor\n * @param options - The plugin configuration options\n * @returns A plugin descriptor containing the constructor and options\n */\nexport function configure<\n  T extends PluginConstructor,\n  V extends PluginOptions = InferPluginOptions,\n>(plugin: T, options: V): PluginDescriptor {\n  return {\n    plugin,\n    options,\n  };\n}\n\n/**\n * Creates a configurator function for a specific plugin constructor.\n *\n * @template T - The plugin constructor type\n * @param plugin - The plugin constructor to configure\n * @returns A function that takes options and returns a plugin descriptor\n */\nexport function configurator>(\n  plugin: T\n) {\n  return (options: InferPluginOptions): PluginDescriptor => {\n    return configure(plugin, options);\n  };\n}\n\n/**\n * Normalizes a plugin constructor or descriptor into a descriptor.\n *\n * @template T - The plugin constructor type\n * @param plugin - Either a plugin constructor or a plugin descriptor\n * @returns A plugin descriptor\n */\nexport function descriptor>(\n  plugin: T | PluginDescriptor\n): PluginDescriptor {\n  if (typeof plugin === 'function') {\n    return {\n      plugin,\n      options: undefined,\n    };\n  }\n\n  return plugin;\n}\n"
  },
  {
    "path": "packages/abstract/src/core/sensors/activation.ts",
    "content": "export class ActivationController extends AbortController {\n  public activated = false;\n\n  constructor(\n    private constraints: ActivationConstraints | undefined,\n    private onActivate: (event: E) => void\n  ) {\n    super();\n\n    for (const constraint of constraints ?? []) {\n      constraint.controller = this;\n    }\n  }\n\n  onEvent(event: E) {\n    if (this.activated) return;\n\n    if (this.constraints?.length) {\n      for (const constraint of this.constraints) {\n        constraint.onEvent(event);\n      }\n    } else {\n      this.activate(event);\n    }\n  }\n\n  activate(event: E) {\n    if (this.activated) return;\n    this.activated = true;\n    this.onActivate(event);\n  }\n\n  abort(event?: E) {\n    this.activated = false;\n\n    super.abort(event);\n  }\n}\n\nexport interface ActivationConstraintOptions {}\n\nexport abstract class ActivationConstraint<\n  E extends Event = Event,\n  O extends ActivationConstraintOptions = ActivationConstraintOptions,\n> {\n  #controller: ActivationController | undefined;\n\n  set controller(controller: ActivationController) {\n    this.#controller = controller;\n\n    controller.signal.addEventListener('abort', () => this.abort());\n  }\n\n  constructor(protected options: O) {}\n\n  /**\n   * Called when the activation is triggered.\n   */\n  public activate(event: E): void {\n    this.#controller?.activate(event);\n  }\n\n  /**\n   * Called when the activation is aborted.\n   */\n  public abstract abort(event?: E): void;\n\n  /**\n   * Called when an input event is received by the sensor.\n   * Returns `true` if this event triggers activation immediately.\n   */\n  public abstract onEvent(event: E): void;\n}\n\nexport type ActivationConstraints = ActivationConstraint[];\n"
  },
  {
    "path": "packages/abstract/src/core/sensors/index.ts",
    "content": "export {Sensor} from './sensor.ts';\nexport type {\n  Sensors,\n  SensorConstructor,\n  SensorDescriptor,\n  SensorOptions,\n} from './sensor.ts';\n\nexport {\n  ActivationConstraint,\n  type ActivationConstraints,\n} from './activation.ts';\nexport {ActivationController} from './activation.ts';\n"
  },
  {
    "path": "packages/abstract/src/core/sensors/sensor.ts",
    "content": "import {CleanupFunction} from '@dnd-kit/state';\n\nimport type {DragDropManager} from '../manager/index.ts';\nimport type {Draggable, Droppable} from '../entities/index.ts';\nimport {\n  Plugin,\n  type PluginConstructor,\n  type PluginDescriptor,\n  type PluginOptions,\n} from '../plugins/index.ts';\n\n/**\n * Options that can be passed to a sensor.\n * Extends the base PluginOptions type.\n */\nexport type SensorOptions = PluginOptions;\n\n/**\n * Abstract base class for all sensor implementations.\n *\n * @template T - The type of drag drop manager\n * @template U - The type of sensor options\n *\n * @remarks\n * Sensors are responsible for detecting and initiating drag operations.\n * They handle the actual user interaction (mouse, touch, keyboard, etc.)\n * and translate those interactions into drag operations.\n */\nexport abstract class Sensor<\n  T extends DragDropManager = DragDropManager,\n  U extends SensorOptions = SensorOptions,\n> extends Plugin {\n  /**\n   * Creates a new sensor instance.\n   *\n   * @param manager - The drag drop manager instance\n   * @param options - Optional sensor configuration\n   */\n  constructor(\n    public manager: T,\n    public options?: U\n  ) {\n    super(manager, options);\n  }\n\n  /**\n   * Binds the sensor to a draggable source.\n   *\n   * @param source - The draggable element to bind to\n   * @param options - Optional sensor options specific to this draggable\n   * @returns A cleanup function to unbind the sensor\n   */\n  public abstract bind(source: Draggable, options?: U): CleanupFunction;\n}\n\n/**\n * Constructor type for creating sensor instances.\n *\n * @template T - The type of drag drop manager\n */\nexport type SensorConstructor<\n  T extends DragDropManager = DragDropManager,\n> = PluginConstructor>;\n\n/**\n * Descriptor type for configuring sensors.\n *\n * @template T - The type of drag drop manager\n */\nexport type SensorDescriptor<\n  T extends DragDropManager = DragDropManager,\n> = PluginDescriptor, SensorConstructor>;\n\n/**\n * Array type for multiple sensor configurations.\n *\n * @template T - The type of drag drop manager\n */\nexport type Sensors<\n  T extends DragDropManager = DragDropManager,\n> = (SensorConstructor | SensorDescriptor)[];\n"
  },
  {
    "path": "packages/abstract/src/modifiers/axis.ts",
    "content": "import {\n  configurator,\n  Modifier,\n  type DragDropManager,\n  type DragOperation,\n} from '@dnd-kit/abstract';\n\n/**\n * Options for configuring an axis modifier.\n *\n * @property axis - The axis to restrict movement to ('x' or 'y')\n * @property value - The fixed value to set for the specified axis\n */\ninterface Options {\n  axis: 'x' | 'y';\n  value: number;\n}\n\n/**\n * A modifier that restricts drag movement to a specific axis and value.\n *\n * @remarks\n * This modifier can be used to:\n * - Restrict movement to a specific axis\n * - Set a fixed value for the specified axis\n * - Create horizontal or vertical movement constraints\n */\nexport class AxisModifier extends Modifier, Options> {\n  /**\n   * Applies the axis restriction to the drag operation.\n   *\n   * @param operation - The current drag operation\n   * @returns The modified transform with the axis restriction applied\n   */\n  apply({transform}: DragOperation) {\n    if (!this.options) {\n      return transform;\n    }\n\n    const {axis, value} = this.options;\n\n    return {\n      ...transform,\n      [axis]: value,\n    };\n  }\n\n  /**\n   * Creates a configured instance of the AxisModifier.\n   *\n   * @param options - The axis restriction options\n   * @returns A configured AxisModifier instance\n   */\n  static configure = configurator(AxisModifier);\n}\n\n/**\n * A pre-configured modifier that restricts movement to the vertical axis.\n *\n * @remarks\n * This modifier fixes the x-axis value to 0, allowing only vertical movement.\n */\nexport const RestrictToVerticalAxis = AxisModifier.configure({\n  axis: 'x',\n  value: 0,\n});\n\n/**\n * A pre-configured modifier that restricts movement to the horizontal axis.\n *\n * @remarks\n * This modifier fixes the y-axis value to 0, allowing only horizontal movement.\n */\nexport const RestrictToHorizontalAxis = AxisModifier.configure({\n  axis: 'y',\n  value: 0,\n});\n"
  },
  {
    "path": "packages/abstract/src/modifiers/boundingRectangle.ts",
    "content": "import type {BoundingRectangle, Coordinates, Shape} from '@dnd-kit/geometry';\n\n/**\n * Restricts a shape's movement to stay within a bounding rectangle.\n *\n * @param shape - The shape to restrict\n * @param transform - The current transform coordinates\n * @param boundingRect - The bounding rectangle to restrict movement within\n * @returns The modified transform coordinates that keep the shape within bounds\n *\n * @remarks\n * This function:\n * - Prevents the shape from moving outside the bounding rectangle\n * - Adjusts the transform coordinates to keep the shape's edges within bounds\n * - Maintains the shape's position relative to the bounding rectangle\n *\n * @example\n * ```typescript\n * const shape = { boundingRectangle: { top: 0, left: 0, right: 100, bottom: 100 } };\n * const transform = { x: 50, y: 50 };\n * const bounds = { top: 0, left: 0, width: 200, height: 200 };\n *\n * const restricted = restrictShapeToBoundingRectangle(shape, transform, bounds);\n * ```\n */\nexport function restrictShapeToBoundingRectangle(\n  shape: Shape,\n  transform: Coordinates,\n  boundingRect: BoundingRectangle\n) {\n  const value = {\n    ...transform,\n  };\n\n  if (shape.boundingRectangle.top + transform.y <= boundingRect.top) {\n    value.y = boundingRect.top - shape.boundingRectangle.top;\n  } else if (\n    shape.boundingRectangle.bottom + transform.y >=\n    boundingRect.top + boundingRect.height\n  ) {\n    value.y =\n      boundingRect.top + boundingRect.height - shape.boundingRectangle.bottom;\n  }\n\n  if (shape.boundingRectangle.left + transform.x <= boundingRect.left) {\n    value.x = boundingRect.left - shape.boundingRectangle.left;\n  } else if (\n    shape.boundingRectangle.right + transform.x >=\n    boundingRect.left + boundingRect.width\n  ) {\n    value.x =\n      boundingRect.left + boundingRect.width - shape.boundingRectangle.right;\n  }\n\n  return value;\n}\n"
  },
  {
    "path": "packages/abstract/src/modifiers/index.ts",
    "content": "export {\n  AxisModifier,\n  RestrictToHorizontalAxis,\n  RestrictToVerticalAxis,\n} from './axis.ts';\n\nexport {restrictShapeToBoundingRectangle} from './boundingRectangle.ts';\n\nexport {SnapModifier} from './snap.ts';\n"
  },
  {
    "path": "packages/abstract/src/modifiers/snap.ts",
    "content": "import {\n  configurator,\n  Modifier,\n  type DragDropManager,\n  type DragOperation,\n} from '@dnd-kit/abstract';\n\n/**\n * Options for configuring a snap modifier.\n *\n * @property size - The grid size to snap to, either a single number for both axes\n *                 or separate x and y values\n */\ninterface Options {\n  size: number | {x: number; y: number};\n}\n\n/**\n * A modifier that snaps drag movement to a grid.\n *\n * @remarks\n * This modifier:\n * - Snaps drag coordinates to the nearest grid point\n * - Supports different grid sizes for x and y axes\n * - Uses ceiling rounding to ensure consistent snapping behavior\n *\n * @example\n * ```typescript\n * // Snap to a 20x20 grid\n * const modifier = SnapModifier.configure({ size: 20 });\n *\n * // Snap to a 10x20 grid\n * const modifier = SnapModifier.configure({ size: { x: 10, y: 20 } });\n * ```\n */\nexport class SnapModifier extends Modifier, Options> {\n  /**\n   * Applies the snap grid to the drag operation.\n   *\n   * @param operation - The current drag operation\n   * @returns The modified transform with coordinates snapped to the grid\n   */\n  apply({transform}: DragOperation) {\n    const {size = 20} = this.options ?? {};\n    const x = typeof size === 'number' ? size : size.x;\n    const y = typeof size === 'number' ? size : size.y;\n\n    return {\n      ...transform,\n      x: Math.ceil(transform.x / x) * x,\n      y: Math.ceil(transform.y / y) * y,\n    };\n  }\n\n  /**\n   * Creates a configured instance of the SnapModifier.\n   *\n   * @param options - The snap grid options\n   * @returns A configured SnapModifier instance\n   */\n  static configure = configurator(SnapModifier);\n}\n"
  },
  {
    "path": "packages/abstract/tests/manager-modifiers.test.ts",
    "content": "import {describe, expect, it} from 'bun:test';\nimport {batch} from '@dnd-kit/state';\nimport {\n  DragDropManager,\n  Modifier,\n  Draggable,\n  configure,\n} from '@dnd-kit/abstract';\n\nclass ClampXModifier extends Modifier {\n  public apply(operation: Parameters[0]) {\n    return {x: 0, y: operation.transform.y};\n  }\n}\n\nclass ClampYModifier extends Modifier {\n  public apply(operation: Parameters[0]) {\n    return {x: operation.transform.x, y: 0};\n  }\n}\n\n/** Flush microtasks so async stop/reset logic completes */\nfunction flush() {\n  return new Promise((resolve) => setTimeout(resolve, 10));\n}\n\ndescribe('Manager-level modifiers', () => {\n  it('should apply manager modifiers when draggable has none', () => {\n    const manager = new DragDropManager({modifiers: [ClampXModifier]});\n    const draggable = new Draggable({id: 'd1', register: false}, manager);\n    draggable.register();\n\n    manager.actions.start({source: draggable, coordinates: {x: 0, y: 0}});\n    batch(() => {\n      manager.dragOperation.position.current = {x: 100, y: 50};\n    });\n\n    expect(manager.dragOperation.transform).toEqual({x: 0, y: 50});\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should apply configured manager modifiers', () => {\n    const manager = new DragDropManager({\n      modifiers: [configure(ClampXModifier, undefined)],\n    });\n    const draggable = new Draggable({id: 'd1', register: false}, manager);\n    draggable.register();\n\n    manager.actions.start({source: draggable, coordinates: {x: 0, y: 0}});\n    batch(() => {\n      manager.dragOperation.position.current = {x: 100, y: 50};\n    });\n\n    expect(manager.dragOperation.transform).toEqual({x: 0, y: 50});\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should prefer draggable modifiers over manager modifiers', () => {\n    const manager = new DragDropManager({modifiers: [ClampXModifier]});\n    const draggable = new Draggable(\n      {id: 'd1', modifiers: [ClampYModifier], register: false},\n      manager\n    );\n    draggable.register();\n\n    manager.actions.start({source: draggable, coordinates: {x: 0, y: 0}});\n    batch(() => {\n      manager.dragOperation.position.current = {x: 100, y: 50};\n    });\n\n    expect(manager.dragOperation.transform).toEqual({x: 100, y: 0});\n\n    draggable.destroy();\n    manager.destroy();\n  });\n});\n\ndescribe('Manager modifier lifecycle', () => {\n  it('should not destroy manager modifiers when drag starts', () => {\n    let destroyCount = 0;\n\n    class TrackedModifier extends ClampXModifier {\n      public destroy() {\n        destroyCount++;\n        super.destroy();\n      }\n    }\n\n    const manager = new DragDropManager({modifiers: [TrackedModifier]});\n    const draggable = new Draggable({id: 'd1', register: false}, manager);\n    draggable.register();\n\n    manager.actions.start({source: draggable, coordinates: {x: 0, y: 0}});\n\n    expect(destroyCount).toBe(0);\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should not destroy manager modifiers when drag stops', async () => {\n    let destroyCount = 0;\n\n    class TrackedModifier extends ClampXModifier {\n      public destroy() {\n        destroyCount++;\n        super.destroy();\n      }\n    }\n\n    const manager = new DragDropManager({modifiers: [TrackedModifier]});\n    const draggable = new Draggable({id: 'd1', register: false}, manager);\n    draggable.register();\n\n    manager.actions.start({source: draggable, coordinates: {x: 0, y: 0}});\n    manager.actions.stop();\n    await flush();\n\n    expect(destroyCount).toBe(0);\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should keep manager modifiers working across multiple drags', async () => {\n    const manager = new DragDropManager({modifiers: [ClampXModifier]});\n    const draggable = new Draggable({id: 'd1', register: false}, manager);\n    draggable.register();\n\n    // First drag\n    manager.actions.start({source: draggable, coordinates: {x: 0, y: 0}});\n    batch(() => {\n      manager.dragOperation.position.current = {x: 100, y: 50};\n    });\n    expect(manager.dragOperation.transform).toEqual({x: 0, y: 50});\n\n    manager.actions.stop();\n    await flush();\n\n    // Second drag — manager modifiers must still be active\n    manager.actions.start({source: draggable, coordinates: {x: 0, y: 0}});\n    batch(() => {\n      manager.dragOperation.position.current = {x: 200, y: 75};\n    });\n    expect(manager.dragOperation.transform).toEqual({x: 0, y: 75});\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should destroy per-operation modifiers when draggable modifiers change mid-drag', () => {\n    let destroyCount = 0;\n\n    class TrackedModifier extends ClampXModifier {\n      public destroy() {\n        destroyCount++;\n        super.destroy();\n      }\n    }\n\n    const manager = new DragDropManager({});\n    const draggable = new Draggable(\n      {id: 'd1', modifiers: [TrackedModifier], register: false},\n      manager\n    );\n    draggable.register();\n\n    manager.actions.start({source: draggable, coordinates: {x: 0, y: 0}});\n    expect(destroyCount).toBe(0);\n\n    // Changing the draggable's modifiers mid-drag triggers the effect,\n    // which should destroy the old per-operation instances\n    draggable.modifiers = [ClampYModifier];\n\n    expect(destroyCount).toBe(1);\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should destroy per-operation modifiers when switching to manager modifiers mid-drag', () => {\n    let destroyCount = 0;\n\n    class TrackedModifier extends ClampXModifier {\n      public destroy() {\n        destroyCount++;\n        super.destroy();\n      }\n    }\n\n    const manager = new DragDropManager({modifiers: [ClampYModifier]});\n    const draggable = new Draggable(\n      {id: 'd1', modifiers: [TrackedModifier], register: false},\n      manager\n    );\n    draggable.register();\n\n    manager.actions.start({source: draggable, coordinates: {x: 0, y: 0}});\n    expect(destroyCount).toBe(0);\n\n    // Removing draggable modifiers should fall back to manager modifiers\n    // and destroy the per-operation instances\n    draggable.modifiers = undefined;\n\n    expect(destroyCount).toBe(1);\n\n    // Manager modifiers should now be active\n    batch(() => {\n      manager.dragOperation.position.current = {x: 100, y: 50};\n    });\n    expect(manager.dragOperation.transform).toEqual({x: 100, y: 0});\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should not destroy manager modifiers when different draggables are used', async () => {\n    let destroyCount = 0;\n\n    class TrackedModifier extends ClampXModifier {\n      public destroy() {\n        destroyCount++;\n        super.destroy();\n      }\n    }\n\n    const manager = new DragDropManager({modifiers: [TrackedModifier]});\n    const draggableA = new Draggable({id: 'a', register: false}, manager);\n    const draggableB = new Draggable({id: 'b', register: false}, manager);\n    draggableA.register();\n    draggableB.register();\n\n    // First drag with draggable A\n    manager.actions.start({source: draggableA, coordinates: {x: 0, y: 0}});\n    manager.actions.stop();\n    await flush();\n\n    expect(destroyCount).toBe(0);\n\n    // Second drag with draggable B\n    manager.actions.start({source: draggableB, coordinates: {x: 0, y: 0}});\n    batch(() => {\n      manager.dragOperation.position.current = {x: 100, y: 50};\n    });\n    expect(manager.dragOperation.transform).toEqual({x: 0, y: 50});\n    expect(destroyCount).toBe(0);\n\n    draggableA.destroy();\n    draggableB.destroy();\n    manager.destroy();\n  });\n});\n"
  },
  {
    "path": "packages/abstract/tests/plugin-registry.test.ts",
    "content": "import {describe, expect, it} from 'bun:test';\nimport {batch} from '@dnd-kit/state';\nimport {\n  DragDropManager,\n  Draggable,\n  Plugin,\n  CorePlugin,\n  configure,\n} from '@dnd-kit/abstract';\n\ninterface TestOptions {\n  value?: string;\n}\n\nclass PluginA extends Plugin {\n  constructor(manager: DragDropManager, public options?: TestOptions) {\n    super(manager, options);\n  }\n}\n\nclass PluginB extends Plugin {\n  constructor(manager: DragDropManager, public options?: TestOptions) {\n    super(manager, options);\n  }\n}\n\nclass PluginC extends CorePlugin {\n  constructor(manager: DragDropManager, public options?: TestOptions) {\n    super(manager, options);\n  }\n}\n\nfunction indexOf(manager: DragDropManager, PluginClass: any): number {\n  return manager.registry.plugins.values.findIndex(\n    (p) => p.constructor === PluginClass\n  );\n}\n\ndescribe('PluginRegistry duplicate handling', () => {\n  it('should keep the first occurrence when duplicates exist', () => {\n    const manager = new DragDropManager({\n      plugins: [PluginA, PluginB, PluginA],\n    });\n\n    const pluginA = manager.registry.plugins.get(PluginA);\n    const pluginB = manager.registry.plugins.get(PluginB);\n\n    expect(pluginA).toBeInstanceOf(PluginA);\n    expect(pluginB).toBeInstanceOf(PluginB);\n    expect(indexOf(manager, PluginA)).toBeLessThan(indexOf(manager, PluginB));\n\n    manager.destroy();\n  });\n\n  it('should apply options from the last occurrence to the first position', () => {\n    const manager = new DragDropManager({\n      plugins: [PluginA, PluginB, configure(PluginA, {value: 'custom'})],\n    });\n\n    const pluginA = manager.registry.plugins.get(PluginA);\n\n    expect(pluginA).toBeDefined();\n    expect(pluginA!.options).toEqual({value: 'custom'});\n    expect(indexOf(manager, PluginA)).toBeLessThan(indexOf(manager, PluginB));\n\n    manager.destroy();\n  });\n\n  it('should preserve registration order so earlier plugins are available to later ones', () => {\n    let resolvedDep: Plugin | undefined;\n\n    class DepPlugin extends Plugin {\n      constructor(manager: DragDropManager) {\n        super(manager);\n      }\n    }\n\n    class ConsumerPlugin extends Plugin {\n      constructor(manager: DragDropManager) {\n        super(manager);\n        resolvedDep = manager.registry.plugins.get(DepPlugin);\n      }\n    }\n\n    const manager = new DragDropManager({\n      plugins: [DepPlugin, ConsumerPlugin, configure(DepPlugin, {value: 'x'})],\n    });\n\n    expect(resolvedDep).toBeInstanceOf(DepPlugin);\n\n    manager.destroy();\n  });\n\n  it('should handle configure with empty options', () => {\n    const manager = new DragDropManager({\n      plugins: [PluginA, PluginB, configure(PluginA, {})],\n    });\n\n    const pluginA = manager.registry.plugins.get(PluginA);\n\n    expect(pluginA).toBeDefined();\n    expect(pluginA!.options).toEqual({});\n    expect(indexOf(manager, PluginA)).toBeLessThan(indexOf(manager, PluginB));\n\n    manager.destroy();\n  });\n\n  it('should not create duplicate instances when the same plugin appears multiple times', () => {\n    let instanceCount = 0;\n\n    class TrackedPlugin extends Plugin {\n      constructor(manager: DragDropManager) {\n        super(manager);\n        instanceCount++;\n      }\n    }\n\n    const manager = new DragDropManager({\n      plugins: [TrackedPlugin, PluginB, configure(TrackedPlugin, {value: 'x'})],\n    });\n\n    expect(instanceCount).toBe(1);\n\n    manager.destroy();\n  });\n\n  it('should apply the rightmost options when a plugin appears more than twice', () => {\n    const manager = new DragDropManager({\n      plugins: [\n        configure(PluginA, {value: 'first'}),\n        PluginB,\n        configure(PluginA, {value: 'second'}),\n        configure(PluginA, {value: 'third'}),\n      ],\n    });\n\n    const pluginA = manager.registry.plugins.get(PluginA);\n\n    expect(pluginA!.options).toEqual({value: 'third'});\n    expect(indexOf(manager, PluginA)).toBeLessThan(indexOf(manager, PluginB));\n\n    manager.destroy();\n  });\n});\n\ndescribe('Per-entity plugin auto-registration', () => {\n  it('should auto-register plugins from entity plugins array', () => {\n    const manager = new DragDropManager({});\n    const draggable = new Draggable(\n      {id: 'd1', plugins: [PluginA], register: false},\n      manager\n    );\n    draggable.register();\n\n    expect(manager.registry.plugins.get(PluginA)).toBeInstanceOf(PluginA);\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should auto-register configured plugins without applying entity options globally', () => {\n    const manager = new DragDropManager({});\n    const draggable = new Draggable(\n      {\n        id: 'd1',\n        plugins: [configure(PluginA, {value: 'entity-only'})],\n        register: false,\n      },\n      manager\n    );\n    draggable.register();\n\n    const globalInstance = manager.registry.plugins.get(PluginA);\n    expect(globalInstance).toBeInstanceOf(PluginA);\n    expect(globalInstance!.options).toBeUndefined();\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should not duplicate-register already-registered plugins', () => {\n    let instanceCount = 0;\n\n    class TrackedPlugin extends Plugin {\n      constructor(manager: DragDropManager) {\n        super(manager);\n        instanceCount++;\n      }\n    }\n\n    const manager = new DragDropManager({plugins: [TrackedPlugin]});\n    expect(instanceCount).toBe(1);\n\n    const draggable = new Draggable(\n      {id: 'd1', plugins: [TrackedPlugin], register: false},\n      manager\n    );\n    draggable.register();\n\n    expect(instanceCount).toBe(1);\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should keep auto-registered plugin alive after source entity is destroyed mid-drag', async () => {\n    const manager = new DragDropManager({});\n    const draggable = new Draggable(\n      {id: 'd1', plugins: [PluginA], register: false},\n      manager\n    );\n    draggable.register();\n\n    manager.actions.start({source: draggable, coordinates: {x: 0, y: 0}});\n\n    expect(manager.registry.plugins.get(PluginA)).toBeInstanceOf(PluginA);\n\n    draggable.destroy();\n\n    expect(manager.registry.plugins.get(PluginA)).toBeInstanceOf(PluginA);\n\n    manager.actions.stop();\n    await new Promise((resolve) => setTimeout(resolve, 10));\n    manager.destroy();\n  });\n});\n\ndescribe('Per-entity plugin config (pluginConfig)', () => {\n  it('should return per-entity options for a configured plugin', () => {\n    const manager = new DragDropManager({});\n    const draggable = new Draggable(\n      {\n        id: 'd1',\n        plugins: [configure(PluginA, {value: 'custom'})],\n        register: false,\n      },\n      manager\n    );\n\n    expect(draggable.pluginConfig(PluginA)).toEqual({value: 'custom'});\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should return undefined for unconfigured plugins', () => {\n    const manager = new DragDropManager({});\n    const draggable = new Draggable({id: 'd1', register: false}, manager);\n\n    expect(draggable.pluginConfig(PluginA)).toBeUndefined();\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should return undefined when entity has no plugins even if plugin is registered globally', () => {\n    const manager = new DragDropManager({plugins: [PluginA]});\n    const draggable = new Draggable({id: 'd1', register: false}, manager);\n\n    expect(manager.registry.plugins.get(PluginA)).toBeInstanceOf(PluginA);\n    expect(draggable.pluginConfig(PluginA)).toBeUndefined();\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should isolate per-entity config between different entities', () => {\n    const manager = new DragDropManager({});\n    const draggableA = new Draggable(\n      {\n        id: 'a',\n        plugins: [configure(PluginA, {value: 'alpha'})],\n        register: false,\n      },\n      manager\n    );\n    const draggableB = new Draggable(\n      {\n        id: 'b',\n        plugins: [configure(PluginA, {value: 'beta'})],\n        register: false,\n      },\n      manager\n    );\n    draggableA.register();\n    draggableB.register();\n\n    expect(draggableA.pluginConfig(PluginA)).toEqual({value: 'alpha'});\n    expect(draggableB.pluginConfig(PluginA)).toEqual({value: 'beta'});\n\n    const globalInstance = manager.registry.plugins.get(PluginA);\n    expect(globalInstance!.options).toBeUndefined();\n\n    draggableA.destroy();\n    draggableB.destroy();\n    manager.destroy();\n  });\n\n  it('should return per-entity options even when plugin is globally configured with different options', () => {\n    const manager = new DragDropManager({\n      plugins: [configure(PluginA, {value: 'global'})],\n    });\n    const draggable = new Draggable(\n      {\n        id: 'd1',\n        plugins: [configure(PluginA, {value: 'entity'})],\n        register: false,\n      },\n      manager\n    );\n\n    expect(draggable.pluginConfig(PluginA)).toEqual({value: 'entity'});\n    expect(manager.registry.plugins.get(PluginA)!.options).toEqual({\n      value: 'global',\n    });\n\n    draggable.destroy();\n    manager.destroy();\n  });\n\n  it('should reflect updated options when plugins property is reassigned', () => {\n    const manager = new DragDropManager({});\n    const draggable = new Draggable(\n      {\n        id: 'd1',\n        plugins: [configure(PluginA, {value: 'first'})],\n        register: false,\n      },\n      manager\n    );\n\n    expect(draggable.pluginConfig(PluginA)).toEqual({value: 'first'});\n\n    draggable.plugins = [configure(PluginA, {value: 'second'})];\n\n    expect(draggable.pluginConfig(PluginA)).toEqual({value: 'second'});\n\n    draggable.destroy();\n    manager.destroy();\n  });\n});\n"
  },
  {
    "path": "packages/abstract/tsconfig.json",
    "content": "{\n  \"extends\": \"../../config/typescript/vanilla.json\",\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"dist\", \"build\", \"node_modules\"]\n}\n"
  },
  {
    "path": "packages/abstract/tsup.config.ts",
    "content": "import {defineConfig} from 'tsup';\n\nexport default defineConfig((options) => ({\n  dts: true,\n  outDir: './',\n  external: ['@dnd-kit/abstract'],\n  format: ['esm', 'cjs'],\n  sourcemap: true,\n  treeshake: !options.watch,\n}));\n"
  },
  {
    "path": "packages/collision/CHANGELOG.md",
    "content": "# @dnd-kit/collision\n\n## 0.3.2\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.3.2\n  - @dnd-kit/geometry@0.3.2\n\n## 0.3.1\n\n### Patch Changes\n\n- Updated dependencies [[`4341114`](https://github.com/clauderic/dnd-kit/commit/43411143063349caeded4f778923473624ce25cf)]:\n  - @dnd-kit/abstract@0.3.1\n  - @dnd-kit/geometry@0.3.1\n\n## 0.3.0\n\n### Patch Changes\n\n- Updated dependencies [[`6a59647`](https://github.com/clauderic/dnd-kit/commit/6a59647ebba2114b2e423f282ab25bf2ea40318d)]:\n  - @dnd-kit/abstract@0.3.0\n  - @dnd-kit/geometry@0.3.0\n\n## 0.2.4\n\n### Patch Changes\n\n- [#1866](https://github.com/clauderic/dnd-kit/pull/1866) [`256432d`](https://github.com/clauderic/dnd-kit/commit/256432dec8823342765eebdb78ee791c25fea382) Thanks [@github-actions](https://github.com/apps/github-actions)! - **directionBiased**: Fix inverted logic to bias towards shapes above or below the drag operation shape.\n\n- Updated dependencies [[`de27fbc`](https://github.com/clauderic/dnd-kit/commit/de27fbca9df12eece3cd53ccbbac34e0eaf113e1), [`be7cfe3`](https://github.com/clauderic/dnd-kit/commit/be7cfe3b6cf6a989aefd3e39fd145fe271942b3a)]:\n  - @dnd-kit/abstract@0.2.4\n  - @dnd-kit/geometry@0.2.4\n\n## 0.2.3\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.2.3\n  - @dnd-kit/geometry@0.2.3\n\n## 0.2.2\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.2.2\n  - @dnd-kit/geometry@0.2.2\n\n## 0.2.1\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.2.1\n  - @dnd-kit/geometry@0.2.1\n\n## 0.2.0\n\n### Patch Changes\n\n- Updated dependencies [[`e95a9c8`](https://github.com/clauderic/dnd-kit/commit/e95a9c8f448d6b339e0b6fd37546ac7cfdf18edb)]:\n  - @dnd-kit/abstract@0.2.0\n  - @dnd-kit/geometry@0.2.0\n\n## 0.1.21\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.21\n  - @dnd-kit/geometry@0.1.21\n\n## 0.1.20\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.20\n  - @dnd-kit/geometry@0.1.20\n\n## 0.1.19\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.19\n  - @dnd-kit/geometry@0.1.19\n\n## 0.1.18\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.18\n  - @dnd-kit/geometry@0.1.18\n\n## 0.1.17\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.17\n  - @dnd-kit/geometry@0.1.17\n\n## 0.1.16\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.16\n  - @dnd-kit/geometry@0.1.16\n\n## 0.1.15\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.15\n  - @dnd-kit/geometry@0.1.15\n\n## 0.1.14\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.14\n  - @dnd-kit/geometry@0.1.14\n\n## 0.1.13\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.13\n  - @dnd-kit/geometry@0.1.13\n\n## 0.1.12\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.12\n  - @dnd-kit/geometry@0.1.12\n\n## 0.1.11\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.11\n  - @dnd-kit/geometry@0.1.11\n\n## 0.1.10\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.10\n  - @dnd-kit/geometry@0.1.10\n\n## 0.1.9\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.9\n  - @dnd-kit/geometry@0.1.9\n\n## 0.1.8\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.8\n  - @dnd-kit/geometry@0.1.8\n\n## 0.1.7\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.7\n  - @dnd-kit/geometry@0.1.7\n\n## 0.1.6\n\n### Patch Changes\n\n- Updated dependencies [[`7ceb799`](https://github.com/clauderic/dnd-kit/commit/7ceb799c7d214bc8223ec845357a0040c28ae40e)]:\n  - @dnd-kit/abstract@0.1.6\n  - @dnd-kit/geometry@0.1.6\n\n## 0.1.5\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.5\n  - @dnd-kit/geometry@0.1.5\n\n## 0.1.4\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.1.4\n  - @dnd-kit/geometry@0.1.4\n\n## 0.1.3\n\n### Patch Changes\n\n- Updated dependencies [[`6c9a9ea`](https://github.com/clauderic/dnd-kit/commit/6c9a9ea060095884c90c72cd5d6b73820467ec29), [`1bef872`](https://github.com/clauderic/dnd-kit/commit/1bef8722d515079f998dc0608084e1d853e74d3a), [`2522836`](https://github.com/clauderic/dnd-kit/commit/2522836fdb80520913ea35d94c6558bf7784afc9)]:\n  - @dnd-kit/abstract@0.1.3\n  - @dnd-kit/geometry@0.1.3\n\n## 0.1.2\n\n### Patch Changes\n\n- Updated dependencies [[`ee55f58`](https://github.com/clauderic/dnd-kit/commit/ee55f582f92dc42cc6eea9ad7492fc782ca6455a), [`4682570`](https://github.com/clauderic/dnd-kit/commit/4682570a6b80868af0e51b1bbbf902430117df43), [`f8d69b0`](https://github.com/clauderic/dnd-kit/commit/f8d69b01f4cf53fc368ef1fca9188c313192928d), [`d04e9a2`](https://github.com/clauderic/dnd-kit/commit/d04e9a2879fb00f092c3f8280c8081a48eebf193), [`ee55f58`](https://github.com/clauderic/dnd-kit/commit/ee55f582f92dc42cc6eea9ad7492fc782ca6455a)]:\n  - @dnd-kit/geometry@0.1.2\n  - @dnd-kit/abstract@0.1.2\n\n## 0.1.1\n\n### Patch Changes\n\n- Updated dependencies [[`f13cbc9`](https://github.com/clauderic/dnd-kit/commit/f13cbc978229844770d3c8aa03135e4352ee2532)]:\n  - @dnd-kit/abstract@0.1.1\n  - @dnd-kit/geometry@0.1.1\n\n## 0.1.0\n\n### Patch Changes\n\n- Updated dependencies [[`00a33c9`](https://github.com/clauderic/dnd-kit/commit/00a33c99e777ab205a45309a4efc8b3560bafdaf)]:\n  - @dnd-kit/abstract@0.1.0\n  - @dnd-kit/geometry@0.1.0\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.0.10\n  - @dnd-kit/geometry@0.0.10\n\n## 0.0.9\n\n### Patch Changes\n\n- [#1600](https://github.com/clauderic/dnd-kit/pull/1600) [`3463da1`](https://github.com/clauderic/dnd-kit/commit/3463da1cac9f26e4b2ab3278ae52206bb99645e4) Thanks [@github-actions](https://github.com/apps/github-actions)! - Changed the `closestCorners` algorithm to use the corners of the drag operation shape instead of the center of the shape.\n\n- [#1600](https://github.com/clauderic/dnd-kit/pull/1600) [`8ae7014`](https://github.com/clauderic/dnd-kit/commit/8ae70143bc404bff7678fa8e8390a640c16f2579) Thanks [@github-actions](https://github.com/apps/github-actions)! - - Added `corners` getter to `Rectangle` instances to retrieve the coordinates of all four corners.\n  - Added `delta` static method to the `Rectangle` constructor which makes it easy to calculate the delta between a given reference point of both shapes.\n- Updated dependencies [[`e36d954`](https://github.com/clauderic/dnd-kit/commit/e36d95420148659ba78bdbefd3a0a24ec5d02b8f), [`60e7297`](https://github.com/clauderic/dnd-kit/commit/60e72979850bfe4cbb8e2b2e2b8e84bce9edc9f5), [`b7f1cf8`](https://github.com/clauderic/dnd-kit/commit/b7f1cf8f9e15a285c45f896e092f61001335cdff), [`3e629cc`](https://github.com/clauderic/dnd-kit/commit/3e629cc81dbaf9d112c4f1d2c10c75eb6779cf4e), [`8ae7014`](https://github.com/clauderic/dnd-kit/commit/8ae70143bc404bff7678fa8e8390a640c16f2579), [`ce31da7`](https://github.com/clauderic/dnd-kit/commit/ce31da736ec5d4f48bab45430be7b57223d60ee7)]:\n  - @dnd-kit/abstract@0.0.9\n  - @dnd-kit/geometry@0.0.9\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`c9716cf`](https://github.com/clauderic/dnd-kit/commit/c9716cf7b8b846faab451bd2f60c53c77d2d24ba), [`3ea0d31`](https://github.com/clauderic/dnd-kit/commit/3ea0d314649b186bfe0524d50145625da13a8787), [`3cf4db1`](https://github.com/clauderic/dnd-kit/commit/3cf4db126813ebe6ddfc025df5e42e9bfcfa9c38)]:\n  - @dnd-kit/abstract@0.0.8\n  - @dnd-kit/geometry@0.0.8\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`c1dadef`](https://github.com/clauderic/dnd-kit/commit/c1dadef118f8f5f096d36dac314bfe317ea950ce), [`cef9b46`](https://github.com/clauderic/dnd-kit/commit/cef9b46c5ed017e6a601b1d0ee9d0f05b7bbd19f)]:\n  - @dnd-kit/abstract@0.0.7\n  - @dnd-kit/geometry@0.0.7\n\n## 0.0.6\n\n### Patch Changes\n\n- [#1567](https://github.com/clauderic/dnd-kit/pull/1567) [`081b7f2`](https://github.com/clauderic/dnd-kit/commit/081b7f2a11da2aad8ce3da7f0579974415d1fdf0) Thanks [@chrisvxd](https://github.com/chrisvxd)! - Add source maps to output.\n\n- [#1454](https://github.com/clauderic/dnd-kit/pull/1454) [`69bfad7`](https://github.com/clauderic/dnd-kit/commit/69bfad7d795947987a4281f1a61f81b6a7839fe8) Thanks [@github-actions](https://github.com/apps/github-actions)! - Introduce `closestCorners` collision detection algorithm.\n\n- [#1454](https://github.com/clauderic/dnd-kit/pull/1454) [`a8542de`](https://github.com/clauderic/dnd-kit/commit/a8542de56d39c3cd3b6ef981172a0782454295b2) Thanks [@github-actions](https://github.com/apps/github-actions)! - Fix issues with `collisionPriority` not being respected.\n\n- [#1454](https://github.com/clauderic/dnd-kit/pull/1454) [`a6366f9`](https://github.com/clauderic/dnd-kit/commit/a6366f9e42836b4c5732141bf314489ede9f60cb) Thanks [@github-actions](https://github.com/apps/github-actions)! - Improve accuracy of `shapeIntersection` when there are multiple intersecting shapes.\n\n- Updated dependencies [[`984b5ab`](https://github.com/clauderic/dnd-kit/commit/984b5ab7bec3145dedb9c9b3b560ffbf7e54b919), [`081b7f2`](https://github.com/clauderic/dnd-kit/commit/081b7f2a11da2aad8ce3da7f0579974415d1fdf0), [`a04d3f8`](https://github.com/clauderic/dnd-kit/commit/a04d3f88d380853b97585ab3b608561f7b02ce69), [`a8542de`](https://github.com/clauderic/dnd-kit/commit/a8542de56d39c3cd3b6ef981172a0782454295b2), [`f7458d9`](https://github.com/clauderic/dnd-kit/commit/f7458d9dc32824dbea3a6d5dfb29236f19a2c073), [`e70b29a`](https://github.com/clauderic/dnd-kit/commit/e70b29ae64837e424f7279c95112fb6e420c4dcc), [`4d1a030`](https://github.com/clauderic/dnd-kit/commit/4d1a0306c920ae064eb5b30c4c02961f50460c84), [`a5933d8`](https://github.com/clauderic/dnd-kit/commit/a5933d8607e63ed08818ffab43e858863cb35d47), [`a5a556a`](https://github.com/clauderic/dnd-kit/commit/a5a556abfeec1d78effb3e047f529555e444c020), [`96f28ef`](https://github.com/clauderic/dnd-kit/commit/96f28ef86adf95e77540732d39033c7f3fb0fd04), [`71dc39f`](https://github.com/clauderic/dnd-kit/commit/71dc39fb2ec21b9a680238a91be419c71ecabe86)]:\n  - @dnd-kit/abstract@0.0.6\n  - @dnd-kit/geometry@0.0.6\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`e9be505`](https://github.com/clauderic/dnd-kit/commit/e9be5051b5c99e522fb6efd028d425220b171890)]:\n  - @dnd-kit/abstract@0.0.5\n  - @dnd-kit/geometry@0.0.5\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`2ccc27c`](https://github.com/clauderic/dnd-kit/commit/2ccc27c566b13d6de46719d0ad5978d655261177), [`e0d80f5`](https://github.com/clauderic/dnd-kit/commit/e0d80f59c733b3adcf1fc89d29aa80257e7edd98), [`794cf2f`](https://github.com/clauderic/dnd-kit/commit/794cf2f4bdeeb57a197effb1df654c7c44cf34a3)]:\n  - @dnd-kit/abstract@0.0.4\n  - @dnd-kit/geometry@0.0.4\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`5ccd5e6`](https://github.com/clauderic/dnd-kit/commit/5ccd5e668fb8d736ec3c195116559cb5c5684e80), [`886de33`](https://github.com/clauderic/dnd-kit/commit/886de33d0df851ebdcb3fcf2915f9623069b06d1)]:\n  - @dnd-kit/abstract@0.0.3\n  - @dnd-kit/geometry@0.0.3\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @dnd-kit/abstract@0.0.2\n  - @dnd-kit/geometry@0.0.2\n"
  },
  {
    "path": "packages/collision/package.json",
    "content": "{\n  \"name\": \"@dnd-kit/collision\",\n  \"type\": \"module\",\n  \"version\": \"0.3.2\",\n  \"main\": \"./dist/index.cjs\",\n  \"module\": \"./dist/index.js\",\n  \"types\": \"./dist/index.d.ts\",\n  \"sideEffects\": false,\n  \"license\": \"MIT\",\n  \"files\": [\n    \"dist/**\"\n  ],\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"require\": \"./dist/index.cjs\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"tsup src/index.ts --format esm,cjs --dts --external react\",\n    \"dev\": \"tsup src/index.ts --format esm,cjs --watch --dts --external react\",\n    \"lint\": \"TIMING=1 eslint src/**/*.ts* --fix\",\n    \"clean\": \"rm -rf .turbo && rm -rf node_modules && rm -rf dist\"\n  },\n  \"dependencies\": {\n    \"@dnd-kit/abstract\": \"^0.3.2\",\n    \"@dnd-kit/geometry\": \"^0.3.2\",\n    \"tslib\": \"^2.6.2\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.0.9\",\n    \"@types/react-dom\": \"^18.0.4\",\n    \"eslint\": \"^8.38.0\",\n    \"@dnd-kit/eslint-config\": \"*\",\n    \"tsup\": \"8.3.0\",\n    \"typescript\": \"^5.5.2\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/clauderic/dnd-kit\"\n  }\n}\n"
  },
  {
    "path": "packages/collision/src/algorithms/closestCenter.ts",
    "content": "import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';\nimport type {CollisionDetector} from '@dnd-kit/abstract';\nimport {Point} from '@dnd-kit/geometry';\n\nimport {defaultCollisionDetection} from './default.ts';\n\n/**\n * Returns the distance between the droppable shape and the drag operation shape.\n */\nexport const closestCenter: CollisionDetector = (input) => {\n  const {dragOperation, droppable} = input;\n  const {shape, position} = dragOperation;\n\n  if (!droppable.shape) {\n    return null;\n  }\n\n  const collision = defaultCollisionDetection(input);\n\n  if (collision) {\n    return collision;\n  }\n\n  const distance = Point.distance(\n    droppable.shape.center,\n    shape?.current.center ?? position.current\n  );\n\n  const value = 1 / distance;\n\n  return {\n    id: droppable.id,\n    value,\n    type: CollisionType.Collision,\n    priority: CollisionPriority.Normal,\n  };\n};\n"
  },
  {
    "path": "packages/collision/src/algorithms/closestCorners.ts",
    "content": "import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';\nimport type {CollisionDetector} from '@dnd-kit/abstract';\nimport {Point, Rectangle} from '@dnd-kit/geometry';\n\n/**\n * Returns the distance between the corners of the droppable shape and the drag operation shape.\n */\nexport const closestCorners: CollisionDetector = (input) => {\n  const {dragOperation, droppable} = input;\n  const {shape, position} = dragOperation;\n\n  if (!droppable.shape) {\n    return null;\n  }\n\n  const shapeCorners = shape\n    ? Rectangle.from(shape.current.boundingRectangle).corners\n    : undefined;\n  const distance = Rectangle.from(\n    droppable.shape.boundingRectangle\n  ).corners.reduce(\n    (acc, corner, index) =>\n      acc +\n      Point.distance(\n        Point.from(corner),\n        shapeCorners?.[index] ?? position.current\n      ),\n    0\n  );\n  const value = distance / 4;\n\n  return {\n    id: droppable.id,\n    value: 1 / value,\n    type: CollisionType.Collision,\n    priority: CollisionPriority.Normal,\n  };\n};\n"
  },
  {
    "path": "packages/collision/src/algorithms/default.ts",
    "content": "import type {CollisionDetector} from '@dnd-kit/abstract';\n\nimport {pointerIntersection} from './pointerIntersection.ts';\nimport {shapeIntersection} from './shapeIntersection.ts';\n\n/**\n * Returns the droppable that has the greatest intersection area with the\n * pointer coordinates. If there are no pointer coordinates, or the pointer\n * is not intersecting with any droppable, return the greatest intersection area\n * between the collision shape and other intersecting droppable shapes.\n */\nexport const defaultCollisionDetection: CollisionDetector = (args) => {\n  return pointerIntersection(args) ?? shapeIntersection(args);\n};\n"
  },
  {
    "path": "packages/collision/src/algorithms/directionBiased.ts",
    "content": "import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';\nimport type {CollisionDetector} from '@dnd-kit/abstract';\nimport {Point} from '@dnd-kit/geometry';\n\nimport {defaultCollisionDetection} from './default.ts';\n\nexport const directionBiased: CollisionDetector = ({\n  dragOperation,\n  droppable,\n}) => {\n  if (!droppable.shape) {\n    return null;\n  }\n\n  const {position, shape} = dragOperation;\n  const {direction} = position;\n\n  if (!shape) {\n    return null;\n  }\n\n  if (direction === null) {\n    return defaultCollisionDetection({dragOperation, droppable});\n  }\n\n  const {center} = shape.current;\n  const rect = droppable.shape.boundingRectangle;\n  const isBelow = rect.bottom >= center.y;\n  const isAbove = rect.top <= center.y;\n  const isLeft = rect.left <= center.x;\n  const isRight = rect.right >= center.x;\n\n  if (\n    (direction === 'down' && isBelow) ||\n    (direction === 'up' && isAbove) ||\n    (direction === 'left' && isLeft) ||\n    (direction === 'right' && isRight)\n  ) {\n    const distance = Point.distance(droppable.shape.center, center);\n    const value = distance === 0 ? 1 : 1 / distance;\n\n    return {\n      id: droppable.id,\n      value,\n      type: CollisionType.Collision,\n      priority: CollisionPriority.Normal,\n    };\n  }\n\n  return null;\n};\n"
  },
  {
    "path": "packages/collision/src/algorithms/index.ts",
    "content": "export {defaultCollisionDetection} from './default.ts';\nexport {closestCorners} from './closestCorners.ts';\nexport {closestCenter} from './closestCenter.ts';\nexport {pointerIntersection} from './pointerIntersection.ts';\nexport {shapeIntersection} from './shapeIntersection.ts';\nexport {directionBiased} from './directionBiased.ts';\nexport {pointerDistance} from './pointerDistance.ts';\n"
  },
  {
    "path": "packages/collision/src/algorithms/pointerDistance.ts",
    "content": "import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';\nimport type {CollisionDetector} from '@dnd-kit/abstract';\nimport {Point} from '@dnd-kit/geometry';\n\n/**\n * Returns the distance between the droppable shape and the drag operation coordinates.\n */\nexport const pointerDistance: CollisionDetector = (input) => {\n  const {dragOperation, droppable} = input;\n  const {position} = dragOperation;\n\n  if (!droppable.shape) {\n    return null;\n  }\n\n  const distance = Point.distance(droppable.shape.center, position.current);\n  const value = 1 / distance;\n\n  return {\n    id: droppable.id,\n    value,\n    type: CollisionType.Collision,\n    priority: CollisionPriority.Normal,\n  };\n};\n"
  },
  {
    "path": "packages/collision/src/algorithms/pointerIntersection.ts",
    "content": "import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';\nimport type {CollisionDetector} from '@dnd-kit/abstract';\nimport {Point} from '@dnd-kit/geometry';\n\n/**\n * A high precision collision detection algorithm that detects\n * whether the pointer intersects with a given droppable element.\n *\n * Returns the distance between the pointer coordinates and the center of the\n * droppable element if the pointer is within the droppable element.\n *\n * Returns null if the pointer is outside of the droppable element.\n */\nexport const pointerIntersection: CollisionDetector = ({\n  dragOperation,\n  droppable,\n}) => {\n  const pointerCoordinates = dragOperation.position.current;\n\n  if (!pointerCoordinates) {\n    return null;\n  }\n\n  const {id} = droppable;\n\n  if (!droppable.shape) {\n    return null;\n  }\n\n  if (droppable.shape.containsPoint(pointerCoordinates)) {\n    /* There may be more than a single rectangle intersecting\n     * with the pointer coordinates. In order to sort the\n     * colliding rectangles, we measure the distance between\n     * the pointer and the center of the intersecting rectangle\n     */\n    const distance = Point.distance(droppable.shape.center, pointerCoordinates);\n\n    return {\n      id,\n      value: 1 / distance,\n      type: CollisionType.PointerIntersection,\n      priority: CollisionPriority.High,\n    };\n  }\n\n  return null;\n};\n"
  },
  {
    "path": "packages/collision/src/algorithms/shapeIntersection.ts",
    "content": "import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';\nimport type {CollisionDetector} from '@dnd-kit/abstract';\nimport {Point} from '@dnd-kit/geometry';\n\n/**\n * Returns the droppable with the greatest intersection area with\n * the collision shape.\n */\nexport const shapeIntersection: CollisionDetector = ({\n  dragOperation,\n  droppable,\n}) => {\n  const {shape} = dragOperation;\n\n  if (!droppable.shape || !shape?.current) {\n    return null;\n  }\n\n  const intersectionArea = shape.current.intersectionArea(droppable.shape);\n\n  // Check if the droppable is intersecting with the drag operation shape.\n  if (intersectionArea) {\n    const {position} = dragOperation;\n    /* There could be multiple droppables intersecting with the drag operation shape,\n     * so we need to prioritize the droppable that is the closest to the pointer.\n     * We don't use the intersection area for this because it can lead to cyclic\n     * collisions.\n     */\n    const distance = Point.distance(droppable.shape.center, position.current);\n    const intersectionRatio =\n      intersectionArea /\n      (shape.current.area + droppable.shape.area - intersectionArea);\n\n    const value = intersectionRatio / distance;\n\n    return {\n      id: droppable.id,\n      value,\n      type: CollisionType.ShapeIntersection,\n      priority: CollisionPriority.Normal,\n    };\n  }\n\n  return null;\n};\n"
  },
  {
    "path": "packages/collision/src/index.ts",
    "content": "export type {CollisionDetector} from '@dnd-kit/abstract';\nexport {\n  closestCenter,\n  closestCorners,\n  defaultCollisionDetection,\n  directionBiased,\n  pointerDistance,\n  pointerIntersection,\n  shapeIntersection,\n} from './algorithms/index.ts';\n"
  },
  {
    "path": "packages/collision/tsconfig.json",
    "content": "{\n  \"extends\": \"../../config/typescript/vanilla.json\",\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"dist\", \"build\", \"node_modules\"]\n}\n"
  },
  {
    "path": "packages/dom/CHANGELOG.md",
    "content": "# @dnd-kit/dom\n\n## 0.3.2\n\n### Patch Changes\n\n- [#1903](https://github.com/clauderic/dnd-kit/pull/1903) [`7260746`](https://github.com/clauderic/dnd-kit/commit/7260746b0930d51afb3098ef120bffd7d3aaea03) Thanks [@clauderic](https://github.com/clauderic)! - Fixed CSS cascade layer ordering so that the popover-reset styles injected by the Feedback plugin no longer override styles from CSS frameworks that use cascade layers (such as Tailwind CSS v4).\n\n  The `@layer` block is now named `dnd-kit` and injected via a `