feat(code-diff): add interactive playground example

[viktorSoftDev]

Closes #4133

Summary by CodeRabbit

• New Features

  • Added a new interactive code diff playground example to switch between unified and split layouts, toggle line wrapping, and preview changes live with customizable code samples.

• Refactor

  • Improved code diff layout typing by introducing a shared CodeDiffLayout type and updating component/example props and selections to use it.

• Style

  • Enhanced the interactive example layout responsiveness and editor sizing behavior for better viewing on different screen widths.

• Documentation

  • Updated component JSDoc to include an additional example reference.

Adds an interactive playground to the top of the limel-code-diff examples page: two editable limel-code-editor boxes feeding a live limel-code-diff, with controls for unified/split layout and lineWrapping. Also extracts the layout prop's inline union into a named, public CodeDiffLayout type.

Review:

• Commits are atomic
• Commits have the correct type for the changes made
• Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• Chrome
• Edge
• Firefox

Linux:

• Chrome
• Firefox

macOS:

• Chrome
• Firefox
• Safari

Mobile:

• Chrome on Android
• iOS

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: eeb215dc-01d3-404e-8d98-ee9f4b9c455f

📥 Commits

Reviewing files that changed from the base of the PR and between 5389918 and f359b96.

⛔ Files ignored due to path filters (1)

• etc/lime-elements.api.md is excluded by !etc/lime-elements.api.md

📒 Files selected for processing (6)

• src/components/code-diff/code-diff.tsx
• src/components/code-diff/code-diff.types.ts
• src/components/code-diff/examples/code-diff-interactive.scss
• src/components/code-diff/examples/code-diff-interactive.tsx
• src/components/code-diff/examples/code-diff-line-wrap.tsx
• src/interface.ts

---

📝 Walkthrough

Walkthrough

Extracts CodeDiffLayout into a named public type, re-exports it, updates the existing line-wrap example to use it, and adds an interactive code-diff playground with live editors, layout controls, and responsive styling.

Changes

CodeDiffLayout type and interactive playground

Layer / File(s)	Summary
CodeDiffLayout type definition and public export src/components/code-diff/code-diff.types.ts, src/interface.ts, src/components/code-diff/code-diff.tsx	CodeDiffLayout is defined, exported, re-exported from the barrel, and used for CodeDiff.layout; the component JSDoc examples list also includes the new interactive example.
Update code-diff-line-wrap example to use CodeDiffLayout src/components/code-diff/examples/code-diff-line-wrap.tsx	The line-wrap example imports CodeDiffLayout and retypes its layout options, state, and layout-change handler to use it.
New interactive playground example component src/components/code-diff/examples/code-diff-interactive.tsx, src/components/code-diff/examples/code-diff-interactive.scss	Adds CodeDiffInteractiveExample with two editors, layout and line-wrapping controls, live diff rendering, and flex-based responsive styles.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Lundalogik/lime-elements#3949: Adjusts the same CodeDiff.layout type and public export path that this PR builds on.

Suggested labels

docs, released

Suggested reviewers

• adrianschmidt
• john-traas

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly reflects the main change: adding an interactive code-diff playground example.
Linked Issues check	✅ Passed	The PR adds the interactive code-diff playground, layout and line-wrapping controls, and the public CodeDiffLayout type requested by #4133.
Out of Scope Changes check	✅ Passed	The changes stay focused on the code-diff playground and related type/export updates, with no obvious unrelated additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/4133-code-diff-interactive-example

---

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.}

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-4134/

[Copilot]

Pull request overview

Adds a new interactive playground example for limel-code-diff and improves type-safety by extracting the layout prop’s literal union into a named public type (CodeDiffLayout) that’s exported for consumers.

Changes:

• Added limel-example-code-diff-interactive (two editable limel-code-editors + live limel-code-diff + layout/lineWrapping controls) and registered it as the first example on the docs page via @exampleComponent.
• Introduced and exported a public CodeDiffLayout type and updated usages (component prop typing + examples).
• Updated the API report to reflect the new public type and updated prop typing.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/interface.ts	Exports CodeDiffLayout publicly from the package entrypoint.
src/components/code-diff/examples/code-diff-line-wrap.tsx	Reuses the new CodeDiffLayout type for stronger typing in the example controls.
src/components/code-diff/examples/code-diff-interactive.tsx	New interactive playground example wiring two editors to a live diff + controls.
src/components/code-diff/examples/code-diff-interactive.scss	Styling for the interactive playground layout (responsive editor layout + sizing).
src/components/code-diff/code-diff.types.ts	Adds the new public CodeDiffLayout type.
src/components/code-diff/code-diff.tsx	Uses CodeDiffLayout for the layout prop and registers the new interactive example first.
etc/lime-elements.api.md	Updates the public API surface to include CodeDiffLayout and the updated prop type.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[adrianschmidt]

6-Agent Review — READY TO MERGE ✅

Purely additive: a new interactive playground example for limel-code-diff, plus a non-breaking extraction of the layout union into a named, public CodeDiffLayout type. Strictly better than main — no regressions in any of the seven dimensions, no [High]/[Critical] findings. Only a couple of optional [Low] notes.

Verdicts

Dimension	Verdict
Backward Compatibility	SAFE
Code Quality	GOOD
Architecture	SAFE
Security	SAFE
Observability	SAFE
Performance	GOOD
Lime Platform Issues	SAFE
Merge Readiness	READY TO MERGE

What was checked

• Backward compatibility — CodeDiffLayout resolves to the byte-identical union, so layout: 'unified' | 'split' and layout: CodeDiffLayout are interchangeable for consumers. No duplicate-export collision, additive-only .api.md delta, unique example tag.
• Code quality — Prop/event APIs verified against the real components (oldValue/newValue are real props; limel-code-editor emits change: EventEmitter<string>). Extraction is complete — no inline unions remain anywhere.
• Architecture — code-diff.types.ts matches the established *.types.ts pattern and correctly stays distinct from the pre-existing internal code-diff/types.ts. Idiomatic one-way data flow, composition-only coupling.
• Security — Traced the only user-input path (typed values → limel-code-diff): no HTML-injection sinks, user text renders as escaped JSX text nodes, search term is regex-escaped, no secrets in the sample data.
• Observability — The handlers' event.stopPropagation() is the correct Stencil pattern (mirrors the sibling example); nothing is swallowed.
• Performance — Live re-diff per keystroke is the pre-existing, intended reactive contract of limel-code-diff on tiny payloads; the PR adds no new code paths into the core component. Handlers are class-field-bound, constants are module-level.
• Lime platform (lime-issue-detector catalog) — No LPID findings; state handling is correct, no I/O / timers / XSS sinks.

Optional [Low] notes (non-blocking)

1. Stability tag — CodeDiffLayout is @public while limel-code-diff itself is @beta (sibling chart.types uses @beta). This is the PR's stated intent — just flagging that it commits the type to the stable contract ahead of the component.
2. Example duplication — LAYOUT_OPTIONS + handlers are duplicated across the two code-diff examples, which is consistent with the repo's "self-contained example" convention. Leave as-is, or optionally name the default layout instead of LAYOUT_OPTIONS[1].

Approving. 🚢

_{Generated with a 6-agent review (backward compatibility, code quality, architecture, security, observability, performance, Lime platform).}

[lime-opensource]

🎉 This PR is included in version 39.37.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀