@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/src/components/artifacts/editable-artifact-view.tsx

@@ -0,0 +1,187 @@
+import type { EditableArtifactResource } from "@opengeni/sdk/artifacts";
+import {
+  createBrowserEditableArtifactSession,
+  type CreateBrowserEditableArtifactSessionOptions,
+  type EditableArtifactBrowserRuntime,
+  type EditableArtifactCacheAuthority,
+  type EditableArtifactModality,
+} from "@opengeni/sdk/editable-artifacts";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  ArtifactLoading,
+  ArtifactProblem,
+  artifactLoadErrorView,
+  useArtifactLabels,
+  type ArtifactLoadErrorView,
+} from "./artifact-chrome";
+import { EditableArtifactWorkbenchHost } from "./editable-artifact-workbench";
+
+/**
+ * The browser kernels an editor needs, one per modality, plus the host-built
+ * Worker URL (for Vite: `@opengeni/sdk/editable-artifacts/worker?worker&url`).
+ * Kernels come from `@opengeni/artifact-kernel-wasm-{document,spreadsheet,presentation}`.
+ */
+export type EditableArtifactRuntimes = Readonly<{
+  document: Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory">;
+  spreadsheet: Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory">;
+  presentation: Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory">;
+  workerUrl: string;
+  applicationOrigin?: string | undefined;
+  /** Loopback development only. */
+  allowInsecureDevelopmentAssets?: boolean | undefined;
+}>;
+
+/** Everything needed to open one artifact for the current principal. */
+export type OpenedEditableArtifact = Readonly<{
+  artifact: EditableArtifactResource;
+  authority: EditableArtifactCacheAuthority;
+  replicaId: string;
+}>;
+
+export type EditableArtifactViewProps = Readonly<{
+  /** Absolute API (or session proxy) base the live transport talks to. */
+  baseUrl: URL;
+  workspaceId: string;
+  artifactId: string;
+  /** Resolve metadata, cache authority, and replica; called again on retry. */
+  open: (signal: AbortSignal) => Promise<OpenedEditableArtifact>;
+  runtimes: EditableArtifactRuntimes;
+  transport?: CreateBrowserEditableArtifactSessionOptions["transport"];
+  /** Show the editor's own title header (hosts with their own header hide it). */
+  showHeader?: boolean | undefined;
+  /** Re-open when this changes (for example the host's credential version). */
+  authorityKey?: string | undefined;
+  describeError?: ((error: unknown) => ArtifactLoadErrorView) | undefined;
+  onTitle?: ((title: string) => void) | undefined;
+  /** Loading copy; defaults to the `opening` label. */
+  loadingLabel?: string | undefined;
+}>;
+
+type LoadState =
+  | Readonly<{ key: string | null; kind: "loading" }>
+  | Readonly<{ key: string; kind: "ready"; value: OpenedEditableArtifact }>
+  | Readonly<{ key: string; kind: "error"; error: unknown }>;
+
+/**
+ * One editable document, spreadsheet, or presentation with its first-party
+ * editor. The console dock/page and embedding hosts supply only data access.
+ */
+export function EditableArtifactView({
+  baseUrl,
+  workspaceId,
+  artifactId,
+  open,
+  runtimes,
+  transport,
+  showHeader = true,
+  authorityKey,
+  describeError,
+  onTitle,
+  loadingLabel,
+}: EditableArtifactViewProps) {
+  const [loadEpoch, setLoadEpoch] = useState(0);
+  const labels = useArtifactLabels();
+  const loadKey = JSON.stringify([artifactId, authorityKey, baseUrl.href, workspaceId, loadEpoch]);
+  const [state, setState] = useState<LoadState>({ key: null, kind: "loading" });
+  const current = state.key === loadKey ? state : null;
+  const openRef = useRef(open);
+  openRef.current = open;
+  const onTitleRef = useRef(onTitle);
+  onTitleRef.current = onTitle;
+  useEffect(() => {
+    const abort = new AbortController();
+    setState({ key: loadKey, kind: "loading" });
+    void openRef
+      .current(abort.signal)
+      .then((value) => {
+        if (abort.signal.aborted) return;
+        setState({ key: loadKey, kind: "ready", value });
+        onTitleRef.current?.(value.artifact.title);
+      })
+      .catch((error: unknown) => {
+        if (!abort.signal.aborted) setState({ key: loadKey, kind: "error", error });
+      });
+    return () => abort.abort();
+  }, [loadKey]);
+
+  const ready = current?.kind === "ready" ? current.value : null;
+  const transportRef = useRef(transport);
+  transportRef.current = transport;
+  const sessionKey = useMemo(
+    () =>
+      ready
+        ? JSON.stringify({
+            baseUrl: baseUrl.href,
+            authorityKey,
+            workspaceId,
+            artifact: { id: ready.artifact.id, modality: ready.artifact.modality },
+            authority: ready.authority,
+            replicaId: ready.replicaId,
+            workerUrl: runtimes.workerUrl,
+          })
+        : "",
+    [authorityKey, baseUrl.href, ready, runtimes.workerUrl, workspaceId],
+  );
+  const createSession = useCallback(() => {
+    if (!ready) throw new Error("Artifact is not open");
+    return createBrowserEditableArtifactSession({
+      baseUrl,
+      workspaceId,
+      artifact: ready.artifact,
+      storageAuthority: ready.authority,
+      replicaId: ready.replicaId,
+      runtime: {
+        ...runtimeFor(runtimes, ready.artifact.modality),
+        workerUrl: runtimes.workerUrl,
+        ...(runtimes.applicationOrigin ? { applicationOrigin: runtimes.applicationOrigin } : {}),
+        ...(runtimes.allowInsecureDevelopmentAssets
+          ? { allowInsecureDevelopmentAssets: true }
+          : {}),
+      },
+      ...(transportRef.current ? { transport: transportRef.current } : {}),
+    });
+  }, [baseUrl, ready, runtimes, workspaceId]);
+
+  if (!current || current.kind === "loading")
+    return <ArtifactLoading label={loadingLabel ?? labels.opening} />;
+  if (current.kind === "error") {
+    return (
+      <ArtifactProblem
+        view={
+          describeError
+            ? describeError(current.error)
+            : artifactLoadErrorView(current.error, "editable", labels)
+        }
+        onRetry={() => setLoadEpoch((value) => value + 1)}
+      />
+    );
+  }
+  const { artifact } = current.value;
+  const surface = { title: artifact.title, showHeader };
+  return (
+    <div className="h-full min-h-0 bg-og-bg text-og-fg">
+      <EditableArtifactWorkbenchHost
+        sessionKey={sessionKey}
+        createSession={createSession}
+        document={surface}
+        spreadsheet={surface}
+        presentation={surface}
+      />
+    </div>
+  );
+}
+
+function runtimeFor(
+  runtimes: EditableArtifactRuntimes,
+  modality: EditableArtifactModality,
+): Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory"> {
+  switch (modality) {
+    case "document":
+      return runtimes.document;
+    case "spreadsheet":
+      return runtimes.spreadsheet;
+    case "presentation":
+      return runtimes.presentation;
+  }
+}

package/src/components/artifacts/editable-artifact-workbench.tsx

@@ -6,6 +6,7 @@ import {
 } from "@opengeni/sdk/editable-artifacts";
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import { useArtifactLabels } from "./artifact-chrome";
 import { EditableArtifactMessage } from "./editable-artifact-ui";
 import {
   EditableDocumentArtifactSurface,
@@ -133,6 +134,7 @@ export function EditableArtifactWorkbenchHost({
   }, [retryEpoch, sessionKey]);
 
   const retry = useCallback(() => setRetryEpoch((value) => value + 1), []);
+  const labels = useArtifactLabels();
   const currentError = state.key === sessionKey ? state.error : null;
   if (state.key === sessionKey && state.session) {
     return (
@@ -146,9 +148,10 @@ export function EditableArtifactWorkbenchHost({
   }
   return (
     <EditableArtifactMessage
-      title={currentError ? "Could not open this artifact" : "Opening artifact"}
-      detail={currentError?.message ?? "Starting the secure editing session…"}
+      title={currentError ? labels.editableErrors.transient.title : labels.opening}
+      detail={currentError?.message ?? labels.startingEditor}
       retry={currentError ? retry : undefined}
+      retryLabel={labels.retry}
     />
   );
 }

package/src/components/artifacts/editable-document.tsx

@@ -9,6 +9,7 @@ import {
   type EditableArtifactSession,
 } from "@opengeni/sdk/editable-artifacts";
 import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { useLatestTaskRunner } from "./latest-task-runner";
 
 import {
   DocumentProjectionArtifactSurface,
@@ -70,6 +71,7 @@ type DocumentCommandState = {
 export function EditableDocumentArtifactSurface({
   session,
   title,
+  showHeader,
   subtitle,
   readOnly = false,
   onCommit,
@@ -86,6 +88,7 @@ export function EditableDocumentArtifactSurface({
     error: null,
   });
   const loadGeneration = useRef(0);
+  const scheduleLoad = useLatestTaskRunner(session);
   const commandStateRef = useRef<DocumentCommandState | null>(null);
   if (commandStateRef.current?.session !== session) {
     commandStateRef.current = {
@@ -106,45 +109,41 @@ export function EditableDocumentArtifactSurface({
         ? { ...current, loading: true, error: null }
         : { session, projection: null, loading: true, error: null },
     );
-    void composeDocumentEditorProjection(session).then(
-      (projection) => {
-        if (
-          cancelled ||
-          generation !== loadGeneration.current ||
-          commandStateRef.current !== commandState
-        ) {
-          return;
-        }
-        const nextParagraphText = paragraphTextById(projection);
-        for (const [localId, canonicalId] of commandState.optimisticParagraphIds) {
-          if (nextParagraphText.has(canonicalId)) continue;
-          const optimisticText =
-            commandState.paragraphText.get(canonicalId) ?? commandState.paragraphText.get(localId);
-          if (optimisticText !== undefined) nextParagraphText.set(canonicalId, optimisticText);
-        }
-        commandState.paragraphText = nextParagraphText;
-        setState({ session, projection, loading: false, error: null });
-      },
-      (cause) => {
-        if (
-          cancelled ||
-          generation !== loadGeneration.current ||
-          commandStateRef.current !== commandState
-        ) {
-          return;
-        }
-        setState({
-          session,
-          projection: null,
-          loading: false,
-          error: asEditableArtifactError(cause, "Could not open this document"),
-        });
-      },
-    );
+    const superseded = () =>
+      cancelled ||
+      generation !== loadGeneration.current ||
+      commandStateRef.current !== commandState;
+    scheduleLoad(async () => {
+      if (superseded()) return;
+      await composeDocumentEditorProjection(session).then(
+        (projection) => {
+          if (superseded()) return;
+          const nextParagraphText = paragraphTextById(projection);
+          for (const [localId, canonicalId] of commandState.optimisticParagraphIds) {
+            if (nextParagraphText.has(canonicalId)) continue;
+            const optimisticText =
+              commandState.paragraphText.get(canonicalId) ??
+              commandState.paragraphText.get(localId);
+            if (optimisticText !== undefined) nextParagraphText.set(canonicalId, optimisticText);
+          }
+          commandState.paragraphText = nextParagraphText;
+          setState({ session, projection, loading: false, error: null });
+        },
+        (cause) => {
+          if (superseded()) return;
+          setState({
+            session,
+            projection: null,
+            loading: false,
+            error: asEditableArtifactError(cause, "Could not open this document"),
+          });
+        },
+      );
+    });
     return () => {
       cancelled = true;
     };
-  }, [commandState, invalidator, retryEpoch, session]);
+  }, [commandState, invalidator, retryEpoch, scheduleLoad, session]);
 
   const refresh = useCallback(() => setRetryEpoch((value) => value + 1), []);
   const writable = !readOnly && view.writable;
@@ -260,6 +259,7 @@ export function EditableDocumentArtifactSurface({
     <DocumentProjectionArtifactSurface
       {...surfaceProps}
       title={title}
+      showHeader={showHeader}
       subtitle={
         subtitle ??
         `${projection.blocks.length} block${projection.blocks.length === 1 ? "" : "s"}${writable ? "" : " · Read only"}`
@@ -274,6 +274,7 @@ export function EditableDocumentArtifactSurface({
     <ArtifactSurface
       modality="document"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle ?? status}
       busy={!accessRevoked && !state.error}
       className={surfaceProps.className}

package/src/components/artifacts/editable-presentation.tsx

@@ -33,6 +33,7 @@ import {
   type PresentationSlideProjection,
 } from "./presentation-editor";
 import { ArtifactSurface } from "./artifact-surface";
+import { useLatestTaskRunner } from "./latest-task-runner";
 import {
   asEditableArtifactError,
   editableArtifactAccessRevoked,
@@ -62,7 +63,7 @@ const DEFAULT_PRESENTATION_TEXT_STYLE: PresentationArtifactTextStyle = Object.fr
 
 export type EditablePresentationArtifactSurfaceProps = Omit<
   PresentationProjectionArtifactSurfaceProps,
-  "projection" | "commit" | "readOnly" | "busy" | "subtitle"
+  "projection" | "commit" | "readOnly" | "busy" | "subtitle" | "authoringBlockedReason"
 > & {
   session: EditableArtifactSession;
   subtitle?: ReactNode | undefined;
@@ -89,6 +90,7 @@ type PresentationProjectionState = {
 export function EditablePresentationArtifactSurface({
   session,
   title = "Presentation",
+  showHeader,
   subtitle,
   readOnly = false,
   onCommit,
@@ -104,31 +106,35 @@ export function EditablePresentationArtifactSurface({
     error: null,
   });
   const loadGeneration = useRef(0);
+  const scheduleLoad = useLatestTaskRunner(session);
   const sceneNodes = useRef(new Map<string, PresentationArtifactEditorSceneNode>());
 
   useEffect(() => {
     const generation = ++loadGeneration.current;
     let cancelled = false;
     setState((current) => ({ ...current, loading: true, error: null }));
-    void composePresentationEditorProjection(session).then(
-      (composed) => {
-        if (cancelled || generation !== loadGeneration.current) return;
-        sceneNodes.current = new Map(composed.sceneNodes);
-        setState({ composed, loading: false, error: null });
-      },
-      (cause) => {
-        if (cancelled || generation !== loadGeneration.current) return;
-        setState({
-          composed: null,
-          loading: false,
-          error: asEditableArtifactError(cause, "Could not open this presentation"),
-        });
-      },
-    );
+    scheduleLoad(async () => {
+      if (cancelled || generation !== loadGeneration.current) return;
+      await composePresentationEditorProjection(session).then(
+        (composed) => {
+          if (cancelled || generation !== loadGeneration.current) return;
+          sceneNodes.current = new Map(composed.sceneNodes);
+          setState({ composed, loading: false, error: null });
+        },
+        (cause) => {
+          if (cancelled || generation !== loadGeneration.current) return;
+          setState({
+            composed: null,
+            loading: false,
+            error: asEditableArtifactError(cause, "Could not open this presentation"),
+          });
+        },
+      );
+    });
     return () => {
       cancelled = true;
     };
-  }, [invalidator, retryEpoch, session]);
+  }, [invalidator, retryEpoch, scheduleLoad, session]);
 
   const refresh = useCallback(() => setRetryEpoch((value) => value + 1), []);
   const writable = !readOnly && view.writable;
@@ -137,6 +143,7 @@ export function EditablePresentationArtifactSurface({
       const composed = state.composed;
       if (!composed) throw new Error("Presentation projection is not ready");
       if (!writable) throw new Error("This presentation is read only");
+      if (view.authoringBlockedReason) throw new Error("An earlier change must settle first");
       if (
         commit.revision !== undefined &&
         String(commit.revision) !== String(composed.projection.revision)
@@ -256,7 +263,15 @@ export function EditablePresentationArtifactSurface({
       notifyPresentationCommit(onCommit, onCommandError, commit);
       refresh();
     },
-    [onCommandError, onCommit, refresh, session, state.composed, writable],
+    [
+      onCommandError,
+      onCommit,
+      refresh,
+      session,
+      state.composed,
+      view.authoringBlockedReason,
+      writable,
+    ],
   );
 
   const projection = state.composed?.projection ?? null;
@@ -266,6 +281,7 @@ export function EditablePresentationArtifactSurface({
     <PresentationProjectionArtifactSurface
       {...surfaceProps}
       title={title}
+      showHeader={showHeader}
       subtitle={
         subtitle ??
         `${projection.slides.length} slide${projection.slides.length === 1 ? "" : "s"}${writable ? "" : " · Read only"}`
@@ -273,6 +289,7 @@ export function EditablePresentationArtifactSurface({
       projection={projection}
       commit={writable ? applyCommit : undefined}
       readOnly={!writable}
+      authoringBlockedReason={view.authoringBlockedReason}
       busy={state.loading}
       onCommandError={onCommandError}
     />
@@ -280,6 +297,7 @@ export function EditablePresentationArtifactSurface({
     <ArtifactSurface
       modality="presentation"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle ?? status}
       actions={surfaceProps.actions}
       busy={!accessRevoked && !state.error}

package/src/components/artifacts/editable-spreadsheet.tsx

@@ -62,6 +62,7 @@ export type EditableSpreadsheetArtifactSurfaceProps = Omit<
   "metadataRevision" | "sheet"
 > & {
   title?: string | undefined;
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   actions?: ReactNode | undefined;
   initialSheetId?: string | undefined;
@@ -311,6 +312,7 @@ export function EditableSpreadsheetGrid({
 export function EditableSpreadsheetArtifactSurface({
   session,
   title = "Workbook",
+  showHeader,
   subtitle,
   actions,
   initialSheetId,
@@ -392,6 +394,7 @@ export function EditableSpreadsheetArtifactSurface({
     <ArtifactSurface
       modality="spreadsheet"
       title={title}
+      showHeader={showHeader}
       subtitle={
         subtitle ??
         (accessRevoked
@@ -429,7 +432,7 @@ export function EditableSpreadsheetArtifactSurface({
                 type="button"
                 onClick={() => void addSheet()}
                 disabled={creatingSheet}
-                className="mt-3 rounded-og-sm bg-og-accent-deep px-3 py-1.5 text-og-sm font-medium text-og-accent-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50"
+                className="mt-3 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-sm font-medium hover:bg-og-primary-hover outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50"
               >
                 {creatingSheet ? "Adding…" : "Add worksheet"}
               </button>
@@ -651,7 +654,7 @@ function spreadsheetCellInput(
   input: string,
   kind: SpreadsheetCommit["kind"],
 ): SpreadsheetCellInput {
-  if (kind === "formula") return { formula: input, cached: null };
+  if (kind === "formula") return { formula: input };
   if (input === "") return null;
   const normalized = input.trim();
   if (/^(?:true|false)$/i.test(normalized)) return normalized.toLowerCase() === "true";

package/src/components/artifacts/index.ts

@@ -1,3 +1,44 @@
+export {
+  ArtifactBadge,
+  ArtifactLabelsProvider,
+  DEFAULT_ARTIFACT_LABELS,
+  useArtifactLabels,
+  type ArtifactLabels,
+  ArtifactButton,
+  ArtifactLoading,
+  ArtifactProblem,
+  ArtifactSelect,
+  ArtifactViewerHeader,
+  artifactKindIcon,
+  artifactKindSubtitle,
+  artifactLoadErrorMessage,
+  artifactLoadErrorView,
+  type ArtifactKind,
+  type ArtifactLoadErrorKind,
+  type ArtifactLoadErrorView,
+} from "./artifact-chrome";
+export { ArtifactSandbox, type ArtifactSandboxProps } from "./artifact-sandbox";
+export { DeferredChatMedia } from "./deferred-chat-media";
+export {
+  ChatInteractiveBlock,
+  type ChatInteractiveBlockProps,
+  type SiteSnapshotClient,
+  type SiteToolBridgeFactory,
+  type SiteToolScope,
+} from "./chat-interactive-block";
+export { SiteView, type SiteViewProps } from "./site-view";
+export {
+  EditableArtifactView,
+  type EditableArtifactRuntimes,
+  type EditableArtifactViewProps,
+  type OpenedEditableArtifact,
+} from "./editable-artifact-view";
+export {
+  SessionArtifactViewer,
+  type SessionArtifactTarget,
+  type SessionArtifactViewerLabels,
+  type SessionArtifactViewerProps,
+} from "./session-artifact-viewer";
 export {
   ArtifactSurface,
   type ArtifactModality,
@@ -6,7 +47,10 @@ export {
 export {
   PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX,
   PublishedHtmlArtifactFrame,
+  openGeniSiteBridgePortFromBootstrap,
+  publishedHtmlArtifactDocument,
   type PublishedHtmlArtifactFrameProps,
+  type PublishedHtmlArtifactToolBridge,
 } from "./published-html-artifact-frame";
 export {
   SpreadsheetArtifactSurface,

package/src/components/artifacts/inline-html-document.ts

@@ -0,0 +1,24 @@
+import { VISUALIZATION_CSS, VISUALIZATION_HELPERS } from "./visualization-assets.gen";
+
+/** Conversation styling/helpers only. Rendering and tool transport remain in the Site frame. */
+export function inlineHtmlDocument(fragment: string): string {
+  return (
+    '<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>' +
+    VISUALIZATION_CSS +
+    "</style><style>html,body{margin:0;min-height:0}body{padding:16px;box-sizing:border-box}</style></head><body>" +
+    fragment +
+    VISUALIZATION_HELPERS +
+    `<script>
+(()=>{
+  window.addEventListener('message',event=>{
+    if(event.source!==parent||event.data?.type!=='opengeni.preview.theme')return;
+    if(event.data.theme==='light'||event.data.theme==='dark')document.documentElement.style.colorScheme=event.data.theme;
+    previous=0;resize();
+  });
+  let previous=0;
+  const resize=()=>{const height=Math.ceil(document.body.getBoundingClientRect().height);if(height!==previous){previous=height;parent.postMessage({type:'opengeni.preview.height',height},'*')}};
+  new ResizeObserver(resize).observe(document.body);resize();
+})();
+</script></body></html>`
+  );
+}

package/src/components/artifacts/latest-task-runner.ts

@@ -0,0 +1,49 @@
+import { useRef } from "react";
+
+/**
+ * Runs one task at a time; a task scheduled while another runs replaces any
+ * task still waiting, so only the newest request starts next. Editors use it
+ * for projection loads: replaying a long history emits one revision per
+ * committed transaction, and composing a projection for each of them at once
+ * would overrun the artifact Worker's bounded request queue.
+ */
+export function createLatestTaskRunner(): (task: () => Promise<void>) => void {
+  let running = false;
+  let waiting: (() => Promise<void>) | null = null;
+  const drain = async () => {
+    running = true;
+    try {
+      while (waiting) {
+        const task = waiting;
+        waiting = null;
+        try {
+          await task();
+        } catch {
+          // Tasks settle their own errors; one failure must not stall the next.
+        }
+      }
+    } finally {
+      running = false;
+    }
+  };
+  return (task) => {
+    waiting = task;
+    if (!running) void drain();
+  };
+}
+
+/**
+ * One runner per artifact session. A composition still pending on a replaced
+ * session (for example one whose Worker stopped answering) must never hold up
+ * the next session's first load, so the runner is scoped to the session object
+ * rather than to the component.
+ */
+export function useLatestTaskRunner(session: object): (task: () => Promise<void>) => void {
+  const runner = useRef<{ session: object; schedule: (task: () => Promise<void>) => void } | null>(
+    null,
+  );
+  if (runner.current?.session !== session) {
+    runner.current = { session, schedule: createLatestTaskRunner() };
+  }
+  return runner.current.schedule;
+}