@stackonward/cli 1.5.3 → 1.6.0

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",

package/dist/resources/templates/nuxt/stylelint.config.mjs

@@ -1,3 +1,15 @@
 export default {
   extends: ["@stackonward/stylelint-config"],
+  overrides: [
+    {
+      files: ["app/**/*.vue"],
+      customSyntax: "postcss-html",
+      rules: {
+        "selector-pseudo-class-no-unknown": [
+          true,
+          { ignorePseudoClasses: ["deep", "global", "slotted"] },
+        ],
+      },
+    },
+  ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackonward/cli",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "StackOnward CLI for creating projects and installing reusable components and snippets",
   "type": "module",
   "main": "dist/index.js",
@@ -37,9 +37,9 @@
     "prompts": "^2.4.2",
     "zod": "4",
     "@stackonward/api-client": "0.0.3",
-    "@stackonward/onedev-provisioning": "0.1.0",
+    "@stackonward/google-tag-manager": "0.3.0",
     "@stackonward/provisioning": "0.1.0",
-    "@stackonward/google-tag-manager": "0.3.0"
+    "@stackonward/onedev-provisioning": "0.1.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",