@floegence/floe-webapp-core 0.39.10 → 0.40.0

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';
+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';
 export declare const REQUIRED_SHELL_THEME_TOKENS: readonly ShellThemeTokenName[];
 interface ShellThemePaletteDefinition {
     name: string;
@@ -28,6 +28,15 @@ interface ShellThemePaletteDefinition {
     selectionBackground: string;
     selectionForeground: string;
     chart: readonly [string, string, string, string, string];
+    /**
+     * Explicit glow accent color for glow/bloom effects. Optional.
+     *
+     * When omitted, the system auto-assigns based on mode:
+     * - Light mode: `primary` (dark ink reads as a depth accent, not harsh)
+     * - Dark mode: `selectionBackground` (already a theme-tuned saturated accent,
+     *   avoids the white-bloom problem that comes from using a near-white primary)
+     */
+    glow?: string;
     syntax?: {
         comment: string;
         keyword: string;
@@ -73,7 +82,7 @@ export declare const builtInShellThemePresets: readonly [{
         colors: readonly [string, string, string, string, string];
     };
     monaco?: Partial<Record<"light" | "dark", import("./index").FloeMonacoThemeDefinition>>;
-}, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset];
+}, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset];
 export declare const BUILT_IN_SHELL_THEME_DEFAULTS: {
     readonly light: "classic-light";
     readonly dark: "classic-dark";

package/dist/styles/themes/presets.js

@@ -61,7 +61,8 @@ const C = [
   "--selection-on-primary-bg",
   "--selection-on-primary-fg",
   "--selection-code-bg",
-  "--selection-code-fg"
+  "--selection-code-fg",
+  "--glow"
 ], l = {
   success: "#287A4B",
   successForeground: "#FFFFFF",
@@ -89,12 +90,12 @@ function o(r) {
   const e = r.mode === "light" ? l : 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 ?? {
+  }, [t, F, d, c, g] = r.chart, a = r.syntax ?? {
     comment: r.mutedForeground,
     keyword: t,
-    string: d,
+    string: F,
     number: c,
-    type: F,
+    type: d,
     function: g,
     constant: c
   }, u = {
@@ -150,8 +151,8 @@ function o(r) {
     "--terminal-background": r.terminalBackground,
     "--terminal-foreground": r.terminalForeground,
     "--chart-1": t,
-    "--chart-2": d,
-    "--chart-3": F,
+    "--chart-2": F,
+    "--chart-3": d,
     "--chart-4": c,
     "--chart-5": g,
     "--selection-bg": r.selectionBackground,
@@ -159,7 +160,10 @@ function o(r) {
     "--selection-on-primary-bg": n.background,
     "--selection-on-primary-fg": n.foreground,
     "--selection-code-bg": "#58A6FF",
-    "--selection-code-fg": "#08111D"
+    "--selection-code-fg": "#08111D",
+    // Glow: light mode uses primary (dark ink as depth accent); dark mode uses
+    // selectionBackground so we don't inherit a near-white primary as glow source.
+    "--glow": r.glow ?? (r.mode === "light" ? r.primary : r.selectionBackground)
   };
   return {
     name: r.name,
@@ -237,7 +241,7 @@ function o(r) {
     tokens: r.mode === "light" ? { light: u } : { dark: u }
   };
 }
-const B = {
+const p = {
   ...o({
     name: "classic-light",
     displayName: "Classic Light",
@@ -271,7 +275,7 @@ const B = {
   inheritsBaseTokens: !0,
   semanticTokens: s,
   tokens: void 0
-}, p = {
+}, B = {
   ...o({
     name: "classic-dark",
     displayName: "Classic Dark",
@@ -305,8 +309,8 @@ const B = {
   inheritsBaseTokens: !0,
   semanticTokens: m,
   tokens: void 0
-}, k = [
-  B,
+}, A = [
+  p,
   o({
     name: "paper",
     displayName: "Paper",
@@ -562,7 +566,7 @@ const B = {
       constant: "#745500"
     }
   }),
-  p,
+  B,
   o({
     name: "ink",
     displayName: "Ink",
@@ -817,17 +821,77 @@ const B = {
       function: "#00A4EF",
       constant: "#FFCC66"
     }
+  }),
+  o({
+    name: "studio",
+    displayName: "Studio",
+    description: "Near-black canvas with subtle violet cast for deep focus sessions.",
+    mode: "dark",
+    background: "#111116",
+    foreground: "#E2E2EC",
+    card: "#18181F",
+    muted: "#20202B",
+    mutedForeground: "#8888A8",
+    primary: "#9580FF",
+    primaryForeground: "#111116",
+    border: "#2A2A3C",
+    input: "#7070A8",
+    sidebar: "#13131A",
+    terminalBackground: "#0C0C12",
+    terminalForeground: "#D8D8E8",
+    selectionBackground: "#4840A0",
+    selectionForeground: "#FFFFFF",
+    chart: ["#9580FF", "#79D5F7", "#8BE08E", "#F0C060", "#F06090"],
+    syntax: {
+      comment: "#6868A0",
+      keyword: "#FF79C6",
+      string: "#8BE08E",
+      number: "#F0C060",
+      type: "#79D5F7",
+      function: "#9580FF",
+      constant: "#F06090"
+    }
+  }),
+  o({
+    name: "graphite",
+    displayName: "Graphite",
+    description: "Pure neutral dark surfaces with macOS system blue for operations.",
+    mode: "dark",
+    background: "#1C1C1E",
+    foreground: "#F2F2F7",
+    card: "#2C2C2E",
+    muted: "#3A3A3C",
+    mutedForeground: "#AEAEB2",
+    primary: "#0070E0",
+    primaryForeground: "#FFFFFF",
+    border: "#38383A",
+    input: "#888888",
+    sidebar: "#242426",
+    terminalBackground: "#141416",
+    terminalForeground: "#E5E5EA",
+    selectionBackground: "#0070E0",
+    selectionForeground: "#FFFFFF",
+    chart: ["#0A84FF", "#32ADE6", "#34C759", "#FF9F0A", "#FF453A"],
+    syntax: {
+      comment: "#6C6C70",
+      keyword: "#FF375F",
+      string: "#34C759",
+      number: "#FF9F0A",
+      type: "#32ADE6",
+      function: "#0A84FF",
+      constant: "#BF5AF2"
+    }
   })
 ], D = {
   light: "classic-light",
   dark: "classic-dark"
 };
-function A(r, e) {
+function k(r, e) {
   const n = r.mode ?? "both";
   return n === "both" || n === e;
 }
 function E(r, e) {
-  return r.filter((n) => A(n, e));
+  return r.filter((n) => k(n, e));
 }
 function y(r) {
   const e = /* @__PURE__ */ new Set();
@@ -838,26 +902,26 @@ function y(r) {
   }
 }
 function i(r, e, n, t) {
-  const d = E(r, e);
-  return n && d.some((F) => F.name === n) ? n : t && d.some((F) => F.name === t) ? t : d[0]?.name;
+  const F = E(r, e);
+  return n && F.some((d) => d.name === n) ? n : t && F.some((d) => d.name === t) ? t : F[0]?.name;
 }
 function f(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;
+  const t = typeof r == "object" && r !== null && !Array.isArray(r) ? r : void 0, F = t?.version === 1, d = F && typeof t.light == "string" ? t.light : void 0, c = F && typeof t.dark == "string" ? t.dark : void 0;
   return {
     version: 1,
-    light: i(e, "light", F, n.light),
+    light: i(e, "light", d, n.light),
     dark: i(e, "dark", c, n.dark)
   };
 }
-y(k);
+y(A);
 export {
   D as BUILT_IN_SHELL_THEME_DEFAULTS,
   C as REQUIRED_SHELL_THEME_TOKENS,
   y as assertUniqueThemePresetNames,
-  k as builtInShellThemePresets,
+  A as builtInShellThemePresets,
   o as createShellThemePreset,
   E as getShellThemePresetsForMode,
   f as normalizeShellThemeSelection,
-  A as presetSupportsMode,
+  k as presetSupportsMode,
   i as resolveShellThemePresetName
 };

package/dist/styles/tokens.d.ts

@@ -79,7 +79,7 @@ export declare const floeColorTokenCategories: readonly [{
         readonly name: "Secondary";
         readonly variable: "--secondary";
         readonly lightValue: "hsl(36 15% 94%)";
-        readonly darkValue: "hsl(220 25% 14%)";
+        readonly darkValue: "hsl(220 18% 15%)";
         readonly description: "Secondary surface color for lower-emphasis blocks.";
     }, {
         readonly name: "Secondary Foreground";
@@ -91,19 +91,19 @@ export declare const floeColorTokenCategories: readonly [{
         readonly name: "Muted";
         readonly variable: "--muted";
         readonly lightValue: "hsl(36 15% 94%)";
-        readonly darkValue: "hsl(220 25% 14%)";
+        readonly darkValue: "hsl(220 16% 16%)";
         readonly description: "Muted surface color for subtle containers and fills.";
     }, {
         readonly name: "Muted Foreground";
         readonly variable: "--muted-foreground";
         readonly lightValue: "hsl(215 16% 42%)";
-        readonly darkValue: "hsl(215 20% 60%)";
+        readonly darkValue: "hsl(215 16% 56%)";
         readonly description: "Secondary text color for supporting copy.";
     }, {
         readonly name: "Accent";
         readonly variable: "--accent";
-        readonly lightValue: "hsl(34 11% 88%)";
-        readonly darkValue: "hsl(220 25% 16%)";
+        readonly lightValue: "hsl(34 9% 85%)";
+        readonly darkValue: "hsl(220 14% 19%)";
         readonly description: "Accent surface for hover states and light emphasis.";
     }, {
         readonly name: "Accent Foreground";
@@ -119,7 +119,7 @@ export declare const floeColorTokenCategories: readonly [{
         readonly name: "Card";
         readonly variable: "--card";
         readonly lightValue: "hsl(36 100% 99%)";
-        readonly darkValue: "hsl(222 28% 10%)";
+        readonly darkValue: "hsl(220 20% 13%)";
         readonly description: "Card background surface.";
     }, {
         readonly name: "Card Foreground";
@@ -131,7 +131,7 @@ export declare const floeColorTokenCategories: readonly [{
         readonly name: "Popover";
         readonly variable: "--popover";
         readonly lightValue: "hsl(36 100% 99%)";
-        readonly darkValue: "hsl(222 28% 10%)";
+        readonly darkValue: "hsl(220 18% 15%)";
         readonly description: "Popover and floating panel background.";
     }, {
         readonly name: "Popover Foreground";
@@ -143,13 +143,13 @@ export declare const floeColorTokenCategories: readonly [{
         readonly name: "Border";
         readonly variable: "--border";
         readonly lightValue: "hsl(35 13% 82%)";
-        readonly darkValue: "hsl(220 20% 18%)";
+        readonly darkValue: "hsl(220 16% 20%)";
         readonly description: "Default border color.";
     }, {
         readonly name: "Input";
         readonly variable: "--input";
         readonly lightValue: "hsl(37 15% 76%)";
-        readonly darkValue: "hsl(220 25% 14%)";
+        readonly darkValue: "hsl(220 18% 15%)";
         readonly description: "Input border color.";
     }, {
         readonly name: "Ring";
@@ -257,7 +257,7 @@ export declare const floeColorTokenCategories: readonly [{
         readonly name: "Chrome Border";
         readonly variable: "--chrome-border";
         readonly lightValue: "hsl(33 11% 84%)";
-        readonly darkValue: "var(--border)";
+        readonly darkValue: "hsl(220 16% 13%)";
         readonly description: "Default shared shell divider color.";
     }, {
         readonly name: "Top Bar Border";
@@ -290,8 +290,8 @@ export declare const floeColorTokenCategories: readonly [{
     readonly tokens: readonly [{
         readonly name: "Sidebar";
         readonly variable: "--sidebar";
-        readonly lightValue: "hsl(36 13% 92%)";
-        readonly darkValue: "hsl(222 28% 10%)";
+        readonly lightValue: "hsl(34 13% 90%)";
+        readonly darkValue: "hsl(221 22% 11%)";
         readonly description: "Sidebar background.";
     }, {
         readonly name: "Sidebar Foreground";
@@ -314,8 +314,8 @@ export declare const floeColorTokenCategories: readonly [{
     }, {
         readonly name: "Sidebar Accent";
         readonly variable: "--sidebar-accent";
-        readonly lightValue: "hsl(34 11% 88%)";
-        readonly darkValue: "hsl(220 25% 16%)";
+        readonly lightValue: "hsl(34 9% 84%)";
+        readonly darkValue: "hsl(220 14% 19%)";
         readonly description: "Accent surface used for sidebar hover and active states.";
     }, {
         readonly name: "Sidebar Accent Foreground";
@@ -326,8 +326,8 @@ export declare const floeColorTokenCategories: readonly [{
     }, {
         readonly name: "Sidebar Border";
         readonly variable: "--sidebar-border";
-        readonly lightValue: "hsl(33 11% 84%)";
-        readonly darkValue: "hsl(220 20% 18%)";
+        readonly lightValue: "hsl(33 9% 82%)";
+        readonly darkValue: "hsl(220 16% 13%)";
         readonly description: "Sidebar inner border color.";
     }, {
         readonly name: "Sidebar Ring";
@@ -342,20 +342,20 @@ export declare const floeColorTokenCategories: readonly [{
     readonly tokens: readonly [{
         readonly name: "Activity Bar";
         readonly variable: "--activity-bar";
-        readonly lightValue: "hsl(36 13% 92%)";
-        readonly darkValue: "hsl(222 30% 9%)";
+        readonly lightValue: "hsl(34 11% 90%)";
+        readonly darkValue: "hsl(222 28% 7%)";
         readonly description: "Activity bar background.";
     }, {
         readonly name: "Activity Bar Foreground";
         readonly variable: "--activity-bar-foreground";
-        readonly lightValue: "hsl(215 16% 42%)";
-        readonly darkValue: "hsl(215 20% 55%)";
+        readonly lightValue: "hsl(215 14% 46%)";
+        readonly darkValue: "hsl(215 16% 50%)";
         readonly description: "Default activity bar icon color.";
     }, {
         readonly name: "Activity Bar Foreground Active";
         readonly variable: "--activity-bar-foreground-active";
         readonly lightValue: "hsl(214 26% 17%)";
-        readonly darkValue: "hsl(210 20% 98%)";
+        readonly darkValue: "hsl(210 20% 96%)";
         readonly description: "Active activity bar icon color.";
     }, {
         readonly name: "Activity Bar Badge";
@@ -669,7 +669,7 @@ export declare const floeDesignTokens: {
             readonly name: "Secondary";
             readonly variable: "--secondary";
             readonly lightValue: "hsl(36 15% 94%)";
-            readonly darkValue: "hsl(220 25% 14%)";
+            readonly darkValue: "hsl(220 18% 15%)";
             readonly description: "Secondary surface color for lower-emphasis blocks.";
         }, {
             readonly name: "Secondary Foreground";
@@ -681,19 +681,19 @@ export declare const floeDesignTokens: {
             readonly name: "Muted";
             readonly variable: "--muted";
             readonly lightValue: "hsl(36 15% 94%)";
-            readonly darkValue: "hsl(220 25% 14%)";
+            readonly darkValue: "hsl(220 16% 16%)";
             readonly description: "Muted surface color for subtle containers and fills.";
         }, {
             readonly name: "Muted Foreground";
             readonly variable: "--muted-foreground";
             readonly lightValue: "hsl(215 16% 42%)";
-            readonly darkValue: "hsl(215 20% 60%)";
+            readonly darkValue: "hsl(215 16% 56%)";
             readonly description: "Secondary text color for supporting copy.";
         }, {
             readonly name: "Accent";
             readonly variable: "--accent";
-            readonly lightValue: "hsl(34 11% 88%)";
-            readonly darkValue: "hsl(220 25% 16%)";
+            readonly lightValue: "hsl(34 9% 85%)";
+            readonly darkValue: "hsl(220 14% 19%)";
             readonly description: "Accent surface for hover states and light emphasis.";
         }, {
             readonly name: "Accent Foreground";
@@ -709,7 +709,7 @@ export declare const floeDesignTokens: {
             readonly name: "Card";
             readonly variable: "--card";
             readonly lightValue: "hsl(36 100% 99%)";
-            readonly darkValue: "hsl(222 28% 10%)";
+            readonly darkValue: "hsl(220 20% 13%)";
             readonly description: "Card background surface.";
         }, {
             readonly name: "Card Foreground";
@@ -721,7 +721,7 @@ export declare const floeDesignTokens: {
             readonly name: "Popover";
             readonly variable: "--popover";
             readonly lightValue: "hsl(36 100% 99%)";
-            readonly darkValue: "hsl(222 28% 10%)";
+            readonly darkValue: "hsl(220 18% 15%)";
             readonly description: "Popover and floating panel background.";
         }, {
             readonly name: "Popover Foreground";
@@ -733,13 +733,13 @@ export declare const floeDesignTokens: {
             readonly name: "Border";
             readonly variable: "--border";
             readonly lightValue: "hsl(35 13% 82%)";
-            readonly darkValue: "hsl(220 20% 18%)";
+            readonly darkValue: "hsl(220 16% 20%)";
             readonly description: "Default border color.";
         }, {
             readonly name: "Input";
             readonly variable: "--input";
             readonly lightValue: "hsl(37 15% 76%)";
-            readonly darkValue: "hsl(220 25% 14%)";
+            readonly darkValue: "hsl(220 18% 15%)";
             readonly description: "Input border color.";
         }, {
             readonly name: "Ring";
@@ -847,7 +847,7 @@ export declare const floeDesignTokens: {
             readonly name: "Chrome Border";
             readonly variable: "--chrome-border";
             readonly lightValue: "hsl(33 11% 84%)";
-            readonly darkValue: "var(--border)";
+            readonly darkValue: "hsl(220 16% 13%)";
             readonly description: "Default shared shell divider color.";
         }, {
             readonly name: "Top Bar Border";
@@ -880,8 +880,8 @@ export declare const floeDesignTokens: {
         readonly tokens: readonly [{
             readonly name: "Sidebar";
             readonly variable: "--sidebar";
-            readonly lightValue: "hsl(36 13% 92%)";
-            readonly darkValue: "hsl(222 28% 10%)";
+            readonly lightValue: "hsl(34 13% 90%)";
+            readonly darkValue: "hsl(221 22% 11%)";
             readonly description: "Sidebar background.";
         }, {
             readonly name: "Sidebar Foreground";
@@ -904,8 +904,8 @@ export declare const floeDesignTokens: {
         }, {
             readonly name: "Sidebar Accent";
             readonly variable: "--sidebar-accent";
-            readonly lightValue: "hsl(34 11% 88%)";
-            readonly darkValue: "hsl(220 25% 16%)";
+            readonly lightValue: "hsl(34 9% 84%)";
+            readonly darkValue: "hsl(220 14% 19%)";
             readonly description: "Accent surface used for sidebar hover and active states.";
         }, {
             readonly name: "Sidebar Accent Foreground";
@@ -916,8 +916,8 @@ export declare const floeDesignTokens: {
         }, {
             readonly name: "Sidebar Border";
             readonly variable: "--sidebar-border";
-            readonly lightValue: "hsl(33 11% 84%)";
-            readonly darkValue: "hsl(220 20% 18%)";
+            readonly lightValue: "hsl(33 9% 82%)";
+            readonly darkValue: "hsl(220 16% 13%)";
             readonly description: "Sidebar inner border color.";
         }, {
             readonly name: "Sidebar Ring";
@@ -932,20 +932,20 @@ export declare const floeDesignTokens: {
         readonly tokens: readonly [{
             readonly name: "Activity Bar";
             readonly variable: "--activity-bar";
-            readonly lightValue: "hsl(36 13% 92%)";
-            readonly darkValue: "hsl(222 30% 9%)";
+            readonly lightValue: "hsl(34 11% 90%)";
+            readonly darkValue: "hsl(222 28% 7%)";
             readonly description: "Activity bar background.";
         }, {
             readonly name: "Activity Bar Foreground";
             readonly variable: "--activity-bar-foreground";
-            readonly lightValue: "hsl(215 16% 42%)";
-            readonly darkValue: "hsl(215 20% 55%)";
+            readonly lightValue: "hsl(215 14% 46%)";
+            readonly darkValue: "hsl(215 16% 50%)";
             readonly description: "Default activity bar icon color.";
         }, {
             readonly name: "Activity Bar Foreground Active";
             readonly variable: "--activity-bar-foreground-active";
             readonly lightValue: "hsl(214 26% 17%)";
-            readonly darkValue: "hsl(210 20% 98%)";
+            readonly darkValue: "hsl(210 20% 96%)";
             readonly description: "Active activity bar icon color.";
         }, {
             readonly name: "Activity Bar Badge";