@floegence/floe-webapp-core 0.52.0 → 0.52.2

package/dist/components/ui/Dropdown.js

@@ -1,9 +1,9 @@
-import { setAttribute as f, insert as g, createComponent as l, Portal as W, use as O, spread as G, mergeProps as J, effect as F, className as p, template as P, memo as z, delegateEvents as te } from "solid-js/web";
+import { setAttribute as f, insert as g, createComponent as l, Portal as W, use as I, spread as G, mergeProps as J, effect as F, className as O, template as P, memo as z, delegateEvents as te } from "solid-js/web";
 import { createSignal as _, createMemo as ne, createEffect as Q, onCleanup as re, Show as y, Index as V } from "solid-js";
 import { cn as M } from "../../utils/cn.js";
 import { deferNonBlocking as oe } from "../../utils/defer.js";
 import { ChevronDown as ae, Check as ie, ChevronRight as ue } from "../icons/index.js";
-import { focusMenuItem as I, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as de } from "./menuUtils.js";
+import { focusMenuItem as p, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as de } from "./menuUtils.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as X } from "./localInteractionSurface.js";
 import { createFloatingPresence as Y } from "./floatingPresence.js";
 import { useOverlayMask as ce } from "../../hooks/useOverlayMask.js";
@@ -42,9 +42,9 @@ function $e(e) {
     x: -9999,
     y: -9999
   });
-  let b, h;
-  const v = `floe-dropdown-${Me += 1}`, $ = `${v}-menu`, w = ne(() => o.mounted() ? fe({
-    owner: b
+  let v, h;
+  const b = `floe-dropdown-${Me += 1}`, $ = `${b}-menu`, w = ne(() => o.mounted() ? fe({
+    owner: v
   }) : {
     host: null,
     boundaryHost: null,
@@ -56,12 +56,12 @@ function $e(e) {
     boundaryRect: () => ge(w()),
     projectPosition: (r) => me(r, w())
   }, A = () => {
-    d(!1), requestAnimationFrame(() => b?.focus());
+    d(!1), requestAnimationFrame(() => v?.focus());
   };
   ce({
     open: o.mounted,
     root: () => h,
-    containsTarget: (r) => !!(r instanceof Element ? r : document.activeElement)?.closest(`[data-floe-dropdown="${v}"]`),
+    containsTarget: (r) => !!(r instanceof Element ? r : document.activeElement)?.closest(`[data-floe-dropdown="${b}"]`),
     onClose: A,
     onEscapeOutside: A,
     lockBodyScroll: !1,
@@ -73,8 +73,8 @@ function $e(e) {
     escapeKeyPhase: "bubble"
   });
   const C = () => {
-    if (!b || !h) return;
-    const r = b.getBoundingClientRect(), n = h.getBoundingClientRect(), i = se(r, n, e.align ?? "start", m.boundaryRect());
+    if (!v || !h) return;
+    const r = v.getBoundingClientRect(), n = h.getBoundingClientRect(), i = se(r, n, e.align ?? "start", m.boundaryRect());
     k(i);
   };
   Q(() => {
@@ -88,20 +88,22 @@ function $e(e) {
     if (!c()) return;
     const r = (n) => {
       const i = n.target;
-      i && typeof i.closest == "function" && i.closest(`[data-floe-dropdown="${v}"]`) || d(!1);
+      i && typeof i.closest == "function" && i.closest(`[data-floe-dropdown="${b}"]`) || d(!1);
     };
     document.addEventListener("pointerdown", r, !0), requestAnimationFrame(() => {
-      C(), I(h, e.value ? "selected" : "first");
+      C(), p(h, e.value ? "selected" : "first");
     }), re(() => {
       document.removeEventListener("pointerdown", r, !0);
     });
   });
   const j = (r) => {
     const n = e.onSelect;
-    r.keepOpen || d(!1), oe(() => n(r.id));
+    r.keepOpen || (d(!1), v?.focus({
+      preventScroll: !0
+    })), oe(() => n(r.id));
   }, R = (r, n = "first") => {
     e.disabled || (d(r), requestAnimationFrame(() => {
-      C(), I(h, n);
+      C(), p(h, n);
     }));
   }, T = (r) => {
     if (e.disabled) return;
@@ -126,13 +128,13 @@ function $e(e) {
         r.preventDefault(), U(i, t, -1);
         return;
       case "Home":
-        r.preventDefault(), I(i, "first");
+        r.preventDefault(), p(i, "first");
         return;
       case "End":
-        r.preventDefault(), I(i, "last");
+        r.preventDefault(), p(i, "last");
         return;
       case "Tab":
-        r.preventDefault(), d(!1), b?.focus();
+        r.preventDefault(), d(!1), v?.focus();
         return;
       default:
         return;
@@ -140,7 +142,7 @@ function $e(e) {
   };
   return (() => {
     var r = he(), n = r.firstChild;
-    f(r, "data-floe-dropdown", v), n.$$keydown = T, n.$$click = () => {
+    f(r, "data-floe-dropdown", b), n.$$keydown = T, n.$$click = () => {
       if (!e.disabled) {
         if (c()) {
           d(!1);
@@ -149,8 +151,8 @@ function $e(e) {
         R(!0, e.value ? "selected" : "first");
       }
     };
-    var i = b;
-    return typeof i == "function" ? O(i, n) : b = n, f(n, "aria-controls", $), g(n, () => e.trigger), g(r, l(y, {
+    var i = v;
+    return typeof i == "function" ? I(i, n) : v = n, f(n, "aria-controls", $), g(n, () => e.trigger), g(r, l(y, {
       get when() {
         return o.mounted();
       },
@@ -161,7 +163,7 @@ function $e(e) {
           },
           get children() {
             var t = H(), s = h;
-            return typeof s == "function" ? O(s, t) : h = t, f(t, "data-floe-dropdown", v), G(t, J({
+            return typeof s == "function" ? I(s, t) : h = t, f(t, "data-floe-dropdown", b), G(t, J({
               get class() {
                 return M(m.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu");
               },
@@ -205,7 +207,7 @@ function $e(e) {
                     },
                     onSelect: j,
                     onCloseMenu: () => d(!1),
-                    dropdownId: v,
+                    dropdownId: b,
                     portalLayout: m
                   });
                 }
@@ -216,7 +218,7 @@ function $e(e) {
       }
     }), null), F((t) => {
       var s = M("relative inline-block", e.class), u = M("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), x = e.disabled ? -1 : 0, a = c(), S = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, D = e.triggerInputSurface ? "true" : void 0, L = e.triggerInputSurface ? "inset" : void 0;
-      return s !== t.e && p(r, t.e = s), u !== t.t && p(n, t.t = u), x !== t.a && f(n, "tabindex", t.a = x), a !== t.o && f(n, "aria-expanded", t.o = a), S !== t.i && f(n, "aria-label", t.i = S), E !== t.n && f(n, "aria-disabled", t.n = E), D !== t.s && f(n, "data-floe-input-surface", t.s = D), L !== t.h && f(n, "data-floe-surface", t.h = L), t;
+      return s !== t.e && O(r, t.e = s), u !== t.t && O(n, t.t = u), x !== t.a && f(n, "tabindex", t.a = x), a !== t.o && f(n, "aria-expanded", t.o = a), S !== t.i && f(n, "aria-label", t.i = S), E !== t.n && f(n, "aria-disabled", t.n = E), D !== t.s && f(n, "data-floe-input-surface", t.s = D), L !== t.h && f(n, "data-floe-surface", t.h = L), t;
     }, {
       e: void 0,
       t: void 0,
@@ -233,11 +235,11 @@ function ee(e) {
   const [c, d] = _(!1), o = () => e.item.children && e.item.children.length > 0, k = Y({
     open: () => !!(c() && o()),
     exitDurationMs: 100
-  }), [b, h] = _({
+  }), [v, h] = _({
     x: -9999,
     y: -9999
   });
-  let v, $, w, m;
+  let b, $, w, m;
   const A = `floe-dropdown-item-${ke += 1}`;
   Q(() => {
     k.mounted() || h({
@@ -246,8 +248,8 @@ function ee(e) {
     });
   });
   const C = () => {
-    if (!v || !w) return;
-    const n = v.getBoundingClientRect(), i = w.getBoundingClientRect(), t = de(n, i, e.portalLayout.boundaryRect());
+    if (!b || !w) return;
+    const n = b.getBoundingClientRect(), i = w.getBoundingClientRect(), t = de(n, i, e.portalLayout.boundaryRect());
     h(t);
   }, j = () => {
     o() && (clearTimeout(m), m = setTimeout(() => {
@@ -267,7 +269,7 @@ function ee(e) {
     }
   }, q = (n = "first") => {
     o() && (d(!0), requestAnimationFrame(() => {
-      C(), I(w, n);
+      C(), p(w, n);
     }));
   }, r = () => {
     d(!1), requestAnimationFrame(() => $?.focus());
@@ -275,8 +277,8 @@ function ee(e) {
   return (() => {
     var n = ye();
     n.addEventListener("mouseleave", R), n.addEventListener("mouseenter", j);
-    var i = v;
-    return typeof i == "function" ? O(i, n) : v = n, g(n, l(y, {
+    var i = b;
+    return typeof i == "function" ? I(i, n) : b = n, g(n, l(y, {
       get when() {
         return e.item.content;
       },
@@ -284,7 +286,7 @@ function ee(e) {
         var t = H();
         return t.$$click = T, g(t, e.item.content), F((s) => {
           var u = M("w-full px-2 py-1.5", e.item.tone === "danger" && "text-destructive", e.item.disabled && "opacity-50 pointer-events-none"), x = e.item.tone ?? "default";
-          return u !== s.e && p(t, s.e = u), x !== s.t && f(t, "data-tone", s.t = x), s;
+          return u !== s.e && O(t, s.e = u), x !== s.t && f(t, "data-tone", s.t = x), s;
         }, {
           e: void 0,
           t: void 0
@@ -300,7 +302,7 @@ function ee(e) {
           e.item.disabled || o() && ((a.key === "ArrowRight" || a.key === "Enter" || a.key === " ") && (a.preventDefault(), q("first")), a.key === "ArrowLeft" && (a.preventDefault(), r()));
         }, t.$$click = T;
         var x = $;
-        return typeof x == "function" ? O(x, t) : $ = t, f(t, "id", A), g(s, l(y, {
+        return typeof x == "function" ? I(x, t) : $ = t, f(t, "id", A), g(s, l(y, {
           get when() {
             return z(() => !!e.selected)() && !o();
           },
@@ -329,7 +331,7 @@ function ee(e) {
           }
         }), null), F((a) => {
           var S = M("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.tone === "danger" && "text-destructive", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), E = e.item.disabled, D = o() ? "menu" : void 0, L = o() ? c() : void 0, K = e.selected && !o() ? "true" : void 0, N = e.item.tone ?? "default";
-          return S !== a.e && p(t, a.e = S), E !== a.t && (t.disabled = a.t = E), D !== a.a && f(t, "aria-haspopup", a.a = D), L !== a.o && f(t, "aria-expanded", a.o = L), K !== a.i && f(t, "data-floe-selected", a.i = K), N !== a.n && f(t, "data-tone", a.n = N), a;
+          return S !== a.e && O(t, a.e = S), E !== a.t && (t.disabled = a.t = E), D !== a.a && f(t, "aria-haspopup", a.a = D), L !== a.o && f(t, "aria-expanded", a.o = L), K !== a.i && f(t, "data-floe-selected", a.i = K), N !== a.n && f(t, "data-tone", a.n = N), a;
         }, {
           e: void 0,
           t: void 0,
@@ -350,7 +352,7 @@ function ee(e) {
           },
           get children() {
             var t = H(), s = w;
-            return typeof s == "function" ? O(s, t) : w = t, G(t, J({
+            return typeof s == "function" ? I(s, t) : w = t, G(t, J({
               get class() {
                 return M(e.portalLayout.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu floe-floating-submenu");
               },
@@ -368,8 +370,8 @@ function ee(e) {
             }), {
               get style() {
                 return {
-                  left: `${e.portalLayout.projectPosition(b()).x}px`,
-                  top: `${e.portalLayout.projectPosition(b()).y}px`
+                  left: `${e.portalLayout.projectPosition(v()).x}px`,
+                  top: `${e.portalLayout.projectPosition(v()).y}px`
                 };
               },
               role: "menu",
@@ -434,7 +436,7 @@ function Fe(e) {
     get trigger() {
       return [(() => {
         var o = Se();
-        return g(o, () => c()?.label ?? e.placeholder ?? "Select..."), F(() => p(o, M("truncate", !c() && "text-muted-foreground"))), o;
+        return g(o, () => c()?.label ?? e.placeholder ?? "Select..."), F(() => O(o, M("truncate", !c() && "text-muted-foreground"))), o;
       })(), l(ae, {
         class: "w-3.5 h-3.5 text-muted-foreground"
       })];

package/dist/styles/themes/classicSemanticTokens.js

@@ -1,3 +1,4 @@
+import { LIGHT_WINDOW_TOKENS as n, DARK_WINDOW_TOKENS as i } from "./windowTokens.js";
 function a(h) {
   const l = {}, c = (r, e = /* @__PURE__ */ new Set()) => {
     const o = h[r];
@@ -9,7 +10,8 @@ function a(h) {
     l[r] = c(r);
   return Object.freeze(l);
 }
-const n = {
+const t = {
+  ...n,
   "--background": "hsl(34 24% 94%)",
   "--foreground": "hsl(214 26% 17%)",
   "--primary": "hsl(214 26% 17%)",
@@ -73,7 +75,8 @@ const n = {
   "--selection-code-bg": "hsl(212 100% 67%)",
   "--selection-code-fg": "hsl(220 20% 8%)",
   "--glow": "hsl(214 26% 17%)"
-}, i = {
+}, d = {
+  ...i,
   "--background": "hsl(222 30% 8%)",
   "--foreground": "hsl(210 20% 98%)",
   "--primary": "hsl(210 20% 98%)",
@@ -137,8 +140,8 @@ const n = {
   "--selection-code-bg": "hsl(212 100% 67%)",
   "--selection-code-fg": "hsl(220 20% 8%)",
   "--glow": "hsl(217 65% 52%)"
-}, t = a(n), d = a(i);
+}, b = a(t), u = a(d);
 export {
-  d as CLASSIC_DARK_SEMANTIC_TOKENS,
-  t as CLASSIC_LIGHT_SEMANTIC_TOKENS
+  u as CLASSIC_DARK_SEMANTIC_TOKENS,
+  b as CLASSIC_LIGHT_SEMANTIC_TOKENS
 };

package/dist/styles/themes/presets.d.ts

@@ -6,7 +6,7 @@ export interface FloeShellThemeSelection {
     dark?: string;
 }
 export type FloeShellThemeDefaults = Partial<Record<FloeShellThemeMode, string>>;
-type ShellThemeTokenName = '--background' | '--foreground' | '--primary' | '--primary-foreground' | '--secondary' | '--secondary-foreground' | '--muted' | '--muted-foreground' | '--accent' | '--accent-foreground' | '--border' | '--input' | '--ring' | '--chrome-border' | '--top-bar-border' | '--activity-bar-border' | '--bottom-bar-border' | '--terminal-panel-border' | '--card' | '--card-foreground' | '--popover' | '--popover-foreground' | '--success' | '--success-foreground' | '--warning' | '--warning-foreground' | '--error' | '--error-foreground' | '--info' | '--info-foreground' | '--highlight-block-info-accent' | '--highlight-block-warning-accent' | '--highlight-block-success-accent' | '--highlight-block-error-accent' | '--highlight-block-note-accent' | '--highlight-block-tip-accent' | '--sidebar' | '--sidebar-foreground' | '--sidebar-primary' | '--sidebar-primary-foreground' | '--sidebar-accent' | '--sidebar-accent-foreground' | '--sidebar-border' | '--sidebar-ring' | '--activity-bar' | '--activity-bar-foreground' | '--activity-bar-foreground-active' | '--activity-bar-badge' | '--activity-bar-badge-foreground' | '--terminal-background' | '--terminal-foreground' | '--chart-1' | '--chart-2' | '--chart-3' | '--chart-4' | '--chart-5' | '--selection-bg' | '--selection-fg' | '--selection-on-primary-bg' | '--selection-on-primary-fg' | '--selection-code-bg' | '--selection-code-fg' | '--glow';
+type ShellThemeTokenName = '--floe-window-background' | '--floe-window-foreground' | '--floe-window-muted-foreground' | '--floe-window-titlebar-background' | '--floe-window-border' | '--floe-window-shadow' | '--background' | '--foreground' | '--primary' | '--primary-foreground' | '--secondary' | '--secondary-foreground' | '--muted' | '--muted-foreground' | '--accent' | '--accent-foreground' | '--border' | '--input' | '--ring' | '--chrome-border' | '--top-bar-border' | '--activity-bar-border' | '--bottom-bar-border' | '--terminal-panel-border' | '--card' | '--card-foreground' | '--popover' | '--popover-foreground' | '--success' | '--success-foreground' | '--warning' | '--warning-foreground' | '--error' | '--error-foreground' | '--info' | '--info-foreground' | '--highlight-block-info-accent' | '--highlight-block-warning-accent' | '--highlight-block-success-accent' | '--highlight-block-error-accent' | '--highlight-block-note-accent' | '--highlight-block-tip-accent' | '--sidebar' | '--sidebar-foreground' | '--sidebar-primary' | '--sidebar-primary-foreground' | '--sidebar-accent' | '--sidebar-accent-foreground' | '--sidebar-border' | '--sidebar-ring' | '--activity-bar' | '--activity-bar-foreground' | '--activity-bar-foreground-active' | '--activity-bar-badge' | '--activity-bar-badge-foreground' | '--terminal-background' | '--terminal-foreground' | '--chart-1' | '--chart-2' | '--chart-3' | '--chart-4' | '--chart-5' | '--selection-bg' | '--selection-fg' | '--selection-on-primary-bg' | '--selection-on-primary-fg' | '--selection-code-bg' | '--selection-code-fg' | '--glow';
 export declare const REQUIRED_SHELL_THEME_TOKENS: readonly ShellThemeTokenName[];
 interface ShellThemePaletteDefinition {
     name: string;

package/dist/styles/themes/presets.js

@@ -1,5 +1,12 @@
-import { CLASSIC_LIGHT_SEMANTIC_TOKENS as s, CLASSIC_DARK_SEMANTIC_TOKENS as m } from "./classicSemanticTokens.js";
-const C = [
+import { DARK_WINDOW_TOKENS as s, LIGHT_WINDOW_TOKENS as m } from "./windowTokens.js";
+import { CLASSIC_LIGHT_SEMANTIC_TOKENS as l, CLASSIC_DARK_SEMANTIC_TOKENS as b } from "./classicSemanticTokens.js";
+const w = [
+  "--floe-window-background",
+  "--floe-window-foreground",
+  "--floe-window-muted-foreground",
+  "--floe-window-titlebar-background",
+  "--floe-window-border",
+  "--floe-window-shadow",
   "--background",
   "--foreground",
   "--primary",
@@ -63,7 +70,7 @@ const C = [
   "--selection-code-bg",
   "--selection-code-fg",
   "--glow"
-], l = {
+], p = {
   success: "#287A4B",
   successForeground: "#FFFFFF",
   warning: "#835800",
@@ -74,7 +81,7 @@ const C = [
   infoForeground: "#FFFFFF",
   note: "#6847A0",
   tip: "#1E6F73"
-}, b = {
+}, B = {
   success: "#72D39C",
   successForeground: "#07160E",
   warning: "#F0C36A",
@@ -87,7 +94,7 @@ const C = [
   tip: "#71C8C0"
 };
 function o(r) {
-  const e = r.mode === "light" ? l : b, n = r.mode === "light" ? { background: "#F4C95D", foreground: "#243447" } : {
+  const e = r.mode === "light" ? p : B, n = r.mode === "light" ? { background: "#F4C95D", foreground: "#243447" } : {
     background: r.background,
     foreground: r.foreground
   }, [t, d, F, c, g] = r.chart, a = r.syntax ?? {
@@ -99,6 +106,7 @@ function o(r) {
     function: g,
     constant: c
   }, u = {
+    ...r.mode === "dark" ? s : m,
     "--background": r.background,
     "--foreground": r.foreground,
     "--primary": r.primary,
@@ -241,7 +249,7 @@ function o(r) {
     tokens: r.mode === "light" ? { light: u } : { dark: u }
   };
 }
-const p = {
+const E = {
   ...o({
     name: "classic-light",
     displayName: "Classic Light",
@@ -273,9 +281,9 @@ const p = {
     }
   }),
   inheritsBaseTokens: !0,
-  semanticTokens: s,
+  semanticTokens: l,
   tokens: void 0
-}, B = {
+}, k = {
   ...o({
     name: "classic-dark",
     displayName: "Classic Dark",
@@ -307,10 +315,10 @@ const p = {
     }
   }),
   inheritsBaseTokens: !0,
-  semanticTokens: m,
+  semanticTokens: b,
   tokens: void 0
-}, E = [
-  p,
+}, A = [
+  E,
   o({
     name: "paper",
     displayName: "Paper",
@@ -566,7 +574,7 @@ const p = {
       constant: "#745500"
     }
   }),
-  B,
+  k,
   o({
     name: "ink",
     displayName: "Ink",
@@ -882,18 +890,18 @@ const p = {
       constant: "#BF5AF2"
     }
   })
-], D = {
+], v = {
   light: "classic-light",
   dark: "classic-dark"
 };
-function A(r, e) {
+function y(r, e) {
   const n = r.mode ?? "both";
   return n === "both" || n === e;
 }
-function k(r, e) {
-  return r.filter((n) => A(n, e));
+function h(r, e) {
+  return r.filter((n) => y(n, e));
 }
-function y(r) {
+function C(r) {
   const e = /* @__PURE__ */ new Set();
   for (const n of r) {
     if (e.has(n.name))
@@ -902,10 +910,10 @@ function y(r) {
   }
 }
 function i(r, e, n, t) {
-  const d = k(r, e);
+  const d = h(r, e);
   return n && d.some((F) => F.name === n) ? n : t && d.some((F) => F.name === t) ? t : d[0]?.name;
 }
-function f(r, e, n = {}) {
+function S(r, e, n = {}) {
   const t = typeof r == "object" && r !== null && !Array.isArray(r) ? r : void 0, d = t?.version === 1, F = d && typeof t.light == "string" ? t.light : void 0, c = d && typeof t.dark == "string" ? t.dark : void 0;
   return {
     version: 1,
@@ -913,15 +921,15 @@ function f(r, e, n = {}) {
     dark: i(e, "dark", c, n.dark)
   };
 }
-y(E);
+C(A);
 export {
-  D as BUILT_IN_SHELL_THEME_DEFAULTS,
-  C as REQUIRED_SHELL_THEME_TOKENS,
-  y as assertUniqueThemePresetNames,
-  E as builtInShellThemePresets,
+  v as BUILT_IN_SHELL_THEME_DEFAULTS,
+  w as REQUIRED_SHELL_THEME_TOKENS,
+  C as assertUniqueThemePresetNames,
+  A as builtInShellThemePresets,
   o as createShellThemePreset,
-  k as getShellThemePresetsForMode,
-  f as normalizeShellThemeSelection,
-  A as presetSupportsMode,
+  h as getShellThemePresetsForMode,
+  S as normalizeShellThemeSelection,
+  y as presetSupportsMode,
   i as resolveShellThemePresetName
 };

package/dist/styles/themes/windowTokens.d.ts

@@ -0,0 +1,17 @@
+/** Palette-relative, opaque window material; resolved by CSS only when the theme changes. */
+export declare const LIGHT_WINDOW_TOKENS: {
+    readonly '--floe-window-background': "color-mix(in srgb, var(--card) 35%, white)";
+    readonly '--floe-window-foreground': "var(--foreground)";
+    readonly '--floe-window-muted-foreground': "var(--muted-foreground)";
+    readonly '--floe-window-titlebar-background': "color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground))";
+    readonly '--floe-window-border': "color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground))";
+    readonly '--floe-window-shadow': "0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%)";
+};
+export declare const DARK_WINDOW_TOKENS: {
+    readonly '--floe-window-background': "color-mix(in srgb, var(--card) 90%, white)";
+    readonly '--floe-window-foreground': "var(--foreground)";
+    readonly '--floe-window-muted-foreground': "color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground))";
+    readonly '--floe-window-titlebar-background': "color-mix(in srgb, var(--floe-window-background) 95%, white)";
+    readonly '--floe-window-border': "color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground))";
+    readonly '--floe-window-shadow': "0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%)";
+};

package/dist/styles/themes/windowTokens.js

@@ -0,0 +1,19 @@
+const o = {
+  "--floe-window-background": "color-mix(in srgb, var(--card) 35%, white)",
+  "--floe-window-foreground": "var(--foreground)",
+  "--floe-window-muted-foreground": "var(--muted-foreground)",
+  "--floe-window-titlebar-background": "color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground))",
+  "--floe-window-border": "color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground))",
+  "--floe-window-shadow": "0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%)"
+}, r = {
+  "--floe-window-background": "color-mix(in srgb, var(--card) 90%, white)",
+  "--floe-window-foreground": "var(--foreground)",
+  "--floe-window-muted-foreground": "color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground))",
+  "--floe-window-titlebar-background": "color-mix(in srgb, var(--floe-window-background) 95%, white)",
+  "--floe-window-border": "color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground))",
+  "--floe-window-shadow": "0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%)"
+};
+export {
+  r as DARK_WINDOW_TOKENS,
+  o as LIGHT_WINDOW_TOKENS
+};