@floegence/floe-webapp-core 0.86.60 → 0.86.62

package/dist/components/deck/WidgetFrame.js

@@ -1,21 +1,21 @@
-import { insert as i, createComponent as r, effect as x, className as b, setAttribute as $, template as a, delegateEvents as y } from "solid-js/web";
+import { insert as i, createComponent as r, effect as x, className as b, setAttribute as y, template as c, delegateEvents as $ } from "solid-js/web";
 import { Show as l } from "solid-js";
 import { cn as _ } from "../../utils/cn.js";
-import { useDeck as D } from "../../context/DeckContext.js";
-import { useLayout as k } from "../../context/LayoutContext.js";
+import { useDeck as k } from "../../context/DeckContext.js";
+import { useLayout as D } from "../../context/LayoutContext.js";
 import { GripVertical as C, X as W } from "../icons/index.js";
-import { WidgetResizeHandle as d } from "./WidgetResizeHandle.js";
+import { WidgetResizeHandle as g } from "./WidgetResizeHandle.js";
 import { WidgetTypeSwitcher as R } from "./WidgetTypeSwitcher.js";
-var S = /* @__PURE__ */ a('<div class="text-muted-foreground/50 pointer-events-none">'), z = /* @__PURE__ */ a('<div class="opacity-0 group-hover:opacity-100 transition-opacity">'), A = /* @__PURE__ */ a('<button class="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-all cursor-pointer"title="Remove widget">'), E = /* @__PURE__ */ a('<div class="h-full flex flex-col"><div><span class="flex-1 text-xs font-medium text-foreground truncate"></span></div><div class="flex-1 min-h-0 overflow-auto">');
+var S = /* @__PURE__ */ c('<div class="text-[var(--floe-ink-ghost)] pointer-events-none">'), z = /* @__PURE__ */ c('<div class="opacity-0 group-hover:opacity-100 transition-opacity">'), A = /* @__PURE__ */ c('<button class="opacity-0 group-hover:opacity-100 p-0.5 rounded-xs hover:bg-destructive/10 text-[var(--floe-ink-soft)] hover:text-destructive transition-[opacity,background-color,color] cursor-pointer"title="Remove widget">'), E = /* @__PURE__ */ c('<div class="h-full flex flex-col"><div><span class="flex-1 text-xs font-medium text-foreground truncate"></span></div><div class="flex-1 min-h-0 overflow-auto">');
 function T(e) {
-  const m = D(), s = k(), v = () => e.widget.title ?? e.widgetDef?.name ?? e.widget.type, g = () => !s.isMobile(), f = (o) => {
-    o.stopPropagation(), o.preventDefault(), m.removeWidget(e.widget.id);
+  const s = k(), v = D(), m = () => e.widget.title ?? e.widgetDef?.name ?? e.widget.type, d = () => !v.isMobile(), f = (o) => {
+    o.stopPropagation(), o.preventDefault(), s.removeWidget(e.widget.id);
   };
   return (() => {
-    var o = E(), n = o.firstChild, c = n.firstChild, h = n.nextSibling;
+    var o = E(), n = o.firstChild, u = n.firstChild, h = n.nextSibling;
     return i(n, r(l, {
       get when() {
-        return g();
+        return d();
       },
       get children() {
         var t = S();
@@ -23,19 +23,19 @@ function T(e) {
           class: "w-3.5 h-3.5"
         })), t;
       }
-    }), c), i(n, r(l, {
+    }), u), i(n, r(l, {
       get when() {
         return e.widgetDef?.icon;
       },
       children: (t) => {
-        const u = t();
-        return r(u, {
-          class: "w-3.5 h-3.5 text-muted-foreground"
+        const a = t();
+        return r(a, {
+          class: "w-3.5 h-3.5 text-[var(--floe-ink-soft)]"
         });
       }
-    }), c), i(c, v), i(n, r(l, {
+    }), u), i(u, m), i(n, r(l, {
       get when() {
-        return g();
+        return d();
       },
       get children() {
         var t = z();
@@ -47,7 +47,7 @@ function T(e) {
       }
     }), null), i(n, r(l, {
       get when() {
-        return g();
+        return d();
       },
       get children() {
         var t = A();
@@ -57,45 +57,45 @@ function T(e) {
       }
     }), null), i(h, () => e.children), i(o, r(l, {
       get when() {
-        return g();
+        return d();
       },
       get children() {
-        return [r(d, {
+        return [r(g, {
           get widget() {
             return e.widget;
           },
           edge: "e"
-        }), r(d, {
+        }), r(g, {
           get widget() {
             return e.widget;
           },
           edge: "s"
-        }), r(d, {
+        }), r(g, {
           get widget() {
             return e.widget;
           },
           edge: "se"
-        }), r(d, {
+        }), r(g, {
           get widget() {
             return e.widget;
           },
           edge: "w"
-        }), r(d, {
+        }), r(g, {
           get widget() {
             return e.widget;
           },
           edge: "n"
-        }), r(d, {
+        }), r(g, {
           get widget() {
             return e.widget;
           },
           edge: "sw"
-        }), r(d, {
+        }), r(g, {
           get widget() {
             return e.widget;
           },
           edge: "ne"
-        }), r(d, {
+        }), r(g, {
           get widget() {
             return e.widget;
           },
@@ -103,15 +103,15 @@ function T(e) {
         })];
       }
     }), null), x((t) => {
-      var u = _("widget-header flex items-center gap-1 px-2 py-1.5 border-b border-border bg-muted/30", "select-none", g() && !e.isDragging && "cursor-move", e.isDragging && "cursor-grabbing"), w = g() ? e.widget.id : void 0;
-      return u !== t.e && b(n, t.e = u), w !== t.t && $(n, "data-widget-drag-handle", t.t = w), t;
+      var a = _("widget-header flex items-center gap-1 px-2 py-1.5 border-b border-[var(--floe-line)] bg-[var(--floe-well)]", "select-none", d() && !e.isDragging && "cursor-move", e.isDragging && "cursor-grabbing"), w = d() ? e.widget.id : void 0;
+      return a !== t.e && b(n, t.e = a), w !== t.t && y(n, "data-widget-drag-handle", t.t = w), t;
     }, {
       e: void 0,
       t: void 0
     }), o;
   })();
 }
-y(["click"]);
+$(["click"]);
 export {
   T as WidgetFrame
 };

package/dist/components/deck/WidgetPalette.js

@@ -1,14 +1,14 @@
-import { createComponent as e, insert as r, effect as O, className as P, template as l, delegateEvents as j } from "solid-js/web";
-import { createSignal as k, Show as n, For as y } from "solid-js";
-import { cn as f } from "../../utils/cn.js";
+import { createComponent as e, insert as r, effect as O, className as P, template as n, delegateEvents as j } from "solid-js/web";
+import { createSignal as _, Show as l, For as y } from "solid-js";
+import { cn as h } from "../../utils/cn.js";
 import { useDeck as D } from "../../context/DeckContext.js";
 import { useWidgetRegistry as F } from "../../context/WidgetRegistry.js";
 import { Plus as T, X, ChevronRight as q } from "../icons/index.js";
 import { Button as G } from "../ui/Button.js";
 import { deferNonBlocking as H } from "../../utils/defer.js";
-var J = /* @__PURE__ */ l('<div class="text-center text-muted-foreground text-sm py-8">No widgets registered'), K = /* @__PURE__ */ l('<div><div class="flex items-center justify-between p-3 border-b border-border"><h2 class="text-sm font-semibold">Add Widget</h2><button class="p-1 rounded hover:bg-muted transition-colors cursor-pointer"></button></div><div class="p-2 overflow-y-auto h-[calc(100%-48px)]">'), L = /* @__PURE__ */ l('<div class="fixed inset-0 bg-black/20 z-40">'), Q = /* @__PURE__ */ l('<div class="ml-4 mt-1 space-y-1">'), U = /* @__PURE__ */ l('<div class=mb-2><button class="w-full flex items-center gap-2 p-2 rounded hover:bg-muted transition-colors text-left cursor-pointer"><span class="text-sm font-medium"></span><span class="ml-auto text-xs text-muted-foreground">'), V = /* @__PURE__ */ l('<button class="w-full flex items-center gap-2 p-2 rounded hover:bg-muted transition-colors text-left cursor-pointer"><span class=text-sm>'), Y = /* @__PURE__ */ l('<div class="w-4 h-4">');
+var J = /* @__PURE__ */ n('<div class="text-center text-[var(--floe-ink-soft)] text-sm py-8">No widgets registered'), K = /* @__PURE__ */ n('<div><div class="flex items-center justify-between p-3 border-b border-[var(--floe-line)]"><h2 class="text-sm font-semibold">Add Widget</h2><button class="p-1 rounded-xs hover:bg-[var(--floe-state-hover)] transition-colors cursor-pointer"></button></div><div class="p-2 overflow-y-auto h-[calc(100%-48px)]">'), L = /* @__PURE__ */ n('<div class="fixed inset-0 bg-black/20 z-40">'), Q = /* @__PURE__ */ n('<div class="ml-4 mt-1 space-y-1">'), U = /* @__PURE__ */ n('<div class=mb-2><button class="w-full flex items-center gap-2 p-2 rounded-xs hover:bg-[var(--floe-state-hover)] transition-colors text-left cursor-pointer"><span class="text-sm font-medium"></span><span class="ml-auto text-xs text-[var(--floe-ink-soft)]">'), V = /* @__PURE__ */ n('<button class="w-full flex items-center gap-2 p-2 rounded-xs hover:bg-[var(--floe-state-hover)] transition-colors text-left cursor-pointer"><span class=text-sm>'), Y = /* @__PURE__ */ n('<div class="w-4 h-4">');
 function ie(C) {
-  const p = D(), b = F(), [d, s] = k(!1), [W, z] = k(null), S = [{
+  const p = D(), v = F(), [c, s] = _(!1), [W, z] = _(null), S = [{
     key: "metrics",
     label: "Metrics"
   }, {
@@ -22,21 +22,21 @@ function ie(C) {
   }, B = (t) => {
     z((o) => o === t ? null : t);
   };
-  return e(n, {
+  return e(l, {
     get when() {
       return p.editMode();
     },
     get children() {
-      return [e(n, {
+      return [e(l, {
         get when() {
-          return !d();
+          return !c();
         },
         get children() {
           return e(G, {
             variant: "outline",
             size: "sm",
             get class() {
-              return f("fixed bottom-4 right-4 z-50 shadow-lg", C.class);
+              return h("fixed bottom-4 right-4 z-50 shadow-[var(--floe-elevation-float)]", C.class);
             },
             onClick: () => s(!0),
             get children() {
@@ -47,38 +47,38 @@ function ie(C) {
           });
         }
       }), (() => {
-        var t = K(), o = t.firstChild, E = o.firstChild, x = E.nextSibling, $ = o.nextSibling;
+        var t = K(), o = t.firstChild, E = o.firstChild, x = E.nextSibling, b = o.nextSibling;
         return x.$$click = () => s(!1), r(x, e(X, {
           class: "w-4 h-4"
-        })), r($, e(y, {
+        })), r(b, e(y, {
           each: S,
           children: (i) => {
-            const c = () => b.getWidgetsByCategory(i.key), v = () => W() === i.key, N = () => c().length > 0;
-            return e(n, {
+            const d = () => v.getWidgetsByCategory(i.key), $ = () => W() === i.key, N = () => d().length > 0;
+            return e(l, {
               get when() {
                 return N();
               },
               get children() {
-                var u = U(), m = u.firstChild, g = m.firstChild, R = g.nextSibling;
-                return m.$$click = () => B(i.key), r(m, e(q, {
+                var f = U(), u = f.firstChild, g = u.firstChild, R = g.nextSibling;
+                return u.$$click = () => B(i.key), r(u, e(q, {
                   get class() {
-                    return f("w-4 h-4 text-muted-foreground transition-transform", v() && "rotate-90");
+                    return h("w-4 h-4 text-[var(--floe-ink-soft)] transition-transform", $() && "rotate-90");
                   }
-                }), g), r(g, () => i.label), r(R, () => c().length), r(u, e(n, {
+                }), g), r(g, () => i.label), r(R, () => d().length), r(f, e(l, {
                   get when() {
-                    return v();
+                    return $();
                   },
                   get children() {
                     var w = Q();
                     return r(w, e(y, {
                       get each() {
-                        return c();
+                        return d();
                       },
-                      children: (h) => (() => {
-                        var a = V(), _ = a.firstChild;
-                        return a.$$click = () => A(h.type), r(a, e(n, {
+                      children: (m) => (() => {
+                        var a = V(), k = a.firstChild;
+                        return a.$$click = () => A(m.type), r(a, e(l, {
                           get when() {
-                            return h.icon;
+                            return m.icon;
                           },
                           get fallback() {
                             return Y();
@@ -86,28 +86,28 @@ function ie(C) {
                           children: (I) => {
                             const M = I();
                             return e(M, {
-                              class: "w-4 h-4 text-muted-foreground"
+                              class: "w-4 h-4 text-[var(--floe-ink-soft)]"
                             });
                           }
-                        }), _), r(_, () => h.name), a;
+                        }), k), r(k, () => m.name), a;
                       })()
                     })), w;
                   }
-                }), null), u;
+                }), null), f;
               }
             });
           }
-        }), null), r($, e(n, {
+        }), null), r(b, e(l, {
           get when() {
-            return b.widgets().size === 0;
+            return v.widgets().size === 0;
           },
           get children() {
             return J();
           }
-        }), null), O(() => P(t, f("fixed right-0 top-0 bottom-0 w-72 bg-background border-l border-border shadow-xl z-50", "transform transition-transform duration-200", d() ? "translate-x-0" : "translate-x-full"))), t;
-      })(), e(n, {
+        }), null), O(() => P(t, h("fixed right-0 top-0 bottom-0 w-72 bg-background border-l border-[var(--floe-line)] shadow-[var(--floe-elevation-float-strong)] z-50", "transform transition-transform duration-[var(--floe-duration-base)]", c() ? "translate-x-0" : "translate-x-full"))), t;
+      })(), e(l, {
         get when() {
-          return d();
+          return c();
         },
         get children() {
           var t = L();

package/dist/components/deck/WidgetTypeSwitcher.js

@@ -1,52 +1,52 @@
-import { insert as l, createComponent as o, effect as v, className as x, Portal as E, setStyleProperty as w, template as s, use as R, delegateEvents as T } from "solid-js/web";
-import { createSignal as y, createEffect as W, onCleanup as I, Show as p, For as L } from "solid-js";
-import { cn as m } from "../../utils/cn.js";
+import { insert as l, createComponent as o, effect as h, className as x, Portal as E, setStyleProperty as w, template as a, use as R, delegateEvents as T } from "solid-js/web";
+import { createSignal as y, createEffect as W, onCleanup as I, Show as u, For as L } from "solid-js";
+import { cn as v } from "../../utils/cn.js";
 import { useDeck as N } from "../../context/DeckContext.js";
 import { useWidgetRegistry as z } from "../../context/WidgetRegistry.js";
 import { deferNonBlocking as A } from "../../utils/defer.js";
 import { ArrowRightLeft as B, ChevronDown as M } from "../icons/index.js";
-var O = /* @__PURE__ */ s('<button title="Switch widget type">'), F = /* @__PURE__ */ s('<div class="fixed inset-0 z-[9998]">'), K = /* @__PURE__ */ s('<div class="px-2 py-3 text-xs text-muted-foreground text-center">No other widget types available'), j = /* @__PURE__ */ s('<div><div class=p-1><div class="px-2 py-1.5 text-xs text-muted-foreground font-medium">Switch to'), q = /* @__PURE__ */ s('<button class="w-full flex items-center gap-2 px-2 py-1.5 rounded hover:bg-muted transition-colors text-left cursor-pointer"><span class=text-xs>'), G = /* @__PURE__ */ s('<div class="w-4 h-4">');
-function Z(f) {
-  const $ = N(), b = z(), [c, d] = y(!1), [g, k] = y({
+var O = /* @__PURE__ */ a('<button title="Switch widget type">'), F = /* @__PURE__ */ a('<div class="fixed inset-0 z-[9998]">'), K = /* @__PURE__ */ a('<div class="px-2 py-3 text-xs text-[var(--floe-ink-soft)] text-center">No other widget types available'), j = /* @__PURE__ */ a('<div><div class=p-1><div class="px-2 py-1.5 text-xs text-[var(--floe-ink-soft)] font-medium">Switch to'), q = /* @__PURE__ */ a('<button class="w-full flex items-center gap-2 px-2 py-1.5 rounded-xs hover:bg-[var(--floe-state-hover)] transition-colors text-left cursor-pointer"><span class=text-xs>'), G = /* @__PURE__ */ a('<div class="w-4 h-4">');
+function Z(p) {
+  const $ = N(), k = z(), [c, f] = y(!1), [g, b] = y({
     top: 0,
     left: 0
   });
-  let u;
-  const _ = () => f.widget.type, h = () => Array.from(b.widgets().values()).filter((t) => t.type !== _()), C = (e, t) => {
-    e.stopPropagation(), e.preventDefault(), d(!1);
-    const r = f.widget.id, n = $.changeWidgetType;
+  let d;
+  const _ = () => p.widget.type, m = () => Array.from(k.widgets().values()).filter((t) => t.type !== _()), C = (e, t) => {
+    e.stopPropagation(), e.preventDefault(), f(!1);
+    const r = p.widget.id, n = $.changeWidgetType;
     A(() => n(r, t));
   }, S = (e) => {
-    if (e.stopPropagation(), e.preventDefault(), !c() && u) {
-      const t = u.getBoundingClientRect();
-      k({
+    if (e.stopPropagation(), e.preventDefault(), !c() && d) {
+      const t = d.getBoundingClientRect();
+      b({
         top: t.bottom + 4,
         left: t.right - 160
         // Align right edge
       });
     }
-    d((t) => !t);
+    f((t) => !t);
   }, P = () => {
-    d(!1);
+    f(!1);
   };
   return W(() => {
     if (!c() || typeof document > "u") return;
     const e = (t) => {
-      t.key === "Escape" && d(!1);
+      t.key === "Escape" && f(!1);
     };
     document.addEventListener("keydown", e), I(() => document.removeEventListener("keydown", e));
   }), [(() => {
     var e = O();
     e.$$click = S;
-    var t = u;
-    return typeof t == "function" ? R(t, e) : u = e, l(e, o(B, {
+    var t = d;
+    return typeof t == "function" ? R(t, e) : d = e, l(e, o(B, {
       class: "w-3.5 h-3.5"
     }), null), l(e, o(M, {
       get class() {
-        return m("w-3 h-3 transition-transform", c() && "rotate-180");
+        return v("w-3 h-3 transition-transform", c() && "rotate-180");
       }
-    }), null), v(() => x(e, m("p-0.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground", "transition-colors cursor-pointer pointer-events-auto flex items-center gap-0.5", f.class))), e;
-  })(), o(p, {
+    }), null), h(() => x(e, v("p-0.5 rounded-xs hover:bg-[var(--floe-state-hover)] text-[var(--floe-ink-soft)] hover:text-foreground", "transition-colors cursor-pointer pointer-events-auto flex items-center gap-0.5", p.class))), e;
+  })(), o(u, {
     get when() {
       return c();
     },
@@ -60,11 +60,11 @@ function Z(f) {
             var e = j(), t = e.firstChild;
             return t.firstChild, l(t, o(L, {
               get each() {
-                return h();
+                return m();
               },
               children: (r) => (() => {
-                var n = q(), a = n.firstChild;
-                return n.$$click = (i) => C(i, r.type), l(n, o(p, {
+                var n = q(), s = n.firstChild;
+                return n.$$click = (i) => C(i, r.type), l(n, o(u, {
                   get when() {
                     return r.icon;
                   },
@@ -74,21 +74,21 @@ function Z(f) {
                   children: (i) => {
                     const D = i();
                     return o(D, {
-                      class: "w-4 h-4 text-muted-foreground"
+                      class: "w-4 h-4 text-[var(--floe-ink-soft)]"
                     });
                   }
-                }), a), l(a, () => r.name), n;
+                }), s), l(s, () => r.name), n;
               })()
-            }), null), l(t, o(p, {
+            }), null), l(t, o(u, {
               get when() {
-                return h().length === 0;
+                return m().length === 0;
               },
               get children() {
                 return K();
               }
-            }), null), v((r) => {
-              var n = m("fixed z-[9999]", "min-w-[160px] max-h-[240px] overflow-y-auto", "bg-popover border border-border rounded-md shadow-xl", "animate-in fade-in slide-in-from-top-1 duration-150"), a = `${g().top}px`, i = `${Math.max(8, g().left)}px`;
-              return n !== r.e && x(e, r.e = n), a !== r.t && w(e, "top", r.t = a), i !== r.a && w(e, "left", r.a = i), r;
+            }), null), h((r) => {
+              var n = v("fixed z-[9999]", "min-w-[160px] max-h-[240px] 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)]"), s = `${g().top}px`, i = `${Math.max(8, g().left)}px`;
+              return n !== r.e && x(e, r.e = n), s !== r.t && w(e, "top", r.t = s), i !== r.a && w(e, "left", r.a = i), r;
             }, {
               e: void 0,
               t: void 0,

package/dist/components/file-browser/Breadcrumb.js

@@ -1,5 +1,5 @@
 import { insert as E, createComponent as a, memo as $, effect as R, className as D, template as b, use as H, delegateEvents as P } from "solid-js/web";
-import { createSignal as B, onMount as y, createMemo as I, For as O, Show as k, onCleanup as F } from "solid-js";
+import { createSignal as B, onMount as y, createMemo as _, For as O, Show as I, onCleanup as F } from "solid-js";
 import { cn as x } from "../../utils/cn.js";
 import { useFileBrowser as G } from "./FileBrowserContext.js";
 import { ChevronRight as M } from "../icons/index.js";
@@ -23,7 +23,7 @@ function ce(n) {
     const s = new ResizeObserver(e);
     s.observe(o), F(() => s.disconnect());
   });
-  const h = I(() => {
+  const d = _(() => {
     const e = t.currentPath(), s = t.homeLabel();
     if (e === "/" || e === "")
       return [{
@@ -35,21 +35,21 @@ function ce(n) {
       path: "/"
     }];
     let g = "";
-    for (const f of l)
-      g += "/" + f, i.push({
-        name: f,
+    for (const m of l)
+      g += "/" + m, i.push({
+        name: m,
         path: g
       });
     return i;
-  }), m = I(() => {
-    const e = h(), s = r();
+  }), f = _(() => {
+    const e = d(), s = r();
     if (s < U || e.length <= 2)
       return {
         collapsed: [],
         visible: e,
         shouldCollapse: !1
       };
-    const l = e.map((d) => V(d.name)), i = l[0], g = l[e.length - 1], f = p, L = e.length > 1 ? p : 0, C = i + g + f + L;
+    const l = e.map((h) => V(h.name)), i = l[0], g = l[e.length - 1], m = p, L = e.length > 1 ? p : 0, C = i + g + m + L;
     if (C > s && e.length > 2)
       return {
         collapsed: e.slice(1, -1),
@@ -59,18 +59,18 @@ function ce(n) {
     const u = e.slice(1, -1), v = [];
     let S = s - C;
     const A = u.length > 0 ? J + p : 0;
-    for (let d = u.length - 1; d >= 0; d--) {
-      const _ = l[d + 1] + p, N = d > 0 ? A : 0;
-      if (S - N >= _)
-        v.unshift(u[d]), S -= _;
+    for (let h = u.length - 1; h >= 0; h--) {
+      const w = l[h + 1] + p, N = h > 0 ? A : 0;
+      if (S - N >= w)
+        v.unshift(u[h]), S -= w;
       else
         break;
     }
-    const w = u.slice(0, u.length - v.length);
+    const k = u.slice(0, u.length - v.length);
     return {
-      collapsed: w,
+      collapsed: k,
       visible: [e[0], ...v, e[e.length - 1]],
-      shouldCollapse: w.length > 0
+      shouldCollapse: k.length > 0
     };
   }), W = (e) => {
     t.setCurrentPath(e.path);
@@ -79,35 +79,35 @@ function ce(n) {
     var e = X(), s = o;
     return typeof s == "function" ? H(s, e) : o = e, E(e, a(O, {
       get each() {
-        return m().visible;
+        return f().visible;
       },
-      children: (l, i) => [a(k, {
+      children: (l, i) => [a(I, {
         get when() {
           return i() > 0;
         },
         get children() {
           return a(M, {
-            class: "w-3 h-3 text-muted-foreground/50 flex-shrink-0"
+            class: "w-3 h-3 text-[var(--floe-ink-ghost)] flex-shrink-0"
           });
         }
-      }), a(k, {
+      }), a(I, {
         get when() {
-          return $(() => !!m().shouldCollapse)() && i() === 1;
+          return $(() => !!f().shouldCollapse)() && i() === 1;
         },
         get children() {
           return [a(Y, {
             get segments() {
-              return m().collapsed;
+              return f().collapsed;
             },
             onSelect: W
           }), a(M, {
-            class: "w-3 h-3 text-muted-foreground/50 flex-shrink-0"
+            class: "w-3 h-3 text-[var(--floe-ink-ghost)] flex-shrink-0"
           })];
         }
       }), a(Z, {
         segment: l,
         get isLast() {
-          return i() === m().visible.length - 1;
+          return i() === f().visible.length - 1;
         },
         onClick: () => W(l)
       })]
@@ -124,14 +124,14 @@ function Y(n) {
       return j();
     },
     get triggerClass() {
-      return x("inline-flex items-center text-xs px-1.5 py-0.5 rounded flex-shrink-0", "transition-all duration-100", "text-muted-foreground hover:text-foreground hover:bg-muted/50");
+      return x("inline-flex items-center text-xs px-1.5 py-0.5 rounded-xs flex-shrink-0", "transition-colors duration-[var(--floe-duration-fast)]", "text-[var(--floe-ink-soft)] hover:text-foreground hover:bg-[var(--floe-state-hover)]");
     },
     triggerAriaLabel: "Show hidden path segments",
     get items() {
       return t();
     },
     onSelect: (r) => {
-      const c = n.segments.find((h) => h.path === r);
+      const c = n.segments.find((d) => d.path === r);
       c && n.onSelect(c);
     },
     align: "start"
@@ -141,8 +141,8 @@ function Z(n) {
   return (() => {
     var t = q(), o = t.firstChild;
     return t.$$click = () => n.onClick(), E(o, () => n.segment.name), R((r) => {
-      var c = n.isLast, h = x("text-xs px-1.5 py-0.5 rounded cursor-pointer flex-shrink-0", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", n.isLast ? "font-medium text-foreground cursor-default" : "text-muted-foreground hover:text-foreground hover:bg-muted/50");
-      return c !== r.e && (t.disabled = r.e = c), h !== r.t && D(t, r.t = h), r;
+      var c = n.isLast, d = x("text-xs px-1.5 py-0.5 rounded-xs cursor-pointer flex-shrink-0", "transition-colors duration-[var(--floe-duration-fast)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", n.isLast ? "font-medium text-foreground cursor-default" : "text-[var(--floe-ink-soft)] hover:text-foreground hover:bg-[var(--floe-state-hover)]");
+      return c !== r.e && (t.disabled = r.e = c), d !== r.t && D(t, r.t = d), r;
     }, {
       e: void 0,
       t: void 0

package/dist/components/file-browser/DirectoryTree.js

@@ -1,4 +1,4 @@
-import { insert as l, createComponent as s, effect as y, className as h, template as v, setAttribute as G, spread as X, mergeProps as Y, memo as q, setStyleProperty as J, delegateEvents as K } from "solid-js/web";
+import { insert as l, createComponent as s, effect as y, className as h, template as v, setAttribute as q, spread as G, mergeProps as X, memo as Y, setStyleProperty as J, delegateEvents as K } from "solid-js/web";
 import { createMemo as T, For as Q, untrack as W, createSignal as Z, Show as I } from "solid-js";
 import { cn as u } from "../../utils/cn.js";
 import { useFileBrowser as _ } from "./FileBrowserContext.js";
@@ -9,7 +9,7 @@ import { ChevronRight as ie } from "../icons/index.js";
 import { createLongPressContextMenuHandlers as ae } from "./longPressContextMenu.js";
 import { fileBrowserTouchTargetAttrs as oe } from "./touchInteractionGuard.js";
 import { createItemContextMenuEvent as le } from "./contextMenuEvent.js";
-var M = /* @__PURE__ */ v("<div>"), se = /* @__PURE__ */ v("<button type=button>"), ce = /* @__PURE__ */ v('<span class="ml-auto mr-2 text-[10px] text-muted-foreground/60 opacity-0 group-hover:opacity-100 transition-opacity">'), ge = /* @__PURE__ */ v('<div class="flex flex-col"><div><button type=button><span class="relative flex-shrink-0 w-4 h-4"></span><span>'), de = /* @__PURE__ */ v('<span class="flex-shrink-0 w-3.5 h-3.5">');
+var M = /* @__PURE__ */ v("<div>"), se = /* @__PURE__ */ v("<button type=button>"), ce = /* @__PURE__ */ v('<span class="ml-auto mr-2 text-caption text-[var(--floe-ink-quiet)] opacity-0 group-hover:opacity-100 transition-opacity">'), ge = /* @__PURE__ */ v('<div class="flex flex-col"><div><button type=button><span class="relative flex-shrink-0 w-4 h-4"></span><span>'), de = /* @__PURE__ */ v('<span class="flex-shrink-0 w-3.5 h-3.5">');
 function Ie(e) {
   const o = _(), i = ee(), P = () => (e.enableDragDrop ?? !0) && !!i, x = () => e.instanceId ?? "default", g = T(() => o.files().filter((r) => r.type === "folder"));
   return (() => {
@@ -58,11 +58,11 @@ function ue(e) {
     source: "tree"
   });
   let r;
-  const [w, $] = Z(!1), F = () => r === "touch" || r === "pen", E = T(() => e.item.children?.filter((t) => t.type === "folder").length ?? 0), D = () => E() > 0, S = () => {
+  const [w, $] = Z(!1), F = () => r === "touch" || r === "pen", k = T(() => e.item.children?.filter((t) => t.type === "folder").length ?? 0), D = () => k() > 0, E = () => {
     if (!e.enableDragDrop || !e.dragContext) return !1;
     const t = e.dragContext.dragState();
     return t.isDragging ? e.dragContext.canDropOn(t.draggedItems, e.item.path, e.item, e.instanceId) : !1;
-  }, B = () => e.dragContext?.dragState(), L = () => B()?.isDragging ?? !1, k = () => w() && L() && e.enableDragDrop, A = (t) => {
+  }, B = () => e.dragContext?.dragState(), L = () => B()?.isDragging ?? !1, S = () => w() && L() && e.enableDragDrop, A = (t) => {
     r = t.pointerType, g.onPointerDown(t);
   }, N = (t) => {
     r = t.pointerType, g.onPointerMove(t);
@@ -113,14 +113,14 @@ function ue(e) {
         return n.$$click = j, l(n, s(ie, {
           class: "w-3 h-3 opacity-50"
         })), y((c) => {
-          var m = u("flex-shrink-0 w-3.5 h-3.5 flex items-center justify-center cursor-pointer", "transition-transform duration-150", i() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring"), f = i() ? "Collapse folder" : "Expand folder";
-          return m !== c.e && h(n, c.e = m), f !== c.t && G(n, "aria-label", c.t = f), c;
+          var f = u("flex-shrink-0 w-3.5 h-3.5 flex items-center justify-center cursor-pointer", "transition-transform duration-[var(--floe-duration-fast)]", i() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring"), m = i() ? "Collapse folder" : "Expand folder";
+          return f !== c.e && h(n, c.e = f), m !== c.t && q(n, "aria-label", c.t = m), c;
         }, {
           e: void 0,
           t: void 0
         }), n;
       }
-    }), d), X(d, Y(oe, {
+    }), d), G(d, X(oe, {
       onClick: z,
       onContextMenu: V,
       onPointerDown: A,
@@ -150,11 +150,11 @@ function ue(e) {
       },
       get children() {
         var n = ce();
-        return l(n, E), n;
+        return l(n, k), n;
       }
     }), null), l(t, s(I, {
       get when() {
-        return q(() => !!i())() && D();
+        return Y(() => !!i())() && D();
       },
       get children() {
         var n = M();
@@ -174,19 +174,19 @@ function ue(e) {
           get dragContext() {
             return e.dragContext;
           }
-        })), y(() => h(n, u("overflow-hidden transition-all duration-200", i() ? "opacity-100" : "opacity-0"))), n;
+        })), y(() => h(n, u("overflow-hidden transition-opacity duration-[var(--floe-duration-base)]", i() ? "opacity-100" : "opacity-0"))), n;
       }
     }), null), y((n) => {
       var c = u(
         "group flex items-center w-full min-h-[var(--floe-row-height)] py-1 text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]",
-        "transition-all duration-150 ease-out",
+        "transition-[background-color,box-shadow] duration-[var(--floe-duration-fast)] ease-out",
         "hover:bg-sidebar-accent/60",
         P() && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
         // Drop target styling - enhanced visual feedback
-        k() && S() && ["bg-primary/15 outline outline-2 outline-primary/60", "shadow-sm shadow-primary/10"],
-        k() && !S() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
-      ), m = `${8 + e.depth * 12}px`, f = u("truncate", re(e.item));
-      return c !== n.e && h(a, n.e = c), m !== n.t && J(a, "padding-left", n.t = m), f !== n.a && h(C, n.a = f), n;
+        S() && E() && ["bg-primary/15 outline outline-2 outline-primary/60", "shadow-[var(--floe-elevation-raised)]"],
+        S() && !E() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
+      ), f = `${8 + e.depth * 12}px`, m = u("truncate", re(e.item));
+      return c !== n.e && h(a, n.e = c), f !== n.t && J(a, "padding-left", n.t = f), m !== n.a && h(C, n.a = m), n;
     }, {
       e: void 0,
       t: void 0,