@floegence/floe-webapp-core 0.52.10 → 0.52.12

package/dist/components/ui/pointerSession.js

@@ -1,25 +1,25 @@
-function C(e) {
+function L(e) {
   if (e.ownerDocument) return e.ownerDocument;
   if (e.captureEl?.ownerDocument) return e.captureEl.ownerDocument;
   const n = e.pointerEvent.target;
   return n && typeof n == "object" && "ownerDocument" in n && n.ownerDocument instanceof Document ? n.ownerDocument : document;
 }
-function c(e, n) {
+function o(e, n) {
   return typeof e.buttons == "number" ? e.buttons : n;
 }
-function L(e, n) {
+function h(e, n) {
   return !e || e.pointerId === n;
 }
 function b(e) {
-  const n = C(e), l = n.defaultView ?? window, a = e.buttonMask ?? 1, h = c(e.pointerEvent, a), t = {
+  const n = L(e), l = n.defaultView ?? window, a = e.buttonMask ?? 1, P = o(e.pointerEvent, a), t = {
     pointerId: e.pointerEvent.pointerId,
     latestClientX: e.pointerEvent.clientX,
     latestClientY: e.pointerEvent.clientY,
-    latestButtons: h,
+    latestButtons: P,
     active: !0,
     captureActive: !1
-  }, o = (r) => {
-    !t.active || r.pointerId !== t.pointerId || (t.latestClientX = r.clientX, t.latestClientY = r.clientY, t.latestButtons = c(r, t.latestButtons));
+  }, c = (r) => {
+    !t.active || r.pointerId !== t.pointerId || (t.latestClientX = r.clientX, t.latestClientY = r.clientY, t.latestButtons = o(r, t.latestButtons));
   }, s = () => {
     if (t.active && !(!e.captureEl || typeof e.captureEl.setPointerCapture != "function"))
       try {
@@ -37,12 +37,12 @@ function b(e) {
     } finally {
       t.captureActive = !1;
     }
-  }, P = () => {
+  }, C = () => {
     n.removeEventListener("pointermove", p, !0), n.removeEventListener("pointerup", d, !0), n.removeEventListener("pointercancel", f, !0), n.removeEventListener("visibilitychange", E), l.removeEventListener("blur", v), e.captureEl?.removeEventListener("lostpointercapture", m);
   }, i = (r = {}) => {
     if (!t.active) return;
     const u = r.event;
-    L(u, t.pointerId) && (u && o(u), t.active = !1, P(), w(), e.onEnd({
+    h(u, t.pointerId) && (u && c(u), t.active = !1, C(), w(), e.onEnd({
       reason: r.reason ?? "manual_stop",
       commit: r.commit ?? !1,
       snapshot: t,
@@ -51,21 +51,29 @@ function b(e) {
   };
   function p(r) {
     if (!(!t.active || r.pointerId !== t.pointerId)) {
-      if (o(r), a > 0 && (c(r, t.latestButtons) & a) !== a) {
-        i({ reason: "buttons_released", commit: !0, event: r });
+      if (a > 0 && (o(r, t.latestButtons) & a) !== a) {
+        t.latestButtons = o(r, 0), i({
+          reason: "buttons_released",
+          commit: !0,
+          ...e.interruptionPosition === "last-held" ? {} : { event: r }
+        });
         return;
       }
-      e.onMove?.(r, t);
+      c(r), e.onMove?.(r, t);
     }
   }
   function d(r) {
     i({ reason: "pointer_up", commit: !0, event: r });
   }
   function f(r) {
-    i({ reason: "pointer_cancel", commit: !1, event: r });
+    h(r, t.pointerId) && i({
+      reason: "pointer_cancel",
+      commit: !1,
+      ...e.interruptionPosition === "last-held" ? {} : { event: r }
+    });
   }
   function m() {
-    i({ reason: "lost_pointer_capture", commit: !0 });
+    t.captureActive = !1, !e.continueOnCaptureLoss && i({ reason: "lost_pointer_capture", commit: !0 });
   }
   function v() {
     i({ reason: "window_blur", commit: !0 });
@@ -75,7 +83,7 @@ function b(e) {
   }
   return n.addEventListener("pointermove", p, !0), n.addEventListener("pointerup", d, !0), n.addEventListener("pointercancel", f, !0), n.addEventListener("visibilitychange", E), l.addEventListener("blur", v), e.captureEl?.addEventListener("lostpointercapture", m), e.capturePointer !== !1 && s(), {
     snapshot: () => t,
-    updatePointer: o,
+    updatePointer: c,
     capturePointer: s,
     stop: i
   };

package/dist/components/ui/surfaceFloatingPanelGeometry.d.ts

@@ -36,4 +36,4 @@ export declare function resolveSurfaceFloatingPanelInset(value: unknown): number
 export declare function resolveSurfaceFloatingPanelSnapThreshold(value: unknown): number;
 export declare function resolveSurfaceFloatingPanelBounds(geometry: SurfaceFloatingPanelGeometry, inset?: number): SurfaceFloatingPanelBounds;
 export declare function resolveSurfaceFloatingPanelPosition(bounds: SurfaceFloatingPanelBounds, placement: SurfaceFloatingPanelPosition): SurfaceFloatingPanelPosition;
-export declare function resolveSurfaceFloatingPanelSnap(position: SurfaceFloatingPanelPosition, bounds: SurfaceFloatingPanelBounds, threshold?: number): SurfaceFloatingPanelSnap | null;
+export declare function resolveSurfaceFloatingPanelSnap(position: SurfaceFloatingPanelPosition, bounds: SurfaceFloatingPanelBounds, threshold?: number, direction?: SurfaceFloatingPanelPosition): SurfaceFloatingPanelSnap | null;

package/dist/components/ui/surfaceFloatingPanelGeometry.js

@@ -1,78 +1,78 @@
 const u = 8;
-function h(t, n) {
-  const e = Number(t);
-  return Number.isFinite(e) && e >= 0 ? e : n;
+function m(t, n) {
+  const a = Number(t);
+  return Number.isFinite(a) && a >= 0 ? a : n;
 }
-function M(t, n = {}) {
-  const e = Math.max(0, t.width), o = Math.max(0, t.height), i = Math.min(h(n.left, 0), e), a = Math.min(h(n.top, 0), o), c = Math.min(h(n.right, 0), Math.max(0, e - i)), r = Math.min(h(n.bottom, 0), Math.max(0, o - a));
+function F(t, n = {}) {
+  const a = Math.max(0, t.width), e = Math.max(0, t.height), o = Math.min(m(n.left, 0), a), x = Math.min(m(n.top, 0), e), c = Math.min(m(n.right, 0), Math.max(0, a - o)), i = Math.min(m(n.bottom, 0), Math.max(0, e - x));
   return {
     ...t,
-    left: t.left + i,
-    top: t.top + a,
-    width: Math.max(0, e - i - c),
-    height: Math.max(0, o - a - r)
+    left: t.left + o,
+    top: t.top + x,
+    width: Math.max(0, a - o - c),
+    height: Math.max(0, e - x - i)
   };
 }
-function s(t) {
-  return h(t, 8);
-}
 function f(t) {
+  return m(t, 8);
+}
+function M(t) {
   const n = Number(t);
   return Number.isFinite(n) && n >= 0 ? n : 1 / 0;
 }
-function l(t, n, e, o) {
-  const i = Math.max(0, Number.isFinite(n) ? n : 0), a = Math.max(0, Number.isFinite(e) ? e : 0), c = Math.min(o, i / 2), r = t + c, m = Math.max(r, t + i - a - c);
-  return { min: r, max: m, room: Math.max(0, m - r) };
+function l(t, n, a, e) {
+  const o = Math.max(0, Number.isFinite(n) ? n : 0), x = Math.max(0, Number.isFinite(a) ? a : 0), c = Math.min(e, o / 2), i = t + c, h = Math.max(i, t + o - x - c);
+  return { min: i, max: h, room: Math.max(0, h - i) };
 }
-function F(t, n = 8) {
-  const e = s(n);
+function N(t, n = 8) {
+  const a = f(n);
   return {
-    x: l(t.left, t.width, t.panelWidth, e),
-    y: l(t.top, t.height, t.panelHeight, e)
+    x: l(t.left, t.width, t.panelWidth, a),
+    y: l(t.top, t.height, t.panelHeight, a)
   };
 }
-function N(t, n) {
+function y(t, n) {
   return {
     x: t.x.min + n.x * t.x.room,
     y: t.y.min + n.y * t.y.room
   };
 }
-function x(t, n) {
+function r(t, n) {
   return Math.max(n.min, Math.min(n.max, t));
 }
-function S(t, n, e = 1 / 0) {
-  const o = f(e), i = [
+function S(t, n, a = 1 / 0, e = { x: 0, y: 0 }) {
+  const o = M(a), x = [
     {
       edge: "left",
       distance: Math.max(0, t.x - n.x.min),
-      position: { x: n.x.min, y: x(t.y, n.y) }
+      position: { x: n.x.min, y: r(t.y, n.y) }
     },
     {
       edge: "right",
       distance: Math.max(0, n.x.max - t.x),
-      position: { x: n.x.max, y: x(t.y, n.y) }
+      position: { x: n.x.max, y: r(t.y, n.y) }
     },
     {
       edge: "top",
       distance: Math.max(0, t.y - n.y.min),
-      position: { x: x(t.x, n.x), y: n.y.min }
+      position: { x: r(t.x, n.x), y: n.y.min }
     },
     {
       edge: "bottom",
       distance: Math.max(0, n.y.max - t.y),
-      position: { x: x(t.x, n.x), y: n.y.max }
+      position: { x: r(t.x, n.x), y: n.y.max }
     }
-  ];
-  i.sort((c, r) => c.distance - r.distance);
-  const a = i[0];
-  return !a || a.distance > o ? null : { edge: a.edge, position: a.position };
+  ], c = { left: -e.x, right: e.x, top: -e.y, bottom: e.y };
+  x.sort((h, s) => Math.abs(h.distance - s.distance) < 0.01 ? c[s.edge] - c[h.edge] : h.distance - s.distance);
+  const i = x[0];
+  return !i || i.distance > o ? null : { edge: i.edge, position: i.position };
 }
 export {
   u as DEFAULT_SURFACE_FLOATING_PANEL_INSET,
-  M as insetSurfaceFloatingPanelGeometry,
-  F as resolveSurfaceFloatingPanelBounds,
-  s as resolveSurfaceFloatingPanelInset,
-  N as resolveSurfaceFloatingPanelPosition,
+  F as insetSurfaceFloatingPanelGeometry,
+  N as resolveSurfaceFloatingPanelBounds,
+  f as resolveSurfaceFloatingPanelInset,
+  y as resolveSurfaceFloatingPanelPosition,
   S as resolveSurfaceFloatingPanelSnap,
-  f as resolveSurfaceFloatingPanelSnapThreshold
+  M as resolveSurfaceFloatingPanelSnapThreshold
 };

package/dist/context/FloeConfigContext.d.ts

@@ -73,7 +73,7 @@ export interface FloeLayoutConfig {
 export interface FloeThemeConfig {
     storageKey: string;
     defaultTheme: ThemeType;
-    /** Surface material, independent of color palettes. Defaults to standard. */
+    /** Surface material, independent of color palettes. Defaults to soft-neumorphic. */
     defaultSurfaceStyle?: FloeSurfaceStyle;
     /** Defaults to `${storageKey}-surface-style`; uses the configured persistence service. */
     surfaceStyleStorageKey?: string;

package/dist/context/FloeConfigContext.js

@@ -45,7 +45,7 @@ const m = {
   theme: {
     storageKey: "theme",
     defaultTheme: "system",
-    defaultSurfaceStyle: "standard"
+    defaultSurfaceStyle: "soft-neumorphic"
   },
   accessibility: {
     mainContentId: "floe-main-content",

package/dist/floe.css

@@ -23,6 +23,18 @@
   --radius: 0.375rem;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace;
+  --floe-type-caption: 0.6875rem;
+  --floe-type-control: 0.8125rem;
+  --floe-type-body: 0.875rem;
+  --floe-type-heading: 1rem;
+  --floe-space-1: 0.25rem;
+  --floe-space-2: 0.5rem;
+  --floe-space-3: 0.75rem;
+  --floe-space-4: 1rem;
+  --floe-space-6: 1.5rem;
+  --floe-radius-control: 0.375rem;
+  --floe-radius-group: 0.5rem;
+  --floe-radius-floating: 0.625rem;
 }
 
 /*
@@ -360,7 +372,7 @@
   [data-floe-floating-window-surface='true'].floe-floating-window-motion {
     /* Floating windows use an opaque Mica-like stack in every surface mode.
      * Keeping this on the component boundary makes the default (standard)
-     * path match the opt-in material without changing other controls. */
+     * path match the selected material without changing other controls. */
     background-color: var(--card);
     border-color: color-mix(in srgb, var(--border) 78%, var(--background) 22%);
     border-radius: 10px;

package/dist/styles/tokens.d.ts

@@ -47,6 +47,18 @@ export declare const floeSharedCssVariables: {
     readonly '--radius': "0.375rem";
     readonly '--font-sans': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
     readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
+    readonly '--floe-type-caption': "0.6875rem";
+    readonly '--floe-type-control': "0.8125rem";
+    readonly '--floe-type-body': "0.875rem";
+    readonly '--floe-type-heading': "1rem";
+    readonly '--floe-space-1': "0.25rem";
+    readonly '--floe-space-2': "0.5rem";
+    readonly '--floe-space-3': "0.75rem";
+    readonly '--floe-space-4': "1rem";
+    readonly '--floe-space-6': "1.5rem";
+    readonly '--floe-radius-control': "0.375rem";
+    readonly '--floe-radius-group': "0.5rem";
+    readonly '--floe-radius-floating': "0.625rem";
 };
 export declare const floeColorTokenCategories: readonly [{
     readonly name: "Base Colors";
@@ -642,15 +654,15 @@ export declare function getFloeColorTokenValue(variable: FloeCssVariableName, th
 export declare const floeSurfaceTokens: readonly [{
     readonly variable: "--floe-surface-shadow-raised";
     readonly role: "raised";
-    readonly fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+    readonly fallback: "0 1px 3px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
 }, {
     readonly variable: "--floe-surface-shadow-inset";
     readonly role: "inset";
-    readonly fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
+    readonly fallback: "inset 0 1px 1px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
 }, {
     readonly variable: "--floe-surface-shadow-floating";
     readonly role: "floating";
-    readonly fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+    readonly fallback: "0 8px 18px -8px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
 }, {
     readonly variable: "--floe-surface-shadow-interacting";
     readonly role: "interacting";
@@ -1245,19 +1257,31 @@ export declare const floeDesignTokens: {
         readonly '--radius': "0.375rem";
         readonly '--font-sans': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
         readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
+        readonly '--floe-type-caption': "0.6875rem";
+        readonly '--floe-type-control': "0.8125rem";
+        readonly '--floe-type-body': "0.875rem";
+        readonly '--floe-type-heading': "1rem";
+        readonly '--floe-space-1': "0.25rem";
+        readonly '--floe-space-2': "0.5rem";
+        readonly '--floe-space-3': "0.75rem";
+        readonly '--floe-space-4': "1rem";
+        readonly '--floe-space-6': "1.5rem";
+        readonly '--floe-radius-control': "0.375rem";
+        readonly '--floe-radius-group': "0.5rem";
+        readonly '--floe-radius-floating': "0.625rem";
     };
     readonly surface: readonly [{
         readonly variable: "--floe-surface-shadow-raised";
         readonly role: "raised";
-        readonly fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+        readonly fallback: "0 1px 3px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
     }, {
         readonly variable: "--floe-surface-shadow-inset";
         readonly role: "inset";
-        readonly fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
+        readonly fallback: "inset 0 1px 1px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
     }, {
         readonly variable: "--floe-surface-shadow-floating";
         readonly role: "floating";
-        readonly fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+        readonly fallback: "0 8px 18px -8px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
     }, {
         readonly variable: "--floe-surface-shadow-interacting";
         readonly role: "interacting";

package/dist/styles/tokens.js

@@ -1,7 +1,19 @@
 const r = {
   "--radius": "0.375rem",
   "--font-sans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-  "--font-mono": "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace"
+  "--font-mono": "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace",
+  "--floe-type-caption": "0.6875rem",
+  "--floe-type-control": "0.8125rem",
+  "--floe-type-body": "0.875rem",
+  "--floe-type-heading": "1rem",
+  "--floe-space-1": "0.25rem",
+  "--floe-space-2": "0.5rem",
+  "--floe-space-3": "0.75rem",
+  "--floe-space-4": "1rem",
+  "--floe-space-6": "1.5rem",
+  "--floe-radius-control": "0.375rem",
+  "--floe-radius-group": "0.5rem",
+  "--floe-radius-floating": "0.625rem"
 }, l = [
   {
     name: "Base Colors",
@@ -632,9 +644,9 @@ function g(a, e) {
   return u[e][a];
 }
 const h = [
-  { variable: "--floe-surface-shadow-raised", role: "raised", fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
-  { variable: "--floe-surface-shadow-inset", role: "inset", fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)" },
-  { variable: "--floe-surface-shadow-floating", role: "floating", fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
+  { variable: "--floe-surface-shadow-raised", role: "raised", fallback: "0 1px 3px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
+  { variable: "--floe-surface-shadow-inset", role: "inset", fallback: "inset 0 1px 1px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)" },
+  { variable: "--floe-surface-shadow-floating", role: "floating", fallback: "0 8px 18px -8px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
   { variable: "--floe-surface-shadow-interacting", role: "interacting", fallback: "0 1px 2px var(--floe-surface-shade)" }
 ], m = {
   colors: l,