feat(core): editor shortcuts and inspector polish

[ridemountainpig]

Summary

• Add I / D shortcuts to toggle the inspector and design panel, matching the F-for-present convention; keycap hints added to both toggle buttons.

• Split the inspector overlay into selected + hover frames so the selection stays framed while a dashed frame follows the cursor; re-resolve the selected anchor across DOM mutations and clear it on page change.

  CleanShot.2026-05-21.at.23.22.25.1.mp4

• Add a crosshair icon to the inspector panel header and only render the separator below content when there's editable text (drops the stray hairline).

• Prevent the save bar's unsaved/saved label from wrapping onto two lines.

Test plan

• pnpm dev in apps/demo, toggle inspector with I and design panel with D; confirm shortcuts don't fire while typing in an input/textarea.
• In inspect mode, select an element, then hover other elements — verify selected frame stays solid while a dashed frame follows hover, and the dashed frame disappears when hovering the selected element.
• Switch slides while a selection is active and confirm the selection clears.
• Make an edit that re-renders the selected node (e.g. typography change) and confirm the frame re-anchors instead of disappearing.
• Narrow the viewport / resize the save card and confirm the unsaved/saved label stays on a single line.
• Open the inspector panel for an element with no text content and confirm there's no stray separator under the header.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added keyboard shortcuts (I for inspector, D for design panel).
  • Added visual hover frame display alongside selected element in inspector.

• Improvements

  • Added keyboard shortcut hints in inspector and design panel headers.
  • Enhanced inspector header with new icon and improved layout.
  • Refined save bar styling for better visual clarity and text handling.

[vercel]

@ridemountainpig is attempting to deploy a commit to the Yiwei Ho Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5703920d-2b38-403d-814b-2d20b55e56c6

📥 Commits

Reviewing files that changed from the base of the PR and between e2a60dd and 278d28a.

📒 Files selected for processing (1)

• .changeset/editor-shortcuts-and-fixes.md

✅ Files skipped from review due to trivial changes (1)

• .changeset/editor-shortcuts-and-fixes.md

---

Walkthrough

Adds I/D editor shortcuts, makes the Inspector page-aware and resilient to DOM mutations, refactors the overlay to render separate selected/hover frames with variant styling, and polishes inspector header, separator behavior, save-card layout, and shortcut hint UI.

Changes

Editor Keyboard Shortcuts and Inspector Refinements

Layer / File(s)	Summary
Inspector provider state and keyboard shortcuts packages/core/src/app/components/inspector/inspector-provider.tsx, packages/core/src/app/routes/slide.tsx	InspectorProvider accepts pageIndex, resets selected on page changes, revalidates disconnected anchors via MutationObserver, adds a DEV-only I key toggle, slide route passes pageIndex and adds DEV D toggle for design, and toggle buttons show kbd hints.
Inspector overlay dual-frame refactoring packages/core/src/app/components/inspector/inspect-overlay.tsx	InspectOverlay renders independent Frame instances for selected and hover anchors (deduped). Frame measures anchor rect, observes resize, computes visibility from hasTarget && rect, and applies variant-specific FRAME_STYLES; returns null when no rect.
Inspector panel UI improvements packages/core/src/app/components/inspector/inspector-panel.tsx	Adds Crosshair icon in header and makes the content Separator conditional on text presence.
Save card label wrapping fix packages/core/src/app/components/panel/save-card.tsx	Adds whitespace-nowrap to label spans and shrink-0 to icons/dot to prevent wrapping and keep layout stable.
Changeset documentation .changeset/editor-shortcuts-and-fixes.md	Bumps @open-slide/core minor and documents editor shortcut additions, overlay/frame refinements, and UI polish.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• 1weiho/open-slide#103: Touches inspect-overlay.tsx and inspector target hit-testing; related to overlay-area changes.
• 1weiho/open-slide#99: Similar save-label/whitespace adjustments in UI components.

Suggested reviewers

• 1weiho

Poem

A rabbit taps the editor keys,
I and D, like playful breeze,
Two frames now dance — one bold, one slight,
Icons gleam and labels bite,
Hoppy shortcuts, neat delight. 🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: adding keyboard shortcuts (I/D) for the inspector and design panel, and polishing the inspector UI with visual improvements like the dual-frame overlay and crosshair icon.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.changeset/editor-shortcuts-and-fixes.md:
- Around line 5-9: Replace the multi-line bullet list in the changeset body with
a single present-tense user-facing sentence; use this concise one-line
description: "Add I and D keyboard shortcuts to toggle the inspector and design
panel, keep the inspector selection framed while showing a dashed hover frame
for hovered elements, prevent the save bar label from wrapping, add an icon to
the inspector panel title, and remove the stray hairline under the inspector
header when the selected element has no editable text."

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8307c030-547e-4731-a719-839188a35f3e

📥 Commits

Reviewing files that changed from the base of the PR and between a8c702b and e2a60dd.

📒 Files selected for processing (7)

• .changeset/editor-shortcuts-and-fixes.md
• packages/core/src/app/components/inspector/inspect-overlay.tsx
• packages/core/src/app/components/inspector/inspector-panel.tsx
• packages/core/src/app/components/inspector/inspector-provider.tsx
• packages/core/src/app/components/panel/save-card.tsx
• packages/core/src/app/components/style-panel/style-panel.tsx
• packages/core/src/app/routes/slide.tsx

[1weiho]

@ridemountainpig hey Yen!
Really nice change, LGTM, thanks!