@flamingo-stack/openframe-frontend-core 0.0.192 → 0.0.193

package/dist/{chunk-CDR4RZ5N.js → chunk-E6VCRL42.js}

@@ -32657,7 +32657,6 @@ function WaitlistForm({
 }
 
 // src/components/features/board/board.tsx
-init_cn();
 import * as React102 from "react";
 import {
   DndContext,
@@ -32671,6 +32670,7 @@ import {
   useSensors
 } from "@dnd-kit/core";
 import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+init_cn();
 
 // src/components/features/board/board-column.tsx
 import { useDroppable } from "@dnd-kit/core";
@@ -33110,6 +33110,18 @@ function Board({
   className
 }) {
   const { collapsed, toggle } = useBoardCollapse(collapseStorageKey);
+  const {
+    scrollRef,
+    trackRef,
+    thumbRef,
+    thumbRatio,
+    onScroll,
+    onTrackClick,
+    onTrackWheel,
+    onThumbPointerDown,
+    onThumbPointerMove,
+    onThumbPointerUp
+  } = useHorizontalScrollbar();
   const [items, setItems] = React102.useState(columns);
   const isDraggingRef = React102.useRef(false);
   React102.useEffect(() => {
@@ -33262,31 +33274,62 @@ function Board({
       onDragEnd: handleDragEnd,
       onDragCancel: handleDragCancel,
       children: [
-        /* @__PURE__ */ jsx299("div", { className: cn("flex h-full overflow-x-auto", className), children: items.map((column, i) => {
-          const prev = items[i - 1];
-          const next = items[i + 1];
-          const joinLeft = !!(column.system && prev?.system);
-          const joinRight = !!(column.system && next?.system);
-          const showGap = i > 0 && !joinLeft;
-          return /* @__PURE__ */ jsxs246(React102.Fragment, { children: [
-            showGap && /* @__PURE__ */ jsx299("div", { "aria-hidden": true, className: "w-[var(--spacing-system-mf)] shrink-0" }),
-            /* @__PURE__ */ jsx299(
-              BoardColumn,
-              {
-                column,
-                collapsed: !!collapsed[column.id],
-                onToggleCollapse: () => toggle(column.id),
-                onAddTicket,
-                getTicketHref,
-                renderAssignSlot,
-                onLoadMore,
-                loadMoreRootMargin,
-                joinLeft,
-                joinRight
-              }
-            )
-          ] }, column.id);
-        }) }),
+        /* @__PURE__ */ jsxs246("div", { className: cn("flex flex-col h-full", className), children: [
+          /* @__PURE__ */ jsx299(
+            "div",
+            {
+              ref: scrollRef,
+              onScroll,
+              className: "flex flex-1 min-h-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+              children: items.map((column, i) => {
+                const prev = items[i - 1];
+                const next = items[i + 1];
+                const joinLeft = !!(column.system && prev?.system);
+                const joinRight = !!(column.system && next?.system);
+                const showGap = i > 0 && !joinLeft;
+                return /* @__PURE__ */ jsxs246(React102.Fragment, { children: [
+                  showGap && /* @__PURE__ */ jsx299("div", { "aria-hidden": true, className: "w-[var(--spacing-system-mf)] shrink-0" }),
+                  /* @__PURE__ */ jsx299(
+                    BoardColumn,
+                    {
+                      column,
+                      collapsed: !!collapsed[column.id],
+                      onToggleCollapse: () => toggle(column.id),
+                      onAddTicket,
+                      getTicketHref,
+                      renderAssignSlot,
+                      onLoadMore,
+                      loadMoreRootMargin,
+                      joinLeft,
+                      joinRight
+                    }
+                  )
+                ] }, column.id);
+              })
+            }
+          ),
+          thumbRatio > 0 && /* @__PURE__ */ jsx299(
+            "div",
+            {
+              ref: trackRef,
+              onClick: onTrackClick,
+              onWheel: onTrackWheel,
+              className: "relative h-2 mt-[var(--spacing-system-mf)] rounded-full bg-ods-border cursor-pointer shrink-0",
+              children: /* @__PURE__ */ jsx299(
+                "div",
+                {
+                  ref: thumbRef,
+                  "data-scrollbar-thumb": true,
+                  className: "absolute top-0 h-full rounded-full bg-ods-text-secondary transition-colors",
+                  style: { width: `${thumbRatio * 100}%`, cursor: "grab" },
+                  onPointerDown: onThumbPointerDown,
+                  onPointerMove: onThumbPointerMove,
+                  onPointerUp: onThumbPointerUp
+                }
+              )
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx299(DragOverlay, { dropAnimation: null, children: activeTicket ? /* @__PURE__ */ jsx299(TicketCard, { ticket: activeTicket.ticket, columnId: activeTicket.columnId, isOverlay: true }) : null })
       ]
     }
@@ -33965,4 +34008,4 @@ export {
   TMCG_SOCIAL_PLATFORMS,
   assets
 };
-//# sourceMappingURL=chunk-CDR4RZ5N.js.map
+//# sourceMappingURL=chunk-E6VCRL42.js.map