@opengeni/react 0.46.1 → 0.52.1

package/dist/timeline-annotations-dialog-U7EVLR75.js

@@ -0,0 +1,196 @@
+// src/components/timeline-annotations-dialog.tsx
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function cssEscapeAttribute(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(value);
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function revealLoadedSource(source) {
+  if (typeof document === "undefined") return false;
+  const element = document.querySelector(
+    `[data-og-annotation-source-key="${cssEscapeAttribute(source.eventId)}"]`
+  );
+  if (!(element instanceof HTMLElement)) return false;
+  element.scrollIntoView({ block: "center", behavior: "smooth" });
+  element.animate?.(
+    [
+      { outline: "2px solid color-mix(in srgb, currentColor 55%, transparent)" },
+      { outline: "2px solid transparent" }
+    ],
+    { duration: 1600, easing: "ease-out" }
+  );
+  return true;
+}
+function sourceLabel(annotation) {
+  if (annotation.source.label) return annotation.source.label;
+  switch (annotation.source.kind) {
+    case "user_message":
+      return "User message";
+    case "assistant_message":
+      return "Assistant message";
+    case "tool_output":
+      return "Tool output";
+  }
+}
+function TimelineAnnotationsDialog({
+  annotations,
+  editable,
+  focusAnnotationId,
+  onFocusConsumed,
+  onUpdate,
+  onRemove,
+  onRevealSource,
+  triggerRef,
+  countLabel,
+  onDismiss
+}) {
+  const [unavailableId, setUnavailableId] = useState(null);
+  const [position, setPosition] = useState({ left: 12, top: 12, above: false });
+  const panelRef = useRef(null);
+  const noteRefs = useRef(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    if (!focusAnnotationId) return;
+    const note = noteRefs.current.get(focusAnnotationId);
+    note?.focus();
+    if (note && document.activeElement === note) onFocusConsumed?.();
+  }, [focusAnnotationId, onFocusConsumed]);
+  useEffect(() => {
+    const updatePosition = () => {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const panelWidth = Math.min(400, window.innerWidth - 24);
+      const left = Math.min(
+        Math.max(12, rect.left),
+        Math.max(12, window.innerWidth - panelWidth - 12)
+      );
+      const above = rect.top > Math.min(360, window.innerHeight * 0.55);
+      setPosition({ left, top: above ? rect.top - 8 : rect.bottom + 8, above });
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onDismiss(true);
+    };
+    const onPointerDown = (event) => {
+      if (!(event.target instanceof Node)) return;
+      if (panelRef.current?.contains(event.target) || triggerRef.current?.contains(event.target)) {
+        return;
+      }
+      onDismiss(false);
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    if (!focusAnnotationId) {
+      window.setTimeout(() => {
+        if (document.activeElement === triggerRef.current) panelRef.current?.focus();
+      }, 0);
+    }
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [focusAnnotationId, onDismiss, triggerRef]);
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        tabIndex: -1,
+        style: {
+          left: position.left,
+          top: position.top,
+          transform: position.above ? "translateY(-100%)" : void 0
+        },
+        className: "og-root fixed z-[75] box-border max-h-[min(32rem,70vh)] w-[min(25rem,calc(100vw-1.5rem))] overflow-y-auto rounded-og-lg border border-og-border bg-og-surface-1 p-3 text-og-fg shadow-xl outline-hidden",
+        "aria-label": editable ? "Review timeline annotations" : "Timeline annotations",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-og-sm font-semibold", children: countLabel }),
+              /* @__PURE__ */ jsx("p", { className: "text-og-xs text-og-fg-subtle", children: editable ? "Add a note for each quoted source." : "Sent with this message." })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded-md border-0 bg-transparent px-2 py-1 text-og-xs text-og-fg outline-hidden hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]",
+                onClick: () => onDismiss(true),
+                children: "Close"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid gap-2.5", children: annotations.map((annotation, index) => /* @__PURE__ */ jsxs(
+            "section",
+            {
+              className: "rounded-og-md border border-og-border bg-og-surface-2/60 p-2.5",
+              "aria-label": `Annotation ${index + 1}`,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "truncate rounded border-0 bg-transparent text-left text-og-xs font-medium text-og-fg-muted underline-offset-2 outline-hidden hover:text-og-fg hover:underline focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]",
+                      onClick: () => {
+                        const revealed = onRevealSource?.(annotation.source) ?? revealLoadedSource(annotation.source);
+                        setUnavailableId(revealed ? null : annotation.id);
+                      },
+                      children: [
+                        sourceLabel(annotation),
+                        " \xB7 view source"
+                      ]
+                    }
+                  ),
+                  editable && onRemove ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "shrink-0 rounded border-0 bg-transparent p-1 text-og-fg-subtle outline-hidden hover:bg-og-surface-1 hover:text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-[44px]",
+                      "aria-label": `Remove annotation ${index + 1}`,
+                      onClick: () => onRemove(annotation.id),
+                      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-og-md leading-none", children: "\xD7" })
+                    }
+                  ) : null
+                ] }),
+                unavailableId === annotation.id ? /* @__PURE__ */ jsx("p", { role: "status", className: "mt-1 text-og-xs text-og-status-waiting", children: "Source is outside the loaded timeline window." }) : null,
+                /* @__PURE__ */ jsx("blockquote", { className: "mt-2 max-h-28 overflow-auto whitespace-pre-wrap border-l-2 border-og-border pl-2 text-og-sm leading-5 text-og-fg-muted", children: annotation.quote }),
+                editable && onUpdate ? /* @__PURE__ */ jsxs("label", { className: "mt-2 block text-og-xs font-medium text-og-fg-muted", children: [
+                  "Note",
+                  /* @__PURE__ */ jsx(
+                    "textarea",
+                    {
+                      ref: (node) => {
+                        if (node) noteRefs.current.set(annotation.id, node);
+                        else noteRefs.current.delete(annotation.id);
+                      },
+                      value: annotation.note,
+                      rows: 2,
+                      maxLength: 2048,
+                      placeholder: "What should the agent do with this?",
+                      className: "mt-1 w-full resize-y rounded-og-sm border border-og-border bg-og-surface-1 px-2.5 py-2 text-og-sm leading-5 text-og-fg outline-hidden placeholder:text-og-fg-subtle focus:border-og-accent focus:ring-1 focus:ring-og-accent",
+                      onInput: (event) => onUpdate(annotation.id, event.currentTarget.value)
+                    }
+                  )
+                ] }) : annotation.note ? /* @__PURE__ */ jsx("p", { className: "mt-2 whitespace-pre-wrap text-og-sm leading-5 text-og-fg", children: annotation.note }) : null
+              ]
+            },
+            annotation.id
+          )) })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var timeline_annotations_dialog_default = TimelineAnnotationsDialog;
+export {
+  TimelineAnnotationsDialog,
+  timeline_annotations_dialog_default as default
+};
+//# sourceMappingURL=timeline-annotations-dialog-U7EVLR75.js.map

package/dist/timeline-annotations-dialog-U7EVLR75.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/timeline-annotations-dialog.tsx"],"sourcesContent":["import type { TimelineAnnotationSource } from \"@opengeni/sdk\";\nimport { useEffect, useLayoutEffect, useRef, useState, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { TimelineAnnotationLike } from \"./timeline-annotations\";\n\nfunction cssEscapeAttribute(value: string): string {\n  if (typeof CSS !== \"undefined\" && typeof CSS.escape === \"function\") return CSS.escape(value);\n  return value.replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, '\\\\\"');\n}\n\nfunction revealLoadedSource(source: TimelineAnnotationSource): boolean {\n  if (typeof document === \"undefined\") return false;\n  const element = document.querySelector(\n    `[data-og-annotation-source-key=\"${cssEscapeAttribute(source.eventId)}\"]`,\n  );\n  if (!(element instanceof HTMLElement)) return false;\n  element.scrollIntoView({ block: \"center\", behavior: \"smooth\" });\n  element.animate?.(\n    [\n      { outline: \"2px solid color-mix(in srgb, currentColor 55%, transparent)\" },\n      { outline: \"2px solid transparent\" },\n    ],\n    { duration: 1600, easing: \"ease-out\" },\n  );\n  return true;\n}\n\nfunction sourceLabel(annotation: TimelineAnnotationLike): string {\n  if (annotation.source.label) return annotation.source.label;\n  switch (annotation.source.kind) {\n    case \"user_message\":\n      return \"User message\";\n    case \"assistant_message\":\n      return \"Assistant message\";\n    case \"tool_output\":\n      return \"Tool output\";\n  }\n}\n\nexport function TimelineAnnotationsDialog({\n  annotations,\n  editable,\n  focusAnnotationId,\n  onFocusConsumed,\n  onUpdate,\n  onRemove,\n  onRevealSource,\n  triggerRef,\n  countLabel,\n  onDismiss,\n}: {\n  annotations: readonly TimelineAnnotationLike[];\n  editable: boolean;\n  focusAnnotationId?: string | null | undefined;\n  onFocusConsumed?: (() => void) | undefined;\n  onUpdate?: ((id: string, note: string) => void) | undefined;\n  onRemove?: ((id: string) => void) | undefined;\n  onRevealSource?: ((source: TimelineAnnotationSource) => boolean) | undefined;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  countLabel: string;\n  onDismiss: (restoreFocus: boolean) => void;\n}) {\n  const [unavailableId, setUnavailableId] = useState<string | null>(null);\n  const [position, setPosition] = useState({ left: 12, top: 12, above: false });\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const noteRefs = useRef(new Map<string, HTMLTextAreaElement>());\n\n  useLayoutEffect(() => {\n    if (!focusAnnotationId) return;\n    const note = noteRefs.current.get(focusAnnotationId);\n    note?.focus();\n    if (note && document.activeElement === note) onFocusConsumed?.();\n  }, [focusAnnotationId, onFocusConsumed]);\n\n  useEffect(() => {\n    const updatePosition = () => {\n      const rect = triggerRef.current?.getBoundingClientRect();\n      if (!rect) return;\n      const panelWidth = Math.min(400, window.innerWidth - 24);\n      const left = Math.min(\n        Math.max(12, rect.left),\n        Math.max(12, window.innerWidth - panelWidth - 12),\n      );\n      const above = rect.top > Math.min(360, window.innerHeight * 0.55);\n      setPosition({ left, top: above ? rect.top - 8 : rect.bottom + 8, above });\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") onDismiss(true);\n    };\n    const onPointerDown = (event: PointerEvent) => {\n      if (!(event.target instanceof Node)) return;\n      if (panelRef.current?.contains(event.target) || triggerRef.current?.contains(event.target)) {\n        return;\n      }\n      onDismiss(false);\n    };\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    if (!focusAnnotationId) {\n      window.setTimeout(() => {\n        if (document.activeElement === triggerRef.current) panelRef.current?.focus();\n      }, 0);\n    }\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n    };\n  }, [focusAnnotationId, onDismiss, triggerRef]);\n\n  if (typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      ref={panelRef}\n      role=\"dialog\"\n      tabIndex={-1}\n      style={{\n        left: position.left,\n        top: position.top,\n        transform: position.above ? \"translateY(-100%)\" : undefined,\n      }}\n      className=\"og-root fixed z-[75] box-border max-h-[min(32rem,70vh)] w-[min(25rem,calc(100vw-1.5rem))] overflow-y-auto rounded-og-lg border border-og-border bg-og-surface-1 p-3 text-og-fg shadow-xl outline-hidden\"\n      aria-label={editable ? \"Review timeline annotations\" : \"Timeline annotations\"}\n    >\n      <div className=\"mb-2 flex items-center justify-between gap-3\">\n        <div>\n          <p className=\"text-og-sm font-semibold\">{countLabel}</p>\n          <p className=\"text-og-xs text-og-fg-subtle\">\n            {editable ? \"Add a note for each quoted source.\" : \"Sent with this message.\"}\n          </p>\n        </div>\n        <button\n          type=\"button\"\n          className=\"rounded-md border-0 bg-transparent px-2 py-1 text-og-xs text-og-fg outline-hidden hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]\"\n          onClick={() => onDismiss(true)}\n        >\n          Close\n        </button>\n      </div>\n      <div className=\"grid gap-2.5\">\n        {annotations.map((annotation, index) => (\n          <section\n            key={annotation.id}\n            className=\"rounded-og-md border border-og-border bg-og-surface-2/60 p-2.5\"\n            aria-label={`Annotation ${index + 1}`}\n          >\n            <div className=\"flex items-center justify-between gap-2\">\n              <button\n                type=\"button\"\n                className=\"truncate rounded border-0 bg-transparent text-left text-og-xs font-medium text-og-fg-muted underline-offset-2 outline-hidden hover:text-og-fg hover:underline focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]\"\n                onClick={() => {\n                  const revealed =\n                    onRevealSource?.(annotation.source) ?? revealLoadedSource(annotation.source);\n                  setUnavailableId(revealed ? null : annotation.id);\n                }}\n              >\n                {sourceLabel(annotation)} · view source\n              </button>\n              {editable && onRemove ? (\n                <button\n                  type=\"button\"\n                  className=\"shrink-0 rounded border-0 bg-transparent p-1 text-og-fg-subtle outline-hidden hover:bg-og-surface-1 hover:text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-[44px]\"\n                  aria-label={`Remove annotation ${index + 1}`}\n                  onClick={() => onRemove(annotation.id)}\n                >\n                  <span aria-hidden=\"true\" className=\"text-og-md leading-none\">\n                    ×\n                  </span>\n                </button>\n              ) : null}\n            </div>\n            {unavailableId === annotation.id ? (\n              <p role=\"status\" className=\"mt-1 text-og-xs text-og-status-waiting\">\n                Source is outside the loaded timeline window.\n              </p>\n            ) : null}\n            <blockquote className=\"mt-2 max-h-28 overflow-auto whitespace-pre-wrap border-l-2 border-og-border pl-2 text-og-sm leading-5 text-og-fg-muted\">\n              {annotation.quote}\n            </blockquote>\n            {editable && onUpdate ? (\n              <label className=\"mt-2 block text-og-xs font-medium text-og-fg-muted\">\n                Note\n                <textarea\n                  ref={(node) => {\n                    if (node) noteRefs.current.set(annotation.id, node);\n                    else noteRefs.current.delete(annotation.id);\n                  }}\n                  value={annotation.note}\n                  rows={2}\n                  maxLength={2048}\n                  placeholder=\"What should the agent do with this?\"\n                  className=\"mt-1 w-full resize-y rounded-og-sm border border-og-border bg-og-surface-1 px-2.5 py-2 text-og-sm leading-5 text-og-fg outline-hidden placeholder:text-og-fg-subtle focus:border-og-accent focus:ring-1 focus:ring-og-accent\"\n                  onInput={(event) => onUpdate(annotation.id, event.currentTarget.value)}\n                />\n              </label>\n            ) : annotation.note ? (\n              <p className=\"mt-2 whitespace-pre-wrap text-og-sm leading-5 text-og-fg\">\n                {annotation.note}\n              </p>\n            ) : null}\n          </section>\n        ))}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\nexport default TimelineAnnotationsDialog;\n"],"mappings":"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","names":[]}

package/dist/voice-recording-store.d.ts

@@ -3,6 +3,8 @@ export type VoiceRecordingUploadState = "pending" | "syncing" | "retrying" | "co
 export type VoiceRecordingTranscriptionState = "pending" | "transcribing" | "retrying" | "complete";
 export type VoiceRecordingFinalizationState = "pending" | "transcript-ready" | "handed-off";
 export type VoiceRecordingChunkUploadState = "pending" | "syncing" | "complete";
+export type VoiceRecordingRecoveryMode = "automatic" | "manual";
+export type VoiceRecordingHandoffMode = "append" | "explicit";
 export type VoiceRecordingManifest = {
     version: 1;
     recordingId: string;
@@ -15,6 +17,10 @@ export type VoiceRecordingManifest = {
     uploadState: VoiceRecordingUploadState;
     transcriptionState: VoiceRecordingTranscriptionState;
     finalizationState: VoiceRecordingFinalizationState;
+    /** Whether safe server reconciliation should continue without another user action. */
+    recoveryMode: VoiceRecordingRecoveryMode;
+    /** Delayed/recovered results require explicit insertion instead of mutating an uncertain draft. */
+    handoffMode: VoiceRecordingHandoffMode;
     /** Tab/process lease. A different owner may take over only after this heartbeat is stale. */
     ownerId: string | null;
     ownerHeartbeatAt: string | null;
@@ -63,7 +69,7 @@ export interface VoiceRecordingStore {
     claimManifest(recordingId: string, ownerId: string, claimedAt: string, staleBefore: string): Promise<VoiceRecordingManifest>;
     listChunks(recordingId: string): Promise<VoiceRecordingChunk[]>;
     persistChunk(input: PersistVoiceRecordingChunkInput): Promise<PersistVoiceRecordingChunkResult>;
-    updateManifest(recordingId: string, update: Partial<Pick<VoiceRecordingManifest, "captureState" | "uploadState" | "transcriptionState" | "finalizationState" | "ownerId" | "ownerHeartbeatAt" | "transcriptText">>, updatedAt: string, ownerId?: string | undefined): Promise<VoiceRecordingManifest>;
+    updateManifest(recordingId: string, update: Partial<Pick<VoiceRecordingManifest, "captureState" | "uploadState" | "transcriptionState" | "finalizationState" | "ownerId" | "ownerHeartbeatAt" | "transcriptText" | "recoveryMode" | "handoffMode">>, updatedAt: string, ownerId?: string | undefined): Promise<VoiceRecordingManifest>;
     discard(recordingId: string, ownerId?: string | undefined): Promise<void>;
     cleanupHandedOffManifests(ownership: {
         ownerId: string;
@@ -114,7 +120,7 @@ export declare class IndexedDbVoiceRecordingStore implements VoiceRecordingStore
     claimManifest(recordingId: string, ownerId: string, claimedAt: string, staleBefore: string): Promise<VoiceRecordingManifest>;
     listChunks(recordingId: string): Promise<VoiceRecordingChunk[]>;
     persistChunk(input: PersistVoiceRecordingChunkInput): Promise<PersistVoiceRecordingChunkResult>;
-    updateManifest(recordingId: string, update: Partial<Pick<VoiceRecordingManifest, "captureState" | "uploadState" | "transcriptionState" | "finalizationState" | "ownerId" | "ownerHeartbeatAt" | "transcriptText">>, updatedAt: string, ownerId?: string | undefined): Promise<VoiceRecordingManifest>;
+    updateManifest(recordingId: string, update: Partial<Pick<VoiceRecordingManifest, "captureState" | "uploadState" | "transcriptionState" | "finalizationState" | "ownerId" | "ownerHeartbeatAt" | "transcriptText" | "recoveryMode" | "handoffMode">>, updatedAt: string, ownerId?: string | undefined): Promise<VoiceRecordingManifest>;
     discard(recordingId: string, ownerId?: string | undefined): Promise<void>;
     cleanupHandedOffManifests(ownership: {
         ownerId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "0.46.1",
+  "version": "0.52.1",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,9 @@
     "styles"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -41,19 +43,56 @@
     },
     "./model-policy": {
       "types": "./dist/model-policy.d.ts",
-      "import": "./dist/model-policy.js"
+      "import": "./dist/model-policy.js",
+      "default": "./dist/model-policy.js"
     },
     "./realtime": {
       "types": "./dist/realtime.d.ts",
       "import": "./dist/realtime.js"
     },
+    "./artifacts": {
+      "types": "./dist/artifacts.d.ts",
+      "import": "./dist/artifacts.js"
+    },
+    "./artifacts/spreadsheet": {
+      "types": "./dist/artifacts-spreadsheet.d.ts",
+      "import": "./dist/artifacts-spreadsheet.js"
+    },
+    "./artifacts/document": {
+      "types": "./dist/artifacts-document.d.ts",
+      "import": "./dist/artifacts-document.js"
+    },
+    "./artifacts/presentation": {
+      "types": "./dist/artifacts-presentation.d.ts",
+      "import": "./dist/artifacts-presentation.js"
+    },
+    "./interaction": {
+      "types": "./dist/interaction.d.ts",
+      "import": "./dist/interaction.js"
+    },
+    "./clipboard": {
+      "types": "./dist/clipboard.d.ts",
+      "import": "./dist/clipboard.js"
+    },
     "./styles.css": {
       "types": "./styles/index.d.ts",
-      "import": "./styles/index.css"
+      "style": "./styles/index.css",
+      "default": "./styles/index.css"
+    },
+    "./compiled.css": {
+      "types": "./styles/compiled.d.ts",
+      "style": "./styles/compiled.css",
+      "default": "./styles/compiled.css"
+    },
+    "./responsive.css": {
+      "types": "./styles/responsive.d.ts",
+      "style": "./styles/responsive.css",
+      "default": "./styles/responsive.css"
     },
     "./tokens.css": {
       "types": "./styles/tokens.d.ts",
-      "import": "./styles/tokens.css"
+      "style": "./styles/tokens.css",
+      "default": "./styles/tokens.css"
     }
   },
   "publishConfig": {
@@ -62,7 +101,9 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "bun ../../scripts/build-typescript-package.ts",
+    "build": "bun run build:css && bun ../../scripts/build-typescript-package.ts",
+    "build:css": "bun scripts/build-compiled-css.ts",
+    "check:css": "bun scripts/build-compiled-css.ts --check",
     "demo": "vite dev demo --port 3100",
     "demo:build": "vite build demo",
     "demo:build:deployed": "OPENGENI_REACT_DEMO_BASE=/react-demo/ OPENGENI_REACT_DEMO_OUT_DIR=../../../apps/web/dist/react-demo vite build demo",
@@ -75,7 +116,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/sdk": "^0.46.0",
+    "@opengeni/sdk": "^0.52.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.8.0",
     "motion": "^12.0.0",
@@ -94,6 +135,7 @@
     "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/lang-python": "^6.0.0",
     "@novnc/novnc": "^1.7.0",
+    "@opengeni/artifact-tool": ">=0.1.0 <0.3.0",
     "@pierre/diffs": "^1.2.11",
     "@uiw/react-codemirror": "^4.23.0",
     "@xterm/addon-fit": "^0.11.0",
@@ -125,6 +167,9 @@
     "@novnc/novnc": {
       "optional": true
     },
+    "@opengeni/artifact-tool": {
+      "optional": true
+    },
     "@pierre/diffs": {
       "optional": true
     },

package/src/artifacts-document.ts

@@ -0,0 +1,31 @@
+/** Document-only artifact surface. Import from `@opengeni/react/artifacts/document`. */
+export {
+  EditableDocumentArtifactSurface,
+  type EditableDocumentArtifactSurfaceProps,
+} from "./components/artifacts/editable-document";
+export {
+  DocumentArtifactSurface,
+  DocumentEditor,
+  DocumentProjectionArtifactSurface,
+  DocumentProjectionEditor,
+  type DocumentArtifactSurfaceProps,
+  type DocumentCommit,
+  type DocumentCommitHandler,
+  type DocumentEditorProps,
+  type DocumentEditorProjection,
+  type DocumentLayoutMode,
+  type DocumentProjectionArtifactSurfaceProps,
+  type DocumentProjectionBlock,
+  type DocumentProjectionChange,
+  type DocumentProjectionComment,
+  type DocumentProjectionEditorProps,
+  type DocumentProjectionPageBreak,
+  type DocumentProjectionPageGeometry,
+  type DocumentProjectionParagraph,
+  type DocumentProjectionParagraphStyle,
+  type DocumentProjectionSection,
+  type DocumentProjectionTable,
+  type DocumentProjectionTextRun,
+  type DocumentProjectionTextStyle,
+  type DocumentSelection,
+} from "./components/artifacts/document-editor";

package/src/artifacts-presentation.ts

@@ -0,0 +1,36 @@
+/** Presentation-only artifact surface. Import from `@opengeni/react/artifacts/presentation`. */
+export {
+  EditablePresentationArtifactSurface,
+  type EditablePresentationArtifactSurfaceProps,
+} from "./components/artifacts/editable-presentation";
+export {
+  PresentationArtifactSurface,
+  PresentationEditor,
+  PresentationProjectionArtifactSurface,
+  PresentationProjectionEditor,
+  type PresentationArtifactSurfaceProps,
+  type PresentationCommit,
+  type PresentationCommitHandler,
+  type PresentationEditorProps,
+  type PresentationEditorProjection,
+  type PresentationProjectionArtifactSurfaceProps,
+  type PresentationProjectionChart,
+  type PresentationProjectionChartSeries,
+  type PresentationProjectionConnector,
+  type PresentationProjectionEditorProps,
+  type PresentationProjectionElementMetadata,
+  type PresentationProjectionElement,
+  type PresentationProjectionFill,
+  type PresentationProjectionGroup,
+  type PresentationProjectionImage,
+  type PresentationProjectionLine,
+  type PresentationProjectionPosition,
+  type PresentationProjectionRichText,
+  type PresentationProjectionShape,
+  type PresentationProjectionTable,
+  type PresentationProjectionTableCell,
+  type PresentationProjectionTextParagraph,
+  type PresentationProjectionTextRun,
+  type PresentationProjectionTextStyle,
+  type PresentationSlideProjection,
+} from "./components/artifacts/presentation-editor";

package/src/artifacts-spreadsheet.ts

@@ -0,0 +1,21 @@
+/** Spreadsheet-only artifact surface. Import from `@opengeni/react/artifacts/spreadsheet`. */
+export {
+  SpreadsheetArtifactSurface,
+  SpreadsheetGrid,
+  SpreadsheetProjectionGrid,
+  type SpreadsheetArtifactSurfaceProps,
+  type SpreadsheetCommit,
+  type SpreadsheetRangeCommit,
+  type SpreadsheetGridProps,
+  type SpreadsheetGridProjection,
+  type SpreadsheetProjectionCell,
+  type SpreadsheetProjectionGridProps,
+  type SpreadsheetSelection,
+  type SpreadsheetViewport,
+} from "./components/artifacts/spreadsheet-grid";
+export {
+  EditableSpreadsheetArtifactSurface,
+  EditableSpreadsheetGrid,
+  type EditableSpreadsheetArtifactSurfaceProps,
+  type EditableSpreadsheetGridProps,
+} from "./components/artifacts/editable-spreadsheet";

package/src/artifacts.ts

@@ -0,0 +1,86 @@
+/** Public artifact surfaces. Import from `@opengeni/react/artifacts`. */
+export {
+  ArtifactSurface,
+  DocumentArtifactSurface,
+  DocumentEditor,
+  DocumentProjectionArtifactSurface,
+  DocumentProjectionEditor,
+  BrowserEditableArtifactWorkbench,
+  EditableDocumentArtifactSurface,
+  EditableArtifactWorkbench,
+  EditableArtifactWorkbenchHost,
+  EditablePresentationArtifactSurface,
+  EditableSpreadsheetArtifactSurface,
+  EditableSpreadsheetGrid,
+  PresentationArtifactSurface,
+  PresentationEditor,
+  PresentationProjectionArtifactSurface,
+  PresentationProjectionEditor,
+  SpreadsheetArtifactSurface,
+  SpreadsheetGrid,
+  SpreadsheetProjectionGrid,
+  type ArtifactModality,
+  type ArtifactSurfaceProps,
+  type DocumentArtifactSurfaceProps,
+  type DocumentCommit,
+  type DocumentCommitHandler,
+  type DocumentEditorProps,
+  type DocumentEditorProjection,
+  type DocumentLayoutMode,
+  type DocumentProjectionArtifactSurfaceProps,
+  type DocumentProjectionBlock,
+  type DocumentProjectionChange,
+  type DocumentProjectionComment,
+  type DocumentProjectionEditorProps,
+  type DocumentProjectionPageBreak,
+  type DocumentProjectionPageGeometry,
+  type DocumentProjectionParagraph,
+  type DocumentProjectionParagraphStyle,
+  type DocumentProjectionSection,
+  type DocumentProjectionTable,
+  type DocumentProjectionTextRun,
+  type DocumentProjectionTextStyle,
+  type DocumentSelection,
+  type BrowserEditableArtifactWorkbenchOptions,
+  type BrowserEditableArtifactWorkbenchProps,
+  type EditableDocumentArtifactSurfaceProps,
+  type EditableArtifactWorkbenchHostProps,
+  type EditableArtifactWorkbenchProps,
+  type EditablePresentationArtifactSurfaceProps,
+  type EditableSpreadsheetArtifactSurfaceProps,
+  type EditableSpreadsheetGridProps,
+  type PresentationArtifactSurfaceProps,
+  type PresentationCommit,
+  type PresentationCommitHandler,
+  type PresentationEditorProps,
+  type PresentationEditorProjection,
+  type PresentationProjectionArtifactSurfaceProps,
+  type PresentationProjectionChart,
+  type PresentationProjectionChartSeries,
+  type PresentationProjectionConnector,
+  type PresentationProjectionEditorProps,
+  type PresentationProjectionElementMetadata,
+  type PresentationProjectionElement,
+  type PresentationProjectionFill,
+  type PresentationProjectionGroup,
+  type PresentationProjectionImage,
+  type PresentationProjectionLine,
+  type PresentationProjectionPosition,
+  type PresentationProjectionRichText,
+  type PresentationProjectionShape,
+  type PresentationProjectionTable,
+  type PresentationProjectionTableCell,
+  type PresentationProjectionTextParagraph,
+  type PresentationProjectionTextRun,
+  type PresentationProjectionTextStyle,
+  type PresentationSlideProjection,
+  type SpreadsheetArtifactSurfaceProps,
+  type SpreadsheetCommit,
+  type SpreadsheetRangeCommit,
+  type SpreadsheetGridProps,
+  type SpreadsheetGridProjection,
+  type SpreadsheetProjectionCell,
+  type SpreadsheetProjectionGridProps,
+  type SpreadsheetSelection,
+  type SpreadsheetViewport,
+} from "./components/artifacts";