@hyperframes/studio 0.8.23 → 0.8.25

package/src/components/editor/topologyLensGeometry.ts

@@ -0,0 +1,119 @@
+import { resolveElementHandle } from "../../webmcp/handles";
+import { collectStudioLookScene } from "../../webmcp/tools/lookTools";
+import type { DomEditLayerItem } from "./domEditingTypes";
+import { toVisibleOverlayRects, type OverlayRect } from "./domEditOverlayGeometry";
+
+export interface TopologyLensNode {
+  label: string;
+  rect: OverlayRect;
+}
+
+export interface TopologyLensGeometry {
+  field: TopologyLensNode;
+  target: TopologyLensNode;
+  contours: TopologyLensNode[];
+}
+
+function findSourceContextIndex(items: readonly DomEditLayerItem[], targetIndex: number): number {
+  const target = items[targetIndex]!;
+  let contextIndex = targetIndex;
+  let parentDepth = target.depth - 1;
+  for (let index = targetIndex - 1; index >= 0 && parentDepth >= 0; index--) {
+    const item = items[index]!;
+    if (item.depth !== parentDepth) continue;
+    if (item.sourceFile !== target.sourceFile) break;
+    contextIndex = index;
+    parentDepth -= 1;
+  }
+  return contextIndex;
+}
+
+function collectSourceContours(
+  items: readonly DomEditLayerItem[],
+  contextIndex: number,
+  target: DomEditLayerItem,
+): HTMLElement[] {
+  const context = items[contextIndex]!;
+  const contours: HTMLElement[] = [];
+  for (let index = contextIndex + 1; index < items.length; index++) {
+    const item = items[index]!;
+    if (item.depth <= context.depth) break;
+    if (item.sourceFile === target.sourceFile && item.element !== target.element) {
+      contours.push(item.element);
+    }
+  }
+  return contours;
+}
+
+/**
+ * Resolve the same nested preorder used by studio_look. This keeps the lens on
+ * the agent's source-safe scene model instead of guessing hierarchy from an
+ * unrelated presentation selector.
+ */
+export function resolveTopologyLensElements(
+  doc: Document,
+  activeCompositionPath: string | null,
+  handle: string,
+): { context: HTMLElement; target: HTMLElement; contours: HTMLElement[] } | null {
+  const target = resolveElementHandle(doc, handle);
+  if (!target) return null;
+  const scene = collectStudioLookScene(doc, activeCompositionPath, null);
+  if (scene.status === "loading") return null;
+  const targetIndex = scene.items.findIndex((item) => item.element === target);
+  if (targetIndex < 0) return { context: target, target, contours: [] };
+
+  const targetItem = scene.items[targetIndex]!;
+  const contextIndex = findSourceContextIndex(scene.items, targetIndex);
+  const contextItem = scene.items[contextIndex]!;
+  const sourceContext = target.closest<HTMLElement>(
+    "[data-composition-file], [data-composition-src]",
+  );
+  return {
+    context: sourceContext ?? contextItem.element,
+    target,
+    contours: collectSourceContours(scene.items, contextIndex, targetItem),
+  };
+}
+
+function isRenderableRect(rect: OverlayRect | null | undefined): rect is OverlayRect {
+  return Boolean(rect && rect.width > 0 && rect.height > 0);
+}
+
+export function measureTopologyLensGeometry(input: {
+  overlay: HTMLDivElement;
+  iframe: HTMLIFrameElement;
+  activeCompositionPath: string | null;
+  handle: string;
+}): TopologyLensGeometry | null {
+  const doc = input.iframe.contentDocument;
+  if (!doc) return null;
+  const elements = resolveTopologyLensElements(doc, input.activeCompositionPath, input.handle);
+  if (!elements) return null;
+  const sharedField = elements.context === elements.target;
+  const measured = toVisibleOverlayRects(
+    input.overlay,
+    input.iframe,
+    sharedField
+      ? [elements.target, ...elements.contours]
+      : [elements.context, elements.target, ...elements.contours],
+  );
+  const target = measured[sharedField ? 0 : 1];
+  if (!isRenderableRect(target)) return null;
+  const measuredField = measured[0];
+  const fieldUsesContext = !sharedField && isRenderableRect(measuredField);
+  const contourOffset = sharedField ? 1 : 2;
+  return {
+    field: {
+      label: (fieldUsesContext ? elements.context : elements.target).tagName.toLowerCase(),
+      rect: fieldUsesContext ? measuredField : target,
+    },
+    target: { label: elements.target.tagName.toLowerCase(), rect: target },
+    contours: measured
+      .slice(contourOffset)
+      .map((rect, index) => ({
+        label: elements.contours[index]!.tagName.toLowerCase(),
+        rect,
+      }))
+      .filter((item): item is TopologyLensNode => isRenderableRect(item.rect)),
+  };
+}

package/src/components/editor/topologyLensState.test.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it } from "vitest";
+import { reduceTopologyLens, type TopologyLensState } from "./topologyLensState";
+import type { StudioEditLifecycleState } from "../../webmcp/writeCoordinator";
+
+const targetA = { handle: "dom:v1:index.html:index.html:target-a", sourceFile: "index.html" };
+const targetB = { handle: "dom:v1:index.html:index.html:target-b", sourceFile: "index.html" };
+
+function lifecycle(
+  overrides: Partial<Exclude<StudioEditLifecycleState, { phase: "idle" }>> = {},
+): Exclude<StudioEditLifecycleState, { phase: "idle" }> {
+  return {
+    callId: "call-a",
+    projectId: "project-a",
+    target: targetA,
+    operation: "set-text",
+    targetChanged: true,
+    phase: "dispatching",
+    ...overrides,
+  };
+}
+
+function hidden(): TopologyLensState {
+  return { phase: "hidden" };
+}
+
+describe("Topology Lens state", () => {
+  it("reveals a new target but localizes a repeated target immediately", () => {
+    expect(reduceTopologyLens(hidden(), { type: "lifecycle", value: lifecycle() })).toMatchObject({
+      phase: "acquiring",
+      callId: "call-a",
+    });
+    expect(
+      reduceTopologyLens(hidden(), {
+        type: "lifecycle",
+        value: lifecycle({ callId: "call-repeat", targetChanged: false }),
+      }),
+    ).toMatchObject({ phase: "localizing", callId: "call-repeat" });
+  });
+
+  it("lets a fast durable receipt interrupt acquisition and seal once", () => {
+    const acquiring = reduceTopologyLens(hidden(), { type: "lifecycle", value: lifecycle() });
+    const sealing = reduceTopologyLens(acquiring, {
+      type: "lifecycle",
+      value: lifecycle({ phase: "verified" }),
+    });
+
+    expect(sealing).toMatchObject({ phase: "sealing", receiptStage: "verified" });
+    expect(reduceTopologyLens(sealing, { type: "lifecycle", value: { phase: "idle" } })).toEqual(
+      hidden(),
+    );
+  });
+
+  it.each(["dispatched", "failed"] as const)(
+    "retracts %s without manufacturing a success seal",
+    (phase) => {
+      const localizing = reduceTopologyLens(hidden(), {
+        type: "lifecycle",
+        value: lifecycle({ phase }),
+      });
+
+      expect(localizing).toMatchObject({ phase: "localizing", terminal: phase });
+      expect(
+        reduceTopologyLens(localizing, { type: "lifecycle", value: { phase: "idle" } }),
+      ).toEqual(hidden());
+    },
+  );
+
+  it.each(["saved", "verified"] as const)(
+    "retracts a %s no-op without manufacturing a success seal",
+    (phase) => {
+      const noChange = reduceTopologyLens(hidden(), {
+        type: "lifecycle",
+        value: lifecycle({
+          phase,
+          receipt: {
+            ok: true,
+            stage: phase,
+            target: targetA,
+            operation: "set-text",
+            changed: false,
+            evidence: { kind: "content-version", sourceFile: "index.html", version: "v1" },
+          },
+        }),
+      });
+
+      expect(noChange).toMatchObject({ phase: "localizing", terminal: "no-change" });
+    },
+  );
+
+  it("ignores elapsed events owned by an older invocation", () => {
+    const newer = reduceTopologyLens(hidden(), {
+      type: "lifecycle",
+      value: lifecycle({ callId: "call-b", target: targetB }),
+    });
+
+    expect(reduceTopologyLens(newer, { type: "acquisition-elapsed", callId: "call-a" })).toBe(
+      newer,
+    );
+  });
+
+  it("clears when the coordinator publishes idle", () => {
+    const acquiring = reduceTopologyLens(hidden(), { type: "lifecycle", value: lifecycle() });
+
+    expect(reduceTopologyLens(acquiring, { type: "lifecycle", value: { phase: "idle" } })).toEqual(
+      hidden(),
+    );
+  });
+
+  it("advances acquisition to localization only for the same visual invocation", () => {
+    const acquiring = reduceTopologyLens(hidden(), { type: "lifecycle", value: lifecycle() });
+
+    expect(
+      reduceTopologyLens(acquiring, { type: "acquisition-elapsed", callId: "call-a" }),
+    ).toMatchObject({ phase: "localizing", terminal: null });
+  });
+});

package/src/components/editor/topologyLensState.ts

@@ -0,0 +1,72 @@
+import type {
+  StudioEditLifecycleState,
+  StudioWriteOperation,
+  StudioWriteTarget,
+} from "../../webmcp/writeCoordinator";
+
+type TopologyLensBase = {
+  callId: string;
+  projectId: string;
+  target: StudioWriteTarget;
+  operation: StudioWriteOperation;
+};
+
+export type TopologyLensState =
+  | { phase: "hidden" }
+  | (TopologyLensBase & { phase: "acquiring" })
+  | (TopologyLensBase & {
+      phase: "localizing";
+      terminal: "dispatched" | "failed" | "no-change" | null;
+    })
+  | (TopologyLensBase & {
+      phase: "sealing";
+      receiptStage: "saved" | "verified";
+    });
+
+export type TopologyLensEvent =
+  | { type: "lifecycle"; value: StudioEditLifecycleState }
+  | { type: "acquisition-elapsed"; callId: string };
+
+function visibleBase(
+  value: Exclude<StudioEditLifecycleState, { phase: "idle" }>,
+): TopologyLensBase {
+  return {
+    callId: value.callId,
+    projectId: value.projectId,
+    target: value.target,
+    operation: value.operation,
+  };
+}
+
+/**
+ * Presentation follows transaction facts. Elapsed events may finish a visual
+ * transition, but cannot promote a receipt or invent persistence.
+ */
+export function reduceTopologyLens(
+  state: TopologyLensState,
+  event: TopologyLensEvent,
+): TopologyLensState {
+  if (event.type === "lifecycle") {
+    const lifecycle = event.value;
+    if (lifecycle.phase === "idle") return { phase: "hidden" };
+    const base = visibleBase(lifecycle);
+    switch (lifecycle.phase) {
+      case "dispatching":
+        return lifecycle.targetChanged
+          ? { ...base, phase: "acquiring" }
+          : { ...base, phase: "localizing", terminal: null };
+      case "dispatched":
+      case "failed":
+        return { ...base, phase: "localizing", terminal: lifecycle.phase };
+      case "saved":
+      case "verified":
+        if (lifecycle.receipt?.ok && lifecycle.receipt.changed === false) {
+          return { ...base, phase: "localizing", terminal: "no-change" };
+        }
+        return { ...base, phase: "sealing", receiptStage: lifecycle.phase };
+    }
+  }
+
+  if (state.phase === "hidden" || state.callId !== event.callId) return state;
+  return state.phase === "acquiring" ? { ...state, phase: "localizing", terminal: null } : state;
+}

package/src/components/nle/PreviewOverlays.topologyLens.test.tsx

@@ -0,0 +1,126 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PreviewOverlays } from "./PreviewOverlays";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const previewState = vi.hoisted(() => ({ captionEditMode: false }));
+const iframeRef = { current: null as HTMLIFrameElement | null };
+
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({ activeCompPath: "index.html", previewIframeRef: iframeRef }),
+  useStudioPlaybackContext: () => ({
+    captionEditMode: previewState.captionEditMode,
+    compositionLoading: false,
+    isPlaying: false,
+  }),
+}));
+vi.mock("../../contexts/DomEditContext", () => ({
+  useDomEditSelectionContext: () => ({
+    domEditHoverSelection: null,
+    domEditSelection: null,
+    domEditGroupSelections: [],
+  }),
+  useDomEditActionsContext: () => ({
+    handlePreviewCanvasMouseDown: vi.fn(),
+    handlePreviewCanvasPointerMove: vi.fn(),
+    handlePreviewCanvasPointerLeave: vi.fn(),
+    applyDomSelection: vi.fn(),
+    handleBlockedDomMove: vi.fn(),
+    handleDomManualDragStart: vi.fn(),
+    handleDomPathOffsetCommit: vi.fn(),
+    handleDomGroupPathOffsetCommit: vi.fn(),
+    handleDomBoxSizeCommit: vi.fn(),
+    handleDomRotationCommit: vi.fn(),
+    handleDomStyleCommit: vi.fn(),
+    applyMarqueeSelection: vi.fn(),
+    handleDomEditElementDelete: vi.fn(),
+    handleDomZIndexReorderCommit: vi.fn(),
+  }),
+}));
+vi.mock("../../captions/store", () => {
+  const state = {
+    model: null,
+    dismissed: false,
+    syncError: null,
+    clearSelection: vi.fn(),
+    setDismissed: vi.fn(),
+    setEditMode: vi.fn(),
+    setSyncError: vi.fn(),
+  };
+  return {
+    useCaptionStore: Object.assign(
+      (selector: (value: typeof state) => unknown) => selector(state),
+      { getState: () => state },
+    ),
+  };
+});
+vi.mock("../../hooks/useCompositionDimensions", () => ({
+  useCompositionDimensions: () => null,
+}));
+vi.mock("../../utils/studioUiPreferences", () => ({ readStudioUiPreferences: () => ({}) }));
+vi.mock("./useCanvasZOrderTimelineMirror", () => ({
+  useCanvasZOrderTimelineMirror: () => vi.fn(),
+}));
+vi.mock("../editor/TopologyLens", async () => {
+  const { createElement } = await import("react");
+  return {
+    TopologyLens: () => createElement("div", { "data-topology-host": "true" }),
+  };
+});
+vi.mock("../../captions/components/CaptionOverlay", () => ({ CaptionOverlay: () => null }));
+vi.mock("../editor/DomEditOverlay", () => ({ DomEditOverlay: () => null }));
+vi.mock("../editor/MotionPathOverlay", () => ({ MotionPathOverlay: () => null }));
+vi.mock("../editor/SnapToolbar", () => ({ SnapToolbar: () => null }));
+
+let root: Root | null = null;
+let host: HTMLDivElement | null = null;
+
+function render(props: Partial<React.ComponentProps<typeof PreviewOverlays>> = {}): void {
+  host = document.createElement("div");
+  iframeRef.current = document.createElement("iframe");
+  document.body.append(host, iframeRef.current);
+  root = createRoot(host);
+  act(() => {
+    root?.render(
+      <PreviewOverlays
+        shouldShowMotionPath={false}
+        shouldShowSelectedDomBounds={false}
+        {...props}
+      />,
+    );
+  });
+}
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  host = null;
+  iframeRef.current = null;
+  previewState.captionEditMode = false;
+  document.body.replaceChildren();
+});
+
+describe("PreviewOverlays Topology Lens host", () => {
+  it("stays in Studio chrome while a block preview covers the composition", () => {
+    render({
+      blockPreview: {
+        id: "block-a",
+        title: "Block",
+        posterUrl: "poster.png",
+      } as React.ComponentProps<typeof PreviewOverlays>["blockPreview"],
+    });
+
+    expect(host?.querySelector('[data-topology-host="true"]')).not.toBeNull();
+  });
+
+  it("stays independent of caption editing chrome", () => {
+    previewState.captionEditMode = true;
+    render();
+
+    expect(host?.querySelector('[data-topology-host="true"]')).not.toBeNull();
+  });
+});

package/src/components/nle/PreviewOverlays.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import { CaptionOverlay } from "../../captions/components/CaptionOverlay";
 import { useCaptionStore } from "../../captions/store";
 import { DomEditOverlay } from "../editor/DomEditOverlay";
+import { TopologyLens } from "../editor/TopologyLens";
 import { MotionPathOverlay } from "../editor/MotionPathOverlay";
 import { SnapToolbar } from "../editor/SnapToolbar";
 import { useCompositionDimensions } from "../../hooks/useCompositionDimensions";
@@ -191,30 +192,34 @@ export function PreviewOverlays({
 
   if (blockPreview) {
     return (
-      <div className="absolute inset-0 z-30 bg-black pointer-events-none">
-        {blockPreview.videoUrl ? (
-          <video
-            src={blockPreview.videoUrl}
-            autoPlay
-            muted
-            loop
-            playsInline
-            className="w-full h-full object-contain"
-          />
-        ) : blockPreview.posterUrl ? (
-          <img
-            src={blockPreview.posterUrl}
-            alt={blockPreview.title}
-            className="w-full h-full object-contain"
-          />
-        ) : null}
-      </div>
+      <>
+        <TopologyLens iframeRef={previewIframeRef} activeCompositionPath={activeCompPath} />
+        <div className="absolute inset-0 z-30 bg-black pointer-events-none">
+          {blockPreview.videoUrl ? (
+            <video
+              src={blockPreview.videoUrl}
+              autoPlay
+              muted
+              loop
+              playsInline
+              className="w-full h-full object-contain"
+            />
+          ) : blockPreview.posterUrl ? (
+            <img
+              src={blockPreview.posterUrl}
+              alt={blockPreview.title}
+              className="w-full h-full object-contain"
+            />
+          ) : null}
+        </div>
+      </>
     );
   }
 
   if (captionEditMode) {
     return (
       <>
+        <TopologyLens iframeRef={previewIframeRef} activeCompositionPath={activeCompPath} />
         <CaptionOverlay iframeRef={previewIframeRef} />
         {/* Mode indicator + explicit exit */}
         <div className="absolute top-2 left-1/2 -translate-x-1/2 z-[60] flex items-center gap-2 rounded-full border border-studio-accent/40 bg-black/70 px-2.5 py-1">
@@ -257,6 +262,7 @@ export function PreviewOverlays({
 
   return (
     <>
+      <TopologyLens iframeRef={previewIframeRef} activeCompositionPath={activeCompPath} />
       <DomEditOverlay
         iframeRef={previewIframeRef}
         activeCompositionPath={activeCompPath}

package/src/components/sidebar/CompositionsTab.drag.test.tsx

@@ -3,6 +3,7 @@
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePlayerStore } from "../../player/store/playerStore";
 import { TIMELINE_COMPOSITION_MIME } from "../../utils/timelineCompositionDrop";
 import { CompositionsTab } from "./CompositionsTab";
 
@@ -17,6 +18,7 @@ afterEach(() => {
   if (root) act(() => root?.unmount());
   root = null;
   document.body.innerHTML = "";
+  usePlayerStore.setState({ thumbnailContentRevision: 0 });
 });
 
 function mount(onSelect = vi.fn(), onAddToTimeline = vi.fn()) {
@@ -59,6 +61,20 @@ describe("composition card drag", () => {
     expect(host.querySelector('img[src*="/thumbnail/"]')).toBeNull();
   });
 
+  it("retries a failed thumbnail at the next persisted content revision", () => {
+    const { host } = mount();
+    const thumbnail = host.querySelector<HTMLImageElement>('img[src*="/thumbnail/"]');
+    if (!thumbnail) throw new Error("composition thumbnail did not render");
+    act(() => thumbnail.dispatchEvent(new Event("error")));
+    expect(host.textContent).toContain("Preview unavailable");
+
+    act(() => usePlayerStore.getState().bumpThumbnailContentRevision());
+
+    const retry = host.querySelector<HTMLImageElement>('img[src*="/thumbnail/"]');
+    expect(retry).not.toBeNull();
+    expect(new URL(retry?.src ?? "").searchParams.get("revision")).toBe("1");
+  });
+
   it("mounts one live preview only after sustained hover and removes it on leave", () => {
     vi.useFakeTimers();
     const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});

package/src/components/sidebar/CompositionsTab.tsx

@@ -1,6 +1,7 @@
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { setPreviewMediaMuted } from "../../player/lib/timelineIframeHelpers";
 import { buildCompositionThumbnailUrl } from "../../player/components/CompositionThumbnail";
+import { setPreviewMediaMuted } from "../../player/lib/timelineIframeHelpers";
+import { usePlayerStore } from "../../player/store/playerStore";
 import { TIMELINE_COMPOSITION_MIME } from "../../utils/timelineCompositionDrop";
 import { Tooltip } from "../ui/Tooltip";
 
@@ -120,6 +121,7 @@ function CompCard({
   isRendering,
   lintInfo,
   onAddToTimeline,
+  contentRevision,
 }: {
   projectId: string;
   comp: string;
@@ -129,11 +131,12 @@ function CompCard({
   isRendering?: boolean;
   lintInfo?: { count: number; messages: string[] };
   onAddToTimeline?: () => void;
+  contentRevision: number;
 }) {
   const [hovered, setHovered] = useState(false);
   const [stageSize, setStageSize] = useState(DEFAULT_PREVIEW_STAGE);
   const [livePreviewLoaded, setLivePreviewLoaded] = useState(false);
-  const [thumbnailFailed, setThumbnailFailed] = useState(false);
+  const [failedThumbnailUrl, setFailedThumbnailUrl] = useState<string | null>(null);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const syncTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -176,7 +179,9 @@ function CompCard({
     seekTime: THUMBNAIL_SEEK_TIME_SECONDS,
     duration: 0,
     origin: window.location.origin,
+    contentRevision,
   });
+  const thumbnailFailed = failedThumbnailUrl === thumbnailUrl;
   const previewScale = resolveCompositionPreviewScale({
     cardWidth: CARD_W,
     cardHeight: CARD_H,
@@ -246,7 +251,7 @@ function CompCard({
             draggable={false}
             loading="lazy"
             decoding="async"
-            onError={() => setThumbnailFailed(true)}
+            onError={() => setFailedThumbnailUrl(thumbnailUrl)}
             className={`absolute inset-0 h-full w-full object-contain transition-opacity ${
               livePreviewLoaded ? "opacity-0" : "opacity-100"
             }`}
@@ -368,6 +373,7 @@ export const CompositionsTab = memo(function CompositionsTab({
   isRendering,
   lintFindingsByFile,
 }: CompositionsTabProps) {
+  const contentRevision = usePlayerStore((state) => state.thumbnailContentRevision);
   if (compositions.length === 0) {
     return (
       <div className="flex-1 flex items-center justify-center px-4">
@@ -389,6 +395,7 @@ export const CompositionsTab = memo(function CompositionsTab({
           onAddToTimeline={onAddToTimeline ? () => onAddToTimeline(comp) : undefined}
           isRendering={isRendering}
           lintInfo={lintFindingsByFile?.get(comp)}
+          contentRevision={contentRevision}
         />
       ))}
     </div>

package/src/components/ui/HyperframesLoader.tsx

@@ -1,3 +1,5 @@
+import { HyperframesMark } from "./HyperframesMark";
+
 export interface HyperframesLoaderProps {
   /** Status text shown below the mark. */
   title: string;
@@ -31,54 +33,7 @@ export function HyperframesLoader({
         style={{ width: markFrameSize, height: markFrameSize }}
         draggable={false}
       >
-        <svg
-          className="hf-loader-mark"
-          width={size}
-          height={size}
-          viewBox="0 0 100 100"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-        >
-          <g className="hf-loader-mark__mark" transform="translate(50 50)">
-            <g className="hf-loader-mark__core" transform="scale(1)" opacity=".92">
-              <g transform="translate(-50 -50)">
-                <path
-                  d="M10.1851 57.8021L33.1145 73.8313C36.2202 75.9978 41.5173 73.5433 42.4816 69.4984L51.7611 30.4271C52.7253 26.3822 48.5802 23.9277 44.4602 26.0942L13.917 42.1235C6.96677 45.7676 4.97564 54.1579 10.1851 57.8021Z"
-                  fill="url(#hf-loader-grad-left)"
-                />
-                <path
-                  d="M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z"
-                  fill="url(#hf-loader-grad-right)"
-                />
-              </g>
-            </g>
-          </g>
-          <defs>
-            <linearGradient
-              id="hf-loader-grad-left"
-              x1="48.5676"
-              y1="25"
-              x2="44.7804"
-              y2="71.9384"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#06E3FA" />
-              <stop offset="1" stopColor="#4FDB5E" />
-            </linearGradient>
-            <linearGradient
-              id="hf-loader-grad-right"
-              x1="54.8282"
-              y1="73.8392"
-              x2="72.0989"
-              y2="32.8932"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#06E3FA" />
-              <stop offset="1" stopColor="#4FDB5E" />
-            </linearGradient>
-          </defs>
-        </svg>
+        <HyperframesMark className="hf-loader-mark" width={size} height={size} />
       </div>
       <div className="hf-loader-title">{title}</div>
       {detail && <div className="hf-loader-detail">{detail}</div>}