@stackonward/cli 1.3.3 → 1.4.0

package/dist/resources/components/registry.json

@@ -144,7 +144,7 @@
   },
   "nuxt-site-source": {
     "name": "Nuxt Site Source",
-    "description": "Editable Nuxt product-site source: app shell, marketing shell, content shell, UI primitives, composables, plugins, theme tokens, and CSS.",
+    "description": "Editable Nuxt product-site source: site shell, app shell, content shell, UI primitives, composables, plugins, theme tokens, and CSS.",
     "installContext": "template",
     "files": [
       {
@@ -164,108 +164,108 @@
         "target": "app/assets/icons/common/.gitkeep"
       },
       {
-        "path": "site-source/app/components/site/ApplicationHeader.vue",
-        "target": "app/components/site/ApplicationHeader.vue"
+        "path": "site-source/app/components/app/Header.vue",
+        "target": "app/components/app/Header.vue"
       },
       {
-        "path": "site-source/app/components/site/ApplicationShell.vue",
-        "target": "app/components/site/ApplicationShell.vue"
+        "path": "site-source/app/components/app/Shell.vue",
+        "target": "app/components/app/Shell.vue"
       },
       {
-        "path": "site-source/app/components/site/ApplicationSidebar.vue",
-        "target": "app/components/site/ApplicationSidebar.vue"
+        "path": "site-source/app/components/app/Sidebar.vue",
+        "target": "app/components/app/Sidebar.vue"
       },
       {
         "path": "site-source/app/components/site/BackToTop.vue",
         "target": "app/components/site/BackToTop.vue"
       },
       {
-        "path": "site-source/app/components/site/ContentArticlePage.vue",
-        "target": "app/components/site/ContentArticlePage.vue"
+        "path": "site-source/app/components/content/Article.vue",
+        "target": "app/components/content/Article.vue"
       },
       {
-        "path": "site-source/app/components/site/ContentListPage.vue",
-        "target": "app/components/site/ContentListPage.vue"
+        "path": "site-source/app/components/content/List.vue",
+        "target": "app/components/content/List.vue"
       },
       {
-        "path": "site-source/app/components/site/ConsentSettingsButton.vue",
-        "target": "app/components/site/ConsentSettingsButton.vue"
+        "path": "site-source/app/components/consent/Settings.vue",
+        "target": "app/components/consent/Settings.vue"
       },
       {
-        "path": "site-source/app/components/site/CookieConsent.vue",
-        "target": "app/components/site/CookieConsent.vue"
+        "path": "site-source/app/components/consent/Banner.vue",
+        "target": "app/components/consent/Banner.vue"
       },
       {
-        "path": "site-source/app/components/site/LocaleSwitcher.vue",
-        "target": "app/components/site/LocaleSwitcher.vue"
+        "path": "site-source/app/components/locale/Menu.vue",
+        "target": "app/components/locale/Menu.vue"
       },
       {
-        "path": "site-source/app/components/site/MarketingFooter.vue",
-        "target": "app/components/site/MarketingFooter.vue"
+        "path": "site-source/app/components/site/Footer.vue",
+        "target": "app/components/site/Footer.vue"
       },
       {
-        "path": "site-source/app/components/site/MarketingHeader.vue",
-        "target": "app/components/site/MarketingHeader.vue"
+        "path": "site-source/app/components/site/Header.vue",
+        "target": "app/components/site/Header.vue"
       },
       {
-        "path": "site-source/app/components/site/MarketingShell.vue",
-        "target": "app/components/site/MarketingShell.vue"
+        "path": "site-source/app/components/site/Shell.vue",
+        "target": "app/components/site/Shell.vue"
       },
       {
-        "path": "site-source/app/components/site/SiteBrand.vue",
-        "target": "app/components/site/SiteBrand.vue"
+        "path": "site-source/app/components/site/Brand.vue",
+        "target": "app/components/site/Brand.vue"
       },
       {
-        "path": "site-source/app/components/site/StaticPage.vue",
-        "target": "app/components/site/StaticPage.vue"
+        "path": "site-source/app/components/content/Document.vue",
+        "target": "app/components/content/Document.vue"
       },
       {
-        "path": "site-source/app/components/site/ToastViewport.vue",
-        "target": "app/components/site/ToastViewport.vue"
+        "path": "site-source/app/components/feedback/Toast.vue",
+        "target": "app/components/feedback/Toast.vue"
       },
       {
-        "path": "site-source/app/components/site/ThemeSwitcher.vue",
-        "target": "app/components/site/ThemeSwitcher.vue"
+        "path": "site-source/app/components/theme/Menu.vue",
+        "target": "app/components/theme/Menu.vue"
       },
       {
-        "path": "site-source/app/components/ui/BaseButton.vue",
-        "target": "app/components/ui/BaseButton.vue"
+        "path": "site-source/app/components/ui/Button.vue",
+        "target": "app/components/ui/Button.vue"
       },
       {
-        "path": "site-source/app/components/ui/BaseGradientBorder.vue",
-        "target": "app/components/ui/BaseGradientBorder.vue"
+        "path": "site-source/app/components/ui/GradientBorder.vue",
+        "target": "app/components/ui/GradientBorder.vue"
       },
       {
-        "path": "site-source/app/components/ui/BaseModal.vue",
-        "target": "app/components/ui/BaseModal.vue"
+        "path": "site-source/app/components/ui/Modal.vue",
+        "target": "app/components/ui/Modal.vue"
       },
       {
-        "path": "site-source/app/components/ui/BasePopover.vue",
-        "target": "app/components/ui/BasePopover.vue"
+        "path": "site-source/app/components/ui/Popover.vue",
+        "target": "app/components/ui/Popover.vue"
       },
       {
-        "path": "site-source/app/components/ui/BaseText.vue",
-        "target": "app/components/ui/BaseText.vue"
+        "path": "site-source/app/components/ui/Text.vue",
+        "target": "app/components/ui/Text.vue"
       },
       {
-        "path": "site-source/app/components/ui/CheckoutStatus.vue",
-        "target": "app/components/ui/CheckoutStatus.vue"
+        "path": "site-source/app/components/checkout/Status.vue",
+        "target": "app/components/checkout/Status.vue"
       },
       {
-        "path": "site-source/app/components/ui/CheckoutSummary.vue",
-        "target": "app/components/ui/CheckoutSummary.vue"
+        "path": "site-source/app/components/checkout/Summary.vue",
+        "target": "app/components/checkout/Summary.vue"
       },
       {
-        "path": "site-source/app/components/ui/GoogleSignInButton.vue",
-        "target": "app/components/ui/GoogleSignInButton.vue"
+        "path": "site-source/app/components/google/SignInButton.vue",
+        "target": "app/components/google/SignInButton.vue"
       },
       {
         "path": "site-source/app/components/ui/InfiniteScroll.vue",
         "target": "app/components/ui/InfiniteScroll.vue"
       },
       {
-        "path": "site-source/app/components/ui/YoutubeEmbed.vue",
-        "target": "app/components/ui/YoutubeEmbed.vue"
+        "path": "site-source/app/components/youtube/Embed.vue",
+        "target": "app/components/youtube/Embed.vue"
       },
       {
         "path": "site-source/app/composables/useCheckout.ts",
@@ -364,8 +364,20 @@
         "target": "app/theme/tooltip.ts"
       },
       {
-        "path": "site-source/app/types/site-shell.ts",
-        "target": "app/types/site-shell.ts"
+        "path": "site-source/app/consent/types.ts",
+        "target": "app/consent/types.ts"
+      },
+      {
+        "path": "site-source/app/content/types.ts",
+        "target": "app/content/types.ts"
+      },
+      {
+        "path": "site-source/app/navigation/types.ts",
+        "target": "app/navigation/types.ts"
+      },
+      {
+        "path": "site-source/app/site/config.ts",
+        "target": "app/site/config.ts"
       }
     ],
     "dependencies": [],

package/dist/resources/registry.json

@@ -9,19 +9,19 @@
     "name": "@stackonward/analytics-core",
     "description": "Provider-neutral analytics pipeline and browser autocapture",
     "type": "npm",
-    "version": "^0.2.1"
+    "version": "^0.3.0"
   },
   "@stackonward/analytics-nuxt": {
     "name": "@stackonward/analytics-nuxt",
     "description": "Provider-neutral Nuxt analytics lifecycle",
     "type": "npm",
-    "version": "^0.1.2"
+    "version": "^0.2.0"
   },
   "@stackonward/cli": {
     "name": "@stackonward/cli",
     "description": "StackOnward project and resource CLI",
     "type": "npm",
-    "version": "^1.3.3"
+    "version": "^1.4.0"
   },
   "@stackonward/cms-client": {
     "name": "@stackonward/cms-client",
@@ -69,13 +69,13 @@
     "name": "@stackonward/google-tag-manager-nuxt",
     "description": "Consent-aware Google Tag Manager analytics integration for Nuxt",
     "type": "npm",
-    "version": "^0.2.3"
+    "version": "^0.3.0"
   },
   "@stackonward/google-tag-manager": {
     "name": "@stackonward/google-tag-manager",
     "description": "Google Tag Manager transport and declarative container generator",
     "type": "npm",
-    "version": "^0.1.1"
+    "version": "^0.2.0"
   },
   "@stackonward/identity-browser": {
     "name": "@stackonward/identity-browser",
@@ -111,7 +111,7 @@
     "name": "@stackonward/nuxt-site-shell",
     "description": "Brand-free Nuxt product-site shell",
     "type": "layer",
-    "version": "^0.2.0"
+    "version": "^0.3.0"
   },
   "@stackonward/onex-cms-client": {
     "name": "@stackonward/onex-cms-client",

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

@@ -3,8 +3,8 @@
 This template extends `@stackonward/nuxt-site-shell` for Nuxt module wiring and installs editable source from the component registry, so a new project starts with:
 
 - Nuxt UI and Tailwind theme wiring.
-- Local source files for marketing, app, content and static page shells under `app/layouts` and `app/components`.
-- Editable base components such as `BaseButton`, `BaseModal`, `BaseText`, `BasePopover`, `GoogleSignInButton`, `YoutubeEmbed`, `InfiniteScroll`, `CheckoutSummary` and `CheckoutStatus`.
+- Local source files for site, app and content shells under `app/layouts` and owner-scoped component directories.
+- Owner-scoped components such as `UiButton`, `UiModal`, `UiText`, `UiPopover`, `GoogleSignInButton`, `YoutubeEmbed`, `UiInfiniteScroll`, `CheckoutSummary` and `CheckoutStatus`.
 - Editable composables and plugins for Google Identity, consent presentation, privacy-enhanced YouTube embeds and provider-free checkout redirects.
 - Versioned global analytics through `@stackonward/google-tag-manager-nuxt`, including consent gating, SPA page views, element/link autocapture, manual events and product-configurable capture rules.
 - Local Nuxt UI theme overrides under `app/theme` and CSS tokens under `app/assets/css`.
@@ -16,7 +16,7 @@ Product-specific copy, assets, auth, analytics, CMS providers and business workf
 
 Set `NUXT_PUBLIC_GTM_ID` to a published GTM container such as `GTM-ABC123`. The integration remains disabled when the ID is empty. The included consent UI restores the product-owned local decision and starts analytics only after acceptance.
 
-Global capture defaults and product overrides live under `googleTagManager.analytics` in `nuxt.config.ts`. Products can configure selectors, internal domains, tracked link types, module naming/rules, event names, device breakpoints and privacy-sensitive field capture. Business event names remain typed in product source.
+Global capture defaults and product overrides live under `gtm.analytics` in `nuxt.config.ts`. Products can configure selectors, internal domains, tracked link types, module naming/rules, event names, device breakpoints and privacy-sensitive field capture. Business event names remain typed in product source.
 
 Create a product-owned `analytics.google.json` with the GA4 measurement ID and any product event parameters, then generate the GTM import artifact without granting account credentials to the application:
 

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

@@ -51,7 +51,7 @@ export default defineAppConfig({
       },
     ],
     navigation: {
-      marketing: [
+      main: [
         { labelKey: "navigation.items.product", to: "/" },
         {
           labelKey: "navigation.items.solutions",

package/dist/resources/templates/nuxt/app/i18n/locales/en.json

@@ -7,7 +7,7 @@
     "home": "Home",
     "backToTop": "Back to top",
     "skipToContent": "Skip to content",
-    "openMarketingSite": "View site",
+    "openSite": "View site",
     "description": "A premium product media workspace for generating product images, campaign sets, and short-form ad videos."
   },
   "actions": {

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

@@ -26,7 +26,7 @@ useSeo({
         <p>Production board</p>
         <h1>Creative output queue</h1>
       </div>
-      <BaseButton label="New campaign" leading-icon="i-lucide-plus" />
+      <UiButton label="New campaign" leading-icon="i-lucide-plus" />
     </header>
 
     <div class="workspace-page__grid">

package/dist/resources/templates/nuxt/app/pages/authors/[slug].vue

@@ -27,11 +27,11 @@ useSeo({
 </script>
 
 <template>
-  <ContentListPage
+  <ContentList
     :title="author"
     description="Use this route shape for author profiles and authored content from the selected provider."
     :items="posts"
   >
     <template #eyebrow>Author</template>
-  </ContentListPage>
+  </ContentList>
 </template>

package/dist/resources/templates/nuxt/app/pages/blog/[slug].vue

@@ -36,10 +36,11 @@ useSeo({
 </script>
 
 <template>
-  <ContentArticlePage :article="article" :related="related">
+  <ContentArticle :article="article" :related="related">
     <p>
       A paid creative product needs content that sells outcomes before it explains implementation.
-      Use this article shape for launch guides, comparison pages, creator education, and SEO content.
+      Use this article shape for launch guides, comparison pages, creator education, and SEO
+      content.
     </p>
     <h2>Production Boundary</h2>
     <p>
@@ -51,5 +52,5 @@ useSeo({
       Use the SEO composable for page title, description, canonical path, robots rules, and social
       image values so each campaign page can target a specific commercial search intent.
     </p>
-  </ContentArticlePage>
+  </ContentArticle>
 </template>

package/dist/resources/templates/nuxt/app/pages/blog/category/[category].vue

@@ -28,11 +28,11 @@ useSeo({
 </script>
 
 <template>
-  <ContentListPage
+  <ContentList
     :title="`${categoryLabel} resources`"
     description="Use this route shape for product education, launch notes, and SEO category pages."
     :items="posts"
   >
     <template #eyebrow>Category</template>
-  </ContentListPage>
+  </ContentList>
 </template>

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

@@ -36,11 +36,11 @@ useSeo({
 </script>
 
 <template>
-  <ContentListPage
+  <ContentList
     title="Content hub"
     description="Playbooks, production notes, and design-system guidance for a paid creative product."
     :items="posts"
   >
     <template #eyebrow>Resources</template>
-  </ContentListPage>
+  </ContentList>
 </template>

package/dist/resources/templates/nuxt/app/pages/legal/cookies.vue

@@ -10,7 +10,7 @@ useSeo({
 </script>
 
 <template>
-  <StaticPage
+  <ContentDocument
     :title="t('legal.cookies.title')"
     :description="t('legal.cookies.description')"
     :updated-at="t('legal.cookies.updated')"
@@ -52,7 +52,7 @@ useSeo({
     <section>
       <h2>{{ t("legal.cookies.choicesTitle") }}</h2>
       <p>{{ t("legal.cookies.choices") }}</p>
-      <ConsentSettingsButton />
+      <ConsentSettings />
     </section>
 
     <section>
@@ -64,5 +64,5 @@ useSeo({
       <h2>{{ t("legal.cookies.contactTitle") }}</h2>
       <p>{{ t("legal.cookies.contact") }}</p>
     </section>
-  </StaticPage>
+  </ContentDocument>
 </template>

package/dist/resources/templates/nuxt/app/pages/legal/privacy.vue

@@ -7,7 +7,7 @@ useSeo({
 </script>
 
 <template>
-  <StaticPage title="Privacy" description="Replace this sample with approved privacy text.">
+  <ContentDocument title="Privacy" description="Replace this sample with approved privacy text.">
     <p>
       This generated page provides structure only. Consumer projects must supply reviewed privacy
       disclosures for their data collection, processors, and retention policy.
@@ -17,5 +17,5 @@ useSeo({
       Add concrete categories of data, processing purposes, retention periods, user rights, contact
       channels, and regional disclosures.
     </p>
-  </StaticPage>
+  </ContentDocument>
 </template>

package/dist/resources/templates/nuxt/app/pages/legal/terms.vue

@@ -7,7 +7,7 @@ useSeo({
 </script>
 
 <template>
-  <StaticPage title="Terms" description="Replace this sample with approved legal text.">
+  <ContentDocument title="Terms" description="Replace this sample with approved legal text.">
     <p>
       This generated page provides structure only. Consumer projects must supply reviewed terms that
       match their product, jurisdiction, and operating model.
@@ -17,5 +17,5 @@ useSeo({
       Add the binding contract for account use, acceptable use, billing if applicable, termination,
       and support channels.
     </p>
-  </StaticPage>
+  </ContentDocument>
 </template>

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

@@ -72,31 +72,31 @@ useSeo({
     <div class="system-lab__header">
       <p class="system-lab__eyebrow">Design system</p>
       <h1>Reusable components tuned for premium paid conversion.</h1>
-      <BaseText as="p" tone="muted" size="lg">
+      <UiText as="p" tone="muted" size="lg">
         Buttons, inputs, identity, analytics, video, infinite lists, checkout, and text constraints
         share the same mobile-first visual language.
-      </BaseText>
+      </UiText>
     </div>
 
     <div class="system-lab__grid">
-      <BaseGradientBorder radius="10px" class="system-lab__panel system-lab__panel--featured">
+      <UiGradientBorder radius="10px" class="system-lab__panel system-lab__panel--featured">
         <div class="system-lab__panel-inner">
           <div>
-            <BaseText as="h2" size="xl" weight="bold">Actions</BaseText>
-            <BaseText as="p" tone="muted">
+            <UiText as="h2" size="xl" weight="bold">Actions</UiText>
+            <UiText as="p" tone="muted">
               Primary actions are reserved for creation, checkout, and committed conversion steps.
-            </BaseText>
+            </UiText>
           </div>
           <div class="system-lab__actions">
-            <BaseButton label="Generate set" leading-icon="i-lucide-wand-sparkles" />
-            <BaseButton label="Compare outputs" color="neutral" variant="outline" />
-            <BaseButton label="Review brief" variant="soft" trailing-icon="i-lucide-arrow-right" />
+            <UiButton label="Generate set" leading-icon="i-lucide-wand-sparkles" />
+            <UiButton label="Compare outputs" color="neutral" variant="outline" />
+            <UiButton label="Review brief" variant="soft" trailing-icon="i-lucide-arrow-right" />
           </div>
         </div>
-      </BaseGradientBorder>
+      </UiGradientBorder>
 
       <section class="system-lab__panel">
-        <BaseText as="h2" size="xl" weight="bold">Inputs</BaseText>
+        <UiText as="h2" size="xl" weight="bold">Inputs</UiText>
         <div class="system-lab__form">
           <UInput icon="i-lucide-search" placeholder="Search campaign assets" />
           <USelect v-model="selectedPlan" :items="planOptions" />
@@ -105,38 +105,38 @@ useSeo({
       </section>
 
       <section class="system-lab__panel">
-        <BaseText as="h2" size="xl" weight="bold">Modal shell</BaseText>
-        <BaseText as="p" tone="muted">
+        <UiText as="h2" size="xl" weight="bold">Modal shell</UiText>
+        <UiText as="p" tone="muted">
           The modal frame owns title, body, footer, close behavior, and scroll boundaries.
-        </BaseText>
-        <BaseButton
+        </UiText>
+        <UiButton
           label="Open modal"
           color="secondary"
           variant="solid"
           leading-icon="i-lucide-panel-top-open"
           @click="modalOpen = true"
         />
-        <BaseModal
+        <UiModal
           v-model="modalOpen"
           title="Approve campaign set"
           description="Use slots for business-specific body and footer content."
         >
           <template #content>
-            <BaseText as="p" tone="muted">
+            <UiText as="p" tone="muted">
               Campaign output is ready for review. The consuming product owns approval rules and
               provider fulfillment.
-            </BaseText>
+            </UiText>
           </template>
           <template #footer="{ close }">
-            <BaseButton label="Close" color="neutral" variant="outline" @click="close" />
-            <BaseButton label="Approve" @click="close" />
+            <UiButton label="Close" color="neutral" variant="outline" @click="close" />
+            <UiButton label="Approve" @click="close" />
           </template>
-        </BaseModal>
+        </UiModal>
       </section>
 
       <section class="system-lab__panel">
-        <BaseText as="h2" size="xl" weight="bold">Popover actions</BaseText>
-        <BasePopover
+        <UiText as="h2" size="xl" weight="bold">Popover actions</UiText>
+        <UiPopover
           title="Quick actions"
           description="Popover content and action rows share one base style."
           :actions="[
@@ -145,24 +145,24 @@ useSeo({
           ]"
         >
           <template #reference>
-            <BaseButton
+            <UiButton
               label="Open actions"
               variant="outline"
               trailing-icon="i-lucide-chevron-down"
             />
           </template>
-        </BasePopover>
+        </UiPopover>
       </section>
 
       <section class="system-lab__panel">
-        <BaseText as="h2" size="xl" weight="bold">Identity and analytics</BaseText>
-        <BaseText as="p" tone="muted">
+        <UiText as="h2" size="xl" weight="bold">Identity and analytics</UiText>
+        <UiText as="p" tone="muted">
           Google Identity and GA/GTM are config-driven, consent-aware, and replaceable at the
           application boundary.
-        </BaseText>
+        </UiText>
         <div class="system-lab__actions system-lab__actions--stacked">
           <GoogleSignInButton />
-          <BaseButton
+          <UiButton
             label="Track preview event"
             color="neutral"
             variant="outline"
@@ -173,13 +173,13 @@ useSeo({
       </section>
 
       <section class="system-lab__panel">
-        <BaseText as="h2" size="xl" weight="bold">Video embed</BaseText>
+        <UiText as="h2" size="xl" weight="bold">Video embed</UiText>
         <YoutubeEmbed source="dQw4w9WgXcQ" title="Reusable YouTube embed" />
       </section>
 
       <section class="system-lab__panel">
-        <BaseText as="h2" size="xl" weight="bold">Infinite list</BaseText>
-        <InfiniteScroll
+        <UiText as="h2" size="xl" weight="bold">Infinite list</UiText>
+        <UiInfiniteScroll
           :loading="infiniteLoading"
           :has-more="hasMoreInfiniteItems"
           root-margin="180px 0px"
@@ -187,20 +187,20 @@ useSeo({
         >
           <ul class="system-lab__list">
             <li v-for="item in visibleInfiniteItems" :key="item.id" class="system-lab__list-item">
-              <BaseText weight="semibold">{{ item.title }}</BaseText>
-              <BaseText as="p" tone="muted" size="sm">{{ item.summary }}</BaseText>
+              <UiText weight="semibold">{{ item.title }}</UiText>
+              <UiText as="p" tone="muted" size="sm">{{ item.summary }}</UiText>
             </li>
           </ul>
-        </InfiniteScroll>
+        </UiInfiniteScroll>
       </section>
 
       <section class="system-lab__panel">
-        <BaseText as="h2" size="xl" weight="bold">Checkout status</BaseText>
+        <UiText as="h2" size="xl" weight="bold">Checkout status</UiText>
         <CheckoutStatus status="pending" show-idle />
       </section>
 
       <section class="system-lab__panel system-lab__panel--wide">
-        <BaseText as="h2" size="xl" weight="bold">Checkout summary</BaseText>
+        <UiText as="h2" size="xl" weight="bold">Checkout summary</UiText>
         <div class="system-lab__checkout-grid">
           <CheckoutSummary
             attempt-id="campaign-checkout"
@@ -209,27 +209,27 @@ useSeo({
             @checkout="checkoutUrlPreview = $event"
           />
           <div class="system-lab__preview">
-            <BaseText as="h3" size="lg" weight="bold">Generated checkout URL</BaseText>
-            <BaseText as="p" tone="muted" size="sm">
+            <UiText as="h3" size="lg" weight="bold">Generated checkout URL</UiText>
+            <UiText as="p" tone="muted" size="sm">
               Product apps own session creation and provider fulfillment; this layer owns the
               reusable URL and summary frame.
-            </BaseText>
+            </UiText>
             <code>{{ checkoutUrlPreview || "Click the checkout action to generate a URL." }}</code>
           </div>
         </div>
       </section>
 
       <section class="system-lab__panel system-lab__panel--wide">
-        <BaseText as="h2" size="xl" weight="bold">Text constraints</BaseText>
+        <UiText as="h2" size="xl" weight="bold">Text constraints</UiText>
         <div class="system-lab__text-row">
-          <BaseText truncate>
+          <UiText truncate>
             Long generated asset labels stay inside their container without resizing navigation or
             checkout rows.
-          </BaseText>
-          <BaseText :line-clamp="2" tone="muted">
+          </UiText>
+          <UiText :line-clamp="2" tone="muted">
             Multi-line campaign summaries can be clamped by the reusable text component so compact
             cards, popovers, and tables remain stable.
-          </BaseText>
+          </UiText>
         </div>
       </section>
     </div>