Skip to content

feat: add framework builder app#182

Draft
johnleider wants to merge 56 commits intomasterfrom
feature/framework-builder
Draft

feat: add framework builder app#182
johnleider wants to merge 56 commits intomasterfrom
feature/framework-builder

Conversation

@johnleider
Copy link
Copy Markdown
Member

Summary

  • New standalone app at apps/builder/ that helps users discover, select, and assemble v0 composables, components, and adapters into a custom framework
  • Three modes: Guided (stepper wizard), Free Pick (full catalog grid), AI Builder (Vuetify One gated, placeholder)
  • Dependency resolution engine auto-includes transitive deps and shows them separately
  • Output opens in the v0 playground via fflate-compressed URL hash
  • Build-time dependency graph generator scans v0 source imports
  • Feature catalog merges maturity.json + dependency graph + human-authored metadata
  • Dogfoods v0 throughout (theme, breakpoints, storage, logger plugins)

Test plan

  • pnpm --filter=@vuetify-private/builder dev starts without errors
  • Landing page shows three mode cards
  • Guided mode: select intent → step through categories → review
  • Free mode: search/filter features, toggle selections
  • Review page shows selected vs auto-included split
  • "Open in Playground" generates valid playground URL
  • AI page shows auth gate, dev bypass works in dev mode
  • pnpm vitest run apps/builder/ — 10 tests pass
  • pnpm lint:fix — clean
  • pnpm repo:knip — no new issues

Standalone Vite SPA at apps/builder/ for the v0 Framework Builder.
Follows the playground app pattern with file-based routing, UnoCSS,
auto-imported components, and the standard v0 plugin stack.
Scans v0 composable and component imports to produce
dependencies.json for the framework builder's resolution engine.
Scope test discovery to src/ and set explicit node environment.
Generates playground-compatible files from a feature manifest
and encodes them as a fflate-compressed URL hash.
Three mode cards — Guided, Free Pick, and AI Builder (gated) —
with navigation to their respective routes.
Merges maturity.json, dependency graph, and human-authored
metadata into a typed Feature catalog for the builder UI.
Pinia store managing intent, feature selection, dependency
resolution, and playground handoff for all builder modes.
Stepper wizard with intent selection that seeds recommended
features, plus category walkthrough with feature cards.
Shows selected vs auto-included features, warnings, and
opens the resolved manifest in the v0 playground.
Filterable grid of all features grouped by category with
search, selection toggling, and review navigation.
Chat shell for Vuetify One subscribers with auth gating,
message display, and dev bypass. AI integration is a follow-up.
Replace sort() with toSorted(), utf-8 with utf8.
Register builder app entries so knip recognizes file-based
routing, auto-imported components, and build scripts.
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 4, 2026

Open in StackBlitz

commit: 6758a3a

- ModeCard: add recommended prop with badge, hover shadow, better locked state
- IntentCard: active checkmark, ring highlight, increased padding
- FeatureCard: SVG checkboxes replacing unicode, better selected/hover states
- Landing: bigger hero, feature count subtitle, recommended badge on Guided
- Guided: numbered circle step indicator with connecting lines, step counter
- Free: sticky selection summary bar, category item counts
- Review: stats summary grid, colored section borders, updated CTA text
Rewrite generateFiles() to produce category-based demo components
(SelectionDemo, FormDemo, DataDemo, DialogDemo, ObserverDemo) based
on selected features instead of a single bare App.vue.

- Remove main.ts/uno.config.ts from output (playground preset handles these)
- Add per-category demo generators with real v0 composable usage
- App.vue imports and renders only relevant demos
- Support pinia/router addons in settings when implied by features
- Fallback to plugin-only message when no demoable features selected
The vite-plugin-vue-layouts-next plugin requires router-view,
not slot, to render page content within layouts.
Category icon on section headers is enough — duplicating it
in every card clutters the selected state.
Move max-w-2xl mx-auto px-6 to the layout so all pages
share a consistent content width across steps.
Auto-included features were disabled, preventing users from
re-selecting them after deselection. Now clickable — auto label
only shows when not explicitly selected.
Replace hand-rolled shallowRef/Set state with v0 primitives:
- createSingle for intent and mode selection
- createGroup for feature multi-select
- createStep for wizard navigation
initSteps was in onMounted which runs after first render,
causing selectedIndex.value to be undefined during template eval.
Use local toRef with ?? 0 fallback to prevent undefined
access before stepper initialization completes.
The replace-all accidentally made stepIndex reference itself.
Use computed with store.stepper.selectedIndex.value instead.
Moves step definitions and stepper.onboard/first into the store
so selectedIndex is available immediately on first render.
Pinia auto-unwraps refs in store state. Accessing .value on
already-unwrapped properties returns undefined.
Vue templates auto-unwrap refs, so stepIndex.value double-unwraps
to undefined causing NaN in step counter display.
Shows current path like Builder > Guided > Admin Dashboard > Foundation
so users always know where they are in the wizard flow.
- Intent presets no longer pre-select foundation features that
  are guaranteed auto-includes (createContext, createTrinity)
- Auto-included features now show "required by X" explaining
  which selected feature pulled them in
- Fix scrollbar layout shift with overflow-y-scroll on layout
- Replace code examples with "Build:" use case list
- Fix checkmark to use text-on-primary for contrast
- Fix dependency wording to "needed by X" (not "requires")
- Add icon legend (Selected / Available / Dependency) to
  guided and free modes
…t icons

Step indicator now shows category icons instead of numbers, with
completed steps displaying a checkmark and being clickable for
navigation. Intent cards use more descriptive icons. Arrow key
hotkeys added for step navigation via v0 useHotkey.
User selections now survive page reloads via localStorage. Restores
saved intent (which re-applies its preset) or individual feature
selections on store initialization.
Prevents double scrollbar by reserving gutter space without
forcing a visible scrollbar on short pages.
- Landing page mode cards now display in a 3-column grid on md+
- Widen layout to max-w-3xl for card space
- Move scrollbar-gutter to html via UnoCSS preflight
@johnleider johnleider marked this pull request as draft April 6, 2026 16:33
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.

1 participant