@stackonward/cli 1.5.3 → 1.7.0

package/dist/resources/templates/nuxt/DESIGN.md

@@ -0,0 +1,191 @@
+# Nuxt Design Standard
+
+This document defines the visual contract for the application-owned Nuxt UI foundation. Read it with the [Nuxt Engineering Standard](.claude/docs/stack.md) before changing icons, controls or theme defaults. Application branding remains in its own assets and semantic color tokens.
+
+## Design Decisions
+
+| Decision               | Primary-source pattern                                                                                                                             | Application choice                                                                         | Reason                                                                        |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- |
+| Functional icon family | [Lucide specification](https://lucide.dev/contribute/icons/specification) defines a consistent canvas, stroke and visual weight.                   | Use the installed Lucide collection with its original geometry.                            | One family keeps related actions visually coherent.                           |
+| Size hierarchy         | [Carbon icon usage](https://carbondesignsystem.com/elements/icons/usage/) uses a small, consistent scale and separates artwork from touch targets. | Use 16/20/24/32px for interface icons; 20px is the ordinary default.                       | Central sizing supports both compact and prominent contexts.                  |
+| Accessible meaning     | [Lucide accessibility](https://lucide.dev/how-to/accessibility) distinguishes decorative, standalone and interactive icons.                        | Hide decoration; label standalone meaning or the interactive control that owns an action.  | Assistive technology announces each meaning once.                             |
+| Rendering and delivery | [Nuxt Icon](https://nuxt.com/modules/icon) supports application defaults, local collections and SVG rendering.                                     | Reuse Nuxt Icon through `UiIcon`, bundle Lucide locally and disable external API fallback. | SSR and client rendering use the same locally owned assets and configuration. |
+
+## Ownership
+
+| Owner                                                                        | Contract                                                                                    |
+| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `app/assets/css/site-shell.css`                                              | `--site-control-height-*`, icon sizes, radius tokens, Tailwind aliases and semantic colors  |
+| `app/theme/icon.ts`                                                          | Nuxt Icon defaults: 20px token, SVG mode, non-shrinking alignment and decorative attributes |
+| `app/app.config.ts`                                                          | Composes `icon` defaults and the Nuxt UI theme                                              |
+| `app/components/ui/Icon.vue`                                                 | Typed `name`, `size` and accessible `label` adapter                                         |
+| `app/theme/button.ts`, `input.ts`, `select.ts`, `textarea.ts`, `checkbox.ts` | Internal icon slots and the control's geometry                                              |
+| `nuxt.config.ts`                                                             | Locally bundled `lucide`, `brand` SVG collection and `fallbackToApi: false`                 |
+| `app/assets/icons/brand/`                                                    | Reviewed third-party identity assets                                                        |
+
+Registry-installed source belongs to this application. **MUST** change the owning token or component when a repeated pattern changes. A one-location size choice stays at its caller. **FORBIDDEN**: adding a second icon component, runtime registry, icon font or icon library for an existing Lucide capability.
+
+## Control Geometry and Visual Scenarios
+
+Marketing and product UI use the same `UiButton`, Nuxt UI controls and theme tokens. **MUST** choose the size and composition for the action's context; **FORBIDDEN**: separate marketing/product button implementations or campaign dimensions in the generic button default.
+
+| Scenario                         | Controls                                                                                                          | Typography and layout ownership                                                                                            |
+| -------------------------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| Marketing conversion             | Section CTAs use `2xl` for prominence, with a section-owned minimum width of 200px and `max-w-full`.              | Content sections own their larger headings, supporting copy, generous spacing and responsive content width.                |
+| Product navigation and workbench | Use `sm` for compact labeled actions and `md` for ordinary controls. Buttons fit their content.                   | App header, sidebar and editor owners control density, alignment and available width; controls retain the shared geometry. |
+| Product authentication and forms | Use `lg` when the form needs a larger field and submission target. Select `block` for a full-width submit action. | The form owns field width, label/help spacing and validation space; it does not inherit a marketing CTA's minimum width.   |
+
+The control scale uses `--site-control-height-*` tokens and `h-control-*` utilities. Values below assume a 16px root; height, text and padding use rem. Text shows font size / line height. Button labels use medium weight. Input/select padding is the base padding on each side; icon slots add their own reserved space.
+
+| Size           | Button height | Input/select height | Text      | Button horizontal padding | Input/select horizontal padding | Icon |
+| -------------- | ------------- | ------------------- | --------- | ------------------------- | ------------------------------- | ---- |
+| `xs`           | 32px          | 32px                | 12 / 16px | 12px                      | 12px                            | 16px |
+| `sm`           | 36px          | 36px                | 14 / 20px | 16px                      | 12px                            | 16px |
+| `md` (default) | 42px          | 42px                | 14 / 20px | 20px                      | 14px                            | 20px |
+| `lg`           | 48px          | 48px                | 16 / 24px | 24px                      | 16px                            | 20px |
+| `xl`           | 52px          | 52px                | 18 / 28px | 28px                      | 18px                            | 24px |
+| `2xl`          | 56px          | —                   | 18 / 28px | 32px                      | —                               | 24px |
+
+Editable inputs and textareas use 16px text below the `md` breakpoint unless the caller explicitly opts into the framework's `fixed` typography behavior. Their desktop typography follows the table. Select triggers retain their selected size. Textareas use rows/content height, not the single-line height scale; their vertical padding belongs to `app/theme/textarea.ts`.
+
+Ordinary buttons have intrinsic width with no shared minimum or fixed width. `block` or `fullWidth` explicitly fills the available width. Marketing CTA widths belong to `content/CallToAction.vue`, `content/Faq.vue`, `content/Reviews.vue` and `steps/Showcase.vue`; page widths and heading scales remain at their layout/section owner. Link buttons retain text-flow height. Square icon buttons keep at least 44 × 44px targets even when their selected size is smaller.
+
+Buttons, text inputs, selects and textareas use `--site-radius-md` through `rounded-ml` (10px); non-fullscreen dialogs use `--site-radius-lg` through `rounded-2ml` (20px). **MUST** reuse these radius tokens instead of adding a different radius to each field or button. Primary and neutral outline buttons and ordinary outlined fields use one 1px ring, without a second border. Primary solid buttons and primary outlined fields expose a 2px keyboard-focus outline; primary outline buttons use a 2px focus ring. Other semantic variants retain their theme-owned focus behavior. Focus treatment must remain visible and distinct from the resting edge.
+
+Custom token utilities **MUST** be registered in `app/theme/index.ts` through `tv.twMergeConfig.extend.theme`: `radius` owns `ml`/`2ml`, and `spacing` owns the `control-*`/`icon-*` scales. This lets Nuxt UI merge framework defaults, theme values and caller overrides consistently. **FORBIDDEN**: relying on CSS source order to resolve conflicting size or radius utilities.
+
+✅ **Select shared sizes; the caller owns emphasis and width.**
+
+```vue
+<UiButton size="sm" color="primary" variant="solid">Sign in</UiButton>
+<UiButton size="lg" block type="submit">Continue</UiButton>
+<UiButton size="2xl" class="min-w-[200px] max-w-full">Start creating</UiButton>
+```
+
+❌ **A generic width mandate and per-page sizing bypass both scene owners.**
+
+```vue
+<UiButton class="h-[39px] min-w-[200px] rounded-[7px] text-[15px]">Save</UiButton>
+```
+
+## Functional Icon Geometry
+
+Functional icons **MUST** use `i-lucide-*` names from the installed collection. Their design uses a square 24 × 24 viewBox, 2-unit centered strokes, rounded open-path caps and rounded joins. Preserve the family's edge clearance, internal spacing and visual balance; identical CSS dimensions alone do not establish equal optical weight. These constraints follow the [Lucide specification](https://lucide.dev/contribute/icons/specification).
+
+Keep the original aspect ratio and geometry when rendering at another size. Strokes scale proportionally with the viewBox; the 2-unit source stroke is not a fixed 2 CSS-pixel stroke at every display size. **FORBIDDEN**: per-location stroke-width overrides, non-uniform scaling, padding embedded in duplicate SVGs or arbitrary `translate` corrections. Align icons and text with the control's flex/grid layout. A family-level optical issue is resolved in the asset or by selecting a clearer existing icon.
+
+Use the same icon for the same action across routes. Distinct actions must not share an ambiguous symbol in the same context. Prefer familiar action/object meanings and retain text for unfamiliar actions. Selection, loading and error states use the established control and status contracts; a spinner alone does not explain what is pending.
+
+## Size Scale
+
+Values use rem and therefore follow the user's root text size. Pixel equivalents below assume a 16px root.
+
+| Token / utility                     | Value          | Intended use                                             |
+| ----------------------------------- | -------------- | -------------------------------------------------------- |
+| `--site-icon-xs` / `size-icon-xs`   | 0.75rem / 12px | Internal checkbox mark only                              |
+| `--site-icon-sm` / `size-icon-sm`   | 1rem / 16px    | Compact inline or control icon                           |
+| `--site-icon-md` / `size-icon-md`   | 1.25rem / 20px | Default functional icon, navigation and ordinary actions |
+| `--site-icon-lg` / `size-icon-lg`   | 1.5rem / 24px  | Prominent control or section icon                        |
+| `--site-icon-xl` / `size-icon-xl`   | 2rem / 32px    | Status or feature illustration                           |
+| `--site-icon-2xl` / `size-icon-2xl` | 2.5rem / 40px  | Large status or feature illustration                     |
+| `--site-icon-3xl` / `size-icon-3xl` | 3rem / 48px    | Large empty-state or explanatory illustration            |
+
+Use the default unless the surrounding component calls for another level. Buttons and inputs map `xs`/`sm` to 16px, `md`/`lg` to 20px and `xl` to 24px; the button's `2xl` also uses 24px. Internal Nuxt UI icons keep their component slot ownership and share the same Nuxt Icon provider. Do not manually duplicate an icon already provided by a control's `icon`, `leading-icon` or `trailing-icon` prop.
+
+An icon-only button or link **MUST** expose a target of at least 44 × 44 CSS pixels, including on narrow viewports. The artwork can remain 16, 20 or 24px. This separates visual density from interaction size, as described by [Carbon](https://carbondesignsystem.com/elements/icons/usage/) and [Lucide](https://lucide.dev/how-to/accessibility). Control padding, minimum dimensions and focus behavior belong to the interactive wrapper.
+
+## Component API and Overrides
+
+`UiIcon` accepts `name: string`, `size?: string | number` and `label?: string`. Numeric `size` values are CSS pixels; strings accept CSS lengths, including rem and token references. Without `size`, the application default is `var(--site-icon-md)`.
+
+✅ **Use the shared default or one explicit size mechanism.**
+
+```vue
+<UiIcon name="i-lucide-image" />
+<UiIcon name="i-lucide-image" class="size-icon-lg" />
+<UiIcon name="i-lucide-image" :size="24" />
+<UiIcon name="i-lucide-image" size="var(--site-icon-xl)" />
+```
+
+`size-icon-*` is the preferred local scale selection. Use `size` when a measured integration requires a specific value. **MUST** choose one sizing mechanism for an instance; `size` and a sizing class must not compete. Color is supplied with semantic classes or inherited from the parent, not a separate icon-specific color prop.
+
+❌ **Competing sizes and page-owned artwork bypass the shared contract.**
+
+```vue
+<UiIcon name="i-lucide-image" :size="18" class="size-icon-lg" />
+<svg viewBox="0 0 32 20" class="h-4 w-7" stroke-width="3" />
+```
+
+**FORBIDDEN**: global `svg` width, height, stroke or fill rules. They also affect logos, charts, cropping overlays and other non-icon graphics. Nuxt's path-aware component naming remains enabled; standalone application icons use `UiIcon`, while Nuxt UI controls render their own internal icons.
+
+## Color and Brand Assets
+
+Functional icons inherit `currentColor`. Use the same semantic foreground as adjacent text, or an explicit semantic role such as `text-primary`, `text-success` or `text-warning`. Hover, active, disabled and focus states come from the control/theme owner. A status must also have recognizable shape or text; color alone is insufficient.
+
+Verify foreground/background contrast in each supported theme. Meaningful interface icons must reach at least 3:1 against adjacent colors under [WCAG non-text contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html); ordinary paired text requires at least 4.5:1. Aim for 4.5:1 for icons where practical, following the stronger [Carbon guidance](https://carbondesignsystem.com/elements/icons/usage/). Use the product's accessible interaction token instead of assuming its logo color is suitable for a small control. Inactive controls are exempt from the non-text contrast requirement, but their disabled state must remain understandable within the labeled control.
+
+Third-party identities are local `brand:*` assets, including `brand:apple`, `brand:android` and `brand:whatsapp`. Preserve their proportions and any required identity colors; monochrome variants inherit the foreground only when the supplied asset supports that treatment. Product logos use the product's approved assets and brand specification. **FORBIDDEN**: recoloring a provider logo as a generic status icon, forcing logos into Lucide geometry or embedding a product's palette in shared icon defaults.
+
+Local brand files use concise kebab-case names under `app/assets/icons/brand/`. Nuxt config registers that collection. Do not restore obsolete `common:*` names, slash-name conversion, compatibility aliases or global SVG symbol injection.
+
+## Accessible Names and Interaction
+
+`UiIcon` is decorative by default: `aria-hidden="true"` and `focusable="false"`. A non-empty `label` exposes `role="img"` and an accessible name. The label describes meaning, not the icon's filename. These defaults implement the distinctions in the [Lucide accessibility guide](https://lucide.dev/how-to/accessibility).
+
+✅ **Nearby text owns the meaning; the icon stays decorative.**
+
+```vue
+<span class="inline-flex items-center gap-2 text-success">
+  <UiIcon name="i-lucide-circle-check" />
+  Ready
+</span>
+```
+
+✅ **A standalone semantic icon receives a localized label.**
+
+```vue
+<UiIcon name="i-lucide-circle-check" :label="t('status.ready')" class="text-success" />
+```
+
+✅ **An icon action is labeled on its semantic button.**
+
+```vue
+<UiButton
+  square
+  color="neutral"
+  variant="ghost"
+  icon="i-lucide-x"
+  :aria-label="t('actions.close')"
+  @click="close"
+/>
+```
+
+❌ **A labeled picture is not a keyboard-operable, named action.**
+
+```vue
+<UiIcon name="i-lucide-x" label="Close" @click="close" />
+```
+
+Use the existing locale owner for labels, visible focus on controls and the component's keyboard behavior. A tooltip supplements a control's name; it does not replace that name. Do not add `label` to an icon that repeats its button's accessible name or adjacent text.
+
+## Additions and Verification
+
+1. Search existing component, navigation and state owners for the same meaning; reuse the established Lucide name and component before adding an asset.
+2. Confirm the chosen name exists in the installed local collection. Keep `fallbackToApi: false`; an unbundled icon is a missing dependency or registration, not a reason to fetch a public icon API.
+3. Review any new brand asset for ownership, intrinsic dimensions, aspect ratio and identity color. Keep product-only assets in the product. A genuinely missing functional symbol requires an explicit design decision before another collection is introduced.
+4. Keep glyph size, control hit target and text alignment separate. Inspect optical weight at 16/20/24/32px, the ordinary 20px default, an explicit override and the component's actual size variants.
+5. Verify decorative versus meaningful accessibility, keyboard action/focus, status text, loading/disabled states, light/dark contrast and narrow layout. Inspect actual rendered SVG dimensions and viewBox; a successful typecheck alone is not visual evidence.
+6. For shared-source changes, verify source → registry → packed CLI → externally generated application. The generated `/ui` catalog provides default, size, semantic-label, brand and control examples. Application-specific routes verify their own composition.
+
+### Acceptance Checklist
+
+- [ ] Marketing CTAs and product actions use the same controls with the appropriate size and caller-owned width.
+- [ ] Actual control heights, typography, padding, radii, border/focus states and narrow-view input text match the shared contract.
+- [ ] Functional icons come from the installed Lucide family; brand assets remain separate.
+- [ ] The 20px default, selected size tokens and explicit `size` override render correctly without competing size declarations.
+- [ ] Source geometry and proportional strokes are preserved; no arbitrary per-icon offsets or global SVG overrides exist.
+- [ ] Icon-only controls retain at least 44 × 44px targets and visible keyboard focus.
+- [ ] Decorative icons are silent; standalone meaning and actions have names at the correct owner.
+- [ ] Status remains understandable without color, and supported themes have adequate contrast.
+- [ ] Icons resolve from local assets/bundles with no external icon API fallback.
+- [ ] Changed shared assets, rules and defaults survive packed CLI generation and the generated app's checks.

package/dist/resources/templates/nuxt/app/app.config.ts

@@ -1,7 +1,9 @@
 import siteUiTheme from "./theme";
+import icon from "./theme/icon";
 
 export default defineAppConfig({
   ui: siteUiTheme,
+  icon,
   siteShell: {
     name: "{{projectName}}",
     descriptionKey: "site.description",

package/dist/resources/templates/nuxt/app/pages/app/index.vue

@@ -50,7 +50,7 @@ useSeo({
         <span>Output mix</span>
         <ul class="workspace-page__formats">
           <li v-for="format in outputFormats" :key="format">
-            <UIcon name="i-lucide-check" />
+            <UiIcon name="i-lucide-check" class="text-primary" />
             {{ format }}
           </li>
         </ul>
@@ -119,7 +119,13 @@ useSeo({
   gap: 18px;
   border: 1px solid var(--site-color-border);
   border-radius: var(--site-radius-lg);
-  background: linear-gradient(180deg, rgb(168 101 80 / 4%), transparent), var(--site-color-surface);
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--site-color-primary) 4%, transparent),
+      transparent
+    ),
+    var(--site-color-surface);
   padding: 20px;
 }
 
@@ -148,7 +154,7 @@ useSeo({
   gap: 12px;
   border: 1px solid var(--site-color-border);
   border-radius: var(--site-radius-md);
-  background: rgb(168 101 80 / 4%);
+  background: color-mix(in srgb, var(--site-color-primary) 4%, transparent);
   padding: 14px;
 }
 
@@ -193,10 +199,6 @@ useSeo({
   color: var(--site-color-muted);
 }
 
-.workspace-page__formats svg {
-  color: var(--site-color-primary);
-}
-
 .workspace-page__metric strong {
   color: var(--site-color-primary);
   font-size: 58px;

package/dist/resources/templates/nuxt/app/pages/index.vue

@@ -64,12 +64,12 @@ useSeo({
               to="/ui"
             >
               View workflow
-              <UIcon name="i-lucide-play" />
+              <UiIcon name="i-lucide-play" class="size-icon-sm" />
             </NuxtLink>
           </div>
           <div class="proof-list" aria-label="Product proof">
             <div v-for="item in proofItems" :key="item.label" class="proof-list__item">
-              <UIcon :name="item.icon" />
+              <UiIcon :name="item.icon" class="text-secondary" />
               <span>{{ item.label }}</span>
             </div>
           </div>
@@ -91,11 +91,11 @@ useSeo({
               {{ panel.label }}
             </span>
             <span class="hero-gallery__video hero-gallery__video--vertical">
-              <UIcon name="i-lucide-play" />
+              <UiIcon name="i-lucide-play" class="size-icon-sm" />
               0:15
             </span>
             <span class="hero-gallery__video hero-gallery__video--wide">
-              <UIcon name="i-lucide-play" />
+              <UiIcon name="i-lucide-play" class="size-icon-sm" />
               0:08
             </span>
           </div>
@@ -105,7 +105,7 @@ useSeo({
               {{ ratio }}
             </button>
             <button type="button" aria-label="Add ratio">
-              <UIcon name="i-lucide-plus" />
+              <UiIcon name="i-lucide-plus" />
             </button>
           </div>
         </div>
@@ -219,15 +219,10 @@ useSeo({
 }
 
 .hero-section__secondary-action {
-  border-color: rgb(168 101 80 / 42%);
+  border-color: color-mix(in srgb, var(--site-color-primary) 42%, transparent);
   color: var(--site-color-accent-warm);
 }
 
-.hero-section__secondary-action svg {
-  width: 16px;
-  height: 16px;
-}
-
 .proof-list {
   display: grid;
   max-width: 560px;
@@ -253,12 +248,6 @@ useSeo({
   padding-left: 0;
 }
 
-.proof-list__item svg {
-  width: 22px;
-  height: 22px;
-  color: var(--site-color-accent);
-}
-
 .hero-section__media {
   display: grid;
   min-width: 0;
@@ -308,11 +297,6 @@ useSeo({
   backdrop-filter: blur(10px);
 }
 
-.hero-gallery__video svg {
-  width: 16px;
-  height: 16px;
-}
-
 .hero-gallery__label--before {
   top: 4%;
   left: 2%;
@@ -375,7 +359,7 @@ useSeo({
   min-height: 34px;
   align-items: center;
   justify-content: center;
-  border: 1px solid rgb(168 101 80 / 28%);
+  border: 1px solid color-mix(in srgb, var(--site-color-primary) 28%, transparent);
   border-radius: var(--site-radius-sm);
   background: rgb(255 255 255 / 82%);
   color: var(--site-color-primary);
@@ -384,13 +368,14 @@ useSeo({
 }
 
 .ratio-toolbar button:hover {
-  border-color: rgb(168 101 80 / 44%);
-  background: rgb(168 101 80 / 6%);
+  border-color: color-mix(in srgb, var(--site-color-primary) 44%, transparent);
+  background: color-mix(in srgb, var(--site-color-primary) 6%, transparent);
   color: var(--site-color-primary-hover);
 }
 
 .ratio-toolbar button:last-child {
-  min-width: 34px;
+  min-width: 44px;
+  min-height: 44px;
   border-radius: 50%;
 }
 
@@ -503,7 +488,7 @@ useSeo({
   background: var(--site-color-primary);
   color: var(--site-color-primary-contrast);
   font-weight: 700;
-  box-shadow: 0 18px 44px rgb(168 101 80 / 22%);
+  box-shadow: 0 18px 44px color-mix(in srgb, var(--site-color-primary) 22%, transparent);
 }
 
 @media (width <= 1100px) {

package/dist/resources/templates/nuxt/app/pages/ui/index.vue

@@ -6,6 +6,55 @@ const analytics = useAnalytics();
 const visibleItems = ref(4);
 const infiniteLoading = ref(false);
 const checkoutUrlPreview = ref("");
+const previewPage = ref(1);
+const previewRatio = ref("4:5");
+const drawerOpen = ref(false);
+const previewIcons = [
+  "i-lucide-house",
+  "i-lucide-menu",
+  "i-lucide-search",
+  "i-lucide-plus",
+  "i-lucide-minus",
+  "i-lucide-x",
+  "i-lucide-check",
+  "i-lucide-chevron-down",
+  "i-lucide-circle-user",
+  "i-lucide-loader-circle",
+  "i-lucide-play",
+  "i-lucide-pause",
+  "i-lucide-headset",
+  "i-lucide-message-circle",
+  "i-lucide-star",
+  "i-lucide-arrow-up",
+  "i-lucide-triangle-alert",
+  "i-lucide-settings-2",
+  "i-lucide-image",
+  "i-lucide-shield-check",
+];
+const previewIconSizes = [
+  { label: "16 · Inline", class: "size-icon-sm" },
+  { label: "20 · Default", class: "size-icon-md" },
+  { label: "24 · Prominent", class: "size-icon-lg" },
+  { label: "32 · Status", class: "size-icon-xl" },
+];
+const previewSteps = [
+  {
+    title: "Add a source",
+    description: "Choose the image you want to work with.",
+    icon: "i-lucide-image",
+  },
+  {
+    title: "Describe the result",
+    description: "Set the scene, light, and output format.",
+    icon: "i-lucide-pencil",
+  },
+  {
+    title: "Review your work",
+    description: "Compare the results and choose a direction.",
+    icon: "i-lucide-check",
+  },
+];
+const previewImages = previewSteps.map((step) => ({ src: "/favicon.svg", alt: step.title }));
 
 const infiniteItems = Array.from({ length: 10 }, (_, index) => ({
   id: `asset-${index + 1}`,
@@ -121,7 +170,7 @@ useSeo({
           title="Approve campaign set"
           description="Use slots for business-specific body and footer content."
         >
-          <template #content>
+          <template #body>
             <UiText as="p" tone="muted">
               Campaign output is ready for review. The consuming product owns approval rules and
               provider fulfillment.
@@ -230,7 +279,166 @@ useSeo({
             Multi-line campaign summaries can be clamped by the reusable text component so compact
             cards, popovers, and tables remain stable.
           </UiText>
+          <UiText auto-shrink class="block max-w-48" :min-font-size="10"
+            >Automatically fitted text keeps its full label visible.</UiText
+          >
+        </div>
+      </section>
+
+      <section class="system-lab__panel system-lab__panel--wide">
+        <UiText as="h2" size="xl" weight="bold">Complete theme controls</UiText>
+        <div class="flex flex-wrap items-center gap-4">
+          <UiButton
+            v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const"
+            :key="size"
+            :size="size"
+            >{{ size }}</UiButton
+          >
+        </div>
+        <UBreadcrumb :items="[{ label: 'Home', to: '/' }, { label: 'Components' }]" />
+        <UFormField label="Output notes"
+          ><UTextarea placeholder="Describe the output"
+        /></UFormField>
+        <URadioGroup
+          v-model="previewRatio"
+          :items="['4:5', '1:1', '16:9']"
+          orientation="horizontal"
+          variant="card"
+        />
+        <UPagination v-model:page="previewPage" :total="100" />
+        <UTooltip text="Shared tooltip theme"
+          ><UiButton color="neutral" variant="outline">Tooltip example</UiButton></UTooltip
+        >
+        <UiButton color="neutral" variant="outline" @click="drawerOpen = true"
+          >Open drawer</UiButton
+        >
+        <UDrawer
+          v-model:open="drawerOpen"
+          title="Output settings"
+          description="Responsive drawer controls"
+        >
+          <template #body
+            ><UFormField label="File name"><UInput placeholder="Product image" /></UFormField
+          ></template>
+          <template #footer
+            ><UiButton block @click="drawerOpen = false">Apply settings</UiButton></template
+          >
+        </UDrawer>
+      </section>
+
+      <section class="system-lab__panel">
+        <UiText as="h2" size="xl" weight="bold">Media and icons</UiText>
+        <p class="text-sm text-muted">
+          Lucide · 24 × 24 canvas · 2-unit round stroke · 20px default
+        </p>
+        <div class="grid grid-cols-4 items-end gap-3 text-center text-xs" data-icon-sizes>
+          <div
+            v-for="item in previewIconSizes"
+            :key="item.label"
+            class="flex flex-col items-center gap-2"
+          >
+            <UiIcon name="i-lucide-image" :class="item.class" />
+            <span>{{ item.label }}</span>
+          </div>
+        </div>
+        <div class="flex flex-wrap items-center gap-4 text-sm" data-icon-overrides>
+          <span class="inline-flex items-center gap-2"
+            ><UiIcon name="i-lucide-image" />Default</span
+          >
+          <span class="inline-flex items-center gap-2"
+            ><UiIcon name="i-lucide-image" :size="24" />size=24</span
+          >
+          <span class="inline-flex items-center gap-2"
+            ><UiIcon name="i-lucide-image" size="2rem" />size=2rem</span
+          >
+          <UiIcon name="i-lucide-circle-check" label="Ready" class="text-success" />
+        </div>
+        <div class="grid grid-cols-4 gap-4 text-center text-xs" data-icon-catalog>
+          <div
+            v-for="icon in previewIcons"
+            :key="icon"
+            class="flex min-w-0 flex-col items-center gap-2"
+          >
+            <UiIcon :name="icon" class="text-primary" />
+            <span class="break-words">{{ icon.replace("i-lucide-", "") }}</span>
+          </div>
+        </div>
+        <div class="flex items-center gap-4" data-brand-icons>
+          <UiIcon name="brand:apple" label="Apple" class="size-icon-lg" />
+          <UiIcon name="brand:android" label="Android" class="size-icon-lg" />
+          <UiIcon name="brand:whatsapp" label="WhatsApp" class="size-icon-lg" />
+          <span class="text-sm text-muted">Brand proportions and colors</span>
         </div>
+        <UiVideo
+          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+          :autoplay="false"
+          :loop="false"
+          :muted="true"
+          class="aspect-video"
+        />
+      </section>
+
+      <section class="system-lab__panel">
+        <UiText as="h2" size="xl" weight="bold">Countdown and progress</UiText>
+        <CountdownTimer
+          :duration="600"
+          storage-key="component-countdown"
+          :show-milliseconds="true"
+          :update-interval="100"
+        />
+        <StepsProgress :items="['Source', 'Settings', 'Review']" :current-step="2" />
+        <ContentCompatibility :icons="['brand:apple', 'brand:android']" label="Platform icons" />
+      </section>
+
+      <section class="system-lab__panel system-lab__panel--wide">
+        <ContentFaq
+          title="Questions and answers"
+          :items="[
+            {
+              question: 'Can several answers stay open?',
+              answer: 'Yes. Each column supports multiple expanded answers.',
+            },
+            {
+              question: 'Does it work with a keyboard?',
+              answer: 'Use Tab to reach a question and Enter or Space to expand it.',
+            },
+            {
+              question: 'Can answers include custom content?',
+              answer: 'The answer slot accepts links, images, and other components.',
+            },
+          ]"
+        />
+        <StepsShowcase
+          title="Three steps"
+          :steps="previewSteps"
+          :images="previewImages"
+          :autoplay="false"
+        />
+        <ContentReviews
+          title="Review cards"
+          :reviews="[
+            [
+              {
+                author: 'Sample author, Design team',
+                avatar: '/favicon.svg',
+                description:
+                  'Example review text for verifying card dimensions, typography, and motion.',
+              },
+              {
+                author: 'Sample reviewer',
+                avatar: '/favicon.svg',
+                description: 'Hover or focus the row to pause its movement.',
+              },
+            ],
+          ]"
+        />
+        <ContentCallToAction
+          title="Bring your next idea to life"
+          description="A reusable section with project-owned copy, logo, and destination."
+          button-label="Back to Home"
+          to="/"
+          :logo="{ src: '/favicon.svg', alt: 'Application icon' }"
+        />
       </section>
     </div>
   </section>
@@ -285,7 +493,13 @@ useSeo({
   gap: 18px;
   border: 1px solid var(--site-color-border);
   border-radius: var(--site-radius-lg);
-  background: linear-gradient(180deg, rgb(168 101 80 / 4%), transparent), var(--site-color-surface);
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--site-color-primary) 4%, transparent),
+      transparent
+    ),
+    var(--site-color-surface);
   padding: 22px;
 }
 
@@ -321,11 +535,13 @@ useSeo({
 }
 
 .system-lab__actions {
-  grid-template-columns: repeat(3, minmax(0, max-content));
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
 }
 
 .system-lab__actions--stacked {
+  display: grid;
   grid-template-columns: 1fr;
   justify-items: start;
 }

package/dist/resources/templates/nuxt/nuxt.config.ts

@@ -45,11 +45,9 @@ export default defineNuxtConfig({
     },
   },
   icon: {
+    serverBundle: { collections: ["lucide"] },
+    fallbackToApi: false,
     customCollections: [
-      {
-        prefix: "common",
-        dir: "./app/assets/icons/common",
-      },
       {
         prefix: "brand",
         dir: "./app/assets/icons/brand",

package/dist/resources/templates/nuxt/package.json

@@ -31,7 +31,8 @@
     "@stackonward/api-client": "^0.0.3",
     "@stackonward/google-tag-manager-nuxt": "^0.3.3",
     "@stackonward/nuxt-layer-base": "^0.0.4",
-    "@stackonward/nuxt-site-shell": "^0.3.2"
+    "@stackonward/nuxt-site-shell": "^0.3.2",
+    "@stackonward/composables": "^0.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^21.2.2",