@floegence/floe-webapp-core 0.90.11 → 0.91.0

package/dist/components/ui/Select.js

@@ -1,4 +1,4 @@
-import { createComponent as c, mergeProps as R, insert as o, spread as te, memo as K, effect as P, use as le, setAttribute as m, className as ve, template as w, delegateEvents as ge } from "solid-js/web";
+import { createComponent as c, mergeProps as I, insert as o, spread as te, memo as z, effect as P, use as le, setAttribute as m, className as ve, template as w, delegateEvents as ge } from "solid-js/web";
 import { createUniqueId as me, createSignal as B, createMemo as he, createEffect as N, untrack as be, onCleanup as ae, onMount as ye, Show as V, For as Q } from "solid-js";
 import { cn as re } from "../../utils/cn.js";
 import { useFloeLocale as we } from "../../context/LocaleContext.js";
@@ -7,32 +7,32 @@ import { SurfaceFloatingLayer as xe } from "./SurfaceFloatingLayer.js";
 import { createFloatingPresence as ke } from "./floatingPresence.js";
 import { calculateMenuPosition as Ve } from "./menuUtils.js";
 import { useFormControl as Le, joinAriaIds as Oe } from "./formFieldContext.js";
-import { createControllableValue as M } from "./controllable.js";
+import { createControllableValue as K } from "./controllable.js";
 import { ChevronDown as $e, Check as Ee } from "../icons/index.js";
 import { resolveSurfacePortalBoundaryRect as De, resolveSurfacePortalHost as Pe } from "./dialogSurfaceScope.js";
-var Se = /* @__PURE__ */ w("<input>"), _e = /* @__PURE__ */ w("<option value>"), qe = /* @__PURE__ */ w('<div role=status class="px-2 py-2 text-caption">'), Ae = /* @__PURE__ */ w("<button type=button>"), Fe = /* @__PURE__ */ w('<div role=alert class="p-2 text-error">'), Te = /* @__PURE__ */ w('<div role=status class="p-2 text-caption">'), Be = /* @__PURE__ */ w('<div class="floe-floating-presence floe-floating-menu rounded-panel border border-[var(--floe-line)] bg-popover text-popover-foreground shadow-[var(--floe-elevation-float)] p-1"data-floe-surface=floating><div role=listbox class="max-h-64 overflow-y-auto"data-floe-local-interaction-surface=true>'), Re = /* @__PURE__ */ w('<div class="relative min-w-0"><select tabindex=-1 aria-hidden=true class="sr-only pointer-events-none">'), Ie = /* @__PURE__ */ w("<button><span class=truncate>"), Ke = /* @__PURE__ */ w("<option selected>"), Me = /* @__PURE__ */ w("<option>"), He = /* @__PURE__ */ w('<div role=option><span class="h-3.5 w-3.5 shrink-0">');
+var Se = /* @__PURE__ */ w("<input>"), _e = /* @__PURE__ */ w("<option value>"), qe = /* @__PURE__ */ w('<div role=status class="px-2 py-2 text-caption">'), Ae = /* @__PURE__ */ w("<button type=button>"), Fe = /* @__PURE__ */ w('<div role=alert class="p-2 text-error">'), Te = /* @__PURE__ */ w('<div role=status class="p-2 text-caption">'), Be = /* @__PURE__ */ w('<div class="floe-floating-presence floe-floating-menu rounded-panel border border-[var(--floe-line)] bg-popover text-popover-foreground shadow-[var(--floe-elevation-float)] p-1"data-floe-surface=floating><div role=listbox class="max-h-64 overflow-y-auto"data-floe-local-interaction-surface=true>'), Ie = /* @__PURE__ */ w('<div class="relative min-w-0"><select tabindex=-1 aria-hidden=true class="sr-only pointer-events-none">'), Re = /* @__PURE__ */ w("<button><span class=truncate>"), ze = /* @__PURE__ */ w("<option selected>"), Ke = /* @__PURE__ */ w("<option>"), Me = /* @__PURE__ */ w('<div role=option><span class="h-3.5 w-3.5 shrink-0">');
 function U(e) {
-  const u = we(), g = Le(), b = me(), W = () => e.id ?? g.id ?? "select-" + b, S = "options-" + b, _ = () => e.disabled ?? g.disabled, q = () => e.readOnly ?? g.readOnly, [h, ne] = M({
+  const u = we(), g = Le(), b = me(), W = () => e.id ?? g.id ?? "select-" + b, S = "options-" + b, _ = () => e.disabled ?? g.disabled, q = () => e.readOnly ?? g.readOnly, [h, ne] = K({
     value: () => e.open,
     defaultValue: e.defaultOpen ?? !1,
     onChange: (t) => e.onOpenChange?.(t)
-  }), [H, G] = B(""), [L, E] = B(-1), [ie, oe] = B({
+  }), [M, G] = B(""), [L, E] = B(-1), [ie, oe] = B({
     x: 0,
     y: 0
   }), [ue, de] = B(200);
-  let x, O, k, I;
+  let x, O, k, R;
   const D = ke({
     open: h,
     element: () => k
   }), [se, ce] = B("bottom");
-  let j = "", J = 0;
+  let H = "", J = 0;
   const C = he(() => {
-    if (!e.searchable || e.filter === !1 || !H()) return e.options;
-    const t = H().toLocaleLowerCase(u.locale);
+    if (!e.searchable || e.filter === !1 || !M()) return e.options;
+    const t = M().toLocaleLowerCase(u.locale);
     return e.options.filter((a) => [a.label, ...a.keywords ?? []].some((i) => i.toLocaleLowerCase(u.locale).includes(t)));
   }), X = () => e.values.map((t) => e.options.find((a) => a.value === t)?.label ?? t).join(", "), y = (t) => {
     t && (_() || q()) || (ne(t), t || G(""));
-  }, z = (t) => {
+  }, j = (t) => {
     _() || q() || t.disabled || (e.onValuesChange(e.multiple ? e.values.includes(t.value) ? e.values.filter((a) => a !== t.value) : [...e.values, t.value] : [t.value]), e.multiple || y(!1), x?.focus({
       preventScroll: !0
     }));
@@ -55,7 +55,7 @@ function U(e) {
     })), i = Ve(
       t,
       // The position layer is never transformed; motion belongs to its child.
-      I?.getBoundingClientRect() ?? k.getBoundingClientRect(),
+      R?.getBoundingClientRect() ?? k.getBoundingClientRect(),
       u.direction === "rtl" ? "end" : "start",
       a
     );
@@ -78,7 +78,7 @@ function U(e) {
     };
     a();
     const i = new ResizeObserver(a);
-    x && i.observe(x), I && i.observe(I), window.addEventListener("resize", a), window.addEventListener("scroll", a, !0), ae(() => {
+    x && i.observe(x), R && i.observe(R), window.addEventListener("resize", a), window.addEventListener("scroll", a, !0), ae(() => {
       cancelAnimationFrame(t), i.disconnect(), window.removeEventListener("resize", a), window.removeEventListener("scroll", a, !0);
     });
   }), Ce({
@@ -175,14 +175,14 @@ function U(e) {
           return;
         }
         if (t.key === "Enter" || !e.searchable && t.key === " ") {
-          t.preventDefault(), h() && C()[L()] ? z(C()[L()]) : y(!0);
+          t.preventDefault(), h() && C()[L()] ? j(C()[L()]) : y(!0);
           return;
         }
         if (!e.searchable && t.key.length === 1 && !t.ctrlKey && !t.metaKey && !t.altKey) {
           const a = Date.now();
-          j = a - J > 700 ? t.key : j + t.key, J = a;
-          const i = e.options.find((l) => !l.disabled && l.label.toLocaleLowerCase(u.locale).startsWith(j.toLocaleLowerCase(u.locale)));
-          i && (t.preventDefault(), h() ? E(C().indexOf(i)) : z(i));
+          H = a - J > 700 ? t.key : H + t.key, J = a;
+          const i = e.options.find((l) => !l.disabled && l.label.toLocaleLowerCase(u.locale).startsWith(H.toLocaleLowerCase(u.locale)));
+          i && (t.preventDefault(), h() ? E(C().indexOf(i)) : j(i));
         }
       }
     },
@@ -191,15 +191,15 @@ function U(e) {
     }
   };
   return (() => {
-    var t = Re(), a = t.firstChild;
+    var t = Ie(), a = t.firstChild;
     o(t, c(V, {
       get when() {
         return e.searchable;
       },
       get fallback() {
         return (() => {
-          var l = Ie(), n = l.firstChild;
-          return te(l, R(Z, {
+          var l = Re(), n = l.firstChild;
+          return te(l, I(Z, {
             type: "button",
             onClick: () => y(!h())
           }), !1, !0), o(n, () => X() || e.placeholder || u.t("selectPlaceholder")), o(l, c($e, {
@@ -209,7 +209,7 @@ function U(e) {
       },
       get children() {
         var l = Se();
-        return te(l, R(Z, {
+        return te(l, I(Z, {
           type: "text",
           autocomplete: "off",
           get readOnly() {
@@ -220,7 +220,7 @@ function U(e) {
             return e.placeholder ?? u.t("searchPlaceholder");
           },
           get value() {
-            return K(() => !!h())() ? H() : X();
+            return z(() => !!h())() ? M() : X();
           },
           onClick: () => y(!0),
           onInput: (n) => {
@@ -234,7 +234,7 @@ function U(e) {
     var i = O;
     return typeof i == "function" ? le(i, a) : O = a, o(a, c(V, {
       get when() {
-        return K(() => !e.multiple)() && !e.options.some((l) => l.value === "");
+        return z(() => !e.multiple)() && !e.options.some((l) => l.value === "");
       },
       get children() {
         var l = _e();
@@ -245,7 +245,7 @@ function U(e) {
         return e.values.filter((l) => l !== "" && !e.options.some((n) => n.value === l));
       },
       children: (l) => (() => {
-        var n = Ke();
+        var n = ze();
         return n.value = l, o(n, l), n;
       })()
     }), null), o(a, c(Q, {
@@ -253,7 +253,7 @@ function U(e) {
         return e.options;
       },
       children: (l) => (() => {
-        var n = Me();
+        var n = Ke();
         return o(n, () => l.label), P((v) => {
           var r = e.values.includes(l.value), f = l.disabled;
           return r !== v.e && (n.selected = v.e = r), f !== v.t && (n.disabled = v.t = f), v;
@@ -273,13 +273,14 @@ function U(e) {
             return ie();
           },
           layerRef: (l) => {
-            I = l;
+            R = l;
           },
           get dir() {
             return u.direction;
           },
           get style() {
             return {
+              "z-index": e.zIndex,
               width: "max-content",
               "min-width": ue() + "px",
               "max-width": "calc(100vw - 24px)"
@@ -316,8 +317,8 @@ function U(e) {
                 return C();
               },
               children: (r, f) => (() => {
-                var s = He(), $ = s.firstChild;
-                return s.$$click = () => z(r), s.$$pointermove = () => !r.disabled && E(f()), s.$$pointerdown = (d) => d.preventDefault(), o($, c(V, {
+                var s = Me(), $ = s.firstChild;
+                return s.$$click = () => j(r), s.$$pointermove = () => !r.disabled && E(f()), s.$$pointerdown = (d) => d.preventDefault(), o($, c(V, {
                   get when() {
                     return e.values.includes(r.value);
                   },
@@ -327,7 +328,7 @@ function U(e) {
                     });
                   }
                 })), o(s, (() => {
-                  var d = K(() => !!e.renderOption);
+                  var d = z(() => !!e.renderOption);
                   return () => d() ? e.renderOption(r) : r.label;
                 })(), null), P((d) => {
                   var A = S + "-" + f(), F = e.values.includes(r.value), T = r.disabled || void 0, p = e.values.includes(r.value) ? "true" : void 0, ee = re("flex min-h-[var(--floe-row-height)] items-center gap-2 rounded-sm px-2 text-[length:var(--floe-type-control)]", L() === f() && "bg-accent text-accent-foreground", r.disabled ? "opacity-50" : "cursor-pointer");
@@ -342,7 +343,7 @@ function U(e) {
               })()
             })), o(l, c(V, {
               get when() {
-                return K(() => !C().length && !e.loading)() && !e.error;
+                return z(() => !C().length && !e.loading)() && !e.error;
               },
               get children() {
                 var r = Te();
@@ -377,12 +378,12 @@ function U(e) {
   })();
 }
 function tt(e) {
-  const [u, g] = M({
+  const [u, g] = K({
     value: () => e.value,
     defaultValue: e.defaultValue ?? "",
     onChange: (b) => e.onChange?.(b)
   });
-  return c(U, R(e, {
+  return c(U, I(e, {
     get values() {
       return [u()];
     },
@@ -393,12 +394,12 @@ function tt(e) {
   }));
 }
 function lt(e) {
-  const [u, g] = M({
+  const [u, g] = K({
     value: () => e.value,
     defaultValue: e.defaultValue ?? "",
     onChange: (b) => e.onChange?.(b)
   });
-  return c(U, R(e, {
+  return c(U, I(e, {
     searchable: !0,
     get values() {
       return [u()];
@@ -410,12 +411,12 @@ function lt(e) {
   }));
 }
 function at(e) {
-  const [u, g] = M({
+  const [u, g] = K({
     value: () => e.value,
     defaultValue: e.defaultValue ?? [],
     onChange: (b) => e.onChange?.(b)
   });
-  return c(U, R(e, {
+  return c(U, I(e, {
     multiple: !0,
     get values() {
       return u();

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

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

package/dist/floe.css

@@ -1002,3 +1002,75 @@
       0 0 28px color-mix(in srgb, var(--glow) 38%, transparent);
   }
 }
+
+/* Contextual input uses the shared presence owner and language tokens. The
+ * positioning layer never animates, and typing never schedules a motion loop. */
+.floe-prompt-card-positioner { position: fixed; pointer-events: none; width: min(24rem, var(--floe-prompt-max-width)); }
+.floe-prompt-card {
+  --floe-floating-enter-duration: var(--floe-duration-base);
+  --floe-floating-exit-duration: var(--floe-duration-fast);
+  --floe-floating-enter-y: -0.25rem;
+  --floe-floating-exit-y: -0.125rem;
+  --floe-floating-enter-scale: 0.985;
+  --floe-floating-exit-scale: 0.995;
+  --floe-floating-origin: var(--floe-prompt-origin-x) top;
+  display: flex; flex-direction: column; min-width: 0;
+  max-height: var(--floe-prompt-max-height);
+  overflow: hidden; pointer-events: auto;
+  border: 1px solid var(--floe-line);
+  border-radius: var(--floe-radius-card);
+  background: var(--floe-plane-float);
+  color: var(--floe-ink);
+  font-size: var(--floe-type-body);
+  line-height: var(--floe-line-body);
+}
+.floe-prompt-card[data-floating-side='top'] {
+  --floe-floating-enter-y: 0.25rem;
+  --floe-floating-exit-y: 0.125rem;
+  --floe-floating-origin: var(--floe-prompt-origin-x) bottom;
+}
+.floe-prompt-card[data-floating-side='edge'] {
+  --floe-floating-enter-y: 0;
+  --floe-floating-exit-y: 0;
+  --floe-floating-enter-scale: 1;
+  --floe-floating-exit-scale: 1;
+}
+.floe-prompt-card-header {
+  display: flex; align-items: center; flex-shrink: 0;
+  gap: var(--floe-gap-control);
+  padding: var(--floe-pad-control) var(--floe-pad-control) 0 var(--floe-pad-card);
+}
+.floe-prompt-card-header h2 {
+  flex: 1; min-width: 0; margin: 0;
+  font-size: var(--floe-type-supporting); line-height: var(--floe-line-control);
+  font-weight: 500; color: var(--floe-ink-soft);
+}
+.floe-prompt-card-icon { display: grid; place-items: center; flex-shrink: 0; width: 1rem; height: 1rem; }
+.floe-prompt-card-icon > svg { width: 100%; height: 100%; }
+.floe-prompt-card .floe-prompt-card-close { width: var(--floe-control-height-xs); height: var(--floe-control-height-xs); border-radius: var(--floe-radius-sm); }
+.floe-prompt-card-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--floe-pad-tight) var(--floe-pad-card) var(--floe-pad-group); }
+.floe-prompt-card-question { margin-bottom: var(--floe-gap-control); font-size: var(--floe-type-body); line-height: var(--floe-line-body); font-weight: 500; overflow-wrap: anywhere; }
+.floe-prompt-card-field { border: 0; }
+.floe-prompt-card-input {
+  display: block; width: 100%; min-height: 2.5rem; max-height: min(10rem, 30dvh);
+  padding: var(--floe-pad-tight) 0; border: 0; border-radius: 0;
+  background: transparent; font: inherit; line-height: 1.5;
+  field-sizing: content; resize: none;
+}
+.floe-prompt-card-input::placeholder { color: var(--floe-field-placeholder); }
+.floe-prompt-card-actions { display: flex; align-items: center; gap: var(--floe-gap-control); padding: var(--floe-pad-control) 0 0; }
+.floe-prompt-card-references { min-width: 0; }
+.floe-prompt-card-tools { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--floe-gap-inline); }
+.floe-prompt-card-tools > .relative { min-width: 0; max-width: 15rem; }
+.floe-prompt-card .floe-prompt-card-attach { flex-shrink: 0; width: var(--floe-control-height-sm); height: var(--floe-control-height-sm); border-radius: var(--floe-radius-sm); }
+.floe-prompt-card .floe-prompt-card-selection { width: auto; max-width: 100%; height: var(--floe-control-height-sm); padding: 0 var(--floe-pad-control); border-color: transparent; background: transparent; font-size: var(--floe-type-supporting); box-shadow: none; }
+.floe-prompt-card .floe-prompt-card-selection:hover { background: var(--muted); }
+.floe-prompt-card .floe-prompt-card-submit { flex-shrink: 0; width: var(--floe-control-height-sm); height: var(--floe-control-height-sm); border-radius: 50%; }
+.floe-prompt-card-feedback { margin-top: var(--floe-gap-control); font-size: var(--floe-type-supporting); line-height: var(--floe-line-control); color: var(--error); }
+.floe-prompt-card-feedback > p { margin: 0; }
+@media (pointer: coarse) {
+  .floe-prompt-card .floe-prompt-card-close, .floe-prompt-card .floe-prompt-card-attach, .floe-prompt-card .floe-prompt-card-submit { width: 2.75rem; height: 2.75rem; }
+  .floe-prompt-card-input { font-size: 1rem; }
+  .floe-prompt-card .floe-prompt-card-selection { min-height: 2.75rem; }
+}
+@media (forced-colors: active) { .floe-prompt-card { border-color: CanvasText; } }