@floegence/floe-webapp-core 0.34.0 → 0.35.1

package/dist/index.js

@@ -1,118 +1,120 @@
 import { FloeProvider as r } from "./app/FloeProvider.js";
-import { applyTheme as i, builtInThemes as n, getSystemTheme as s } from "./styles/themes/index.js";
-import { CommandProvider as a, createCommandService as p, useCommand as d } from "./context/CommandContext.js";
-import { ComponentRegistryProvider as l, createComponentRegistry as u, hasComponentRegistryContext as x, useComponentContextFactory as g, useComponentRegistry as c, useOptionalComponentRegistry as C } from "./context/ComponentRegistry.js";
-import { DEFAULT_FLOE_CONFIG as v, FloeConfigProvider as F, useFloeConfig as D, useResolvedFloeConfig as P } from "./context/FloeConfigContext.js";
-import { DeckProvider as I, createDeckService as R, useDeck as T } from "./context/DeckContext.js";
-import { FileBrowserDragProvider as b, hasFileBrowserDragContext as k, useFileBrowserDrag as B } from "./context/FileBrowserDragContext.js";
-import { LayoutProvider as W, createLayoutService as L, useLayout as N } from "./context/LayoutContext.js";
-import { NotificationContainer as G, NotificationProvider as z, createNotificationService as K, useNotification as O } from "./context/NotificationContext.js";
-import { ThemeProvider as V, createThemeService as _, useTheme as H } from "./context/ThemeContext.js";
-import { ViewActivationProvider as Q, useViewActivation as U } from "./context/ViewActivationContext.js";
-import { WidgetRegistryProvider as q, createWidgetRegistry as J, useWidgetRegistry as X } from "./context/WidgetRegistry.js";
-import { WidgetStateProvider as Z, useCurrentWidgetId as $, useWidgetState as ee, useWidgetStateContext as oe } from "./context/WidgetStateContext.js";
-import { applyDragDelta as te, applyResizeDelta as ie, getGridCellSize as ne, pixelDeltaToGridDelta as se, positionToGridArea as me, snapToGrid as ae } from "./utils/gridLayout.js";
-import { checkCollision as de, constrainPosition as fe, findFreePosition as le, hasCollision as ue } from "./utils/gridCollision.js";
-import { cn as ge } from "./utils/cn.js";
-import { createSimpleContext as Ce } from "./context/createSimpleContext.js";
-import { deferAfterPaint as ve, deferNonBlocking as Fe } from "./utils/defer.js";
-import { duration as Pe, easing as he, fadeIn as Ie, listContainer as Re, listItem as Te, panelResize as Se, popIn as be, scaleIn as ke, sidebarVariants as Be, slideInFromBottom as we, slideInFromLeft as We, slideInFromRight as Le, slideInFromTop as Ne, springConfig as Ae } from "./utils/animations.js";
-import { formatKeybind as ze, matchKeybind as Ke, parseKeybind as Oe } from "./utils/keybind.js";
-import { isTypingElement as Ve, shouldIgnoreHotkeys as _e } from "./utils/dom.js";
-import { lockBodyStyle as Me } from "./utils/bodyStyleLock.js";
-import { registerCommandContributions as Ue, useCommandContributions as je } from "./hooks/useCommandContributions.js";
-import { useDebounce as Je } from "./hooks/useDebounce.js";
-import { useDeckDrag as Ye } from "./hooks/useDeckDrag.js";
-import { useFileBrowserDropTarget as $e, useFileBrowserItemDrag as eo } from "./hooks/useFileBrowserDrag.js";
-import { useKeybind as ro } from "./hooks/useKeybind.js";
-import { useMediaQuery as io } from "./hooks/useMediaQuery.js";
-import { usePersisted as so } from "./hooks/usePersisted.js";
-import { useResizeObserver as ao } from "./hooks/useResizeObserver.js";
+import { applyTheme as i, builtInThemes as n, getSystemTheme as s, resolveThemeTokenOverrides as m, syncThemeTokenOverrides as a } from "./styles/themes/index.js";
+import { CommandProvider as d, createCommandService as f, useCommand as l } from "./context/CommandContext.js";
+import { ComponentRegistryProvider as x, createComponentRegistry as g, hasComponentRegistryContext as c, useComponentContextFactory as C, useComponentRegistry as y, useOptionalComponentRegistry as v } from "./context/ComponentRegistry.js";
+import { DEFAULT_FLOE_CONFIG as D, FloeConfigProvider as T, useFloeConfig as P, useResolvedFloeConfig as h } from "./context/FloeConfigContext.js";
+import { DeckProvider as R, createDeckService as S, useDeck as b } from "./context/DeckContext.js";
+import { FileBrowserDragProvider as B, hasFileBrowserDragContext as w, useFileBrowserDrag as W } from "./context/FileBrowserDragContext.js";
+import { LayoutProvider as N, createLayoutService as O, useLayout as A } from "./context/LayoutContext.js";
+import { NotificationContainer as z, NotificationProvider as K, createNotificationService as E, useNotification as V } from "./context/NotificationContext.js";
+import { ThemeProvider as H, createThemeService as M, useTheme as Q } from "./context/ThemeContext.js";
+import { ViewActivationProvider as j, useViewActivation as q } from "./context/ViewActivationContext.js";
+import { WidgetRegistryProvider as X, createWidgetRegistry as Y, useWidgetRegistry as Z } from "./context/WidgetRegistry.js";
+import { WidgetStateProvider as ee, useCurrentWidgetId as oe, useWidgetState as re, useWidgetStateContext as te } from "./context/WidgetStateContext.js";
+import { applyDragDelta as ne, applyResizeDelta as se, getGridCellSize as me, pixelDeltaToGridDelta as ae, positionToGridArea as pe, snapToGrid as de } from "./utils/gridLayout.js";
+import { checkCollision as le, constrainPosition as ue, findFreePosition as xe, hasCollision as ge } from "./utils/gridCollision.js";
+import { cn as Ce } from "./utils/cn.js";
+import { createSimpleContext as ve } from "./context/createSimpleContext.js";
+import { deferAfterPaint as De, deferNonBlocking as Te } from "./utils/defer.js";
+import { duration as he, easing as Ie, fadeIn as Re, listContainer as Se, listItem as be, panelResize as ke, popIn as Be, scaleIn as we, sidebarVariants as We, slideInFromBottom as Le, slideInFromLeft as Ne, slideInFromRight as Oe, slideInFromTop as Ae, springConfig as Ge } from "./utils/animations.js";
+import { formatKeybind as Ke, matchKeybind as Ee, parseKeybind as Ve } from "./utils/keybind.js";
+import { isTypingElement as He, shouldIgnoreHotkeys as Me } from "./utils/dom.js";
+import { lockBodyStyle as Ue } from "./utils/bodyStyleLock.js";
+import { registerCommandContributions as qe, useCommandContributions as Je } from "./hooks/useCommandContributions.js";
+import { useDebounce as Ye } from "./hooks/useDebounce.js";
+import { useDeckDrag as $e } from "./hooks/useDeckDrag.js";
+import { useFileBrowserDropTarget as oo, useFileBrowserItemDrag as ro } from "./hooks/useFileBrowserDrag.js";
+import { useKeybind as io } from "./hooks/useKeybind.js";
+import { useMediaQuery as so } from "./hooks/useMediaQuery.js";
+import { usePersisted as ao } from "./hooks/usePersisted.js";
+import { useResizeObserver as fo } from "./hooks/useResizeObserver.js";
 export {
-  a as CommandProvider,
-  l as ComponentRegistryProvider,
-  v as DEFAULT_FLOE_CONFIG,
-  I as DeckProvider,
-  b as FileBrowserDragProvider,
-  F as FloeConfigProvider,
+  d as CommandProvider,
+  x as ComponentRegistryProvider,
+  D as DEFAULT_FLOE_CONFIG,
+  R as DeckProvider,
+  B as FileBrowserDragProvider,
+  T as FloeConfigProvider,
   r as FloeProvider,
-  W as LayoutProvider,
-  G as NotificationContainer,
-  z as NotificationProvider,
-  V as ThemeProvider,
-  Q as ViewActivationProvider,
-  q as WidgetRegistryProvider,
-  Z as WidgetStateProvider,
-  te as applyDragDelta,
-  ie as applyResizeDelta,
+  N as LayoutProvider,
+  z as NotificationContainer,
+  K as NotificationProvider,
+  H as ThemeProvider,
+  j as ViewActivationProvider,
+  X as WidgetRegistryProvider,
+  ee as WidgetStateProvider,
+  ne as applyDragDelta,
+  se as applyResizeDelta,
   i as applyTheme,
   n as builtInThemes,
-  de as checkCollision,
-  ge as cn,
-  fe as constrainPosition,
-  p as createCommandService,
-  u as createComponentRegistry,
-  R as createDeckService,
-  L as createLayoutService,
-  K as createNotificationService,
-  Ce as createSimpleContext,
-  _ as createThemeService,
-  J as createWidgetRegistry,
-  ve as deferAfterPaint,
-  Fe as deferNonBlocking,
-  Pe as duration,
-  he as easing,
-  Ie as fadeIn,
-  le as findFreePosition,
-  ze as formatKeybind,
-  ne as getGridCellSize,
+  le as checkCollision,
+  Ce as cn,
+  ue as constrainPosition,
+  f as createCommandService,
+  g as createComponentRegistry,
+  S as createDeckService,
+  O as createLayoutService,
+  E as createNotificationService,
+  ve as createSimpleContext,
+  M as createThemeService,
+  Y as createWidgetRegistry,
+  De as deferAfterPaint,
+  Te as deferNonBlocking,
+  he as duration,
+  Ie as easing,
+  Re as fadeIn,
+  xe as findFreePosition,
+  Ke as formatKeybind,
+  me as getGridCellSize,
   s as getSystemTheme,
-  ue as hasCollision,
-  x as hasComponentRegistryContext,
-  k as hasFileBrowserDragContext,
-  Ve as isTypingElement,
-  Re as listContainer,
-  Te as listItem,
-  Me as lockBodyStyle,
-  Ke as matchKeybind,
-  Se as panelResize,
-  Oe as parseKeybind,
-  se as pixelDeltaToGridDelta,
-  be as popIn,
-  me as positionToGridArea,
-  Ue as registerCommandContributions,
-  ke as scaleIn,
-  _e as shouldIgnoreHotkeys,
-  Be as sidebarVariants,
-  we as slideInFromBottom,
-  We as slideInFromLeft,
-  Le as slideInFromRight,
-  Ne as slideInFromTop,
-  ae as snapToGrid,
-  Ae as springConfig,
-  d as useCommand,
-  je as useCommandContributions,
-  g as useComponentContextFactory,
-  c as useComponentRegistry,
-  $ as useCurrentWidgetId,
-  Je as useDebounce,
-  T as useDeck,
-  Ye as useDeckDrag,
-  B as useFileBrowserDrag,
-  $e as useFileBrowserDropTarget,
-  eo as useFileBrowserItemDrag,
-  D as useFloeConfig,
-  ro as useKeybind,
-  N as useLayout,
-  io as useMediaQuery,
-  O as useNotification,
-  C as useOptionalComponentRegistry,
-  so as usePersisted,
-  ao as useResizeObserver,
-  P as useResolvedFloeConfig,
-  H as useTheme,
-  U as useViewActivation,
-  X as useWidgetRegistry,
-  ee as useWidgetState,
-  oe as useWidgetStateContext
+  ge as hasCollision,
+  c as hasComponentRegistryContext,
+  w as hasFileBrowserDragContext,
+  He as isTypingElement,
+  Se as listContainer,
+  be as listItem,
+  Ue as lockBodyStyle,
+  Ee as matchKeybind,
+  ke as panelResize,
+  Ve as parseKeybind,
+  ae as pixelDeltaToGridDelta,
+  Be as popIn,
+  pe as positionToGridArea,
+  qe as registerCommandContributions,
+  m as resolveThemeTokenOverrides,
+  we as scaleIn,
+  Me as shouldIgnoreHotkeys,
+  We as sidebarVariants,
+  Le as slideInFromBottom,
+  Ne as slideInFromLeft,
+  Oe as slideInFromRight,
+  Ae as slideInFromTop,
+  de as snapToGrid,
+  Ge as springConfig,
+  a as syncThemeTokenOverrides,
+  l as useCommand,
+  Je as useCommandContributions,
+  C as useComponentContextFactory,
+  y as useComponentRegistry,
+  oe as useCurrentWidgetId,
+  Ye as useDebounce,
+  b as useDeck,
+  $e as useDeckDrag,
+  W as useFileBrowserDrag,
+  oo as useFileBrowserDropTarget,
+  ro as useFileBrowserItemDrag,
+  P as useFloeConfig,
+  io as useKeybind,
+  A as useLayout,
+  so as useMediaQuery,
+  V as useNotification,
+  v as useOptionalComponentRegistry,
+  ao as usePersisted,
+  fo as useResizeObserver,
+  h as useResolvedFloeConfig,
+  Q as useTheme,
+  q as useViewActivation,
+  Z as useWidgetRegistry,
+  re as useWidgetState,
+  te as useWidgetStateContext
 };

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

@@ -1,4 +1,21 @@
 export type ThemeType = 'light' | 'dark' | 'system';
+export type FloeThemeTokenMap = Partial<Record<`--${string}`, string>>;
+export interface FloeThemeTokenOverrides {
+    shared?: FloeThemeTokenMap;
+    light?: FloeThemeTokenMap;
+    dark?: FloeThemeTokenMap;
+}
+export interface ThemeTarget {
+    classList: {
+        add: (...tokens: string[]) => void;
+        remove: (...tokens: string[]) => void;
+    };
+    style: {
+        colorScheme?: string;
+        setProperty: (property: string, value: string) => void;
+        removeProperty: (property: string) => void;
+    };
+}
 export interface FloeTheme {
     name: string;
     displayName: string;
@@ -6,4 +23,6 @@ export interface FloeTheme {
 }
 export declare const builtInThemes: FloeTheme[];
 export declare function getSystemTheme(): 'light' | 'dark';
-export declare function applyTheme(theme: ThemeType): void;
+export declare function resolveThemeTokenOverrides(tokens: FloeThemeTokenOverrides | undefined, resolvedTheme: 'light' | 'dark'): FloeThemeTokenMap;
+export declare function applyTheme(theme: ThemeType, target?: ThemeTarget): void;
+export declare function syncThemeTokenOverrides(tokens: FloeThemeTokenMap | undefined, previousTokenNames?: Iterable<string>, target?: ThemeTarget): string[];

package/dist/styles/themes/index.js

@@ -2,16 +2,43 @@ const d = [
   { name: "light", displayName: "Light", type: "light" },
   { name: "dark", displayName: "Dark", type: "dark" }
 ];
-function o() {
+function l() {
   return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function i(t) {
-  if (typeof document > "u") return;
-  const e = document.documentElement, n = t === "system" ? o() : t;
-  e.classList.remove("light", "dark"), e.classList.add(n), e.style.colorScheme = n;
+function c(e) {
+  if (e) return e;
+  if (!(typeof document > "u"))
+    return document.documentElement;
+}
+function m(e, o) {
+  return {
+    ...e?.shared ?? {},
+    ...o === "light" ? e?.light ?? {} : e?.dark ?? {}
+  };
+}
+function u(e, o) {
+  const r = c(o);
+  if (!r) return;
+  const n = e === "system" ? l() : e;
+  r.classList.remove("light", "dark"), r.classList.add(n), r.style.colorScheme = n;
+}
+function f(e, o = [], r) {
+  const n = c(r);
+  if (!n) return [];
+  const i = Object.entries(e ?? {}).filter((t) => {
+    const [, s] = t;
+    return typeof s == "string" && s.length > 0;
+  }), a = new Set(i.map(([t]) => t));
+  for (const t of o)
+    a.has(t) || n.style.removeProperty(t);
+  for (const [t, s] of i)
+    n.style.setProperty(t, s);
+  return [...a];
 }
 export {
-  i as applyTheme,
+  u as applyTheme,
   d as builtInThemes,
-  o as getSystemTheme
+  l as getSystemTheme,
+  m as resolveThemeTokenOverrides,
+  f as syncThemeTokenOverrides
 };