@hyperframes/studio 0.6.0-alpha.9 → 0.6.1

package/src/components/editor/manualEditsParsing.ts

@@ -0,0 +1,280 @@
+import type { DomEditSelection } from "./domEditing";
+import type {
+  StudioManualEdit,
+  StudioManualEditManifest,
+  StudioManualEditTarget,
+  StudioPathOffsetEdit,
+  StudioBoxSizeEdit,
+  StudioRotationEdit,
+} from "./manualEditsTypes";
+import { STUDIO_MANUAL_EDITS_PATH } from "./manualEditsTypes";
+
+/* ── Helpers ──────────────────────────────────────────────────────── */
+export function finiteNumber(value: unknown): number | null {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+/* ── Manifest factory ─────────────────────────────────────────────── */
+export function emptyStudioManualEditManifest(): StudioManualEditManifest {
+  return { version: 1, edits: [] };
+}
+
+/* ── Parsing ──────────────────────────────────────────────────────── */
+function parsePathOffsetEdit(value: unknown): StudioPathOffsetEdit | null {
+  if (!value || typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  if (record.kind !== "path-offset") return null;
+  const target = record.target;
+  if (!target || typeof target !== "object") return null;
+  const targetRecord = target as Record<string, unknown>;
+  const sourceFile = typeof targetRecord.sourceFile === "string" ? targetRecord.sourceFile : "";
+  if (!sourceFile) return null;
+
+  const selector = typeof targetRecord.selector === "string" ? targetRecord.selector : undefined;
+  const id = typeof targetRecord.id === "string" ? targetRecord.id : undefined;
+  if (!selector && !id) return null;
+
+  const x = finiteNumber(record.x);
+  const y = finiteNumber(record.y);
+  if (x == null || y == null) return null;
+
+  return {
+    kind: "path-offset",
+    target: {
+      sourceFile,
+      selector,
+      selectorIndex: finiteNumber(targetRecord.selectorIndex) ?? undefined,
+      id,
+    },
+    x,
+    y,
+    updatedAt: typeof record.updatedAt === "string" ? record.updatedAt : undefined,
+  };
+}
+
+function parseBoxSizeEdit(value: unknown): StudioBoxSizeEdit | null {
+  if (!value || typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  if (record.kind !== "box-size") return null;
+  const target = record.target;
+  if (!target || typeof target !== "object") return null;
+  const targetRecord = target as Record<string, unknown>;
+  const sourceFile = typeof targetRecord.sourceFile === "string" ? targetRecord.sourceFile : "";
+  if (!sourceFile) return null;
+
+  const selector = typeof targetRecord.selector === "string" ? targetRecord.selector : undefined;
+  const id = typeof targetRecord.id === "string" ? targetRecord.id : undefined;
+  if (!selector && !id) return null;
+
+  const width = finiteNumber(record.width);
+  const height = finiteNumber(record.height);
+  if (width == null || height == null || width <= 0 || height <= 0) return null;
+
+  return {
+    kind: "box-size",
+    target: {
+      sourceFile,
+      selector,
+      selectorIndex: finiteNumber(targetRecord.selectorIndex) ?? undefined,
+      id,
+    },
+    width,
+    height,
+    updatedAt: typeof record.updatedAt === "string" ? record.updatedAt : undefined,
+  };
+}
+
+function parseRotationEdit(value: unknown): StudioRotationEdit | null {
+  if (!value || typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  if (record.kind !== "rotation") return null;
+  const target = record.target;
+  if (!target || typeof target !== "object") return null;
+  const targetRecord = target as Record<string, unknown>;
+  const sourceFile = typeof targetRecord.sourceFile === "string" ? targetRecord.sourceFile : "";
+  if (!sourceFile) return null;
+
+  const selector = typeof targetRecord.selector === "string" ? targetRecord.selector : undefined;
+  const id = typeof targetRecord.id === "string" ? targetRecord.id : undefined;
+  if (!selector && !id) return null;
+
+  const angle = finiteNumber(record.angle);
+  if (angle == null) return null;
+
+  return {
+    kind: "rotation",
+    target: {
+      sourceFile,
+      selector,
+      selectorIndex: finiteNumber(targetRecord.selectorIndex) ?? undefined,
+      id,
+    },
+    angle,
+    updatedAt: typeof record.updatedAt === "string" ? record.updatedAt : undefined,
+  };
+}
+
+function parseManualEdit(value: unknown): StudioManualEdit | null {
+  return parsePathOffsetEdit(value) ?? parseBoxSizeEdit(value) ?? parseRotationEdit(value);
+}
+
+export function parseStudioManualEditManifest(content: string): StudioManualEditManifest {
+  if (!content.trim()) return emptyStudioManualEditManifest();
+
+  try {
+    const parsed = JSON.parse(content) as unknown;
+    if (!parsed || typeof parsed !== "object") return emptyStudioManualEditManifest();
+    const edits = (parsed as { edits?: unknown }).edits;
+    if (!Array.isArray(edits)) return emptyStudioManualEditManifest();
+    return {
+      version: 1,
+      edits: edits.map(parseManualEdit).filter((edit): edit is StudioManualEdit => edit !== null),
+    };
+  } catch {
+    return emptyStudioManualEditManifest();
+  }
+}
+
+export function serializeStudioManualEditManifest(manifest: StudioManualEditManifest): string {
+  return `${JSON.stringify(manifest, null, 2)}\n`;
+}
+
+/* ── File path utilities ──────────────────────────────────────────── */
+function normalizeStudioFileChangePath(path: string): string {
+  return path
+    .trim()
+    .replace(/\\/g, "/")
+    .replace(/^\.?\//, "");
+}
+
+function readStudioFileChangePathFromValue(value: unknown): string | null {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return null;
+    if (trimmed.startsWith("{")) {
+      try {
+        return readStudioFileChangePathFromValue(JSON.parse(trimmed) as unknown);
+      } catch {
+        return normalizeStudioFileChangePath(trimmed);
+      }
+    }
+    return normalizeStudioFileChangePath(trimmed);
+  }
+
+  if (!value || typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  if (typeof record.path === "string") return normalizeStudioFileChangePath(record.path);
+  if (typeof record.filePath === "string") return normalizeStudioFileChangePath(record.filePath);
+  if ("data" in record) return readStudioFileChangePathFromValue(record.data);
+  return null;
+}
+
+export function readStudioFileChangePath(payload: unknown): string | null {
+  return readStudioFileChangePathFromValue(payload);
+}
+
+export function isStudioManualEditManifestPath(path: string | null): boolean {
+  if (!path) return false;
+  const normalized = normalizeStudioFileChangePath(path);
+  return (
+    normalized === STUDIO_MANUAL_EDITS_PATH || normalized.endsWith(`/${STUDIO_MANUAL_EDITS_PATH}`)
+  );
+}
+
+/* ── Target / upsert helpers ──────────────────────────────────────── */
+function selectionTarget(selection: DomEditSelection): StudioManualEditTarget {
+  return {
+    sourceFile: selection.sourceFile || "index.html",
+    selector: selection.selector,
+    selectorIndex: selection.selectorIndex,
+    id: selection.id ?? undefined,
+  };
+}
+
+function targetKey(target: StudioManualEditTarget): string {
+  return [
+    target.sourceFile,
+    target.id ?? "",
+    target.selector ?? "",
+    target.selectorIndex ?? "",
+  ].join("|");
+}
+
+export function roundRotationAngle(angle: number): number {
+  return Math.round(angle * 10) / 10;
+}
+
+export function upsertStudioPathOffsetEdit(
+  manifest: StudioManualEditManifest,
+  selection: DomEditSelection,
+  offset: { x: number; y: number },
+): StudioManualEditManifest {
+  const target = selectionTarget(selection);
+  const key = targetKey(target);
+  const nextEdit: StudioPathOffsetEdit = {
+    kind: "path-offset",
+    target,
+    x: Math.round(offset.x),
+    y: Math.round(offset.y),
+    updatedAt: new Date().toISOString(),
+  };
+
+  const edits = manifest.edits.filter(
+    (edit) => edit.kind !== "path-offset" || targetKey(edit.target) !== key,
+  );
+  edits.push(nextEdit);
+  return { version: 1, edits };
+}
+
+export function upsertStudioBoxSizeEdit(
+  manifest: StudioManualEditManifest,
+  selection: DomEditSelection,
+  size: { width: number; height: number },
+): StudioManualEditManifest {
+  const target = selectionTarget(selection);
+  const key = targetKey(target);
+  const nextEdit: StudioBoxSizeEdit = {
+    kind: "box-size",
+    target,
+    width: Math.round(Math.max(1, size.width)),
+    height: Math.round(Math.max(1, size.height)),
+    updatedAt: new Date().toISOString(),
+  };
+
+  const edits = manifest.edits.filter(
+    (edit) => edit.kind !== "box-size" || targetKey(edit.target) !== key,
+  );
+  edits.push(nextEdit);
+  return { version: 1, edits };
+}
+
+export function upsertStudioRotationEdit(
+  manifest: StudioManualEditManifest,
+  selection: DomEditSelection,
+  rotation: { angle: number },
+): StudioManualEditManifest {
+  const target = selectionTarget(selection);
+  const key = targetKey(target);
+  const nextEdit: StudioRotationEdit = {
+    kind: "rotation",
+    target,
+    angle: roundRotationAngle(rotation.angle),
+    updatedAt: new Date().toISOString(),
+  };
+
+  const edits = manifest.edits.filter(
+    (edit) => edit.kind !== "rotation" || targetKey(edit.target) !== key,
+  );
+  edits.push(nextEdit);
+  return { version: 1, edits };
+}
+
+export function removeStudioManualEditsForSelection(
+  manifest: StudioManualEditManifest,
+  selection: DomEditSelection,
+): StudioManualEditManifest {
+  const key = targetKey(selectionTarget(selection));
+  const edits = manifest.edits.filter((edit) => targetKey(edit.target) !== key);
+  if (edits.length === manifest.edits.length) return manifest;
+  return { version: 1, edits };
+}

package/src/components/editor/manualEditsSnapshot.ts

@@ -0,0 +1,333 @@
+import {
+  styleUsesStudioOffset,
+  styleUsesStudioSize,
+  styleUsesStudioRotation,
+  restoreInlineDisplay,
+} from "./manualEditsDom";
+import {
+  STUDIO_OFFSET_X_PROP,
+  STUDIO_OFFSET_Y_PROP,
+  STUDIO_WIDTH_PROP,
+  STUDIO_HEIGHT_PROP,
+  STUDIO_ROTATION_PROP,
+  STUDIO_PATH_OFFSET_ATTR,
+  STUDIO_MANUAL_EDIT_GESTURE_ATTR,
+  STUDIO_BOX_SIZE_ATTR,
+  STUDIO_ROTATION_ATTR,
+  STUDIO_ORIGINAL_TRANSLATE_ATTR,
+  STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
+  STUDIO_ORIGINAL_WIDTH_ATTR,
+  STUDIO_ORIGINAL_HEIGHT_ATTR,
+  STUDIO_ORIGINAL_MIN_WIDTH_ATTR,
+  STUDIO_ORIGINAL_MIN_HEIGHT_ATTR,
+  STUDIO_ORIGINAL_MAX_WIDTH_ATTR,
+  STUDIO_ORIGINAL_MAX_HEIGHT_ATTR,
+  STUDIO_ORIGINAL_FLEX_BASIS_ATTR,
+  STUDIO_ORIGINAL_FLEX_GROW_ATTR,
+  STUDIO_ORIGINAL_FLEX_SHRINK_ATTR,
+  STUDIO_ORIGINAL_BOX_SIZING_ATTR,
+  STUDIO_ORIGINAL_SCALE_ATTR,
+  STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR,
+  STUDIO_ORIGINAL_DISPLAY_ATTR,
+  STUDIO_ORIGINAL_ROTATE_ATTR,
+  STUDIO_ORIGINAL_INLINE_ROTATE_ATTR,
+  STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR,
+  STUDIO_ROTATION_DRAFT_ATTR,
+  STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR,
+} from "./manualEditsTypes";
+import type {
+  StudioBoxSizeSnapshot,
+  StudioRotationSnapshot,
+  StudioPathOffsetSnapshot,
+} from "./manualEditsTypes";
+
+/* ── Capture ──────────────────────────────────────────────────────── */
+export function captureStudioBoxSize(element: HTMLElement): StudioBoxSizeSnapshot {
+  return {
+    width: element.style.getPropertyValue("width"),
+    height: element.style.getPropertyValue("height"),
+    minWidth: element.style.getPropertyValue("min-width"),
+    minHeight: element.style.getPropertyValue("min-height"),
+    maxWidth: element.style.getPropertyValue("max-width"),
+    maxHeight: element.style.getPropertyValue("max-height"),
+    flexBasis: element.style.getPropertyValue("flex-basis"),
+    flexGrow: element.style.getPropertyValue("flex-grow"),
+    flexShrink: element.style.getPropertyValue("flex-shrink"),
+    boxSizing: element.style.getPropertyValue("box-sizing"),
+    scale: element.style.getPropertyValue("scale"),
+    transformOrigin: element.style.getPropertyValue("transform-origin"),
+    display: element.style.getPropertyValue("display"),
+    studioWidth: element.style.getPropertyValue(STUDIO_WIDTH_PROP),
+    studioHeight: element.style.getPropertyValue(STUDIO_HEIGHT_PROP),
+    marker: element.getAttribute(STUDIO_BOX_SIZE_ATTR),
+    originalWidth: element.getAttribute(STUDIO_ORIGINAL_WIDTH_ATTR),
+    originalHeight: element.getAttribute(STUDIO_ORIGINAL_HEIGHT_ATTR),
+    originalMinWidth: element.getAttribute(STUDIO_ORIGINAL_MIN_WIDTH_ATTR),
+    originalMinHeight: element.getAttribute(STUDIO_ORIGINAL_MIN_HEIGHT_ATTR),
+    originalMaxWidth: element.getAttribute(STUDIO_ORIGINAL_MAX_WIDTH_ATTR),
+    originalMaxHeight: element.getAttribute(STUDIO_ORIGINAL_MAX_HEIGHT_ATTR),
+    originalFlexBasis: element.getAttribute(STUDIO_ORIGINAL_FLEX_BASIS_ATTR),
+    originalFlexGrow: element.getAttribute(STUDIO_ORIGINAL_FLEX_GROW_ATTR),
+    originalFlexShrink: element.getAttribute(STUDIO_ORIGINAL_FLEX_SHRINK_ATTR),
+    originalBoxSizing: element.getAttribute(STUDIO_ORIGINAL_BOX_SIZING_ATTR),
+    originalScale: element.getAttribute(STUDIO_ORIGINAL_SCALE_ATTR),
+    originalTransformOrigin: element.getAttribute(STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR),
+    originalDisplay: element.getAttribute(STUDIO_ORIGINAL_DISPLAY_ATTR),
+  };
+}
+
+export function captureStudioRotation(element: HTMLElement): StudioRotationSnapshot {
+  return {
+    rotate: element.style.getPropertyValue("rotate"),
+    transformOrigin: element.style.getPropertyValue("transform-origin"),
+    studioRotation: element.style.getPropertyValue(STUDIO_ROTATION_PROP),
+    marker: element.getAttribute(STUDIO_ROTATION_ATTR),
+    draftMarker: element.getAttribute(STUDIO_ROTATION_DRAFT_ATTR),
+    originalRotate: element.getAttribute(STUDIO_ORIGINAL_ROTATE_ATTR),
+    originalInlineRotate: element.getAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR),
+    originalTransformOrigin: element.getAttribute(STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR),
+  };
+}
+
+export function captureStudioPathOffset(element: HTMLElement): StudioPathOffsetSnapshot {
+  return {
+    translate: element.style.getPropertyValue("translate"),
+    x: element.style.getPropertyValue(STUDIO_OFFSET_X_PROP),
+    y: element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP),
+    marker: element.getAttribute(STUDIO_PATH_OFFSET_ATTR),
+    originalTranslate: element.getAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR),
+    originalInlineTranslate: element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR),
+  };
+}
+
+/* ── Restore helpers ──────────────────────────────────────────────── */
+function restoreAttribute(element: HTMLElement, attribute: string, value: string | null): void {
+  if (value == null) element.removeAttribute(attribute);
+  else element.setAttribute(attribute, value);
+}
+
+function restoreStyleProperty(element: HTMLElement, property: string, value: string): void {
+  if (value) element.style.setProperty(property, value);
+  else element.style.removeProperty(property);
+}
+
+export function restoreStudioBoxSize(element: HTMLElement, previous: StudioBoxSizeSnapshot): void {
+  restoreStyleProperty(element, "width", previous.width);
+  restoreStyleProperty(element, "height", previous.height);
+  restoreStyleProperty(element, "min-width", previous.minWidth);
+  restoreStyleProperty(element, "min-height", previous.minHeight);
+  restoreStyleProperty(element, "max-width", previous.maxWidth);
+  restoreStyleProperty(element, "max-height", previous.maxHeight);
+  restoreStyleProperty(element, "flex-basis", previous.flexBasis);
+  restoreStyleProperty(element, "flex-grow", previous.flexGrow);
+  restoreStyleProperty(element, "flex-shrink", previous.flexShrink);
+  restoreStyleProperty(element, "box-sizing", previous.boxSizing);
+  restoreStyleProperty(element, "scale", previous.scale);
+  restoreStyleProperty(element, "transform-origin", previous.transformOrigin);
+  restoreStyleProperty(element, "display", previous.display);
+  restoreStyleProperty(element, STUDIO_WIDTH_PROP, previous.studioWidth);
+  restoreStyleProperty(element, STUDIO_HEIGHT_PROP, previous.studioHeight);
+  restoreAttribute(element, STUDIO_BOX_SIZE_ATTR, previous.marker);
+  restoreAttribute(element, STUDIO_ORIGINAL_WIDTH_ATTR, previous.originalWidth);
+  restoreAttribute(element, STUDIO_ORIGINAL_HEIGHT_ATTR, previous.originalHeight);
+  restoreAttribute(element, STUDIO_ORIGINAL_MIN_WIDTH_ATTR, previous.originalMinWidth);
+  restoreAttribute(element, STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, previous.originalMinHeight);
+  restoreAttribute(element, STUDIO_ORIGINAL_MAX_WIDTH_ATTR, previous.originalMaxWidth);
+  restoreAttribute(element, STUDIO_ORIGINAL_MAX_HEIGHT_ATTR, previous.originalMaxHeight);
+  restoreAttribute(element, STUDIO_ORIGINAL_FLEX_BASIS_ATTR, previous.originalFlexBasis);
+  restoreAttribute(element, STUDIO_ORIGINAL_FLEX_GROW_ATTR, previous.originalFlexGrow);
+  restoreAttribute(element, STUDIO_ORIGINAL_FLEX_SHRINK_ATTR, previous.originalFlexShrink);
+  restoreAttribute(element, STUDIO_ORIGINAL_BOX_SIZING_ATTR, previous.originalBoxSizing);
+  restoreAttribute(element, STUDIO_ORIGINAL_SCALE_ATTR, previous.originalScale);
+  restoreAttribute(
+    element,
+    STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR,
+    previous.originalTransformOrigin,
+  );
+  restoreAttribute(element, STUDIO_ORIGINAL_DISPLAY_ATTR, previous.originalDisplay);
+}
+
+export function restoreStudioRotation(
+  element: HTMLElement,
+  previous: StudioRotationSnapshot,
+): void {
+  restoreStyleProperty(element, "rotate", previous.rotate);
+  restoreStyleProperty(element, "transform-origin", previous.transformOrigin);
+  restoreStyleProperty(element, STUDIO_ROTATION_PROP, previous.studioRotation);
+  restoreAttribute(element, STUDIO_ROTATION_ATTR, previous.marker);
+  restoreAttribute(element, STUDIO_ROTATION_DRAFT_ATTR, previous.draftMarker);
+  restoreAttribute(element, STUDIO_ORIGINAL_ROTATE_ATTR, previous.originalRotate);
+  restoreAttribute(element, STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, previous.originalInlineRotate);
+  restoreAttribute(
+    element,
+    STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR,
+    previous.originalTransformOrigin,
+  );
+}
+
+export function restoreStudioPathOffset(
+  element: HTMLElement,
+  previous: StudioPathOffsetSnapshot,
+): void {
+  if (previous.translate) element.style.setProperty("translate", previous.translate);
+  else element.style.removeProperty("translate");
+
+  if (previous.x) element.style.setProperty(STUDIO_OFFSET_X_PROP, previous.x);
+  else element.style.removeProperty(STUDIO_OFFSET_X_PROP);
+
+  if (previous.y) element.style.setProperty(STUDIO_OFFSET_Y_PROP, previous.y);
+  else element.style.removeProperty(STUDIO_OFFSET_Y_PROP);
+
+  restoreAttribute(element, STUDIO_PATH_OFFSET_ATTR, previous.marker);
+  restoreAttribute(element, STUDIO_ORIGINAL_TRANSLATE_ATTR, previous.originalTranslate);
+  restoreAttribute(
+    element,
+    STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
+    previous.originalInlineTranslate,
+  );
+}
+
+/* ── DOM element collection ───────────────────────────────────────── */
+export function collectStudioManualEditElements(doc: Document): HTMLElement[] {
+  const htmlElement = doc.defaultView?.HTMLElement;
+  if (!htmlElement) return [];
+
+  const elements = [doc.documentElement, ...Array.from(doc.getElementsByTagName("*"))].filter(
+    (element): element is HTMLElement => element instanceof htmlElement,
+  );
+
+  return elements.filter(
+    (element) =>
+      element.hasAttribute(STUDIO_PATH_OFFSET_ATTR) ||
+      element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR) ||
+      element.hasAttribute(STUDIO_BOX_SIZE_ATTR) ||
+      element.hasAttribute(STUDIO_ROTATION_ATTR) ||
+      element.hasAttribute(STUDIO_ROTATION_DRAFT_ATTR) ||
+      element.hasAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR) ||
+      element.hasAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR) ||
+      element.hasAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR) ||
+      element.hasAttribute(STUDIO_ORIGINAL_MIN_WIDTH_ATTR) ||
+      element.hasAttribute(STUDIO_ORIGINAL_FLEX_BASIS_ATTR) ||
+      element.hasAttribute(STUDIO_ORIGINAL_SCALE_ATTR) ||
+      element.hasAttribute(STUDIO_ORIGINAL_ROTATE_ATTR) ||
+      element.hasAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR) ||
+      Boolean(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) ||
+      Boolean(element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)) ||
+      Boolean(element.style.getPropertyValue(STUDIO_WIDTH_PROP)) ||
+      Boolean(element.style.getPropertyValue(STUDIO_HEIGHT_PROP)) ||
+      Boolean(element.style.getPropertyValue(STUDIO_ROTATION_PROP)),
+  );
+}
+
+/* ── Clear functions ──────────────────────────────────────────────── */
+type BoxSizeProperty =
+  | "width"
+  | "height"
+  | "min-width"
+  | "min-height"
+  | "max-width"
+  | "max-height"
+  | "flex-basis"
+  | "flex-grow"
+  | "flex-shrink"
+  | "box-sizing"
+  | "scale"
+  | "transform-origin"
+  | "display";
+
+function restoreOriginalBoxSizeProperty(
+  element: HTMLElement,
+  property: BoxSizeProperty,
+  attribute: string,
+): void {
+  const original = element.getAttribute(attribute);
+  if (original == null || original === "") element.style.removeProperty(property);
+  else element.style.setProperty(property, original);
+  element.removeAttribute(attribute);
+}
+
+function restoreOriginalRotationProperty(element: HTMLElement): void {
+  const original = element.getAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
+  if (original == null || original === "") element.style.removeProperty("rotate");
+  else element.style.setProperty("rotate", original);
+  element.removeAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
+  element.removeAttribute(STUDIO_ORIGINAL_ROTATE_ATTR);
+  const originalTransformOrigin = element.getAttribute(
+    STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR,
+  );
+  if (originalTransformOrigin != null) {
+    if (originalTransformOrigin === "") element.style.removeProperty("transform-origin");
+    else element.style.setProperty("transform-origin", originalTransformOrigin);
+  }
+  element.removeAttribute(STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR);
+}
+
+function restoreOriginalTranslateProperty(element: HTMLElement): void {
+  const original = element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
+  if (original == null || original === "") element.style.removeProperty("translate");
+  else element.style.setProperty("translate", original);
+  element.removeAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
+  element.removeAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR);
+}
+
+export function clearStudioPathOffset(element: HTMLElement): void {
+  if (
+    element.hasAttribute(STUDIO_PATH_OFFSET_ATTR) ||
+    styleUsesStudioOffset(element.style.getPropertyValue("translate"))
+  ) {
+    restoreOriginalTranslateProperty(element);
+  }
+  restoreInlineDisplay(element);
+  element.style.removeProperty(STUDIO_OFFSET_X_PROP);
+  element.style.removeProperty(STUDIO_OFFSET_Y_PROP);
+  element.removeAttribute(STUDIO_PATH_OFFSET_ATTR);
+  element.removeAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR);
+  element.removeAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
+}
+
+export function clearStudioRotation(element: HTMLElement): void {
+  if (
+    element.hasAttribute(STUDIO_ROTATION_ATTR) ||
+    styleUsesStudioRotation(element.style.getPropertyValue("rotate"))
+  ) {
+    restoreOriginalRotationProperty(element);
+  }
+  restoreInlineDisplay(element);
+  element.style.removeProperty(STUDIO_ROTATION_PROP);
+  element.removeAttribute(STUDIO_ROTATION_ATTR);
+  element.removeAttribute(STUDIO_ROTATION_DRAFT_ATTR);
+  element.removeAttribute(STUDIO_ORIGINAL_ROTATE_ATTR);
+  element.removeAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
+  element.removeAttribute(STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR);
+}
+
+export function clearStudioBoxSize(element: HTMLElement): void {
+  if (
+    element.hasAttribute(STUDIO_BOX_SIZE_ATTR) ||
+    styleUsesStudioSize(element.style.getPropertyValue("width")) ||
+    styleUsesStudioSize(element.style.getPropertyValue("height")) ||
+    element.hasAttribute(STUDIO_ORIGINAL_SCALE_ATTR)
+  ) {
+    restoreOriginalBoxSizeProperty(element, "width", STUDIO_ORIGINAL_WIDTH_ATTR);
+    restoreOriginalBoxSizeProperty(element, "height", STUDIO_ORIGINAL_HEIGHT_ATTR);
+    restoreOriginalBoxSizeProperty(element, "min-width", STUDIO_ORIGINAL_MIN_WIDTH_ATTR);
+    restoreOriginalBoxSizeProperty(element, "min-height", STUDIO_ORIGINAL_MIN_HEIGHT_ATTR);
+    restoreOriginalBoxSizeProperty(element, "max-width", STUDIO_ORIGINAL_MAX_WIDTH_ATTR);
+    restoreOriginalBoxSizeProperty(element, "max-height", STUDIO_ORIGINAL_MAX_HEIGHT_ATTR);
+    restoreOriginalBoxSizeProperty(element, "flex-basis", STUDIO_ORIGINAL_FLEX_BASIS_ATTR);
+    restoreOriginalBoxSizeProperty(element, "flex-grow", STUDIO_ORIGINAL_FLEX_GROW_ATTR);
+    restoreOriginalBoxSizeProperty(element, "flex-shrink", STUDIO_ORIGINAL_FLEX_SHRINK_ATTR);
+    restoreOriginalBoxSizeProperty(element, "box-sizing", STUDIO_ORIGINAL_BOX_SIZING_ATTR);
+    restoreOriginalBoxSizeProperty(element, "scale", STUDIO_ORIGINAL_SCALE_ATTR);
+    restoreOriginalBoxSizeProperty(
+      element,
+      "transform-origin",
+      STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR,
+    );
+    restoreOriginalBoxSizeProperty(element, "display", STUDIO_ORIGINAL_DISPLAY_ATTR);
+  }
+  restoreInlineDisplay(element);
+  element.style.removeProperty(STUDIO_WIDTH_PROP);
+  element.style.removeProperty(STUDIO_HEIGHT_PROP);
+  element.removeAttribute(STUDIO_BOX_SIZE_ATTR);
+}