@floegence/floe-webapp-core 0.90.12 → 0.91.0

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

@@ -0,0 +1,63 @@
+import { type JSX } from 'solid-js';
+import { type SelectOption } from './Select';
+export interface PromptCardProps {
+    open: boolean;
+    /** Viewport coordinates captured by the host at the contextual action. */
+    anchor?: Readonly<{
+        x: number;
+        y: number;
+    }> | null;
+    viewportInsets?: Readonly<{
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    }>;
+    /** Defaults to the trigger's surface. Viewport scope is an explicit host choice. */
+    portalScope?: 'surface' | 'viewport';
+    owner?: HTMLElement;
+    title: string;
+    icon?: JSX.Element;
+    closeLabel: string;
+    question: JSX.Element;
+    value: string;
+    onValueChange: (value: string) => void;
+    inputLabel: string;
+    placeholder?: string;
+    submitLabel: string;
+    onSubmit: () => void;
+    onClose: () => void;
+    busy?: boolean;
+    inputDisabled?: boolean;
+    submitDisabled?: boolean;
+    autoFocus?: boolean;
+    references?: JSX.Element;
+    /** Optional host-owned files; selection, paste and drop share this callback. */
+    attachment?: Readonly<{
+        label: string;
+        accept?: string;
+        onFiles: (files: File[]) => void;
+    }>;
+    /** Compact host-owned choice, for example an assistant model. */
+    selection?: Readonly<{
+        label: string;
+        placeholder?: string;
+        value: string;
+        options: readonly SelectOption[];
+        onChange: (value: string) => void;
+        loading?: boolean;
+        error?: string;
+        onRetry?: () => void;
+    }>;
+    /** Host input/scroll ownership attributes for the constrained reading viewport. */
+    bodyProps?: JSX.HTMLAttributes<HTMLDivElement>;
+    feedback?: JSX.Element;
+    /** Additional portalled content that belongs to this interaction. */
+    containsTarget?: (target: EventTarget | null) => boolean;
+    onActivate?: () => void;
+    editorRef?: (element: HTMLTextAreaElement) => void;
+    class?: string;
+    zIndex?: number;
+}
+/** A short contextual input. The host owns the draft and asynchronous result. */
+export declare function PromptCard(props: PromptCardProps): JSX.Element;

package/dist/components/ui/PromptCard.js

@@ -0,0 +1,312 @@
+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 { 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 { 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();
+  let ne = !1;
+  p(() => {
+    ne = !0;
+  });
+  const [h, he] = z(ze(window)), [D, ge] = z(), [X, ve] = z({
+    width: 0,
+    height: 0
+  }), be = F((n) => t.open ? t.anchor : n), y = Ve({
+    open: () => t.open,
+    element: D
+  });
+  let M, K, E = !1, U, B;
+  const j = (n) => {
+    t.open && !c() && !t.inputDisabled && n.length && t.attachment?.onFiles(n);
+  };
+  W(() => {
+    (!t.open || c() || t.inputDisabled) && te(!1);
+  });
+  const A = F(() => !y.mounted() || t.portalScope === "viewport" ? {
+    host: null,
+    boundaryHost: null,
+    mountHost: null,
+    mode: "global"
+  } : $e({
+    owner: t.owner
+  })), H = () => Ie(A()), L = F(() => (h(), X(), H() ? De(A()) : {
+    x: h().fixedScale,
+    y: h().fixedScale
+  }));
+  W(() => {
+    y.mounted() && p(Fe(window, he));
+  }), W(() => {
+    const n = D();
+    if (!y.mounted() || !n) return;
+    const a = () => ve((s) => {
+      const f = n.offsetWidth, m = n.offsetHeight;
+      return s.width === f && s.height === m ? s : {
+        width: f,
+        height: m
+      };
+    }), i = new ResizeObserver(a);
+    i.observe(n), a(), p(() => 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);
+    return {
+      x: v,
+      y: I,
+      availableWidth: o,
+      maxHeight: k,
+      side: !r || I !== T ? "edge" : b ? "bottom" : "top",
+      originX: r ? l(r.x - v, 16, g - 16) : g / 2
+    };
+  }), ae = F(() => H() ? Ae(w(), A()) : {
+    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(() => {
+      !t.open && K?.isConnected && K.focus({
+        preventScroll: !0
+      });
+    })));
+  };
+  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(() => {
+      !t.open || t.autoFocus === !1 || !M?.isConnected || (M.focus({
+        preventScroll: !0
+      }), M.setSelectionRange(M.value.length, M.value.length));
+    });
+  }), Pe({
+    open: () => t.open,
+    root: D,
+    containsTarget: (n) => !!(n instanceof Node && D()?.contains(n)) || !!t.containsTarget?.(n) || !!(n instanceof Node && document.getElementById(B?.getAttribute("aria-controls") ?? "")?.parentElement?.contains(n)),
+    onClose: () => R(!0),
+    onInteractOutside: (n) => {
+      n.type === "pointerdown" && R(!1);
+    },
+    // Related previews belong to pointer ownership, but own their Escape command.
+    closeOnEscape: "none",
+    escapeKeyPhase: "bubble",
+    lockBodyScroll: !1,
+    trapFocus: !1,
+    autoFocus: !1,
+    restoreFocus: !1,
+    blockHotkeys: !1
+  });
+  const ie = () => {
+    !t.open || c() || t.submitDisabled || (ee(!0), de(() => G(() => {
+      if (!ne)
+        try {
+          t.open && t.onSubmit();
+        } finally {
+          ee(!1);
+        }
+    })));
+  };
+  return u($, {
+    get when() {
+      return y.mounted();
+    },
+    get children() {
+      return u(xe, {
+        get mount() {
+          return Te(A());
+        },
+        get children() {
+          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($, {
+            get when() {
+              return t.icon;
+            },
+            get children() {
+              var e = qe();
+              return d(e, () => t.icon), e;
+            }
+          }), s), x(s, "id", Z), d(s, () => t.title), d(i, u(J, {
+            variant: "ghost",
+            size: "icon",
+            icon: Oe,
+            class: "floe-prompt-card-close",
+            get disabled() {
+              return c();
+            },
+            get title() {
+              return t.closeLabel;
+            },
+            get "aria-label"() {
+              return t.closeLabel;
+            },
+            onClick: () => R(!0)
+          }), null), ye(f, we(() => t.bodyProps, {
+            get class() {
+              return ue("floe-prompt-card-body", t.bodyProps?.class);
+            }
+          }), !1, !0), d(m, () => t.question), S.addEventListener("drop", (e) => {
+            !t.attachment || !e.dataTransfer?.files.length || (e.preventDefault(), j(Array.from(e.dataTransfer.files)));
+          }), S.addEventListener("dragover", (e) => {
+            t.attachment && !c() && !t.inputDisabled && e.dataTransfer?.types.includes("Files") && e.preventDefault();
+          }), o.$$keydown = (e) => {
+            e.key === "Enter" && !e.shiftKey && !e.isComposing && !E && (e.preventDefault(), ie());
+          }, o.addEventListener("compositionend", (e) => {
+            E = !1, t.onValueChange(e.currentTarget.value);
+          }), o.addEventListener("compositionupdate", (e) => t.onValueChange(e.currentTarget.value)), o.addEventListener("compositionstart", () => {
+            E = !0;
+          }), o.$$input = (e) => t.onValueChange(e.currentTarget.value), o.addEventListener("paste", (e) => {
+            !t.attachment || !e.clipboardData?.files.length || (e.preventDefault(), j(Array.from(e.clipboardData.files)));
+          }), Y((e) => {
+            M = e, t.editorRef?.(e);
+          }, o), d(S, u($, {
+            get when() {
+              return t.references;
+            },
+            get children() {
+              var e = _e();
+              return d(e, () => t.references), N(() => e.inert = !!c()), e;
+            }
+          }), g), d(k, u($, {
+            get when() {
+              return t.attachment;
+            },
+            get children() {
+              return [(() => {
+                var e = Ne();
+                e.addEventListener("change", (l) => {
+                  j(Array.from(l.currentTarget.files ?? [])), l.currentTarget.value = "";
+                });
+                var r = U;
+                return typeof r == "function" ? Y(r, e) : U = e, N((l) => {
+                  var v = t.attachment?.accept, b = c() || t.inputDisabled;
+                  return v !== l.e && x(e, "accept", l.e = v), b !== l.t && (e.disabled = l.t = b), l;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), e;
+              })(), u(J, {
+                variant: "ghost",
+                size: "icon",
+                icon: Be,
+                class: "floe-prompt-card-attach",
+                get disabled() {
+                  return c() || t.inputDisabled;
+                },
+                get "aria-label"() {
+                  return t.attachment?.label;
+                },
+                get title() {
+                  return t.attachment?.label;
+                },
+                onClick: () => U?.click()
+              })];
+            }
+          }), null), d(k, u($, {
+            get when() {
+              return t.selection;
+            },
+            get children() {
+              return u(Re, {
+                ref: (e) => {
+                  B = e;
+                },
+                class: "floe-prompt-card-selection",
+                get open() {
+                  return me();
+                },
+                onOpenChange: te,
+                get zIndex() {
+                  return (t.zIndex ?? 100) + 1;
+                },
+                get ariaLabel() {
+                  return t.selection.label;
+                },
+                get placeholder() {
+                  return t.selection.placeholder;
+                },
+                get value() {
+                  return t.selection.value;
+                },
+                get options() {
+                  return t.selection.options;
+                },
+                onChange: (e) => t.selection.onChange(e),
+                get disabled() {
+                  return c() || t.inputDisabled;
+                },
+                get loading() {
+                  return t.selection.loading;
+                },
+                get error() {
+                  return t.selection.error;
+                },
+                get onRetry() {
+                  return t.selection.onRetry;
+                }
+              });
+            }
+          }), null), d(g, u(J, {
+            variant: "primary",
+            size: "icon",
+            icon: He,
+            class: "floe-prompt-card-submit",
+            get disabled() {
+              return t.submitDisabled;
+            },
+            get loading() {
+              return c();
+            },
+            get "aria-busy"() {
+              return c() ? "true" : "false";
+            },
+            get title() {
+              return t.submitLabel;
+            },
+            get "aria-label"() {
+              return t.submitLabel;
+            },
+            onClick: ie
+          }), null), d(f, u($, {
+            get when() {
+              return t.feedback;
+            },
+            get children() {
+              var e = We();
+              return d(e, () => t.feedback), e;
+            }
+          }), null), N((e) => {
+            var r = H() ? "absolute" : "fixed", l = `${ae().x}px`, v = `${ae().y}px`, b = `${w().availableWidth / L().x}px`, T = `${w().maxHeight / L().y}px`, I = `${w().originX / L().x}px`, Q = t.zIndex ?? 100, V = ue("floe-prompt-card floe-floating-presence", t.class), q = w().side, _ = y.state(), re = y.exiting(), oe = y.exiting() ? "true" : void 0, le = t.inputLabel, ce = t.placeholder, se = c() || t.inputDisabled;
+            return r !== e.e && C(n, "position", e.e = r), l !== e.t && C(n, "left", e.t = l), v !== e.a && C(n, "top", e.a = v), b !== e.o && C(n, "--floe-prompt-max-width", e.o = b), T !== e.i && C(n, "--floe-prompt-max-height", e.i = T), I !== e.n && C(n, "--floe-prompt-origin-x", e.n = I), Q !== e.s && C(n, "z-index", e.s = Q), V !== e.h && Se(a, e.h = V), q !== e.r && x(a, "data-floating-side", e.r = q), _ !== e.d && x(a, "data-floating-presence", e.d = _), re !== e.l && (a.inert = e.l = re), oe !== e.u && x(a, "aria-hidden", e.u = oe), le !== e.c && x(o, "aria-label", e.c = le), ce !== e.w && x(o, "placeholder", e.w = ce), se !== e.m && (o.disabled = e.m = se), 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,
+            u: void 0,
+            c: void 0,
+            w: void 0,
+            m: void 0
+          }), N(() => o.value = t.value), n;
+        }
+      });
+    }
+  });
+}
+Ce(["pointerdown", "focusin", "keydown", "input"]);
+export {
+  nt as PromptCard
+};

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

@@ -19,6 +19,8 @@ export interface SelectBaseProps {
     options: readonly SelectOption[];
     placeholder?: string;
     class?: string;
+    /** Optional layer for choices nested in elevated overlays. */
+    zIndex?: number;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;

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';