fancy-ui-react 0.2.0

package/dist/components/dropdown-menu/DropdownMenuSubTrigger.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useCallback, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useMenuItemRef } from "../../internals/menu.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useMenuContext, useSubContext } from "./types.js";
+const OPEN_INTENT_MS = 150;
+function DropdownMenuSubTrigger({
+  disabled = false,
+  icon,
+  children,
+  className
+}) {
+  const parentMenu = useMenuContext();
+  const sub = useSubContext();
+  const itemRef = useRef(null);
+  const openIntentTimer = useRef(null);
+  const registerRef = useMenuItemRef(parentMenu.focus);
+  const { setTriggerRef } = sub;
+  const publishTrigger = useCallback(
+    (node) => {
+      setTriggerRef(node);
+    },
+    [setTriggerRef]
+  );
+  const ref = useComposedRefs(itemRef, registerRef, publishTrigger);
+  const clearOpenIntent = useCallback(() => {
+    if (openIntentTimer.current !== null) {
+      clearTimeout(openIntentTimer.current);
+      openIntentTimer.current = null;
+    }
+  }, []);
+  useEffect(() => clearOpenIntent, [clearOpenIntent]);
+  function handleClick() {
+    if (disabled) return;
+    if (itemRef.current) parentMenu.focus.focusItem(itemRef.current);
+    sub.openSub();
+  }
+  function handleMouseEnter() {
+    if (disabled || !itemRef.current) return;
+    sub.keepOpen();
+    parentMenu.focus.focusItem(itemRef.current);
+    clearOpenIntent();
+    openIntentTimer.current = setTimeout(() => {
+      openIntentTimer.current = null;
+      sub.openSub();
+    }, OPEN_INTENT_MS);
+  }
+  function handleMouseLeave() {
+    clearOpenIntent();
+    sub.scheduleClose();
+  }
+  function handleKeydown(event) {
+    if (disabled) return;
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      sub.openSub();
+    }
+  }
+  const classes = cn(
+    "ft-dropdown-menu-item flex w-full cursor-pointer items-center justify-between gap-[10px] rounded-[6px] px-[10px] py-[7px] text-left text-foreground outline-none",
+    "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
+    "disabled:pointer-events-none disabled:opacity-50",
+    className
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      id: sub.triggerId,
+      type: "button",
+      role: "menuitem",
+      tabIndex: -1,
+      disabled,
+      "aria-disabled": disabled ? "true" : void 0,
+      "aria-haspopup": "menu",
+      "aria-expanded": sub.open,
+      "aria-controls": sub.open ? sub.contentId : void 0,
+      className: classes,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onKeyDown: handleKeydown,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-[10px]", children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "ft-dropdown-menu-item-icon", "aria-hidden": "true", children: icon }) : null,
+          /* @__PURE__ */ jsx("span", { children })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ft-dropdown-menu-sub-caret text-muted-foreground text-[10px]",
+            children: sub.resolvedSide === "left" ? "‹" : "›"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DropdownMenuSubTrigger
+};

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface DropdownMenuTriggerProps {
+    /** Disables the trigger — the menu cannot be opened. */
+    disabled?: boolean;
+    /** The trigger's content. */
+    children?: ReactNode;
+    /** Additional CSS classes, merged onto the trigger. */
+    className?: string;
+}
+/**
+ * The button that opens the menu.
+ *
+ * The source declares `ref = $bindable(null)`, so the button element arrives
+ * through the ref channel rather than a prop.
+ */
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/dropdown-menu/DropdownMenuTrigger.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useDropdownMenuRoot } from "./types.js";
+/* empty css                          */
+const DropdownMenuTrigger = forwardRef(
+  function DropdownMenuTrigger2({ disabled = false, children, className }, forwardedRef) {
+    const ctx = useDropdownMenuRoot();
+    const [node, setNode] = useElementRef();
+    const ref = useComposedRefs(setNode, forwardedRef);
+    const { setTriggerRef } = ctx;
+    useEffect(() => {
+      setTriggerRef(node);
+      return () => setTriggerRef(null);
+    }, [setTriggerRef, node]);
+    function handleClick() {
+      if (disabled) return;
+      if (ctx.open) {
+        ctx.close({ returnFocus: false });
+      } else {
+        ctx.openWithFocus("first");
+      }
+    }
+    function handleKeydown(event) {
+      if (disabled) return;
+      switch (event.key) {
+        case "Enter":
+        case " ":
+        case "ArrowDown":
+          event.preventDefault();
+          ctx.openWithFocus("first");
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          ctx.openWithFocus("last");
+          return;
+      }
+    }
+    const classes = cn(
+      "ft-dropdown-menu-trigger border-border text-foreground hover:bg-accent hover:text-accent-foreground inline-flex cursor-pointer items-center gap-1.5 rounded-[8px] border px-[14px] py-[7px] text-[12px] font-medium transition-colors focus-visible:ring-[3px] focus-visible:ring-[var(--ft-nav-accent)]/35 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        id: ctx.triggerId,
+        type: "button",
+        disabled,
+        className: classes,
+        "aria-haspopup": "menu",
+        "aria-expanded": ctx.open,
+        "aria-controls": ctx.open ? ctx.contentId : void 0,
+        onClick: handleClick,
+        onKeyDown: handleKeydown,
+        children
+      }
+    );
+  }
+);
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+export {
+  DropdownMenuTrigger
+};

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

@@ -0,0 +1,20 @@
+export { DropdownMenu } from "./DropdownMenu.js";
+export type { DropdownMenuProps } from "./DropdownMenu.js";
+export { DropdownMenuTrigger } from "./DropdownMenuTrigger.js";
+export type { DropdownMenuTriggerProps } from "./DropdownMenuTrigger.js";
+export { DropdownMenuContent } from "./DropdownMenuContent.js";
+export type { DropdownMenuContentProps } from "./DropdownMenuContent.js";
+export { DropdownMenuItem } from "./DropdownMenuItem.js";
+export type { DropdownMenuItemProps } from "./DropdownMenuItem.js";
+export { DropdownMenuSeparator } from "./DropdownMenuSeparator.js";
+export type { DropdownMenuSeparatorProps } from "./DropdownMenuSeparator.js";
+export { DropdownMenuLabel } from "./DropdownMenuLabel.js";
+export type { DropdownMenuLabelProps } from "./DropdownMenuLabel.js";
+export { DropdownMenuSub } from "./DropdownMenuSub.js";
+export type { DropdownMenuSubProps } from "./DropdownMenuSub.js";
+export { DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.js";
+export type { DropdownMenuSubTriggerProps } from "./DropdownMenuSubTrigger.js";
+export { DropdownMenuSubContent } from "./DropdownMenuSubContent.js";
+export type { DropdownMenuSubContentProps } from "./DropdownMenuSubContent.js";
+export { MENU_KEY, SUB_KEY, DROPDOWN_MENU_KEY } from "./types.js";
+export type { MenuContext, MenuCloseOptions, SubContext, DropdownMenuRootContext, } from "./types.js";

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

@@ -0,0 +1,39 @@
+import type { MenuContext } from "./types.js";
+export interface MenuContentKeydownOptions {
+    /** Called on Tab. Never calls `preventDefault` itself — the browser's own Tab traversal continues from whatever the menu core left focused. */
+    onTab?: () => void;
+}
+/**
+ * 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.
+ *
+ * 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.
+ */
+export declare function handleMenuContentKeydown(event: Pick<KeyboardEvent, "key" | "ctrlKey" | "metaKey" | "altKey"> & {
+    preventDefault(): void;
+}, ctx: MenuContext, options?: MenuContentKeydownOptions): void;
+/**
+ * One level's registry of currently-open submenus, keyed by each submenu's
+ * own trigger element. A `*Sub` calls `closeSiblingSubs` right before
+ * opening itself, so only one submenu is ever open per level — the same
+ * exclusivity a native menu bar gives you for free. Each `*Content`/
+ * `*SubContent` owns one of these for its own direct children; it is never
+ * 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.
+ */
+export declare function createOpenSubRegistry(): {
+    registerOpenSub(triggerEl: HTMLElement, close: () => void): () => void;
+    closeSiblingSubs(exceptTriggerEl: HTMLElement): void;
+};

package/dist/components/dropdown-menu/menu-shared.js

@@ -0,0 +1,48 @@
+"use client";
+function handleMenuContentKeydown(event, ctx, options = {}) {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      ctx.focus.move(1);
+      return;
+    case "ArrowUp":
+      event.preventDefault();
+      ctx.focus.move(-1);
+      return;
+    case "Home":
+      event.preventDefault();
+      ctx.focus.moveToEdge("first");
+      return;
+    case "End":
+      event.preventDefault();
+      ctx.focus.moveToEdge("last");
+      return;
+    case "Tab":
+      options.onTab?.();
+      return;
+    default:
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        ctx.focus.typeahead(event.key);
+      }
+  }
+}
+function createOpenSubRegistry() {
+  const openSubs = /* @__PURE__ */ new Map();
+  return {
+    registerOpenSub(triggerEl, close) {
+      openSubs.set(triggerEl, close);
+      return () => {
+        if (openSubs.get(triggerEl) === close) openSubs.delete(triggerEl);
+      };
+    },
+    closeSiblingSubs(exceptTriggerEl) {
+      for (const [triggerEl, close] of openSubs) {
+        if (triggerEl !== exceptTriggerEl) close();
+      }
+    }
+  };
+}
+export {
+  createOpenSubRegistry,
+  handleMenuContentKeydown
+};

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

@@ -0,0 +1,159 @@
+/**
+ * The three contracts this family publishes, and the React contexts that
+ * carry them.
+ *
+ * The Svelte source publishes each one under a `unique symbol` context key;
+ * React's own context object plays that role here, so the exported names are
+ * kept and the values are `React.Context` objects rather than symbols — the
+ * same substitution `ToggleGroup` makes for `TOGGLE_GROUP_KEY`:
+ *
+ * ```tsx
+ * const menu = useContext(MENU_KEY);
+ * ```
+ */
+import type { Context } from "react";
+import type { Side, Align } from "../../internals/anchor-position.js";
+import type { MenuFocusState } from "../../internals/menu.js";
+/**
+ * Options accepted by a menu's own `close`/`closeAll`, shared across every
+ * level (root, item, sub) so one call site's options object works
+ * everywhere it's forwarded to.
+ */
+export interface MenuCloseOptions {
+    /** Whether closing returns DOM focus to the trigger. Defaults to `true` wherever it's read. */
+    returnFocus?: boolean;
+    /**
+     * Suppresses the `close` sound cue for this particular close call —
+     * used when the caller is about to play its own cue instead (an item's
+     * `select`), so exactly one cue fires per interaction, never both.
+     * Has no effect when the root's own `sound` prop is off.
+     */
+    silent?: boolean;
+}
+/**
+ * Shared by a menu family's content panels for their item-level children —
+ * `*Item`, `*Separator`, `*Label`, `*Sub`, `*SubTrigger`, `*SubContent`. Two
+ * families behave identically once a panel is open — same menu-focus wiring,
+ * same submenu intent-delay behaviour — and only how the panel itself opens
+ * and where it anchors differs.
+ *
+ * Both a top-level `*Content` and a nested `*SubContent` provide one of
+ * these under `MENU_KEY` — a `*SubContent` shadows its parent's for its own
+ * subtree, so `*Item`/`*Separator`/`*Label` never need to know which level
+ * they are at.
+ */
+export interface MenuContext {
+    /** The menu-focus core for this level's own items — not a nested submenu's, which has its own. */
+    readonly focus: MenuFocusState;
+    /**
+     * The Tailwind font-size class items at this level should render at —
+     * `"text-[13px]"` under `DropdownMenu`. `*Item`/`*SubTrigger` set no
+     * font-size of their own and simply inherit it via normal CSS from
+     * whichever panel renders them — this field only exists for `*SubContent`
+     * to read and pass through. A `*SubContent` is portalled to
+     * `document.body` independently of its parent panel (also portalled
+     * there), so the two end up as DOM *siblings* once open, not
+     * ancestor/descendant — CSS inheritance from the root panel to a nested
+     * submenu's own items doesn't reach across that gap the way it does from
+     * a panel straight to its own direct items. React context isn't
+     * DOM-based, though: it follows the *component* tree, which portalling a
+     * node doesn't change, so this field crosses the same gap CSS can't.
+     */
+    readonly itemTextClass: string;
+    /**
+     * Whether this menu family plays sound cues — forwarded from the root's
+     * own `sound` prop. Optional so a family that builds its own
+     * `MenuContext` without this field keeps compiling unchanged; reads as
+     * falsy there, which is the correct "no sound" behaviour.
+     */
+    readonly sound?: boolean;
+    /**
+     * Whether the menu TREE this level belongs to is still open — not just
+     * this level's own mount. Closing the root flips only the root's state
+     * and tears every nested level down with it, so a submenu's own
+     * `sub.open` stays true for the whole of that outro. Anything asking "is
+     * this panel a live top layer?" — an exit transition picking its curve, a
+     * dismissable deciding whether an Escape is its to swallow — has to read
+     * this instead. A `*SubContent` republishes it as its own liveness, so
+     * the answer composes down a chain of nested submenus.
+     */
+    readonly rootOpen: boolean;
+    /** Closes the whole menu, root included. What selecting an item and pressing Tab both do. */
+    closeAll(options?: MenuCloseOptions): void;
+    /** Registers a currently-open submenu at this level, keyed by its trigger element. Returns an unregister function. */
+    registerOpenSub(triggerEl: HTMLElement, close: () => void): () => void;
+    /** Closes every open submenu at this level except the one whose trigger is `exceptTriggerEl` — only one submenu open per level, like a native menu bar. */
+    closeSiblingSubs(exceptTriggerEl: HTMLElement): void;
+}
+export declare const MENU_KEY: Context<MenuContext | undefined>;
+/** Reads the enclosing level's `MenuContext`. Internal. */
+export declare function useMenuContext(): MenuContext;
+/**
+ * The contract between a `*Sub` boundary and its own `*SubTrigger` and
+ * `*SubContent` — distinct from `MenuContext`, which is about a level's
+ * *items*, not the one boundary component coordinating a single submenu's
+ * open state and hover-intent timers.
+ */
+export interface SubContext {
+    readonly open: boolean;
+    readonly contentId: string;
+    /** The sub-trigger's own id — read by `*SubContent` for `aria-labelledby`, so the submenu panel announces the row that opened it. */
+    readonly triggerId: string;
+    readonly triggerRef: HTMLElement | null;
+    /**
+     * The side the submenu actually rendered on, as last reported by
+     * `useAnchorPosition`'s `onPlacement` — `"right"` until a flip moves it
+     * to `"left"`. `SubTrigger` reads this to mirror its caret;
+     * ArrowRight/Left keep their fixed meaning ("into the submenu" / "back to
+     * the trigger") regardless of which side that visually is.
+     */
+    readonly resolvedSide: Side;
+    /**
+     * The cross-axis alignment the submenu actually rendered with, as last
+     * reported by `onPlacement`. `"start"` until a clamp near a viewport edge
+     * slides the panel along that axis, after which the requested corner is
+     * no longer the one touching the trigger. `SubContent` reads this for its
+     * entrance origin, so the panel grows from the corner nearest the trigger
+     * rather than from the far one.
+     */
+    readonly resolvedAlign: Align;
+    setTriggerRef(el: HTMLElement | null): void;
+    setPlacement(side: Side, align: Align): void;
+    /** Opens the submenu. Idempotent — does nothing if already open. */
+    openSub(): void;
+    /**
+     * Closes the submenu, optionally returning DOM focus to its trigger.
+     * `silent` suppresses the submenu's `close` cue (parent-driven closes).
+     */
+    closeSub(returnFocus: boolean, silent?: boolean): void;
+    /** Cancels a pending close-intent timer. Called when the pointer enters the trigger or the content. */
+    keepOpen(): void;
+    /** Starts the close-intent timer. Called when the pointer leaves the trigger or the content. */
+    scheduleClose(): void;
+}
+export declare const SUB_KEY: Context<SubContext | undefined>;
+/** Reads the enclosing `DropdownMenuSub`'s context. Internal. */
+export declare function useSubContext(): SubContext;
+/** The contract between `DropdownMenu` and its own `DropdownMenuTrigger`/`DropdownMenuContent`. */
+export interface DropdownMenuRootContext {
+    readonly contentId: string;
+    readonly triggerId: string;
+    readonly side: Side;
+    readonly align: Align;
+    readonly offset: number;
+    readonly loop: boolean;
+    readonly open: boolean;
+    /** Which end to focus once the content mounts — set by whichever key opened the trigger. */
+    readonly focusEdge: "first" | "last";
+    readonly triggerRef: HTMLElement | null;
+    /** Whether this menu plays sound cues — mirrors `DropdownMenuProps.sound`. */
+    readonly sound: boolean;
+    setTriggerRef(el: HTMLElement | null): void;
+    /** Opens the menu (if not already open) and requests that its content focus `edge` once mounted. */
+    openWithFocus(edge: "first" | "last"): void;
+    /** Closes the menu. Returns focus to the trigger by default. */
+    close(options?: MenuCloseOptions): void;
+}
+export declare const DROPDOWN_MENU_KEY: Context<DropdownMenuRootContext | undefined>;
+/** Reads the enclosing `DropdownMenu`'s context. Internal. */
+export declare function useDropdownMenuRoot(): DropdownMenuRootContext;

package/dist/components/dropdown-menu/types.js

@@ -0,0 +1,32 @@
+"use client";
+import { createContext, useContext } from "react";
+function useRequiredContext(context, name) {
+  const value = useContext(context);
+  if (value === void 0) {
+    throw new Error(`${name} is missing: this component must be rendered inside its provider.`);
+  }
+  return value;
+}
+const MENU_KEY = createContext(void 0);
+MENU_KEY.displayName = "MenuContext";
+function useMenuContext() {
+  return useRequiredContext(MENU_KEY, "MenuContext");
+}
+const SUB_KEY = createContext(void 0);
+SUB_KEY.displayName = "MenuSubContext";
+function useSubContext() {
+  return useRequiredContext(SUB_KEY, "MenuSubContext");
+}
+const DROPDOWN_MENU_KEY = createContext(void 0);
+DROPDOWN_MENU_KEY.displayName = "DropdownMenuRootContext";
+function useDropdownMenuRoot() {
+  return useRequiredContext(DROPDOWN_MENU_KEY, "DropdownMenuRootContext");
+}
+export {
+  DROPDOWN_MENU_KEY,
+  MENU_KEY,
+  SUB_KEY,
+  useDropdownMenuRoot,
+  useMenuContext,
+  useSubContext
+};

package/dist/components/editorial-engine/EditorialEngine.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Props for EditorialEngine
+ *
+ * Live magazine layout: multi-column text flow with cursor handoff,
+ * auto-fitted headline, drop cap, pullquotes, and body text reflowing in
+ * real time around draggable animated orbs. All line breaking is computed
+ * from cached font metrics — the render loop performs zero DOM reads.
+ */
+export interface EditorialEngineProps {
+    /** Headline, auto-sized to the widest font that breaks no word */
+    headline?: string;
+    /** Body copy (plain text, paragraphs separated by blank lines) */
+    body?: string;
+    /** Up to two pullquotes embedded in the columns */
+    pullquotes?: string[];
+    /** Font family stack used for all text */
+    fontFamily?: string;
+    /** Additional CSS classes for the stage */
+    className?: string;
+}
+export declare function EditorialEngine({ headline, body, pullquotes, fontFamily, className, }: EditorialEngineProps): import("react").JSX.Element;

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

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { createEditorialEngine } from "./engine.js";
+/* empty css                     */
+const DEFAULT_HEADLINE = "TEXT THAT FLOWS AROUND ANYTHING";
+const DEFAULT_BODY = `Print designers have flowed text around images, illustrations, and odd-shaped figures for more than a century. The web never caught up. CSS gives us float, and more recently shape-outside, but both only push text away from one side of one static box. Flowing text through multiple columns, around several moving obstacles at once, filling the gaps on both sides — the browser has no answer for that.
+
+The reason is not a lack of imagination. It is the cost of asking. Every question about text — how wide is this word, where does this line break, how tall is this paragraph — must go through the browser's layout engine, and the layout engine answers by reflowing the document. Ask too often and the interface stutters. So we learned not to ask, and our text stayed in rigid rectangles.
+
+This page asks hundreds of times per frame. Every line of text you are reading was positioned by arithmetic, not by the browser. The pretext library measured every word once, up front, against a canvas font engine. After that, layout is pure math: given a width, it returns line breaks, line widths, and a cursor pointing at exactly where the text stopped.
+
+That cursor is what makes columns work. The first column consumes text until it runs out of vertical space, then hands its cursor to the second column, which continues mid-sentence without duplication or gaps. Newspapers have done this on paper forever; on the web it has always required hidden elements and fragile content splitting.
+
+The orbs drifting across the page are obstacles, not decoration. Each frame, the engine intersects every text line's vertical band with every orb, subtracts the blocked intervals from the column width, and fills every remaining slot — text flows on both sides of an orb at once, something shape-outside cannot express at all.
+
+Drag an orb and the paragraphs part around it in real time. Click one and it pauses. Resize the window and the headline re-fits itself, searching for the largest font size that breaks no word across lines — a binary search that costs microseconds because each probe is arithmetic, not reflow.
+
+The drop cap at the top of this article is another obstacle: a rectangle carved out of the first column's first three lines. The pullquotes are the same trick at a larger scale. Everything you see is one mechanism — carve the blocked intervals out of each line's band, lay out text in whatever space remains.
+
+When the engine finishes a frame, it writes positions and text content to a pool of absolutely positioned elements, and nothing else. The browser never computes layout for this page's body text, because every coordinate is already known. A full reflow of every line around five moving obstacles typically costs a fraction of a millisecond.
+
+Cheap text measurement changes what interfaces can be. Virtualized lists can know every item's exact height before rendering it. Chat bubbles can shrink-wrap to their tightest width. Labels can dodge chart elements as you zoom. Documents can flow around widgets that other people are dragging in real time.
+
+None of this needs a new browser API or a standards process. It needs cached font metrics, a line breaker, and the willingness to stop asking the DOM questions it answers slowly. The text on this page stopped asking. And so it flows.`;
+const DEFAULT_PULLQUOTES = [
+  "“Text flows on both sides of a moving obstacle at once — something shape-outside cannot express at all.”",
+  "“Every coordinate is already known. The browser never computes layout for this text.”"
+];
+const DEFAULT_FONT_FAMILY = '"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif';
+function EditorialEngine({
+  headline = DEFAULT_HEADLINE,
+  body = DEFAULT_BODY,
+  pullquotes = DEFAULT_PULLQUOTES,
+  fontFamily = DEFAULT_FONT_FAMILY,
+  className
+}) {
+  const layerRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  const pullquotesKey = pullquotes.join("\0");
+  useEffect(() => {
+    const layer = layerRef.current;
+    if (layer === null) return;
+    const options = { headline, body, pullquotes, fontFamily };
+    let destroy = null;
+    let cancelled = false;
+    document.fonts.ready.then(() => {
+      if (cancelled) return;
+      destroy = createEditorialEngine(layer, options);
+      setReady(true);
+    });
+    return () => {
+      cancelled = true;
+      destroy?.();
+    };
+  }, [headline, body, pullquotesKey, fontFamily]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("ee-stage", className, ready && "ready"), style: { fontFamily }, children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("ee-fallback", ready && "ee-sr-only"), children: [
+      /* @__PURE__ */ jsx("h2", { children: headline }),
+      /* @__PURE__ */ jsx("p", { children: body })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: layerRef, className: "ee-layer", "aria-hidden": "true" })
+  ] });
+}
+export {
+  EditorialEngine
+};

package/dist/components/editorial-engine/engine.d.ts

@@ -0,0 +1,7 @@
+export interface EditorialEngineOptions {
+    headline: string;
+    body: string;
+    pullquotes: string[];
+    fontFamily: string;
+}
+export declare function createEditorialEngine(stage: HTMLDivElement, options: EditorialEngineOptions): () => void;