@floegence/floe-webapp-core 0.86.54 → 0.86.57

package/dist/chat.css

@@ -1918,7 +1918,7 @@ pre.chat-md-code-block *::selection,
 /* Images and HTML retain one quiet, bounded canvas throughout their lifecycle. */
 @layer components {
   .chat-html-canvas, .chat-media[data-media-kind="image"] .chat-media-viewport { position: relative; isolation: isolate; display: block; width: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--muted) 38%, var(--background)); }
-  .chat-html-canvas { --canvas-inset: clamp(1rem, 5%, 3rem); height: 28rem; }
+  .chat-html-canvas { --canvas-inset: .625rem; --canvas-control-size: 2.125rem; height: 28rem; }
   .chat-media[data-media-kind="image"] .chat-media-viewport { min-height: 14rem; padding: 3.5rem clamp(1rem, 5%, 2rem) 1.5rem; border: 0; }
   .chat-media[data-media-kind="image"] .chat-media-viewport::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; }
   .chat-media[data-media-kind="image"] .chat-media-placeholder { padding: 0; border-radius: 0; background: transparent; }
@@ -1929,7 +1929,7 @@ pre.chat-md-code-block *::selection,
   .chat-html-dots, .chat-media[data-media-kind="image"] .chat-media-viewport::before { background-image: radial-gradient(circle, color-mix(in srgb, var(--muted-foreground) 24%, transparent) .75px, transparent .9px); background-size: 20px 20px; background-position: 9px 9px; }
   .chat-html-sheen { opacity: 0; background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--foreground) 20%, transparent) 49%, transparent 73%); background-size: 250% 100%; mask-image: radial-gradient(circle, black .9px, transparent 1.1px); mask-size: 20px 20px; mask-position: 9px 9px; }
   .chat-html-canvas:is([data-state="generating"], [data-state="loading"]) .chat-html-sheen { opacity: 1; animation: chat-html-sweep 3.4s ease-in-out infinite; }
-  .chat-html-sheet, .chat-html-source { position: absolute; inset: 3.5rem var(--canvas-inset) 4.25rem; display: flex; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: .625rem; box-shadow: 0 14px 40px rgb(0 0 0 / .06), 0 2px 6px rgb(0 0 0 / .03); background: var(--background); }
+  .chat-html-sheet, .chat-html-source { position: absolute; inset: calc(var(--canvas-control-size) + 1rem) var(--canvas-inset) var(--canvas-inset); display: flex; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: .625rem; box-shadow: 0 14px 40px rgb(0 0 0 / .06), 0 2px 6px rgb(0 0 0 / .03); background: var(--background); }
   .chat-html-sheet { transition: opacity 280ms ease; }
   .chat-html-sheet-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
   .chat-html-sheet .chat-media-html { height: 100%; border-radius: 0; }
@@ -1937,17 +1937,21 @@ pre.chat-md-code-block *::selection,
   .chat-html-source code { padding: 0; color: inherit; background: none; font: inherit; }
   .chat-html-loading { position: absolute; inset: 3.5rem var(--canvas-inset); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; text-align: center; color: var(--muted-foreground); font-size: .75rem; }
   .chat-html-orb, .chat-media[data-media-kind="image"] .chat-media-action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.125rem; height: 2.125rem; padding: 0; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 50%; color: var(--muted-foreground); background: color-mix(in srgb, var(--background) 88%, transparent); box-shadow: 0 2px 5px rgb(0 0 0 / .035); backdrop-filter: blur(12px); cursor: pointer; transition: color 140ms, background 140ms, transform 140ms; }
-  .chat-html-orb:hover, .chat-media[data-media-kind="image"] .chat-media-action:hover { color: var(--foreground); background: var(--background); transform: translateY(-1px); }
+  .chat-html-orb:hover:not(:disabled), .chat-media[data-media-kind="image"] .chat-media-action:hover { color: var(--foreground); background: var(--background); transform: translateY(-1px); }
+  .chat-html-orb { width: var(--canvas-control-size); height: var(--canvas-control-size); }
+  .chat-html-orb:disabled { opacity: .45; cursor: not-allowed; }
   .chat-html-orb[aria-pressed="true"] { color: var(--foreground); background: var(--muted); }
   .chat-html-orb:focus-visible, .chat-html-source:focus-visible, .chat-media[data-media-kind="image"] .chat-media-action:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
   .chat-html-orb svg { width: .9375rem; height: .9375rem; }
-  .chat-html-expand { position: absolute; top: .875rem; right: .875rem; }
-  .chat-html-controls { position: absolute; bottom: .875rem; left: .875rem; display: flex; align-items: center; gap: .5rem; }
-  .chat-html-feedback { position: absolute; right: 1rem; bottom: 1.125rem; max-width: calc(100% - 7.5rem); display: flex; align-items: center; gap: .4rem; font-size: .6875rem; line-height: 1.5; color: var(--muted-foreground); }
+  .chat-html-toolbar { position: absolute; top: .5rem; right: var(--canvas-inset); left: var(--canvas-inset); height: var(--canvas-control-size); display: flex; align-items: center; gap: .5rem; }
+  .chat-html-controls, .chat-html-window-actions { display: flex; flex-shrink: 0; align-items: center; gap: .5rem; }
+  .chat-html-window-actions { margin-left: auto; }
+  .chat-html-feedback { min-width: 0; display: flex; align-items: center; gap: .4rem; font-size: .6875rem; line-height: 1.5; color: var(--muted-foreground); }
+  .chat-html-feedback > span { min-width: 0; max-height: var(--canvas-control-size); overflow: auto; }
   .chat-html-feedback svg { width: .875rem; height: .875rem; flex-shrink: 0; }
   @keyframes chat-html-sweep { from { background-position: 120% 0; } to { background-position: -80% 0; } }
-  @media (max-width: 480px) { .chat-html-canvas { height: 25rem; --canvas-inset: 1rem; } }
-  @media (pointer: coarse) { .chat-html-orb, .chat-media[data-media-kind="image"] .chat-media-action { width: 2.625rem; height: 2.625rem; } .chat-media[data-media-kind="image"] .chat-media-viewport { padding-top: 4rem; } .chat-html-controls { bottom: .75rem; left: .75rem; } }
+  @media (max-width: 480px) { .chat-html-canvas { height: 25rem; } }
+  @media (pointer: coarse) { .chat-html-canvas { --canvas-control-size: 2.625rem; } .chat-media[data-media-kind="image"] .chat-media-action { width: 2.625rem; height: 2.625rem; } .chat-media[data-media-kind="image"] .chat-media-viewport { padding-top: 4rem; } }
   @media (prefers-reduced-motion: reduce) { .chat-html-sheen { animation: none !important; background-position: 50% 0; } .chat-html-orb, .chat-html-sheet, .chat-media[data-media-kind="image"] .chat-media-action { transition: none; } }
   @media (forced-colors: active) { .chat-html-orb, .chat-html-source, .chat-html-canvas, .chat-media[data-media-kind="image"] .chat-media-action { border-color: CanvasText; } .chat-html-sheen { display: none; } }
 }

package/dist/components/chat/blocks/HtmlPreviewCanvas.d.ts

@@ -7,7 +7,7 @@ export interface HtmlPreviewCanvasProps {
     expanded: boolean;
     onExpand: () => void;
     onRetry: () => void;
-    onPreview: () => void;
+    onPreview: (event?: MouseEvent) => void;
     previewLabel: string;
     resource?: ResolvedMarkdownMedia;
     children: JSX.Element;

package/dist/components/chat/blocks/HtmlPreviewCanvas.js

@@ -1,129 +1,129 @@
-import { createComponent as a, insert as l, effect as y, setAttribute as r, memo as N, template as h, use as O, delegateEvents as j } from "solid-js/web";
-import { createSignal as U, onCleanup as B, createMemo as I, Show as d } from "solid-js";
-import { Copy as J, Eye as z, Refresh as D, ExternalLink as K, FolderOpen as Q, Minus as W, Maximize as X, Code as Y, MoreHorizontal as Z, Check as p } from "../../icons/index.js";
-import { Dropdown as ee } from "../../ui/Dropdown.js";
-var te = /* @__PURE__ */ h("<pre class=chat-html-source tabindex=0><code>"), ae = /* @__PURE__ */ h("<button type=button class=chat-media-retry>"), le = /* @__PURE__ */ h("<span class=chat-html-loading role=status><span>"), ne = /* @__PURE__ */ h("<span class=chat-html-feedback role=status>"), re = /* @__PURE__ */ h('<span class=chat-html-canvas><span class=chat-html-dots aria-hidden=true></span><span class=chat-html-sheen aria-hidden=true></span><span class=chat-html-sheet></span><button type=button class="chat-html-orb chat-html-expand"></button><span class=chat-html-controls><button type=button class=chat-html-orb data-chat-media-action=source>');
-const de = (e) => {
-  const [c, x] = U(!1), [S, k] = U("");
-  let b, v = !1, f;
-  const $ = (n) => {
-    clearTimeout(f), k(n), f = setTimeout(() => k(""), 2400);
+import { createComponent as a, insert as l, effect as $, setAttribute as n, memo as Q, template as b, use as W, delegateEvents as X } from "solid-js/web";
+import { createSignal as N, onCleanup as Y, createMemo as Z, Show as u } from "solid-js";
+import { Copy as p, Eye as O, Refresh as j, ExternalLink as B, FolderOpen as ee, Code as te, MoreHorizontal as ae, Check as le, Minus as ne, Maximize as ie } from "../../icons/index.js";
+import { Dropdown as re } from "../../ui/Dropdown.js";
+var ce = /* @__PURE__ */ b("<pre class=chat-html-source tabindex=0><code>"), oe = /* @__PURE__ */ b("<button type=button class=chat-media-retry>"), se = /* @__PURE__ */ b("<span class=chat-html-loading role=status><span>"), de = /* @__PURE__ */ b("<span class=chat-html-feedback role=status><span>"), ue = /* @__PURE__ */ b('<span class=chat-html-canvas><span class=chat-html-dots aria-hidden=true></span><span class=chat-html-sheen aria-hidden=true></span><span class=chat-html-sheet></span><span class=chat-html-toolbar><span class=chat-html-controls><button type=button class=chat-html-orb data-chat-media-action=source></button></span><span class=chat-html-window-actions><button type=button class=chat-html-orb data-chat-media-action=preview></button><button type=button class="chat-html-orb chat-html-expand">');
+const ge = (e) => {
+  const [o, k] = N(!1), [C, L] = N("");
+  let v, m = !1, x;
+  const M = (i) => {
+    clearTimeout(x), L(i), x = setTimeout(() => L(""), 2400);
   };
-  B(() => {
-    v = !0, clearTimeout(f);
+  Y(() => {
+    m = !0, clearTimeout(x);
   });
-  const V = async () => {
+  const I = async () => {
     try {
-      if (await navigator.clipboard.writeText(e.html), v) return;
-      $(e.labels.copied ?? "Copied");
+      if (await navigator.clipboard.writeText(e.html), m) return;
+      M(e.labels.copied ?? "Copied");
     } catch {
-      if (v) return;
-      const n = e.labels.copyFailed ?? "Select and copy the source.";
-      x(!0), queueMicrotask(() => {
-        if (v) return;
-        b.focus({
+      if (m) return;
+      const i = e.labels.copyFailed ?? "Select and copy the source.";
+      k(!0), queueMicrotask(() => {
+        if (m) return;
+        v.focus({
           preventScroll: !0
         });
         const g = document.createRange();
-        g.selectNodeContents(b);
-        const m = window.getSelection();
-        m?.removeAllRanges(), m?.addRange(g), $(n);
+        g.selectNodeContents(v);
+        const w = window.getSelection();
+        w?.removeAllRanges(), w?.addRange(g), M(i);
       });
     }
-  }, q = I(() => [{
+  }, J = Z(() => [{
     id: "copy",
     label: e.labels.copyHTML ?? "Copy HTML",
-    icon: () => a(J, {}),
+    icon: () => a(p, {}),
     disabled: !e.html
   }, ...e.state === "ready" ? [{
     id: "preview",
     label: e.previewLabel,
-    icon: () => a(z, {})
+    icon: () => a(O, {})
   }, {
     id: "replay",
     label: e.labels.replay ?? "Reload preview",
-    icon: () => a(D, {})
+    icon: () => a(j, {})
   }] : [], ...e.resource?.openURL && !e.resource.reveal ? [{
     id: "open",
     label: e.labels.open,
-    icon: () => a(K, {})
+    icon: () => a(B, {})
   }] : [], ...e.resource?.reveal ? [{
     id: "reveal",
     label: e.resource.reveal.label,
-    icon: () => a(Q, {})
-  }] : []]), G = () => e.state === "generating" ? e.labels.generating ?? e.labels.loading : e.state === "incomplete" ? e.labels.incomplete ?? "Generation interrupted. Source is available." : e.state === "error" ? e.labels.unavailable : e.labels.loading;
+    icon: () => a(ee, {})
+  }] : []]), K = () => e.state === "generating" ? e.labels.generating ?? e.labels.loading : e.state === "incomplete" ? e.labels.incomplete ?? "Generation interrupted. Source is available." : e.state === "error" ? e.labels.unavailable : e.labels.loading;
   return (() => {
-    var n = re(), g = n.firstChild, m = g.nextSibling, w = m.nextSibling, o = w.nextSibling, C = o.nextSibling, u = C.firstChild;
-    return n.$$keydown = (t) => {
+    var i = ue(), g = i.firstChild, w = g.nextSibling, f = w.nextSibling, y = f.nextSibling, S = y.firstChild, h = S.firstChild, R = S.nextSibling, s = R.firstChild, d = s.nextSibling;
+    return i.$$keydown = (t) => {
       t.key === "Escape" && e.expanded && !t.defaultPrevented && (t.preventDefault(), e.onExpand());
-    }, l(w, () => e.children), l(n, a(d, {
+    }, l(f, () => e.children), l(i, a(u, {
       get when() {
-        return c();
+        return o();
       },
       get children() {
-        var t = te(), s = t.firstChild, i = b;
-        return typeof i == "function" ? O(i, t) : b = t, l(s, () => e.html), y(() => r(t, "aria-label", e.labels.showSource ?? "HTML source")), t;
+        var t = ce(), r = t.firstChild, c = v;
+        return typeof c == "function" ? W(c, t) : v = t, l(r, () => e.html), $(() => n(t, "aria-label", e.labels.showSource ?? "HTML source")), t;
       }
-    }), o), l(n, a(d, {
+    }), y), l(i, a(u, {
       get when() {
-        return N(() => !c())() && e.state !== "ready";
+        return Q(() => !o())() && e.state !== "ready";
       },
       get children() {
-        var t = le(), s = t.firstChild;
-        return l(s, G), l(t, a(d, {
+        var t = se(), r = t.firstChild;
+        return l(r, K), l(t, a(u, {
           get when() {
             return e.state === "error";
           },
           get children() {
-            var i = ae();
-            return i.$$click = () => e.onRetry(), l(i, a(D, {}), null), l(i, () => e.labels.retry, null), i;
+            var c = oe();
+            return c.$$click = () => e.onRetry(), l(c, a(j, {}), null), l(c, () => e.labels.retry, null), c;
           }
-        }), null), y(() => r(s, "data-floe-progress-shimmer", e.state === "loading" || e.state === "generating" ? "text" : void 0)), t;
+        }), null), $(() => n(r, "data-floe-progress-shimmer", e.state === "loading" || e.state === "generating" ? "text" : void 0)), t;
       }
-    }), o), o.$$click = () => e.onExpand(), l(o, a(d, {
+    }), y), h.$$click = () => k((t) => !t), l(h, a(u, {
       get when() {
-        return e.expanded;
-      },
-      get fallback() {
-        return a(X, {});
-      },
-      get children() {
-        return a(W, {});
-      }
-    })), u.$$click = () => x((t) => !t), l(u, a(d, {
-      get when() {
-        return c();
+        return o();
       },
       get fallback() {
-        return a(Y, {});
+        return a(te, {});
       },
       get children() {
-        return a(z, {});
+        return a(O, {});
       }
-    })), l(C, a(ee, {
+    })), l(S, a(re, {
       get trigger() {
-        return a(Z, {});
+        return a(ae, {});
       },
       triggerClass: "chat-html-orb",
       get triggerAriaLabel() {
         return e.labels.more ?? "More actions";
       },
-      items: q,
+      items: J,
       align: "start",
       onSelect: (t) => {
-        t === "copy" ? V() : t === "preview" ? e.onPreview() : t === "replay" ? e.onRetry() : t === "reveal" ? e.resource?.reveal?.onSelect() : t === "open" && e.resource?.openURL && window.open(e.resource.openURL, "_blank", "noopener,noreferrer");
+        t === "copy" ? I() : t === "preview" ? e.onPreview() : t === "replay" ? e.onRetry() : t === "reveal" ? e.resource?.reveal?.onSelect() : t === "open" && e.resource?.openURL && window.open(e.resource.openURL, "_blank", "noopener,noreferrer");
       }
-    }), null), l(n, a(d, {
+    }), null), l(y, a(u, {
       get when() {
-        return S();
+        return C();
+      },
+      get children() {
+        var t = de(), r = t.firstChild;
+        return l(t, a(le, {}), r), l(r, C), t;
+      }
+    }), R), s.$$click = (t) => e.onPreview(t), l(s, a(B, {})), d.$$click = () => e.onExpand(), l(d, a(u, {
+      get when() {
+        return e.expanded;
+      },
+      get fallback() {
+        return a(ie, {});
       },
       get children() {
-        var t = ne();
-        return l(t, a(p, {}), null), l(t, S, null), t;
+        return a(ne, {});
       }
-    }), null), y((t) => {
-      var s = e.state, i = c() ? "source" : "preview", L = e.state === "generating" || e.state === "loading", M = !!(c() || e.state !== "ready"), R = c() || e.state !== "ready", T = e.expanded ? "collapse" : "expand", _ = e.expanded, H = e.expanded ? e.labels.collapse : e.labels.expand, E = e.expanded ? e.labels.collapse : e.labels.expand, P = c(), A = c() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source", F = c() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source";
-      return s !== t.e && r(n, "data-state", t.e = s), i !== t.t && r(n, "data-view", t.t = i), L !== t.a && r(n, "aria-busy", t.a = L), M !== t.o && w.classList.toggle("chat-html-sheet-hidden", t.o = M), R !== t.i && (w.inert = t.i = R), T !== t.n && r(o, "data-chat-media-action", t.n = T), _ !== t.s && r(o, "aria-expanded", t.s = _), H !== t.h && r(o, "aria-label", t.h = H), E !== t.r && r(o, "title", t.r = E), P !== t.d && r(u, "aria-pressed", t.d = P), A !== t.l && r(u, "aria-label", t.l = A), F !== t.u && r(u, "title", t.u = F), t;
+    })), $((t) => {
+      var r = e.state, c = o() ? "source" : "preview", T = e.state === "generating" || e.state === "loading", _ = !!(o() || e.state !== "ready"), H = o() || e.state !== "ready", E = o(), P = o() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source", A = o() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source", F = e.state !== "ready", U = e.previewLabel, z = e.previewLabel, D = e.expanded ? "collapse" : "expand", V = e.expanded, q = e.expanded ? e.labels.collapse : e.labels.expand, G = e.expanded ? e.labels.collapse : e.labels.expand;
+      return r !== t.e && n(i, "data-state", t.e = r), c !== t.t && n(i, "data-view", t.t = c), T !== t.a && n(i, "aria-busy", t.a = T), _ !== t.o && f.classList.toggle("chat-html-sheet-hidden", t.o = _), H !== t.i && (f.inert = t.i = H), E !== t.n && n(h, "aria-pressed", t.n = E), P !== t.s && n(h, "aria-label", t.s = P), A !== t.h && n(h, "title", t.h = A), F !== t.r && (s.disabled = t.r = F), U !== t.d && n(s, "aria-label", t.d = U), z !== t.l && n(s, "title", t.l = z), D !== t.u && n(d, "data-chat-media-action", t.u = D), V !== t.c && n(d, "aria-expanded", t.c = V), q !== t.w && n(d, "aria-label", t.w = q), G !== t.m && n(d, "title", t.m = G), t;
     }, {
       e: void 0,
       t: void 0,
@@ -136,11 +136,14 @@ const de = (e) => {
       r: void 0,
       d: void 0,
       l: void 0,
-      u: void 0
-    }), n;
+      u: void 0,
+      c: void 0,
+      w: void 0,
+      m: void 0
+    }), i;
   })();
 };
-j(["keydown", "click"]);
+X(["keydown", "click"]);
 export {
-  de as HtmlPreviewCanvas
+  ge as HtmlPreviewCanvas
 };

package/dist/components/chat/blocks/MarkdownMedia.js

@@ -262,7 +262,7 @@ const Fe = (e) => {
           },
           onExpand: () => S((r) => !r),
           onRetry: () => D((r) => r + 1),
-          onPreview: () => j(),
+          onPreview: j,
           get previewLabel() {
             return M();
           },

package/dist/components/chat/blocks/SvgBlock.js

@@ -1,6 +1,6 @@
 import { effect as s, className as a, template as c } from "solid-js/web";
 import "solid-js";
-import v from "../../../node_modules/.pnpm/dompurify@3.4.16/node_modules/dompurify/dist/purify.es.js";
+import v from "../../../node_modules/.pnpm/dompurify@3.4.17/node_modules/dompurify/dist/purify.es.js";
 import { cn as m } from "../../../utils/cn.js";
 var l = /* @__PURE__ */ c("<div>");
 const S = (r) => {

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

@@ -1,5 +1,5 @@
 import { type JSX } from 'solid-js';
-export interface SurfaceAnchoredLayerProps {
+export interface SurfaceAnchoredLayerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style' | 'ref'> {
     anchor: HTMLElement | undefined;
     /** Changes when the anchor moves through a transform; no idle polling is used. */
     revision?: unknown;
@@ -11,8 +11,14 @@ export interface SurfaceAnchoredLayerProps {
         narrowTop?: number;
         bottom: number;
     };
+    /** Auto places object tools above/below; side panels prefer the requested side and flip when needed. */
+    placement?: 'auto' | 'right' | 'left';
+    gap?: number;
     children: JSX.Element;
     class?: string;
+    style?: JSX.CSSProperties;
+    layerRef?: (element: HTMLDivElement) => void;
+    onAnchorDisconnect?: () => void;
 }
 /** Object-attached tools remain in screen pixels within the owning surface. */
 export declare function SurfaceAnchoredLayer(props: SurfaceAnchoredLayerProps): JSX.Element;

package/dist/components/ui/SurfaceAnchoredLayer.js

@@ -1,101 +1,128 @@
-import { createComponent as p, memo as k } from "solid-js/web";
-import { createSignal as l, createEffect as z, onCleanup as g, onMount as T, Show as V } from "solid-js";
-import { SurfaceFloatingLayer as $ } from "./SurfaceFloatingLayer.js";
-import { resolveFloatingBoundary as j } from "./surfaceFloatingBoundary.js";
-import { resolveSurfacePortalHost as E } from "./dialogSurfaceScope.js";
-function N(n) {
-  const [O, R] = l(!1), [S, F] = l({
+import { createComponent as E, mergeProps as K, memo as N } from "solid-js/web";
+import { splitProps as Q, createSignal as l, createEffect as R, onCleanup as O, onMount as U, Show as X } from "solid-js";
+import { SurfaceFloatingLayer as Z } from "./SurfaceFloatingLayer.js";
+import { resolveFloatingBoundary as _ } from "./surfaceFloatingBoundary.js";
+import { observeViewport as ee } from "../../viewport.js";
+import { resolveSurfacePortalHost as L } from "./dialogSurfaceScope.js";
+function se(C) {
+  const [o, H] = Q(C, ["anchor", "revision", "topOffset", "reservedSpace", "placement", "gap", "children", "class", "style", "layerRef", "onAnchorDisconnect"]), [P, $] = l(!1), [B, V] = l({
     x: 0,
     y: 0
-  }), [L, A] = l("above"), [x, y] = l(!1), [C, P] = l(480), [M, B] = l();
-  let d;
-  const Y = () => {
-    d = void 0;
-    const o = n.anchor, r = M();
-    if (!o || !r) return;
-    const t = j(E({
-      owner: o
+  }), [Y, q] = l("above"), [S, w] = l(!1), [D, W] = l(480), [z, k] = l();
+  let m, x = !1;
+  const [A, T] = l({
+    x: 0,
+    y: 0
+  }), [j, G] = l(0), I = () => {
+    m = void 0;
+    const n = o.anchor, h = z();
+    if (!n || !h) return;
+    if (!n.isConnected) {
+      w(!1), x || o.onAnchorDisconnect?.(), x = !0;
+      return;
+    }
+    x = !1;
+    const t = _(L({
+      owner: n
     }));
     if (!t) {
-      y(!1);
+      w(!1);
       return;
     }
-    const e = o.getBoundingClientRect(), q = Math.max(120, t.width - 24);
-    P(q);
-    const a = r.getBoundingClientRect(), H = (Math.max(t.left, e.left) + Math.min(t.right, e.right)) / 2;
-    let f = Math.max(t.left + 12, Math.min(H - a.width / 2, t.right - a.width - 12));
-    const u = e.top - (n.topOffset ?? 0), m = u - a.height - 12, h = n.reservedSpace, v = t.top + (window.matchMedia("(max-width:760px)").matches ? h?.narrowTop ?? h?.top ?? 12 : h?.top ?? 12), b = Math.max(v, t.bottom - (h?.bottom ?? 12) - a.height), w = (W) => Math.max(v, Math.min(W, b));
-    let s = m, c = "above";
-    m < v ? e.bottom + 12 <= b ? (s = e.bottom + 12, c = "below") : m >= t.top + 12 ? c = "above" : e.bottom + a.height + 12 <= t.bottom - 12 ? (s = e.bottom + 12, c = "below") : e.right + a.width + 24 <= t.right ? (f = e.right + 12, s = w(u), c = "right") : e.left - a.width - 24 >= t.left ? (f = e.left - a.width - 12, s = w(u), c = "left") : (s = w(m), c = "edge") : s = Math.min(s, b), A(c), F({
-      x: Math.round(f),
+    const e = n.getBoundingClientRect(), f = Math.max(120, t.width - 24);
+    W(f);
+    const r = h.getBoundingClientRect(), J = (Math.max(t.left, e.left) + Math.min(t.right, e.right)) / 2;
+    let d = Math.max(t.left + 12, Math.min(J - r.width / 2, t.right - r.width - 12));
+    const y = e.top - (o.topOffset ?? 0), i = Math.max(0, o.gap ?? 12), g = y - r.height - i, p = o.reservedSpace, u = t.top + (window.matchMedia("(max-width:760px)").matches ? p?.narrowTop ?? p?.top ?? 12 : p?.top ?? 12), M = Math.max(u, t.bottom - (p?.bottom ?? 12) - r.height), b = (v) => Math.max(u, Math.min(v, M));
+    G(Math.max(0, t.bottom - (p?.bottom ?? 12) - u));
+    let s = g, a = "above";
+    if (o.placement === "right" || o.placement === "left") {
+      const v = e.right + i + r.width <= t.right - 12, F = e.left - i - r.width >= t.left + 12;
+      a = o.placement, a === "right" && !v && F ? a = "left" : a === "left" && !F && v && (a = "right"), d = Math.max(t.left + 12, Math.min(a === "right" ? e.right + i : e.left - r.width - i, t.right - r.width - 12)), s = b(e.top + e.height / 2 - r.height / 2);
+    } else g < u ? e.bottom + i <= M ? (s = e.bottom + i, a = "below") : g >= t.top + 12 ? a = "above" : e.bottom + r.height + i <= t.bottom - 12 ? (s = e.bottom + i, a = "below") : e.right + r.width + i + 12 <= t.right ? (d = e.right + i, s = b(y), a = "right") : e.left - r.width - i - 12 >= t.left ? (d = e.left - r.width - i, s = b(y), a = "left") : (s = b(g), a = "edge") : s = Math.min(s, M);
+    T({
+      x: Math.max(18, Math.min(e.left + e.width / 2 - d, Math.max(18, r.width - 18))),
+      y: Math.max(18, Math.min(e.top + e.height / 2 - s, Math.max(18, r.height - 18)))
+    }), q(a), V({
+      x: Math.round(d),
       y: Math.round(s)
-    }), y(e.right > t.left && e.left < t.right && e.bottom > t.top && e.top < t.bottom);
-  }, i = () => {
-    d === void 0 && typeof requestAnimationFrame == "function" && (d = requestAnimationFrame(Y));
+    }), w(e.right > t.left && e.left < t.right && e.bottom > t.top && e.top < t.bottom);
+  }, c = () => {
+    m === void 0 && typeof requestAnimationFrame == "function" && (m = requestAnimationFrame(I));
   };
-  return z(() => {
-    n.anchor, n.revision, n.topOffset, n.reservedSpace, i();
-  }), z(() => {
-    const o = M();
-    if (!o || typeof ResizeObserver > "u") return;
-    const r = new ResizeObserver(i);
-    r.observe(o), g(() => r.disconnect());
-  }), T(() => {
-    R(!0);
-    const o = typeof ResizeObserver == "function" ? new ResizeObserver(i) : void 0, r = E({
-      owner: n.anchor
+  return R(() => {
+    o.anchor, o.revision, o.topOffset, o.reservedSpace, o.placement, o.gap, c();
+  }), R(() => {
+    const n = z();
+    if (!n || typeof ResizeObserver > "u") return;
+    const h = new ResizeObserver(c);
+    h.observe(n), O(() => h.disconnect());
+  }), U(() => $(!0)), R(() => {
+    if (!P()) return;
+    const n = o.anchor, h = typeof ResizeObserver == "function" ? new ResizeObserver(c) : void 0, t = L({
+      owner: n
     }).boundaryHost;
-    r && o?.observe(r);
-    const t = new MutationObserver(i);
-    let e = n.anchor?.parentElement;
-    for (; e && (t.observe(e, {
+    t && h?.observe(t), n && h?.observe(n);
+    const e = new MutationObserver(c);
+    n && e.observe(n, {
       attributes: !0,
       attributeFilter: ["style"]
-    }), e !== r); )
-      e = e.parentElement;
-    window.addEventListener("resize", i), window.addEventListener("scroll", i, !0), i(), g(() => {
-      o?.disconnect(), t.disconnect(), window.removeEventListener("resize", i), window.removeEventListener("scroll", i, !0);
     });
-  }), g(() => {
-    d !== void 0 && cancelAnimationFrame(d);
-  }), p(V, {
+    let f = n?.parentElement;
+    for (; f && (e.observe(f, {
+      attributes: !0,
+      attributeFilter: ["style"],
+      childList: !0
+    }), f !== t); )
+      f = f.parentElement;
+    const r = ee(window, c);
+    window.addEventListener("scroll", c, !0), c(), O(() => {
+      h?.disconnect(), e.disconnect(), r(), window.removeEventListener("scroll", c, !0);
+    });
+  }), O(() => {
+    m !== void 0 && cancelAnimationFrame(m);
+  }), E(X, {
     get when() {
-      return k(() => !!O())() && n.anchor;
+      return N(() => !!P())() && o.anchor;
     },
     get children() {
-      return p($, {
+      return E(Z, K(H, {
         get owner() {
-          return n.anchor;
+          return o.anchor;
         },
         get position() {
-          return S();
+          return B();
         },
         get class() {
-          return n.class;
+          return o.class;
         },
         get "data-placement"() {
-          return L();
+          return Y();
         },
         get inert() {
-          return !x();
+          return !S();
         },
         get style() {
           return {
-            visibility: x() ? "visible" : "hidden",
-            "max-width": `${C()}px`,
-            "z-index": 60
+            ...o.style,
+            "--floe-anchored-layer-anchor-x": `${A().x}px`,
+            "--floe-anchored-layer-anchor-y": `${A().y}px`,
+            "--floe-anchored-layer-max-height": `${j()}px`,
+            visibility: S() ? "visible" : "hidden",
+            "max-width": `${D()}px`,
+            "z-index": o.style?.["z-index"] ?? 60
           };
         },
-        layerRef: (o) => {
-          B(o), i();
+        layerRef: (n) => {
+          k(n), o.layerRef?.(n), c();
         },
         get children() {
-          return n.children;
+          return o.children;
         }
-      });
+      }));
     }
   });
 }
 export {
-  N as SurfaceAnchoredLayer
+  se as SurfaceAnchoredLayer
 };