feat(vue): add useReactiveSlots — Vue-reactive slot evaluation

[kibertoad]

What

Adds useReactiveSlots() to @modular-vue/vue: the resolved slot manifest as a Vue computed, re-evaluated automatically whenever the reactive state its dynamicSlots factories / slotFilter read changes — no recalculateSlots() call. It rebuilds the deps snapshot inside a tracked computed, so a factory/filter that reads a reactive source live (a service object with getters over refs, a reactive service, a reactive store proxy) becomes a tracked dependency of the computed. Lazy, cached, fine-grained.

This is the Vue-idiomatic counterpart to the existing framework-neutral signal path (useSlots() + useRecalculateSlots()), which is left untouched. Additive: the two coexist and are chosen per source.

Why

The React binding has only the signal path (React has no ambient reactivity to track). In Vue, gating logic whose inputs are reactive state (RBAC permissions, connection-availability flags, feature toggles) would otherwise need a recalculateSlots() at every mutation site — easy to forget, and coarse (rebuilds the whole manifest). A computed gives the same producer-driven invalidation automatically, tracking only the state that changed.

Driven by the cat-factory nav/command-manifest adoption — the production consumer exercising the layer-extends story (docs/consumer-feedback-production-app.md role).

When to use which (documented in full)

Inputs	Path
Vue-reactive state the host owns (RBAC, availability)	useReactiveSlots
Non-reactive Store/zustand snapshot or external subscribe/getSnapshot	signal
Transactional (recompute once after async multi-step)	signal
Imperative event, not persisted reactive state	signal

Tradeoffs, the "is it over-eager? no" analysis, and the host-owned RBAC-gating shape live in docs/reactive-slots-vue.md (linked from framework-mode-nuxt.md, the @modular-vue/vue README, and the vue-support-tracker).

Changes

• @modular-vue/vue: useReactiveSlots, reactiveSlotsConfigKey, ReactiveSlotsConfig (in slots-context.ts), exported.
• @modular-vue/runtime: providers install reactiveSlotsConfigKey (base slots + factories + filter) in both plugin and framework-mode component forms; re-exported.
• Tests: unit coverage in slots-context.test.ts (reactive recompute with no signal; reactive slotFilter) + an end-to-end reactive-slots.test.ts (resolve → install → reactive filter recomputes).
• Docs: new docs/reactive-slots-vue.md; links added; tracker updated (partially advances D3 Pinia interop).

Vue-impact note

Vue-only addition on top of the shared engine; no @modular-frontend/* change. React parity unaffected (React keeps signal-only by design).

React source for intent: packages/react/src/slots-context.tsx.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added useReactiveSlots() for automatic Vue-reactive slot updates when permissions, availability, or other reactive inputs change.
  • Added public exports and configuration support for reactive slot evaluation.
  • Reactive slot filtering now supports RBAC-style navigation and command-shell scenarios without manual refreshes.

• Documentation

  • Added comprehensive guidance on reactive versus signal-based slot evaluation.
  • Updated Vue support tracking, README content, and related framework documentation.

• Tests

  • Added coverage for automatic updates, reactive filtering, dependency tracking, and usage validation.

[coderabbitai]

Warning

Review limit reached

@kibertoad, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 43 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

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

How do review limits work?

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

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, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 782d8a37-dbd6-46bd-b4e4-971efe0fbbec

📥 Commits

Reviewing files that changed from the base of the PR and between 6bf7d01 and 8a60105.

📒 Files selected for processing (7)

• docs/reactive-slots-vue.md
• docs/vue-support-tracker.md
• packages/vue-runtime/src/index.ts
• packages/vue-runtime/src/providers.ts
• packages/vue/src/index.ts
• packages/vue/src/slots-context.test.ts
• packages/vue/src/slots-context.ts

📝 Walkthrough

Walkthrough

Adds useReactiveSlots for Vue computed slot evaluation, provides its configuration through the runtime, exports the new API and type, adds unit and end-to-end coverage, and documents reactive versus signal-based slot resolution with RBAC examples.

Changes

Reactive Vue slots

Layer / File(s)	Summary
Composable contract and evaluation packages/vue/src/slots-context.ts, packages/vue/src/index.ts, packages/vue/src/slots-context.test.ts	Defines ReactiveSlotsConfig and reactiveSlotsConfigKey, implements useReactiveSlots with dependency-tracked computed evaluation, exports the API, and tests missing-context, reactive source, filter, and service snapshot behavior.
Runtime provisioning and integration tests packages/vue-runtime/src/providers.ts, packages/vue-runtime/src/index.ts, packages/vue-runtime/src/reactive-slots.test.ts	Provides slot configuration through modular contexts, re-exports the composable and type, and verifies reactive RBAC filtering in a mounted Vue Router view.
Reactive slots documentation docs/reactive-slots-vue.md, packages/vue/README.md, docs/vue-support-tracker.md, docs/framework-mode-nuxt.md	Documents computed and signal slot paths, dependency tracking, recomputation, RBAC gating, API behavior, and related framework examples.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant VueComponent
  participant useReactiveSlots
  participant ModularRuntime
  participant evaluateDynamicSlots
  VueComponent->>useReactiveSlots: read computed slot manifest
  useReactiveSlots->>ModularRuntime: inject slot configuration and dependencies
  useReactiveSlots->>evaluateDynamicSlots: evaluate factories and filter
  evaluateDynamicSlots-->>useReactiveSlots: filtered slots
  useReactiveSlots-->>VueComponent: computed slot value

Loading

Possibly related PRs

• kibertoad/modular-react#57: Introduces the signal-based Vue slots context extended by this PR with reactive slot evaluation.

🚥 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 describes the main change: adding useReactiveSlots for Vue-reactive slot evaluation.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/vue-reactive-slots

---

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

[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 `@docs/reactive-slots-vue.md`:
- Around line 130-133: Rewrite the reactive-slots explanation around the gates
getter, slotFilter, and useReactiveSlots computed to state that gates is a plain
service passed by reference and dependency tracking occurs when its getter reads
reactive state during computed evaluation. Remove the suggestion that an
attached dependency snapshot changes or must be refreshed or replaced, while
preserving the point that consumers of slots.value.nav recompute without
recalculateSlots().

🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 32557f56-2ad5-4395-b5c4-3e0219b8b614

📥 Commits

Reviewing files that changed from the base of the PR and between 9078c0b and 6bf7d01.

📒 Files selected for processing (10)

• docs/framework-mode-nuxt.md
• docs/reactive-slots-vue.md
• docs/vue-support-tracker.md
• packages/vue-runtime/src/index.ts
• packages/vue-runtime/src/providers.ts
• packages/vue-runtime/src/reactive-slots.test.ts
• packages/vue/README.md
• packages/vue/src/index.ts
• packages/vue/src/slots-context.test.ts
• packages/vue/src/slots-context.ts