actual-css 0.1.0 → 0.3.0

package/src/js/floating.js

@@ -1,12 +1,11 @@
 /*
  * Compact positioning engine for menus, tooltips, and popovers.
  *
- * Core math ported from Floating UI. Uses a single global scroll/resize
- * listener to reposition all registered floating elements via rAF.
+ * Core math ported from Floating UI. autoUpdate() batches scroll, resize,
+ * and element-resize callbacks per ownerDocument so each document owns its
+ * own listener set — no global import-time side effects.
  */
 
-import { EVENTS } from "./events.js";
-
 /* ── Placement parsing ────────────────────────────────── */
 
 function getSide(p) {
@@ -65,7 +64,7 @@ function computeCoords(reference, floating, placement, rtl) {
   return coords;
 }
 
-function applyOffset(coords, side, offset, rtl) {
+function applyOffset(coords, side, offset) {
   switch (side) {
     case "top":
       coords.y -= offset;
@@ -74,10 +73,10 @@ function applyOffset(coords, side, offset, rtl) {
       coords.y += offset;
       break;
     case "left":
-      coords.x += rtl ? offset : -offset;
+      coords.x -= offset;
       break;
     case "right":
-      coords.x += rtl ? -offset : offset;
+      coords.x += offset;
       break;
   }
 }
@@ -103,7 +102,8 @@ function isRTL(el) {
   if (el.dir === "rtl") return true;
   if (el.dir === "ltr") return false;
   if (supportsDirSelector) return el.matches(":dir(rtl)");
-  return el.ownerDocument?.dir === "rtl";
+  const style = el.ownerDocument?.defaultView?.getComputedStyle?.(el);
+  return style?.direction === "rtl";
 }
 
 function getDocEl(doc) {
@@ -134,8 +134,6 @@ function getViewportBoundary(doc) {
       doc.compatMode === "CSS1Compat"
         ? toNumber(bodyStyle?.marginLeft) + toNumber(bodyStyle?.marginRight)
         : 0;
-    // Classic stable scrollbars reserve inline space on the body. Subtract only
-    // plausible scrollbar widths so unusual body sizing does not shrink the viewport.
     const stableScrollbar = Math.abs(docEl.clientWidth - body.clientWidth - bodyMargin);
     if (stableScrollbar <= STABLE_SCROLLBAR_MAX_WIDTH) {
       width -= stableScrollbar;
@@ -181,15 +179,6 @@ function isVisible(el) {
   return el.getClientRects().length > 0;
 }
 
-function topVisibleTracked() {
-  const elements = [...tracked];
-  for (let i = elements.length - 1; i >= 0; i--) {
-    const el = elements[i];
-    if (el.isConnected && isVisible(el)) return el;
-  }
-  return null;
-}
-
 function getFloatingSize(float) {
   const rect = float.getBoundingClientRect();
   return {
@@ -198,138 +187,120 @@ function getFloatingSize(float) {
   };
 }
 
-/* ── Global scroll / resize tracking ──────────────────── */
-
-const tracked = new Set();
-let resizeObserver = null;
-let tick = false;
-const pendingTypes = new Set();
-
-function notify(type) {
-  if (type === "escape") {
-    const el = topVisibleTracked();
-    if (!el) return;
-    el.dispatchEvent(
-      new CustomEvent(EVENTS.hide, {
-        bubbles: false,
-        detail: { type: "escape" },
-      }),
-    );
-    return;
-  }
+/* ── Per-document batched callbacks ────────────────────── */
 
-  for (const el of tracked) {
-    el.dispatchEvent(
-      new CustomEvent(EVENTS.reposition, {
-        bubbles: false,
-        detail: { type },
-      }),
-    );
-  }
-}
+const trackers = new WeakMap();
 
-function hasOpenSurface() {
-  return topVisibleTracked() !== null;
-}
+function createTracker(doc) {
+  const win = doc.defaultView;
+  const ResizeObserver = win?.ResizeObserver;
 
-function rafNotify(e) {
-  if (e?.type) pendingTypes.add(e.type);
-  if (!tick) {
-    requestAnimationFrame(() => {
-      const types = [...pendingTypes];
-      pendingTypes.clear();
-      for (const type of types) notify(type);
-      tick = false;
-    });
-  }
-  tick = true;
-}
+  const entries = new Map();
+  let resizeObserver = null;
+  let tick = false;
+  const pending = new Map();
 
-function getResizeObserver() {
-  if (resizeObserver || typeof window === "undefined" || !window.ResizeObserver) {
+  function getResizeObserver() {
+    if (resizeObserver || !ResizeObserver) return resizeObserver;
+
+    resizeObserver = new ResizeObserver((entries, observer) => {
+      for (const entry of entries) {
+        observer.unobserve(entry.target);
+        rafNotify("element-resize", entry);
+        win.requestAnimationFrame(() => {
+          if (tracker.entries.has(entry.target)) observer.observe(entry.target);
+        });
+      }
+    });
     return resizeObserver;
   }
 
-  resizeObserver = new window.ResizeObserver((entries, observer) => {
-    for (const entry of entries) {
-      observer.unobserve(entry.target);
-      rafNotify({ type: "element-resize" });
-      requestAnimationFrame(() => {
-        if (tracked.has(entry.target)) observer.observe(entry.target);
+  function rafNotify(type, source) {
+    for (const element of entries.keys()) {
+      let notifications = pending.get(element);
+      if (!notifications) {
+        notifications = new Map();
+        pending.set(element, notifications);
+      }
+      let notification = notifications.get(type);
+      if (!notification) {
+        notification = { targets: new Set(), timeStamp: 0 };
+        notifications.set(type, notification);
+      }
+      if (source?.target) notification.targets.add(source.target);
+      notification.timeStamp = Math.max(notification.timeStamp, source?.timeStamp || 0);
+    }
+    if (!tick) {
+      win.requestAnimationFrame(() => {
+        const notifications = [...pending];
+        pending.clear();
+        for (const [element, types] of notifications) {
+          const cb = entries.get(element);
+          if (!cb || !element.isConnected) continue;
+          for (const [pendingType, detail] of types) {
+            cb({ type: pendingType, ...detail });
+          }
+        }
+        tick = false;
       });
     }
-  });
-  return resizeObserver;
-}
+    tick = true;
+  }
 
-// Global document listeners run at import time; keep SSR imports inert.
-if (typeof document !== "undefined") {
-  document.addEventListener("scroll", rafNotify, { passive: true, capture: true });
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && !e.ctrlKey && !e.altKey && !e.shiftKey) {
-      if (!hasOpenSurface()) return;
-      e.preventDefault();
-      notify("escape");
-    }
+  doc.addEventListener("scroll", (e) => rafNotify(e.type, e), {
+    passive: true,
+    capture: true,
   });
-}
-// Global window listener runs at import time; keep SSR imports inert.
-if (typeof window !== "undefined") {
-  window.addEventListener("resize", rafNotify, { passive: true });
+  win.addEventListener("resize", (e) => rafNotify("resize", e), { passive: true });
+
+  const tracker = {
+    entries,
+    add(element, callback) {
+      entries.set(element, callback);
+      getResizeObserver()?.observe(element);
+      return () => {
+        entries.delete(element);
+        pending.delete(element);
+        resizeObserver?.unobserve(element);
+      };
+    },
+  };
+
+  return tracker;
 }
 
-/* ── Public API ────────────────────────────────────────── */
+function trackerFor(element) {
+  const doc = element.ownerDocument;
+  let tracker = trackers.get(doc);
+  if (!tracker) {
+    tracker = createTracker(doc);
+    trackers.set(doc, tracker);
+  }
+  return tracker;
+}
 
-/**
- * Register a floating element for auto-reposition on scroll/resize.
- * Returns a cleanup function that removes the element from tracking.
- */
-export function track(el) {
-  tracked.add(el);
-  getResizeObserver()?.observe(el);
-  return () => {
-    tracked.delete(el);
-    resizeObserver?.unobserve(el);
-  };
+export function autoUpdate(element, callback) {
+  return trackerFor(element).add(element, callback);
 }
 
-/**
- * Compute and apply position for a floating element relative to a reference.
- *
- * @param {Element} ref
- * @param {HTMLElement} float
- * @param {object} [opts]
- * @param {string} [opts.placement]  default "bottom-start"
- * @param {number} [opts.distance]   px offset from reference
- * @param {boolean} [opts.flip]      flip if overflows viewport
- * @param {boolean} [opts.shift]     shift if overflows x-axis
- * @param {number} [opts.shiftPadding] px padding when shifting
- * @param {Element} [opts.scope]     constrain to a bounding element
- */
+/* ── Positioning ──────────────────────────────────────── */
+
 export function reposition(ref, float, opts = {}) {
-  if (!isVisible(float)) return;
+  if (!isVisible(float)) return false;
 
   const placement = opts.placement || "bottom-start";
   const distance = opts.distance || 0;
   const flip = opts.flip !== false;
   const shift = opts.shift !== false;
-  const shiftPad = opts.shiftPadding || 4;
+  const shiftPad = opts.shiftPadding ?? 4;
   const rtl = isRTL(ref);
 
   const rects = ref.getClientRects();
   const refRect = placement.startsWith("bottom") ? rects[rects.length - 1] : rects[0];
-  if (!refRect) return;
+  if (!refRect) return false;
 
   const boundary = getBoundary(ref, opts);
-  if (isOutsideBoundary(refRect, boundary)) {
-    float.dispatchEvent(
-      new CustomEvent(EVENTS.outOfView, {
-        bubbles: false,
-        detail: { type: "out-of-view" },
-      }),
-    );
-    return;
-  }
+  if (isOutsideBoundary(refRect, boundary)) return false;
 
   const floatRect = getFloatingSize(float);
   const sx = boundary.x;
@@ -342,7 +313,7 @@ export function reposition(ref, float, opts = {}) {
   let axis = getMainAxis(placement);
   let current = placement;
   let coords = computeCoords(refRect, floatRect, current, rtl);
-  applyOffset(coords, side, distance, rtl);
+  applyOffset(coords, side, distance);
 
   if (flip) {
     const cx = Math.ceil(coords.x);
@@ -355,11 +326,9 @@ export function reposition(ref, float, opts = {}) {
       side = flipSide(side);
       current = align ? `${side}-${align}` : side;
       coords = computeCoords(refRect, floatRect, current, rtl);
-      applyOffset(coords, side, distance, rtl);
+      applyOffset(coords, side, distance);
     }
 
-    // Narrow side placements can fit neither left nor right. In that case,
-    // fall back to top so compact mobile layouts get a usable placement.
     if (
       axis === "y" &&
       (coords.x < sx || coords.x + floatRect.width > cw) &&
@@ -369,7 +338,7 @@ export function reposition(ref, float, opts = {}) {
       axis = "x";
       current = align ? `${side}-${align}` : side;
       coords = computeCoords(refRect, floatRect, current, rtl);
-      applyOffset(coords, side, distance, rtl);
+      applyOffset(coords, side, distance);
     }
   }
 
@@ -382,7 +351,7 @@ export function reposition(ref, float, opts = {}) {
       const nextAlign = getAlignment(current) === "end" ? "start" : "end";
       const candidatePlacement = `${side}-${nextAlign}`;
       const candidate = computeCoords(refRect, floatRect, candidatePlacement, rtl);
-      applyOffset(candidate, side, distance, rtl);
+      applyOffset(candidate, side, distance);
 
       if (getInlineOverflow(candidate, floatRect, minX, maxX) < currentOverflow) {
         current = candidatePlacement;
@@ -391,7 +360,6 @@ export function reposition(ref, float, opts = {}) {
     }
   }
 
-  // shift on x axis
   let p = 50;
   if (shift || floatRect.width > refRect.width) {
     const minX = sx + shiftPad;
@@ -433,6 +401,8 @@ export function reposition(ref, float, opts = {}) {
     left: `${coords.x}px`,
     top: `${coords.y}px`,
   });
+
+  return true;
 }
 
 export function repositionAt(x, y, float, opts = {}) {
@@ -458,5 +428,5 @@ export function repositionAt(x, y, float, opts = {}) {
     ],
   };
 
-  reposition(ref, float, opts);
+  return reposition(ref, float, opts);
 }

package/src/js/flyout.js

@@ -1,58 +1,54 @@
-/*
- * Flyout trigger — trigger adapter over the shared action-surface runtime.
- *
- * App menus keep roving focus and menuitem activation. Nav panels reuse the
- * same surface lifecycle without menu semantics.
- */
-
-import enhance from "./enhance.js";
+import { registerEnhancement } from "./enhance.js";
 import { focusFirstDescendant } from "./focus.js";
-import { focusFirstMenuItem, focusLastMenuItem, getMenuItems } from "./menu.js";
-import { CLASSES } from "./selectors.js";
-import {
-  closeSurface,
-  disconnectSurface,
-  isSurfaceOpen,
-  openSurface,
-  prepareSurface,
-} from "./surface.js";
-
-// trigger -> { flyout, controller }
+import { connectMenu, focusFirstMenuItem, focusLastMenuItem } from "./menu.js";
+import { closeSurface, isSurfaceOpen, openSurface, retainSurface } from "./surface.js";
+
+const panelRefs = new WeakMap();
 const triggerMap = new WeakMap();
-const FLYOUT_SELECTOR = `.${CLASSES.flyout}`;
-const FLYOUT_TRIGGER_SELECTOR = "[aria-controls][aria-expanded]";
 
-function openFlyout(flyout, trigger) {
-  openSurface(flyout, { trigger, source: trigger });
+function normalizeBreakpoint(raw) {
+  const BREAKPOINTS = { sm: 640, md: 768, lg: 1024 };
+  const value = Number.parseInt(BREAKPOINTS[raw] || raw, 10);
+  return Number.isFinite(value) ? value : undefined;
 }
 
-function flyoutFor(trigger) {
-  const flyoutId = trigger.getAttribute("aria-controls");
-  const flyout = flyoutId && trigger.ownerDocument.getElementById(flyoutId);
-  return flyout?.matches(FLYOUT_SELECTOR) ? flyout : null;
+function readFlyoutOptions(panel) {
+  const opts = { autoClose: "true" };
+  const ds = panel.dataset;
+  if (ds.flyoutPlacement) opts.placement = ds.flyoutPlacement;
+  if (ds.flyoutDistance != null) {
+    const d = Number.parseFloat(ds.flyoutDistance);
+    if (Number.isFinite(d)) opts.distance = d;
+  }
+  if (ds.flyoutMobile) opts.mobile = ds.flyoutMobile;
+  if (ds.flyoutBreakpoint) {
+    const bp = normalizeBreakpoint(ds.flyoutBreakpoint);
+    if (bp != null) opts.breakpoint = bp;
+  }
+  if (ds.flyoutAutoClose) opts.autoClose = ds.flyoutAutoClose;
+  return opts;
 }
 
-function isMenuFlyout(flyout) {
-  return flyout.matches("menu");
+function panelFor(trigger) {
+  const id = trigger.getAttribute("aria-controls");
+  return id ? trigger.ownerDocument.getElementById(id) : null;
 }
 
-function resolveCurrentFlyout(trigger, state) {
-  if (state.flyout?.isConnected) return state.flyout;
-
-  const flyout = flyoutFor(trigger);
-  if (!flyout) return null;
+function isMenuFlyout(panel) {
+  return panel.matches("menu") || panel.classList.contains("menu");
+}
 
-  state.flyout = flyout;
-  prepareSurface(flyout);
-  if (!trigger.hasAttribute("aria-haspopup") && isMenuFlyout(flyout)) {
-    trigger.setAttribute("aria-haspopup", "menu");
-  }
-  return flyout;
+function openFlyout(panel, trigger) {
+  return openSurface(panel, {
+    trigger,
+    source: trigger,
+    ...readFlyoutOptions(panel),
+  });
 }
 
 function openAndFocusPanel(flyout, trigger) {
-  if (!isSurfaceOpen(flyout)) openFlyout(flyout, trigger);
-  focusFirstDescendant(flyout);
+  if (!isSurfaceOpen(flyout) && !openFlyout(flyout, trigger)) return false;
+  return focusFirstDescendant(flyout);
 }
 
 function onTriggerClick(e) {
@@ -60,35 +56,34 @@ function onTriggerClick(e) {
   const state = triggerMap.get(trigger);
   if (!state) return;
   e.stopPropagation();
-  const flyout = resolveCurrentFlyout(trigger, state);
-  if (!flyout) return;
-  if (isSurfaceOpen(flyout)) closeSurface(flyout);
-  else openFlyout(flyout, trigger);
+  const panel = resolvePanel(trigger, state);
+  if (!panel) return;
+  if (isSurfaceOpen(panel)) closeSurface(panel);
+  else openFlyout(panel, trigger);
 }
 
 function onTriggerKeydown(e) {
   const trigger = e.currentTarget;
   const state = triggerMap.get(trigger);
   if (!state) return;
-  const flyout = resolveCurrentFlyout(trigger, state);
-  if (!flyout) return;
-  const items = getMenuItems(flyout);
-  const isActionList = items.length > 0;
+  const panel = resolvePanel(trigger, state);
+  if (!panel) return;
+  const isActionList = isMenuFlyout(panel);
 
   if (!isActionList) {
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
-        openAndFocusPanel(flyout, trigger);
+        openAndFocusPanel(panel, trigger);
         break;
       case "Enter":
       case " ":
         e.preventDefault();
-        if (isSurfaceOpen(flyout)) closeSurface(flyout);
-        else openAndFocusPanel(flyout, trigger);
+        if (isSurfaceOpen(panel)) closeSurface(panel);
+        else openAndFocusPanel(panel, trigger);
         break;
       case "Tab":
-        if (isSurfaceOpen(flyout) && !e.shiftKey && focusFirstDescendant(flyout)) {
+        if (isSurfaceOpen(panel) && !e.shiftKey && focusFirstDescendant(panel)) {
           e.preventDefault();
         }
         break;
@@ -99,89 +94,104 @@ function onTriggerKeydown(e) {
   switch (e.key) {
     case "ArrowDown":
       e.preventDefault();
-      if (!isSurfaceOpen(flyout)) openFlyout(flyout, trigger);
-      focusFirstMenuItem(flyout);
+      if (!isSurfaceOpen(panel) && !openFlyout(panel, trigger)) break;
+      focusFirstMenuItem(panel);
       break;
     case "ArrowUp":
       e.preventDefault();
-      if (!isSurfaceOpen(flyout)) openFlyout(flyout, trigger);
-      focusLastMenuItem(flyout);
+      if (!isSurfaceOpen(panel) && !openFlyout(panel, trigger)) break;
+      focusLastMenuItem(panel);
       break;
     case "Home":
       e.preventDefault();
-      if (!isSurfaceOpen(flyout)) openFlyout(flyout, trigger);
-      focusFirstMenuItem(flyout);
+      if (!isSurfaceOpen(panel) && !openFlyout(panel, trigger)) break;
+      focusFirstMenuItem(panel);
       break;
     case "End":
       e.preventDefault();
-      if (!isSurfaceOpen(flyout)) openFlyout(flyout, trigger);
-      focusLastMenuItem(flyout);
+      if (!isSurfaceOpen(panel) && !openFlyout(panel, trigger)) break;
+      focusLastMenuItem(panel);
       break;
     case "Enter":
     case " ":
       e.preventDefault();
-      if (!isSurfaceOpen(flyout)) {
-        openFlyout(flyout, trigger);
-        focusFirstMenuItem(flyout);
+      if (!isSurfaceOpen(panel)) {
+        if (openFlyout(panel, trigger)) focusFirstMenuItem(panel);
       } else {
-        closeSurface(flyout);
+        closeSurface(panel);
       }
       break;
     case "Tab":
-      if (isSurfaceOpen(flyout)) closeSurface(flyout);
+      if (isSurfaceOpen(panel)) closeSurface(panel);
       break;
   }
 }
 
 function connectTrigger(trigger) {
   if (triggerMap.has(trigger)) return;
-  const flyout = flyoutFor(trigger);
-  if (!flyout) return;
 
   const controller = new AbortController();
-  triggerMap.set(trigger, { flyout, controller });
+  const state = { panel: null, controller, releaseMenu: null };
+  triggerMap.set(trigger, state);
+
+  resolvePanel(trigger, state);
 
-  prepareSurface(flyout);
   if (!trigger.hasAttribute("aria-expanded")) {
     trigger.setAttribute("aria-expanded", "false");
   }
-  if (!trigger.hasAttribute("aria-haspopup") && isMenuFlyout(flyout)) {
-    trigger.setAttribute("aria-haspopup", "menu");
-  }
 
   trigger.addEventListener("click", onTriggerClick, { signal: controller.signal });
   trigger.addEventListener("keydown", onTriggerKeydown, { signal: controller.signal });
 }
 
+function resolvePanel(trigger, state) {
+  if (state.panel?.isConnected) return state.panel;
+
+  const panel = panelFor(trigger);
+  if (!panel) return null;
+
+  let panelEntry = panelRefs.get(panel);
+  if (!panelEntry) {
+    const release = retainSurface(panel);
+    panelEntry = { triggers: new Set(), release };
+    panelRefs.set(panel, panelEntry);
+  }
+  panelEntry.triggers.add(trigger);
+  state.panel = panel;
+
+  if (isMenuFlyout(panel)) {
+    state.releaseMenu = connectMenu(panel, {
+      close: (menu) => closeSurface(menu),
+    });
+  }
+  if (!trigger.hasAttribute("aria-haspopup") && isMenuFlyout(panel)) {
+    trigger.setAttribute("aria-haspopup", "menu");
+  }
+
+  return panel;
+}
+
 function disconnectTrigger(trigger) {
   const state = triggerMap.get(trigger);
   if (!state) return;
+  state.releaseMenu?.();
   state.controller.abort();
+  if (state.panel?.isConnected && isSurfaceOpen(state.panel)) {
+    closeSurface(state.panel, { restoreFocus: false });
+  }
   triggerMap.delete(trigger);
-}
 
-function connectFlyout(flyout) {
-  if (!flyout.id) return;
-  const triggers = flyout.ownerDocument.querySelectorAll(
-    `${FLYOUT_TRIGGER_SELECTOR}[aria-controls="${CSS.escape(flyout.id)}"]`,
-  );
-  for (const trigger of triggers) {
-    if (!triggerMap.has(trigger)) connectTrigger(trigger);
+  const panelEntry = state.panel ? panelRefs.get(state.panel) : undefined;
+  if (panelEntry) {
+    panelEntry.triggers.delete(trigger);
+    if (panelEntry.triggers.size === 0) {
+      panelEntry.release();
+      panelRefs.delete(state.panel);
+    }
   }
 }
 
-function disconnectFlyout(flyout) {
-  if (!flyout) return;
-  disconnectSurface(flyout);
-}
-
-enhance({
-  [FLYOUT_TRIGGER_SELECTOR]: (trigger) => {
-    connectTrigger(trigger);
-    return () => disconnectTrigger(trigger);
-  },
-  [FLYOUT_SELECTOR]: (flyout) => {
-    connectFlyout(flyout);
-    return () => disconnectFlyout(flyout);
-  },
+registerEnhancement("flyout", (trigger) => {
+  connectTrigger(trigger);
+  return () => disconnectTrigger(trigger);
 });