feat(code-diff): add interactive playground example

[viktorSoftDev]

Closes #4133

Summary by CodeRabbit

• New Features

  • Added an interactive code diff playground example enabling users to test layout modes (unified and split), toggle line wrapping, and view live diff updates with customizable code samples.

• Refactor

  • Improved type definitions for the code diff component's layout property to enhance type safety and consistency across the codebase.

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]

Warning

Review limit reached

@viktorSoftDev, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 58 minutes and 46 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: c634db01-c2ba-4957-9e4a-c0631b0bfc18

📥 Commits

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

⛔ 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 the 'unified' | 'split' string union from CodeDiff's layout prop into a named exported CodeDiffLayout type, re-exports it from the package barrel, and updates the existing line-wrap example to use it. Adds a new CodeDiffInteractiveExample Stencil component with two live code editors, layout/line-wrapping controls, and a reactive <limel-code-diff> output.

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 type alias is defined, re-exported from the package barrel, imported into CodeDiff, and applied to the layout prop; the JSDoc examples list is extended with limel-example-code-diff-interactive.
Update code-diff-line-wrap example to use CodeDiffLayout src/components/code-diff/examples/code-diff-line-wrap.tsx	CodeDiffLayout is added to the import, and LAYOUT_OPTIONS, the layout state, and the handleLayoutChange parameter type are all updated from the inline union to CodeDiffLayout.
New interactive playground example component src/components/code-diff/examples/code-diff-interactive.tsx, src/components/code-diff/examples/code-diff-interactive.scss	New CodeDiffInteractiveExample component renders two limel-code-editor inputs (old/new), layout-select and line-wrapping toggle controls, and a live <limel-code-diff> driven by reactive state; SCSS styles the flex editor layout with a responsive column fallback.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Lundalogik/lime-elements#3949: Directly touches the same layout prop on CodeDiff in src/components/code-diff/code-diff.tsx, adjusting how the 'unified' | 'split' union is handled.

Suggested labels

docs

Suggested reviewers

• john-traas
• adrianschmidt

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary feature being added: an interactive playground example for the code-diff component.
Linked Issues check	✅ Passed	All requirements from issue #4133 are fully implemented: interactive playground with side-by-side editors, live code-diff component, layout/line-wrapping controls, new example component at top, and CodeDiffLayout type extracted and re-exported.
Out of Scope Changes check	✅ Passed	All changes directly support the stated objectives: the CodeDiffLayout type extraction, new interactive example component, styling, and existing example refactoring are all in-scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

🧪 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]

Putting this on top makes perfect sense while it's being reviewed, but I think we should put it further down before we merge. At least the basic example should come first, so the reader gets a gentle introduction and understands what what component limel-code-diff actually produces (not obvious in the interactive example, since the first thing you see is the two code editors).

[viktorSoftDev]

Yeah, that makes a lot of sense