@ai-matrx/rich-content 0.2.10 → 0.2.16

package/dist/rich-document/runtime/actionSurfacesStore.js

@@ -0,0 +1,79 @@
+import { useSyncExternalStore } from "react";
+const KEY = /* @__PURE__ */ Symbol.for("ai-matrx.rich-content.rich-document.action-surfaces");
+function store() {
+  const g = globalThis;
+  return g[KEY] ??= { state: { bySurfaceId: {} }, listeners: /* @__PURE__ */ new Set() };
+}
+function commit(next) {
+  const s = store();
+  s.state = { bySurfaceId: next };
+  for (const listener of s.listeners) listener();
+}
+function registerProvider(payload) {
+  const { surfaceId, registration } = payload;
+  const stack = [...store().state.bySurfaceId[surfaceId] ?? []];
+  const idx = stack.findIndex((entry) => entry.providerId === registration.providerId);
+  if (idx >= 0) stack[idx] = registration;
+  else stack.push(registration);
+  commit({ ...store().state.bySurfaceId, [surfaceId]: stack });
+}
+function updateProviderSpecs(payload) {
+  const { surfaceId, providerId, computedActionSpecs, contentSourceId } = payload;
+  const stack = store().state.bySurfaceId[surfaceId];
+  if (!stack) return;
+  const idx = stack.findIndex((entry) => entry.providerId === providerId);
+  if (idx < 0) return;
+  const next = [...stack];
+  next[idx] = { ...stack[idx], computedActionSpecs, contentSourceId };
+  commit({ ...store().state.bySurfaceId, [surfaceId]: next });
+}
+function unregisterProvider(payload) {
+  const { surfaceId, providerId } = payload;
+  const stack = store().state.bySurfaceId[surfaceId];
+  if (!stack) return;
+  const next = stack.filter((entry) => entry.providerId !== providerId);
+  const all = { ...store().state.bySurfaceId };
+  if (next.length === 0) delete all[surfaceId];
+  else all[surfaceId] = next;
+  commit(all);
+}
+function clearAll() {
+  commit({});
+}
+function getActionSurfacesState() {
+  return store().state;
+}
+function subscribe(listener) {
+  store().listeners.add(listener);
+  return () => store().listeners.delete(listener);
+}
+const EMPTY_PROVIDER_STACK = [];
+const EMPTY_ACTION_SPECS = [];
+function selectTopProvider(state, surfaceId) {
+  const stack = state.bySurfaceId[surfaceId];
+  return stack && stack.length > 0 ? stack[stack.length - 1] : null;
+}
+function selectProviderStack(state, surfaceId) {
+  return state.bySurfaceId[surfaceId] ?? EMPTY_PROVIDER_STACK;
+}
+function selectSurfaceActionSpecs(state, surfaceId) {
+  return selectTopProvider(state, surfaceId)?.computedActionSpecs ?? EMPTY_ACTION_SPECS;
+}
+function useTopProvider(surfaceId) {
+  return useSyncExternalStore(
+    subscribe,
+    () => selectTopProvider(store().state, surfaceId),
+    () => null
+  );
+}
+export {
+  clearAll,
+  getActionSurfacesState,
+  registerProvider,
+  selectProviderStack,
+  selectSurfaceActionSpecs,
+  selectTopProvider,
+  unregisterProvider,
+  updateProviderSpecs,
+  useTopProvider
+};

package/dist/rich-document/runtime/contextMenuFor.d.ts

@@ -0,0 +1,6 @@
+import type { RichDocumentAction, RichDocumentActionId, RichDocumentActionsVariant } from "../types.js";
+export type ContextMenuOption = boolean | {
+    extra?: RichDocumentAction[];
+    exclude?: (RichDocumentActionId | string)[];
+};
+export declare function contextMenuFor(prop: ContextMenuOption | undefined, variant: RichDocumentActionsVariant): ContextMenuOption | false;

package/dist/rich-document/runtime/contextMenuFor.js

@@ -0,0 +1,7 @@
+function contextMenuFor(prop, variant) {
+  if (prop !== void 0) return prop;
+  return variant === "bar" || variant === "mini-bar" || variant === "menu" || variant === "icon-only";
+}
+export {
+  contextMenuFor
+};

package/dist/rich-document/runtime/providerBridge.d.ts

@@ -0,0 +1,20 @@
+import type { ClickTarget } from "@ai-matrx/alchemy/actions";
+import type { RichDocumentAction, RichDocumentActionContext } from "../types.js";
+export interface ProviderBridge {
+    /** Builds a fresh action context from the host's live state/refs. */
+    getCtx: () => RichDocumentActionContext;
+    /** The actions visible for this provider (already filtered + sorted). */
+    resolvedActions: RichDocumentAction[];
+    /** The Alchemy click target the package layouts resolve against (ALC-15). */
+    target: ClickTarget;
+}
+export declare function registerBridge(providerId: string, bridge: ProviderBridge): void;
+/**
+ * Refresh an existing bridge (no semantic difference from register today,
+ * but kept separate so call sites are self-documenting).
+ */
+export declare function updateBridge(providerId: string, bridge: ProviderBridge): void;
+export declare function unregisterBridge(providerId: string): void;
+export declare function getBridge(providerId: string): ProviderBridge | undefined;
+/** Diagnostics only. */
+export declare function _getAllBridges(): ReadonlyMap<string, ProviderBridge>;

package/dist/rich-document/runtime/providerBridge.js

@@ -0,0 +1,23 @@
+const BRIDGES = /* @__PURE__ */ new Map();
+function registerBridge(providerId, bridge) {
+  BRIDGES.set(providerId, bridge);
+}
+function updateBridge(providerId, bridge) {
+  BRIDGES.set(providerId, bridge);
+}
+function unregisterBridge(providerId) {
+  BRIDGES.delete(providerId);
+}
+function getBridge(providerId) {
+  return BRIDGES.get(providerId);
+}
+function _getAllBridges() {
+  return BRIDGES;
+}
+export {
+  _getAllBridges,
+  getBridge,
+  registerBridge,
+  unregisterBridge,
+  updateBridge
+};

package/dist/rich-document/runtime/useActionSurfaceProvider.d.ts

@@ -0,0 +1,33 @@
+import type { ClickTarget } from "@ai-matrx/alchemy/actions";
+import type { ContentSource, RichDocumentAction, RichDocumentActionContext, RichDocumentActionsProp, RichDocumentActionsVariant } from "../types.js";
+export interface UseActionSurfaceProviderArgs {
+    content: string | undefined;
+    source: ContentSource;
+    actions?: RichDocumentActionsProp;
+    /** Only "remote" registers to the Redux surface; all variants register the bridge. */
+    actionsVariant: RichDocumentActionsVariant;
+    /** Required when actionsVariant === "remote". */
+    actionsSurfaceId?: string;
+}
+export interface UseActionSurfaceProviderResult {
+    /** Render-time context (from props). Safe to read during render — used to
+     * resolve auxiliary action sets (e.g. context-menu actions). */
+    ctx: RichDocumentActionContext;
+    /** Ref-based context factory. Read inside event handlers only. */
+    getCtx: () => RichDocumentActionContext;
+    /** The actions visible for this source + this consumer's exclude/extra. */
+    resolvedActions: RichDocumentAction[];
+    /**
+     * The Alchemy click target for this content (ALC-15): what the package's
+     * layouts (bar, ⋯, sheet) resolve the one registry against. Stable until
+     * something that changes eligibility changes (content, source, auth, org,
+     * exclude/extra).
+     */
+    target: ClickTarget;
+}
+/**
+ * Register a RichDocument action provider (specs + bridge) for a surface and
+ * expose the live context + resolved action list. See the file header for the
+ * no-functions-in-Redux invariant.
+ */
+export declare function useActionSurfaceProvider(args: UseActionSurfaceProviderArgs): UseActionSurfaceProviderResult;

package/dist/rich-document/runtime/useActionSurfaceProvider.js

@@ -0,0 +1,214 @@
+"use client";
+import * as React from "react";
+import {
+  useHostDispatch,
+  useHostGetState,
+  useIsAuthenticated,
+  useIsSuperAdmin,
+  useActiveOrganizationId
+} from "../../host/app-bindings.js";
+import {
+  registerProvider,
+  unregisterProvider,
+  updateProviderSpecs
+} from "./actionSurfacesStore.js";
+import { getSourceAdapter } from "../actions/sources/index.js";
+import { shortHash } from "../actions/sources/raw.js";
+import { resolveActions, richDocumentClickTarget } from "../actions/provider.js";
+import { resolveActionLabel } from "../actions/labels.js";
+import {
+  registerBridge,
+  unregisterBridge,
+  updateBridge
+} from "./providerBridge.js";
+function actionsToSpecs(actions, ctx) {
+  return actions.map((action) => {
+    const disabledResult = action.disabled?.(ctx);
+    const isDisabled = disabledResult === true || typeof disabledResult === "object" && disabledResult !== null;
+    const disabledReason = typeof disabledResult === "object" && disabledResult !== null ? disabledResult.reason : void 0;
+    return {
+      id: action.id,
+      label: resolveActionLabel(action.label, ctx),
+      iconName: action.icon.displayName ?? action.icon.name ?? "Circle",
+      category: action.category,
+      renderSlot: action.renderSlot ?? "overflow",
+      order: action.order ?? 0,
+      disabled: isDisabled,
+      disabledReason
+    };
+  });
+}
+function specsKey(specs, contentSourceId) {
+  return `${contentSourceId}::${specs.map(
+    (s) => `${s.id}|${s.label}|${s.disabled ? 1 : 0}|${s.disabledReason ?? ""}`
+  ).join(";")}`;
+}
+function buildContext(args) {
+  const adapter = getSourceAdapter(args.source.type);
+  const prefix = adapter.instanceKeyPrefix(args.source);
+  const instancePrefix = args.source.type === "raw" ? `${prefix}-${shortHash(args.content).slice(0, 8)}` : prefix;
+  return {
+    content: args.content,
+    source: args.source,
+    metadata: args.host?.metadata ?? null,
+    dispatch: args.dispatch,
+    getState: args.getState,
+    organizationId: args.organizationId,
+    isAuthenticated: args.isAuthenticated,
+    isAdmin: args.isAdmin,
+    isCreator: args.host?.isCreator ?? false,
+    surfaceKey: args.host?.surfaceKey ?? null,
+    onClose: () => {
+    },
+    instanceKey: (suffix) => `${instancePrefix}-${suffix}`,
+    sourceAdapter: adapter,
+    callbacks: args.callbacks,
+    extensions: args.extensions
+  };
+}
+function useActionSurfaceProvider(args) {
+  const {
+    content,
+    source,
+    actions: actionsProp,
+    actionsVariant,
+    actionsSurfaceId
+  } = args;
+  const dispatch = useHostDispatch();
+  const getState = useHostGetState();
+  const isAuthenticated = Boolean(useIsAuthenticated());
+  const isAdmin = Boolean(useIsSuperAdmin());
+  const organizationId = useActiveOrganizationId();
+  const providerId = React.useId();
+  const contentRef = React.useRef(content ?? "");
+  const sourceRef = React.useRef(source);
+  const callbacksRef = React.useRef(actionsProp?.callbacks);
+  const extensionsRef = React.useRef(
+    actionsProp?.extensions
+  );
+  const hostRef = React.useRef(actionsProp);
+  const dispatchRef = React.useRef(dispatch);
+  const isAuthRef = React.useRef(isAuthenticated);
+  const isAdminRef = React.useRef(isAdmin);
+  React.useLayoutEffect(() => {
+    contentRef.current = content ?? "";
+    sourceRef.current = source;
+    callbacksRef.current = actionsProp?.callbacks;
+    extensionsRef.current = actionsProp?.extensions;
+    hostRef.current = actionsProp;
+    dispatchRef.current = dispatch;
+    isAuthRef.current = isAuthenticated;
+    isAdminRef.current = isAdmin;
+  });
+  const getCtx = () => buildContext({
+    content: contentRef.current,
+    source: sourceRef.current,
+    callbacks: callbacksRef.current,
+    extensions: extensionsRef.current,
+    host: hostRef.current,
+    dispatch: dispatchRef.current,
+    getState,
+    isAuthenticated: isAuthRef.current,
+    isAdmin: isAdminRef.current,
+    organizationId
+  });
+  const ctx = buildContext({
+    content: content ?? "",
+    source,
+    callbacks: actionsProp?.callbacks,
+    extensions: actionsProp?.extensions,
+    host: actionsProp,
+    dispatch,
+    getState,
+    isAuthenticated,
+    isAdmin,
+    organizationId
+  });
+  const resolvedActions = resolveActions(ctx, {
+    exclude: actionsProp?.exclude,
+    extra: actionsProp?.extra
+  });
+  const specs = actionsToSpecs(resolvedActions, ctx);
+  const targetKey = [
+    ctx.instanceKey("target"),
+    source.readOnly ? 1 : 0,
+    isAuthenticated ? 1 : 0,
+    isAdmin ? 1 : 0,
+    organizationId ?? "",
+    actionsProp?.isCreator ? 1 : 0,
+    (actionsProp?.exclude ?? []).join(","),
+    (actionsProp?.extra ?? []).map((a) => a.id).join(","),
+    shortHash(content ?? ""),
+    resolvedActions.map((a) => a.id).join(",")
+  ].join("|");
+  const [targetState, setTargetState] = React.useState(() => ({
+    key: targetKey,
+    target: richDocumentClickTarget(ctx, {
+      getCtx,
+      exclude: actionsProp?.exclude ?? [],
+      extra: actionsProp?.extra ?? []
+    })
+  }));
+  if (targetState.key !== targetKey) {
+    setTargetState({
+      key: targetKey,
+      target: richDocumentClickTarget(ctx, {
+        getCtx,
+        exclude: actionsProp?.exclude ?? [],
+        extra: actionsProp?.extra ?? []
+      })
+    });
+  }
+  const target = targetState.target;
+  const contentSourceId = ctx.instanceKey("alchemy");
+  const lastSpecsKey = React.useRef("");
+  React.useEffect(() => {
+    if (actionsVariant !== "remote" || !actionsSurfaceId) return void 0;
+    registerProvider({
+      surfaceId: actionsSurfaceId,
+      registration: {
+        providerId,
+        computedActionSpecs: specs,
+        contentSourceId,
+        sourceType: source.type
+      }
+    });
+    lastSpecsKey.current = specsKey(specs, contentSourceId);
+    return () => {
+      unregisterProvider({
+        surfaceId: actionsSurfaceId,
+        providerId
+      });
+    };
+  }, [actionsVariant, actionsSurfaceId, providerId, dispatch, source.type]);
+  React.useEffect(() => {
+    if (actionsVariant !== "remote" || !actionsSurfaceId) return;
+    const key = specsKey(specs, contentSourceId);
+    if (key === lastSpecsKey.current) return;
+    lastSpecsKey.current = key;
+    updateProviderSpecs({
+      surfaceId: actionsSurfaceId,
+      providerId,
+      computedActionSpecs: specs,
+      contentSourceId
+    });
+  }, [
+    actionsVariant,
+    actionsSurfaceId,
+    providerId,
+    dispatch,
+    specs,
+    contentSourceId
+  ]);
+  React.useEffect(() => {
+    registerBridge(providerId, { getCtx, resolvedActions, target });
+    return () => unregisterBridge(providerId);
+  }, [providerId]);
+  React.useEffect(() => {
+    updateBridge(providerId, { getCtx, resolvedActions, target });
+  });
+  return { ctx, getCtx, resolvedActions, target };
+}
+export {
+  useActionSurfaceProvider
+};

package/dist/rich-document/search/ContentFindControl.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from "react";
+/** Places the shared rendered-content finder in a reader's existing header. */
+export declare function ContentFindControl({ rootRef, label, inline, onOpenChange, }: {
+    rootRef: RefObject<HTMLElement | null>;
+    label?: string;
+    inline?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): import("react").JSX.Element;

package/dist/rich-document/search/ContentFindControl.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Search } from "lucide-react";
+import { Button } from "@ai-matrx/design-system/controls";
+import { RenderedFindBar } from "./RenderedFindBar.js";
+import { surfaceOwnsKey } from "@ai-matrx/kit/keyboard-scope";
+function ContentFindControl({
+  rootRef,
+  label = "Find in this content",
+  inline = false,
+  onOpenChange
+}) {
+  const [open, setOpen] = useState(false);
+  const [focusRequest, setFocusRequest] = useState(0);
+  const openFind = () => {
+    setOpen(true);
+    onOpenChange?.(true);
+    setFocusRequest((value) => value + 1);
+  };
+  const closeFind = () => {
+    setOpen(false);
+    onOpenChange?.(false);
+  };
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "f" && !event.shiftKey && !event.altKey) {
+        if (!surfaceOwnsKey(event, rootRef.current)) return;
+        event.preventDefault();
+        setOpen(true);
+        onOpenChange?.(true);
+        setFocusRequest((value) => value + 1);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [onOpenChange, rootRef]);
+  if (inline && open) return /* @__PURE__ */ jsx("div", { className: "min-w-0 w-full sm:w-[360px]", children: /* @__PURE__ */ jsx(RenderedFindBar, { rootRef, label, focusRequest, onClose: closeFind, compact: true }) });
+  return /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+    /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(Search, { "aria-hidden": true }), type: "button", variant: "quiet", "aria-label": label, title: label, onClick: openFind }),
+    open && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full z-30 mt-1 w-[min(88vw,520px)]", children: /* @__PURE__ */ jsx(RenderedFindBar, { rootRef, label, focusRequest, onClose: closeFind }) })
+  ] });
+}
+export {
+  ContentFindControl
+};

package/dist/rich-document/search/RenderedFindBar.d.ts

@@ -0,0 +1,8 @@
+/** A read-only find bar for any rendered RichDocument. Never mutates content or selection. */
+export declare function RenderedFindBar({ rootRef, onClose, label, focusRequest, compact }: {
+    rootRef: React.RefObject<HTMLElement | null>;
+    onClose: () => void;
+    label?: string;
+    focusRequest?: number;
+    compact?: boolean;
+}): import("react").JSX.Element;

package/dist/rich-document/search/RenderedFindBar.js

@@ -0,0 +1,110 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { CaseSensitive, ChevronDown, ChevronUp, Regex, Search, WholeWord, X } from "lucide-react";
+import { collectRenderedFindRanges } from "./renderedFind.js";
+function highlightApi() {
+  const css = window.CSS;
+  const Highlight = window.Highlight;
+  return css?.highlights && Highlight ? { registry: css.highlights, Highlight } : null;
+}
+function clearHighlights(all, active) {
+  const api = highlightApi();
+  api?.registry.delete(all);
+  api?.registry.delete(active);
+}
+function RenderedFindBar({ rootRef, onClose, label = "Find in document", focusRequest = 0, compact = false }) {
+  const inputRef = useRef(null);
+  const [query, setQuery] = useState("");
+  const [options, setOptions] = useState({});
+  const [ranges, setRanges] = useState([]);
+  const [current, setCurrent] = useState(0);
+  const [version, setVersion] = useState(0);
+  const instance = useId().replace(/[^a-zA-Z0-9_-]/g, "_");
+  const allHighlight = `matrx-rendered-find-${instance}`;
+  const activeHighlight = `${allHighlight}-active`;
+  const scope = `${allHighlight}-scope`;
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    root.classList.add(scope);
+    return () => root.classList.remove(scope);
+  }, [rootRef, scope]);
+  useEffect(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, [focusRequest]);
+  useEffect(() => () => clearHighlights(allHighlight, activeHighlight), [allHighlight, activeHighlight]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || !query.trim()) return;
+    let timer;
+    const observer = new MutationObserver(() => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => setVersion((value) => value + 1), 150);
+    });
+    observer.observe(root, { childList: true, subtree: true, characterData: true });
+    return () => {
+      observer.disconnect();
+      if (timer) clearTimeout(timer);
+    };
+  }, [rootRef, query]);
+  useEffect(() => {
+    const root = rootRef.current;
+    const found = root ? collectRenderedFindRanges(root, query, options) : [];
+    setRanges(found);
+    setCurrent(0);
+  }, [rootRef, query, options, version]);
+  useEffect(() => {
+    const api = highlightApi();
+    if (api) {
+      if (ranges.length) api.registry.set(allHighlight, new api.Highlight(...ranges));
+      else api.registry.delete(allHighlight);
+      const active = ranges[current];
+      if (active) api.registry.set(activeHighlight, new api.Highlight(active));
+      else api.registry.delete(activeHighlight);
+    }
+    ranges[current]?.startContainer.parentElement?.scrollIntoView({ block: "center", behavior: "smooth" });
+  }, [ranges, current, allHighlight, activeHighlight]);
+  const step = (direction) => {
+    if (ranges.length) setCurrent((value) => (value + direction + ranges.length) % ranges.length);
+  };
+  const toggle = (key) => setOptions((value) => ({ ...value, [key]: !value[key] }));
+  const validRegex = !options.regex || (() => {
+    try {
+      new RegExp(query);
+      return true;
+    } catch {
+      return false;
+    }
+  })();
+  return /* @__PURE__ */ jsxs("div", { role: "search", "aria-label": label, "data-find-ignore": "", className: `flex min-w-0 items-center gap-1 rounded-lg border border-border bg-card px-2 py-1 shadow-sm ${compact ? "flex-nowrap" : "flex-wrap"}`, children: [
+    /* @__PURE__ */ jsx("style", { children: `.${scope}::highlight(${allHighlight}), .${scope} ::highlight(${allHighlight}) { background-color: rgb(250 204 21 / .5); color: inherit; } .${scope}::highlight(${activeHighlight}), .${scope} ::highlight(${activeHighlight}) { background-color: rgb(249 115 22 / .85); color: white; }` }),
+    /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("input", { ref: inputRef, type: "search", value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        step(event.shiftKey ? -1 : 1);
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+    }, placeholder: label, "aria-label": label, className: "min-w-0 flex-1 bg-transparent text-base outline-none md:text-sm" }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-12 text-right text-xs tabular-nums text-muted-foreground", "aria-live": "polite", children: !validRegex ? "Invalid pattern" : !query.trim() ? "" : ranges.length ? `${current + 1} of ${ranges.length}` : "No matches" }),
+    !compact && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(OptionButton, { label: "Match case", pressed: !!options.caseSensitive, onClick: () => toggle("caseSensitive"), children: /* @__PURE__ */ jsx(CaseSensitive, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(OptionButton, { label: "Whole word", pressed: !!options.wholeWord, onClick: () => toggle("wholeWord"), children: /* @__PURE__ */ jsx(WholeWord, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(OptionButton, { label: "Regular expression", pressed: !!options.regex, onClick: () => toggle("regex"), children: /* @__PURE__ */ jsx(Regex, { className: "h-4 w-4" }) })
+    ] }),
+    /* @__PURE__ */ jsx(OptionButton, { label: "Previous match", disabled: !ranges.length, onClick: () => step(-1), children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx(OptionButton, { label: "Next match", disabled: !ranges.length, onClick: () => step(1), children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx(OptionButton, { label: "Close search", onClick: onClose, children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+  ] });
+}
+function OptionButton({ label, pressed, disabled, onClick, children }) {
+  return /* @__PURE__ */ jsx("button", { type: "button", "aria-label": label, title: label, "aria-pressed": pressed, disabled, onClick, className: "rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground aria-pressed:bg-primary/10 aria-pressed:text-primary-ink disabled:opacity-40", children });
+}
+export {
+  RenderedFindBar
+};

package/dist/rich-document/search/renderedFind.d.ts

@@ -0,0 +1 @@
+export * from "../../utils/rendered-find.js";

package/dist/rich-document/search/renderedFind.js

@@ -0,0 +1 @@
+export * from "../../utils/rendered-find.js";