@floegence/floe-webapp-core 0.86.58 → 0.86.62

package/dist/components/deck/DeckCell.js

@@ -1,36 +1,36 @@
-import { spread as h, mergeProps as y, insert as u, createComponent as i, Dynamic as v, template as c } from "solid-js/web";
-import { createMemo as a, Show as D } from "solid-js";
+import { spread as h, mergeProps as v, insert as l, createComponent as i, Dynamic as y, template as s } from "solid-js/web";
+import { createMemo as o, Show as D } from "solid-js";
 import { cn as R } from "../../utils/cn.js";
 import { useDeck as S } from "../../context/DeckContext.js";
 import { useWidgetRegistry as W } from "../../context/WidgetRegistry.js";
-import { WidgetStateProvider as C } from "../../context/WidgetStateContext.js";
-import { positionToGridArea as _ } from "../../utils/gridLayout.js";
-import { WidgetFrame as b } from "./WidgetFrame.js";
-import { SURFACE_PORTAL_LAYER_ATTR as k } from "../ui/dialogSurfaceScope.js";
-var z = /* @__PURE__ */ c("<div data-floe-dialog-surface-host=true>"), x = /* @__PURE__ */ c('<div class="h-full flex items-center justify-center text-muted-foreground text-xs"><span>Widget: ');
+import { WidgetStateProvider as k } from "../../context/WidgetStateContext.js";
+import { positionToGridArea as C } from "../../utils/gridLayout.js";
+import { WidgetFrame as _ } from "./WidgetFrame.js";
+import { SURFACE_PORTAL_LAYER_ATTR as z } from "../ui/dialogSurfaceScope.js";
+var b = /* @__PURE__ */ s("<div data-floe-dialog-surface-host=true>"), x = /* @__PURE__ */ s('<div class="h-full flex items-center justify-center text-[var(--floe-ink-soft)] text-xs"><span>Widget: ');
 function j(e) {
-  const t = S(), g = W(), s = () => t.editMode(), n = () => e.widget.type, d = a(() => g.getWidget(n())), l = a(() => _(e.position)), m = () => t.getWidgetState(e.widget.id), f = (r, w) => {
+  const t = S(), n = W(), c = () => t.editMode(), g = () => e.widget.type, d = o(() => n.getWidget(g())), u = o(() => C(e.position)), f = () => t.getWidgetState(e.widget.id), m = (r, w) => {
     t.updateWidgetState(e.widget.id, r, w);
-  }, o = () => d()?.component;
+  }, a = () => d()?.component;
   return (() => {
-    var r = z();
-    return h(r, y({
+    var r = b();
+    return h(r, v({
       get "data-floe-deck-widget-id"() {
         return e.widget.id;
       }
     }, {
-      [k]: "true"
+      [z]: "true"
     }, {
       "data-floe-geometry-surface": "deck-widget",
       get class() {
-        return R("deck-cell relative rounded-md overflow-hidden group", "bg-card border border-border", !e.isDragging && !e.isResizing && "transition-shadow duration-150 ease-out", e.isDragging && "shadow-2xl z-50 ring-2 ring-primary/70", e.isResizing && "shadow-lg z-50 ring-2 ring-primary", !e.isDragging && !e.isResizing && "hover:ring-1 hover:ring-primary/50", "select-none", e.isDragging && "cursor-grabbing");
+        return R("deck-cell relative rounded-md overflow-hidden group", "bg-card border border-[var(--floe-line)]", !e.isDragging && !e.isResizing && "transition-shadow duration-[var(--floe-duration-fast)] ease-out", e.isDragging && "shadow-2xl z-50 ring-2 ring-primary/70", e.isResizing && "shadow-[var(--floe-elevation-float)] z-50 ring-2 ring-[var(--floe-accent-soft)]", !e.isDragging && !e.isResizing && "hover:ring-1 hover:ring-primary/50", "select-none", e.isDragging && "cursor-grabbing");
       },
       get style() {
         return e.dragOverlayStyle ?? {
-          "grid-area": l()
+          "grid-area": u()
         };
       }
-    }), !1, !0), u(r, i(b, {
+    }), !1, !0), l(r, i(_, {
       get widget() {
         return e.widget;
       },
@@ -46,26 +46,26 @@ function j(e) {
       get children() {
         return i(D, {
           get when() {
-            return o();
+            return a();
           },
           get fallback() {
             return i(A, {
               get type() {
-                return n();
+                return g();
               }
             });
           },
           get children() {
-            return i(C, {
+            return i(k, {
               get widgetId() {
                 return e.widget.id;
               },
-              state: m,
-              onStateChange: f,
+              state: f,
+              onStateChange: m,
               get children() {
-                return i(v, {
+                return i(y, {
                   get component() {
-                    return o();
+                    return a();
                   },
                   get widgetId() {
                     return e.widget.id;
@@ -74,7 +74,7 @@ function j(e) {
                     return e.widget.config;
                   },
                   get isEditMode() {
-                    return s();
+                    return c();
                   }
                 });
               }
@@ -87,8 +87,8 @@ function j(e) {
 }
 function A(e) {
   return (() => {
-    var t = x(), g = t.firstChild;
-    return g.firstChild, u(g, () => e.type, null), t;
+    var t = x(), n = t.firstChild;
+    return n.firstChild, l(n, () => e.type, null), t;
   })();
 }
 export {

package/dist/components/deck/DeckContextMenu.js

@@ -1,26 +1,26 @@
-import { createComponent as l, Portal as f, insert as a, effect as g, className as h, setStyleProperty as u, template as i, delegateEvents as v } from "solid-js/web";
-import { Show as c, For as p } from "solid-js";
+import { createComponent as l, Portal as x, insert as c, effect as v, className as h, setStyleProperty as f, template as i, delegateEvents as g } from "solid-js/web";
+import { Show as d, For as p } from "solid-js";
 import { cn as $ } from "../../utils/cn.js";
 import { Plus as w } from "../icons/index.js";
-var b = /* @__PURE__ */ i('<div class="fixed inset-0 z-[9998]">'), k = /* @__PURE__ */ i('<div role=menu><div class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/80 flex items-center gap-1.5">Add widget here'), y = /* @__PURE__ */ i('<div class="px-3 py-3 text-xs text-muted-foreground text-center">No widgets registered'), _ = /* @__PURE__ */ i('<button type=button role=menuitem class="w-full flex items-center gap-2 px-2.5 py-1.5 rounded hover:bg-muted transition-colors text-left cursor-pointer"><span class="text-xs text-foreground">'), C = /* @__PURE__ */ i('<div class="w-4 h-4 flex-shrink-0">');
+var k = /* @__PURE__ */ i('<div class="fixed inset-0 z-[9998]">'), b = /* @__PURE__ */ i('<div role=menu><div class="px-2 py-1 text-caption font-semibold uppercase tracking-wider text-[var(--floe-ink-quiet)] flex items-center gap-1.5">Add widget here'), y = /* @__PURE__ */ i('<div class="px-3 py-3 text-xs text-[var(--floe-ink-soft)] text-center">No widgets registered'), _ = /* @__PURE__ */ i('<button type=button role=menuitem class="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-xs hover:bg-[var(--floe-state-hover)] transition-colors text-left cursor-pointer"><span class="text-xs text-foreground">'), C = /* @__PURE__ */ i('<div class="w-4 h-4 flex-shrink-0">');
 function N(r) {
-  return l(c, {
+  return l(d, {
     get when() {
       return r.open;
     },
     get children() {
-      return l(f, {
+      return l(x, {
         get children() {
           return [(() => {
-            var t = b();
-            return t.$$contextmenu = (d) => {
-              d.preventDefault(), r.onDismiss();
+            var t = k();
+            return t.$$contextmenu = (a) => {
+              a.preventDefault(), r.onDismiss();
             }, t.$$click = () => r.onDismiss(), t;
           })(), (() => {
-            var t = k(), d = t.firstChild, m = d.firstChild;
-            return a(d, l(w, {
+            var t = b(), a = t.firstChild, u = a.firstChild;
+            return c(a, l(w, {
               class: "w-2.5 h-2.5"
-            }), m), a(t, l(c, {
+            }), u), c(t, l(d, {
               get when() {
                 return r.items.length > 0;
               },
@@ -36,7 +36,7 @@ function N(r) {
                     var n = _(), o = n.firstChild;
                     return n.$$click = () => {
                       r.onSelect(e.type);
-                    }, a(n, l(c, {
+                    }, c(n, l(d, {
                       get when() {
                         return e.icon;
                       },
@@ -44,18 +44,18 @@ function N(r) {
                         return C();
                       },
                       children: (s) => {
-                        const x = s();
-                        return l(x, {
-                          class: "w-4 h-4 text-muted-foreground flex-shrink-0"
+                        const m = s();
+                        return l(m, {
+                          class: "w-4 h-4 text-[var(--floe-ink-soft)] flex-shrink-0"
                         });
                       }
-                    }), o), a(o, () => e.name), n;
+                    }), o), c(o, () => e.name), n;
                   })()
                 });
               }
-            }), null), g((e) => {
-              var n = $("fixed z-[9999] min-w-[180px] max-h-[320px] overflow-y-auto", "bg-popover border border-border rounded-md shadow-xl", "animate-in fade-in slide-in-from-top-1 duration-150", "p-1"), o = `${r.y}px`, s = `${r.x}px`;
-              return n !== e.e && h(t, e.e = n), o !== e.t && u(t, "top", e.t = o), s !== e.a && u(t, "left", e.a = s), e;
+            }), null), v((e) => {
+              var n = $("fixed z-[9999] min-w-[180px] max-h-[320px] overflow-y-auto", "bg-popover border border-[var(--floe-line)] rounded-panel shadow-[var(--floe-elevation-float-strong)]", "animate-in fade-in slide-in-from-top-1 duration-[var(--floe-duration-fast)]", "p-1"), o = `${r.y}px`, s = `${r.x}px`;
+              return n !== e.e && h(t, e.e = n), o !== e.t && f(t, "top", e.t = o), s !== e.a && f(t, "left", e.a = s), e;
             }, {
               e: void 0,
               t: void 0,
@@ -67,7 +67,7 @@ function N(r) {
     }
   });
 }
-v(["click", "contextmenu"]);
+g(["click", "contextmenu"]);
 export {
   N as DeckContextMenu
 };

package/dist/components/deck/DeckGrid.js

@@ -204,7 +204,7 @@ function Lt(z) {
         // Only enable vertical scroll when content exceeds 24 rows
         rt() ? "overflow-y-scroll" : "overflow-y-hidden",
         "grid p-1",
-        L() && "bg-muted/20",
+        L() && "bg-[var(--floe-well)]",
         z.class
       ), s = `${k()}px`, c = k(), l = `1 / ${G() + 1}`;
       return i !== e.e && ot(t, e.e = i), s !== e.t && u(t, "grid-auto-rows", e.t = s), c !== e.a && M(t, "data-row-height", e.a = c), l !== e.o && u(r, "grid-row", e.o = l), e;

package/dist/components/deck/DeckTopBar.js

@@ -1,45 +1,45 @@
-import { insert as i, createComponent as o, effect as h, className as x, Portal as W, setStyleProperty as _, template as l, use as B, delegateEvents as z } from "solid-js/web";
-import { createSignal as k, createEffect as A, onCleanup as N, Show as p, For as F } from "solid-js";
-import { cn as f } from "../../utils/cn.js";
-import { useDeck as I } from "../../context/DeckContext.js";
-import { useResolvedFloeConfig as T } from "../../context/FloeConfigContext.js";
-import { useLayout as K } from "../../context/LayoutContext.js";
-import { useWidgetRegistry as j } from "../../context/WidgetRegistry.js";
+import { insert as i, createComponent as o, effect as h, className as x, Portal as W, setStyleProperty as k, template as l, use as B, delegateEvents as q } from "solid-js/web";
+import { createSignal as _, createEffect as z, onCleanup as A, Show as f, For as N } from "solid-js";
+import { cn as p } from "../../utils/cn.js";
+import { useDeck as F } from "../../context/DeckContext.js";
+import { useResolvedFloeConfig as I } from "../../context/FloeConfigContext.js";
+import { useLayout as T } from "../../context/LayoutContext.js";
+import { useWidgetRegistry as K } from "../../context/WidgetRegistry.js";
 import { deferNonBlocking as C } from "../../utils/defer.js";
-import { LayoutSelector as q } from "./LayoutSelector.js";
+import { LayoutSelector as j } from "./LayoutSelector.js";
 import { Plus as G, ChevronDown as H, Copy as J } from "../icons/index.js";
-var O = /* @__PURE__ */ l("<button><span>Add"), Q = /* @__PURE__ */ l('<div class="fixed inset-0 z-[9998]">'), U = /* @__PURE__ */ l('<div class="px-3 py-4 text-xs text-muted-foreground text-center">No widgets available'), V = /* @__PURE__ */ l("<div><div class=p-1>"), X = /* @__PURE__ */ l('<button title="Duplicate &amp; edit"><span>Duplicate &amp; Edit'), Y = /* @__PURE__ */ l('<div><div class="w-px h-3.5 bg-border/40"></div><div class=flex-1>'), Z = /* @__PURE__ */ l('<button class="w-full flex items-center gap-2 px-3 py-2 rounded hover:bg-muted transition-colors text-left cursor-pointer"><span class=text-xs>'), ee = /* @__PURE__ */ l('<div class="w-4 h-4">');
+var O = /* @__PURE__ */ l("<button><span>Add"), Q = /* @__PURE__ */ l('<div class="fixed inset-0 z-[9998]">'), U = /* @__PURE__ */ l('<div class="px-3 py-4 text-xs text-[var(--floe-ink-soft)] text-center">No widgets available'), V = /* @__PURE__ */ l("<div><div class=p-1>"), X = /* @__PURE__ */ l('<button title="Duplicate &amp; edit"><span>Duplicate &amp; Edit'), Y = /* @__PURE__ */ l('<div><div class="w-px h-3.5 bg-border/40"></div><div class=flex-1>'), Z = /* @__PURE__ */ l('<button class="w-full flex items-center gap-2 px-3 py-2 rounded-xs hover:bg-[var(--floe-state-hover)] transition-colors text-left cursor-pointer"><span class=text-xs>'), ee = /* @__PURE__ */ l('<div class="w-4 h-4">');
 function ue($) {
-  const P = T(), c = I();
-  K();
-  const b = j(), [m, g] = k(!1), [w, D] = k({
+  const P = I(), d = F();
+  T();
+  const b = K(), [m, v] = _(!1), [w, D] = _({
     top: 0,
     left: 0
   });
-  let v;
-  const y = () => (P.config.deck.presetsMode ?? "mutable") === "immutable" && !!c.activeLayout()?.isPreset, E = (r, n) => {
-    r.stopPropagation(), r.preventDefault(), g(!1), C(() => c.addWidget(n));
+  let g;
+  const y = () => (P.config.deck.presetsMode ?? "mutable") === "immutable" && !!d.activeLayout()?.isPreset, E = (r, n) => {
+    r.stopPropagation(), r.preventDefault(), v(!1), C(() => d.addWidget(n));
   }, L = (r) => {
-    if (r.stopPropagation(), r.preventDefault(), !m() && v) {
-      const n = v.getBoundingClientRect();
+    if (r.stopPropagation(), r.preventDefault(), !m() && g) {
+      const n = g.getBoundingClientRect();
       D({
         top: n.bottom + 4,
         left: n.left
       });
     }
-    g((n) => !n);
+    v((n) => !n);
   }, M = () => {
-    g(!1);
+    v(!1);
   };
-  return A(() => {
+  return z(() => {
     if (!m() || typeof document > "u") return;
     const r = (n) => {
-      n.key === "Escape" && g(!1);
+      n.key === "Escape" && v(!1);
     };
-    document.addEventListener("keydown", r), N(() => document.removeEventListener("keydown", r));
+    document.addEventListener("keydown", r), A(() => document.removeEventListener("keydown", r));
   }), (() => {
     var r = Y(), n = r.firstChild, S = n.nextSibling;
-    return i(r, o(q, {}), n), i(r, o(p, {
+    return i(r, o(j, {}), n), i(r, o(f, {
       get when() {
         return !y();
       },
@@ -47,15 +47,15 @@ function ue($) {
         return [(() => {
           var e = O(), s = e.firstChild;
           e.$$click = L;
-          var t = v;
-          return typeof t == "function" ? B(t, e) : v = e, i(e, o(G, {
+          var t = g;
+          return typeof t == "function" ? B(t, e) : g = e, i(e, o(G, {
             class: "w-2.5 h-2.5"
           }), s), i(e, o(H, {
             get class() {
-              return f("w-2.5 h-2.5 opacity-50 transition-transform", m() && "rotate-180");
+              return p("w-2.5 h-2.5 opacity-50 transition-transform", m() && "rotate-180");
             }
-          }), null), h(() => x(e, f("flex items-center gap-1 px-1.5 h-5 rounded text-[10px]", "text-muted-foreground/70 hover:text-foreground hover:bg-muted/50", "transition-colors cursor-pointer"))), e;
-        })(), o(p, {
+          }), null), h(() => x(e, p("flex items-center gap-1 px-1.5 h-5 rounded-xs text-caption", "text-[var(--floe-ink-quiet)] hover:text-foreground hover:bg-[var(--floe-state-hover)]", "transition-colors cursor-pointer"))), e;
+        })(), o(f, {
           get when() {
             return m();
           },
@@ -67,28 +67,28 @@ function ue($) {
                   return e.$$click = M, e;
                 })(), (() => {
                   var e = V(), s = e.firstChild;
-                  return i(s, o(F, {
+                  return i(s, o(N, {
                     get each() {
                       return Array.from(b.widgets().values());
                     },
                     children: (t) => (() => {
                       var a = Z(), u = a.firstChild;
-                      return a.$$click = (d) => E(d, t.type), i(a, o(p, {
+                      return a.$$click = (c) => E(c, t.type), i(a, o(f, {
                         get when() {
                           return t.icon;
                         },
                         get fallback() {
                           return ee();
                         },
-                        children: (d) => {
-                          const R = d();
+                        children: (c) => {
+                          const R = c();
                           return o(R, {
-                            class: "w-4 h-4 text-muted-foreground"
+                            class: "w-4 h-4 text-[var(--floe-ink-soft)]"
                           });
                         }
                       }), u), i(u, () => t.name), a;
                     })()
-                  }), null), i(s, o(p, {
+                  }), null), i(s, o(f, {
                     get when() {
                       return b.widgets().size === 0;
                     },
@@ -96,8 +96,8 @@ function ue($) {
                       return U();
                     }
                   }), null), h((t) => {
-                    var a = f("fixed z-[9999]", "min-w-[180px] max-h-[300px] overflow-y-auto", "bg-popover border border-border rounded-md shadow-xl", "animate-in fade-in slide-in-from-top-1 duration-150"), u = `${w().top}px`, d = `${Math.max(8, w().left)}px`;
-                    return a !== t.e && x(e, t.e = a), u !== t.t && _(e, "top", t.t = u), d !== t.a && _(e, "left", t.a = d), t;
+                    var a = p("fixed z-[9999]", "min-w-[180px] max-h-[300px] overflow-y-auto", "bg-popover border border-[var(--floe-line)] rounded-panel shadow-[var(--floe-elevation-float-strong)]", "animate-in fade-in slide-in-from-top-1 duration-[var(--floe-duration-fast)]"), u = `${w().top}px`, c = `${Math.max(8, w().left)}px`;
+                    return a !== t.e && x(e, t.e = a), u !== t.t && k(e, "top", t.t = u), c !== t.a && k(e, "left", t.a = c), t;
                   }, {
                     e: void 0,
                     t: void 0,
@@ -109,25 +109,25 @@ function ue($) {
           }
         })];
       }
-    }), S), i(r, o(p, {
+    }), S), i(r, o(f, {
       get when() {
         return y();
       },
       get children() {
         var e = X(), s = e.firstChild;
         return e.$$click = () => {
-          const t = c.activeLayout();
+          const t = d.activeLayout();
           t && C(() => {
-            c.duplicateLayout(t.id, `${t.name} (Copy)`), c.setEditMode(!0);
+            d.duplicateLayout(t.id, `${t.name} (Copy)`), d.setEditMode(!0);
           });
         }, i(e, o(J, {
           class: "w-2.5 h-2.5"
-        }), s), h(() => x(e, f("flex items-center gap-1 px-1.5 h-5 rounded text-[10px]", "text-muted-foreground/70 hover:text-foreground hover:bg-muted/50", "transition-colors cursor-pointer"))), e;
+        }), s), h(() => x(e, p("flex items-center gap-1 px-1.5 h-5 rounded-xs text-caption", "text-[var(--floe-ink-quiet)] hover:text-foreground hover:bg-[var(--floe-state-hover)]", "transition-colors cursor-pointer"))), e;
       }
-    }), null), i(r, () => $.actions, null), h(() => x(r, f("deck-topbar flex items-center gap-1.5 h-7 px-2", "bg-gradient-to-b from-background to-background/95", "border-b border-border/30", $.class))), r;
+    }), null), i(r, () => $.actions, null), h(() => x(r, p("deck-topbar flex items-center gap-1.5 h-7 px-2", "bg-gradient-to-b from-background to-background/95", "border-b border-[var(--floe-line-quiet)]", $.class))), r;
   })();
 }
-z(["click"]);
+q(["click"]);
 export {
   ue as DeckTopBar
 };

package/dist/components/deck/DropZonePreview.js

@@ -1,25 +1,25 @@
-import { effect as g, className as c, setStyleProperty as n, template as f } from "solid-js/web";
+import { effect as f, className as g, setStyleProperty as a, template as c } from "solid-js/web";
 import { cn as m } from "../../utils/cn.js";
 import { positionToGridArea as b } from "../../utils/gridLayout.js";
-var u = /* @__PURE__ */ f('<div data-floe-deck-drop-preview=true><div class="absolute inset-0 rounded-md">');
+var u = /* @__PURE__ */ c('<div data-floe-deck-drop-preview=true><div class="absolute inset-0 rounded-md">');
 function w(i) {
   const v = () => b(i.position), o = () => i.isValid !== !1 ? "--info" : "--error";
   return (() => {
     var e = u(), l = e.firstChild;
-    return g((r) => {
-      var a = m(
+    return f((r) => {
+      var n = m(
         "pointer-events-none rounded-md relative z-20",
         "border-2 border-dashed",
         i.isValid !== !1 ? "border-info/60 bg-info/10 ring-1 ring-inset ring-info/25" : "border-error/60 bg-error/10 ring-1 ring-inset ring-error/25",
         // Subtle animation
-        "animate-in fade-in duration-150"
+        "animate-in fade-in duration-[var(--floe-duration-fast)]"
       ), t = v(), d = `0 4px 16px color-mix(in srgb, var(${o()}) 18%, transparent)`, s = `linear-gradient(
             135deg,
             color-mix(in srgb, var(${o()}) 18%, transparent) 0%,
             transparent 55%,
             color-mix(in srgb, var(${o()}) 10%, var(--card)) 100%
           )`;
-      return a !== r.e && c(e, r.e = a), t !== r.t && n(e, "grid-area", r.t = t), d !== r.a && n(e, "box-shadow", r.a = d), s !== r.o && n(l, "background", r.o = s), r;
+      return n !== r.e && g(e, r.e = n), t !== r.t && a(e, "grid-area", r.t = t), d !== r.a && a(e, "box-shadow", r.a = d), s !== r.o && a(l, "background", r.o = s), r;
     }, {
       e: void 0,
       t: void 0,

package/dist/components/deck/LayoutSelector.js

@@ -1,112 +1,112 @@
-import { insert as o, createComponent as a, memo as j, effect as w, className as C, template as s, delegateEvents as q } from "solid-js/web";
-import { createSignal as R, Show as g, For as G } from "solid-js";
-import { cn as b } from "../../utils/cn.js";
+import { insert as l, createComponent as i, memo as F, effect as w, className as C, template as s, delegateEvents as j } from "solid-js/web";
+import { createSignal as R, Show as m, For as G } from "solid-js";
+import { cn as k } from "../../utils/cn.js";
 import { useDeck as H } from "../../context/DeckContext.js";
-import { deferNonBlocking as v } from "../../utils/defer.js";
+import { deferNonBlocking as h } from "../../utils/defer.js";
 import { ChevronDown as J, Check as K, Copy as M, Pencil as Q, Trash as U } from "../icons/index.js";
-var W = /* @__PURE__ */ s('<div class="absolute top-full left-0 mt-1 w-48 bg-popover border border-border/60 rounded shadow-lg z-50 overflow-hidden"><div class="max-h-48 overflow-y-auto py-0.5"></div><div class="border-t border-border/40 px-1.5 py-1"><button class="w-full text-left text-[10px] text-primary/80 hover:text-primary cursor-pointer">+ New Layout'), X = /* @__PURE__ */ s('<div class="fixed inset-0 z-40">'), Y = /* @__PURE__ */ s('<div><button><span class="truncate max-w-[80px] text-muted-foreground/80 font-medium">'), Z = /* @__PURE__ */ s('<span class="flex-1 text-[10px] truncate text-foreground/80">'), ee = /* @__PURE__ */ s('<button class="p-0.5 rounded hover:bg-background transition-colors cursor-pointer"title=Rename>'), te = /* @__PURE__ */ s('<button class="p-0.5 rounded hover:bg-destructive/10 transition-colors cursor-pointer"title=Delete>'), re = /* @__PURE__ */ s('<div class="flex items-center gap-0 opacity-0 group-hover:opacity-100 transition-opacity"><button class="p-0.5 rounded hover:bg-background transition-colors cursor-pointer"title=Duplicate>'), ne = /* @__PURE__ */ s('<div><div class="w-3 h-3 flex-shrink-0">'), oe = /* @__PURE__ */ s('<input type=text class="flex-1 text-[10px] bg-background border border-border rounded px-1 py-0.5"autofocus>'), le = /* @__PURE__ */ s('<span class="ml-1 text-[9px] text-muted-foreground/60">(preset)');
-function pe(N) {
-  const u = H(), [$, d] = R(!1), [I, _] = R(null), [P, h] = R(""), L = () => u.activeLayout(), D = () => u.layouts(), T = (e) => {
-    d(!1), v(() => u.setActiveLayout(e));
-  }, z = (e, r) => {
+var W = /* @__PURE__ */ s('<div class="absolute top-full left-0 mt-1 w-48 bg-popover border border-[var(--floe-line)] rounded-xs shadow-[var(--floe-elevation-float)] z-50 overflow-hidden"><div class="max-h-48 overflow-y-auto py-0.5"></div><div class="border-t border-[var(--floe-line)] px-1.5 py-1"><button class="w-full text-left text-caption text-primary/80 hover:text-[var(--floe-accent-ink)] cursor-pointer">+ New Layout'), X = /* @__PURE__ */ s('<div class="fixed inset-0 z-40">'), Y = /* @__PURE__ */ s('<div><button><span class="truncate max-w-[80px] text-[var(--floe-ink-quiet)] font-medium">'), Z = /* @__PURE__ */ s('<span class="flex-1 text-caption truncate text-foreground/80">'), ee = /* @__PURE__ */ s('<button class="p-0.5 rounded-xs hover:bg-background transition-colors cursor-pointer"title=Rename>'), te = /* @__PURE__ */ s('<button class="p-0.5 rounded-xs hover:bg-destructive/10 transition-colors cursor-pointer"title=Delete>'), re = /* @__PURE__ */ s('<div class="flex items-center gap-0 opacity-0 group-hover:opacity-100 transition-opacity"><button class="p-0.5 rounded-xs hover:bg-background transition-colors cursor-pointer"title=Duplicate>'), ne = /* @__PURE__ */ s('<div><div class="w-3 h-3 flex-shrink-0">'), le = /* @__PURE__ */ s('<input type=text class="flex-1 text-caption bg-background border border-[var(--floe-line)] rounded-xs px-1 py-0.5"autofocus>'), oe = /* @__PURE__ */ s('<span class="ml-1 text-[var(--floe-ink-quiet)]">(preset)');
+function pe(E) {
+  const u = H(), [$, d] = R(!1), [N, b] = R(null), [P, g] = R(""), I = () => u.activeLayout(), D = () => u.layouts(), L = (e) => {
+    d(!1), h(() => u.setActiveLayout(e));
+  }, T = (e, r) => {
     r.stopPropagation();
     const p = D().find((n) => n.id === e);
     if (p) {
-      d(!1), v(() => u.duplicateLayout(e, `${p.name} (Copy)`));
+      d(!1), h(() => u.duplicateLayout(e, `${p.name} (Copy)`));
       return;
     }
     d(!1);
-  }, A = (e, r) => {
-    r.stopPropagation(), d(!1), v(() => u.deleteLayout(e));
-  }, O = (e, r, p) => {
-    p.stopPropagation(), _(e), h(r);
+  }, z = (e, r) => {
+    r.stopPropagation(), d(!1), h(() => u.deleteLayout(e));
+  }, A = (e, r, p) => {
+    p.stopPropagation(), b(e), g(r);
   }, S = (e) => {
     const r = P().trim();
-    _(null), h(""), r && v(() => u.renameLayout(e, r));
-  }, V = () => {
-    _(null), h("");
+    b(null), g(""), r && h(() => u.renameLayout(e, r));
+  }, O = () => {
+    b(null), g("");
   };
   return (() => {
     var e = Y(), r = e.firstChild, p = r.firstChild;
-    return r.$$click = () => d(!$()), o(p, () => L()?.name ?? "Layout"), o(r, a(J, {
+    return r.$$click = () => d(!$()), l(p, () => I()?.name ?? "Layout"), l(r, i(J, {
       get class() {
-        return b("w-2.5 h-2.5 text-muted-foreground/50 transition-transform", $() && "rotate-180");
+        return k("w-2.5 h-2.5 text-[var(--floe-ink-ghost)] transition-transform", $() && "rotate-180");
       }
-    }), null), o(e, a(g, {
+    }), null), l(e, i(m, {
       get when() {
         return $();
       },
       get children() {
         return [(() => {
-          var n = W(), f = n.firstChild, x = f.nextSibling, B = x.firstChild;
-          return o(f, a(G, {
+          var n = W(), f = n.firstChild, x = f.nextSibling, V = x.firstChild;
+          return l(f, i(G, {
             get each() {
               return D();
             },
-            children: (l) => {
-              const E = () => l.id === u.activeLayoutId(), k = () => I() === l.id;
+            children: (o) => {
+              const q = () => o.id === u.activeLayoutId(), _ = () => N() === o.id;
               return (() => {
-                var m = ne(), F = m.firstChild;
-                return m.$$click = () => !k() && T(l.id), o(F, a(g, {
+                var v = ne(), B = v.firstChild;
+                return v.$$click = () => !_() && L(o.id), l(B, i(m, {
                   get when() {
-                    return E();
+                    return q();
                   },
                   get children() {
-                    return a(K, {
-                      class: "w-3 h-3 text-primary"
+                    return i(K, {
+                      class: "w-3 h-3 text-[var(--floe-accent-ink)]"
                     });
                   }
-                })), o(m, a(g, {
+                })), l(v, i(m, {
                   get when() {
-                    return !k();
+                    return !_();
                   },
                   get fallback() {
                     return (() => {
-                      var t = oe();
-                      return t.$$click = (i) => i.stopPropagation(), t.addEventListener("blur", () => S(l.id)), t.$$keydown = (i) => {
-                        i.key === "Enter" && S(l.id), i.key === "Escape" && V();
-                      }, t.$$input = (i) => h(i.currentTarget.value), w(() => t.value = P()), t;
+                      var t = le();
+                      return t.$$click = (a) => a.stopPropagation(), t.addEventListener("blur", () => S(o.id)), t.$$keydown = (a) => {
+                        a.key === "Enter" && S(o.id), a.key === "Escape" && O();
+                      }, t.$$input = (a) => g(a.currentTarget.value), w(() => t.value = P()), t;
                     })();
                   },
                   get children() {
                     var t = Z();
-                    return o(t, () => l.name, null), o(t, (() => {
-                      var i = j(() => !!l.isPreset);
-                      return () => i() && le();
+                    return l(t, () => o.name, null), l(t, (() => {
+                      var a = F(() => !!o.isPreset);
+                      return () => a() && oe();
                     })(), null), t;
                   }
-                }), null), o(m, a(g, {
+                }), null), l(v, i(m, {
                   get when() {
-                    return !k();
+                    return !_();
                   },
                   get children() {
-                    var t = re(), i = t.firstChild;
-                    return i.$$click = (c) => z(l.id, c), o(i, a(M, {
-                      class: "w-2.5 h-2.5 text-muted-foreground/70"
-                    })), o(t, a(g, {
+                    var t = re(), a = t.firstChild;
+                    return a.$$click = (c) => T(o.id, c), l(a, i(M, {
+                      class: "w-2.5 h-2.5 text-[var(--floe-ink-quiet)]"
+                    })), l(t, i(m, {
                       get when() {
-                        return !l.isPreset;
+                        return !o.isPreset;
                       },
                       get children() {
                         return [(() => {
                           var c = ee();
-                          return c.$$click = (y) => O(l.id, l.name, y), o(c, a(Q, {
-                            class: "w-2.5 h-2.5 text-muted-foreground/70"
+                          return c.$$click = (y) => A(o.id, o.name, y), l(c, i(Q, {
+                            class: "w-2.5 h-2.5 text-[var(--floe-ink-quiet)]"
                           })), c;
                         })(), (() => {
                           var c = te();
-                          return c.$$click = (y) => A(l.id, y), o(c, a(U, {
+                          return c.$$click = (y) => z(o.id, y), l(c, i(U, {
                             class: "w-2.5 h-2.5 text-destructive/70"
                           })), c;
                         })()];
                       }
                     }), null), t;
                   }
-                }), null), w(() => C(m, b("flex items-center gap-1.5 px-1.5 py-1 hover:bg-muted/60 transition-colors cursor-pointer group", E() && "bg-muted/60"))), m;
+                }), null), w(() => C(v, k("flex items-center gap-1.5 px-1.5 py-1 hover:bg-[var(--floe-state-press)] transition-colors cursor-pointer group", q() && "bg-[var(--floe-well)]"))), v;
               })();
             }
-          })), B.$$click = () => {
-            d(!1), v(() => u.createLayout("New Layout"));
+          })), V.$$click = () => {
+            d(!1), h(() => u.createLayout("New Layout"));
           }, n;
         })(), (() => {
           var n = X();
@@ -114,7 +114,7 @@ function pe(N) {
         })()];
       }
     }), null), w((n) => {
-      var f = b("relative", N.class), x = b("flex items-center gap-1 px-1.5 h-5 rounded", "hover:bg-muted/50 transition-colors text-[10px] cursor-pointer", $() && "bg-muted/50");
+      var f = k("relative", E.class), x = k("flex items-center gap-1 px-1.5 h-5 rounded-xs", "hover:bg-[var(--floe-state-hover)] transition-colors text-caption cursor-pointer", $() && "bg-[var(--floe-well)]");
       return f !== n.e && C(e, n.e = f), x !== n.t && C(r, n.t = x), n;
     }, {
       e: void 0,
@@ -122,7 +122,7 @@ function pe(N) {
     }), e;
   })();
 }
-q(["click", "input", "keydown"]);
+j(["click", "input", "keydown"]);
 export {
   pe as LayoutSelector
 };