@floegence/floe-webapp-core 0.41.4 → 0.42.0

package/dist/workbench-themes.css

@@ -102,6 +102,11 @@
     --wb-vib-shadow:
       0 1px 0 rgba(255, 255, 255, 0.66) inset, 0 12px 40px -14px rgba(22, 28, 45, 0.26),
       0 4px 10px -6px rgba(22, 28, 45, 0.12);
+    --wb-dock-material-background: rgba(255, 255, 255, 0.56);
+    --wb-dock-material-border: rgba(255, 255, 255, 0.46);
+    --wb-dock-material-border-top: var(--wb-dock-material-border);
+    --wb-dock-material-shadow: var(--wb-vib-shadow);
+    --wb-dock-material-filter: blur(36px) saturate(180%);
     --wb-accent: #3478f6;
     --wb-accent-strong: #1e6ae8;
     --wb-accent-soft: rgba(52, 120, 246, 0.14);
@@ -154,6 +159,8 @@
     --wb-vib-shadow:
       0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 20px 60px -14px rgba(0, 0, 0, 0.72),
       0 6px 14px -6px rgba(0, 0, 0, 0.46);
+    --wb-dock-material-background: rgba(36, 36, 40, 0.5);
+    --wb-dock-material-border: rgba(255, 255, 255, 0.1);
     --wb-accent: #5a9bff;
     --wb-accent-strong: #86b7ff;
     --wb-accent-soft: rgba(90, 155, 255, 0.16);
@@ -243,8 +250,7 @@
   }
 
   .workbench-surface[data-workbench-theme='vibrancy'] .workbench-hud,
-  .workbench-surface[data-workbench-theme='vibrancy'] .workbench-lock-button,
-  .workbench-surface[data-workbench-theme='vibrancy'] .workbench-dock {
+  .workbench-surface[data-workbench-theme='vibrancy'] .workbench-lock-button {
     background: rgba(255, 255, 255, 0.56);
     border-color: rgba(255, 255, 255, 0.46);
     box-shadow: var(--wb-vib-shadow);
@@ -253,8 +259,7 @@
   }
 
   html.dark .workbench-surface[data-workbench-theme='vibrancy'] .workbench-hud,
-  html.dark .workbench-surface[data-workbench-theme='vibrancy'] .workbench-lock-button,
-  html.dark .workbench-surface[data-workbench-theme='vibrancy'] .workbench-dock {
+  html.dark .workbench-surface[data-workbench-theme='vibrancy'] .workbench-lock-button {
     background: rgba(36, 36, 40, 0.5);
     border-color: rgba(255, 255, 255, 0.1);
   }
@@ -300,6 +305,11 @@
     --wb-mica-divider: rgba(17, 24, 39, 0.08);
     --wb-mica-shadow:
       0 1px 0 rgba(255, 255, 255, 0.64) inset, 0 16px 42px -18px rgba(31, 41, 55, 0.28);
+    --wb-dock-material-background: color-mix(in srgb, var(--wb-mica-widget) 92%, transparent);
+    --wb-dock-material-border: var(--wb-mica-border);
+    --wb-dock-material-border-top: var(--wb-dock-material-border);
+    --wb-dock-material-shadow: 0 -12px 34px -22px rgba(17, 24, 39, 0.28);
+    --wb-dock-material-filter: blur(56px) saturate(180%);
     --wb-accent: #0078d4;
     --wb-accent-strong: #005fae;
     --wb-accent-soft: rgba(0, 120, 212, 0.12);
@@ -433,8 +443,7 @@
     width: 42px;
   }
 
-  .workbench-surface[data-workbench-theme='mica']
-    .workbench-widget__window-control--close:hover,
+  .workbench-surface[data-workbench-theme='mica'] .workbench-widget__window-control--close:hover,
   .workbench-surface[data-workbench-theme='mica']
     .workbench-widget__window-control--close:focus-visible {
     background: #c42b1c;
@@ -460,11 +469,6 @@
     border-bottom: 0;
     border-left: 0;
     border-radius: 0;
-    background: color-mix(in srgb, var(--wb-mica-widget) 92%, transparent);
-    border-color: var(--wb-mica-border);
-    box-shadow: 0 -12px 34px -22px rgba(17, 24, 39, 0.28);
-    backdrop-filter: blur(56px) saturate(180%);
-    -webkit-backdrop-filter: blur(56px) saturate(180%);
   }
 
   .workbench-surface[data-workbench-theme='mica'] .workbench-dock__tile {
@@ -507,6 +511,11 @@
     --wb-mid-border-strong: rgba(16, 16, 26, 0.14);
     --wb-mid-divider: rgba(16, 16, 26, 0.06);
     --wb-mid-shadow: 0 1px 2px rgba(16, 16, 26, 0.05), 0 10px 26px -14px rgba(16, 16, 26, 0.18);
+    --wb-dock-material-background: var(--wb-mid-widget);
+    --wb-dock-material-border: var(--wb-mid-border);
+    --wb-dock-material-border-top: var(--wb-dock-material-border);
+    --wb-dock-material-shadow: var(--wb-mid-shadow);
+    --wb-dock-material-filter: none;
     --wb-accent: #5e6ad2;
     --wb-accent-strong: #4c55a8;
     --wb-accent-soft: rgba(94, 106, 210, 0.1);
@@ -641,8 +650,7 @@
   }
 
   .workbench-surface[data-workbench-theme='midnight'] .workbench-hud,
-  .workbench-surface[data-workbench-theme='midnight'] .workbench-lock-button,
-  .workbench-surface[data-workbench-theme='midnight'] .workbench-dock {
+  .workbench-surface[data-workbench-theme='midnight'] .workbench-lock-button {
     background: var(--wb-mid-widget);
     border-color: var(--wb-mid-border);
     box-shadow: var(--wb-mid-shadow);
@@ -706,6 +714,11 @@
     --wb-aur-shadow:
       0 1px 0 var(--wb-aur-border-inner) inset, 0 20px 50px -14px rgba(67, 56, 202, 0.2),
       0 6px 16px -6px rgba(17, 15, 38, 0.1);
+    --wb-dock-material-background: var(--wb-aur-widget);
+    --wb-dock-material-border: var(--wb-aur-border);
+    --wb-dock-material-border-top: var(--wb-aur-border-inner);
+    --wb-dock-material-shadow: var(--wb-aur-shadow);
+    --wb-dock-material-filter: blur(50px) saturate(180%);
     --wb-accent: #6366f1;
     --wb-accent-strong: #4f46e5;
     --wb-accent-soft: rgba(99, 102, 241, 0.16);
@@ -853,8 +866,7 @@
   }
 
   .workbench-surface[data-workbench-theme='aurora'] .workbench-hud,
-  .workbench-surface[data-workbench-theme='aurora'] .workbench-lock-button,
-  .workbench-surface[data-workbench-theme='aurora'] .workbench-dock {
+  .workbench-surface[data-workbench-theme='aurora'] .workbench-lock-button {
     background: var(--wb-aur-widget);
     border: 1px solid var(--wb-aur-border);
     border-top-color: var(--wb-aur-border-inner);
@@ -901,6 +913,11 @@
     --wb-term-border: #d9d5cf;
     --wb-term-divider: #e9e5df;
     --wb-term-shadow: 0 1px 2px rgba(18, 18, 24, 0.05), 0 10px 24px -14px rgba(18, 18, 24, 0.12);
+    --wb-dock-material-background: var(--wb-term-widget);
+    --wb-dock-material-border: var(--wb-term-border);
+    --wb-dock-material-border-top: var(--wb-dock-material-border);
+    --wb-dock-material-shadow: var(--wb-term-shadow);
+    --wb-dock-material-filter: none;
     --wb-accent: #d63384;
     --wb-accent-strong: #b4236c;
     --wb-accent-soft: rgba(214, 51, 132, 0.12);
@@ -1041,8 +1058,7 @@
   }
 
   .workbench-surface[data-workbench-theme='terminal'] .workbench-hud,
-  .workbench-surface[data-workbench-theme='terminal'] .workbench-lock-button,
-  .workbench-surface[data-workbench-theme='terminal'] .workbench-dock {
+  .workbench-surface[data-workbench-theme='terminal'] .workbench-lock-button {
     background: var(--wb-term-widget);
     border-color: var(--wb-term-border);
     border-radius: 6px;
@@ -1055,6 +1071,7 @@
     align-items: center;
     gap: 4px;
     padding: 6px 10px;
+    border-radius: 6px;
   }
 
   .workbench-surface[data-workbench-theme='terminal'] .workbench-dock::after {

package/dist/workbench.css

@@ -138,6 +138,13 @@
     --wb-atmosphere: none;
     --wb-atmosphere-opacity: 0;
     --wb-atmosphere-blend: normal;
+    --wb-dock-material-background: color-mix(in srgb, var(--card, #fff) 72%, transparent);
+    --wb-dock-material-border: color-mix(in srgb, var(--border, #e5e5e5) 82%, transparent);
+    --wb-dock-material-border-top: var(--wb-dock-material-border);
+    --wb-dock-material-shadow:
+      0 18px 48px -12px color-mix(in srgb, var(--foreground, #000) 22%, transparent),
+      0 1px 0 color-mix(in srgb, white 60%, transparent) inset;
+    --wb-dock-material-filter: blur(18px) saturate(180%);
     --wb-terminal-bg: var(--terminal-background, #202a37);
     --wb-terminal-toolbar: color-mix(
       in srgb,
@@ -1958,6 +1965,15 @@
   /* ------------------------------------------------------------------ */
   /* Dock (filter bar)                                                  */
   /* ------------------------------------------------------------------ */
+  .workbench-dock-material {
+    background: var(--wb-dock-material-background);
+    border-color: var(--wb-dock-material-border);
+    border-top-color: var(--wb-dock-material-border-top);
+    box-shadow: var(--wb-dock-material-shadow);
+    backdrop-filter: var(--wb-dock-material-filter);
+    -webkit-backdrop-filter: var(--wb-dock-material-filter);
+  }
+
   .workbench-dock {
     position: absolute;
     bottom: 14px;
@@ -1968,16 +1984,34 @@
     gap: 10px;
     padding: 8px 14px;
     border-radius: 16px;
-    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 82%, transparent);
-    background: color-mix(in srgb, var(--card, #fff) 72%, transparent);
-    box-shadow:
-      0 18px 48px -12px color-mix(in srgb, var(--foreground, #000) 22%, transparent),
-      0 1px 0 color-mix(in srgb, white 60%, transparent) inset;
-    backdrop-filter: blur(18px) saturate(180%);
-    -webkit-backdrop-filter: blur(18px) saturate(180%);
+    border: 1px solid var(--wb-dock-material-border);
     z-index: 8;
   }
 
+  .workbench-dock-popover-layer {
+    pointer-events: none;
+    z-index: 20;
+  }
+
+  .workbench-dock-popover {
+    position: relative;
+    pointer-events: auto;
+    border: 1px solid var(--wb-dock-material-border);
+    border-radius: 13px;
+  }
+
+  .workbench-dock-popover__arrow {
+    position: absolute;
+    bottom: -6px;
+    width: 12px;
+    height: 12px;
+    pointer-events: none;
+    transform: translateX(-50%) rotate(45deg);
+    border-right: 1px solid var(--wb-dock-material-border);
+    border-bottom: 1px solid var(--wb-dock-material-border);
+    background: var(--wb-dock-material-background);
+  }
+
   .workbench-dock__mode-switcher {
     position: relative;
     display: inline-flex;
@@ -2139,6 +2173,7 @@
   }
 
   .workbench-surface[data-workbench-mode='background'] .workbench-dock,
+  .workbench-surface[data-workbench-mode='background'] .workbench-dock-popover,
   .workbench-surface[data-workbench-mode='background'] .workbench-dock__mode-popover,
   .workbench-surface[data-workbench-mode='background'] .workbench-lock-button,
   .workbench-surface[data-workbench-mode='background'] .workbench-hud,
@@ -2156,6 +2191,10 @@
     background: var(--popover, var(--card, #fff));
   }
 
+  .workbench-surface[data-workbench-mode='background'] .workbench-dock-popover__arrow {
+    background: var(--popover, var(--card, #fff));
+  }
+
   .workbench-dock__mode-option {
     position: relative;
     display: flex;

package/dist/workbench.js

@@ -1,55 +1,57 @@
-import { DEFAULT_WORKBENCH_THEME as E, WORKBENCH_THEMES as _, WORKBENCH_THEME_IDS as o, isWorkbenchThemeId as O, workbenchThemeMeta as t } from "./components/workbench/workbenchThemes.js";
+import { DEFAULT_WORKBENCH_THEME as o, WORKBENCH_THEMES as E, WORKBENCH_THEME_IDS as _, isWorkbenchThemeId as t, workbenchThemeMeta as O } from "./components/workbench/workbenchThemes.js";
 import { DEFAULT_WORKBENCH_VIEWPORT as T, WORKBENCH_BACKGROUND_REGION_FILTER_ID as R, WORKBENCH_LAYER_COMPONENT_FILTER_IDS as c, WORKBENCH_STICKY_FILTER_ID as N, WORKBENCH_TEXT_FILTER_ID as C, WORKBENCH_WIDGET_TYPES as n } from "./components/workbench/types.js";
-import { WIDGET_REGISTRY as K, createWorkbenchFilterState as a, getWidgetEntry as h, isValidWorkbenchWidgetType as B, resolveWorkbenchWidgetDefinitions as H } from "./components/workbench/widgets/widgetRegistry.js";
-import { WORKBENCH_BACKGROUND_MATERIALS as i, WORKBENCH_DEFAULT_BACKGROUND_MATERIAL as S, WORKBENCH_DEFAULT_REGION_FILL as b, WORKBENCH_DEFAULT_STICKY_NOTE_COLOR as k, WORKBENCH_DEFAULT_TEXT_COLOR as D, WORKBENCH_DEFAULT_TEXT_FONT as F, WORKBENCH_REGION_FILL_OPTIONS as d, WORKBENCH_STICKY_NOTE_COLORS as f, WORKBENCH_TEXT_COLOR_OPTIONS as A, WORKBENCH_TEXT_EMOJI_OPTIONS as m, WORKBENCH_TEXT_FONT_OPTIONS as p } from "./components/workbench/workbenchOptions.js";
+import { WIDGET_REGISTRY as a, createWorkbenchFilterState as h, getWidgetEntry as K, isValidWorkbenchWidgetType as B, resolveWorkbenchWidgetDefinitions as k } from "./components/workbench/widgets/widgetRegistry.js";
+import { WORKBENCH_BACKGROUND_MATERIALS as L, WORKBENCH_DEFAULT_BACKGROUND_MATERIAL as S, WORKBENCH_DEFAULT_REGION_FILL as b, WORKBENCH_DEFAULT_STICKY_NOTE_COLOR as i, WORKBENCH_DEFAULT_TEXT_COLOR as D, WORKBENCH_DEFAULT_TEXT_FONT as F, WORKBENCH_REGION_FILL_OPTIONS as d, WORKBENCH_STICKY_NOTE_COLORS as f, WORKBENCH_TEXT_COLOR_OPTIONS as p, WORKBENCH_TEXT_EMOJI_OPTIONS as m, WORKBENCH_TEXT_FONT_OPTIONS as A } from "./components/workbench/workbenchOptions.js";
 import { WorkbenchContextMenu as x } from "./components/workbench/WorkbenchContextMenu.js";
-import { WorkbenchOverlay as U } from "./components/workbench/WorkbenchOverlay.js";
-import { WorkbenchSurface as s } from "./components/workbench/WorkbenchSurface.js";
-import { WorkbenchThemeSelector as P } from "./components/workbench/WorkbenchThemeSelector.js";
-import { createDefaultWorkbenchState as X, createWorkbenchId as Y, createWorkbenchProjectedRect as v, createWorkbenchRenderLayerMap as y, createWorkbenchViewportCenteredOnWidget as V, createWorkbenchViewportFitForWidget as w, createWorkbenchWidgetFrame as j, createWorkbenchWidgetSurfaceMetrics as z, resolveWorkbenchProjectedSurfaceScaleBehavior as J, resolveWorkbenchWidgetRenderMode as q, sanitizeWorkbenchState as Q } from "./components/workbench/workbenchHelpers.js";
-import { useWorkbenchModel as $ } from "./components/workbench/useWorkbenchModel.js";
+import { WorkbenchDockPopoverSurface as P } from "./components/workbench/WorkbenchDockPopoverSurface.js";
+import { WorkbenchOverlay as g } from "./components/workbench/WorkbenchOverlay.js";
+import { WorkbenchSurface as G } from "./components/workbench/WorkbenchSurface.js";
+import { WorkbenchThemeSelector as v } from "./components/workbench/WorkbenchThemeSelector.js";
+import { createDefaultWorkbenchState as Y, createWorkbenchId as y, createWorkbenchProjectedRect as V, createWorkbenchRenderLayerMap as w, createWorkbenchViewportCenteredOnWidget as j, createWorkbenchViewportFitForWidget as z, createWorkbenchWidgetFrame as J, createWorkbenchWidgetSurfaceMetrics as q, resolveWorkbenchProjectedSurfaceScaleBehavior as Q, resolveWorkbenchWidgetRenderMode as Z, sanitizeWorkbenchState as $ } from "./components/workbench/workbenchHelpers.js";
+import { useWorkbenchModel as re } from "./components/workbench/useWorkbenchModel.js";
 export {
-  E as DEFAULT_WORKBENCH_THEME,
+  o as DEFAULT_WORKBENCH_THEME,
   T as DEFAULT_WORKBENCH_VIEWPORT,
-  K as WIDGET_REGISTRY,
-  i as WORKBENCH_BACKGROUND_MATERIALS,
+  a as WIDGET_REGISTRY,
+  L as WORKBENCH_BACKGROUND_MATERIALS,
   R as WORKBENCH_BACKGROUND_REGION_FILTER_ID,
   S as WORKBENCH_DEFAULT_BACKGROUND_MATERIAL,
   b as WORKBENCH_DEFAULT_REGION_FILL,
-  k as WORKBENCH_DEFAULT_STICKY_NOTE_COLOR,
+  i as WORKBENCH_DEFAULT_STICKY_NOTE_COLOR,
   D as WORKBENCH_DEFAULT_TEXT_COLOR,
   F as WORKBENCH_DEFAULT_TEXT_FONT,
   c as WORKBENCH_LAYER_COMPONENT_FILTER_IDS,
   d as WORKBENCH_REGION_FILL_OPTIONS,
   N as WORKBENCH_STICKY_FILTER_ID,
   f as WORKBENCH_STICKY_NOTE_COLORS,
-  A as WORKBENCH_TEXT_COLOR_OPTIONS,
+  p as WORKBENCH_TEXT_COLOR_OPTIONS,
   m as WORKBENCH_TEXT_EMOJI_OPTIONS,
   C as WORKBENCH_TEXT_FILTER_ID,
-  p as WORKBENCH_TEXT_FONT_OPTIONS,
-  _ as WORKBENCH_THEMES,
-  o as WORKBENCH_THEME_IDS,
+  A as WORKBENCH_TEXT_FONT_OPTIONS,
+  E as WORKBENCH_THEMES,
+  _ as WORKBENCH_THEME_IDS,
   n as WORKBENCH_WIDGET_TYPES,
   x as WorkbenchContextMenu,
-  U as WorkbenchOverlay,
-  s as WorkbenchSurface,
-  P as WorkbenchThemeSelector,
-  X as createDefaultWorkbenchState,
-  a as createWorkbenchFilterState,
-  Y as createWorkbenchId,
-  v as createWorkbenchProjectedRect,
-  y as createWorkbenchRenderLayerMap,
-  V as createWorkbenchViewportCenteredOnWidget,
-  w as createWorkbenchViewportFitForWidget,
-  j as createWorkbenchWidgetFrame,
-  z as createWorkbenchWidgetSurfaceMetrics,
-  h as getWidgetEntry,
+  P as WorkbenchDockPopoverSurface,
+  g as WorkbenchOverlay,
+  G as WorkbenchSurface,
+  v as WorkbenchThemeSelector,
+  Y as createDefaultWorkbenchState,
+  h as createWorkbenchFilterState,
+  y as createWorkbenchId,
+  V as createWorkbenchProjectedRect,
+  w as createWorkbenchRenderLayerMap,
+  j as createWorkbenchViewportCenteredOnWidget,
+  z as createWorkbenchViewportFitForWidget,
+  J as createWorkbenchWidgetFrame,
+  q as createWorkbenchWidgetSurfaceMetrics,
+  K as getWidgetEntry,
   B as isValidWorkbenchWidgetType,
-  O as isWorkbenchThemeId,
-  J as resolveWorkbenchProjectedSurfaceScaleBehavior,
-  H as resolveWorkbenchWidgetDefinitions,
-  q as resolveWorkbenchWidgetRenderMode,
-  Q as sanitizeWorkbenchState,
-  $ as useWorkbenchModel,
-  t as workbenchThemeMeta
+  t as isWorkbenchThemeId,
+  Q as resolveWorkbenchProjectedSurfaceScaleBehavior,
+  k as resolveWorkbenchWidgetDefinitions,
+  Z as resolveWorkbenchWidgetRenderMode,
+  $ as sanitizeWorkbenchState,
+  re as useWorkbenchModel,
+  O as workbenchThemeMeta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.41.4",
+  "version": "0.42.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",