@ai-matrx/rich-content 0.2.9 → 0.2.15

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";