@floegence/floe-webapp-core 0.86.37 → 0.86.39

package/dist/chat.css

@@ -365,12 +365,39 @@
 }
 
 .chat-md-inline-code {
-  padding: 0.125rem 0.375rem;
+  padding: 0.12em 0.36em;
+  border: 0;
   border-radius: 0.25rem;
-  background-color: color-mix(in srgb, var(--muted) 70%, transparent);
+  background-color: var(--inline-code-background);
+  color: var(--inline-code-foreground);
   font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  color: var(--primary);
+  font-size: 0.91em;
+  font-weight: 400;
+  line-height: inherit;
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+  word-break: normal;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.chat-container .chat-md-inline-code::selection,
+.chat-message-bubble-user .chat-md-inline-code::selection {
+  background-color: var(--inline-code-foreground);
+  color: var(--inline-code-background);
+}
+
+@media (forced-colors: active) {
+  .chat-md-inline-code {
+    background-color: Canvas;
+    color: CanvasText;
+  }
+
+  .chat-container .chat-md-inline-code::selection,
+  .chat-message-bubble-user .chat-md-inline-code::selection {
+    background-color: Highlight;
+    color: HighlightText;
+  }
 }
 
 /* Markdown code blocks - always dark background

package/dist/full.js

@@ -186,9 +186,10 @@ import { useDeckDrag as Lx } from "./hooks/useDeckDrag.js";
 import { useFileBrowserDropTarget as yx, useFileBrowserItemDrag as Dx } from "./hooks/useFileBrowserDrag.js";
 import { useKeybind as vx } from "./hooks/useKeybind.js";
 import { useMediaQuery as Bx } from "./hooks/useMediaQuery.js";
-import { usePersisted as Wx } from "./hooks/usePersisted.js";
-import { useResizeObserver as Nx } from "./hooks/useResizeObserver.js";
-import { useVirtualList as Hx } from "./components/chat/hooks/useVirtualList.js";
+import { useOverlayMask as Wx } from "./hooks/useOverlayMask.js";
+import { usePersisted as Nx } from "./hooks/usePersisted.js";
+import { useResizeObserver as Hx } from "./hooks/useResizeObserver.js";
+import { useVirtualList as Gx } from "./components/chat/hooks/useVirtualList.js";
 export {
   R as Activity,
   Zt as ActivityAppsMain,
@@ -885,12 +886,13 @@ export {
   Rm as useMobileLayout,
   js as useNotification,
   ka as useOptionalComponentRegistry,
-  Wx as usePersisted,
-  Nx as useResizeObserver,
+  Wx as useOverlayMask,
+  Nx as usePersisted,
+  Hx as useResizeObserver,
   Ba as useResolvedFloeConfig,
   Rf as useTheme,
   Uf as useViewActivation,
-  Hx as useVirtualList,
+  Gx as useVirtualList,
   jf as useWidgetRegistry,
   td as useWidgetState,
   id as useWidgetStateContext,

package/dist/hooks/index.d.ts

@@ -8,3 +8,4 @@ export { usePersisted } from './usePersisted';
 export { useDeckDrag } from './useDeckDrag';
 export { useFileBrowserItemDrag, useFileBrowserDropTarget, type UseFileBrowserItemDragOptions, type FileBrowserItemDragHandlers, type UseFileBrowserDropTargetOptions, type FileBrowserDropTargetResult, } from './useFileBrowserDrag';
 export { createRetainedContent } from './createRetainedContent';
+export { useOverlayMask, type UseOverlayMaskOptions } from './useOverlayMask';

package/dist/index.js

@@ -1,19 +1,19 @@
 import { FloeProvider as r } from "./app/FloeProvider.js";
-import { applyShellThemeAttribute as i, applySurfaceStyleAttribute as s, applyTheme as n, builtInThemes as a, getSystemTheme as m, isFloeSurfaceStyle as l, isThemeType as p, mergeThemeTokenMaps as f, resolveThemeTokenOverrides as d, resolveThemeTokens as T, syncThemeTokenOverrides as c } from "./styles/themes/index.js";
-import { floeColorTokenCategories as x, floeDesignTokens as g, floeFontFamilyTokens as y, floeMotionTokens as C, floeRadiusTokens as S, floeSharedCssVariables as h, floeSpacingTokens as F, floeSurfaceTokens as v, floeThemeColorVariables as P, floeTypographyTokens as R, getFloeColorTokenValue as k } from "./styles/tokens.js";
-import { BUILT_IN_SHELL_THEME_DEFAULTS as D, REQUIRED_SHELL_THEME_TOKENS as E, assertUniqueThemePresetNames as b, builtInShellThemePresets as L, createShellThemePreset as _, getShellThemePresetsForMode as A, normalizeShellThemeSelection as N, presetSupportsMode as O, resolveShellThemePresetName as M } from "./styles/themes/presets.js";
+import { applyShellThemeAttribute as i, applySurfaceStyleAttribute as s, applyTheme as n, builtInThemes as a, getSystemTheme as m, isFloeSurfaceStyle as l, isThemeType as p, mergeThemeTokenMaps as f, resolveThemeTokenOverrides as d, resolveThemeTokens as T, syncThemeTokenOverrides as u } from "./styles/themes/index.js";
+import { floeColorTokenCategories as x, floeDesignTokens as g, floeFontFamilyTokens as y, floeMotionTokens as C, floeRadiusTokens as S, floeSharedCssVariables as h, floeSpacingTokens as F, floeSurfaceTokens as v, floeThemeColorVariables as P, floeTypographyTokens as k, getFloeColorTokenValue as R } from "./styles/tokens.js";
+import { BUILT_IN_SHELL_THEME_DEFAULTS as D, REQUIRED_SHELL_THEME_TOKENS as E, assertUniqueThemePresetNames as b, builtInShellThemePresets as L, createShellThemePreset as _, getShellThemePresetsForMode as A, normalizeShellThemeSelection as O, presetSupportsMode as M, resolveShellThemePresetName as N } from "./styles/themes/presets.js";
 import { CommandProvider as U, createCommandService as w, useCommand as G } from "./context/CommandContext.js";
 import { ComponentRegistryProvider as W, createComponentRegistry as K, hasComponentRegistryContext as V, useComponentContextFactory as z, useComponentRegistry as Q, useOptionalComponentRegistry as q } from "./context/ComponentRegistry.js";
 import { DEFAULT_FLOE_CONFIG as j, FloeConfigProvider as J, useFloeConfig as X, useResolvedFloeConfig as Z } from "./context/FloeConfigContext.js";
 import { DeckProvider as ee, createDeckService as oe, useDeck as re } from "./context/DeckContext.js";
 import { FLOE_GEOMETRY_SURFACE_ATTR as ie, FLOE_HOT_INTERACTION_ATTR as se, startHotInteraction as ne } from "./utils/hotInteraction.js";
 import { FileBrowserDragProvider as me, hasFileBrowserDragContext as le, useFileBrowserDrag as pe } from "./context/FileBrowserDragContext.js";
-import { LayoutProvider as de, createLayoutService as Te, useLayout as ce, useMobileLayout as ue } from "./context/LayoutContext.js";
+import { LayoutProvider as de, createLayoutService as Te, useLayout as ue, useMobileLayout as ce } from "./context/LayoutContext.js";
 import { NotificationContainer as ge, NotificationProvider as ye, createNotificationService as Ce, useNotification as Se } from "./context/NotificationContext.js";
 import { ThemeProvider as Fe, createThemeService as ve, useTheme as Pe } from "./context/ThemeContext.js";
-import { ViewActivationProvider as ke, useViewActivation as Ie } from "./context/ViewActivationContext.js";
+import { ViewActivationProvider as Re, useViewActivation as Ie } from "./context/ViewActivationContext.js";
 import { WidgetRegistryProvider as Ee, createWidgetRegistry as be, useWidgetRegistry as Le } from "./context/WidgetRegistry.js";
-import { WidgetStateProvider as Ae, useCurrentWidgetId as Ne, useWidgetState as Oe, useWidgetStateContext as Me } from "./context/WidgetStateContext.js";
+import { WidgetStateProvider as Ae, useCurrentWidgetId as Oe, useWidgetState as Me, useWidgetStateContext as Ne } from "./context/WidgetStateContext.js";
 import { applyDragDelta as Ue, applyResizeDelta as we, getGridCellSize as Ge, pixelDeltaToGridDelta as He, positionToGridArea as We, snapToGrid as Ke } from "./utils/gridLayout.js";
 import { calculateFitScale as ze } from "./utils/fitScale.js";
 import { checkCollision as qe, constrainPosition as Ye, findFreePosition as je, hasCollision as Je, sameGridPosition as Xe } from "./utils/gridCollision.js";
@@ -23,9 +23,9 @@ import { createRetainedContent as to } from "./hooks/createRetainedContent.js";
 import { createSimpleContext as so } from "./context/createSimpleContext.js";
 import { createUIFirstSelection as ao } from "./utils/uiFirstSelection.js";
 import { deferAfterPaint as lo, deferNonBlocking as po } from "./utils/defer.js";
-import { duration as To, easing as co, fadeIn as uo, listContainer as xo, listItem as go, panelResize as yo, popIn as Co, scaleIn as So, sidebarVariants as ho, slideInFromBottom as Fo, slideInFromLeft as vo, slideInFromRight as Po, slideInFromTop as Ro, springConfig as ko } from "./utils/animations.js";
+import { duration as To, easing as uo, fadeIn as co, listContainer as xo, listItem as go, panelResize as yo, popIn as Co, scaleIn as So, sidebarVariants as ho, slideInFromBottom as Fo, slideInFromLeft as vo, slideInFromRight as Po, slideInFromTop as ko, springConfig as Ro } from "./utils/animations.js";
 import { formatKeybind as Do, isMacLikePlatform as Eo, isPrimaryModKeyPressed as bo, matchKeybind as Lo, parseKeybind as _o } from "./utils/keybind.js";
-import { isTypingElement as No, shouldIgnoreHotkeys as Oo } from "./utils/dom.js";
+import { isTypingElement as Oo, shouldIgnoreHotkeys as Mo } from "./utils/dom.js";
 import { lockBodyStyle as Bo } from "./utils/bodyStyleLock.js";
 import { registerCommandContributions as wo, useCommandContributions as Go } from "./hooks/useCommandContributions.js";
 import { secureRandomUUID as Wo } from "./utils/secureRandom.js";
@@ -34,8 +34,9 @@ import { useDeckDrag as Qo } from "./hooks/useDeckDrag.js";
 import { useFileBrowserDropTarget as Yo, useFileBrowserItemDrag as jo } from "./hooks/useFileBrowserDrag.js";
 import { useKeybind as Xo } from "./hooks/useKeybind.js";
 import { useMediaQuery as $o } from "./hooks/useMediaQuery.js";
-import { usePersisted as or } from "./hooks/usePersisted.js";
-import { useResizeObserver as tr } from "./hooks/useResizeObserver.js";
+import { useOverlayMask as or } from "./hooks/useOverlayMask.js";
+import { usePersisted as tr } from "./hooks/usePersisted.js";
+import { useResizeObserver as sr } from "./hooks/useResizeObserver.js";
 export {
   D as BUILT_IN_SHELL_THEME_DEFAULTS,
   U as CommandProvider,
@@ -52,7 +53,7 @@ export {
   ye as NotificationProvider,
   E as REQUIRED_SHELL_THEME_TOKENS,
   Fe as ThemeProvider,
-  ke as ViewActivationProvider,
+  Re as ViewActivationProvider,
   Ee as WidgetRegistryProvider,
   Ae as WidgetStateProvider,
   Ue as applyDragDelta,
@@ -82,8 +83,8 @@ export {
   lo as deferAfterPaint,
   po as deferNonBlocking,
   To as duration,
-  co as easing,
-  uo as fadeIn,
+  uo as easing,
+  co as fadeIn,
   je as findFreePosition,
   x as floeColorTokenCategories,
   g as floeDesignTokens,
@@ -94,9 +95,9 @@ export {
   F as floeSpacingTokens,
   v as floeSurfaceTokens,
   P as floeThemeColorVariables,
-  R as floeTypographyTokens,
+  k as floeTypographyTokens,
   Do as formatKeybind,
-  k as getFloeColorTokenValue,
+  R as getFloeColorTokenValue,
   Ge as getGridCellSize,
   A as getShellThemePresetsForMode,
   m as getSystemTheme,
@@ -107,41 +108,41 @@ export {
   Eo as isMacLikePlatform,
   bo as isPrimaryModKeyPressed,
   p as isThemeType,
-  No as isTypingElement,
+  Oo as isTypingElement,
   xo as listContainer,
   go as listItem,
   Bo as lockBodyStyle,
   Lo as matchKeybind,
   f as mergeThemeTokenMaps,
-  N as normalizeShellThemeSelection,
+  O as normalizeShellThemeSelection,
   yo as panelResize,
   _o as parseKeybind,
   He as pixelDeltaToGridDelta,
   Co as popIn,
   We as positionToGridArea,
-  O as presetSupportsMode,
+  M as presetSupportsMode,
   wo as registerCommandContributions,
-  M as resolveShellThemePresetName,
+  N as resolveShellThemePresetName,
   d as resolveThemeTokenOverrides,
   T as resolveThemeTokens,
   Xe as sameGridPosition,
   So as scaleIn,
   Wo as secureRandomUUID,
-  Oo as shouldIgnoreHotkeys,
+  Mo as shouldIgnoreHotkeys,
   ho as sidebarVariants,
   Fo as slideInFromBottom,
   vo as slideInFromLeft,
   Po as slideInFromRight,
-  Ro as slideInFromTop,
+  ko as slideInFromTop,
   Ke as snapToGrid,
-  ko as springConfig,
+  Ro as springConfig,
   ne as startHotInteraction,
-  c as syncThemeTokenOverrides,
+  u as syncThemeTokenOverrides,
   G as useCommand,
   Go as useCommandContributions,
   z as useComponentContextFactory,
   Q as useComponentRegistry,
-  Ne as useCurrentWidgetId,
+  Oe as useCurrentWidgetId,
   Vo as useDebounce,
   re as useDeck,
   Qo as useDeckDrag,
@@ -150,17 +151,18 @@ export {
   jo as useFileBrowserItemDrag,
   X as useFloeConfig,
   Xo as useKeybind,
-  ce as useLayout,
+  ue as useLayout,
   $o as useMediaQuery,
-  ue as useMobileLayout,
+  ce as useMobileLayout,
   Se as useNotification,
   q as useOptionalComponentRegistry,
-  or as usePersisted,
-  tr as useResizeObserver,
+  or as useOverlayMask,
+  tr as usePersisted,
+  sr as useResizeObserver,
   Z as useResolvedFloeConfig,
   Pe as useTheme,
   Ie as useViewActivation,
   Le as useWidgetRegistry,
-  Oe as useWidgetState,
-  Me as useWidgetStateContext
+  Me as useWidgetState,
+  Ne as useWidgetStateContext
 };

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

@@ -3,6 +3,8 @@ export declare const CLASSIC_LIGHT_CSS_TOKENS: {
     '--floe-window-titlebar-background': "var(--popover)";
     '--background': "#f8f7f2";
     '--foreground': "#303a34";
+    '--inline-code-foreground': "#4C6544";
+    '--inline-code-background': "#EAEBE4";
     '--primary': "#465a43";
     '--primary-foreground': "#f8faf5";
     '--secondary': "#eeefe8";
@@ -74,6 +76,8 @@ export declare const CLASSIC_DARK_CSS_TOKENS: {
     '--floe-window-titlebar-background': "var(--popover)";
     '--background': "#202223";
     '--foreground': "#e5e6e2";
+    '--inline-code-foreground': "#BBC9AF";
+    '--inline-code-background': "#2E3130";
     '--primary': "#bccbb8";
     '--primary-foreground': "#20291f";
     '--secondary': "#303435";

package/dist/styles/themes/classicSemanticTokens.js

@@ -1,22 +1,24 @@
 import { createProgressTokens as b } from "./progressTokens.js";
-import { LIGHT_WINDOW_TOKENS as l, DARK_WINDOW_TOKENS as h } from "./windowTokens.js";
+import { LIGHT_WINDOW_TOKENS as l, DARK_WINDOW_TOKENS as g } from "./windowTokens.js";
 function f(c) {
   const a = {}, n = (r, o = /* @__PURE__ */ new Set()) => {
     const e = c[r];
     if (!e || o.has(r)) return e;
-    const t = /^var\((--[\w-]+)\)$/u.exec(e)?.[1];
-    return t ? (o.add(r), n(t, o)) : e;
+    const i = /^var\((--[\w-]+)\)$/u.exec(e)?.[1];
+    return i ? (o.add(r), n(i, o)) : e;
   };
   for (const r of Object.keys(c))
     a[r] = n(r);
   return Object.freeze(a);
 }
-const i = {
+const d = {
   ...l,
   "--floe-window-background": "var(--popover)",
   "--floe-window-titlebar-background": "var(--popover)",
   "--background": "#f8f7f2",
   "--foreground": "#303a34",
+  "--inline-code-foreground": "#4C6544",
+  "--inline-code-background": "#EAEBE4",
   "--primary": "#465a43",
   "--primary-foreground": "#f8faf5",
   "--secondary": "#eeefe8",
@@ -78,12 +80,14 @@ const i = {
   "--selection-code-bg": "hsl(212 100% 67%)",
   "--selection-code-fg": "hsl(220 20% 8%)",
   "--glow": "#465a43"
-}, d = {
-  ...h,
+}, t = {
+  ...g,
   "--floe-window-background": "var(--popover)",
   "--floe-window-titlebar-background": "var(--popover)",
   "--background": "#202223",
   "--foreground": "#e5e6e2",
+  "--inline-code-foreground": "#BBC9AF",
+  "--inline-code-background": "#2E3130",
   "--primary": "#bccbb8",
   "--primary-foreground": "#20291f",
   "--secondary": "#303435",
@@ -145,10 +149,10 @@ const i = {
   "--selection-code-bg": "hsl(212 100% 67%)",
   "--selection-code-fg": "hsl(220 20% 8%)",
   "--glow": "hsl(217 65% 52%)"
-}, g = { ...i, ...b("light", i) }, s = { ...d, ...b("dark", d) }, p = f(g), v = f(s);
+}, h = { ...d, ...b("light", d) }, s = { ...t, ...b("dark", t) }, p = f(h), v = f(s);
 export {
   s as CLASSIC_DARK_CSS_TOKENS,
   v as CLASSIC_DARK_SEMANTIC_TOKENS,
-  g as CLASSIC_LIGHT_CSS_TOKENS,
+  h as CLASSIC_LIGHT_CSS_TOKENS,
   p 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 = '--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';
+type ShellThemeTokenName = '--floe-window-background' | '--floe-window-foreground' | '--floe-window-muted-foreground' | '--floe-window-titlebar-background' | '--floe-window-border' | '--floe-window-shadow' | '--background' | '--foreground' | '--inline-code-foreground' | '--inline-code-background' | '--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;
@@ -15,6 +15,11 @@ interface ShellThemePaletteDefinition {
     mode: FloeShellThemeMode;
     background: string;
     foreground: string;
+    /** Paired colors for inline code on reading surfaces. */
+    inlineCode?: {
+        foreground: string;
+        background: string;
+    };
     card: string;
     muted: string;
     accent?: string;