@floegence/floe-webapp-core 0.36.0 → 0.36.2

package/dist/components/deck/DeckCell.js

@@ -6,9 +6,9 @@ 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: ');
+var _ = /* @__PURE__ */ l("<div data-floe-dialog-surface-host=true>"), 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) => {
+  const i = z(), g = R(), f = () => i.editMode(), o = () => e.widget.type, a = d(() => g.getWidget(o())), m = 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 {};
@@ -66,7 +66,7 @@ function q(e) {
                     return e.widget.config;
                   },
                   get isEditMode() {
-                    return m();
+                    return f();
                   }
                 });
               }
@@ -86,7 +86,7 @@ function q(e) {
         "select-none",
         e.isDragging && "cursor-grabbing"
       ), y = {
-        "grid-area": f(),
+        "grid-area": m(),
         ...v()
       };
       return c !== r.e && W(t, r.e = c), r.t = S(t, y, r.t), r;

package/dist/components/layout/DisplayModePageShell.d.ts

@@ -0,0 +1,8 @@
+import { type Component, type JSX } from 'solid-js';
+export interface DisplayModePageShellProps {
+    logo?: JSX.Element;
+    actions?: JSX.Element;
+    title?: string;
+    children: JSX.Element;
+}
+export declare const DisplayModePageShell: Component<DisplayModePageShellProps>;

package/dist/components/layout/DisplayModePageShell.js

@@ -0,0 +1,22 @@
+import { insert as r, createComponent as a, template as o } from "solid-js/web";
+import "solid-js";
+import { TopBar as i } from "./TopBar.js";
+var n = /* @__PURE__ */ o("<div class=display-mode-page-shell><main class=display-mode-page-shell__body>");
+const p = (e) => (() => {
+  var t = n(), l = t.firstChild;
+  return r(t, a(i, {
+    get logo() {
+      return e.logo;
+    },
+    get title() {
+      return e.title;
+    },
+    get actions() {
+      return e.actions;
+    },
+    ariaLabel: "Display mode top bar"
+  }), l), r(l, () => e.children), t;
+})();
+export {
+  p as DisplayModePageShell
+};

package/dist/components/layout/DisplayModeSwitcher.d.ts

@@ -0,0 +1,7 @@
+export type DisplayMode = 'activity' | 'deck' | 'workbench';
+export declare function sanitizeDisplayMode(value: unknown, fallback?: DisplayMode): DisplayMode;
+export interface DisplayModeSwitcherProps {
+    mode: DisplayMode;
+    onChange: (mode: DisplayMode) => void;
+}
+export declare function DisplayModeSwitcher(props: DisplayModeSwitcherProps): import("solid-js").JSX.Element;

package/dist/components/layout/DisplayModeSwitcher.js

@@ -0,0 +1,52 @@
+import { insert as a, createComponent as m, memo as h, effect as v, setAttribute as y, template as o, delegateEvents as p } from "solid-js/web";
+import { For as _ } from "solid-js";
+import { Bookmark as u, LayoutDashboard as k, Grid3x3 as f } from "../icons/index.js";
+var w = /* @__PURE__ */ o('<div class=display-mode-switcher role=tablist aria-label="Display mode">'), D = /* @__PURE__ */ o("<button type=button class=display-mode-switcher__pill role=tab><span class=display-mode-switcher__label>"), $ = /* @__PURE__ */ o("<span class=display-mode-switcher__pill-bg>");
+const g = /* @__PURE__ */ new Set(["activity", "deck", "workbench"]);
+function E(i, r = "activity") {
+  return typeof i == "string" && g.has(i) ? i : r;
+}
+const A = [{
+  id: "activity",
+  label: "Activity",
+  icon: u
+}, {
+  id: "deck",
+  label: "Deck",
+  icon: k
+}, {
+  id: "workbench",
+  label: "Workbench",
+  icon: f
+}];
+function L(i) {
+  return (() => {
+    var r = w();
+    return a(r, m(_, {
+      each: A,
+      children: (l) => {
+        const b = l.icon, c = () => i.mode === l.id;
+        return (() => {
+          var e = D(), s = e.firstChild;
+          return e.$$click = () => i.onChange(l.id), a(e, (() => {
+            var t = h(() => !!c());
+            return () => t() ? $() : null;
+          })(), s), a(e, m(b, {
+            class: "display-mode-switcher__icon"
+          }), s), a(s, () => l.label), v((t) => {
+            var n = !!c(), d = c();
+            return n !== t.e && e.classList.toggle("is-active", t.e = n), d !== t.t && y(e, "aria-selected", t.t = d), t;
+          }, {
+            e: void 0,
+            t: void 0
+          }), e;
+        })();
+      }
+    })), r;
+  })();
+}
+p(["click"]);
+export {
+  L as DisplayModeSwitcher,
+  E as sanitizeDisplayMode
+};

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

@@ -9,3 +9,5 @@ export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';
 export { SidebarPane, type SidebarPaneProps } from './SidebarPane';
 export { Panel, PanelHeader, PanelContent, type PanelProps, type PanelHeaderProps, type PanelContentProps } from './Panel';
 export { KeepAliveStack, type KeepAliveStackProps, type KeepAliveView } from './KeepAliveStack';
+export { DisplayModeSwitcher, sanitizeDisplayMode, type DisplayMode, type DisplayModeSwitcherProps, } from './DisplayModeSwitcher';
+export { DisplayModePageShell, type DisplayModePageShellProps } from './DisplayModePageShell';

package/dist/components/ui/Dialog.js

@@ -1,98 +1,127 @@
-import { createComponent as n, Portal as C, insert as l, effect as g, setAttribute as u, className as $, template as o, use as k, delegateEvents as w } from "solid-js/web";
-import { createUniqueId as _, Show as c } from "solid-js";
-import { cn as y } from "../../utils/cn.js";
-import { Button as f } from "./Button.js";
-import { X as O } from "../icons/index.js";
-import { useResolvedFloeConfig as z } from "../../context/FloeConfigContext.js";
-import { useOverlayMask as D } from "../../hooks/useOverlayMask.js";
-var I = /* @__PURE__ */ o('<div class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm animate-in fade-in cursor-pointer">'), F = /* @__PURE__ */ o('<h2 class="text-sm font-semibold">'), T = /* @__PURE__ */ o('<p class="mt-0.5 text-xs text-muted-foreground">'), j = /* @__PURE__ */ o('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), B = /* @__PURE__ */ o('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), E = /* @__PURE__ */ o('<div role=dialog aria-modal=true tabindex=-1><div class="flex-1 overflow-auto overscroll-contain p-3">'), M = /* @__PURE__ */ o("<div>");
-function R(e) {
-  const a = _(), m = () => `dialog-${a}-title`, v = () => `dialog-${a}-description`;
-  let s;
-  return D({
+import { createComponent as n, Portal as z, setAttribute as c, spread as O, mergeProps as B, memo as D, insert as a, effect as x, className as A, template as s, use as E } from "solid-js/web";
+import { createUniqueId as M, createMemo as R, Show as f } from "solid-js";
+import { cn as C } from "../../utils/cn.js";
+import { Button as $ } from "./Button.js";
+import { X as F } from "../icons/index.js";
+import { useResolvedFloeConfig as N } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as j } from "../../hooks/useOverlayMask.js";
+import { resolveDialogSurfaceHost as H, DIALOG_SURFACE_BOUNDARY_ATTR as m } from "./dialogSurfaceScope.js";
+var U = /* @__PURE__ */ s('<h2 class="text-sm font-semibold">'), P = /* @__PURE__ */ s('<p class="mt-0.5 text-xs text-muted-foreground">'), W = /* @__PURE__ */ s('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), q = /* @__PURE__ */ s('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), G = /* @__PURE__ */ s('<div><div></div><div class="relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), L = /* @__PURE__ */ s("<div>");
+function X(e) {
+  const i = M(), _ = () => `dialog-${i}-title`, w = () => `dialog-${i}-description`;
+  let h;
+  const v = R(() => e.open ? H() : {
+    host: null,
+    mode: "global"
+  }), g = () => `dialog-boundary-${i}`, o = () => v().mode === "surface" && !!v().host?.isConnected, I = () => v().host ?? void 0, S = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${m}="${g()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${m}="${g()}"]`) : !1;
+  return j({
     open: () => e.open,
-    root: () => s,
+    root: () => h,
+    containsTarget: (t) => o() && S(t),
     onClose: () => e.onOpenChange(!1),
-    lockBodyScroll: !0,
+    lockBodyScroll: () => !o(),
     trapFocus: !0,
-    closeOnEscape: !0,
+    closeOnEscape: () => o() ? "inside" : !0,
     blockHotkeys: !0,
     // Block scroll bleed outside the dialog while keeping the dialog content scrollable.
-    blockWheel: "outside",
-    blockTouchMove: "outside",
+    blockWheel: () => o() ? "none" : "outside",
+    blockTouchMove: () => o() ? "none" : "outside",
     restoreFocus: !0
-  }), n(c, {
+  }), n(f, {
     get when() {
       return e.open;
     },
     get children() {
-      return n(C, {
+      return n(z, {
+        get mount() {
+          return I();
+        },
         get children() {
-          return [(() => {
-            var r = I();
-            return r.$$click = () => e.onOpenChange(!1), r;
-          })(), (() => {
-            var r = E(), h = r.firstChild, b = s;
-            return typeof b == "function" ? k(b, r) : s = r, l(r, n(c, {
-              get when() {
-                return e.title || e.description;
-              },
-              get children() {
-                var t = j(), d = t.firstChild;
-                return l(d, n(c, {
-                  get when() {
-                    return e.title;
-                  },
-                  get children() {
-                    var i = F();
-                    return l(i, () => e.title), g(() => u(i, "id", m())), i;
-                  }
-                }), null), l(d, n(c, {
-                  get when() {
-                    return e.description;
-                  },
-                  get children() {
-                    var i = T();
-                    return l(i, () => e.description), g(() => u(i, "id", v())), i;
-                  }
-                }), null), l(t, n(f, {
-                  variant: "ghost-destructive",
-                  size: "icon",
-                  class: "h-6 w-6 -mr-1",
-                  onClick: () => e.onOpenChange(!1),
-                  "aria-label": "Close",
-                  get children() {
-                    return n(O, {
-                      class: "w-3.5 h-3.5"
-                    });
-                  }
-                }), null), t;
-              }
-            }), h), l(h, () => e.children), l(r, n(c, {
-              get when() {
-                return e.footer;
-              },
-              get children() {
-                var t = B();
-                return l(t, () => e.footer), t;
-              }
-            }), null), g((t) => {
-              var d = y("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "animate-in fade-in zoom-in-95", "flex flex-col", e.class), i = e.title ? m() : void 0, x = e.description ? v() : void 0;
-              return d !== t.e && $(r, t.e = d), i !== t.t && u(r, "aria-labelledby", t.t = i), x !== t.a && u(r, "aria-describedby", t.a = x), t;
-            }, {
-              e: void 0,
-              t: void 0,
-              a: void 0
-            }), r;
-          })()];
+          var t = G(), b = t.firstChild, T = b.nextSibling, d = T.firstChild, y = d.firstChild;
+          c(t, "data-floe-dialog-overlay-root", i), c(b, "data-floe-dialog-backdrop", i), O(b, B(() => ({
+            [m]: g()
+          }), {
+            get class() {
+              return C("absolute inset-0 cursor-pointer animate-in fade-in", o() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+            },
+            onClick: () => e.onOpenChange(!1)
+          }), !1, !1);
+          var k = h;
+          return typeof k == "function" ? E(k, d) : h = d, c(d, "data-floe-dialog-panel", i), O(d, B(() => ({
+            [m]: g()
+          }), {
+            get class() {
+              return C(o() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "animate-in fade-in zoom-in-95", "flex flex-col", e.class);
+            },
+            role: "dialog",
+            get "aria-modal"() {
+              return o() ? void 0 : "true";
+            },
+            get "aria-labelledby"() {
+              return D(() => !!e.title)() ? _() : void 0;
+            },
+            get "aria-describedby"() {
+              return D(() => !!e.description)() ? w() : void 0;
+            },
+            tabIndex: -1
+          }), !1, !0), a(d, n(f, {
+            get when() {
+              return e.title || e.description;
+            },
+            get children() {
+              var r = W(), u = r.firstChild;
+              return a(u, n(f, {
+                get when() {
+                  return e.title;
+                },
+                get children() {
+                  var l = U();
+                  return a(l, () => e.title), x(() => c(l, "id", _())), l;
+                }
+              }), null), a(u, n(f, {
+                get when() {
+                  return e.description;
+                },
+                get children() {
+                  var l = P();
+                  return a(l, () => e.description), x(() => c(l, "id", w())), l;
+                }
+              }), null), a(r, n($, {
+                variant: "ghost-destructive",
+                size: "icon",
+                class: "h-6 w-6 -mr-1",
+                onClick: () => e.onOpenChange(!1),
+                "aria-label": "Close",
+                get children() {
+                  return n(F, {
+                    class: "w-3.5 h-3.5"
+                  });
+                }
+              }), null), r;
+            }
+          }), y), a(y, () => e.children), a(d, n(f, {
+            get when() {
+              return e.footer;
+            },
+            get children() {
+              var r = q();
+              return a(r, () => e.footer), r;
+            }
+          }), null), x((r) => {
+            var u = o() ? "surface" : "global", l = C(o() ? "absolute inset-0 z-20 p-3" : "fixed inset-0 z-50 p-4");
+            return u !== r.e && c(t, "data-floe-dialog-mode", r.e = u), l !== r.t && A(t, r.t = l), r;
+          }, {
+            e: void 0,
+            t: void 0
+          }), t;
         }
       });
     }
   });
 }
-function W(e) {
-  const a = z();
-  return n(R, {
+function te(e) {
+  const i = N();
+  return n(X, {
     get open() {
       return e.open;
     },
@@ -106,16 +135,16 @@ function W(e) {
       return e.description;
     },
     get footer() {
-      return [n(f, {
+      return [n($, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
           return e.loading;
         },
         get children() {
-          return e.cancelText ?? a.config.strings.confirmDialog.cancel;
+          return e.cancelText ?? i.config.strings.confirmDialog.cancel;
         }
-      }), n(f, {
+      }), n($, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -126,17 +155,16 @@ function W(e) {
           return e.loading;
         },
         get children() {
-          return e.confirmText ?? a.config.strings.confirmDialog.confirm;
+          return e.confirmText ?? i.config.strings.confirmDialog.confirm;
         }
       })];
     },
     get children() {
-      return e.children ?? M();
+      return e.children ?? L();
     }
   });
 }
-w(["click"]);
 export {
-  W as ConfirmDialog,
-  R as Dialog
+  te as ConfirmDialog,
+  X as Dialog
 };