@floegence/floe-webapp-core 0.35.13 → 0.35.14

package/dist/components/ui/floatingWindowGeometry.js

@@ -0,0 +1,65 @@
+function l(o, h, e) {
+  return Math.max(h, Math.min(e, o));
+}
+function z(o, h, e) {
+  const a = Math.max(0, e), t = Math.min(o, a), n = Math.max(t, Math.min(h, a));
+  return { min: t, max: n };
+}
+function S(o) {
+  const {
+    mode: h,
+    pointer: e,
+    dragStartPos: a,
+    dragStartRect: t,
+    resizeStartPos: n,
+    resizeStartRect: i,
+    resizeHandle: m,
+    minSize: g,
+    maxSize: d,
+    viewport: s,
+    mobile: x,
+    mobilePadding: M
+  } = o, r = e.x - (h === "drag" ? a.x : n.x), w = e.y - (h === "drag" ? a.y : n.y);
+  if (h === "drag")
+    return {
+      ...t,
+      x: x ? M : Math.max(0, Math.min(s.width - t.width, t.x + r)),
+      y: Math.max(0, Math.min(s.height - t.height, t.y + w))
+    };
+  let u = i.width, f = i.height, y = i.x, b = i.y;
+  if (!x && m.includes("e") && (u = Math.max(g.width, Math.min(d.width, i.width + r))), !x && m.includes("w")) {
+    const c = i.width - r;
+    c >= g.width && c <= d.width && (u = c, y = i.x + r);
+  }
+  if (m.includes("s") && (f = Math.max(g.height, Math.min(d.height, i.height + w))), m.includes("n")) {
+    const c = i.height - w;
+    c >= g.height && c <= d.height && (f = c, b = i.y + w);
+  }
+  return {
+    x: Math.max(0, Math.min(s.width - u, y)),
+    y: Math.max(0, Math.min(s.height - f, b)),
+    width: u,
+    height: f
+  };
+}
+function p(o) {
+  const {
+    rect: h,
+    minSize: e,
+    maxSize: a,
+    viewport: t,
+    mobile: n,
+    mobilePadding: i,
+    center: m = !1
+  } = o, g = n ? Math.max(0, t.width - i * 2) : t.width, d = z(e.width, a.width, g), s = z(e.height, a.height, t.height), x = n ? d.max : l(h.width, d.min, d.max), M = l(h.height, s.min, s.max), r = Math.max(0, t.width - x), w = Math.max(0, t.height - M);
+  return {
+    x: n ? l(i, 0, r) : m ? Math.max(0, Math.round((t.width - x) / 2)) : l(h.x, 0, r),
+    y: m ? Math.max(0, Math.round((t.height - M) / 2)) : l(h.y, 0, w),
+    width: x,
+    height: M
+  };
+}
+export {
+  p as normalizeFloatingWindowRect,
+  S as resolveFloatingWindowRect
+};

package/dist/context/FileBrowserDragContext.js

@@ -1,7 +1,8 @@
-import { createComponent as F } from "solid-js/web";
-import { createSignal as N, onCleanup as _, useContext as h, createContext as z } from "solid-js";
-import { lockBodyStyle as O } from "../utils/bodyStyleLock.js";
-const D = z(), T = {
+import { createComponent as E } from "solid-js/web";
+import { createSignal as F, onCleanup as _, useContext as h, createContext as k } from "solid-js";
+import { deferNonBlocking as z } from "../utils/defer.js";
+import { startHotInteraction as O } from "../utils/hotInteraction.js";
+const D = k(), T = {
   isDragging: !1,
   draggedItems: [],
   sourceInstanceId: null,
@@ -16,23 +17,24 @@ const D = z(), T = {
   isDropCommitted: !1,
   dropTargetRect: null
 }, b = 200;
-function k(m) {
+function H(m) {
   const d = m.trim() || "/";
   if (d === "/") return "/";
   const r = d.split("/").filter(Boolean);
   return r.pop(), r.length ? "/" + r.join("/") : "/";
 }
-function W(m) {
-  const [d, r] = N(T), a = /* @__PURE__ */ new Map();
-  let i = null;
+function q(m) {
+  const [d, r] = F(T), a = /* @__PURE__ */ new Map();
+  let s = null;
   const P = (t) => {
     a.set(t.instanceId, t);
   }, R = (t) => {
     a.delete(t);
   }, C = (t) => a.get(t), v = () => a, x = (t, e, n) => {
-    t.length !== 0 && (i?.(), i = O({
+    t.length !== 0 && (s?.(), s = O({
+      kind: "drag",
       cursor: "grabbing",
-      "user-select": "none"
+      lockUserSelect: !0
     }), r({
       isDragging: !0,
       draggedItems: t,
@@ -56,29 +58,29 @@ function W(m) {
         y: e
       }
     }));
-  }, y = (t, e, n) => {
+  }, A = (t, e, n) => {
     r((c) => ({
       ...c,
       dropTarget: t,
       isValidDrop: e,
       dropTargetRect: n ?? null
     }));
-  }, A = (t, e, n, c) => {
+  }, B = (t, e, n, c) => {
     if (t.length === 0 || n && n.type === "file") return !1;
     for (const o of t) {
-      const l = o.item.path, g = k(l);
+      const g = o.item.path, l = H(g);
       if (o.item.type === "folder") {
-        const u = e.trim() || "/", p = l.trim() || "/";
-        if (u === p || u.startsWith(p + "/")) return !1;
+        const p = e.trim() || "/", u = g.trim() || "/";
+        if (p === u || p.startsWith(u + "/")) return !1;
       }
-      if (o.sourceInstanceId === c && g === e)
+      if (o.sourceInstanceId === c && l === e)
         return !1;
     }
     return !0;
-  }, B = (t) => {
+  }, S = (t) => {
     const e = d();
     if (!e.isDragging) return;
-    i?.(), i = null;
+    s?.(), s = null;
     const n = !!(t && e.dropTarget && e.isValidDrop);
     let c = null;
     if (n && e.dropTargetRect && (c = {
@@ -94,24 +96,24 @@ function W(m) {
     })), n) {
       const {
         draggedItems: o,
-        sourceInstanceId: l
+        sourceInstanceId: g
       } = e, {
-        targetPath: g,
-        instanceId: u
-      } = e.dropTarget, p = l ? a.get(l) : void 0, f = a.get(u);
+        targetPath: l,
+        instanceId: p
+      } = e.dropTarget, u = g ? a.get(g) : void 0, f = a.get(p);
       if (f?.onDragMove) {
-        const I = o.map((s) => s.item), M = o.map((s) => s.item.path);
-        p?.optimisticRemove(M);
-        for (const s of I) {
-          const V = g === "/" ? "/" + s.name : g + "/" + s.name, E = {
-            ...s,
+        const I = o.map((i) => i.item), N = o.map((i) => i.item.path);
+        u?.optimisticRemove(N);
+        for (const i of I) {
+          const V = l === "/" ? "/" + i.name : l + "/" + i.name, y = {
+            ...i,
             path: V
           };
-          f.optimisticInsert(g, E);
+          f.optimisticInsert(l, y);
         }
-        setTimeout(() => {
-          f.onDragMove(I, g, l || "");
-        }, 0);
+        z(() => {
+          f.onDragMove(I, l, g || "");
+        });
       }
     }
     setTimeout(() => {
@@ -119,9 +121,9 @@ function W(m) {
     }, b);
   };
   _(() => {
-    i?.(), i = null, a.clear();
+    s?.(), s = null, a.clear();
   });
-  const S = {
+  const M = {
     dragState: d,
     registerInstance: P,
     unregisterInstance: R,
@@ -129,25 +131,25 @@ function W(m) {
     getInstances: v,
     startDrag: x,
     updateDrag: w,
-    setDropTarget: y,
-    endDrag: B,
-    canDropOn: A
+    setDropTarget: A,
+    endDrag: S,
+    canDropOn: B
   };
-  return F(D.Provider, {
-    value: S,
+  return E(D.Provider, {
+    value: M,
     get children() {
       return m.children;
     }
   });
 }
-function q() {
+function J() {
   return h(D);
 }
-function H() {
+function K() {
   return h(D) !== void 0;
 }
 export {
-  W as FileBrowserDragProvider,
-  H as hasFileBrowserDragContext,
-  q as useFileBrowserDrag
+  q as FileBrowserDragProvider,
+  K as hasFileBrowserDragContext,
+  J as useFileBrowserDrag
 };

package/dist/context/LayoutContext.d.ts

@@ -3,6 +3,7 @@ export interface LayoutContextValue {
     sidebarWidth: Accessor<number>;
     sidebarActiveTab: Accessor<string>;
     sidebarCollapsed: Accessor<boolean>;
+    clampSidebarWidth: (width: number) => number;
     setSidebarWidth: (width: number) => void;
     setSidebarActiveTab: (tab: string, opts?: {
         openSidebar?: boolean;

package/dist/context/LayoutContext.js

@@ -1,16 +1,16 @@
-import { createEffect as c } from "solid-js";
-import { createStore as m, produce as d } from "solid-js/store";
-import { createSimpleContext as p } from "./createSimpleContext.js";
-import { useResolvedFloeConfig as h } from "./FloeConfigContext.js";
+import { createEffect as m } from "solid-js";
+import { createStore as p, produce as d } from "solid-js/store";
+import { createSimpleContext as h } from "./createSimpleContext.js";
+import { useResolvedFloeConfig as f } from "./FloeConfigContext.js";
 const {
-  Provider: T,
-  use: w
-} = p({
+  Provider: w,
+  use: y
+} = h({
   name: "Layout",
-  init: f
+  init: u
 });
-function f() {
-  const l = h(), a = () => l.config.layout, n = () => typeof window > "u" ? !1 : window.matchMedia(a().mobileQuery).matches, o = l.persist.load(a().storageKey, {}), b = {
+function u() {
+  const l = f(), a = () => l.config.layout, b = () => typeof window > "u" ? !1 : window.matchMedia(a().mobileQuery).matches, o = l.persist.load(a().storageKey, {}), c = {
     sidebar: {
       width: o.sidebar?.width ?? a().sidebar.defaultWidth,
       activeTab: o.sidebar?.activeTab ?? a().sidebar.defaultActiveTab,
@@ -20,9 +20,9 @@ function f() {
       opened: o.terminal?.opened ?? a().terminal.defaultOpened,
       height: o.terminal?.height ?? a().terminal.defaultHeight
     },
-    isMobile: n()
-  }, [i, t] = m(b);
-  return c(() => {
+    isMobile: b()
+  }, [i, t] = p(c), s = (e) => Math.max(a().sidebar.clamp.min, Math.min(a().sidebar.clamp.max, e));
+  return m(() => {
     const e = {
       sidebar: {
         width: i.sidebar.width,
@@ -40,12 +40,13 @@ function f() {
     sidebarWidth: () => i.sidebar.width,
     sidebarActiveTab: () => i.sidebar.activeTab,
     sidebarCollapsed: () => i.sidebar.collapsed,
+    clampSidebarWidth: s,
     // Sidebar actions
     setSidebarWidth: (e) => t(d((r) => {
-      r.sidebar.width = Math.max(a().sidebar.clamp.min, Math.min(a().sidebar.clamp.max, e));
+      r.sidebar.width = s(e);
     })),
-    setSidebarActiveTab: (e, r) => t(d((s) => {
-      s.sidebar.activeTab = e, r?.openSidebar !== !1 && (s.sidebar.collapsed = !1);
+    setSidebarActiveTab: (e, r) => t(d((n) => {
+      n.sidebar.activeTab = e, r?.openSidebar !== !1 && (n.sidebar.collapsed = !1);
     })),
     setSidebarCollapsed: (e) => t(d((r) => {
       r.sidebar.collapsed = e;
@@ -69,7 +70,7 @@ function f() {
   };
 }
 export {
-  T as LayoutProvider,
-  f as createLayoutService,
-  w as useLayout
+  w as LayoutProvider,
+  u as createLayoutService,
+  y as useLayout
 };

package/dist/floe.css

@@ -328,6 +328,18 @@
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
   }
+
+  [data-floe-geometry-surface='floating-window'] {
+    contain: layout paint style;
+  }
+
+  [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='shell-sidebar'],
+  [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='sidebar-pane'],
+  [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='floating-window'],
+  [data-floe-hot-interaction~='drag'] [data-floe-geometry-surface='floating-window'] {
+    animation: none !important;
+    transition: none !important;
+  }
 }
 
 /* Animation utilities */

package/dist/hooks/useDeckDrag.js

@@ -1,27 +1,31 @@
-import { createEffect as q, onCleanup as G } from "solid-js";
-import { useDeck as z } from "../context/DeckContext.js";
-import { applyDragDelta as N } from "../utils/gridLayout.js";
-import { getGridConfigFromElement as O } from "../components/deck/DeckGrid.js";
-import { lockBodyStyle as U } from "../utils/bodyStyleLock.js";
+import { createEffect as G, onCleanup as z } from "solid-js";
+import { useDeck as B } from "../context/DeckContext.js";
+import { applyDragDelta as U } from "../utils/gridLayout.js";
+import { getGridConfigFromElement as N } from "../components/deck/DeckGrid.js";
+import { startHotInteraction as O } from "../utils/hotInteraction.js";
 function Z() {
-  const p = z();
-  let c = null, m = 0, f = 0, L = 0, g = 0, i = 0, P = 0, A = 0, F = 0, a = null, v = null, T = null, y = null, n = null, b = null, k = 0, C = 0, w = null;
-  const M = (t) => {
+  const p = B();
+  let c = null, m = 0, f = 0, L = 0, g = 0, l = 0, P = 0, I = 0, A = 0, a = null, v = null, F = null, w = null, n = null, T = null, H = 0, k = 0, y = null;
+  const C = (t) => {
     if (!t) {
-      y?.(), y = null;
+      w?.(), w = null;
       return;
     }
-    y?.(), y = U({ cursor: "grabbing", "user-select": "none" });
-  }, H = () => {
-    c !== null && (a !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(a), a = null), c = null, v = null, T = null, n = null, b = null, w = null, M(!1), p.endDrag(!0));
+    w?.(), w = O({
+      kind: "drag",
+      cursor: "grabbing",
+      lockUserSelect: !0
+    });
+  }, M = () => {
+    c !== null && (a !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(a), a = null), c = null, v = null, F = null, n = null, T = null, y = null, C(!1), p.endDrag(!0));
   }, Y = () => {
     if (!n) return;
-    const t = b ?? n.getBoundingClientRect(), e = 48, d = 24, s = i - t.top, o = t.bottom - i;
+    const t = T ?? n.getBoundingClientRect(), e = 48, d = 24, s = l - t.top, o = t.bottom - l;
     let r = 0;
     if (s < e ? r = -Math.ceil((e - s) / e * d) : o < e && (r = Math.ceil((e - o) / e * d)), r === 0) return;
-    const l = n.scrollTop, h = Math.max(0, Math.min(l + r, n.scrollHeight - n.clientHeight));
-    h !== l && (n.scrollTop = h);
-  }, B = () => {
+    const i = n.scrollTop, h = Math.max(0, Math.min(i + r, n.scrollHeight - n.clientHeight));
+    h !== i && (n.scrollTop = h);
+  }, R = () => {
     if (a !== null || typeof requestAnimationFrame > "u") return;
     const t = () => {
       if (c === null) {
@@ -38,37 +42,37 @@ function Z() {
     if (!o || t.pointerType === "mouse" && t.button !== 0) return;
     const r = o.dataset.widgetDragHandle;
     if (!r) return;
-    const l = o.closest(".deck-grid");
-    if (!l) return;
-    t.preventDefault(), t.stopPropagation(), c = t.pointerId, m = t.clientX, f = t.clientY, g = m, i = f, P = m, A = f, v = r, T = o, n = l, b = l.getBoundingClientRect(), L = l.scrollTop, F = L, M(!0);
-    const u = p.activeLayout()?.widgets.find((I) => I.id === r);
-    w = u ? { ...u.position } : null;
-    const E = window.getComputedStyle(l);
-    k = parseFloat(E.paddingLeft) || 0, C = parseFloat(E.paddingRight) || 0, p.startDrag(r, m, f), o.setPointerCapture(t.pointerId), B();
+    const i = o.closest(".deck-grid");
+    if (!i) return;
+    t.preventDefault(), t.stopPropagation(), c = t.pointerId, m = t.clientX, f = t.clientY, g = m, l = f, P = m, I = f, v = r, F = o, n = i, T = i.getBoundingClientRect(), L = i.scrollTop, A = L, C(!0);
+    const u = p.activeLayout()?.widgets.find((b) => b.id === r);
+    y = u ? { ...u.position } : null;
+    const E = window.getComputedStyle(i);
+    H = parseFloat(E.paddingLeft) || 0, k = parseFloat(E.paddingRight) || 0, p.startDrag(r, m, f), o.setPointerCapture(t.pointerId), R();
   }, x = (t) => {
-    c !== t.pointerId || !v || (g = t.clientX, i = t.clientY, typeof requestAnimationFrame > "u" && X());
+    c !== t.pointerId || !v || (g = t.clientX, l = t.clientY, typeof requestAnimationFrame > "u" && X());
   }, X = () => {
-    if (!v || !n || !w) return;
+    if (!v || !n || !y) return;
     Y();
     const t = n.scrollTop;
-    if (g === P && i === A && t === F) return;
-    P = g, A = i, F = t;
-    const e = g - m, d = i - f + (t - L), { cols: s, rowHeight: o, gap: r } = O(n), l = n.clientWidth - k - C, h = r * (s - 1), u = (l - h) / s;
+    if (g === P && l === I && t === A) return;
+    P = g, I = l, A = t;
+    const e = g - m, d = l - f + (t - L), { cols: s, rowHeight: o, gap: r } = N(n), i = n.clientWidth - H - k, h = r * (s - 1), u = (i - h) / s;
     if (!Number.isFinite(u) || u <= 0) return;
-    const E = o + r, I = Math.round(e / u), R = Math.round(d / E), W = N(w, I, R, s);
-    p.updateDrag(W, { x: e, y: d });
+    const E = o + r, b = Math.round(e / u), W = Math.round(d / E), q = U(y, b, W, s);
+    p.updateDrag(q, { x: e, y: d });
   }, D = (t) => {
     if (c === t.pointerId) {
       try {
-        T?.releasePointerCapture(t.pointerId);
+        F?.releasePointerCapture(t.pointerId);
       } catch {
       }
-      H();
+      M();
     }
   };
-  q(() => {
-    p.editMode() && (typeof document > "u" || (document.addEventListener("pointerdown", S, !0), document.addEventListener("pointermove", x, !0), document.addEventListener("pointerup", D, !0), document.addEventListener("pointercancel", D, !0), G(() => {
-      H(), document.removeEventListener("pointerdown", S, !0), document.removeEventListener("pointermove", x, !0), document.removeEventListener("pointerup", D, !0), document.removeEventListener("pointercancel", D, !0);
+  G(() => {
+    p.editMode() && (typeof document > "u" || (document.addEventListener("pointerdown", S, !0), document.addEventListener("pointermove", x, !0), document.addEventListener("pointerup", D, !0), document.addEventListener("pointercancel", D, !0), z(() => {
+      M(), document.removeEventListener("pointerdown", S, !0), document.removeEventListener("pointermove", x, !0), document.removeEventListener("pointerup", D, !0), document.removeEventListener("pointercancel", D, !0);
     })));
   });
 }