@floegence/floe-webapp-core 0.52.2 → 0.52.4

package/dist/components/ui/dialogSurfaceScope.js

@@ -1,65 +1,65 @@
-const d = "data-floe-dialog-surface-host", y = d, p = "data-floe-surface-portal-layer", v = "data-floe-surface-floating-layer", _ = "data-floe-dialog-surface-boundary", g = 1600;
-let r = null, o = null;
-function E(t) {
+const g = "data-floe-dialog-surface-host", b = g, E = "data-floe-surface-portal-layer", P = "data-floe-surface-floating-layer", x = "data-floe-dialog-surface-boundary", T = 1600;
+let u = null, r = null;
+function w(t) {
   return typeof Element < "u" && t instanceof Element ? t : typeof Node < "u" && t instanceof Node ? t.parentElement : null;
 }
-function T(t) {
+function R(t) {
   const e = t?.activeElement;
   return e instanceof Element ? e : null;
 }
-function l(t) {
+function c(t) {
   const e = typeof document < "u" ? document : null;
-  r = {
-    target: E(t),
-    activeElement: T(e),
+  u = {
+    target: w(t),
+    activeElement: R(e),
     recordedAt: Date.now()
   };
 }
-function c(t) {
-  l(t.target);
+function a(t) {
+  c(t.target);
 }
-function f(t) {
-  l(t.target);
+function s(t) {
+  c(t.target);
 }
-function a(t) {
-  l(t.target);
+function h(t) {
+  c(t.target);
 }
-function s() {
-  R();
+function p() {
+  S();
 }
-function R() {
-  typeof document > "u" || o !== document && (o && (o.removeEventListener("pointerdown", c, !0), o.removeEventListener("focusin", f, !0), o.removeEventListener("contextmenu", a, !0)), document.addEventListener("pointerdown", c, !0), document.addEventListener("focusin", f, !0), document.addEventListener("contextmenu", a, !0), o = document);
+function S() {
+  typeof document > "u" || r !== document && (r && (r.removeEventListener("pointerdown", a, !0), r.removeEventListener("focusin", s, !0), r.removeEventListener("contextmenu", h, !0)), document.addEventListener("pointerdown", a, !0), document.addEventListener("focusin", s, !0), document.addEventListener("contextmenu", h, !0), r = document);
 }
-function w() {
-  return !r || Date.now() - r.recordedAt > g ? null : r;
+function A() {
+  return !u || Date.now() - u.recordedAt > T ? null : u;
 }
-function i(t) {
-  const e = t?.closest(`[${d}="true"]`);
+function l(t) {
+  const e = t?.closest(`[${g}="true"]`);
   return typeof HTMLElement > "u" ? null : e instanceof HTMLElement ? e : null;
 }
-function A(t) {
+function v(t) {
   if (!t) return null;
-  const e = t.closest(`[${p}="true"]`);
+  const e = t.closest(`[${E}="true"]`);
   return typeof HTMLElement > "u" ? null : e instanceof HTMLElement ? e : null;
 }
-function L(t = {}) {
-  s();
-  const e = w(), n = i(t.owner ?? null) ?? i(e?.target ?? null) ?? i(e?.activeElement ?? null);
+function C(t = {}) {
+  p();
+  const e = A(), n = l(t.owner ?? null) ?? l(e?.target ?? null) ?? l(e?.activeElement ?? null);
   return n ? {
     host: n,
     boundaryHost: n,
-    mountHost: A(n) ?? n,
+    mountHost: v(n) ?? n,
     mode: "surface"
   } : { host: null, boundaryHost: null, mountHost: null, mode: "global" };
 }
-function u(t) {
+function i(t) {
   return t.mode === "surface" && !!t.boundaryHost?.isConnected;
 }
-function S(t) {
-  if (u(t))
+function f(t) {
+  if (i(t))
     return t.mountHost ?? t.boundaryHost ?? void 0;
 }
-function m() {
+function y() {
   return typeof window > "u" ? {
     left: 0,
     top: 0,
@@ -76,9 +76,9 @@ function m() {
     height: window.innerHeight
   };
 }
-function b(t) {
-  if (!u(t) || !t.boundaryHost)
-    return m();
+function F(t) {
+  if (!i(t) || !t.boundaryHost)
+    return y();
   const e = t.boundaryHost.getBoundingClientRect();
   return {
     left: e.left,
@@ -89,10 +89,10 @@ function b(t) {
     height: e.height
   };
 }
-function h(t) {
-  const e = S(t);
+function L(t) {
+  const e = f(t);
   if (!e)
-    return m();
+    return y();
   const n = e.getBoundingClientRect();
   return {
     left: n.left,
@@ -103,46 +103,57 @@ function h(t) {
     height: n.height
   };
 }
-function P(t, e) {
-  if (!u(e))
+function _(t) {
+  const e = f(t);
+  if (!e) return { x: 1, y: 1 };
+  const n = e.getBoundingClientRect();
+  return {
+    x: e.offsetWidth > 0 && n.width > 0 ? n.width / e.offsetWidth : 1,
+    y: e.offsetHeight > 0 && n.height > 0 ? n.height / e.offsetHeight : 1
+  };
+}
+function m(t, e) {
+  if (!i(e))
     return t;
-  const n = h(e);
+  const n = f(e), o = L(e), d = _(e);
   return {
-    x: t.x - n.left,
-    y: t.y - n.top
+    x: (t.x - o.left) / d.x - n.clientLeft + n.scrollLeft,
+    y: (t.y - o.top) / d.y - n.clientTop + n.scrollTop
   };
 }
-function C(t, e) {
-  if (!u(e))
+function H(t, e) {
+  if (!i(e))
     return t;
-  const n = h(e);
+  const n = m({ x: t.left, y: t.top }, e), o = m({ x: t.right, y: t.bottom }, e);
   return {
-    left: t.left - n.left,
-    top: t.top - n.top,
-    right: t.right - n.left,
-    bottom: t.bottom - n.top,
-    width: t.width,
-    height: t.height
+    left: n.x,
+    top: n.y,
+    right: o.x,
+    bottom: o.y,
+    width: o.x - n.x,
+    height: o.y - n.y
   };
 }
-function H() {
-  r = null;
+function I() {
+  u = null;
 }
-typeof document < "u" && s();
+typeof document < "u" && p();
 export {
-  _ as DIALOG_SURFACE_BOUNDARY_ATTR,
-  d as DIALOG_SURFACE_HOST_ATTR,
-  v as SURFACE_FLOATING_LAYER_ATTR,
-  y as SURFACE_PORTAL_HOST_ATTR,
-  p as SURFACE_PORTAL_LAYER_ATTR,
-  H as __resetSurfacePortalScopeForTests,
-  s as ensureDialogSurfaceInteractionTracking,
-  R as ensureSurfacePortalInteractionTracking,
-  u as isSurfacePortalMode,
-  P as projectSurfacePortalPosition,
-  C as projectSurfacePortalRect,
-  b as resolveSurfacePortalBoundaryRect,
-  L as resolveSurfacePortalHost,
-  S as resolveSurfacePortalMount,
-  h as resolveSurfacePortalMountRect
+  x as DIALOG_SURFACE_BOUNDARY_ATTR,
+  g as DIALOG_SURFACE_HOST_ATTR,
+  P as SURFACE_FLOATING_LAYER_ATTR,
+  b as SURFACE_PORTAL_HOST_ATTR,
+  E as SURFACE_PORTAL_LAYER_ATTR,
+  I as __resetSurfacePortalScopeForTests,
+  p as ensureDialogSurfaceInteractionTracking,
+  S as ensureSurfacePortalInteractionTracking,
+  i as isSurfacePortalMode,
+  m as projectSurfacePortalPosition,
+  H as projectSurfacePortalRect,
+  A as readFreshInteractionSnapshot,
+  F as resolveSurfacePortalBoundaryRect,
+  C as resolveSurfacePortalHost,
+  f as resolveSurfacePortalMount,
+  L as resolveSurfacePortalMountRect,
+  _ as resolveSurfacePortalScale
 };

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

@@ -1,4 +1,5 @@
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button';
+export { intersectSurfaceRects, type SurfaceFloatingBoundary } from './surfaceFloatingBoundary';
 export { Tag, type TagProps, type TagVariant, type TagSize } from './Tag';
 export { Input, Textarea, NumberInput, AffixInput, type InputProps, type InputSize, type TextareaProps, type NumberInputProps, type AffixInputProps, type AffixOption, } from './Input';
 export { Dialog, ConfirmDialog, type DialogProps, type ConfirmDialogProps } from './Dialog';

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

@@ -0,0 +1,12 @@
+import { type ResolvedSurfacePortalHost, type SurfacePortalRect } from './surfacePortalScope';
+/** A collision boundary in client coordinates; null means explicitly unavailable. */
+export type SurfaceFloatingBoundary = HTMLElement | SurfacePortalRect | null;
+export declare function intersectSurfaceRects(...rects: readonly SurfacePortalRect[]): SurfacePortalRect;
+export type SurfaceSafeArea = Readonly<{
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}>;
+export declare function readSurfaceSafeArea(): SurfaceSafeArea;
+export declare function resolveFloatingBoundary(host: ResolvedSurfacePortalHost, boundary?: SurfaceFloatingBoundary, safeArea?: SurfaceSafeArea): SurfacePortalRect | null;

package/dist/components/ui/surfaceFloatingBoundary.js

@@ -0,0 +1,53 @@
+import { resolveMobileKeyboardViewportMetrics as l } from "./mobileKeyboardViewport.js";
+import { isSurfacePortalMode as d, resolveSurfacePortalBoundaryRect as p } from "./dialogSurfaceScope.js";
+function m(...e) {
+  const t = Math.max(...e.map((r) => r.left)), i = Math.max(...e.map((r) => r.top)), o = Math.max(t, Math.min(...e.map((r) => r.right))), a = Math.max(i, Math.min(...e.map((r) => r.bottom)));
+  return { left: t, top: i, right: o, bottom: a, width: o - t, height: a - i };
+}
+function s() {
+  if (typeof document > "u") return { top: 0, right: 0, bottom: 0, left: 0 };
+  const e = document.createElement("div");
+  e.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px)", document.documentElement.append(e);
+  const t = getComputedStyle(e), i = (a) => Math.max(0, Number.parseFloat(a) || 0), o = {
+    top: i(t.paddingTop),
+    right: i(t.paddingRight),
+    bottom: i(t.paddingBottom),
+    left: i(t.paddingLeft)
+  };
+  return e.remove(), o;
+}
+function c(e, t, i = { top: 0, right: 0, bottom: 0, left: 0 }) {
+  if (t === null || typeof window > "u" || e.mode === "surface" && !d(e)) return null;
+  const o = l(window), a = window.innerHeight - o.bottomPx - o.heightPx, r = {
+    left: o.leftPx + i.left,
+    top: a + i.top,
+    right: o.leftPx + o.widthPx - i.right,
+    bottom: a + o.heightPx - i.bottom,
+    width: o.widthPx,
+    height: o.heightPx
+  };
+  let n;
+  if (t instanceof HTMLElement) {
+    if (!t.isConnected || t.closest('[inert], [hidden], [aria-hidden="true"]'))
+      return null;
+    n = t.getBoundingClientRect();
+  } else
+    n = t;
+  return n && ![
+    n.left,
+    n.top,
+    n.right,
+    n.bottom,
+    n.width,
+    n.height
+  ].every(Number.isFinite) ? null : m(
+    r,
+    p(e),
+    ...n ? [n] : []
+  );
+}
+export {
+  m as intersectSurfaceRects,
+  s as readSurfaceSafeArea,
+  c as resolveFloatingBoundary
+};

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

@@ -1 +1 @@
-export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, SURFACE_FLOATING_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, resolveSurfacePortalMountRect, projectSurfacePortalPosition, projectSurfacePortalRect, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalHostResolutionOptions, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalRect, } from './dialogSurfaceScope';
+export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, SURFACE_FLOATING_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, resolveSurfacePortalMountRect, resolveSurfacePortalScale, projectSurfacePortalPosition, projectSurfacePortalRect, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalHostResolutionOptions, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalRect, } from './dialogSurfaceScope';

package/dist/file-browser.js

@@ -1,39 +1,40 @@
-import { ArchiveFileIcon as r, AudioFileIcon as i, BrokenSymlinkIcon as l, CodeFileIcon as n, ConfigFileIcon as c, DocumentFileIcon as F, FileIcon as t, FileItemIcon as I, FolderIcon as m, FolderOpenIcon as p, ImageFileIcon as f, JavaScriptFileIcon as x, ShellScriptFileIcon as s, StyleFileIcon as a, SymlinkFileIcon as d, SymlinkFolderIcon as S, SymlinkFolderOpenIcon as w, TypeScriptFileIcon as B, VideoFileIcon as y, getFileIcon as u, resolveFileItemIcon as v } from "./components/file-browser/FileIcons.js";
-import { Breadcrumb as g } from "./components/file-browser/Breadcrumb.js";
-import { DirectoryTree as A } from "./components/file-browser/DirectoryTree.js";
+import { ArchiveFileIcon as r, AudioFileIcon as i, BrokenSymlinkIcon as l, CodeFileIcon as n, ConfigFileIcon as c, DocumentFileIcon as t, FileIcon as F, FileItemIcon as I, FolderIcon as m, FolderOpenIcon as p, ImageFileIcon as f, JavaScriptFileIcon as s, ShellScriptFileIcon as x, StyleFileIcon as a, SymlinkFileIcon as d, SymlinkFolderIcon as S, SymlinkFolderOpenIcon as w, TypeScriptFileIcon as B, VideoFileIcon as y, getFileIcon as u, resolveFileItemIcon as v } from "./components/file-browser/FileIcons.js";
+import { Breadcrumb as k } from "./components/file-browser/Breadcrumb.js";
+import { DirectoryTree as h } from "./components/file-browser/DirectoryTree.js";
 import { FileBrowser as D } from "./components/file-browser/FileBrowser.js";
-import { FileBrowserDragPreview as V } from "./components/file-browser/DragPreview.js";
-import { FileBrowserProvider as O, useFileBrowser as P } from "./components/file-browser/FileBrowserContext.js";
-import { FileBrowserStatusBar as J } from "./components/file-browser/FileBrowserStatusBar.js";
-import { FileBrowserToolbar as M } from "./components/file-browser/FileBrowserToolbar.js";
-import { FileContextMenu as j } from "./components/file-browser/FileContextMenu.js";
-import { FileGridView as z } from "./components/file-browser/FileGridView.js";
-import { FileListView as H } from "./components/file-browser/FileListView.js";
+import { FileBrowserDragPreview as T } from "./components/file-browser/DragPreview.js";
+import { FileBrowserProvider as b, useFileBrowser as L } from "./components/file-browser/FileBrowserContext.js";
+import { FileBrowserStatusBar as O } from "./components/file-browser/FileBrowserStatusBar.js";
+import { FileBrowserToolbar as H } from "./components/file-browser/FileBrowserToolbar.js";
+import { FileContextMenu as N } from "./components/file-browser/FileContextMenu.js";
+import { FileGridView as q } from "./components/file-browser/FileGridView.js";
+import { FileListView as E } from "./components/file-browser/FileListView.js";
 import { classifyArchiveFileName as Q } from "./components/file-browser/archiveFiles.js";
+import { createLongPressContextMenuHandlers as U } from "./components/file-browser/longPressContextMenu.js";
 export {
   r as ArchiveFileIcon,
   i as AudioFileIcon,
-  g as Breadcrumb,
+  k as Breadcrumb,
   l as BrokenSymlinkIcon,
   n as CodeFileIcon,
   c as ConfigFileIcon,
-  A as DirectoryTree,
-  F as DocumentFileIcon,
+  h as DirectoryTree,
+  t as DocumentFileIcon,
   D as FileBrowser,
-  V as FileBrowserDragPreview,
-  O as FileBrowserProvider,
-  J as FileBrowserStatusBar,
-  M as FileBrowserToolbar,
-  j as FileContextMenu,
-  z as FileGridView,
-  t as FileIcon,
+  T as FileBrowserDragPreview,
+  b as FileBrowserProvider,
+  O as FileBrowserStatusBar,
+  H as FileBrowserToolbar,
+  N as FileContextMenu,
+  q as FileGridView,
+  F as FileIcon,
   I as FileItemIcon,
-  H as FileListView,
+  E as FileListView,
   m as FolderIcon,
   p as FolderOpenIcon,
   f as ImageFileIcon,
-  x as JavaScriptFileIcon,
-  s as ShellScriptFileIcon,
+  s as JavaScriptFileIcon,
+  x as ShellScriptFileIcon,
   a as StyleFileIcon,
   d as SymlinkFileIcon,
   S as SymlinkFolderIcon,
@@ -41,7 +42,8 @@ export {
   B as TypeScriptFileIcon,
   y as VideoFileIcon,
   Q as classifyArchiveFileName,
+  U as createLongPressContextMenuHandlers,
   u as getFileIcon,
   v as resolveFileItemIcon,
-  P as useFileBrowser
+  L as useFileBrowser
 };

package/dist/floe.css

@@ -357,67 +357,49 @@
     contain: layout paint style;
   }
 
-  [data-floe-floating-window-surface='true'] {
-    background-color: color-mix(in srgb, var(--card) 96%, transparent);
-    border-color: color-mix(in srgb, var(--border) 88%, var(--foreground) 12%);
+  [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. */
+    background-color: var(--card);
+    border-color: color-mix(in srgb, var(--border) 78%, var(--background) 22%);
+    border-radius: 10px;
     box-shadow:
-      0 16px 36px color-mix(in srgb, var(--foreground) 12%, transparent),
-      0 3px 10px color-mix(in srgb, var(--foreground) 10%, transparent);
-    transition:
-      border-color 140ms ease,
-      box-shadow 140ms ease,
-      background-color 140ms ease;
+      0 12px 28px -8px color-mix(in srgb, var(--foreground) 18%, transparent),
+      0 3px 8px -2px color-mix(in srgb, var(--foreground) 12%, transparent),
+      inset 0 1px 0 rgb(255 255 255 / 45%);
   }
-
-  @supports (backdrop-filter: blur(12px)) {
-    [data-floe-floating-window-surface='true'] {
-      backdrop-filter: blur(12px);
-      background-color: color-mix(in srgb, var(--card) 90%, transparent);
-    }
+  [data-floe-floating-window-surface='true'] {
+    border-radius: 10px;
   }
 
   [data-floe-floating-window-surface='true'][data-floe-floating-window-state='active'] {
-    border-color: color-mix(in srgb, var(--border) 62%, var(--ring) 38%);
-    box-shadow:
-      0 22px 48px color-mix(in srgb, var(--foreground) 16%, transparent),
-      0 5px 14px color-mix(in srgb, var(--foreground) 12%, transparent),
-      0 0 0 1px color-mix(in srgb, var(--ring) 22%, transparent);
+    border-color: color-mix(in srgb, var(--border) 60%, var(--ring) 40%);
   }
 
   [data-floe-floating-window-surface='true'][data-floe-floating-window-state='inactive'] {
-    border-color: color-mix(in srgb, var(--border) 94%, var(--foreground) 6%);
-    box-shadow:
-      0 12px 28px color-mix(in srgb, var(--foreground) 10%, transparent),
-      0 2px 6px color-mix(in srgb, var(--foreground) 8%, transparent);
+    border-color: color-mix(in srgb, var(--border) 88%, var(--background) 12%);
   }
 
   [data-floe-floating-window-titlebar='true'] {
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--muted) 78%, var(--card) 22%),
-        color-mix(in srgb, var(--muted) 60%, var(--card) 40%)
-      );
-    border-bottom-color: color-mix(in srgb, var(--border) 84%, var(--foreground) 16%);
-    transition: background 140ms ease, border-color 140ms ease;
+    background-color: color-mix(in srgb, var(--muted) 70%, var(--card) 30%);
+    border-bottom-color: color-mix(in srgb, var(--border) 70%, var(--background) 30%);
+    transition: none;
+  }
+
+  :root.dark [data-floe-floating-window-surface='true'] {
+    box-shadow:
+      0 12px 28px -8px color-mix(in srgb, var(--foreground) 24%, transparent),
+      0 3px 8px -2px color-mix(in srgb, var(--foreground) 18%, transparent),
+      inset 0 1px 0 rgb(255 255 255 / 8%);
   }
 
   [data-floe-floating-window-surface='true'][data-floe-floating-window-state='active'] [data-floe-floating-window-titlebar='true'] {
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--accent) 62%, var(--muted) 38%),
-        color-mix(in srgb, var(--muted) 52%, var(--card) 48%)
-      );
+    background-color: color-mix(in srgb, var(--accent) 24%, var(--muted) 76%);
   }
 
   [data-floe-floating-window-surface='true'][data-floe-floating-window-state='inactive'] [data-floe-floating-window-titlebar='true'] {
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--muted) 80%, var(--card) 20%),
-        color-mix(in srgb, var(--muted) 64%, var(--card) 36%)
-      );
+    background-color: color-mix(in srgb, var(--muted) 56%, var(--card) 44%);
   }
 
   [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='shell-sidebar'],
@@ -433,6 +415,19 @@
   }
 }
 
+/* Edge-aligned window controls keep their keyboard indicator inside the
+ * clipped panel. The outer resize perimeter keeps its existing hit targets. */
+[data-floe-floating-window-control]:focus-visible {
+  box-shadow: none;
+  outline: 2px solid var(--ring);
+  outline-offset: -3px;
+}
+@media (forced-colors: active) {
+  [data-floe-floating-window-control]:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 /* Animation utilities */
 @layer utilities {
   .floe-floating-presence {