feat: add examples/templates when adding a new tab

[LuLaValva]

• Add some templates for new file creation, and set up a selector for them
• Made a few little DX improvements

video.mov

[coderabbitai]

Walkthrough

Adds a new examples module exporting a default array of three Marko example items: "counter", "let-localstorage", and "pointer-down". Refactors the playground tabs editor: replaces per-tab boolean editing with a numeric editingIndex, updates click/keyboard behaviors and inline path editing to use the actual input element, and replaces the prompt-based add flow with a popover offering a blank file or template-based creation that generates unique Tag-like paths. Updates component Input to include selected and optional selectedChange. Adds popover and template button styles. Also adds spellcheck="false" to the body element in the layout.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main feature: adding template examples when creating new tabs in the playground.
Description check	✅ Passed	The description is relevant to the changeset, mentioning template/example addition for new file creation and DX improvements, which aligns with the actual code changes.
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

---

🧹 Recent nitpick comments

src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.marko (2)

109-129: Consider explicitly closing the popover after selection.

The popover relies on the onFocusOut handler to close when focus moves to the new tab's input. This works but is implicit. An explicit $popover().hidePopover() call after creating the tab would be more robust if focus management changes in the future.

♻️ Suggested improvement

         ,onClick() {
           const newIndex = tabs.length;
           let path = "Tag.marko";
           for (let i = 1; tabs.some((tab) => tab.path === path); i++) {
             path = "Tag" + i + ".marko";
           }
           tabs = [
             ...tabs,
             {
               path,
               content: "",
             },
           ];
           selected = newIndex;
           editingIndex = newIndex;
+          $popover().hidePopover();
         }

---

131-144: Same suggestion: explicitly close the popover after template selection.

For consistency with the blank file button, consider adding $popover().hidePopover() after creating a template-based tab.

         ,onClick() {
           selected = tabs.length;
           let path = name + ".marko";
           for (let i = 1; tabs.some((tab) => tab.path === path); i++) {
             path = name + "-" + i + ".marko";
           }
           tabs = [...tabs, { path, content }];
           document.querySelector<HTMLElement>(".cm-content")?.focus();
+          $popover().hidePopover();
         }

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f735af0 and 042bde6.

📒 Files selected for processing (4)

• src/routes/+layout.marko
• src/routes/playground/tags/playground/tags/editor/tags/tabs/examples.ts
• src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.marko
• src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.style.module.scss

🚧 Files skipped from review as they are similar to previous changes (1)

• src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.style.module.scss

🧰 Additional context used

📓 Path-based instructions (1)

**/*.marko

📄 CodeRabbit inference engine (.cursorrules)

In Marko files, use JS-style comments (// comment or /* comment */) instead of HTML comments (<!-- comment -->)

Files:

• src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.marko
• src/routes/+layout.marko

🧠 Learnings (3)

📓 Common learnings

Learnt from: CR
Repo: marko-js/website PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T20:17:04.100Z
Learning: Highlight zero-JS by default and progressive enhancement in Marko documentation

📚 Learning: 2025-11-25T20:17:04.100Z

Learnt from: CR
Repo: marko-js/website PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T20:17:04.100Z
Learning: Highlight zero-JS by default and progressive enhancement in Marko documentation

Applied to files:

• src/routes/playground/tags/playground/tags/editor/tags/tabs/examples.ts

📚 Learning: 2025-11-25T20:17:04.100Z

Learnt from: CR
Repo: marko-js/website PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T20:17:04.100Z
Learning: Emphasize compile-time intelligence and automatic optimization in Marko documentation

Applied to files:

• src/routes/playground/tags/playground/tags/editor/tags/tabs/examples.ts

🔇 Additional comments (4)

src/routes/+layout.marko (1)

17-17: LGTM!

Disabling spellcheck at the body level is appropriate for a code playground site, preventing distracting squiggles on code content.

src/routes/playground/tags/playground/tags/editor/tags/tabs/examples.ts (1)

1-95: LGTM!

These example templates effectively demonstrate key Marko patterns:

• Controllable components with := binding
• Reactive scripts with $signal for automatic cleanup
• Cross-tab state synchronization via custom events

The examples are well-documented with clear usage instructions.

src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.marko (2)

71-74: Good fix for preventing focus-related layout shift.

Using preventDefault() on mousedown prevents the button from stealing focus before the click handler runs, addressing the layout shift issue when closing tabs during editing.

---

85-107: Popover implementation looks solid.

The popover positioning, focus management, and accessibility attributes (role="menu", role="menuitem", autofocus) are well-implemented.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In `@src/routes/playground/tags/playground/tags/editor/tags/tabs/examples.ts`:
- Around line 41-44: The storage event handler handleStorageChange should guard
against null e.newValue before calling JSON.parse; update handleStorageChange to
first check that e.key === input.key and e.newValue is not null (or undefined)
and only then set internalValue = JSON.parse(e.newValue), otherwise set
internalValue to a safe fallback (e.g., null or {} as appropriate for the
component); reference the existing symbols handleStorageChange, input.key,
internalValue, and e.newValue when making this change.

In `@src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.marko`:
- Around line 105-130: The blank-tab button click handler currently builds a
path using a count of tabs matching /^Tag\d*\.marko$/ which can collide after
deletions; change the logic in that handler (the onClick that sets newIndex,
tabs, selected, editingIndex) to compute the next available TagN index by
scanning existing tabs' paths (matching /^Tag(\d+)\.marko$/ and also "Tag.marko"
as index 0), choose the smallest non-used integer N, then create the new tab
with path `Tag${N}.marko` (or `Tag.marko` for N=0) and set selected and
editingIndex to the newIndex; keep tabs immutable (tabs = [...tabs, {...}]) and
preserve the other behavior (empty content).
- Around line 56-61: The key handler currently uses onKeyPress which is
deprecated and doesn't fire for non-printable keys like Escape; change the event
binding from onKeyPress to onKeyDown (keeping the same handler body that checks
e.key === "Enter" and e.key === "Escape") so the Escape branch reliably sets
editingIndex = -1 and Enter focuses the ".cm-content" element; update any
references to the handler in the Marko template (the inline ,onKeyPress(e) { ...
} block) to use ,onKeyDown(e) { ... } instead.

🧹 Nitpick comments (1)

src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.style.module.scss (1)

59-65: Consider constraining popover height for long template lists.

If the list grows, the popover can exceed the viewport. Adding a max-height with scrolling keeps it usable.

♻️ Suggested tweak

.popover {
  inset: unset;
  max-width: 95vw;
+  max-height: 80vh;
+  overflow: auto;
  background-color: var(--color-gray-alt-dim);
  border: 1px solid var(--color-gray-alt);
  border-radius: 0.25rem;
}

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5718ddc and 80d67e5.

📒 Files selected for processing (3)

• src/routes/playground/tags/playground/tags/editor/tags/tabs/examples.ts
• src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.marko
• src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.style.module.scss

🧰 Additional context used

📓 Path-based instructions (1)

**/*.marko

📄 CodeRabbit inference engine (.cursorrules)

In Marko files, use JS-style comments (// comment or /* comment */) instead of HTML comments (<!-- comment -->)

Files:

• src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.marko

🧠 Learnings (1)

📚 Learning: 2025-11-25T20:17:04.100Z

Learnt from: CR
Repo: marko-js/website PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T20:17:04.100Z
Learning: Highlight zero-JS by default and progressive enhancement in Marko documentation

Applied to files:

• src/routes/playground/tags/playground/tags/editor/tags/tabs/examples.ts

🔇 Additional comments (5)

src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.style.module.scss (2)

38-49: Add-button styling change looks consistent.

No issues spotted.

---

67-77: Template button hover/focus styling looks good.

src/routes/playground/tags/playground/tags/editor/tags/tabs/examples.ts (1)

1-19: Counter template is clear and self-contained.

src/routes/playground/tags/playground/tags/editor/tags/tabs/tabs.marko (2)

4-41: Editing-index state wiring reads clean.

The editingIndex approach keeps selection/editing logic straightforward.

---

81-103: Popover positioning and focus-out close wiring look solid.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}