@floegence/floe-webapp-core 0.91.2 → 0.91.4

package/dist/components/ui/PromptCard.js

@@ -1,20 +1,20 @@
 import { createComponent as u, Portal as xe, use as Y, setAttribute as x, insert as d, spread as ye, mergeProps as we, effect as N, setStyleProperty as C, className as Se, template as O, delegateEvents as Ce } from "solid-js/web";
-import { createUniqueId as Me, createSignal as z, onCleanup as p, createMemo as F, createEffect as W, untrack as G, Show as $ } from "solid-js";
+import { createUniqueId as Me, createSignal as z, onCleanup as G, createMemo as F, createEffect as W, untrack as J, Show as $ } from "solid-js";
 import { useOverlayMask as Pe } from "../../hooks/useOverlayMask.js";
 import { deferAfterPaint as de } from "../../utils/defer.js";
 import { ensureSurfacePortalInteractionTracking as ke, resolveSurfacePortalHost as $e, resolveSurfacePortalScale as De, resolveSurfacePortalBoundaryRect as Ee, projectSurfacePortalPosition as Ae, readFreshInteractionSnapshot as Le, resolveSurfacePortalMount as Te, isSurfacePortalMode as Ie } from "./dialogSurfaceScope.js";
 import { cn as ue } from "../../utils/cn.js";
 import { readViewportSnapshot as ze, observeViewport as Fe } from "../../viewport.js";
-import { X as Oe, Paperclip as Be, ArrowUp as He } from "../icons/index.js";
-import { Button as J } from "./Button.js";
+import { X as Oe, Plus as Be, ArrowUp as He } from "../icons/index.js";
+import { Button as Z } from "./Button.js";
 import { Select as Re } from "./Select.js";
 import { createFloatingPresence as Ve } from "./floatingPresence.js";
 var qe = /* @__PURE__ */ O("<span class=floe-prompt-card-icon aria-hidden=true>"), _e = /* @__PURE__ */ O("<div class=floe-prompt-card-references>"), Ne = /* @__PURE__ */ O("<input type=file multiple hidden tabindex=-1>"), We = /* @__PURE__ */ O("<div class=floe-prompt-card-feedback>"), Xe = /* @__PURE__ */ O("<div class=floe-prompt-card-positioner><div role=dialog aria-modal=false tabindex=-1 data-floe-prompt-card data-floe-input-surface data-floe-surface=floating data-floe-local-interaction-surface=true><header class=floe-prompt-card-header><h2></h2></header><div><div class=floe-prompt-card-question></div><div class=floe-prompt-card-composer><div class=floe-prompt-card-field><textarea class=floe-prompt-card-input rows=2></textarea></div><div class=floe-prompt-card-actions><div class=floe-prompt-card-tools>");
 function nt(t) {
   ke();
-  const Z = Me(), [fe, ee] = z(!1), [me, te] = z(!1), c = () => t.busy || fe();
+  const p = Me(), [fe, ee] = z(!1), [me, te] = z(!1), c = () => t.busy || fe();
   let ne = !1;
-  p(() => {
+  G(() => {
     ne = !0;
   });
   const [h, he] = z(ze(window)), [D, ge] = z(), [X, ve] = z({
@@ -43,7 +43,7 @@ function nt(t) {
     y: h().fixedScale
   }));
   W(() => {
-    y.mounted() && p(Fe(window, he));
+    y.mounted() && G(Fe(window, he));
   }), W(() => {
     const n = D();
     if (!y.mounted() || !n) return;
@@ -54,7 +54,7 @@ function nt(t) {
         height: m
       };
     }), i = new ResizeObserver(a);
-    i.observe(n), a(), p(() => i.disconnect());
+    i.observe(n), a(), G(() => i.disconnect());
   });
   const w = F(() => {
     const n = h(), a = H() ? Ee(A()) : n.visible, i = n.visible.width < 640 ? 8 : 12, s = t.viewportInsets, f = Math.max(n.visible.left, a.left) + Math.max(n.safeArea.left, s?.left ?? 0) + i, m = Math.max(n.visible.top, a.top) + Math.max(n.safeArea.top, s?.top ?? 0) + i, S = Math.min(n.visible.right, a.right) - Math.max(n.safeArea.right, s?.right ?? 0) - i, P = Math.min(n.visible.bottom, a.bottom) - Math.max(n.safeArea.bottom, s?.bottom ?? 0) - i, o = Math.max(0, S - f), g = Math.min(X().width * L().x, o), k = Math.max(0, P - m), e = Math.min(X().height * L().y, k), r = be(), l = (V, q, _) => Math.max(q, Math.min(V, _)), v = l(r ? r.x + 8 : f + (o - g) / 2, f, S - g), b = !r || r.y + 8 + e <= P, T = r ? b ? r.y + 8 : r.y - e - 8 : m + Math.max(0, (k - e) * 0.32), I = l(T, m, P - e);
@@ -70,7 +70,7 @@ function nt(t) {
     x: (w().x + h().fixedOffset.left) / h().fixedScale,
     y: (w().y + h().fixedOffset.top) / h().fixedScale
   }), R = (n) => {
-    c() || !t.open || E || (t.onClose(), n && de(() => G(() => {
+    c() || !t.open || E || (t.onClose(), n && de(() => J(() => {
       !t.open && K?.isConnected && K.focus({
         preventScroll: !0
       });
@@ -79,7 +79,7 @@ function nt(t) {
   W(() => {
     if (!t.open) return;
     const n = document.activeElement, i = t.owner ?? Le()?.target?.closest("button, a[href], input, [tabindex]") ?? (n instanceof HTMLElement && n !== document.body ? n : void 0);
-    i && !G(D)?.contains(i) && !t.containsTarget?.(i) && (K = i), queueMicrotask(() => {
+    i && !J(D)?.contains(i) && !t.containsTarget?.(i) && (K = i), queueMicrotask(() => {
       !t.open || t.autoFocus === !1 || !M?.isConnected || (M.focus({
         preventScroll: !0
       }), M.setSelectionRange(M.value.length, M.value.length));
@@ -102,7 +102,7 @@ function nt(t) {
     blockHotkeys: !1
   });
   const ie = () => {
-    !t.open || c() || t.submitDisabled || (ee(!0), de(() => G(() => {
+    !t.open || c() || t.submitDisabled || (ee(!0), de(() => J(() => {
       if (!ne)
         try {
           t.open && t.onSubmit();
@@ -124,7 +124,7 @@ function nt(t) {
           var n = Xe(), a = n.firstChild, i = a.firstChild, s = i.firstChild, f = i.nextSibling, m = f.firstChild, S = m.nextSibling, P = S.firstChild, o = P.firstChild, g = P.nextSibling, k = g.firstChild;
           return a.$$keydown = (e) => {
             e.key !== "Escape" || e.defaultPrevented || e.isComposing || E || B?.getAttribute("aria-expanded") === "true" && B.contains(e.target) || (e.preventDefault(), e.stopPropagation(), R(!0));
-          }, a.$$focusin = () => t.onActivate?.(), a.$$pointerdown = () => t.onActivate?.(), Y(ge, a), x(a, "aria-labelledby", Z), d(i, u($, {
+          }, a.$$focusin = () => t.onActivate?.(), a.$$pointerdown = () => t.onActivate?.(), Y(ge, a), x(a, "aria-labelledby", p), d(i, u($, {
             get when() {
               return t.icon;
             },
@@ -132,7 +132,7 @@ function nt(t) {
               var e = qe();
               return d(e, () => t.icon), e;
             }
-          }), s), x(s, "id", Z), d(s, () => t.title), d(i, u(J, {
+          }), s), x(s, "id", p), d(s, () => t.title), d(i, u(Z, {
             variant: "ghost",
             size: "icon",
             icon: Oe,
@@ -191,7 +191,7 @@ function nt(t) {
                   e: void 0,
                   t: void 0
                 }), e;
-              })(), u(J, {
+              })(), u(Z, {
                 variant: "ghost",
                 size: "icon",
                 icon: Be,
@@ -252,7 +252,7 @@ function nt(t) {
                 }
               });
             }
-          }), null), d(g, u(J, {
+          }), null), d(g, u(Z, {
             variant: "primary",
             size: "icon",
             icon: He,

package/dist/components/ui/SegmentedControl.js

@@ -1,7 +1,7 @@
-import { use as $, spread as V, mergeProps as q, insert as k, createComponent as W, memo as B, effect as j, setAttribute as p, className as A, setStyleProperty as x, template as H, delegateEvents as G } from "solid-js/web";
-import { splitProps as I, createSignal as J, createEffect as K, onMount as Q, onCleanup as D, For as U, untrack as X } from "solid-js";
+import { use as k, spread as V, mergeProps as q, insert as $, createComponent as E, memo as B, effect as N, setAttribute as p, className as T, setStyleProperty as x, template as A, delegateEvents as G } from "solid-js/web";
+import { splitProps as I, createSignal as J, createEffect as K, onMount as Q, onCleanup as j, For as U, untrack as X } from "solid-js";
 import { cn as z } from "../../utils/cn.js";
-var Y = /* @__PURE__ */ H("<div role=group data-floe-surface=inset data-floe-surface-part=rail><span aria-hidden=true>"), Z = /* @__PURE__ */ H('<button type=button role=radio data-floe-surface-part=segment data-floe-interactive=item><span class="inline-flex items-center gap-1.5"><span class=floe-segmented-control__label>');
+var Y = /* @__PURE__ */ A("<div role=group data-floe-surface=inset data-floe-surface-part=rail><span aria-hidden=true>"), Z = /* @__PURE__ */ A('<button type=button role=radio data-floe-surface-part=segment data-floe-interactive=item><span class="inline-flex items-center gap-1.5"><span class=floe-segmented-control__label>');
 const ee = {
   sm: {
     container: "p-0.5 gap-0.5",
@@ -19,18 +19,18 @@ const ee = {
     icon: "w-4 h-4"
   }
 };
-function ne(L) {
-  const [r, N] = I(L, ["value", "onChange", "options", "size", "disabled", "class"]);
-  let d, c;
+function ne(D) {
+  const [r, H] = I(D, ["value", "onChange", "options", "size", "disabled", "class"]);
+  let c, f;
   const h = /* @__PURE__ */ new Map(), [s, S] = J();
-  let f, u, b;
+  let u, m, b;
   const y = () => {
     const o = h.get(r.value);
-    if (!d || !o) {
-      u?.cancel(), S(void 0), b = void 0;
+    if (!c || !o) {
+      m?.cancel(), S(void 0), b = void 0;
       return;
     }
-    if (!o.offsetWidth || !d.getClientRects().length) return;
+    if (!o.offsetWidth || !c.getClientRects().length) return;
     const n = {
       x: o.offsetLeft,
       y: o.offsetTop,
@@ -38,40 +38,40 @@ function ne(L) {
       height: o.offsetHeight
     }, v = X(s);
     if (v && Object.keys(n).every((a) => n[a] === v[a]) && b === r.value) return;
-    const e = v && b !== r.value && c && !window.matchMedia("(prefers-reduced-motion: reduce), (forced-colors: active)").matches ? getComputedStyle(c) : void 0, l = e ? {
+    const e = v && b !== r.value && f && !window.matchMedia("(prefers-reduced-motion: reduce), (forced-colors: active)").matches ? getComputedStyle(f) : void 0, l = e ? {
       transform: e.transform,
       width: e.width
     } : void 0;
-    if (u?.cancel(), S(n), b = r.value, l && c) {
-      const a = getComputedStyle(d);
-      u = c.animate([l, {
+    if (m?.cancel(), S(n), b = r.value, l && f) {
+      const a = getComputedStyle(c), i = a.getPropertyValue("--floe-duration-slow").trim(), d = parseFloat(i) * (i.endsWith("ms") ? 1 : 1e3);
+      m = f.animate([l, {
         transform: `translate(${n.x}px, ${n.y}px)`,
         width: `${n.width}px`
       }], {
         // Position changes need visible travel: the fast entrance curve
         // covers almost 90% of this short rail in its first 60ms.
-        duration: parseFloat(a.getPropertyValue("--floe-duration-slow")) || 280,
+        duration: Number.isFinite(d) ? d : 280,
         easing: a.getPropertyValue("--floe-ease-in-out").trim() || "ease-in-out"
-      }), u.id = "floe-segmented-selection";
+      }), m.id = "floe-segmented-selection";
     }
   };
   K(() => {
     r.value, r.options, r.size, y();
   }), Q(() => {
     if (typeof ResizeObserver < "u") {
-      f = new ResizeObserver(y), f.observe(d);
-      for (const o of h.values()) f.observe(o);
+      u = new ResizeObserver(y), u.observe(c);
+      for (const o of h.values()) u.observe(o);
     }
     y();
-  }), D(() => {
-    f?.disconnect(), u?.cancel();
+  }), j(() => {
+    u?.disconnect(), m?.cancel();
   });
-  const P = () => r.size ?? "md", w = () => ee[P()], T = (o, n) => {
+  const P = () => r.size ?? "md", w = () => ee[P()], L = (o, n) => {
     r.disabled || n || o !== r.value && r.onChange(o);
   };
   return (() => {
-    var o = Y(), n = o.firstChild, v = d;
-    typeof v == "function" ? $(v, o) : d = o, V(o, q({
+    var o = Y(), n = o.firstChild, v = c;
+    typeof v == "function" ? k(v, o) : c = o, V(o, q({
       get "data-floe-segmented-pill"() {
         return s() ? "true" : void 0;
       },
@@ -81,30 +81,30 @@ function ne(L) {
       get class() {
         return z("floe-segmented-control relative inline-flex items-center border", "rounded-group", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", w().container, r.disabled && "opacity-50 pointer-events-none", r.class);
       }
-    }, N), !1, !0);
-    var C = c;
-    return typeof C == "function" ? $(C, n) : c = n, k(o, W(U, {
+    }, H), !1, !0);
+    var C = f;
+    return typeof C == "function" ? k(C, n) : f = n, $(o, E(U, {
       get each() {
         return r.options;
       },
       children: (e) => {
         const l = () => r.value === e.value, a = () => r.disabled || e.disabled;
         return (() => {
-          var i = Z(), g = i.firstChild, m = g.firstChild;
-          return i.$$click = () => T(e.value, e.disabled), $((t) => {
-            h.set(e.value, t), f?.observe(t), D(() => {
-              f?.unobserve(t), h.delete(e.value);
+          var i = Z(), d = i.firstChild, g = d.firstChild;
+          return i.$$click = () => L(e.value, e.disabled), k((t) => {
+            h.set(e.value, t), u?.observe(t), j(() => {
+              u?.unobserve(t), h.delete(e.value);
             });
-          }, i), k(g, (() => {
+          }, i), $(d, (() => {
             var t = B(() => !!e.icon);
-            return () => t() && W(e.icon, {
+            return () => t() && E(e.icon, {
               get class() {
                 return w().icon;
               }
             });
-          })(), m), k(m, () => e.label), j((t) => {
-            var _ = e.label, M = e.label, O = l() ? "raised" : "flat", R = l(), E = a(), F = z("floe-segmented-control__item relative font-medium cursor-pointer border", "transition-[background-color,border-color,color,box-shadow] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", w().button, l() ? "text-[var(--primary-foreground)]" : "text-[var(--floe-ink-soft)] hover:text-foreground", a() && "cursor-not-allowed opacity-50");
-            return _ !== t.e && p(i, "aria-label", t.e = _), M !== t.t && p(i, "title", t.t = M), O !== t.a && p(i, "data-floe-surface", t.a = O), R !== t.o && p(i, "aria-checked", t.o = R), E !== t.i && (i.disabled = t.i = E), F !== t.n && A(i, t.n = F), t;
+          })(), g), $(g, () => e.label), N((t) => {
+            var _ = e.label, F = e.label, M = l() ? "raised" : "flat", O = l(), R = a(), W = z("floe-segmented-control__item relative font-medium cursor-pointer border", "transition-[background-color,border-color,color,box-shadow] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", w().button, l() ? "text-[var(--primary-foreground)]" : "text-[var(--floe-ink-soft)] hover:text-foreground", a() && "cursor-not-allowed opacity-50");
+            return _ !== t.e && p(i, "aria-label", t.e = _), F !== t.t && p(i, "title", t.t = F), M !== t.a && p(i, "data-floe-surface", t.a = M), O !== t.o && p(i, "aria-checked", t.o = O), R !== t.i && (i.disabled = t.i = R), W !== t.n && T(i, t.n = W), t;
           }, {
             e: void 0,
             t: void 0,
@@ -115,9 +115,9 @@ function ne(L) {
           }), i;
         })();
       }
-    }), null), j((e) => {
-      var l = z("floe-segmented-control__pill", P() === "lg" ? "rounded-md" : "rounded-sm"), a = s() ? "visible" : "hidden", i = `translate(${s()?.x ?? 0}px, ${s()?.y ?? 0}px)`, g = `${s()?.width ?? 0}px`, m = `${s()?.height ?? 0}px`;
-      return l !== e.e && A(n, e.e = l), a !== e.t && x(n, "visibility", e.t = a), i !== e.a && x(n, "transform", e.a = i), g !== e.o && x(n, "width", e.o = g), m !== e.i && x(n, "height", e.i = m), e;
+    }), null), N((e) => {
+      var l = z("floe-segmented-control__pill", P() === "lg" ? "rounded-md" : "rounded-sm"), a = s() ? "visible" : "hidden", i = `translate(${s()?.x ?? 0}px, ${s()?.y ?? 0}px)`, d = `${s()?.width ?? 0}px`, g = `${s()?.height ?? 0}px`;
+      return l !== e.e && T(n, e.e = l), a !== e.t && x(n, "visibility", e.t = a), i !== e.a && x(n, "transform", e.a = i), d !== e.o && x(n, "width", e.o = d), g !== e.i && x(n, "height", e.i = g), e;
     }, {
       e: void 0,
       t: void 0,

package/dist/floe.css

@@ -1019,7 +1019,8 @@
   overflow: hidden; pointer-events: auto;
   border: 0;
   border-radius: var(--floe-radius-card);
-  background: var(--floe-plane-float);
+  /* A contextual editor must separate from both the page and content cards. */
+  background: color-mix(in srgb, var(--floe-ink) 10%, var(--floe-plane-float));
   color: var(--floe-ink);
   font-size: var(--floe-type-body);
   line-height: var(--floe-line-body);