fancy-ui-react 0.3.0 → 0.4.0

package/dist/components/container-scroll/ContainerScroll.js

@@ -2,73 +2,112 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { rafThrottle } from "../../internals/motion/raf.js";
 import { cn } from "../../utils.js";
+/* empty css                     */
+function apertureProgress(top, height, viewport) {
+  if (viewport <= 0) return 1;
+  const centre = top + height / 2;
+  const p = (viewport * 0.92 - centre) / (viewport * 0.4);
+  return p < 0 ? 0 : p > 1 ? 1 : p;
+}
+function apertureEase(p) {
+  const t = p < 0 ? 0 : p > 1 ? 1 : p;
+  return t * t * (3 - 2 * t);
+}
 function ContainerScroll({
   className = "",
   titleContent,
-  cardContent
+  cardContent,
+  accent,
+  accentSecondary
 }) {
-  const containerRef = useRef(null);
-  const [isMobile, setIsMobile] = useState(false);
-  const [scrollYProgress, setScrollYProgress] = useState(0);
-  const scaleDimensions = isMobile ? [0.7, 0.9] : [1.05, 1];
-  const rotate = 20 * (1 - scrollYProgress);
-  const scale = scaleDimensions[0] + (scaleDimensions[1] - scaleDimensions[0]) * scrollYProgress;
-  const translateY = -100 * scrollYProgress;
+  const reduced = useReducedMotion();
+  const trackRef = useRef(null);
+  const [raw, setRaw] = useState(0);
+  const progress = reduced ? 1 : raw;
+  const open = apertureEase(progress);
+  const styleVars = {
+    "--cs-progress": progress.toFixed(4),
+    "--cs-open": open.toFixed(4)
+  };
+  if (accent) styleVars["--cs-accent"] = accent;
+  if (accentSecondary) styleVars["--cs-accent-2"] = accentSecondary;
   useIsomorphicLayoutEffect(() => {
-    function updateIsMobile() {
-      setIsMobile(window.innerWidth <= 768);
-    }
-    function updateScroll() {
-      if (!containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const windowHeight = window.innerHeight;
-      const progress = 1 - Math.max(0, rect.bottom - window.scrollY) / windowHeight;
-      setScrollYProgress(Math.max(0, Math.min(1, progress)));
+    const track = trackRef.current;
+    if (!track || reduced) return;
+    function measure() {
+      if (!track) return;
+      const rect = track.getBoundingClientRect();
+      setRaw(apertureProgress(rect.top, rect.height, window.innerHeight));
     }
-    updateIsMobile();
-    updateScroll();
-    window.addEventListener("resize", updateIsMobile);
-    window.addEventListener("scroll", updateScroll, { passive: true });
-    window.addEventListener("resize", updateScroll, { passive: true });
+    const update = rafThrottle(measure);
+    measure();
+    const opts = { capture: true, passive: true };
+    window.addEventListener("scroll", update, opts);
+    window.addEventListener("resize", update, { passive: true });
     return () => {
-      window.removeEventListener("resize", updateIsMobile);
-      window.removeEventListener("scroll", updateScroll);
-      window.removeEventListener("resize", updateScroll);
+      update.cancel();
+      window.removeEventListener("scroll", update, opts);
+      window.removeEventListener("resize", update);
     };
-  }, []);
+  }, [reduced]);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref: containerRef,
       className: cn(
-        "relative flex h-[60rem] items-center justify-center p-2 md:h-[80rem] md:p-20",
+        "cs-root relative flex h-[48rem] w-full items-start justify-center p-2 md:h-[64rem] md:p-10",
         className
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "relative w-full py-10 md:py-40", style: { perspective: "1000px" }, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: { transform: `translateY(${translateY}px)` },
-            className: "mx-auto max-w-5xl text-center",
-            children: titleContent
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              transform: `rotateX(${rotate}deg) scale(${scale})`,
-              boxShadow: "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003"
-            },
-            className: "mx-auto -mt-12 h-[30rem] w-full max-w-5xl rounded-[30px] border-4 border-[#6C6C6C] bg-[#222222] p-2 shadow-2xl md:h-[40rem] md:p-6",
-            children: /* @__PURE__ */ jsx("div", { className: "size-full overflow-hidden rounded-2xl bg-gray-100 md:rounded-2xl md:p-4 dark:bg-zinc-900", children: cardContent })
-          }
-        )
+      style: styleVars,
+      "data-reduced-motion": reduced ? "" : void 0,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative w-full py-10 md:py-16", children: [
+        /* @__PURE__ */ jsx("div", { className: "cs-title mx-auto max-w-5xl text-center", children: titleContent }),
+        /* @__PURE__ */ jsx("div", { ref: trackRef, className: "cs-track relative mx-auto mt-10 w-full max-w-5xl md:mt-12", children: /* @__PURE__ */ jsxs("div", { className: "cs-stage relative aspect-[4/3] w-full sm:aspect-[16/10]", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "cs-shadow pointer-events-none absolute inset-0",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "cs-card absolute inset-0 p-1.5 md:p-2", children: /* @__PURE__ */ jsxs("div", { className: "cs-surface relative size-full overflow-hidden", children: [
+            /* @__PURE__ */ jsx("div", { className: "cs-content size-full", children: cardContent }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "cs-veil pointer-events-none absolute inset-0",
+                "aria-hidden": "true"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "cs-lip cs-lip-top pointer-events-none absolute",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "cs-lip cs-lip-bottom pointer-events-none absolute",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "cs-seam pointer-events-none absolute", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("span", { className: "cs-seam-haze" }),
+            /* @__PURE__ */ jsx("span", { className: "cs-seam-glow" }),
+            /* @__PURE__ */ jsx("span", { className: "cs-seam-line" })
+          ] })
+        ] }) })
       ] })
     }
   );
 }
 export {
-  ContainerScroll
+  ContainerScroll,
+  apertureEase,
+  apertureProgress
 };

package/dist/components/dock/Dock.d.ts

@@ -7,22 +7,25 @@ export interface DockProps {
     magnification?: number;
     /** Pointer distance over which the magnification falls off. */
     distance?: number;
-    /** Vertical alignment of the icons. */
+    /** Cross-axis alignment of the icons. */
     direction?: Direction;
     /** Dock orientation. */
     orientation?: DataOrientation;
-    /**
-     * Accessible name for the toolbar. The dock spreads no rest props, so this
-     * is the only way to name one whose icons carry no label of their own.
-     */
+    /** A soft pool of accent light inside the shelf that follows the pointer. */
+    spotlight?: boolean;
+    /** A soft contact shadow / glow ellipse under each icon that grows with it. */
+    reflection?: boolean;
+    /** Accessible name for the toolbar. */
     ariaLabel?: string;
     /** The `DockIcon`s and `DockSeparator`s. */
     children?: ReactNode;
 }
 /**
- * An icon dock whose items magnify smoothly as the pointer approaches.
+ * An icon dock on a lit glass shelf: icons swell on a cosine curve as the
+ * pointer approaches, a pool of light follows it across the shelf, and the
+ * shelf edge brightens near it.
  *
  * No `ref` prop: the source exposes no bindable ref, and no rest props either —
  * it reads only these props and spreads nothing.
  */
-export declare function Dock({ className, magnification, distance, direction, orientation, ariaLabel, children, }: DockProps): import("react").JSX.Element;
+export declare function Dock({ className, magnification, distance, direction, orientation, spotlight, reflection, ariaLabel, children, }: DockProps): import("react").JSX.Element;

package/dist/components/dock/Dock.js

@@ -1,77 +1,122 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { cn } from "../../utils.js";
 import { useReducedMotion, useMediaQuery } from "../../internals/motion/media-query.js";
 import { DOCK_CONTEXT_KEY } from "./types.js";
+/* empty css         */
 function Dock({
   className = "",
   magnification = 60,
   distance = 140,
   direction = "middle",
   orientation = "horizontal",
+  spotlight = true,
+  reflection = true,
   ariaLabel,
   children
 }) {
-  const [pointer, setPointer] = useState({
+  const [tracked, setTracked] = useState({
     x: Infinity,
-    y: Infinity
+    y: Infinity,
+    spotX: 0,
+    spotY: 0,
+    hovering: false
   });
+  const shelf = useRef(null);
   const reduced = useReducedMotion();
   const coarse = useMediaQuery("(any-hover: none)");
   const magnify = !reduced && !coarse;
-  const frames = useRef(/* @__PURE__ */ new Set());
-  useEffect(() => {
-    const pending = frames.current;
-    return () => {
-      for (const id of pending) cancelAnimationFrame(id);
-      pending.clear();
-    };
-  }, []);
-  const schedule = useCallback((x, y) => {
-    const id = requestAnimationFrame(() => {
-      frames.current.delete(id);
-      setPointer({ x, y });
-    });
-    frames.current.add(id);
-  }, []);
+  const track = !coarse;
+  const frame = useRef(0);
+  const pending = useRef({ x: Infinity, y: Infinity });
+  useEffect(
+    () => () => {
+      if (frame.current && typeof cancelAnimationFrame === "function") {
+        cancelAnimationFrame(frame.current);
+      }
+      frame.current = 0;
+    },
+    []
+  );
+  function flush() {
+    frame.current = 0;
+    const { x, y } = pending.current;
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      const rect = shelf.current?.getBoundingClientRect();
+      setTracked((prev) => ({
+        x,
+        y,
+        spotX: rect ? x - rect.left : prev.spotX,
+        spotY: rect ? y - rect.top : prev.spotY,
+        hovering: true
+      }));
+    } else {
+      setTracked((prev) => ({ ...prev, x, y, hovering: false }));
+    }
+  }
+  function queue(x, y) {
+    pending.current = { x, y };
+    if (!frame.current) frame.current = requestAnimationFrame(flush);
+  }
   const context = useMemo(
     () => ({
-      mouseX: { current: pointer.x },
-      mouseY: { current: pointer.y },
+      mouseX: { current: tracked.x },
+      mouseY: { current: tracked.y },
       magnification,
       distance,
       orientation,
-      magnify
+      magnify,
+      reflection
     }),
-    [pointer, magnification, distance, orientation, magnify]
+    [tracked.x, tracked.y, magnification, distance, orientation, magnify, reflection]
   );
   function onPointerMove(e) {
-    if (!magnify) return;
+    if (!track) return;
     if (e.pointerType === "touch" || !e.isPrimary) return;
-    const { clientX, clientY } = e;
-    schedule(clientX, clientY);
+    queue(e.clientX, e.clientY);
   }
   function onPointerLeave() {
-    schedule(Infinity, Infinity);
+    queue(Infinity, Infinity);
   }
   const directionClass = direction === "top" ? "items-start" : direction === "bottom" ? "items-end" : "items-center";
-  return /* @__PURE__ */ jsx(DOCK_CONTEXT_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx(
+  const style = {
+    "--dock-x": `${tracked.spotX}px`,
+    "--dock-y": `${tracked.spotY}px`
+  };
+  return /* @__PURE__ */ jsx(DOCK_CONTEXT_KEY.Provider, { value: context, children: /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: shelf,
       className: cn(
-        "mx-auto flex h-[58px] w-max gap-4 rounded-2xl border p-2 backdrop-blur-md transition-all supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10",
+        "dock-shelf relative isolate mx-auto flex h-[58px] w-max gap-3 rounded-2xl border p-2 backdrop-blur-md backdrop-saturate-150",
+        "border-black/[0.08] bg-white/75 shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_1px_2px_rgba(0,0,0,0.05),0_14px_32px_-14px_rgba(0,0,0,0.22)]",
+        "dark:border-white/[0.08] dark:bg-[rgba(20,20,22,0.7)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_1px_0_rgba(0,0,0,0.5),0_18px_40px_-14px_rgba(0,0,0,0.8)]",
         orientation === "vertical" && "h-max w-[58px] flex-col",
         directionClass,
         className
       ),
+      style,
+      "data-orientation": orientation,
+      "data-spotlight": spotlight || void 0,
+      "data-reflection": reflection || void 0,
+      "data-hover": tracked.hovering || void 0,
       onPointerMove,
       onPointerLeave,
       role: "toolbar",
-      "aria-orientation": orientation,
       "aria-label": ariaLabel,
+      "aria-orientation": orientation,
       tabIndex: 0,
-      children
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "dock-deco", "aria-hidden": "true", children: [
+          spotlight && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "dock-spot" }),
+            /* @__PURE__ */ jsx("span", { className: "dock-rim", children: /* @__PURE__ */ jsx("span", { className: "dock-rim-light" }) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "dock-frame" })
+        ] }),
+        children
+      ]
     }
   ) });
 }

package/dist/components/dock/DockIcon.d.ts

@@ -1,4 +1,14 @@
 import type { ReactNode } from "react";
+/** Resting edge length of every icon, in pixels. */
+export declare const DOCK_BASE_SIZE = 40;
+/**
+ * The magnification curve: a cosine bell rather than a straight line.
+ * Full `magnification` under the pointer, easing smoothly to nothing at
+ * `distance`, with a flat top and flat shoulders — so neighbours swell and
+ * settle instead of forming a tent. Pure, so every framework shares the exact
+ * numbers.
+ */
+export declare function dockIconSize(offset: number, magnification: number, distance: number): number;
 export interface DockIconProps {
     /** Additional CSS classes */
     className?: string;
@@ -6,11 +16,12 @@ export interface DockIconProps {
     children?: ReactNode;
 }
 /**
- * One item in a `Dock`, sized from its distance to the pointer.
+ * One item in a `Dock`, sized from its distance to the pointer, with a floor
+ * reflection and an indicator dot when it is the icon under the pointer.
  *
  * The node arrives through `useElementRef` rather than a plain `useRef`: the
- * width is computed while rendering, so the component has to re-render once the
- * element actually exists. Before it does, the distance is `Infinity` and the
+ * size is computed while rendering, so the component has to re-render once the
+ * element actually exists. Before it does, the offset is `Infinity` and the
  * icon renders at its resting 40px — which is also the size it has at mount,
  * with the pointer still at `Infinity`, so nothing moves on that extra render.
  */

package/dist/components/dock/DockIcon.js

@@ -2,37 +2,41 @@
 import { jsx } from "react/jsx-runtime";
 import { useElementRef } from "../../internals/dom/use-element-ref.js";
 import { useDockContext } from "./types.js";
+/* empty css              */
+const DOCK_BASE_SIZE = 40;
+function dockIconSize(offset, magnification, distance) {
+  if (!distance || !magnification || !Number.isFinite(offset)) return DOCK_BASE_SIZE;
+  const t = Math.min(Math.max(Math.abs(offset) / distance, 0), 1);
+  return DOCK_BASE_SIZE + magnification * 0.5 * (1 + Math.cos(Math.PI * t));
+}
 function DockIcon({ className = "", children }) {
   const context = useDockContext();
   const [node, iconRef] = useElementRef();
-  function calculateDistance() {
-    if (!node) return Infinity;
+  function measure() {
+    const vertical = context.orientation === "vertical";
+    const pointer = vertical ? context.mouseY.current : context.mouseX.current;
+    if (!node || !Number.isFinite(pointer)) return { offset: Infinity, half: 0 };
     const bounds = node.getBoundingClientRect();
-    if (context.orientation === "vertical") {
-      return context.mouseY.current - bounds.y - bounds.height / 2;
-    }
-    return context.mouseX.current - bounds.x - bounds.width / 2;
-  }
-  function computeIconWidth() {
-    if (!context.magnify) return 40;
-    const distanceCalc = calculateDistance();
-    if (!context.distance || !context.magnification) return 40;
-    if (Math.abs(distanceCalc) < context.distance) {
-      return (1 - Math.abs(distanceCalc) / context.distance) * context.magnification + 40;
-    }
-    return 40;
+    return vertical ? { offset: pointer - bounds.y - bounds.height / 2, half: bounds.height / 2 } : { offset: pointer - bounds.x - bounds.width / 2, half: bounds.width / 2 };
   }
-  const iconWidth = computeIconWidth();
+  const probe = measure();
+  const iconSize = context.magnify ? dockIconSize(probe.offset, context.magnification, context.distance) : DOCK_BASE_SIZE;
+  const active = Math.abs(probe.offset) <= probe.half && probe.half > 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref: iconRef,
-      className: `flex aspect-square cursor-pointer items-center justify-center rounded-full transition-all duration-200 ease-out ${className}`,
-      style: { width: `${iconWidth}px`, height: `${iconWidth}px` },
+      className: `dock-icon relative z-[1] flex aspect-square cursor-pointer items-center justify-center rounded-full ${className}`,
+      style: { width: `${iconSize}px`, height: `${iconSize}px` },
+      "data-orientation": context.orientation,
+      "data-reflection": context.reflection || void 0,
+      "data-dock-active": active || void 0,
       children
     }
   );
 }
 export {
-  DockIcon
+  DOCK_BASE_SIZE,
+  DockIcon,
+  dockIconSize
 };

package/dist/components/dock/DockSeparator.d.ts

@@ -2,5 +2,8 @@ export interface DockSeparatorProps {
     /** Additional CSS classes */
     className?: string;
 }
-/** A rule between two groups of dock icons, laid across the dock's own axis. */
+/**
+ * A hairline that fades out at both ends, so it reads as a seam in the glass
+ * rather than a bar laid on top of it. Laid across the dock's own axis.
+ */
 export declare function DockSeparator({ className }: DockSeparatorProps): import("react").JSX.Element;

package/dist/components/dock/DockSeparator.js

@@ -7,9 +7,12 @@ function DockSeparator({ className = "" }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      role: "separator",
+      "aria-orientation": context.orientation === "vertical" ? "horizontal" : "vertical",
       className: cn(
-        "bg-secondary relative block",
-        context.orientation === "vertical" ? "h-0.5 w-4/5" : "h-4/5 w-0.5",
+        "relative z-[1] block shrink-0 self-center",
+        context.orientation === "vertical" ? "h-px w-4/5 bg-gradient-to-r" : "h-4/5 w-px bg-gradient-to-b",
+        "from-transparent via-black/15 to-transparent dark:via-white/15",
         className
       )
     }

package/dist/components/dock/types.d.ts

@@ -2,8 +2,11 @@ export type DataOrientation = "vertical" | "horizontal";
 export type Direction = "top" | "middle" | "bottom";
 export interface DockContext {
     /**
-     * The pointer's page X, in a box rather than as a bare number — the shape
-     * the source publishes, kept verbatim so the exported type is unchanged.
+     * The pointer's VIEWPORT X (`clientX`), `Infinity` when the pointer is
+     * outside the dock. Viewport, not page, because `DockIcon` measures itself
+     * with `getBoundingClientRect()`, which is viewport-relative. In a box
+     * rather than as a bare number — the shape the source publishes, kept
+     * verbatim so the exported type is unchanged.
      *
      * There the box exists so children can read a reactive update through a
      * stable object; here the box is REBUILT by `Dock` on every pointer frame,
@@ -13,7 +16,7 @@ export interface DockContext {
     mouseX: {
         current: number;
     };
-    /** The pointer's page Y. Same box treatment as `mouseX`. */
+    /** The pointer's viewport Y (`clientY`). Same box treatment as `mouseX`. */
     mouseY: {
         current: number;
     };
@@ -23,11 +26,15 @@ export interface DockContext {
     /**
      * False when the visitor asked for reduced motion, or when the device has no
      * real pointer to track. `Dock` owns the two media queries behind it and
-     * `DockIcon` reads it before doing any measuring, so a device that will
-     * never magnify also never pays for a `getBoundingClientRect()` per icon per
-     * frame. Read-only: only `Dock` may write it.
+     * `DockIcon` reads it before sizing itself. Read-only: only `Dock` may
+     * write it.
      */
     readonly magnify: boolean;
+    /**
+     * Whether each icon casts its soft floor reflection (the contact shadow /
+     * glow ellipse under it). Mirrors the `reflection` prop on `Dock`.
+     */
+    readonly reflection: boolean;
 }
 /**
  * The context `DockIcon` and `DockSeparator` read to find their dock. The

package/dist/components/dropdown-menu/menu-shared.d.ts

@@ -5,18 +5,21 @@ export interface MenuContentKeydownOptions {
 }
 /**
  * Wires ArrowUp/Down, Home/End and single-character typeahead to a level's
- * menu-focus core, and Tab to `options.onTab`. Identical semantics whether
- * the panel is a `DropdownMenuContent` or its nested `*SubContent` — the keys
- * navigate whatever level currently holds real DOM focus, regardless of how
- * that level's panel was opened or positioned.
+ * `MenuFocus` core, and Tab to `options.onTab`. Identical semantics whether
+ * the panel is a `DropdownMenuContent`, a `ContextMenuContent`, or either
+ * one's nested `*SubContent` — the keys navigate whatever level currently
+ * holds real DOM focus, regardless of how that level's panel was opened or
+ * positioned.
  *
  * ArrowRight/ArrowLeft are deliberately not handled here: their key strings
  * are more than one character, so the typeahead fallback below already
  * ignores them, and `*SubTrigger`/`*SubContent` each own their half of that
  * pair directly on the element the key is actually about.
  *
- * Takes the native `KeyboardEvent` shape React's synthetic event satisfies
- * structurally, so a caller passes `event` straight through with no unwrap.
+ * The parameter is typed structurally (the handful of members this function
+ * actually reads) rather than as the concrete DOM `KeyboardEvent`, so a
+ * caller can pass any event shape that satisfies it — including a
+ * framework's own synthetic event — with no unwrap or cast.
  */
 export declare function handleMenuContentKeydown(event: Pick<KeyboardEvent, "key" | "ctrlKey" | "metaKey" | "altKey"> & {
     preventDefault(): void;
@@ -30,8 +33,8 @@ export declare function handleMenuContentKeydown(event: Pick<KeyboardEvent, "key
  * shared across levels, which is what keeps a deeply nested submenu from
  * closing an unrelated one two levels up.
  *
- * Allocation-only, so a component builds one through `useConstant`: it
- * installs no listener and starts no timer.
+ * Allocation-only: it installs no listener and starts no timer, so building
+ * one is safe to do exactly once per component instance.
  */
 export declare function createOpenSubRegistry(): {
     registerOpenSub(triggerEl: HTMLElement, close: () => void): () => void;

package/dist/components/editorial-engine/engine.js

@@ -140,13 +140,11 @@ function createEditorialEngine(stage, options) {
   function makeLineEl(className) {
     const element = document.createElement("span");
     element.className = className;
-    element.setAttribute("aria-hidden", "true");
     return element;
   }
   const orbEls = ORB_DEFS.map((def) => {
     const element = document.createElement("div");
     element.className = "ee-orb";
-    element.setAttribute("aria-hidden", "true");
     const [r, g, b] = def.color;
     element.style.background = `radial-gradient(circle at 35% 35%, rgba(${r},${g},${b},0.35), rgba(${r},${g},${b},0.12) 55%, transparent 72%)`;
     element.style.boxShadow = `0 0 60px 15px rgba(${r},${g},${b},0.18), 0 0 120px 40px rgba(${r},${g},${b},0.07)`;
@@ -155,7 +153,6 @@ function createEditorialEngine(stage, options) {
   });
   const dropCapEl = document.createElement("div");
   dropCapEl.className = "ee-drop-cap";
-  dropCapEl.setAttribute("aria-hidden", "true");
   stage.appendChild(dropCapEl);
   const preparedBody = prepareWithSegments(body, bodyFont, { whiteSpace: "pre-wrap" });
   const preparedPullquotes = pullquotes.map((text) => prepareWithSegments(text, pullquoteFont));
@@ -439,7 +436,6 @@ function createEditorialEngine(stage, options) {
     syncPool(pullquoteBoxPool, pullquoteRects.length, () => {
       const element = document.createElement("div");
       element.className = "ee-pullquote-box";
-      element.setAttribute("aria-hidden", "true");
       return element;
     });
     for (let i = 0; i < pullquoteRects.length; i++) {
@@ -541,16 +537,7 @@ function createEditorialEngine(stage, options) {
     window.removeEventListener("pointerup", onPointerUp);
     window.removeEventListener("pointercancel", onPointerUp);
     document.removeEventListener("selectionchange", onSelectionChange);
-    for (const element of [
-      ...bodyLinePool,
-      ...headlinePool,
-      ...pullquoteLinePool,
-      ...pullquoteBoxPool,
-      ...orbEls,
-      dropCapEl
-    ]) {
-      element.remove();
-    }
+    stage.replaceChildren();
   };
 }
 export {