Skip to content

feat(core): warn on shared-image edits and add split-shared-images skill#236

Open
ridemountainpig wants to merge 2 commits into
1weiho:mainfrom
ridemountainpig:feat/shared-image-guardrails
Open

feat(core): warn on shared-image edits and add split-shared-images skill#236
ridemountainpig wants to merge 2 commits into
1weiho:mainfrom
ridemountainpig:feat/shared-image-guardrails

Conversation

@ridemountainpig

@ridemountainpig ridemountainpig commented Jun 14, 2026

Copy link
Copy Markdown
Contributor

What

  • Inspector guardrail: warn in the replace/crop dialogs when an image is rendered from a shared component or map body, so users know edits affect every instance.
  • New split-shared-images skill: refactors slides where one <img> is reused across multiple call sites so each image can be edited independently.
  • slide-authoring skill update: guidance to keep each <img> at its own call site (pass the image as children rather than a src prop) so the inspector can replace one at a time.

Close #213.

Dia 2026-06-14 22 00 47 Dia 2026-06-14 22 00 51

Notes

  • Adds locale strings (en / ja / zh-cn / zh-tw) for the new shared-image notice.
  • Includes a changeset (patch for @open-slide/core and @open-slide/cli).

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Inspector now warns when replacing or cropping an image that’s shared across multiple slide locations (including map-rendered cases).
    • Added a “split-shared-images” skill to help refactor slides so each rendered image can be edited independently.
  • Documentation

    • Updated slide-authoring guidance to keep per-image JSX at the call site (not inside shared components).
    • Added the new split-shared-images authoring/refactoring guide and guidance on when to use it.
  • Localization

    • Added shared-image warning/hint text across supported languages.

Warn in the inspector's replace/crop dialogs when an image is rendered
from a shared component or map body, add a split-shared-images skill to
refactor those slides, and update the slide-authoring skill to keep each
<img> at its own call site.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 14, 2026

Copy link
Copy Markdown

@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

coderabbitai Bot commented Jun 14, 2026

Copy link
Copy Markdown

Review Change Stack

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: a954d8f9-5775-4d6e-9da6-9f05fc36c30d

📥 Commits

Reviewing files that changed from the base of the PR and between 911010a and 4445f58.

📒 Files selected for processing (5)
  • .changeset/shared-image-guardrails.md
  • packages/cli/template/.agents/skills/split-shared-images/SKILL.md
  • packages/core/skills/split-shared-images/SKILL.md
  • packages/core/src/app/components/inspector/shared-image-notice.tsx
  • packages/core/src/vite/routes/edit.ts
✅ Files skipped from review due to trivial changes (3)
  • .changeset/shared-image-guardrails.md
  • packages/core/skills/split-shared-images/SKILL.md
  • packages/cli/template/.agents/skills/split-shared-images/SKILL.md
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/core/src/app/components/inspector/shared-image-notice.tsx
  • packages/core/src/vite/routes/edit.ts

Walkthrough

Adds guardrails for shared-image editing in the inspector. A new probeElementSharing AST function detects when multiple slides render the same <img> from a shared source location, exposed via a new GET /__edit/element-info Vite endpoint. The inspector's replace and crop dialogs now fetch this sharing data and display a SharedImageNotice warning. A new split-shared-images skill documents the corresponding refactoring pattern.

Changes

Shared Image Guardrails

Layer / File(s) Summary
probeElementSharing AST analysis and tests
packages/core/src/editing/edit-ops.ts, packages/core/src/editing/edit-ops.test.ts
Exports ElementSharing type, countDefaultExportArrayRefs helper, and probeElementSharing function that parses slide source, locates the innermost JSX element at a given line/column, computes instances by walking default-export array refs and JSX usages, and sets viaMap if inside a .map/.flatMap callback. Tests cover all detection scenarios and null return.
GET /__edit/element-info Vite route
packages/core/src/vite/routes/edit.ts
New middleware branch in registerEditRoutes validates slideId, line, and column query params, reads the slide file from disk, calls probeElementSharing, and returns structured JSON with 200/400/404/422/500 status codes.
Client fetch hook, SharedImageNotice component, and locale strings
packages/core/src/app/lib/inspector/use-editor.ts, packages/core/src/app/components/inspector/shared-image-notice.tsx, packages/core/src/locale/types.ts, packages/core/src/locale/en.ts, packages/core/src/locale/ja.ts, packages/core/src/locale/zh-cn.ts, packages/core/src/locale/zh-tw.ts
Adds fetchElementSharing useCallback to useEditor that queries the new endpoint with best-effort null-on-failure semantics. Introduces SharedNotice type and SharedImageNotice component rendering a locale-formatted warning with the /split-shared-images skill hint. Extends Locale type and all five locale files with three new inspector string keys.
Inspector provider sharing state and dialog prop wiring
packages/core/src/app/components/inspector/inspector-provider.tsx, packages/core/src/app/components/inspector/asset-picker-dialog.tsx, packages/core/src/app/components/inspector/image-crop-dialog.tsx
InspectorProvider adds sharing state, probeSharing async callback, and sharingFor helper; openReplace and openCrop each trigger probeSharing. AssetPickerDialog and ImageCropDialog each receive a new sharedNotice prop and render SharedImageNotice in their dialog headers.
split-shared-images skill docs, slide-authoring updates, symlinks, and changeset
packages/core/skills/split-shared-images/SKILL.md, packages/core/skills/slide-authoring/SKILL.md, packages/cli/template/.agents/skills/split-shared-images/SKILL.md, packages/cli/template/.agents/skills/slide-authoring/SKILL.md, packages/cli/template/AGENTS.md, apps/demo/.agents/..., apps/demo/.claude/..., packages/cli/template/.claude/..., .changeset/shared-image-guardrails.md
Adds new split-shared-images/SKILL.md in both core and CLI template locations describing detection patterns and the children-based refactor. Updates slide-authoring/SKILL.md with a children-based Card example, new checklist rules, and anti-pattern bullets. Adds symlinks in demo and CLI template .claude directories and records the patch-version changeset.

Sequence Diagram

sequenceDiagram
    participant User as User
    participant Inspector as InspectorProvider
    participant useEditor as useEditor
    participant Vite as GET /__edit/element-info
    participant Probe as probeElementSharing
    participant Dialog as AssetPickerDialog / ImageCropDialog
    participant Notice as SharedImageNotice

    User->>Inspector: Click Replace or Crop on an image
    Inspector->>useEditor: fetchElementSharing(slideId, line, col)
    useEditor->>Vite: GET ?slideId=&line=&col=
    Vite->>Probe: probeElementSharing(source, line, col)
    Probe-->>Vite: {instances: N, viaMap: bool} | null
    Vite-->>useEditor: 200 JSON / 422 no element
    useEditor-->>Inspector: ElementSharing | null
    Inspector->>Inspector: update sharing state via probeSharing
    Inspector->>Dialog: sharedNotice = sharingFor(target)
    Dialog->>Notice: render with notice={instances, viaMap}
    Notice-->>User: Warning message + split-shared-images skill hint
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • 1weiho/open-slide#148: Both PRs modify the inspector image replace/crop flow, specifically InspectorProvider's openReplace/dialog wiring and the AssetPickerDialog API — this PR's shared-image notice probing is layered on top of the same replace UI mechanism.
  • 1weiho/open-slide#135: Both PRs extend registerEditRoutes in packages/core/src/vite/routes/edit.ts; the earlier PR refactored the routing structure that this PR's new GET /__edit/element-info handler is added into.
  • 1weiho/open-slide#181: Both PRs modify the CLI template's slide-authoring skill documentation (packages/cli/template/.agents/skills/slide-authoring/SKILL.md) as part of updating scaffolded skills, though this PR also adds new shared-image inspector behavior and the split-shared-images skill.

Poem

🐇 Hop hop! A shared image makes me fret,
When one crop changes all — that's a net!
Now the inspector spies, "This <img> is shared!"
A warning appears, so authors are prepared.
Split those call sites, put <img> in each place,
And every card crops with its very own face! 🖼️

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 20.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 clearly and concisely summarizes the main changes: adding a warning feature for shared-image edits in the inspector and introducing a new refactoring skill to resolve the issue.
Linked Issues check ✅ Passed The PR implements the warning/blocking approach specified in issue #213 by detecting shared images and displaying warnings in replace/crop dialogs, plus adds the split-shared-images skill for automated refactoring as suggested.
Out of Scope Changes check ✅ Passed All changes directly support the PR objectives: inspector warnings, new skill documentation, locale strings, backend element-sharing detection, and related component updates. No unrelated changes detected.

✏️ 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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
.changeset/shared-image-guardrails.md (1)

6-6: 💤 Low value

Trim the changeset summary.

This line is more detailed than the repo’s changeset rule allows. Keep it as a short, direct, one-line user-facing summary; the warning/split-skill details belong in the PR body, not the changeset. As per coding guidelines, “Changeset descriptions must be short and direct: one line, present-tense, describing what changed from a user's perspective.”

🤖 Prompt for 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.

In @.changeset/shared-image-guardrails.md at line 6, The changeset summary in
the shared-image-guardrails.md file is too detailed and violates the
repository's changeset guidelines. Replace the current multi-part technical
description with a single, short, one-line present-tense summary that describes
what changed from a user's perspective only. Remove all implementation details
like the specific skill names and technical refactoring information—those
details belong in the PR body, not in the changeset file.

Source: Coding guidelines

🤖 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 `@packages/core/skills/split-shared-images/SKILL.md`:
- Around line 18-19: The skill documentation at
packages/core/skills/split-shared-images/SKILL.md (lines 18-19) and
packages/cli/template/.agents/skills/split-shared-images/SKILL.md (lines 18-19)
includes both `<img>` and `<video>` in the trigger pattern list, but the rest of
the guide only describes image-specific refactoring without video-specific
guidance. Remove `<video>` references from the pattern list at both locations
(in both the core SKILL.md and template SKILL.md files) to keep the skill
documentation focused on images only and aligned with the actual inspector
behavior and refactoring steps documented.

In `@packages/core/src/app/components/inspector/shared-image-notice.tsx`:
- Around line 9-12: The message selection logic in the variable assignment is
using the wrong condition to determine which warning text to display. Replace
the condition `notice.instances > 1` with `notice.viaMap` as the discriminator
to properly select the map-specific warning text, while still retaining the use
of `notice.instances` for count formatting in the format function call when
appropriate.

In `@packages/core/src/vite/routes/edit.ts`:
- Around line 34-47: The column parameter is being coerced to 0 for invalid
values instead of being validated and rejected. Add validation for the columnRaw
variable after line 34, similar to the existing line validation, to check that
columnRaw is a finite number and greater than or equal to 0. If validation
fails, return a json error response with status 400 and an appropriate error
message. Then update line 46 where probeElementSharing is called to use the
validated columnRaw directly instead of the ternary operator that defaults
invalid values to 0.

---

Nitpick comments:
In @.changeset/shared-image-guardrails.md:
- Line 6: The changeset summary in the shared-image-guardrails.md file is too
detailed and violates the repository's changeset guidelines. Replace the current
multi-part technical description with a single, short, one-line present-tense
summary that describes what changed from a user's perspective only. Remove all
implementation details like the specific skill names and technical refactoring
information—those details belong in the PR body, not in the changeset file.
🪄 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: 4cfcad29-f4b7-48b3-ab62-62c5b1855d92

📥 Commits

Reviewing files that changed from the base of the PR and between 0128ba4 and 911010a.

📒 Files selected for processing (22)
  • .changeset/shared-image-guardrails.md
  • apps/demo/.agents/skills/split-shared-images
  • apps/demo/.claude/skills/split-shared-images
  • packages/cli/template/.agents/skills/slide-authoring/SKILL.md
  • packages/cli/template/.agents/skills/split-shared-images/SKILL.md
  • packages/cli/template/.claude/skills/split-shared-images
  • packages/cli/template/AGENTS.md
  • packages/core/skills/slide-authoring/SKILL.md
  • packages/core/skills/split-shared-images/SKILL.md
  • packages/core/src/app/components/inspector/asset-picker-dialog.tsx
  • packages/core/src/app/components/inspector/image-crop-dialog.tsx
  • packages/core/src/app/components/inspector/inspector-provider.tsx
  • packages/core/src/app/components/inspector/shared-image-notice.tsx
  • packages/core/src/app/lib/inspector/use-editor.ts
  • packages/core/src/editing/edit-ops.test.ts
  • packages/core/src/editing/edit-ops.ts
  • packages/core/src/locale/en.ts
  • packages/core/src/locale/ja.ts
  • packages/core/src/locale/types.ts
  • packages/core/src/locale/zh-cn.ts
  • packages/core/src/locale/zh-tw.ts
  • packages/core/src/vite/routes/edit.ts

Comment thread packages/core/skills/split-shared-images/SKILL.md Outdated
Comment thread packages/core/src/app/components/inspector/shared-image-notice.tsx Outdated
Comment thread packages/core/src/vite/routes/edit.ts Outdated
- Reject invalid `column` query param in /element-info instead of coercing to 0
- Use `viaMap` (not instance count) to pick the map-specific warning text
- Drop `<video>` from the split-shared-images trigger list (image-only skill)
- Trim the changeset summary to one user-facing line

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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.

Inspector image crop writes shared component styles to all instances

1 participant