@namroodinc/liquid-editorial 0.0.0-stage → 0.1.1

package/dist/components/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Badge","forwardRef","rest","shape","value","children","appearance","tone","className"],"sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport \"./style.css\";\n\nexport type BadgeShape = \"status\" | \"tag\" | \"count\";\n\n/**\n * How much ink the badge spends.\n * - `outline` — the tone as a 2px stroke on the surface. The quiet default.\n * - `soft` — the tone's soft fill behind tone-coloured text. For dense tables.\n * - `solid` — the tone as a full fill. Reserve it for the one state a row is\n *   really about; a table of solid badges reads as noise.\n */\nexport type BadgeAppearance = \"outline\" | \"soft\" | \"solid\";\n\n/** Six publication states, and no seventh without a decision record. */\nexport type StatusTone =\n  | \"draft\"\n  | \"scheduled\"\n  | \"published\"\n  | \"changed\"\n  | \"unpublished\"\n  | \"archived\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  shape?: BadgeShape;\n  /** Required on `status`, forbidden on `tag` and `count`. */\n  tone?: StatusTone;\n  appearance?: BadgeAppearance;\n  children?: ReactNode;\n}\n\n/**\n * A small, non-interactive label attached to something else. Never a button,\n * never a filter. Status tones are reserved for publication state.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { shape = \"tag\", tone, appearance = \"outline\", className, children, ...rest },\n  ref,\n) {\n  if (shape === \"count\") {\n    const value = Number(children);\n    if (!Number.isNaN(value)) {\n      if (value === 0) return null;\n      children = value > 99 ? \"99+\" : String(value);\n    }\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-shape={shape}\n      data-appearance={appearance}\n      data-tone={shape === \"status\" ? tone : undefined}\n      className={[\"ds-badge\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {shape === \"status\" && <span className=\"ds-badge__dot\" aria-hidden=\"true\" />}\n      {children}\n    </span>\n  );\n});\n"],"mappings":";;;AAmCA,IAAaA,IAAQC,EAAwC,SAC3D,EAAE,WAAQ,OAAO,SAAM,gBAAa,WAAW,cAAW,aAAU,GAAGC,KACvE,GACA;CACA,IAAIC,MAAU,SAAS;EACrB,IAAMC,IAAQ,OAAOC,CAAQ;EAC7B,IAAI,CAAC,OAAO,MAAMD,CAAK,GAAG;GACxB,IAAIA,MAAU,GAAG,OAAO;GACxB,IAAWA,IAAQ,KAAK,QAAQ,OAAOA,CAAK;EAC9C;CACF;CAEA,OACE,kBAAC,QAAD;EACO;EACL,cAAYD;EACZ,mBAAiBG;EACjB,aAAWH,MAAU,WAAWI,IAAO,KAAA;EACvC,WAAW,CAAC,YAAYC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC3D,GAAIN;EANN,UAAA,CAQGC,MAAU,YAAY,kBAAC,QAAD;GAAM,WAAU;GAAgB,eAAY;EAAQ,CAAA,GAC1EE,CACG;;AAEV,CAAC"}

package/dist/components/Badge/style.css

@@ -0,0 +1,103 @@
+@layer components {
+  .ds-badge {
+    /* Three inks per badge: the stroke/text tone, the soft fill it sits on,
+     * and the solid pair. A tone sets all four; appearance picks which two
+     * are used. Nothing else in the component knows a colour. */
+    --badge-ink: var(--color-text-muted);
+    --badge-soft: var(--color-surface-subtle);
+    --badge-solid: var(--color-text);
+    --badge-on-solid: var(--color-surface);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 2px var(--space-2);
+    border: var(--badge-border-width) solid transparent;
+    border-radius: var(--radius-pill);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight);
+    white-space: nowrap;
+  }
+
+  .ds-badge[data-shape="status"] {
+    padding: 2px 10px;
+  }
+
+  /* A count reads as one glyph: never narrower than it is tall. */
+  .ds-badge[data-shape="count"] {
+    justify-content: center;
+    min-inline-size: var(--space-6);
+    padding-inline: var(--space-2);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ── Appearances ─────────────────────────────────────────────────────── */
+  .ds-badge[data-appearance="outline"] {
+    background: transparent;
+    border-color: var(--badge-ink);
+    color: var(--badge-ink);
+  }
+
+  .ds-badge[data-appearance="soft"] {
+    background: var(--badge-soft);
+    border-color: color-mix(in srgb, var(--badge-ink) 30%, transparent);
+    color: var(--badge-ink);
+  }
+
+  .ds-badge[data-appearance="solid"] {
+    background: var(--badge-solid);
+    border-color: var(--badge-solid);
+    color: var(--badge-on-solid);
+  }
+
+  .ds-badge__dot {
+    inline-size: var(--space-2);
+    block-size: var(--space-2);
+    border-radius: var(--radius-pill);
+    background: currentColor;
+  }
+
+  /* ── Publication tones ───────────────────────────────────────────────── */
+  .ds-badge[data-tone="draft"] {
+    --badge-ink: var(--status-draft-text);
+    --badge-soft: var(--status-draft-soft);
+    --badge-solid: var(--color-text-muted);
+    --badge-on-solid: var(--color-surface);
+  }
+
+  .ds-badge[data-tone="scheduled"] {
+    --badge-ink: var(--status-scheduled);
+    --badge-soft: var(--status-scheduled-soft);
+    --badge-solid: var(--color-primary);
+    --badge-on-solid: var(--color-text-on-solid);
+  }
+
+  .ds-badge[data-tone="published"] {
+    --badge-ink: var(--status-published);
+    --badge-soft: var(--status-published-soft);
+    --badge-solid: var(--color-success);
+    --badge-on-solid: var(--color-text-on-solid);
+  }
+
+  .ds-badge[data-tone="changed"] {
+    --badge-ink: var(--status-changed);
+    --badge-soft: var(--status-changed-soft);
+    --badge-solid: var(--color-warning);
+    --badge-on-solid: var(--color-text-on-solid);
+  }
+
+  .ds-badge[data-tone="unpublished"] {
+    --badge-ink: var(--status-unpublished);
+    --badge-soft: var(--status-unpublished-soft);
+    --badge-solid: var(--color-danger);
+    --badge-on-solid: var(--color-text-on-solid);
+  }
+
+  .ds-badge[data-tone="archived"] {
+    --badge-ink: var(--status-archived-text);
+    --badge-soft: var(--color-surface-subtle);
+    --badge-solid: var(--color-border-strong);
+    --badge-on-solid: var(--color-text);
+  }
+}

package/dist/components/Board/index.cjs

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

package/dist/components/Board/index.cjs.map

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

package/dist/components/Board/index.d.cts

@@ -0,0 +1,62 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface BoardMove {
+    cardId: string;
+    fromColumnId: string;
+    toColumnId: string;
+    /** Index the card lands on inside the destination column. */
+    toIndex: number;
+}
+export interface BoardColumnMove {
+    columnId: string;
+    toIndex: number;
+}
+export interface BoardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDragEnd"> {
+    /** Column ids in render order. Required for columns to be re-orderable. */
+    columnIds?: string[];
+    /** Fired once a card is dropped somewhere new. Apply it to your own state. */
+    onMove?: (move: BoardMove) => void;
+    /** Fired once a column is dropped in a new position. */
+    onColumnMove?: (move: BoardColumnMove) => void;
+    /** Rendered inside the drag overlay while a card is in the air. */
+    renderDragOverlay?: (cardId: string) => ReactNode;
+    /** Rendered inside the drag overlay while a column is in the air. */
+    renderColumnDragOverlay?: (columnId: string) => ReactNode;
+    children?: ReactNode;
+}
+/**
+ * A column board with pointer and keyboard dragging. The board owns the drag
+ * mechanics only — the card data stays yours; react to `onMove`.
+ */
+export declare const Board: import("react").ForwardRefExoticComponent<BoardProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BoardColumnProps extends HTMLAttributes<HTMLDivElement> {
+    id: string;
+    title: string;
+    /** Card ids in render order — the sortable contract for this column. */
+    itemIds: string[];
+    /** Shown beside the title; defaults to the number of cards. */
+    count?: number;
+    /** A control in the column head, e.g. an add button or a menu. */
+    action?: ReactNode;
+    /** Set false to pin a lane in place. */
+    isDraggable?: boolean;
+    children?: ReactNode;
+}
+/**
+ * One lane of the board. Heavy frame, hairline head rule, scrolling body, and
+ * a grip on top of the head that drags the whole lane sideways.
+ */
+export declare const BoardColumn: import("react").ForwardRefExoticComponent<BoardColumnProps & import("react").RefAttributes<HTMLElement>>;
+export interface BoardCardProps extends HTMLAttributes<HTMLDivElement> {
+    id: string;
+    columnId: string;
+    /** Accessible name announced when the card is picked up. */
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * A draggable card. The grip on the left is the handle, so the card body can
+ * hold links and buttons; the grip is a real button for keyboard users:
+ * space to pick up, arrows to move, space to drop.
+ */
+export declare const BoardCard: import("react").ForwardRefExoticComponent<BoardCardProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Board/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Board/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA4Bf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAkED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACnF,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,qEAAqE;IACrE,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,uGA2IhB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,0GA8DvB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,2GAiCpB,CAAC"}

package/dist/components/Board/index.d.ts

@@ -0,0 +1,62 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface BoardMove {
+    cardId: string;
+    fromColumnId: string;
+    toColumnId: string;
+    /** Index the card lands on inside the destination column. */
+    toIndex: number;
+}
+export interface BoardColumnMove {
+    columnId: string;
+    toIndex: number;
+}
+export interface BoardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDragEnd"> {
+    /** Column ids in render order. Required for columns to be re-orderable. */
+    columnIds?: string[];
+    /** Fired once a card is dropped somewhere new. Apply it to your own state. */
+    onMove?: (move: BoardMove) => void;
+    /** Fired once a column is dropped in a new position. */
+    onColumnMove?: (move: BoardColumnMove) => void;
+    /** Rendered inside the drag overlay while a card is in the air. */
+    renderDragOverlay?: (cardId: string) => ReactNode;
+    /** Rendered inside the drag overlay while a column is in the air. */
+    renderColumnDragOverlay?: (columnId: string) => ReactNode;
+    children?: ReactNode;
+}
+/**
+ * A column board with pointer and keyboard dragging. The board owns the drag
+ * mechanics only — the card data stays yours; react to `onMove`.
+ */
+export declare const Board: import("react").ForwardRefExoticComponent<BoardProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BoardColumnProps extends HTMLAttributes<HTMLDivElement> {
+    id: string;
+    title: string;
+    /** Card ids in render order — the sortable contract for this column. */
+    itemIds: string[];
+    /** Shown beside the title; defaults to the number of cards. */
+    count?: number;
+    /** A control in the column head, e.g. an add button or a menu. */
+    action?: ReactNode;
+    /** Set false to pin a lane in place. */
+    isDraggable?: boolean;
+    children?: ReactNode;
+}
+/**
+ * One lane of the board. Heavy frame, hairline head rule, scrolling body, and
+ * a grip on top of the head that drags the whole lane sideways.
+ */
+export declare const BoardColumn: import("react").ForwardRefExoticComponent<BoardColumnProps & import("react").RefAttributes<HTMLElement>>;
+export interface BoardCardProps extends HTMLAttributes<HTMLDivElement> {
+    id: string;
+    columnId: string;
+    /** Accessible name announced when the card is picked up. */
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * A draggable card. The grip on the left is the handle, so the card body can
+ * hold links and buttons; the grip is a real button for keyboard users:
+ * space to pick up, arrows to move, space to drop.
+ */
+export declare const BoardCard: import("react").ForwardRefExoticComponent<BoardCardProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Board/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Board/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA4Bf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAkED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACnF,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,qEAAqE;IACrE,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,uGA2IhB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,0GA8DvB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,2GAiCpB,CAAC"}

package/dist/components/Board/index.js

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

package/dist/components/Board/index.js.map

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