@flytedan/flytebot-design-system 0.7.1 → 0.8.0

package/dist/index.js

@@ -2294,7 +2294,7 @@ function QuotaRow({ label, percent = 0, note, tone, className = "" }) {
 // src/components/data/SortMenu.tsx
 import * as React13 from "react";
 import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
-function SortMenu({ fields = [], sort, onSort, align = "right", className = "", ...rest }) {
+function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", className = "", ...rest }) {
   const [open, setOpen] = React13.useState(false);
   const ref = React13.useRef(null);
   React13.useEffect(() => {
@@ -2340,7 +2340,7 @@ function SortMenu({ fields = [], sort, onSort, align = "right", className = "",
     );
   };
   return /* @__PURE__ */ jsxs31("span", { className, style: { position: "relative", display: "inline-flex" }, ref, ...rest, children: [
-    /* @__PURE__ */ jsxs31(Button, { size: "sm", variant: "secondary", icon: dir === "asc" ? "sort-ascending" : "sort-descending", onClick: () => setOpen(!open), children: [
+    /* @__PURE__ */ jsxs31(Button, { size, variant: "secondary", icon: dir === "asc" ? "sort-ascending" : "sort-descending", onClick: () => setOpen(!open), children: [
       cur ? cur.label : "Unsorted",
       /* @__PURE__ */ jsx35("i", { className: "ph ph-" + (dir === "asc" ? "arrow-up" : "arrow-down"), style: { fontSize: 12, marginLeft: 6, opacity: 0.75 } })
     ] }),
@@ -2469,6 +2469,8 @@ function VirtualList({
   onNeedMore,
   hasMore,
   loading = false,
+  refreshing = false,
+  refreshingLabel = "Searching\u2026",
   keyOf,
   height = 400,
   emptyState,
@@ -2494,54 +2496,83 @@ function VirtualList({
     requested.current.end = items.length;
     onNeedMore("end");
   }, [wantEnd, loading, items.length, onNeedMore]);
-  if (!items.length && !loading && emptyState) {
-    return /* @__PURE__ */ jsx37("div", { className: ["fd-vlist", className].filter(Boolean).join(" "), style: { height, overflow: "auto", ...style }, children: emptyState });
+  const lastKeysRef = React15.useRef(null);
+  const newKeys = React15.useMemo(() => {
+    const prev = lastKeysRef.current;
+    if (!prev) return /* @__PURE__ */ new Set();
+    const fresh = /* @__PURE__ */ new Set();
+    for (const item of items) {
+      const k = keyOf(item);
+      if (!prev.has(k)) fresh.add(k);
+    }
+    return fresh;
+  }, [items]);
+  React15.useEffect(() => {
+    lastKeysRef.current = new Set(items.map(keyOf));
+  }, [items]);
+  if (!items.length && !loading && !refreshing && emptyState) {
+    return /* @__PURE__ */ jsx37("div", { className: ["fd-vlist-wrap", className].filter(Boolean).join(" "), style: { height, position: "relative", ...style }, children: /* @__PURE__ */ jsx37("div", { className: "fd-vlist fd-scrollbar", style: { height: "100%", overflow: "auto" }, children: emptyState }) });
   }
   const rows = [];
   for (let i = win.startIndex; i <= win.endIndex; i++) {
     const item = items[i];
     if (item === void 0) continue;
+    const key = keyOf(item);
     rows.push(
-      /* @__PURE__ */ jsx37("div", { style: { height: itemHeight, boxSizing: "border-box" }, children: renderItem(item, i) }, keyOf(item))
+      /* @__PURE__ */ jsx37(
+        "div",
+        {
+          className: "fd-vlist-row",
+          style: { height: itemHeight, boxSizing: "border-box", transform: "translateY(" + i * itemHeight + "px)" },
+          children: /* @__PURE__ */ jsx37("div", { className: newKeys.has(key) ? "fd-vlist-row-content fd-vlist-row-enter" : "fd-vlist-row-content", children: renderItem(item, i) })
+        },
+        key
+      )
     );
   }
-  return /* @__PURE__ */ jsxs33(
-    "div",
-    {
-      className: ["fd-vlist", className].filter(Boolean).join(" "),
-      style: { height, overflowY: "auto", overflowX: "hidden", position: "relative", ...style },
-      onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-      children: [
-        /* @__PURE__ */ jsx37("div", { style: { height: win.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx37("div", { style: { position: "absolute", top: win.offsetY, left: 0, right: 0 }, children: rows }) }),
-        loading ? /* @__PURE__ */ jsx37("div", { style: { position: "sticky", bottom: 0, left: 0, right: 0, display: "grid", placeItems: "center", padding: "8px 0", background: "var(--surface)" }, children: /* @__PURE__ */ jsx37("span", { className: "fd-spinner", "aria-hidden": "true" }) }) : null
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs33("div", { className: ["fd-vlist-wrap", className].filter(Boolean).join(" "), style: { height, position: "relative", ...style }, children: [
+    /* @__PURE__ */ jsxs33(
+      "div",
+      {
+        className: "fd-vlist fd-scrollbar",
+        style: { height: "100%", overflowY: "auto", overflowX: "hidden", position: "relative" },
+        onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+        children: [
+          /* @__PURE__ */ jsx37("div", { style: { height: win.totalHeight, position: "relative" }, children: rows }),
+          loading ? /* @__PURE__ */ jsx37("div", { style: { position: "sticky", bottom: 0, left: 0, right: 0, display: "grid", placeItems: "center", padding: "8px 0", background: "var(--surface)" }, children: /* @__PURE__ */ jsx37("span", { className: "fd-spinner", "aria-hidden": "true" }) }) : null
+        ]
+      }
+    ),
+    refreshing ? /* @__PURE__ */ jsx37("div", { className: "fd-vlist-refresh-scrim", children: /* @__PURE__ */ jsxs33("div", { className: "fd-vlist-refresh-card", children: [
+      /* @__PURE__ */ jsx37("span", { className: "fd-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx37("span", { className: "fd-body-sm", children: refreshingLabel })
+    ] }) }) : null
+  ] });
 }
 
 // src/components/data/EntityRow.tsx
 import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
-function EntityRow({ title, meta, action, draggable = false, onDragStart, onDragEnd, style, className = "" }) {
+function EntityRow({ title, meta, action, draggable = false, onPointerDown, style, className = "" }) {
   return /* @__PURE__ */ jsxs34(
     "div",
     {
-      draggable,
-      onDragStart,
-      onDragEnd,
+      onPointerDown,
       className: ["fd-erow", className].filter(Boolean).join(" "),
       style: {
         display: "flex",
         alignItems: "center",
-        gap: 8,
+        gap: 10,
         height: "100%",
-        padding: "0 8px",
-        borderRadius: 6,
+        padding: "0 14px",
         cursor: draggable ? "grab" : void 0,
+        // Own the gesture on touch too — without this, a touch-drag on a draggable row
+        // starts the page scrolling instead of (or as well as) the pointer drag.
+        touchAction: draggable ? "none" : void 0,
         ...style
       },
       children: [
-        draggable ? /* @__PURE__ */ jsx38("i", { className: "ph ph-dots-six-vertical", "aria-hidden": "true", style: { fontSize: 13, flex: "none", color: "var(--text-muted)" } }) : null,
-        /* @__PURE__ */ jsxs34("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 1 }, children: [
+        draggable ? /* @__PURE__ */ jsx38("i", { className: "ph ph-dots-six-vertical", "aria-hidden": "true", style: { fontSize: 14, flex: "none", color: "var(--text-muted)" } }) : null,
+        /* @__PURE__ */ jsxs34("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 2 }, children: [
           /* @__PURE__ */ jsx38("span", { className: "fd-body-sm", style: { fontWeight: 600, color: "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: title }),
           meta ? /* @__PURE__ */ jsx38("span", { style: { fontSize: "var(--overline-size)", color: "var(--text-muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: meta }) : null
         ] }),
@@ -2562,6 +2593,7 @@ function EntityRow({ title, meta, action, draggable = false, onDragStart, onDrag
 
 // src/components/data/TransferList.tsx
 import * as React16 from "react";
+import { createPortal as createPortal4 } from "react-dom";
 
 // src/components/forms/Input.tsx
 import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
@@ -2658,6 +2690,7 @@ function SearchField({
 // src/components/data/TransferList.tsx
 import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 var emptyHasMore = {};
+var DRAG_THRESHOLD_PX = 5;
 function TransferList({
   left,
   right,
@@ -2669,97 +2702,199 @@ function TransferList({
   listHeight = 440,
   className = ""
 }) {
-  const [dragging, setDragging] = React16.useState(null);
+  const [drag, setDrag] = React16.useState(null);
   const [dragOverSide, setDragOverSide] = React16.useState(null);
-  const startDrag = (e, item, from) => {
-    const key = keyOf(item);
-    setDragging({ key, from });
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/plain", String(key));
-  };
-  const endDrag = () => {
-    setDragging(null);
-    setDragOverSide(null);
-  };
-  const findItem = (side, key) => (side === "left" ? left.items : right.items).find((it) => keyOf(it) === key);
-  const dropOnSide = (e, side) => {
+  const dragRef = React16.useRef(null);
+  const armedRef = React16.useRef(null);
+  const sideRefs = React16.useRef({ left: null, right: null });
+  const hitTestSide = React16.useCallback((x, y) => {
+    for (const side of ["left", "right"]) {
+      const el = sideRefs.current[side];
+      if (!el) continue;
+      const r = el.getBoundingClientRect();
+      if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return side;
+    }
+    return null;
+  }, []);
+  const findItem = React16.useCallback(
+    (side, key) => (side === "left" ? left.items : right.items).find((it) => keyOf(it) === key),
+    [left.items, right.items, keyOf]
+  );
+  const beginDrag = (e, item, from) => {
+    if (e.button !== 0) return;
+    if (e.target.closest && e.target.closest("button")) return;
     e.preventDefault();
-    setDragOverSide(null);
-    if (!dragging || dragging.from === side) return;
-    const item = findItem(dragging.from, dragging.key);
-    if (item !== void 0) onMove(item, dragging.from, side);
-    setDragging(null);
+    const rect = e.currentTarget.getBoundingClientRect();
+    armedRef.current = {
+      item,
+      from,
+      key: keyOf(item),
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      offsetX: e.clientX - rect.left,
+      offsetY: e.clientY - rect.top,
+      width: rect.width,
+      height: rect.height
+    };
   };
-  const renderSide = (side, cfg, opposite) => /* @__PURE__ */ jsxs36(
-    "div",
-    {
-      style: {
-        flex: 1,
-        minWidth: 0,
-        display: "flex",
-        flexDirection: "column",
-        gap: 8,
-        padding: 10,
-        borderRadius: 10,
-        border: "1px solid " + (dragOverSide === side ? "var(--brand)" : "var(--border)"),
-        background: "var(--surface)"
-      },
-      onDragOver: (e) => {
-        if (!dragging || dragging.from === side) return;
-        e.preventDefault();
-        e.dataTransfer.dropEffect = "move";
-        if (dragOverSide !== side) setDragOverSide(side);
-      },
-      onDragLeave: (e) => {
-        if (e.currentTarget.contains(e.relatedTarget)) return;
-        setDragOverSide((s) => s === side ? null : s);
-      },
-      onDrop: (e) => dropOnSide(e, side),
-      children: [
-        cfg.label ? /* @__PURE__ */ jsxs36("span", { className: "fd-overline fd-muted", children: [
-          cfg.label,
-          cfg.total != null ? " (" + cfg.total.toLocaleString() + ")" : ""
-        ] }) : null,
-        /* @__PURE__ */ jsxs36("span", { className: "fd-row", style: { gap: 8 }, children: [
-          /* @__PURE__ */ jsx41(SearchField, { value: cfg.search, onChange: cfg.onSearchChange, placeholder: "Search", "aria-label": (cfg.label || side) + " search", style: { flex: 1 } }),
-          /* @__PURE__ */ jsx41(SortMenu, { fields: cfg.sortFields, sort: cfg.sort, onSort: cfg.onSort })
-        ] }),
-        /* @__PURE__ */ jsx41(
-          VirtualList,
-          {
-            items: cfg.items,
-            itemHeight,
-            height: listHeight,
-            keyOf,
-            loading: cfg.loading,
-            hasMore: cfg.hasMore || emptyHasMore,
-            onNeedMore: cfg.onNeedMore,
-            emptyState: /* @__PURE__ */ jsx41(EmptyState, { icon: "tray", title: "Nothing here" }),
-            renderItem: (item) => /* @__PURE__ */ jsx41(
-              EntityRow,
-              {
-                title: renderLabel(item),
-                meta: renderMeta ? renderMeta(item) : void 0,
-                draggable: true,
-                onDragStart: (e) => startDrag(e, item, side),
-                onDragEnd: endDrag,
-                style: { opacity: dragging && dragging.from === side && dragging.key === keyOf(item) ? 0.4 : 1 },
-                action: {
-                  icon: side === "left" ? "plus" : "minus",
-                  label: (side === "left" ? "Move to " : "Move from ") + (side === "left" ? right.label || "the other list" : left.label || "the other list"),
-                  tone: side === "left" ? "add" : "remove",
-                  onClick: () => onMove(item, side, opposite)
+  React16.useEffect(() => {
+    const onMovePointer = (e) => {
+      const armed = armedRef.current;
+      if (!armed || e.pointerId !== armed.pointerId) return;
+      if (!dragRef.current) {
+        const dx = e.clientX - armed.startX;
+        const dy = e.clientY - armed.startY;
+        if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;
+        const started = {
+          item: armed.item,
+          from: armed.from,
+          key: armed.key,
+          pointerId: armed.pointerId,
+          offsetX: armed.offsetX,
+          offsetY: armed.offsetY,
+          width: armed.width,
+          height: armed.height,
+          x: e.clientX,
+          y: e.clientY
+        };
+        dragRef.current = started;
+        setDrag(started);
+      } else {
+        dragRef.current = { ...dragRef.current, x: e.clientX, y: e.clientY };
+        setDrag(dragRef.current);
+      }
+      const hit = hitTestSide(e.clientX, e.clientY);
+      setDragOverSide(hit && hit !== armed.from ? hit : null);
+    };
+    const endDrag = (e) => {
+      const armed = armedRef.current;
+      if (!armed || e.pointerId !== armed.pointerId) return;
+      const wasDragging = dragRef.current;
+      armedRef.current = null;
+      dragRef.current = null;
+      setDrag(null);
+      setDragOverSide(null);
+      if (!wasDragging) return;
+      const hit = hitTestSide(e.clientX, e.clientY);
+      if (hit && hit !== armed.from) {
+        const item = findItem(armed.from, armed.key);
+        if (item !== void 0) onMove(item, armed.from, hit);
+      }
+    };
+    window.addEventListener("pointermove", onMovePointer);
+    window.addEventListener("pointerup", endDrag);
+    window.addEventListener("pointercancel", endDrag);
+    return () => {
+      window.removeEventListener("pointermove", onMovePointer);
+      window.removeEventListener("pointerup", endDrag);
+      window.removeEventListener("pointercancel", endDrag);
+    };
+  }, [hitTestSide, findItem, onMove]);
+  React16.useEffect(() => {
+    if (!drag || typeof document === "undefined") return;
+    const prev = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+    return () => {
+      document.body.style.userSelect = prev;
+    };
+  }, [drag]);
+  const renderSide = (side, cfg, opposite) => {
+    const showOverlay = drag != null && dragOverSide === side;
+    return /* @__PURE__ */ jsxs36(
+      "div",
+      {
+        ref: (el) => {
+          sideRefs.current[side] = el;
+        },
+        style: {
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          padding: 10,
+          borderRadius: 10,
+          border: "1px solid " + (dragOverSide === side ? "var(--brand)" : "var(--border)"),
+          background: "var(--surface)",
+          position: "relative"
+        },
+        children: [
+          cfg.label ? /* @__PURE__ */ jsxs36("span", { className: "fd-overline fd-muted", children: [
+            cfg.label,
+            cfg.total != null ? " (" + cfg.total.toLocaleString() + ")" : ""
+          ] }) : null,
+          /* @__PURE__ */ jsxs36("span", { className: "fd-row", style: { gap: 8 }, children: [
+            /* @__PURE__ */ jsx41(SearchField, { value: cfg.search, onChange: cfg.onSearchChange, placeholder: "Search", "aria-label": (cfg.label || side) + " search", style: { flex: 1 } }),
+            /* @__PURE__ */ jsx41(SortMenu, { fields: cfg.sortFields, sort: cfg.sort, onSort: cfg.onSort, align: side === "left" ? "left" : "right" })
+          ] }),
+          /* @__PURE__ */ jsx41(
+            VirtualList,
+            {
+              items: cfg.items,
+              itemHeight,
+              height: listHeight,
+              keyOf,
+              loading: cfg.loading,
+              refreshing: cfg.refreshing,
+              hasMore: cfg.hasMore || emptyHasMore,
+              onNeedMore: cfg.onNeedMore,
+              emptyState: /* @__PURE__ */ jsx41(EmptyState, { icon: "tray", title: "Nothing here" }),
+              renderItem: (item) => {
+                const isBeingDragged = drag != null && drag.from === side && drag.key === keyOf(item);
+                if (isBeingDragged) {
+                  return /* @__PURE__ */ jsx41("div", { className: "fd-erow-placeholder", "aria-hidden": "true" });
                 }
+                return /* @__PURE__ */ jsx41(
+                  EntityRow,
+                  {
+                    title: renderLabel(item),
+                    meta: renderMeta ? renderMeta(item) : void 0,
+                    draggable: true,
+                    onPointerDown: (e) => beginDrag(e, item, side),
+                    action: {
+                      icon: side === "left" ? "plus" : "minus",
+                      label: (side === "left" ? "Move to " : "Move from ") + (side === "left" ? right.label || "the other list" : left.label || "the other list"),
+                      tone: side === "left" ? "add" : "remove",
+                      onClick: () => onMove(item, side, opposite)
+                    }
+                  }
+                );
               }
-            )
-          }
-        )
-      ]
-    }
-  );
+            }
+          ),
+          showOverlay ? /* @__PURE__ */ jsx41("div", { className: "fd-tlist-drop-overlay", "aria-hidden": "true", children: /* @__PURE__ */ jsxs36("span", { className: "fd-tlist-drop-card", children: [
+            /* @__PURE__ */ jsx41("i", { className: "ph ph-tray-arrow-down", style: { fontSize: 18 }, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx41("span", { className: "fd-body-sm", style: { fontWeight: 600 }, children: cfg.dropLabel || "Drop here" + (cfg.label ? " \u2014 " + cfg.label : "") })
+          ] }) }) : null
+        ]
+      }
+    );
+  };
   return /* @__PURE__ */ jsxs36("div", { className: ["fd-tlist", className].filter(Boolean).join(" "), style: { display: "flex", gap: 16, alignItems: "flex-start" }, children: [
     renderSide("left", left, "right"),
-    renderSide("right", right, "left")
+    renderSide("right", right, "left"),
+    drag ? createPortal4(
+      /* @__PURE__ */ jsx41(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "fd-erow-ghost",
+          style: {
+            position: "fixed",
+            left: 0,
+            top: 0,
+            width: drag.width,
+            height: drag.height,
+            transform: `translate(${drag.x - drag.offsetX}px, ${drag.y - drag.offsetY}px) rotate(-3deg)`,
+            pointerEvents: "none",
+            zIndex: 1e3
+          },
+          children: /* @__PURE__ */ jsx41(EntityRow, { title: renderLabel(drag.item), meta: renderMeta ? renderMeta(drag.item) : void 0, draggable: true, className: "fd-erow-dragging" })
+        }
+      ),
+      document.body
+    ) : null
   ] });
 }
 
@@ -2969,7 +3104,7 @@ function NumberInput({
 
 // src/components/forms/Select.tsx
 import * as React19 from "react";
-import { createPortal as createPortal4 } from "react-dom";
+import { createPortal as createPortal5 } from "react-dom";
 import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 var norm = (o) => typeof o === "string" ? { value: o, label: o } : o;
 function usePopPos(open, ref, estH, estW) {
@@ -3175,7 +3310,7 @@ function Select({
       ) : null,
       loading ? /* @__PURE__ */ jsx47("span", { className: "fd-spinner", style: { color: "var(--text-muted)" }, "aria-label": "Loading options" }) : /* @__PURE__ */ jsx47("span", { className: "fd-select-caret", onClick: toggle, children: /* @__PURE__ */ jsx47("i", { className: "ph ph-caret-down", "aria-hidden": "true" }) })
     ] }),
-    open && pos ? createPortal4(
+    open && pos ? createPortal5(
       /* @__PURE__ */ jsxs42(
         "div",
         {
@@ -3272,7 +3407,7 @@ function Select({
 
 // src/components/forms/DatePicker.tsx
 import * as React20 from "react";
-import { createPortal as createPortal5 } from "react-dom";
+import { createPortal as createPortal6 } from "react-dom";
 import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 var DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -3501,7 +3636,7 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
       ),
       /* @__PURE__ */ jsx48("span", { className: "fd-select-caret", children: /* @__PURE__ */ jsx48("i", { className: "ph ph-caret-down", "aria-hidden": "true" }) })
     ] }),
-    open && pos ? createPortal5(
+    open && pos ? createPortal6(
       /* @__PURE__ */ jsx48("div", { className: "fd-pop" + (pos.up ? " is-up" : ""), ref: popRef, style: popStyle2(pos, { width: "max-content", minWidth: 0, zIndex: 130 }), children: /* @__PURE__ */ jsx48(
         Calendar,
         {
@@ -3525,7 +3660,7 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
 
 // src/components/forms/TimePicker.tsx
 import * as React21 from "react";
-import { createPortal as createPortal6 } from "react-dom";
+import { createPortal as createPortal7 } from "react-dom";
 import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
 var pad = (n) => String(n).padStart(2, "0");
 function usePopPos3(open, ref, estH, estW) {
@@ -3704,7 +3839,7 @@ function TimePicker({ label, help, error, required = false, disabled = false, va
       ),
       /* @__PURE__ */ jsx49("span", { className: "fd-select-caret", children: /* @__PURE__ */ jsx49("i", { className: "ph ph-caret-down", "aria-hidden": "true" }) })
     ] }),
-    open && pos ? createPortal6(
+    open && pos ? createPortal7(
       /* @__PURE__ */ jsxs44("div", { className: "fd-pop" + (pos.up ? " is-up" : ""), ref: popRef, style: popStyle3(pos, { width: 262, minWidth: 0, zIndex: 130 }), children: [
         /* @__PURE__ */ jsx49(ClockFace, { value: value || "09:00", onChange: (v) => onChange && onChange({ target: { value: v } }) }),
         /* @__PURE__ */ jsxs44("div", { className: "fd-cal-foot", style: { margin: "0 14px 12px", paddingTop: 10 }, children: [
@@ -4166,7 +4301,7 @@ function FileTile({ file, onOpen, onRemove, maxHeight = 200, className = "" }) {
 function FileStrip({ files = [], size = 68, onOpen, onRemove, onRetry, className = "" }) {
   const list = files.filter(Boolean);
   if (!list.length) return null;
-  return /* @__PURE__ */ jsx53("div", { className: ["fd-filestrip", className].filter(Boolean).join(" "), style: { "--fd-cell": size + "px" }, children: list.map((f) => /* @__PURE__ */ jsx53(FileCell, { file: f, onOpen, onRemove, onRetry }, f.id || f.name)) });
+  return /* @__PURE__ */ jsx53("div", { className: ["fd-filestrip", "fd-scrollbar", className].filter(Boolean).join(" "), style: { "--fd-cell": size + "px" }, children: list.map((f) => /* @__PURE__ */ jsx53(FileCell, { file: f, onOpen, onRemove, onRetry }, f.id || f.name)) });
 }
 var shortName = (name, keep = 5) => {
   const s = String(name || "file");
@@ -7164,7 +7299,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 
 // src/components/platform/ComingSoon.tsx
 import * as React32 from "react";
-import { createPortal as createPortal7 } from "react-dom";
+import { createPortal as createPortal8 } from "react-dom";
 import { Fragment as Fragment13, jsx as jsx59, jsxs as jsxs54 } from "react/jsx-runtime";
 var BYPASS_STORE = "fd.soon.bypass.v1";
 function readBypassed() {
@@ -7405,7 +7540,7 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
             children: /* @__PURE__ */ jsx59("i", { className: "ph ph-traffic-cone", "aria-hidden": "true" })
           }
         ),
-        open && pos ? createPortal7(
+        open && pos ? createPortal8(
           /* @__PURE__ */ jsx59(
             "div",
             {