@stackonward/cli 1.6.0 → 1.7.0

package/dist/index.js

@@ -19313,7 +19313,7 @@ function registerDeploy(program2) {
 
 // src/index.ts
 var program = new Command();
-program.name("stackonward").description("Create projects and install reusable components and snippets").version("1.6.0");
+program.name("stackonward").description("Create projects and install reusable components and snippets").version("1.7.0");
 program.command("init [name]").description("Create a new project from template").option("-t, --template <template>", "Template to use").option("-d, --dir <directory>", "Target directory").option("--skip-install", "Skip dependency installation").option("--skip-git", "Skip git initialization").option("--module <module>", "Go module path (required for go-backend)").option("--author <author>", "Author name").option("-y, --yes", "Use defaults without interactive prompts").action(init);
 program.command("add [items...]").description("Add components or snippets to your project").option("-c, --component", "Add component(s)").option("-s, --snippet", "Add snippet(s)").option("-a, --all", "Add all items in category").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").option("-p, --path <path>", "Custom install path").action(add);
 program.command("list [type]").description("List available templates, components, or snippets").option("-t, --templates", "List templates").option("-c, --components", "List components").option("-s, --snippets", "List snippets").action(list);

package/dist/resources/components/nuxt/site-source/app/assets/css/site-shell.css

@@ -2,6 +2,12 @@
 @import "@nuxt/ui";
 
 @theme inline {
+  --spacing-control-xs: var(--site-control-height-xs);
+  --spacing-control-sm: var(--site-control-height-sm);
+  --spacing-control-md: var(--site-control-height-md);
+  --spacing-control-lg: var(--site-control-height-lg);
+  --spacing-control-xl: var(--site-control-height-xl);
+  --spacing-control-2xl: var(--site-control-height-2xl);
   --spacing-icon-xs: var(--site-icon-xs);
   --spacing-icon-sm: var(--site-icon-sm);
   --spacing-icon-md: var(--site-icon-md);
@@ -36,8 +42,8 @@
   --color-dimmed: var(--site-color-dimmed);
   --color-border: var(--site-color-border);
   --color-border-strong: var(--site-color-border-strong);
-  --radius-ml: 10px;
-  --radius-2ml: 20px;
+  --radius-ml: var(--site-radius-md);
+  --radius-2ml: var(--site-radius-lg);
   --shadow-accordion:
     0 4px 16px color-mix(in srgb, var(--site-color-border) 40%, transparent),
     0 11px 24px color-mix(in srgb, var(--site-color-border) 20%, transparent);
@@ -49,6 +55,12 @@
 }
 
 :root {
+  --site-control-height-xs: 2rem;
+  --site-control-height-sm: 2.25rem;
+  --site-control-height-md: 2.625rem;
+  --site-control-height-lg: 3rem;
+  --site-control-height-xl: 3.25rem;
+  --site-control-height-2xl: 3.5rem;
   --site-icon-xs: 0.75rem;
   --site-icon-sm: 1rem;
   --site-icon-md: 1.25rem;

package/dist/resources/components/nuxt/site-source/app/components/content/CallToAction.vue

@@ -34,7 +34,9 @@ defineProps<{
         {{ description }}
       </p>
       <slot name="action"
-        ><UiButton :to="to" size="lg">{{ buttonLabel }}</UiButton></slot
+        ><UiButton :to="to" size="2xl" class="min-w-[200px] max-w-full">{{
+          buttonLabel
+        }}</UiButton></slot
       >
     </div>
     <UiImage

package/dist/resources/components/nuxt/site-source/app/components/content/Faq.vue

@@ -46,8 +46,8 @@ const columns = computed(() =>
       <UiButton
         v-if="buttonLabel"
         :to="to"
-        size="lg"
-        class="mx-auto mt-12.5 flex max-md:mt-7.5"
+        size="2xl"
+        class="w-fit min-w-[200px] max-w-full mx-auto mt-12.5 flex max-md:mt-7.5"
         @click="emit('button-click', $event)"
         >{{ buttonLabel }}</UiButton
       >

package/dist/resources/components/nuxt/site-source/app/components/content/Reviews.vue

@@ -51,8 +51,8 @@
 
     <UiButton
       v-if="showButton"
-      size="lg"
-      class="flex justify-center mx-auto"
+      size="2xl"
+      class="w-fit min-w-[200px] max-w-full flex justify-center mx-auto"
       :label="buttonText"
       ripple
       :to="to"

package/dist/resources/components/nuxt/site-source/app/components/steps/Showcase.vue

@@ -144,9 +144,9 @@ onMounted(resumeAutoplay);
       <slot name="footer">
         <UiButton
           v-if="showButton"
-          size="lg"
+          size="2xl"
           :label="buttonText"
-          class="flex justify-center mt-10 mx-auto max-lg:mt-0"
+          class="w-fit min-w-[200px] max-w-full flex justify-center mt-10 mx-auto max-lg:mt-0"
           ripple
           :to="to"
         />

package/dist/resources/components/nuxt/site-source/app/theme/button.ts

@@ -1,6 +1,6 @@
 export default {
   slots: {
-    base: "border-0 rounded-ml font-medium  inline-flex items-center justify-center cursor-pointer disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors min-w-[200px]",
+    base: "border-0 rounded-ml font-medium inline-flex items-center justify-center cursor-pointer disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors",
     label: "truncate",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
@@ -13,44 +13,39 @@ export default {
       vertical:
         "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none",
     },
-    variant: {
-      link: "h-auto min-w-0 p-0",
-      ghost: "min-w-0",
-    },
-    color: { neutral: "min-w-0" },
     size: {
       xs: {
-        base: "px-3 py-1 text-xs h-8 gap-1",
+        base: "px-3 py-0 text-xs/4 h-control-xs gap-1.5",
         leadingIcon: "size-icon-sm",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-icon-sm",
       },
       sm: {
-        base: "px-4 py-1.5 text-sm h-10 gap-1.5",
+        base: "px-4 py-0 text-sm/5 h-control-sm gap-1.5",
         leadingIcon: "size-icon-sm",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-icon-sm",
       },
       md: {
-        base: "px-5 py-2 text-base h-12 gap-2",
+        base: "px-5 py-0 text-sm/5 h-control-md gap-2",
         leadingIcon: "size-icon-md",
         leadingAvatarSize: "2xs",
         trailingIcon: "size-icon-md",
       },
       lg: {
-        base: "px-6 py-2.5 text-sm w-[214px] h-[54px] gap-2",
+        base: "px-6 py-0 text-base/6 h-control-lg gap-2",
         leadingIcon: "size-icon-md",
         leadingAvatarSize: "2xs",
         trailingIcon: "size-icon-md",
       },
       xl: {
-        base: "px-7 py-3 text-xl w-[240px] h-16 gap-2",
+        base: "px-7 py-0 text-lg/7 h-control-xl gap-2",
         leadingIcon: "size-icon-lg",
         leadingAvatarSize: "xs",
         trailingIcon: "size-icon-lg",
       },
       "2xl": {
-        base: "px-8 py-3.5 font-semibold text-lg w-[310px] h-15 gap-2 max-lg:w-[285px] max-lg:h-[48px]",
+        base: "px-8 py-0 text-lg/7 h-control-2xl gap-2",
         leadingIcon: "size-icon-lg",
         leadingAvatarSize: "sm",
         trailingIcon: "size-icon-lg",
@@ -77,9 +72,9 @@ export default {
       color: "neutral",
       variant: "outline",
       class:
-        "border-0 ring-1 ring-inset ring-border bg-surface text-text hover:bg-surface-muted focus-visible:ring-primary focus-visible:outline-none",
+        "border-0 ring-1 ring-inset ring-border bg-surface text-text hover:bg-surface-muted focus-visible:ring-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
     },
-    { size: "2xl", square: true, class: "w-15 min-w-0 p-3.5 max-lg:w-12" },
+    { size: "2xl", square: true, class: "w-control-2xl p-0" },
     {
       color: "primary",
       variant: "solid",
@@ -90,7 +85,7 @@ export default {
       color: "primary",
       variant: "outline",
       class:
-        "text-primary-hover ring-[2px] ring-primary hover:bg-primary hover:text-primary-contrast active:transition-none active:ring-primary-hover active:bg-primary-hover active:text-primary-contrast focus:outline-none focus:transition-none focus-visible:ring-2 focus-visible:ring-primary-hover",
+        "text-primary-hover ring-1 ring-inset ring-primary hover:bg-primary hover:text-primary-contrast active:transition-none active:ring-primary-hover active:bg-primary-hover active:text-primary-contrast focus:outline-none focus:transition-none focus-visible:ring-2 focus-visible:ring-primary-hover",
     },
     {
       color: "primary",
@@ -126,7 +121,7 @@ export default {
       color: "success",
       variant: "outline",
       class:
-        "text-success-hover ring-[2px] ring-success hover:bg-success hover:text-success-contrast active:transition-none active:ring-success-hover active:bg-success-hover active:text-success-contrast focus:outline-none focus:transition-none focus-visible:ring-2 focus-visible:ring-success-hover",
+        "text-success-hover ring-1 ring-inset ring-success hover:bg-success hover:text-success-contrast active:transition-none active:ring-success-hover active:bg-success-hover active:text-success-contrast focus:outline-none focus:transition-none focus-visible:ring-2 focus-visible:ring-success-hover",
     },
     {
       color: "success",
@@ -155,27 +150,27 @@ export default {
     {
       size: "xs",
       square: true,
-      class: "w-8 min-w-0 p-1",
+      class: "w-control-xs p-0",
     },
     {
       size: "sm",
       square: true,
-      class: "w-10 min-w-0 p-1.5",
+      class: "w-control-sm p-0",
     },
     {
       size: "md",
       square: true,
-      class: "w-12 min-w-0 p-1.5",
+      class: "w-control-md p-0",
     },
     {
       size: "lg",
       square: true,
-      class: "w-[54px] min-w-0 p-2",
+      class: "w-control-lg p-0",
     },
     {
       size: "xl",
       square: true,
-      class: "w-16 min-w-0 p-2",
+      class: "w-control-xl p-0",
     },
     {
       loading: true,
@@ -192,10 +187,11 @@ export default {
         trailingIcon: "animate-spin",
       },
     },
+    { variant: "link", class: "h-auto min-w-0 p-0" },
     { square: true, class: "min-h-11 min-w-11" },
   ],
   defaultVariants: {
-    color: "success",
+    color: "primary",
     variant: "solid",
     size: "md",
   },

package/dist/resources/components/nuxt/site-source/app/theme/index.ts

@@ -16,6 +16,30 @@ import textarea from "./textarea";
 import tooltip from "./tooltip";
 
 const siteUiTheme = {
+  tv: {
+    twMergeConfig: {
+      extend: {
+        theme: {
+          radius: ["ml", "2ml"],
+          spacing: [
+            "control-xs",
+            "control-sm",
+            "control-md",
+            "control-lg",
+            "control-xl",
+            "control-2xl",
+            "icon-xs",
+            "icon-sm",
+            "icon-md",
+            "icon-lg",
+            "icon-xl",
+            "icon-2xl",
+            "icon-3xl",
+          ],
+        },
+      },
+    },
+  },
   accordion,
   breadcrumb,
   button,

package/dist/resources/components/nuxt/site-source/app/theme/input.ts

@@ -1,46 +1,46 @@
 export default {
   slots: {
     root: "w-full ring-border",
-    base: ["min-h-11 border-0 rounded-ml bg-surface text-text", "transition-colors"],
+    base: "border-0 rounded-ml bg-surface text-text transition-colors",
   },
   variants: {
     size: {
       xs: {
-        base: "px-2 py-1 text-xs gap-1",
-        leading: "ps-2",
-        trailing: "pe-2",
+        base: "h-control-xs px-3 py-0 text-xs/4 gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
         leadingIcon: "size-icon-sm",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-icon-sm",
       },
       sm: {
-        base: "px-2.5 py-1.5 text-xs gap-1.5",
-        leading: "ps-2.5",
-        trailing: "pe-2.5",
+        base: "h-control-sm px-3 py-0 text-sm/5 gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
         leadingIcon: "size-icon-sm",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-icon-sm",
       },
       md: {
-        base: "px-2.5 py-1.5 text-sm gap-1.5",
-        leading: "ps-2.5",
-        trailing: "pe-2.5",
+        base: "h-control-md px-3.5 py-0 text-sm/5 gap-2",
+        leading: "ps-3.5",
+        trailing: "pe-3.5",
         leadingIcon: "size-icon-md",
         leadingAvatarSize: "2xs",
         trailingIcon: "size-icon-md",
       },
       lg: {
-        base: "px-3 py-2 text-sm gap-2",
-        leading: "ps-3",
-        trailing: "pe-3",
+        base: "h-control-lg px-4 py-0 text-base/6 gap-2",
+        leading: "ps-4",
+        trailing: "pe-4",
         leadingIcon: "size-icon-md",
         leadingAvatarSize: "2xs",
         trailingIcon: "size-icon-md",
       },
       xl: {
-        base: "px-3 py-2 text-base gap-2",
-        leading: "ps-3",
-        trailing: "pe-3",
+        base: "h-control-xl px-4.5 py-0 text-lg/7 gap-2",
+        leading: "ps-4.5",
+        trailing: "pe-4.5",
         leadingIcon: "size-icon-lg",
         leadingAvatarSize: "xs",
         trailingIcon: "size-icon-lg",
@@ -52,8 +52,23 @@ export default {
       color: "primary",
       variant: ["outline", "subtle"],
       class:
-        "ring-border text-base placeholder:text-dimmed focus-visible:ring-1! focus-visible:outline-none max-md:text-sm",
+        "ring-1 ring-inset ring-border focus-visible:ring-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
     },
+    { leading: true, size: "xs", class: "ps-9" },
+    { trailing: true, size: "xs", class: "pe-9" },
+    { fixed: false, size: "xs", class: "max-md:text-base md:text-xs" },
+    { leading: true, size: "sm", class: "ps-9" },
+    { trailing: true, size: "sm", class: "pe-9" },
+    { fixed: false, size: "sm", class: "max-md:text-base md:text-sm" },
+    { leading: true, size: "md", class: "ps-10.5" },
+    { trailing: true, size: "md", class: "pe-10.5" },
+    { fixed: false, size: "md", class: "max-md:text-base md:text-sm" },
+    { leading: true, size: "lg", class: "ps-11" },
+    { trailing: true, size: "lg", class: "pe-11" },
+    { fixed: false, size: "lg", class: "max-md:text-base md:text-base" },
+    { leading: true, size: "xl", class: "ps-12.5" },
+    { trailing: true, size: "xl", class: "pe-12.5" },
+    { fixed: false, size: "xl", class: "max-md:text-base md:text-lg" },
   ],
   defaultVariants: {
     size: "md",

package/dist/resources/components/nuxt/site-source/app/theme/modal.ts

@@ -8,6 +8,6 @@ export default {
   },
   variants: {
     overlay: { true: { overlay: "bg-neutral/60" } },
-    fullscreen: { false: { content: "rounded-ml ring-0" } },
+    fullscreen: { false: { content: "rounded-2ml ring-0" } },
   },
 };

package/dist/resources/components/nuxt/site-source/app/theme/select.ts

@@ -1,31 +1,75 @@
 export default {
   slots: {
-    base: ["min-h-11 border-0 rounded-ml bg-surface text-text"],
-    value: "ps-5 text-base max-md:text-sm",
-    placeholder: "text-dimmed ps-5 text-base max-md:text-sm",
-    group: "p-2.5",
-    content: "border-0 rounded-ml ring-1 ring-border bg-surface-muted",
-    item: [
-      "rounded-ml !py-3.5 !px-2.5 text-muted bg-transparent data-highlighted:text-muted hover:bg-surface data-[state=checked]:bg-surface",
-    ],
+    base: "border-0 rounded-ml bg-surface text-text",
+    value: "truncate",
+    placeholder: "truncate text-dimmed",
+    group: "p-1.5",
+    content: "border-0 rounded-ml ring-1 ring-border bg-surface",
+    item: "min-h-11 rounded-ml px-3 py-2 text-sm/5 text-text data-highlighted:bg-surface-muted data-[state=checked]:bg-surface-muted",
     trailingIcon:
       "group-data-[state=open]:rotate-180 transition-transform duration-200 text-dimmed",
-    itemTrailingIcon: "hidden",
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "h-control-xs px-3 py-0 text-xs/4 gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        leadingIcon: "size-icon-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-icon-sm",
+      },
+      sm: {
+        base: "h-control-sm px-3 py-0 text-sm/5 gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        leadingIcon: "size-icon-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-icon-sm",
+      },
+      md: {
+        base: "h-control-md px-3.5 py-0 text-sm/5 gap-2",
+        leading: "ps-3.5",
+        trailing: "pe-3.5",
+        leadingIcon: "size-icon-md",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-icon-md",
+      },
+      lg: {
+        base: "h-control-lg px-4 py-0 text-base/6 gap-2",
+        leading: "ps-4",
+        trailing: "pe-4",
+        leadingIcon: "size-icon-md",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-icon-md",
+      },
+      xl: {
+        base: "h-control-xl px-4.5 py-0 text-lg/7 gap-2",
+        leading: "ps-4.5",
+        trailing: "pe-4.5",
+        leadingIcon: "size-icon-lg",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-icon-lg",
+      },
+    },
   },
   compoundVariants: [
     {
       color: "primary",
       variant: ["outline", "subtle"],
-      class: "p-0 ring-border focus-visible:ring-1! focus-visible:outline-none",
-    },
-    {
-      leading: true,
-      class: { value: "ps-10", placeholder: "ps-10" },
-    },
-    {
-      trailing: true,
-      class: { value: "pe-10", placeholder: "pe-10" },
+      class:
+        "ring-1 ring-inset ring-border focus-visible:ring-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
     },
+    { leading: true, size: "xs", class: "ps-9" },
+    { trailing: true, size: "xs", class: "pe-9" },
+    { leading: true, size: "sm", class: "ps-9" },
+    { trailing: true, size: "sm", class: "pe-9" },
+    { leading: true, size: "md", class: "ps-10.5" },
+    { trailing: true, size: "md", class: "pe-10.5" },
+    { leading: true, size: "lg", class: "ps-11" },
+    { trailing: true, size: "lg", class: "pe-11" },
+    { leading: true, size: "xl", class: "ps-12.5" },
+    { trailing: true, size: "xl", class: "pe-12.5" },
   ],
   defaultVariants: {
     size: "md",

package/dist/resources/components/nuxt/site-source/app/theme/textarea.ts

@@ -1,6 +1,78 @@
 export default {
   slots: {
     root: "w-full",
-    base: "w-full border-0 rounded-ml bg-surface px-3 py-2 text-sm leading-6 text-text placeholder:text-dimmed ring-border focus-visible:ring-1! focus-visible:ring-primary focus-visible:outline-none",
+    base: "w-full border-0 rounded-ml bg-surface text-text placeholder:text-dimmed transition-colors",
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "px-3 py-1.5 text-xs/4 gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        leadingIcon: "size-icon-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-icon-sm",
+      },
+      sm: {
+        base: "px-3 py-2 text-sm/5 gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        leadingIcon: "size-icon-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-icon-sm",
+      },
+      md: {
+        base: "px-3.5 py-2.5 text-sm/5 gap-2",
+        leading: "ps-3.5",
+        trailing: "pe-3.5",
+        leadingIcon: "size-icon-md",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-icon-md",
+      },
+      lg: {
+        base: "px-4 py-3 text-base/6 gap-2",
+        leading: "ps-4",
+        trailing: "pe-4",
+        leadingIcon: "size-icon-md",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-icon-md",
+      },
+      xl: {
+        base: "px-4.5 py-3 text-lg/7 gap-2",
+        leading: "ps-4.5",
+        trailing: "pe-4.5",
+        leadingIcon: "size-icon-lg",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-icon-lg",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      variant: ["outline", "subtle"],
+      class:
+        "ring-1 ring-inset ring-border focus-visible:ring-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+    },
+    { leading: true, size: "xs", class: "ps-9" },
+    { trailing: true, size: "xs", class: "pe-9" },
+    { fixed: false, size: "xs", class: "max-md:text-base md:text-xs" },
+    { leading: true, size: "sm", class: "ps-9" },
+    { trailing: true, size: "sm", class: "pe-9" },
+    { fixed: false, size: "sm", class: "max-md:text-base md:text-sm" },
+    { leading: true, size: "md", class: "ps-10.5" },
+    { trailing: true, size: "md", class: "pe-10.5" },
+    { fixed: false, size: "md", class: "max-md:text-base md:text-sm" },
+    { leading: true, size: "lg", class: "ps-11" },
+    { trailing: true, size: "lg", class: "pe-11" },
+    { fixed: false, size: "lg", class: "max-md:text-base md:text-base" },
+    { leading: true, size: "xl", class: "ps-12.5" },
+    { trailing: true, size: "xl", class: "pe-12.5" },
+    { fixed: false, size: "xl", class: "max-md:text-base md:text-lg" },
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    variant: "outline",
   },
 };

package/dist/resources/registry.json

@@ -21,7 +21,7 @@
     "name": "@stackonward/cli",
     "description": "StackOnward project and resource CLI",
     "type": "npm",
-    "version": "^1.6.0"
+    "version": "^1.7.0"
   },
   "@stackonward/cms-client": {
     "name": "@stackonward/cms-client",

package/dist/resources/templates/nuxt/.claude/docs/stack.md

@@ -372,6 +372,12 @@ const emit = defineEmits<{ submit: [] }>();
 
 Use Tailwind utilities and theme tokens. Scoped CSS is for behavior that utilities cannot express cleanly. Dark/light modes must use the same semantic tokens; never fix one page with a hardcoded light background that breaks dark mode.
 
+### Control Geometry and Scene Selection
+
+**MUST** follow [DESIGN.md](../../DESIGN.md#control-geometry-and-visual-scenarios) for control sizes, text/line height, padding, radii, widths and focus treatment. Marketing CTAs and product UI share `UiButton` and the existing Nuxt UI themes. Marketing sections select prominent actions and own their wider layout; product navigation, workbenches and forms select compact or form-sized controls from the same scale.
+
+Use `size` for the shared geometry and `block`/`fullWidth` for a full-width button. Keep section-specific CTA minimum widths at their section owner. **FORBIDDEN**: a second button implementation, marketing minimum widths in the generic theme or arbitrary per-page height/font/radius overrides for an existing size. Editable mobile fields retain the theme's readable text size; compact icon actions retain their accessible target.
+
 ### Icon Design Contract
 
 **MUST** read [DESIGN.md](../../DESIGN.md) for icon geometry, the size scale, semantic colors and acceptance. The installed system uses local Lucide functional icons and a separate `brand` collection. `UiIcon` owns standalone `name`, `size?: string | number` and `label?: string`; Nuxt UI controls retain their internal icon slots and use the same provider.
@@ -677,7 +683,7 @@ Read [Architecture](architecture.md), [Security and Lifecycle](security-lifecycl
 - [ ] Private configuration never enters public payloads.
 - [ ] Every visible action maps to a real implementation and error path.
 - [ ] All applicable NX-S/A/T/C/H/E/M/P/U rules are checked.
-- [ ] Design coverage includes children, overlays, icon sizes/names/targets and loading/empty/error/forbidden states.
+- [ ] Design coverage includes children, overlays, scene-appropriate control geometry, icon sizes/names/targets and loading/empty/error/forbidden states.
 - [ ] `pnpm typecheck` and `pnpm build` pass for code/contract changes.
 - [ ] Browser and network evidence proves the touched interactions.
 - [ ] No uninstalled lint/test/authorization capability is claimed.

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

@@ -13,18 +13,61 @@ This document defines the visual contract for the application-owned Nuxt UI foun
 
 ## Ownership
 
-| Owner                                            | Contract                                                                                    |
-| ------------------------------------------------ | ------------------------------------------------------------------------------------------- |
-| `app/assets/css/site-shell.css`                  | `--site-icon-*` size tokens, `size-icon-*` 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`, `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                                                        |
+| 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).
@@ -136,6 +179,8 @@ Use the existing locale owner for labels, visible focus on controls and the comp
 
 ### 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackonward/cli",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "StackOnward CLI for creating projects and installing reusable components and snippets",
   "type": "module",
   "main": "dist/index.js",