@floegence/floe-webapp-core 0.81.0 → 0.81.1

package/dist/components/ui/FeedbackIndicator.js

@@ -1,190 +1,198 @@
-import { insert as a, createComponent as c, effect as z, setAttribute as g, spread as X, mergeProps as D, memo as G, className as J, setStyleProperty as _, template as w, use as Q, delegateEvents as Y } from "solid-js/web";
-import { createUniqueId as Z, createSignal as E, createMemo as ee, createEffect as I, untrack as te, Show as k, For as re, onCleanup as ne } from "solid-js";
-import { AlertTriangle as oe, Info as ie, X as se } from "../icons/index.js";
-import { useOverlayMask as ae } from "../../hooks/useOverlayMask.js";
-import { cn as le } from "../../utils/cn.js";
-import { SurfaceFloatingLayer as ce } from "./SurfaceFloatingLayer.js";
-import { calculateMenuPosition as de } from "./menuUtils.js";
-import { WORKBENCH_TEXT_SELECTION_SURFACE_ATTR as ue, CANVAS_WHEEL_INTERACTIVE_ATTR as fe } from "./localInteractionSurface.js";
-import { resolveSurfacePortalHost as me, resolveSurfacePortalBoundaryRect as ve, resolveSurfacePortalScale as be } from "./dialogSurfaceScope.js";
-var he = /* @__PURE__ */ w('<div class="flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-2"><span class="min-w-0 truncate text-xs font-medium"></span><button type=button class="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md hover:bg-accent">'), ge = /* @__PURE__ */ w("<div data-floe-status-details>"), we = /* @__PURE__ */ w('<span data-floe-status-indicator><button type=button class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-md hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"aria-haspopup=dialog></button><span class=sr-only role=alert aria-atomic=true></span><span class=sr-only role=status aria-atomic=true>'), ye = /* @__PURE__ */ w("<div>"), xe = /* @__PURE__ */ w('<div class="flex flex-wrap items-center gap-2">'), Ee = /* @__PURE__ */ w('<section class="space-y-2 border-b border-border pb-3 mb-3 last:border-0 last:pb-0 last:mb-0"><p class=font-medium>');
-function Ae(n) {
-  const T = Z(), [f, F] = E(!1), [p, N] = E(), [H, q] = E({
+import { insert as c, createComponent as u, effect as I, setAttribute as g, setStyleProperty as w, spread as D, mergeProps as G, memo as J, className as Y, template as y, use as Z, delegateEvents as ee } from "solid-js/web";
+import { createUniqueId as te, createSignal as p, createMemo as re, createEffect as N, untrack as ne, Show as $, For as oe, onCleanup as ie } from "solid-js";
+import { AlertTriangle as se, Info as ae, X as le } from "../icons/index.js";
+import { useOverlayMask as ce } from "../../hooks/useOverlayMask.js";
+import { useMediaQuery as de } from "../../hooks/useMediaQuery.js";
+import { cn as ue } from "../../utils/cn.js";
+import { SurfaceFloatingLayer as fe } from "./SurfaceFloatingLayer.js";
+import { calculateMenuPosition as me } from "./menuUtils.js";
+import { WORKBENCH_TEXT_SELECTION_SURFACE_ATTR as ve, CANVAS_WHEEL_INTERACTIVE_ATTR as he } from "./localInteractionSurface.js";
+import { resolveSurfacePortalHost as be, resolveSurfacePortalBoundaryRect as ge, resolveSurfacePortalScale as we } from "./dialogSurfaceScope.js";
+var ye = /* @__PURE__ */ y('<div class="flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-2"><span class="min-w-0 truncate text-xs font-medium"></span><button type=button class="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md hover:bg-accent">'), xe = /* @__PURE__ */ y("<div data-floe-status-details>"), Ee = /* @__PURE__ */ y('<span data-floe-status-indicator><button type=button class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-md hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"aria-haspopup=dialog></button><span class=sr-only role=alert aria-atomic=true></span><span class=sr-only role=status aria-atomic=true>'), pe = /* @__PURE__ */ y("<div>"), Se = /* @__PURE__ */ y('<div class="flex flex-wrap items-center gap-2">'), Ce = /* @__PURE__ */ y('<section class="space-y-2 border-b border-border pb-3 mb-3 last:border-0 last:pb-0 last:mb-0"><p class=font-medium>');
+function Be(i) {
+  const A = te(), H = de("(pointer: coarse)"), S = () => H() ? "2.75rem" : i.size === "md" ? "2rem" : "1.75rem", [m, T] = p(!1), [C, q] = p(), [K, U] = p({
     x: 0,
     y: 0
-  }), [A, K] = E({
+  }), [M, V] = p({
     width: 360,
     height: 384
-  }), [U, P] = E(!1);
-  let m, v = !1;
-  const d = () => n.entries.length > 0, L = ee(() => n.entries.some((t) => t.severity === "error") ? "error" : n.entries.some((t) => t.severity === "warning") ? "warning" : "info"), R = (t) => n.entries.filter((r) => r.severity === "error" === t).map((r) => r.summary).join(". "), V = () => (d() ? m : n.restoreFocus())?.focus({
+  }), [W, P] = p(!1);
+  let v, h = !1;
+  const f = () => i.entries.length > 0, _ = re(() => i.entries.some((t) => t.severity === "error") ? "error" : i.entries.some((t) => t.severity === "warning") ? "warning" : "info"), R = (t) => i.entries.filter((r) => r.severity === "error" === t).map((r) => r.summary).join(". "), X = () => (f() ? v : i.restoreFocus())?.focus({
     preventScroll: !0
-  }), S = (t) => {
-    F(!1), v = !1, t && V();
-  }, y = (t) => t instanceof Node && !!(m?.contains(t) || p()?.contains(t));
-  return ae({
-    open: f,
-    root: p,
-    containsTarget: y,
-    onClose: () => S(!0),
+  }), k = (t) => {
+    T(!1), h = !1, t && X();
+  }, x = (t) => t instanceof Node && !!(v?.contains(t) || C()?.contains(t));
+  return ce({
+    open: m,
+    root: C,
+    containsTarget: x,
+    onClose: () => k(!0),
     lockBodyScroll: !1,
     trapFocus: !1,
     autoFocus: !1,
     restoreFocus: !1,
     closeOnEscape: "inside",
-    escapeKeyPhase: "bubble",
+    escapeKeyPhase: "capture",
     blockHotkeys: !1
-  }), I(() => {
-    if (d()) {
-      f() && queueMicrotask(() => te(() => {
-        f() && v && document.activeElement === document.body && p()?.focus({
+  }), N(() => {
+    if (f()) {
+      m() && queueMicrotask(() => ne(() => {
+        m() && h && document.activeElement === document.body && C()?.focus({
           preventScroll: !0
         });
       }));
       return;
     }
-    const t = v || typeof document < "u" && y(document.activeElement);
-    F(!1), v = !1, t && n.restoreFocus()?.focus({
+    const t = h || typeof document < "u" && x(document.activeElement);
+    T(!1), h = !1, t && i.restoreFocus()?.focus({
       preventScroll: !0
     });
-  }), I(() => {
-    const t = p();
-    if (!f() || !t || !m) return;
-    const r = m;
-    let b = 0, $ = !0;
-    const C = () => {
+  }), N(() => {
+    const t = C();
+    if (!m() || !t || !v) return;
+    const r = v;
+    let b = 0, F = !0;
+    const L = () => {
       if (b = 0, !r.isConnected) {
-        S(!1);
+        k(!1);
         return;
       }
-      const s = me({
+      const n = be({
         owner: r
-      }), u = ve(s), x = be(s);
-      K({
-        width: Math.max(0, Math.min(360, u.right - u.left - 16)) / x.x,
-        height: Math.max(0, Math.min(384, u.bottom - u.top - 16)) / x.y
-      }), q(de(r.getBoundingClientRect(), t.getBoundingClientRect(), "end", u)), P(!0), $ && ($ = !1, t.focus({
+      }), d = ge(n), E = we(n);
+      V({
+        width: Math.max(0, Math.min(360, d.right - d.left - 16)) / E.x,
+        height: Math.max(0, Math.min(384, d.bottom - d.top - 16)) / E.y
+      }), U(me(r.getBoundingClientRect(), t.getBoundingClientRect(), "end", d)), P(!0), F && (F = !1, t.focus({
         preventScroll: !0
       }));
     }, e = () => {
-      cancelAnimationFrame(b), b = requestAnimationFrame(C);
-    }, o = new ResizeObserver(e);
-    o.observe(r), o.observe(t);
-    const i = new MutationObserver(e);
-    for (let s = r.parentElement; s; s = s.parentElement) i.observe(s, {
+      cancelAnimationFrame(b), b = requestAnimationFrame(L);
+    }, s = new ResizeObserver(e);
+    s.observe(r), s.observe(t);
+    const o = new MutationObserver(e);
+    for (let n = r.parentElement; n; n = n.parentElement) o.observe(n, {
       attributes: !0,
       attributeFilter: ["style", "class"]
     });
-    const h = (s) => {
-      v = y(s.target);
+    const a = (n) => {
+      h = x(n.target);
     };
-    document.addEventListener("focusin", h);
-    const l = (s) => {
-      y(s.target) || S(!1);
+    document.addEventListener("focusin", a);
+    const l = (n) => {
+      x(n.target) || k(!1);
     };
-    window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), document.addEventListener("pointerdown", l, !0), e(), ne(() => {
-      cancelAnimationFrame(b), document.removeEventListener("focusin", h), o.disconnect(), i.disconnect(), window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0), document.removeEventListener("pointerdown", l, !0);
+    window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), document.addEventListener("pointerdown", l, !0), e(), ie(() => {
+      cancelAnimationFrame(b), document.removeEventListener("focusin", a), s.disconnect(), o.disconnect(), window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0), document.removeEventListener("pointerdown", l, !0);
     });
   }), (() => {
-    var t = we(), r = t.firstChild, b = r.nextSibling, $ = b.nextSibling;
+    var t = Ee(), r = t.firstChild, b = r.nextSibling, F = b.nextSibling;
     r.$$click = () => {
-      d() && (P(!1), F((e) => !e));
+      f() && (P(!1), T((e) => !e));
     }, r.addEventListener("blur", (e) => {
-      e.relatedTarget && (v = y(e.relatedTarget));
+      e.relatedTarget && (h = x(e.relatedTarget));
     }), r.addEventListener("focus", () => {
-      v = !0;
+      h = !0;
     });
-    var C = m;
-    return typeof C == "function" ? Q(C, r) : m = r, a(r, c(k, {
+    var L = v;
+    return typeof L == "function" ? Z(L, r) : v = r, c(r, u($, {
       get when() {
-        return L() !== "info";
+        return _() !== "info";
       },
       get fallback() {
-        return c(ie, {
+        return u(ae, {
           class: "h-4 w-4",
           "aria-hidden": "true"
         });
       },
       get children() {
-        return c(oe, {
+        return u(se, {
           class: "h-4 w-4",
           "aria-hidden": "true"
         });
       }
-    })), a(b, () => R(!0)), a($, () => R(!1)), a(t, c(k, {
+    })), c(b, () => R(!0)), c(F, () => R(!1)), c(t, u($, {
       get when() {
-        return G(() => !!f())() && d();
+        return J(() => !!m())() && f();
       },
       get children() {
-        return c(ce, {
-          owner: m,
+        return u(fe, {
+          owner: v,
           get position() {
-            return H();
+            return K();
           },
-          layerRef: N,
-          id: T,
+          layerRef: q,
+          id: A,
           role: "dialog",
           get "aria-label"() {
-            return n.label;
+            return i.label;
           },
           tabindex: -1,
           "data-floe-surface": "floating",
           class: "flex flex-col overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-lg",
           get style() {
             return {
-              width: `${A().width}px`,
-              "max-height": `${A().height}px`,
-              visibility: U() ? "visible" : "hidden"
+              width: `${M().width}px`,
+              "max-height": `${M().height}px`,
+              visibility: W() ? "visible" : "hidden"
             };
           },
           get children() {
             return [(() => {
-              var e = he(), o = e.firstChild, i = o.nextSibling;
-              return a(o, () => n.label), i.$$click = () => S(!0), a(i, c(se, {
+              var e = ye(), s = e.firstChild, o = s.nextSibling;
+              return c(s, () => i.label), o.$$click = () => k(!0), c(o, u(le, {
                 class: "h-4 w-4"
-              })), z(() => g(i, "aria-label", n.closeLabel)), e;
+              })), I((a) => {
+                var l = i.closeLabel, n = S(), d = S();
+                return l !== a.e && g(o, "aria-label", a.e = l), n !== a.t && w(o, "width", a.t = n), d !== a.a && w(o, "height", a.a = d), a;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0
+              }), e;
             })(), (() => {
-              var e = ge();
-              return X(e, D({
-                [fe]: "true",
-                [ue]: "true"
+              var e = xe();
+              return D(e, G({
+                [he]: "true",
+                [ve]: "true"
               }, {
                 class: "min-h-0 overflow-auto overscroll-contain p-3 text-xs",
                 style: {
                   "overflow-wrap": "anywhere"
                 }
-              }), !1, !0), a(e, c(re, {
+              }), !1, !0), c(e, u(oe, {
                 get each() {
-                  return n.entries;
+                  return i.entries;
                 },
-                children: (o) => (() => {
-                  var i = Ee(), h = i.firstChild;
-                  return a(h, () => o.summary), a(i, c(k, {
+                children: (s) => (() => {
+                  var o = Ce(), a = o.firstChild;
+                  return c(a, () => s.summary), c(o, u($, {
                     get when() {
-                      return o.detail;
+                      return s.detail;
                     },
                     get children() {
-                      var l = ye();
-                      return a(l, () => o.detail), l;
+                      var l = pe();
+                      return c(l, () => s.detail), l;
                     }
-                  }), null), a(i, c(k, {
+                  }), null), c(o, u($, {
                     get when() {
-                      return o.actions;
+                      return s.actions;
                     },
                     get children() {
-                      var l = xe();
-                      return a(l, () => o.actions), l;
+                      var l = Se();
+                      return c(l, () => s.actions), l;
                     }
-                  }), null), i;
+                  }), null), o;
                 })()
               })), e;
             })()];
           }
         });
       }
-    }), null), z((e) => {
-      var o = le("inline-flex shrink-0 items-center justify-center align-middle", n.class), i = n.size === "md" ? "2rem" : "1.75rem", h = n.size === "md" ? "2rem" : "1.75rem", l = d() ? "visible" : "hidden", s = L() === "error" ? "var(--error)" : L() === "warning" ? "var(--warning)" : "var(--muted-foreground)", u = d() ? 0 : -1, x = !d() || void 0, M = `${n.label}${d() ? `: ${n.entries.map((W) => W.summary).join("; ")}` : ""}`, B = n.label, O = f(), j = f() ? T : void 0;
-      return o !== e.e && J(t, e.e = o), i !== e.t && _(t, "width", e.t = i), h !== e.a && _(t, "height", e.a = h), l !== e.o && _(r, "visibility", e.o = l), s !== e.i && _(r, "color", e.i = s), u !== e.n && g(r, "tabindex", e.n = u), x !== e.s && g(r, "aria-hidden", e.s = x), M !== e.h && g(r, "aria-label", e.h = M), B !== e.r && g(r, "title", e.r = B), O !== e.d && g(r, "aria-expanded", e.d = O), j !== e.l && g(r, "aria-controls", e.l = j), e;
+    }), null), I((e) => {
+      var s = ue("inline-flex shrink-0 items-center justify-center align-middle", i.class), o = S(), a = S(), l = f() ? "visible" : "hidden", n = _() === "error" ? "var(--error)" : _() === "warning" ? "var(--warning)" : "var(--muted-foreground)", d = f() ? 0 : -1, E = !f() || void 0, B = `${i.label}${f() ? `: ${i.entries.map((Q) => Q.summary).join("; ")}` : ""}`, O = i.label, j = m(), z = m() ? A : void 0;
+      return s !== e.e && Y(t, e.e = s), o !== e.t && w(t, "width", e.t = o), a !== e.a && w(t, "height", e.a = a), l !== e.o && w(r, "visibility", e.o = l), n !== e.i && w(r, "color", e.i = n), d !== e.n && g(r, "tabindex", e.n = d), E !== e.s && g(r, "aria-hidden", e.s = E), B !== e.h && g(r, "aria-label", e.h = B), O !== e.r && g(r, "title", e.r = O), j !== e.d && g(r, "aria-expanded", e.d = j), z !== e.l && g(r, "aria-controls", e.l = z), e;
     }, {
       e: void 0,
       t: void 0,
@@ -200,7 +208,7 @@ function Ae(n) {
     }), t;
   })();
 }
-Y(["click"]);
+ee(["click"]);
 export {
-  Ae as FeedbackIndicator
+  Be as FeedbackIndicator
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.81.0",
+  "version": "0.81.1",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",