@floegence/floe-webapp-core 0.80.1 → 0.81.0

package/dist/components/ui/Button.js

@@ -1,4 +1,4 @@
-import { spread as u, mergeProps as g, insert as n, createComponent as t, memo as m, Dynamic as b, effect as h, className as f, template as d } from "solid-js/web";
+import { spread as u, mergeProps as g, insert as n, createComponent as t, memo as m, Dynamic as h, effect as b, className as f, template as d } from "solid-js/web";
 import { splitProps as p, Show as i } from "solid-js";
 import { cn as s } from "../../utils/cn.js";
 import { Loader2 as v } from "../icons/index.js";
@@ -33,7 +33,7 @@ function P(a) {
         return e.variant === "ghost" || e.variant === "ghost-destructive" ? void 0 : "raised";
       },
       get class() {
-        return s("inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer", "transition-[color,background-color,border-color] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", w[e.variant ?? "default"], z[e.size ?? "md"], e.class);
+        return s("inline-flex min-w-max items-center justify-center gap-1.5 whitespace-nowrap font-medium cursor-pointer", "transition-[color,background-color,border-color] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", w[e.variant ?? "default"], z[e.size ?? "md"], e.class);
       },
       get disabled() {
         return e.disabled || e.loading;
@@ -52,7 +52,7 @@ function P(a) {
             return e.loading;
           },
           get fallback() {
-            return m(() => !!e.icon)() && t(b, {
+            return m(() => !!e.icon)() && t(h, {
               get component() {
                 return e.icon;
               },
@@ -64,7 +64,7 @@ function P(a) {
               class: "h-full w-full animate-spin"
             });
           }
-        })), h(() => f(o, s("inline-flex shrink-0 items-center justify-center", l()))), o;
+        })), b(() => f(o, s("inline-flex shrink-0 items-center justify-center", l()))), o;
       }
     }), null), n(r, () => e.children, null), r;
   })();

package/dist/components/ui/FeedbackIndicator.d.ts

@@ -0,0 +1,20 @@
+import { type JSX } from 'solid-js';
+export interface FeedbackIndicatorEntry {
+    id: string;
+    severity: 'info' | 'warning' | 'error';
+    summary: string;
+    detail?: JSX.Element;
+    actions?: JSX.Element;
+}
+export interface FeedbackIndicatorProps {
+    /** Current feedback, owned by the caller. Closing details never clears these entries. */
+    entries: readonly FeedbackIndicatorEntry[];
+    label: string;
+    closeLabel: string;
+    /** Stable destination when feedback resolves while its trigger or details owns focus. */
+    restoreFocus: () => HTMLElement | undefined;
+    size?: 'sm' | 'md';
+    class?: string;
+}
+/** Compact feedback in an existing action row; no empty vertical status lane. */
+export declare function FeedbackIndicator(props: FeedbackIndicatorProps): JSX.Element;

package/dist/components/ui/FeedbackIndicator.js

@@ -0,0 +1,206 @@
+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({
+    x: 0,
+    y: 0
+  }), [A, K] = E({
+    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({
+    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),
+    lockBodyScroll: !1,
+    trapFocus: !1,
+    autoFocus: !1,
+    restoreFocus: !1,
+    closeOnEscape: "inside",
+    escapeKeyPhase: "bubble",
+    blockHotkeys: !1
+  }), I(() => {
+    if (d()) {
+      f() && queueMicrotask(() => te(() => {
+        f() && v && document.activeElement === document.body && p()?.focus({
+          preventScroll: !0
+        });
+      }));
+      return;
+    }
+    const t = v || typeof document < "u" && y(document.activeElement);
+    F(!1), v = !1, t && n.restoreFocus()?.focus({
+      preventScroll: !0
+    });
+  }), I(() => {
+    const t = p();
+    if (!f() || !t || !m) return;
+    const r = m;
+    let b = 0, $ = !0;
+    const C = () => {
+      if (b = 0, !r.isConnected) {
+        S(!1);
+        return;
+      }
+      const s = me({
+        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({
+        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, {
+      attributes: !0,
+      attributeFilter: ["style", "class"]
+    });
+    const h = (s) => {
+      v = y(s.target);
+    };
+    document.addEventListener("focusin", h);
+    const l = (s) => {
+      y(s.target) || S(!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);
+    });
+  }), (() => {
+    var t = we(), r = t.firstChild, b = r.nextSibling, $ = b.nextSibling;
+    r.$$click = () => {
+      d() && (P(!1), F((e) => !e));
+    }, r.addEventListener("blur", (e) => {
+      e.relatedTarget && (v = y(e.relatedTarget));
+    }), r.addEventListener("focus", () => {
+      v = !0;
+    });
+    var C = m;
+    return typeof C == "function" ? Q(C, r) : m = r, a(r, c(k, {
+      get when() {
+        return L() !== "info";
+      },
+      get fallback() {
+        return c(ie, {
+          class: "h-4 w-4",
+          "aria-hidden": "true"
+        });
+      },
+      get children() {
+        return c(oe, {
+          class: "h-4 w-4",
+          "aria-hidden": "true"
+        });
+      }
+    })), a(b, () => R(!0)), a($, () => R(!1)), a(t, c(k, {
+      get when() {
+        return G(() => !!f())() && d();
+      },
+      get children() {
+        return c(ce, {
+          owner: m,
+          get position() {
+            return H();
+          },
+          layerRef: N,
+          id: T,
+          role: "dialog",
+          get "aria-label"() {
+            return n.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"
+            };
+          },
+          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, {
+                class: "h-4 w-4"
+              })), z(() => g(i, "aria-label", n.closeLabel)), e;
+            })(), (() => {
+              var e = ge();
+              return X(e, D({
+                [fe]: "true",
+                [ue]: "true"
+              }, {
+                class: "min-h-0 overflow-auto overscroll-contain p-3 text-xs",
+                style: {
+                  "overflow-wrap": "anywhere"
+                }
+              }), !1, !0), a(e, c(re, {
+                get each() {
+                  return n.entries;
+                },
+                children: (o) => (() => {
+                  var i = Ee(), h = i.firstChild;
+                  return a(h, () => o.summary), a(i, c(k, {
+                    get when() {
+                      return o.detail;
+                    },
+                    get children() {
+                      var l = ye();
+                      return a(l, () => o.detail), l;
+                    }
+                  }), null), a(i, c(k, {
+                    get when() {
+                      return o.actions;
+                    },
+                    get children() {
+                      var l = xe();
+                      return a(l, () => o.actions), l;
+                    }
+                  }), null), i;
+                })()
+              })), 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;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0
+    }), t;
+  })();
+}
+Y(["click"]);
+export {
+  Ae as FeedbackIndicator
+};

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

@@ -1,3 +1,4 @@
+export { FeedbackIndicator, type FeedbackIndicatorProps, type FeedbackIndicatorEntry } from './FeedbackIndicator';
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button';
 export { StableText, type StableTextProps } from './StableText';
 export { StatusRegion, type StatusRegionProps } from './StatusRegion';