@floegence/floe-webapp-core 0.80.2 → 0.81.1

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,214 @@
+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
+  }), [M, V] = p({
+    width: 360,
+    height: 384
+  }), [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
+  }), 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: "capture",
+    blockHotkeys: !1
+  }), N(() => {
+    if (f()) {
+      m() && queueMicrotask(() => ne(() => {
+        m() && h && document.activeElement === document.body && C()?.focus({
+          preventScroll: !0
+        });
+      }));
+      return;
+    }
+    const t = h || typeof document < "u" && x(document.activeElement);
+    T(!1), h = !1, t && i.restoreFocus()?.focus({
+      preventScroll: !0
+    });
+  }), N(() => {
+    const t = C();
+    if (!m() || !t || !v) return;
+    const r = v;
+    let b = 0, F = !0;
+    const L = () => {
+      if (b = 0, !r.isConnected) {
+        k(!1);
+        return;
+      }
+      const n = be({
+        owner: r
+      }), 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(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 a = (n) => {
+      h = x(n.target);
+    };
+    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(), 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 = Ee(), r = t.firstChild, b = r.nextSibling, F = b.nextSibling;
+    r.$$click = () => {
+      f() && (P(!1), T((e) => !e));
+    }, r.addEventListener("blur", (e) => {
+      e.relatedTarget && (h = x(e.relatedTarget));
+    }), r.addEventListener("focus", () => {
+      h = !0;
+    });
+    var L = v;
+    return typeof L == "function" ? Z(L, r) : v = r, c(r, u($, {
+      get when() {
+        return _() !== "info";
+      },
+      get fallback() {
+        return u(ae, {
+          class: "h-4 w-4",
+          "aria-hidden": "true"
+        });
+      },
+      get children() {
+        return u(se, {
+          class: "h-4 w-4",
+          "aria-hidden": "true"
+        });
+      }
+    })), c(b, () => R(!0)), c(F, () => R(!1)), c(t, u($, {
+      get when() {
+        return J(() => !!m())() && f();
+      },
+      get children() {
+        return u(fe, {
+          owner: v,
+          get position() {
+            return K();
+          },
+          layerRef: q,
+          id: A,
+          role: "dialog",
+          get "aria-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: `${M().width}px`,
+              "max-height": `${M().height}px`,
+              visibility: W() ? "visible" : "hidden"
+            };
+          },
+          get children() {
+            return [(() => {
+              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"
+              })), 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 = 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), c(e, u(oe, {
+                get each() {
+                  return i.entries;
+                },
+                children: (s) => (() => {
+                  var o = Ce(), a = o.firstChild;
+                  return c(a, () => s.summary), c(o, u($, {
+                    get when() {
+                      return s.detail;
+                    },
+                    get children() {
+                      var l = pe();
+                      return c(l, () => s.detail), l;
+                    }
+                  }), null), c(o, u($, {
+                    get when() {
+                      return s.actions;
+                    },
+                    get children() {
+                      var l = Se();
+                      return c(l, () => s.actions), l;
+                    }
+                  }), null), o;
+                })()
+              })), 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,
+      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;
+  })();
+}
+ee(["click"]);
+export {
+  Be 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';