@stackonward/cli 1.3.3 → 1.4.0

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { formatTitle } from "@stackonward/nuxt-site-shell/runtime";
+
 const site = useSiteShell();
 const { localeProperties, t } = useI18n();
 const localeHead = useLocaleHead({ seo: true });
 
 useHead(() => ({
   htmlAttrs: localeHead.value.htmlAttrs,
-  titleTemplate: (title?: string) => (title ? `${title} | ${site.value.name}` : site.value.name),
+  titleTemplate: (title?: string) => formatTitle(title, site.value.name),
   meta: [
     ...(localeHead.value.meta || []),
     { name: "description", content: t(site.value.descriptionKey) },
@@ -40,6 +42,6 @@ useHead(() => ({
         <NuxtPage />
       </NuxtLayout>
     </div>
-    <ToastViewport />
+    <FeedbackToast />
   </UApp>
 </template>

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

@@ -268,7 +268,7 @@ summary {
   white-space: nowrap;
 }
 
-.marketing-shell {
+.site-shell {
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
@@ -277,12 +277,12 @@ summary {
     linear-gradient(180deg, rgb(168 101 80 / 2.5%), transparent 520px), var(--site-color-bg);
 }
 
-.marketing-shell__main {
+.site-shell__main {
   width: 100%;
   flex: 1;
 }
 
-.marketing-header {
+.site-header {
   position: sticky;
   top: 0;
   z-index: 40;
@@ -291,7 +291,7 @@ summary {
   backdrop-filter: blur(18px);
 }
 
-.marketing-header__inner {
+.site-header__inner {
   display: flex;
   width: min(1180px, calc(100% - 32px));
   height: var(--site-shell-header-height);
@@ -301,7 +301,7 @@ summary {
   gap: 24px;
 }
 
-.marketing-header__nav {
+.site-header__nav {
   display: flex;
   min-width: 0;
   flex: 1;
@@ -310,8 +310,8 @@ summary {
   gap: 6px;
 }
 
-.marketing-nav-link,
-.marketing-nav-menu > summary {
+.site-nav-link,
+.site-nav-menu > summary {
   display: inline-flex;
   min-height: 40px;
   align-items: center;
@@ -324,26 +324,26 @@ summary {
   cursor: pointer;
 }
 
-.marketing-nav-link:hover,
-.marketing-nav-menu > summary:hover {
+.site-nav-link:hover,
+.site-nav-menu > summary:hover {
   border-color: rgb(168 101 80 / 18%);
   background: rgb(168 101 80 / 7%);
   color: var(--site-color-text);
 }
 
-.marketing-nav-menu {
+.site-nav-menu {
   position: relative;
 }
 
-.marketing-nav-menu > summary {
+.site-nav-menu > summary {
   list-style: none;
 }
 
-.marketing-nav-menu > summary::-webkit-details-marker {
+.site-nav-menu > summary::-webkit-details-marker {
   display: none;
 }
 
-.marketing-nav-menu__panel {
+.site-nav-menu__panel {
   position: absolute;
   top: calc(100% + 10px);
   left: 50%;
@@ -358,33 +358,33 @@ summary {
   transform: translateX(-50%);
 }
 
-.marketing-nav-menu__item {
+.site-nav-menu__item {
   display: grid;
   gap: 4px;
   border-radius: var(--site-radius-md);
   padding: 12px;
 }
 
-.marketing-nav-menu__item:hover {
+.site-nav-menu__item:hover {
   background: rgb(168 101 80 / 7%);
 }
 
-.marketing-nav-menu__item small {
+.site-nav-menu__item small {
   color: var(--site-color-muted);
   line-height: 1.45;
 }
 
-.marketing-header__actions {
+.site-header__actions {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
-.marketing-header__actions > .base-button--secondary {
+.site-header__actions > .base-button--secondary {
   background: color-mix(in srgb, var(--site-color-surface) 78%, transparent);
 }
 
-.marketing-header__preferences,
+.site-header__preferences,
 .mobile-nav__preferences {
   display: flex;
   align-items: center;
@@ -468,7 +468,7 @@ summary {
   margin-inline-start: auto;
 }
 
-.marketing-header__menu-button {
+.site-header__menu-button {
   display: none;
 }
 
@@ -476,13 +476,13 @@ summary {
   display: none;
 }
 
-.marketing-footer {
+.site-footer {
   border-top: 1px solid var(--site-color-border);
   background: linear-gradient(180deg, var(--site-color-surface), var(--site-color-bg-soft));
   color: var(--site-color-text);
 }
 
-.marketing-footer__inner {
+.site-footer__inner {
   display: grid;
   width: min(1180px, calc(100% - 32px));
   margin: 0 auto;
@@ -491,39 +491,39 @@ summary {
   padding: 56px 0;
 }
 
-.marketing-footer .site-brand__text,
-.marketing-footer .site-brand {
+.site-footer .site-brand__text,
+.site-footer .site-brand {
   color: var(--site-color-text);
 }
 
-.marketing-footer__brand {
+.site-footer__brand {
   display: grid;
   align-content: start;
   gap: 18px;
 }
 
-.marketing-footer__brand p {
+.site-footer__brand p {
   margin: 0;
   max-width: 360px;
   color: var(--site-color-muted);
   line-height: 1.65;
 }
 
-.marketing-footer__social,
-.marketing-footer__legal nav {
+.site-footer__social,
+.site-footer__legal nav {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
 }
 
-.marketing-footer__social a,
-.marketing-footer__legal a,
+.site-footer__social a,
+.site-footer__legal a,
 .consent-settings-button {
   color: var(--site-color-muted);
 }
 
-.marketing-footer__social a:hover,
-.marketing-footer__legal a:hover,
+.site-footer__social a:hover,
+.site-footer__legal a:hover,
 .consent-settings-button:hover {
   color: var(--site-color-accent);
 }
@@ -536,20 +536,20 @@ summary {
   cursor: pointer;
 }
 
-.marketing-footer__nav {
+.site-footer__nav {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
 }
 
-.marketing-footer__group h2 {
+.site-footer__group h2 {
   margin: 0 0 14px;
   color: var(--site-color-accent-warm);
   font-size: 13px;
   font-weight: 650;
 }
 
-.marketing-footer__group ul {
+.site-footer__group ul {
   display: grid;
   gap: 10px;
   margin: 0;
@@ -557,16 +557,16 @@ summary {
   list-style: none;
 }
 
-.marketing-footer__group a {
+.site-footer__group a {
   color: var(--site-color-muted);
   font-size: 14px;
 }
 
-.marketing-footer__group a:hover {
+.site-footer__group a:hover {
   color: var(--site-color-text);
 }
 
-.marketing-footer__legal {
+.site-footer__legal {
   display: flex;
   width: min(1180px, calc(100% - 32px));
   margin: 0 auto;
@@ -1065,30 +1065,30 @@ summary {
     --site-shell-header-height: 64px;
   }
 
-  .marketing-header__inner {
+  .site-header__inner {
     width: min(100% - 24px, 1180px);
     gap: 12px;
   }
 
-  .marketing-header .site-brand {
+  .site-header .site-brand {
     flex: 1 1 auto;
   }
 
-  .marketing-header .site-brand__text {
+  .site-header .site-brand__text {
     min-width: 0;
   }
 
-  .marketing-header__nav,
-  .marketing-header__preferences,
-  .marketing-header__actions > .base-button {
+  .site-header__nav,
+  .site-header__preferences,
+  .site-header__actions > .base-button {
     display: none;
   }
 
-  .marketing-header__actions {
+  .site-header__actions {
     flex: 0 0 auto;
   }
 
-  .marketing-header__menu-button {
+  .site-header__menu-button {
     display: inline-flex;
   }
 
@@ -1144,18 +1144,18 @@ summary {
     width: 100%;
   }
 
-  .marketing-footer__inner,
-  .marketing-footer__nav,
+  .site-footer__inner,
+  .site-footer__nav,
   .content-list__grid {
     grid-template-columns: 1fr;
   }
 
-  .marketing-footer__inner {
+  .site-footer__inner {
     gap: 34px;
     padding: 44px 0;
   }
 
-  .marketing-footer__legal {
+  .site-footer__legal {
     align-items: flex-start;
     flex-direction: column;
   }

package/dist/resources/components/nuxt/site-source/app/components/{site/ApplicationHeader.vue → app/Header.vue}

@@ -27,10 +27,10 @@ defineEmits<{
 
     <div class="application-header__right">
       <slot name="actions">
-        <ThemeSwitcher />
-        <LocaleSwitcher />
+        <ThemeMenu />
+        <LocaleMenu />
         <NuxtLinkLocale :to="site.homePath" class="base-button base-button--secondary">
-          {{ t("site.openMarketingSite") }}
+          {{ t("site.openSite") }}
         </NuxtLinkLocale>
       </slot>
     </div>

package/dist/resources/components/nuxt/site-source/app/components/{site/ApplicationShell.vue → app/Shell.vue}

@@ -29,7 +29,7 @@ watch(
 <template>
   <div class="application-shell">
     <slot name="header">
-      <ApplicationHeader @toggle-sidebar="sidebarOpen = !sidebarOpen" />
+      <AppHeader @toggle-sidebar="sidebarOpen = !sidebarOpen" />
     </slot>
 
     <div class="application-shell__body">
@@ -44,7 +44,7 @@ watch(
         :class="{ 'application-shell__sidebar--open': sidebarOpen }"
       >
         <slot name="sidebar">
-          <ApplicationSidebar @navigate="closeSidebar" />
+          <AppSidebar @navigate="closeSidebar" />
         </slot>
       </div>
 

package/dist/resources/components/nuxt/site-source/app/components/{site/ApplicationSidebar.vue → app/Sidebar.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { appNavGroups } = useNavigation();
+const { appGroups } = useNavigation();
 const { t } = useI18n();
 
 defineEmits<{
@@ -11,7 +11,7 @@ defineEmits<{
   <aside class="application-sidebar" :aria-label="t('navigation.application')">
     <nav class="application-sidebar__nav">
       <section
-        v-for="group in appNavGroups"
+        v-for="group in appGroups"
         :key="group.label || group.items[0]?.to"
         class="application-sidebar__group"
       >

package/dist/resources/components/nuxt/site-source/app/components/{ui/CheckoutStatus.vue → checkout/Status.vue}

@@ -27,7 +27,12 @@ const visible = computed(() => props.showIdle || resolvedStatus.value !== "idle"
 const statusMeta = computed(() => {
   const map: Record<
     CheckoutStatusValue,
-    { icon: string; tone: "neutral" | "info" | "success" | "warning" | "danger"; title: string; description: string }
+    {
+      icon: string;
+      tone: "neutral" | "info" | "success" | "warning" | "danger";
+      title: string;
+      description: string;
+    }
   > = {
     idle: {
       icon: "i-lucide-circle",
@@ -69,8 +74,8 @@ const statusMeta = computed(() => {
   <section v-if="visible" class="checkout-status" :data-tone="statusMeta.tone" role="status">
     <UIcon :name="statusMeta.icon" class="checkout-status__icon" />
     <div>
-      <BaseText as="h3" size="lg" weight="bold">{{ statusMeta.title }}</BaseText>
-      <BaseText as="p" tone="muted">{{ statusMeta.description }}</BaseText>
+      <UiText as="h3" size="lg" weight="bold">{{ statusMeta.title }}</UiText>
+      <UiText as="p" tone="muted">{{ statusMeta.description }}</UiText>
     </div>
   </section>
 </template>

package/dist/resources/components/nuxt/site-source/app/components/{ui/CheckoutSummary.vue → checkout/Summary.vue}

@@ -87,33 +87,33 @@ function openCheckout(): void {
 <template>
   <section class="checkout-summary" aria-label="Checkout summary">
     <div class="checkout-summary__header">
-      <BaseText as="h3" size="lg" weight="bold">Checkout summary</BaseText>
-      <BaseText tone="muted" size="sm"
-        >{{ lineItems.length }} item{{ lineItems.length === 1 ? "" : "s" }}</BaseText
+      <UiText as="h3" size="lg" weight="bold">Checkout summary</UiText>
+      <UiText tone="muted" size="sm"
+        >{{ lineItems.length }} item{{ lineItems.length === 1 ? "" : "s" }}</UiText
       >
     </div>
 
     <ul class="checkout-summary__items">
       <li v-for="item in lineItems" :key="item.id" class="checkout-summary__item">
         <span>
-          <BaseText weight="semibold">{{ item.label }}</BaseText>
-          <BaseText v-if="item.description" as="span" tone="muted" size="sm">
+          <UiText weight="semibold">{{ item.label }}</UiText>
+          <UiText v-if="item.description" as="span" tone="muted" size="sm">
             {{ item.description }}
-          </BaseText>
+          </UiText>
         </span>
         <span class="checkout-summary__item-meta">
-          <BaseText as="span" tone="muted" size="sm">x{{ item.quantity }}</BaseText>
-          <BaseText as="strong" weight="bold">{{ formatLineItem(item) }}</BaseText>
+          <UiText as="span" tone="muted" size="sm">x{{ item.quantity }}</UiText>
+          <UiText as="strong" weight="bold">{{ formatLineItem(item) }}</UiText>
         </span>
       </li>
     </ul>
 
     <div class="checkout-summary__total">
-      <BaseText as="span" tone="muted">Total</BaseText>
-      <BaseText as="strong" size="xl" weight="bold">{{ formattedTotal }}</BaseText>
+      <UiText as="span" tone="muted">Total</UiText>
+      <UiText as="strong" size="xl" weight="bold">{{ formattedTotal }}</UiText>
     </div>
 
-    <BaseButton
+    <UiButton
       :label="actionLabel"
       trailing-icon="i-lucide-arrow-right"
       :loading="loading"

package/dist/resources/components/nuxt/site-source/app/components/{site/CookieConsent.vue → consent/Banner.vue}

@@ -5,7 +5,7 @@ const site = useSiteShell();
 const consent = useConsent();
 const { t } = useI18n();
 
-const persistenceMessage = computed(() => {
+const storageMessage = computed(() => {
   if (consent.state.value.error === "read-failed") {
     return t("consent.storageUnavailable");
   }
@@ -47,8 +47,8 @@ const persistenceMessage = computed(() => {
       <NuxtLink class="site-consent__policy" :to="site.consent.policyPath">
         {{ t("consent.policy") }}
       </NuxtLink>
-      <p v-if="persistenceMessage" class="site-consent__status" role="status">
-        {{ persistenceMessage }}
+      <p v-if="storageMessage" class="site-consent__status" role="status">
+        {{ storageMessage }}
       </p>
       <div class="site-consent__actions">
         <button type="button" class="base-button base-button--secondary" @click="consent.reject">

package/dist/resources/components/nuxt/site-source/app/components/{site/ContentArticlePage.vue → content/Article.vue}

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { ContentArticle, ContentListItem } from "~/types/site-shell";
+import type { Article, ListItem } from "~/content/types";
 
 defineProps<{
-  article: ContentArticle;
-  related?: ContentListItem[];
+  article: Article;
+  related?: ListItem[];
 }>();
 const { t } = useI18n();
 </script>

package/dist/resources/components/nuxt/site-source/app/components/{site/ContentListPage.vue → content/List.vue}

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { ContentListItem } from "~/types/site-shell";
+import type { ListItem } from "~/content/types";
 
 defineProps<{
   title: string;
   description?: string;
-  items: ContentListItem[];
+  items: ListItem[];
 }>();
 </script>
 

package/dist/resources/components/nuxt/site-source/app/components/{ui/GoogleSignInButton.vue → google/SignInButton.vue}

@@ -95,7 +95,7 @@ watch(
 <template>
   <div class="google-sign-in">
     <div v-if="identity.enabled" ref="buttonRef" class="google-sign-in__button" />
-    <BaseButton
+    <UiButton
       v-else
       color="neutral"
       variant="outline"
@@ -103,8 +103,8 @@ watch(
       :label="disabledLabel"
       disabled
     />
-    <BaseText v-if="loading" as="p" size="sm" tone="muted">Completing sign-in...</BaseText>
-    <BaseText v-if="errorMessage" as="p" size="sm" tone="danger">{{ errorMessage }}</BaseText>
+    <UiText v-if="loading" as="p" size="sm" tone="muted">Completing sign-in...</UiText>
+    <UiText v-if="errorMessage" as="p" size="sm" tone="danger">{{ errorMessage }}</UiText>
   </div>
 </template>
 

package/dist/resources/components/nuxt/site-source/app/components/{site/LocaleSwitcher.vue → locale/Menu.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const emit = defineEmits<{ changed: [] }>();
+const emit = defineEmits<{ select: [code: typeof locale.value] }>();
 const { locale, locales, setLocale, t } = useI18n();
 const dropdown = ref<HTMLDetailsElement | null>(null);
 
@@ -16,7 +16,7 @@ const current = computed(
 async function selectLocale(code: typeof locale.value): Promise<void> {
   dropdown.value?.removeAttribute("open");
   if (code !== locale.value) await setLocale(code);
-  emit("changed");
+  emit("select", code);
 }
 
 function handleKeydown(event: KeyboardEvent): void {

package/dist/resources/components/nuxt/site-source/app/components/site/{MarketingFooter.vue → Footer.vue}

@@ -6,12 +6,12 @@ const year = new Date().getFullYear();
 </script>
 
 <template>
-  <footer class="marketing-footer">
-    <div class="marketing-footer__inner">
-      <section class="marketing-footer__brand" :aria-label="t('site.region')">
+  <footer class="site-footer">
+    <div class="site-footer__inner">
+      <section class="site-footer__brand" :aria-label="t('site.region')">
         <SiteBrand />
         <p>{{ t(site.descriptionKey) }}</p>
-        <div v-if="socialLinks.length" class="marketing-footer__social">
+        <div v-if="socialLinks.length" class="site-footer__social">
           <a
             v-for="link in socialLinks"
             :key="link.label"
@@ -24,8 +24,8 @@ const year = new Date().getFullYear();
         </div>
       </section>
 
-      <nav class="marketing-footer__nav" :aria-label="t('footer.navigation')">
-        <section v-for="group in footerGroups" :key="group.title" class="marketing-footer__group">
+      <nav class="site-footer__nav" :aria-label="t('footer.navigation')">
+        <section v-for="group in footerGroups" :key="group.title" class="site-footer__group">
           <h2>{{ group.title }}</h2>
           <ul>
             <li v-for="link in group.links" :key="link.label">
@@ -41,13 +41,13 @@ const year = new Date().getFullYear();
       </nav>
     </div>
 
-    <div class="marketing-footer__legal">
+    <div class="site-footer__legal">
       <span>{{ t("footer.copyright", { year, site: site.name }) }}</span>
       <nav :aria-label="t('footer.legal')">
         <NuxtLinkLocale v-for="link in legalLinks" :key="link.label" :to="link.to">
           {{ link.label }}
         </NuxtLinkLocale>
-        <ConsentSettingsButton />
+        <ConsentSettings />
       </nav>
     </div>
   </footer>