Skip to content

feat(studio): add manual DOM editing inspector#466

Open
miguel-heygen wants to merge 15 commits intomainfrom
feat/studio-manual-dom-editing-v1
Open

feat(studio): add manual DOM editing inspector#466
miguel-heygen wants to merge 15 commits intomainfrom
feat/studio-manual-dom-editing-v1

Conversation

@miguel-heygen
Copy link
Copy Markdown
Collaborator

Summary

  • add a direct-manipulation DOM editing inspector to Studio with preview overlays, safer capability gating, and source patch persistence
  • add fill/color/gradient editing, text editing, inspector UX cleanup, and numeric scrub controls for layout fields
  • document the manual DOM editing flow and include the supporting parser/patcher/test coverage updates

Testing

  • bun test packages/studio/src/components/editor/colorValue.test.ts packages/studio/src/components/editor/domEditing.test.ts packages/studio/src/components/editor/gradientValue.test.ts packages/studio/src/player/components/Timeline.test.ts packages/studio/src/utils/sourcePatcher.test.ts
  • bunx oxfmt --check packages/studio/src/App.tsx packages/studio/src/components/editor/DomEditOverlay.tsx packages/studio/src/components/editor/PropertyPanel.tsx packages/studio/src/components/editor/colorValue.ts packages/studio/src/components/editor/colorValue.test.ts packages/studio/src/components/editor/domEditing.ts packages/studio/src/components/editor/domEditing.test.ts packages/studio/src/components/editor/gradientValue.ts packages/studio/src/components/editor/gradientValue.test.ts packages/studio/src/components/nle/NLELayout.tsx packages/studio/src/components/nle/NLEPreview.tsx packages/studio/src/components/sidebar/LeftSidebar.tsx packages/studio/src/player/components/Player.tsx packages/studio/src/player/components/Timeline.test.ts packages/studio/src/player/components/Timeline.tsx packages/studio/src/player/components/TimelineClip.tsx packages/studio/src/player/hooks/useTimelinePlayer.ts packages/studio/src/utils/sourcePatcher.ts packages/studio/src/utils/sourcePatcher.test.ts
  • bunx oxlint packages/studio/src/App.tsx packages/studio/src/components/editor/DomEditOverlay.tsx packages/studio/src/components/editor/PropertyPanel.tsx packages/studio/src/components/editor/colorValue.ts packages/studio/src/components/editor/colorValue.test.ts packages/studio/src/components/editor/domEditing.ts packages/studio/src/components/editor/domEditing.test.ts packages/studio/src/components/editor/gradientValue.ts packages/studio/src/components/editor/gradientValue.test.ts packages/studio/src/components/nle/NLELayout.tsx packages/studio/src/components/nle/NLEPreview.tsx packages/studio/src/components/sidebar/LeftSidebar.tsx packages/studio/src/player/components/Player.tsx packages/studio/src/player/components/Timeline.test.ts packages/studio/src/player/components/Timeline.tsx packages/studio/src/player/components/TimelineClip.tsx packages/studio/src/player/hooks/useTimelinePlayer.ts packages/studio/src/utils/sourcePatcher.ts packages/studio/src/utils/sourcePatcher.test.ts

Browser verification

  • verified the Studio inspector flow locally at http://localhost:5193/#project/dom-edit-playground
  • confirmed overlay clears when Inspector closes and when clicking empty preview space
  • confirmed numeric layout fields support arrow-key and wheel scrubbing
  • saved a local screenshot artifact at /tmp/dom-edit-pr-artifacts/manual-dom-editing-inspector.png

@mintlify
Copy link
Copy Markdown

mintlify Bot commented Apr 24, 2026

Preview deployment for your docs. Learn more about Mintlify Previews.

Project Status Preview Updated (UTC)
hyperframes 🟢 Ready View Preview Apr 24, 2026, 12:13 AM

💡 Tip: Enable Workflows to automatically generate PRs for you.

Comment thread packages/studio/src/components/editor/PropertyPanel.tsx Fixed

function parseColorStop(raw: string): { color: string; position: number | null } {
const trimmed = raw.trim();
const match = trimmed.match(/^(.*?)(?:\s+(-?\d+(?:\.\d+)?)%)?$/);
function parseLinearArgs(parts: string[]): GradientModel {
const first = parts[0] ?? "";
const angleFromDirection = directionToAngle(first);
const firstIsAngle = /-?\d+(?:\.\d+)?deg$/i.test(first);

function extractBackgroundImageUrl(value: string | undefined): string {
if (!value) return "";
const match = value.match(/url\((['"]?)(.*?)\1\)/i);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants