@floegence/floe-webapp-core 0.35.58 → 0.36.0

package/dist/components/deck/DeckCell.js

@@ -1,33 +1,33 @@
-import { insert as o, createComponent as g, Dynamic as C, effect as m, className as w, style as z, setAttribute as R, template as y } from "solid-js/web";
-import { createMemo as a, Show as k } from "solid-js";
-import { cn as v } from "../../utils/cn.js";
-import { useDeck as $ } from "../../context/DeckContext.js";
-import { useWidgetRegistry as M } from "../../context/WidgetRegistry.js";
-import { WidgetStateProvider as A } from "../../context/WidgetStateContext.js";
-import { positionToGridArea as _ } from "../../utils/gridLayout.js";
-import { WidgetFrame as I } from "./WidgetFrame.js";
-var h = /* @__PURE__ */ y("<div>"), O = /* @__PURE__ */ y('<div class="h-full flex items-center justify-center text-muted-foreground text-xs"><span>Widget: ');
-function H(e) {
-  const i = $(), d = M(), n = () => i.editMode(), s = () => e.widget.type, c = a(() => d.getWidget(s())), D = a(() => _(e.position)), x = () => i.getWidgetState(e.widget.id), b = (r, t) => {
-    i.updateWidgetState(e.widget.id, r, t);
-  }, l = () => c()?.component, W = a(() => {
+import { insert as u, createComponent as n, Dynamic as D, effect as x, className as W, style as S, template as l } from "solid-js/web";
+import { createMemo as d, Show as b } from "solid-js";
+import { cn as C } from "../../utils/cn.js";
+import { useDeck as z } from "../../context/DeckContext.js";
+import { useWidgetRegistry as R } from "../../context/WidgetRegistry.js";
+import { WidgetStateProvider as k } from "../../context/WidgetStateContext.js";
+import { positionToGridArea as $ } from "../../utils/gridLayout.js";
+import { WidgetFrame as M } from "./WidgetFrame.js";
+var _ = /* @__PURE__ */ l("<div>"), A = /* @__PURE__ */ l('<div class="h-full flex items-center justify-center text-muted-foreground text-xs"><span>Widget: ');
+function q(e) {
+  const i = z(), g = R(), m = () => i.editMode(), o = () => e.widget.type, a = d(() => g.getWidget(o())), f = d(() => $(e.position)), w = () => i.getWidgetState(e.widget.id), h = (t, r) => {
+    i.updateWidgetState(e.widget.id, t, r);
+  }, s = () => a()?.component, v = d(() => {
     if (!e.isDragging || !e.pixelOffset) return {};
     const {
-      x: r,
-      y: t
+      x: t,
+      y: r
     } = e.pixelOffset;
-    return r === 0 && t === 0 ? {} : {
-      transform: `translate(${r}px, ${t}px)`
+    return t === 0 && r === 0 ? {} : {
+      transform: `translate(${t}px, ${r}px)`
     };
   });
   return (() => {
-    var r = h();
-    return o(r, g(I, {
+    var t = _();
+    return u(t, n(M, {
       get widget() {
         return e.widget;
       },
       get widgetDef() {
-        return c();
+        return a();
       },
       get isDragging() {
         return e.isDragging;
@@ -36,29 +36,28 @@ function H(e) {
         return e.isResizing;
       },
       get children() {
-        var t = h();
-        return o(t, g(k, {
+        return n(b, {
           get when() {
-            return l();
+            return s();
           },
           get fallback() {
-            return g(P, {
+            return n(I, {
               get type() {
-                return s();
+                return o();
               }
             });
           },
           get children() {
-            return g(A, {
+            return n(k, {
               get widgetId() {
                 return e.widget.id;
               },
-              state: x,
-              onStateChange: b,
+              state: w,
+              onStateChange: h,
               get children() {
-                return g(C, {
+                return n(D, {
                   get component() {
-                    return l();
+                    return s();
                   },
                   get widgetId() {
                     return e.widget.id;
@@ -67,44 +66,42 @@ function H(e) {
                     return e.widget.config;
                   },
                   get isEditMode() {
-                    return n();
+                    return m();
                   }
                 });
               }
             });
           }
-        })), m(() => w(t, v("h-full", n() && "pointer-events-none"))), t;
+        });
       }
-    })), m((t) => {
-      var u = v(
-        "deck-cell relative rounded-md overflow-hidden",
+    })), x((r) => {
+      var c = C(
+        "deck-cell relative rounded-md overflow-hidden group",
         "bg-card border border-border",
         // Smooth transition when not dragging (for snap-back animation)
         !e.isDragging && "transition-transform duration-200 ease-out",
         e.isDragging && "shadow-xl z-50 ring-2 ring-primary scale-[1.02]",
         e.isResizing && "shadow-lg z-50 ring-2 ring-primary",
-        n() && !e.isDragging && !e.isResizing && "hover:ring-1 hover:ring-primary/50",
-        // Edit mode: disable selection and show grab cursor
-        n() && "select-none cursor-grab",
+        !e.isDragging && !e.isResizing && "hover:ring-1 hover:ring-primary/50",
+        "select-none",
         e.isDragging && "cursor-grabbing"
-      ), S = {
-        "grid-area": D(),
-        ...W()
-      }, f = n() ? e.widget.id : void 0;
-      return u !== t.e && w(r, t.e = u), t.t = z(r, S, t.t), f !== t.a && R(r, "data-widget-drag-handle", t.a = f), t;
+      ), y = {
+        "grid-area": f(),
+        ...v()
+      };
+      return c !== r.e && W(t, r.e = c), r.t = S(t, y, r.t), r;
     }, {
       e: void 0,
-      t: void 0,
-      a: void 0
-    }), r;
+      t: void 0
+    }), t;
   })();
 }
-function P(e) {
+function I(e) {
   return (() => {
-    var i = O(), d = i.firstChild;
-    return d.firstChild, o(d, () => e.type, null), i;
+    var i = A(), g = i.firstChild;
+    return g.firstChild, u(g, () => e.type, null), i;
   })();
 }
 export {
-  H as DeckCell
+  q as DeckCell
 };

package/dist/components/deck/DeckContextMenu.d.ts

@@ -0,0 +1,22 @@
+import { type Component } from 'solid-js';
+export interface DeckContextMenuItem {
+    type: string;
+    name: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+}
+export interface DeckContextMenuProps {
+    open: boolean;
+    x: number;
+    y: number;
+    items: readonly DeckContextMenuItem[];
+    onSelect: (type: string) => void;
+    onDismiss: () => void;
+}
+/**
+ * Right-click context menu for the Deck grid.
+ * Shows when the user right-clicks empty grid space, offering to create
+ * a widget of any registered type at the clicked cell.
+ */
+export declare function DeckContextMenu(props: DeckContextMenuProps): import("solid-js").JSX.Element;

package/dist/components/deck/DeckContextMenu.js

@@ -0,0 +1,73 @@
+import { createComponent as l, Portal as f, insert as a, effect as g, className as h, setStyleProperty as u, template as i, delegateEvents as v } from "solid-js/web";
+import { Show as c, For as p } from "solid-js";
+import { cn as $ } from "../../utils/cn.js";
+import { Plus as w } from "../icons/index.js";
+var b = /* @__PURE__ */ i('<div class="fixed inset-0 z-[9998]">'), k = /* @__PURE__ */ i('<div role=menu><div class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/80 flex items-center gap-1.5">Add widget here'), y = /* @__PURE__ */ i('<div class="px-3 py-3 text-xs text-muted-foreground text-center">No widgets registered'), _ = /* @__PURE__ */ i('<button type=button role=menuitem class="w-full flex items-center gap-2 px-2.5 py-1.5 rounded hover:bg-muted transition-colors text-left cursor-pointer"><span class="text-xs text-foreground">'), C = /* @__PURE__ */ i('<div class="w-4 h-4 flex-shrink-0">');
+function N(r) {
+  return l(c, {
+    get when() {
+      return r.open;
+    },
+    get children() {
+      return l(f, {
+        get children() {
+          return [(() => {
+            var t = b();
+            return t.$$contextmenu = (d) => {
+              d.preventDefault(), r.onDismiss();
+            }, t.$$click = () => r.onDismiss(), t;
+          })(), (() => {
+            var t = k(), d = t.firstChild, m = d.firstChild;
+            return a(d, l(w, {
+              class: "w-2.5 h-2.5"
+            }), m), a(t, l(c, {
+              get when() {
+                return r.items.length > 0;
+              },
+              get fallback() {
+                return y();
+              },
+              get children() {
+                return l(p, {
+                  get each() {
+                    return r.items;
+                  },
+                  children: (e) => (() => {
+                    var n = _(), o = n.firstChild;
+                    return n.$$click = () => {
+                      r.onSelect(e.type);
+                    }, a(n, l(c, {
+                      get when() {
+                        return e.icon;
+                      },
+                      get fallback() {
+                        return C();
+                      },
+                      children: (s) => {
+                        const x = s();
+                        return l(x, {
+                          class: "w-4 h-4 text-muted-foreground flex-shrink-0"
+                        });
+                      }
+                    }), o), a(o, () => e.name), n;
+                  })()
+                });
+              }
+            }), null), g((e) => {
+              var n = $("fixed z-[9999] min-w-[180px] max-h-[320px] overflow-y-auto", "bg-popover border border-border rounded-md shadow-xl", "animate-in fade-in slide-in-from-top-1 duration-150", "p-1"), o = `${r.y}px`, s = `${r.x}px`;
+              return n !== e.e && h(t, e.e = n), o !== e.t && u(t, "top", e.t = o), s !== e.a && u(t, "left", e.a = s), e;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0
+            }), t;
+          })()];
+        }
+      });
+    }
+  });
+}
+v(["click", "contextmenu"]);
+export {
+  N as DeckContextMenu
+};

package/dist/components/deck/DeckGrid.js

@@ -1,75 +1,102 @@
-import { insert as w, createComponent as m, effect as z, setStyleProperty as v, className as L, setAttribute as _, template as C, use as A } from "solid-js/web";
-import { createSignal as N, createEffect as T, createMemo as s, onMount as j, Show as D, For as V, onCleanup as W } from "solid-js";
-import { cn as Z } from "../../utils/cn.js";
-import { useDeck as $ } from "../../context/DeckContext.js";
-import { useLayout as K } from "../../context/LayoutContext.js";
-import { hasCollision as U } from "../../utils/gridCollision.js";
-import { DeckCell as q } from "./DeckCell.js";
-import { DropZonePreview as B } from "./DropZonePreview.js";
-var J = /* @__PURE__ */ C('<div class="pointer-events-none z-0"style="grid-column:1 / -1;--deck-grid-unit-x:calc((100% - 92px) / 24 + 4px);background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0">'), Q = /* @__PURE__ */ C('<div data-grid-cols=24 data-gap=4 data-default-rows=24 style="scrollbar-gutter:stable;grid-template-columns:repeat(24, 1fr);gap:4px"><div class=pointer-events-none aria-hidden=true style="grid-column:1 / -1">');
-const O = 24, a = 24, x = 4, b = 20, P = 4, X = {
+import { insert as h, createComponent as m, effect as F, setStyleProperty as v, className as J, setAttribute as Q, template as W, use as tt, delegateEvents as et } from "solid-js/web";
+import { createSignal as O, createMemo as d, onMount as rt, Show as G, For as nt, onCleanup as ot } from "solid-js";
+import { cn as it } from "../../utils/cn.js";
+import { useDeck as at } from "../../context/DeckContext.js";
+import { useLayout as st } from "../../context/LayoutContext.js";
+import { useResolvedFloeConfig as ct } from "../../context/FloeConfigContext.js";
+import { useWidgetRegistry as lt } from "../../context/WidgetRegistry.js";
+import { hasCollision as dt } from "../../utils/gridCollision.js";
+import { DeckCell as ut } from "./DeckCell.js";
+import { DeckContextMenu as gt } from "./DeckContextMenu.js";
+import { DropZonePreview as pt } from "./DropZonePreview.js";
+var ft = /* @__PURE__ */ W('<div class="pointer-events-none z-0"style="grid-column:1 / -1;--deck-grid-unit-x:calc((100% - 92px) / 24 + 4px);background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0">'), mt = /* @__PURE__ */ W('<div data-grid-cols=24 data-gap=4 data-default-rows=24 style="scrollbar-gutter:stable;grid-template-columns:repeat(24, 1fr);gap:4px"><div class=pointer-events-none aria-hidden=true style="grid-column:1 / -1">');
+const T = 24, u = 24, x = 4, k = 20, L = 4, vt = {
   x: 0,
   y: 0
 };
-function st(d) {
-  const c = $(), M = K();
-  let p;
-  const [y, I] = N(0), H = () => c.activeLayout()?.widgets ?? [], f = () => c.dragState(), k = () => c.resizeState();
-  T(() => {
-    M.isMobile() && c.editMode() && c.setEditMode(!1);
-  });
-  const G = s(() => {
-    const r = f();
-    if (!r) return !0;
-    const e = c.activeLayout();
-    return e ? !U(r.currentPosition, e.widgets, r.widgetId) : !0;
-  }), F = s(() => {
-    const r = H();
-    if (r.length === 0) return a;
-    let e = a;
-    for (const i of r) {
-      const t = i.position.row + i.position.rowSpan;
-      t > e && (e = t);
+function Dt(g) {
+  const p = at(), I = st(), A = lt(), N = ct();
+  let a;
+  const [S, D] = O(0), [w, R] = O(null), P = () => p.activeLayout()?.widgets ?? [], f = () => p.dragState(), M = () => p.resizeState(), z = () => !I.isMobile(), _ = () => (N.config.deck.presetsMode ?? "mutable") === "immutable" && !!p.activeLayout()?.isPreset, E = d(() => Array.from(A.widgets().values()).map((t) => ({
+    type: t.type,
+    name: t.name,
+    icon: t.icon
+  }))), $ = (t) => {
+    if (I.isMobile() || _() || t.target?.closest(".deck-cell") || !a) return;
+    t.preventDefault();
+    const n = a.getBoundingClientRect(), {
+      cols: e,
+      rowHeight: o,
+      gap: s
+    } = ht(a), c = window.getComputedStyle(a), l = parseFloat(c.paddingLeft) || 0, i = parseFloat(c.paddingTop) || 0, H = (a.clientWidth - l - (parseFloat(c.paddingRight) || 0) - s * (e - 1)) / e, V = o + s;
+    if (!Number.isFinite(H) || H <= 0) return;
+    const Z = t.clientX - n.left + a.scrollLeft - l, K = t.clientY - n.top + a.scrollTop - i, U = Math.max(0, Math.min(e - 1, Math.floor(Z / (H + s)))), q = Math.max(0, Math.floor(K / V));
+    R({
+      x: t.clientX,
+      y: t.clientY,
+      col: U,
+      row: q
+    });
+  }, B = (t) => {
+    const r = w();
+    R(null), r && p.addWidget(t, {
+      col: r.col,
+      row: r.row
+    });
+  }, X = d(() => {
+    const t = f();
+    if (!t) return !0;
+    const r = p.activeLayout();
+    return r ? !dt(t.currentPosition, r.widgets, t.widgetId) : !0;
+  }), Y = d(() => {
+    const t = P();
+    if (t.length === 0) return u;
+    let r = u;
+    for (const n of t) {
+      const e = n.position.row + n.position.rowSpan;
+      e > r && (r = e);
     }
-    return e;
-  }), S = s(() => {
-    let r = F();
-    const e = f();
-    if (e) {
-      const t = e.currentPosition.row + e.currentPosition.rowSpan;
-      t > r && (r = t);
+    return r;
+  }), C = d(() => {
+    let t = Y();
+    const r = f();
+    if (r) {
+      const e = r.currentPosition.row + r.currentPosition.rowSpan;
+      e > t && (t = e);
     }
-    const i = k();
-    if (i) {
-      const t = i.currentPosition.row + i.currentPosition.rowSpan;
-      t > r && (r = t);
+    const n = M();
+    if (n) {
+      const e = n.currentPosition.row + n.currentPosition.rowSpan;
+      e > t && (t = e);
     }
-    return Math.max(a, r);
-  }), h = s(() => {
-    const r = y();
-    if (r <= 0) return b;
-    const i = (r - P * 2 - (a - 1) * x) / a;
-    return Math.max(b, i);
+    return Math.max(u, t);
+  }), b = d(() => {
+    const t = S();
+    if (t <= 0) return k;
+    const n = (t - L * 2 - (u - 1) * x) / u;
+    return Math.max(k, n);
   });
-  j(() => {
-    if (!p || typeof ResizeObserver > "u") return;
-    const r = new ResizeObserver((e) => {
-      for (const i of e)
-        I(i.contentRect.height);
+  rt(() => {
+    if (!a || typeof ResizeObserver > "u") return;
+    const t = new ResizeObserver((r) => {
+      for (const n of r)
+        D(n.contentRect.height);
     });
-    r.observe(p), I(p.clientHeight), W(() => r.disconnect());
+    t.observe(a), D(a.clientHeight), ot(() => t.disconnect());
   });
-  const E = s(() => S() > a ? !0 : y() <= 0 ? !1 : a * h() + (a - 1) * x + P * 2 > y() + 1);
+  const j = d(() => C() > u ? !0 : S() <= 0 ? !1 : u * b() + (u - 1) * x + L * 2 > S() + 1);
   return (() => {
-    var r = Q(), e = r.firstChild, i = p;
-    return typeof i == "function" ? A(i, r) : p = r, w(r, m(D, {
+    var t = mt(), r = t.firstChild;
+    t.$$contextmenu = $;
+    var n = a;
+    return typeof n == "function" ? tt(n, t) : a = t, h(t, m(G, {
       get when() {
-        return c.editMode();
+        return z();
       },
       get children() {
-        var t = J();
-        return z((n) => {
-          var l = `1 / ${S() + 1}`, g = `${h() + x}px`, u = [
+        var e = ft();
+        return F((o) => {
+          var s = `1 / ${C() + 1}`, c = `${b() + x}px`, l = [
             // Fine
             "linear-gradient(to right, color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px)",
             "linear-gradient(to bottom, color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px)",
@@ -79,7 +106,7 @@ function st(d) {
             // Major (12)
             "linear-gradient(to right, color-mix(in srgb, var(--border) 75%, transparent) 2px, transparent 2px)",
             "linear-gradient(to bottom, color-mix(in srgb, var(--border) 75%, transparent) 2px, transparent 2px)"
-          ].join(", "), o = [
+          ].join(", "), i = [
             // Fine
             "var(--deck-grid-unit-x) var(--deck-grid-unit-y)",
             "var(--deck-grid-unit-x) var(--deck-grid-unit-y)",
@@ -90,92 +117,108 @@ function st(d) {
             "calc(var(--deck-grid-unit-x) * 12) calc(var(--deck-grid-unit-y) * 12)",
             "calc(var(--deck-grid-unit-x) * 12) calc(var(--deck-grid-unit-y) * 12)"
           ].join(", ");
-          return l !== n.e && v(t, "grid-row", n.e = l), g !== n.t && v(t, "--deck-grid-unit-y", n.t = g), u !== n.a && v(t, "background-image", n.a = u), o !== n.o && v(t, "background-size", n.o = o), n;
+          return s !== o.e && v(e, "grid-row", o.e = s), c !== o.t && v(e, "--deck-grid-unit-y", o.t = c), l !== o.a && v(e, "background-image", o.a = l), i !== o.o && v(e, "background-size", o.o = i), o;
         }, {
           e: void 0,
           t: void 0,
           a: void 0,
           o: void 0
-        }), t;
+        }), e;
       }
-    }), null), w(r, m(D, {
+    }), null), h(t, m(G, {
       get when() {
         return f();
       },
-      children: (t) => m(B, {
+      children: (e) => m(pt, {
         get position() {
-          return t().currentPosition;
+          return e().currentPosition;
         },
         get isValid() {
-          return G();
+          return X();
         }
       })
-    }), null), w(r, m(V, {
+    }), null), h(t, m(nt, {
       get each() {
-        return H();
+        return P();
       },
-      children: (t) => {
-        const n = s(() => {
-          const o = f();
-          if (o && o.widgetId === t.id)
-            return t.position;
-          const R = k();
-          return R && R.widgetId === t.id ? R.currentPosition : t.position;
-        }), l = s(() => f()?.widgetId === t.id), g = s(() => k()?.widgetId === t.id), u = s(() => {
-          const o = f();
-          return o && o.widgetId === t.id ? o.pixelOffset : X;
+      children: (e) => {
+        const o = d(() => {
+          const i = f();
+          if (i && i.widgetId === e.id)
+            return e.position;
+          const y = M();
+          return y && y.widgetId === e.id ? y.currentPosition : e.position;
+        }), s = d(() => f()?.widgetId === e.id), c = d(() => M()?.widgetId === e.id), l = d(() => {
+          const i = f();
+          return i && i.widgetId === e.id ? i.pixelOffset : vt;
         });
-        return m(q, {
-          widget: t,
+        return m(ut, {
+          widget: e,
           get position() {
-            return n();
+            return o();
           },
           get isDragging() {
-            return l();
+            return s();
           },
           get isResizing() {
-            return g();
+            return c();
           },
           get pixelOffset() {
-            return u();
+            return l();
           }
         });
       }
-    }), null), w(r, () => d.children, null), z((t) => {
-      var n = Z(
+    }), null), h(t, () => g.children, null), h(t, m(gt, {
+      get open() {
+        return w() !== null;
+      },
+      get x() {
+        return w()?.x ?? 0;
+      },
+      get y() {
+        return w()?.y ?? 0;
+      },
+      get items() {
+        return E();
+      },
+      onSelect: B,
+      onDismiss: () => R(null)
+    }), null), F((e) => {
+      var o = it(
         "deck-grid relative w-full h-full overflow-x-hidden",
         // Only enable vertical scroll when content exceeds 24 rows
-        E() ? "overflow-y-scroll" : "overflow-y-hidden",
+        j() ? "overflow-y-scroll" : "overflow-y-hidden",
         "grid p-1",
-        c.editMode() && "bg-muted/20",
-        d.class
-      ), l = `${h()}px`, g = h(), u = `1 / ${S() + 1}`;
-      return n !== t.e && L(r, t.e = n), l !== t.t && v(r, "grid-auto-rows", t.t = l), g !== t.a && _(r, "data-row-height", t.a = g), u !== t.o && v(e, "grid-row", t.o = u), t;
+        z() && "bg-muted/20",
+        g.class
+      ), s = `${b()}px`, c = b(), l = `1 / ${C() + 1}`;
+      return o !== e.e && J(t, e.e = o), s !== e.t && v(t, "grid-auto-rows", e.t = s), c !== e.a && Q(t, "data-row-height", e.a = c), l !== e.o && v(r, "grid-row", e.o = l), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), r;
+    }), t;
   })();
 }
-const ct = {
-  cols: O,
-  defaultRows: a,
+const Pt = {
+  cols: T,
+  defaultRows: u,
   gap: x,
   // Deprecated: use getGridConfig() or read from data-row-height attribute instead
-  rowHeight: b
+  rowHeight: k
 };
-function dt(d) {
+function ht(g) {
   return {
-    cols: parseInt(d.dataset.gridCols || String(O), 10),
-    rowHeight: parseFloat(d.dataset.rowHeight || String(b)),
-    gap: parseInt(d.dataset.gap || String(x), 10),
-    defaultRows: parseInt(d.dataset.defaultRows || String(a), 10)
+    cols: parseInt(g.dataset.gridCols || String(T), 10),
+    rowHeight: parseFloat(g.dataset.rowHeight || String(k)),
+    gap: parseInt(g.dataset.gap || String(x), 10),
+    defaultRows: parseInt(g.dataset.defaultRows || String(u), 10)
   };
 }
+et(["contextmenu"]);
 export {
-  ct as DECK_GRID_CONFIG,
-  st as DeckGrid,
-  dt as getGridConfigFromElement
+  Pt as DECK_GRID_CONFIG,
+  Dt as DeckGrid,
+  ht as getGridConfigFromElement
 };