@opengeni/react 0.57.0 → 1.0.2-canary.37191796234001

package/dist/artifacts.js

@@ -1,62 +1,162 @@
 import {
-  EditablePresentationArtifactSurface,
-  PresentationArtifactSurface,
-  PresentationEditor,
-  PresentationProjectionArtifactSurface,
-  PresentationProjectionEditor
-} from "./chunk-PEI6RANI.js";
+  ArtifactSandbox,
+  ChatInteractiveBlock,
+  DeferredChatMedia,
+  inlineHtmlDocument
+} from "./chunk-YBXQDQFX.js";
 import {
   EditableSpreadsheetArtifactSurface,
   EditableSpreadsheetGrid,
   SpreadsheetArtifactSurface,
   SpreadsheetGrid,
   SpreadsheetProjectionGrid
-} from "./chunk-7WCLAEFV.js";
+} from "./chunk-A4UJB2MM.js";
 import {
   DocumentArtifactSurface,
   DocumentEditor,
   DocumentProjectionArtifactSurface,
   DocumentProjectionEditor,
   EditableDocumentArtifactSurface
-} from "./chunk-HUIKIDM5.js";
+} from "./chunk-WUISZ3WU.js";
+import {
+  isRetainedImageContentType,
+  useRetainedImageObjectUrl
+} from "./chunk-FZCP527Y.js";
+import {
+  ArtifactBadge,
+  ArtifactButton,
+  ArtifactLabelsProvider,
+  ArtifactLoading,
+  ArtifactProblem,
+  ArtifactSelect,
+  ArtifactViewerHeader,
+  DEFAULT_ARTIFACT_LABELS,
+  artifactKindIcon,
+  artifactKindSubtitle,
+  artifactLoadErrorMessage,
+  artifactLoadErrorView,
+  useArtifactLabels
+} from "./chunk-5CVXZA3Y.js";
+import "./chunk-ERGYJIBB.js";
+import "./chunk-XCHWDJ22.js";
+import {
+  PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX,
+  PublishedHtmlArtifactFrame,
+  loadSiteSnapshot,
+  openGeniSiteBridgePortFromBootstrap,
+  publishedHtmlArtifactDocument
+} from "./chunk-SCOTPE2I.js";
+import {
+  useOpenGeni
+} from "./chunk-NEXLLTP4.js";
+import {
+  EditablePresentationArtifactSurface,
+  PresentationArtifactSurface,
+  PresentationEditor,
+  PresentationProjectionArtifactSurface,
+  PresentationProjectionEditor
+} from "./chunk-PNY3JKBJ.js";
+import "./chunk-WEHMPOXK.js";
 import {
   ArtifactSurface,
   EditableArtifactMessage
-} from "./chunk-KCGXPP5V.js";
-import "./chunk-22KP6LR5.js";
+} from "./chunk-Y2PRMYLC.js";
+import {
+  cn
+} from "./chunk-22KP6LR5.js";
 
-// src/components/artifacts/published-html-artifact-frame.tsx
+// src/components/artifacts/site-view.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-var PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX = [
-  "allow-downloads",
-  "allow-forms",
-  "allow-modals",
-  "allow-orientation-lock",
-  "allow-pointer-lock",
-  "allow-popups",
-  "allow-popups-to-escape-sandbox",
-  "allow-presentation",
-  "allow-scripts"
-].join(" ");
-function PublishedHtmlArtifactFrame(props) {
+function SiteView({
+  client,
+  workspaceId,
+  siteId,
+  toolBridge,
+  theme,
+  archivedMessage,
+  showTitle = true,
+  loadingLabel,
+  onTitle,
+  className
+}) {
+  const labels = useArtifactLabels();
+  const [snapshot, setSnapshot] = useState(null);
+  const [error, setError] = useState(null);
+  const readAbort = useRef(null);
+  const onTitleRef = useRef(onTitle);
+  onTitleRef.current = onTitle;
+  const load = useCallback(async () => {
+    readAbort.current?.abort();
+    const abort = new AbortController();
+    readAbort.current = abort;
+    try {
+      setError(null);
+      const next = await loadSiteSnapshot(client, workspaceId, siteId, {
+        signal: abort.signal,
+        includeArchivedContent: true
+      });
+      if (abort.signal.aborted) return;
+      setSnapshot(next);
+      onTitleRef.current?.(next.detail.artifact.title);
+    } catch (nextError) {
+      if (abort.signal.aborted) return;
+      setSnapshot(null);
+      setError(nextError);
+    }
+  }, [client, siteId, workspaceId]);
+  useEffect(() => {
+    setSnapshot(null);
+    void load();
+    return () => readAbort.current?.abort();
+  }, [load]);
+  const content = snapshot?.content;
+  const bridge = useMemo(
+    () => content ? toolBridge?.({
+      artifactId: siteId,
+      siteVersionId: content.versionId,
+      requestedTools: content.requestedTools
+    }) : void 0,
+    [content, siteId, toolBridge]
+  );
+  if (error)
+    return /* @__PURE__ */ jsx(
+      ArtifactProblem,
+      {
+        view: artifactLoadErrorView(error, "site", labels),
+        onRetry: () => void load()
+      }
+    );
+  if (!snapshot || !content) return /* @__PURE__ */ jsx(ArtifactLoading, { label: loadingLabel ?? labels.loadingSite });
+  if (snapshot.detail.artifact.status === "archived")
+    return /* @__PURE__ */ jsx("div", { className: "p-4 text-sm text-fg-muted", children: archivedMessage ?? labels.siteArchived });
   return /* @__PURE__ */ jsx(
-    "iframe",
+    ArtifactSandbox,
     {
-      title: props.title,
-      sandbox: PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX,
-      referrerPolicy: "no-referrer",
-      srcDoc: props.html,
-      className: props.className,
-      style: props.style
+      html: content.html,
+      title: snapshot.detail.artifact.title,
+      showTitle,
+      versionLabel: `v${snapshot.detail.artifact.currentVersion?.revision}`,
+      toolBridge: bridge,
+      connectedToolCount: content.requestedTools.length,
+      theme,
+      fill: true,
+      className: className ?? "h-full rounded-none border-0"
     }
   );
 }
 
+// src/components/artifacts/editable-artifact-view.tsx
+import {
+  createBrowserEditableArtifactSession as createBrowserEditableArtifactSession2
+} from "@opengeni/sdk/editable-artifacts";
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+
 // src/components/artifacts/editable-artifact-workbench.tsx
 import {
   createBrowserEditableArtifactSession
 } from "@opengeni/sdk/editable-artifacts";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function EditableArtifactWorkbench({
   session,
@@ -87,13 +187,13 @@ function EditableArtifactWorkbenchHost({
   spreadsheet,
   presentation
 }) {
-  const createSessionRef = useRef(createSession);
-  const [retryEpoch, setRetryEpoch] = useState(0);
-  const [state, setState] = useState({ key: null, session: null, error: null });
-  useEffect(() => {
+  const createSessionRef = useRef2(createSession);
+  const [retryEpoch, setRetryEpoch] = useState2(0);
+  const [state, setState] = useState2({ key: null, session: null, error: null });
+  useEffect2(() => {
     createSessionRef.current = createSession;
   }, [createSession]);
-  useEffect(() => {
+  useEffect2(() => {
     let owned = null;
     setState({ key: sessionKey, session: null, error: null });
     try {
@@ -112,7 +212,8 @@ function EditableArtifactWorkbenchHost({
       if (closing) void closing.close().catch(() => void 0);
     };
   }, [retryEpoch, sessionKey]);
-  const retry = useCallback(() => setRetryEpoch((value) => value + 1), []);
+  const retry = useCallback2(() => setRetryEpoch((value) => value + 1), []);
+  const labels = useArtifactLabels();
   const currentError = state.key === sessionKey ? state.error : null;
   if (state.key === sessionKey && state.session) {
     return /* @__PURE__ */ jsx2(
@@ -128,9 +229,10 @@ function EditableArtifactWorkbenchHost({
   return /* @__PURE__ */ jsx2(
     EditableArtifactMessage,
     {
-      title: currentError ? "Could not open this artifact" : "Opening artifact",
-      detail: currentError?.message ?? "Starting the secure editing session\u2026",
-      retry: currentError ? retry : void 0
+      title: currentError ? labels.editableErrors.transient.title : labels.opening,
+      detail: currentError?.message ?? labels.startingEditor,
+      retry: currentError ? retry : void 0,
+      retryLabel: labels.retry
     }
   );
 }
@@ -141,7 +243,7 @@ function BrowserEditableArtifactWorkbench({
   presentation
 }) {
   const sessionKey = browserSessionKey(options);
-  const createSession = useCallback(() => createBrowserEditableArtifactSession(options), [options]);
+  const createSession = useCallback2(() => createBrowserEditableArtifactSession(options), [options]);
   return /* @__PURE__ */ jsx2(
     EditableArtifactWorkbenchHost,
     {
@@ -173,13 +275,375 @@ function browserSessionKey(options) {
     (_key, value) => value instanceof URL ? value.href : value
   );
 }
+
+// src/components/artifacts/editable-artifact-view.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function EditableArtifactView({
+  baseUrl,
+  workspaceId,
+  artifactId,
+  open,
+  runtimes,
+  transport,
+  showHeader = true,
+  authorityKey,
+  describeError,
+  onTitle,
+  loadingLabel
+}) {
+  const [loadEpoch, setLoadEpoch] = useState3(0);
+  const labels = useArtifactLabels();
+  const loadKey = JSON.stringify([artifactId, authorityKey, baseUrl.href, workspaceId, loadEpoch]);
+  const [state, setState] = useState3({ key: null, kind: "loading" });
+  const current = state.key === loadKey ? state : null;
+  const openRef = useRef3(open);
+  openRef.current = open;
+  const onTitleRef = useRef3(onTitle);
+  onTitleRef.current = onTitle;
+  useEffect3(() => {
+    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) => {
+      if (!abort.signal.aborted) setState({ key: loadKey, kind: "error", error });
+    });
+    return () => abort.abort();
+  }, [loadKey]);
+  const ready = current?.kind === "ready" ? current.value : null;
+  const transportRef = useRef3(transport);
+  transportRef.current = transport;
+  const sessionKey = useMemo2(
+    () => 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 = useCallback3(() => {
+    if (!ready) throw new Error("Artifact is not open");
+    return createBrowserEditableArtifactSession2({
+      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 /* @__PURE__ */ jsx3(ArtifactLoading, { label: loadingLabel ?? labels.opening });
+  if (current.kind === "error") {
+    return /* @__PURE__ */ jsx3(
+      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 /* @__PURE__ */ jsx3("div", { className: "h-full min-h-0 bg-og-bg text-og-fg", children: /* @__PURE__ */ jsx3(
+    EditableArtifactWorkbenchHost,
+    {
+      sessionKey,
+      createSession,
+      document: surface,
+      spreadsheet: surface,
+      presentation: surface
+    }
+  ) });
+}
+function runtimeFor(runtimes, modality) {
+  switch (modality) {
+    case "document":
+      return runtimes.document;
+    case "spreadsheet":
+      return runtimes.spreadsheet;
+    case "presentation":
+      return runtimes.presentation;
+  }
+}
+
+// src/components/artifacts/session-artifact-viewer.tsx
+import { SESSION_SCOPE_HEADER } from "@opengeni/sdk";
+import { createEditableArtifactReplicaId } from "@opengeni/sdk/editable-artifacts";
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var viewerClientKeys = /* @__PURE__ */ new WeakMap();
+function viewerClientKey(client) {
+  let key = viewerClientKeys.get(client);
+  if (!key) {
+    key = crypto.randomUUID();
+    viewerClientKeys.set(client, key);
+  }
+  return key;
+}
+function SessionArtifactViewer({ labels, ...props }) {
+  return /* @__PURE__ */ jsx4(ArtifactLabelsProvider, { labels, children: /* @__PURE__ */ jsx4(Viewer, { ...props }) });
+}
+function Viewer({
+  client: clientOverride,
+  workspaceId: workspaceOverride,
+  sessionId,
+  target,
+  onClose,
+  onBack,
+  editableRuntimes,
+  theme,
+  siteToolBridge,
+  className
+}) {
+  const labels = useArtifactLabels();
+  const context = useOpenGeni({ client: clientOverride, workspaceId: workspaceOverride });
+  const base = context.client;
+  const workspaceId = context.workspaceId;
+  const client = useMemo3(
+    () => base.withHeaders({ [SESSION_SCOPE_HEADER]: sessionId }),
+    [base, sessionId]
+  );
+  const [loaded, setLoaded] = useState4(null);
+  const targetKey = `${target.kind}:${target.artifactId}`;
+  const current = loaded?.key === targetKey && loaded.client === client && loaded.workspaceId === workspaceId ? loaded : null;
+  const kind = target.kind === "site" ? "site" : current?.kind ?? null;
+  const [unavailable, setUnavailable] = useState4(null);
+  const markUnavailable = useCallback4(
+    () => setUnavailable({ key: targetKey, client, workspaceId }),
+    [client, targetKey, workspaceId]
+  );
+  const title = current?.title ?? target.title ?? (unavailable?.key === targetKey && unavailable.client === client && unavailable.workspaceId === workspaceId ? labels.artifact : labels.opening);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title,
+      "data-og-artifact-viewer": target.kind,
+      className: cn("og-root flex h-full min-h-0 w-full min-w-0 flex-col bg-bg text-fg", className),
+      children: [
+        /* @__PURE__ */ jsx4(
+          ArtifactViewerHeader,
+          {
+            kind,
+            title,
+            onBack,
+            backLabel: labels.back,
+            onClose,
+            closeLabel: labels.close
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: target.kind === "site" ? /* @__PURE__ */ jsx4(
+          SiteView,
+          {
+            client,
+            workspaceId,
+            siteId: target.artifactId,
+            theme,
+            toolBridge: siteToolBridge,
+            showTitle: false,
+            onTitle: (next) => setLoaded({ key: targetKey, client, workspaceId, title: next, kind: "site" })
+          },
+          targetKey
+        ) : /* @__PURE__ */ jsx4(
+          EditableBody,
+          {
+            client,
+            workspaceId,
+            sessionId,
+            artifactId: target.artifactId,
+            runtimes: editableRuntimes,
+            onOpened: (next, modality) => setLoaded({ key: targetKey, client, workspaceId, title: next, kind: modality }),
+            onUnavailable: markUnavailable
+          },
+          targetKey
+        ) })
+      ]
+    }
+  );
+}
+function EditableBody({
+  client,
+  workspaceId,
+  sessionId,
+  artifactId,
+  runtimes,
+  onOpened,
+  onUnavailable
+}) {
+  const labels = useArtifactLabels();
+  const clientKey = viewerClientKey(client);
+  const [retryEpoch, setRetryEpoch] = useState4(0);
+  const [configState, setConfigState] = useState4(null);
+  const current = configState?.client === client && configState.workspaceId === workspaceId && configState.sessionId === sessionId ? configState.result : null;
+  const config = current?.kind === "ready" ? current.config : null;
+  const scopeRef = useRef4({ client, workspaceId, sessionId });
+  scopeRef.current = { client, workspaceId, sessionId };
+  useEffect4(() => {
+    let live = true;
+    setConfigState(null);
+    client.getClientConfig().then(
+      (value) => live && setConfigState({
+        client,
+        workspaceId,
+        sessionId,
+        result: value.artifacts ? { kind: "ready", config: value.artifacts } : { kind: "unavailable" }
+      }),
+      (error) => live && setConfigState({ client, workspaceId, sessionId, result: { kind: "error", error } })
+    );
+    return () => {
+      live = false;
+    };
+  }, [client, retryEpoch, sessionId, workspaceId]);
+  const baseUrl = useMemo3(
+    () => new URL(client.apiUrl("/"), globalThis.location?.href ?? "http://localhost/"),
+    [client]
+  );
+  const transport = useMemo3(() => {
+    if (!config) return void 0;
+    const socket = new URL(config.editableLiveUrl);
+    let scope = new AbortController();
+    const checkCurrent = (signal) => {
+      signal.throwIfAborted();
+      if (scopeRef.current.client !== client || scopeRef.current.workspaceId !== workspaceId || scopeRef.current.sessionId !== sessionId) {
+        throw new DOMException("Artifact viewer scope changed", "AbortError");
+      }
+    };
+    return {
+      activate: () => {
+        if (scope.signal.aborted) scope = new AbortController();
+      },
+      abort: () => scope.abort(),
+      fetch: async (input, init) => {
+        const signal = AbortSignal.any([scope.signal, ...init?.signal ? [init.signal] : []]);
+        checkCurrent(signal);
+        const url = new URL(input instanceof Request ? input.url : input, baseUrl);
+        if (init?.method === "POST" && url.pathname === new URL(
+          `v1/workspaces/${encodeURIComponent(workspaceId)}/editable-artifacts/${encodeURIComponent(artifactId)}/live-ticket`,
+          baseUrl
+        ).pathname) {
+          const next = (await client.getClientConfig({ signal })).artifacts;
+          checkCurrent(signal);
+          if (!next || artifactCapabilityKey(next) !== artifactCapabilityKey(config)) {
+            setConfigState({
+              client,
+              workspaceId,
+              sessionId,
+              result: next ? { kind: "ready", config: next } : { kind: "unavailable" }
+            });
+            scope.abort();
+            signal.throwIfAborted();
+          }
+          const { replicaId } = await new Request(input, init).json();
+          if (typeof replicaId !== "string") throw new TypeError("Artifact replica is required");
+          await client.getEditableArtifact(workspaceId, artifactId, { replicaId, signal });
+          checkCurrent(signal);
+        }
+        return client.fetchApi(url, { ...init, signal });
+      },
+      webSocketUrl: socket,
+      ...isLoopback(baseUrl) && isLoopback(socket) ? { allowInsecureDevelopmentTransport: true } : {}
+    };
+  }, [artifactId, baseUrl, client, config, sessionId, workspaceId]);
+  useEffect4(() => {
+    transport?.activate();
+    return () => transport?.abort();
+  }, [transport]);
+  const blocked = current !== null && (current.kind !== "ready" || !runtimes);
+  useEffect4(() => {
+    if (blocked) onUnavailable();
+  }, [blocked, onUnavailable]);
+  if (!current) return /* @__PURE__ */ jsx4(ArtifactLoading, { label: labels.opening });
+  if (current.kind === "error") {
+    return /* @__PURE__ */ jsx4(
+      ArtifactProblem,
+      {
+        view: artifactLoadErrorView(current.error, "editable", labels),
+        onRetry: () => setRetryEpoch((value) => value + 1)
+      }
+    );
+  }
+  if (!config || !transport) {
+    return /* @__PURE__ */ jsx4(ArtifactProblem, { view: { ...labels.viewingDisabled, retryable: false } });
+  }
+  if (!runtimes) {
+    return /* @__PURE__ */ jsx4(ArtifactProblem, { view: { ...labels.editorsMissing, retryable: false } });
+  }
+  return /* @__PURE__ */ jsx4(
+    EditableArtifactView,
+    {
+      baseUrl,
+      workspaceId,
+      artifactId,
+      authorityKey: JSON.stringify([clientKey, sessionId, artifactCapabilityKey(config)]),
+      runtimes: {
+        ...runtimes,
+        ...isLoopback(baseUrl) ? { allowInsecureDevelopmentAssets: true } : {}
+      },
+      transport,
+      showHeader: false,
+      open: async (signal) => {
+        const replicaId = createEditableArtifactReplicaId();
+        const artifact = await client.getEditableArtifact(workspaceId, artifactId, {
+          replicaId,
+          signal
+        });
+        signal.throwIfAborted();
+        onOpened(artifact.title, artifact.modality);
+        return {
+          artifact,
+          replicaId,
+          authority: {
+            deploymentOrigin: baseUrl.origin,
+            workspaceId,
+            ...config.cachePartition
+          }
+        };
+      }
+    }
+  );
+}
+function artifactCapabilityKey(config) {
+  return JSON.stringify([
+    config.editableLiveUrl,
+    config.cachePartition.accountId,
+    config.cachePartition.principalId,
+    config.cachePartition.authorizationEpoch
+  ]);
+}
+function isLoopback(url) {
+  return (url.protocol === "http:" || url.protocol === "ws:") && (url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "[::1]");
+}
 export {
+  ArtifactBadge,
+  ArtifactButton,
+  ArtifactLabelsProvider,
+  ArtifactLoading,
+  ArtifactProblem,
+  ArtifactSandbox,
+  ArtifactSelect,
   ArtifactSurface,
+  ArtifactViewerHeader,
   BrowserEditableArtifactWorkbench,
+  ChatInteractiveBlock,
+  DEFAULT_ARTIFACT_LABELS,
+  DeferredChatMedia,
   DocumentArtifactSurface,
   DocumentEditor,
   DocumentProjectionArtifactSurface,
   DocumentProjectionEditor,
+  EditableArtifactView,
   EditableArtifactWorkbench,
   EditableArtifactWorkbenchHost,
   EditableDocumentArtifactSurface,
@@ -192,8 +656,20 @@ export {
   PresentationProjectionArtifactSurface,
   PresentationProjectionEditor,
   PublishedHtmlArtifactFrame,
+  SessionArtifactViewer,
+  SiteView,
   SpreadsheetArtifactSurface,
   SpreadsheetGrid,
-  SpreadsheetProjectionGrid
+  SpreadsheetProjectionGrid,
+  artifactKindIcon,
+  artifactKindSubtitle,
+  artifactLoadErrorMessage,
+  artifactLoadErrorView,
+  inlineHtmlDocument,
+  isRetainedImageContentType,
+  openGeniSiteBridgePortFromBootstrap,
+  publishedHtmlArtifactDocument,
+  useArtifactLabels,
+  useRetainedImageObjectUrl
 };
 //# sourceMappingURL=artifacts.js.map