@stackonward/cli 0.0.1 → 1.0.1

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

@@ -0,0 +1,397 @@
+<script setup lang="ts">
+const modalOpen = ref(false);
+const selectedPlan = ref("growth");
+const enableReports = ref(true);
+const analytics = useAnalytics();
+const visibleItems = ref(4);
+const infiniteLoading = ref(false);
+const checkoutUrlPreview = ref("");
+
+const infiniteItems = Array.from({ length: 10 }, (_, index) => ({
+  id: `asset-${index + 1}`,
+  title: `Campaign asset ${index + 1}`,
+  summary: "Rows append inside the scroll boundary without shifting surrounding panels.",
+}));
+
+const checkoutItems = [
+  {
+    id: "growth-plan",
+    label: "Growth studio plan",
+    quantity: 1,
+    amountMinor: 14900,
+    currency: "USD",
+    description: "Monthly production workspace for product creative teams.",
+  },
+  {
+    id: "render-credits",
+    label: "Render credit pack",
+    quantity: 1,
+    amountMinor: 4900,
+    currency: "USD",
+    description: "Additional generation capacity for launch weeks.",
+  },
+];
+
+const planOptions = [
+  { label: "Studio", value: "studio" },
+  { label: "Growth", value: "growth" },
+  { label: "Scale", value: "scale" },
+];
+
+const visibleInfiniteItems = computed(() => infiniteItems.slice(0, visibleItems.value));
+const hasMoreInfiniteItems = computed(() => visibleItems.value < infiniteItems.length);
+
+function trackPreviewEvent() {
+  analytics.track("creative_system_action", {
+    surface: "design_system",
+  });
+}
+
+function loadMoreItems() {
+  if (infiniteLoading.value || !hasMoreInfiniteItems.value) {
+    return;
+  }
+
+  infiniteLoading.value = true;
+  window.setTimeout(() => {
+    visibleItems.value = Math.min(visibleItems.value + 2, infiniteItems.length);
+    infiniteLoading.value = false;
+  }, 240);
+}
+
+useSeo({
+  title: "Design System",
+  description: "Theme tokens and reusable interface components for a premium product studio.",
+  canonicalPath: "/ui",
+});
+</script>
+
+<template>
+  <section class="system-lab">
+    <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">
+        Buttons, inputs, identity, analytics, video, infinite lists, checkout, and text constraints
+        share the same mobile-first visual language.
+      </BaseText>
+    </div>
+
+    <div class="system-lab__grid">
+      <BaseGradientBorder 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">
+              Primary actions are reserved for creation, checkout, and committed conversion steps.
+            </BaseText>
+          </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" />
+          </div>
+        </div>
+      </BaseGradientBorder>
+
+      <section class="system-lab__panel">
+        <BaseText as="h2" size="xl" weight="bold">Inputs</BaseText>
+        <div class="system-lab__form">
+          <UInput icon="i-lucide-search" placeholder="Search campaign assets" />
+          <USelect v-model="selectedPlan" :items="planOptions" />
+          <UCheckbox v-model="enableReports" label="Send weekly performance reports" />
+        </div>
+      </section>
+
+      <section class="system-lab__panel">
+        <BaseText as="h2" size="xl" weight="bold">Modal shell</BaseText>
+        <BaseText as="p" tone="muted">
+          The modal frame owns title, body, footer, close behavior, and scroll boundaries.
+        </BaseText>
+        <BaseButton
+          label="Open modal"
+          color="secondary"
+          variant="solid"
+          leading-icon="i-lucide-panel-top-open"
+          @click="modalOpen = true"
+        />
+        <BaseModal
+          v-model="modalOpen"
+          title="Approve campaign set"
+          description="Use slots for business-specific body and footer content."
+        >
+          <template #content>
+            <BaseText as="p" tone="muted">
+              Campaign output is ready for review. The consuming product owns approval rules and
+              provider fulfillment.
+            </BaseText>
+          </template>
+          <template #footer="{ close }">
+            <BaseButton label="Close" color="neutral" variant="outline" @click="close" />
+            <BaseButton label="Approve" @click="close" />
+          </template>
+        </BaseModal>
+      </section>
+
+      <section class="system-lab__panel">
+        <BaseText as="h2" size="xl" weight="bold">Popover actions</BaseText>
+        <BasePopover
+          title="Quick actions"
+          description="Popover content and action rows share one base style."
+          :actions="[
+            { label: 'Create variant', value: 'create', icon: 'i-lucide-plus' },
+            { label: 'Export assets', value: 'export', icon: 'i-lucide-download' },
+          ]"
+        >
+          <template #reference>
+            <BaseButton
+              label="Open actions"
+              variant="outline"
+              trailing-icon="i-lucide-chevron-down"
+            />
+          </template>
+        </BasePopover>
+      </section>
+
+      <section class="system-lab__panel">
+        <BaseText as="h2" size="xl" weight="bold">Identity and analytics</BaseText>
+        <BaseText as="p" tone="muted">
+          Google Identity and GA/GTM are config-driven, consent-aware, and replaceable at the
+          application boundary.
+        </BaseText>
+        <div class="system-lab__actions system-lab__actions--stacked">
+          <GoogleSignInButton />
+          <BaseButton
+            label="Track preview event"
+            color="neutral"
+            variant="outline"
+            leading-icon="i-lucide-chart-no-axes-column"
+            @click="trackPreviewEvent"
+          />
+        </div>
+      </section>
+
+      <section class="system-lab__panel">
+        <BaseText as="h2" size="xl" weight="bold">Video embed</BaseText>
+        <YoutubeEmbed source="dQw4w9WgXcQ" title="Reusable YouTube embed" />
+      </section>
+
+      <section class="system-lab__panel">
+        <BaseText as="h2" size="xl" weight="bold">Infinite list</BaseText>
+        <InfiniteScroll
+          :loading="infiniteLoading"
+          :has-more="hasMoreInfiniteItems"
+          root-margin="180px 0px"
+          @load-more="loadMoreItems"
+        >
+          <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>
+            </li>
+          </ul>
+        </InfiniteScroll>
+      </section>
+
+      <section class="system-lab__panel">
+        <BaseText as="h2" size="xl" weight="bold">Checkout status</BaseText>
+        <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>
+        <div class="system-lab__checkout-grid">
+          <CheckoutSummary
+            attempt-id="campaign-checkout"
+            checkout-url="/checkout/start"
+            :line-items="checkoutItems"
+            @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">
+              Product apps own session creation and provider fulfillment; this layer owns the
+              reusable URL and summary frame.
+            </BaseText>
+            <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>
+        <div class="system-lab__text-row">
+          <BaseText truncate>
+            Long generated asset labels stay inside their container without resizing navigation or
+            checkout rows.
+          </BaseText>
+          <BaseText :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>
+        </div>
+      </section>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.system-lab {
+  display: grid;
+  gap: 36px;
+  padding: 64px 16px 88px;
+}
+
+.system-lab__header,
+.system-lab__grid {
+  width: min(1120px, 100%);
+  margin: 0 auto;
+}
+
+.system-lab__header {
+  display: grid;
+  gap: 16px;
+}
+
+.system-lab__eyebrow {
+  margin: 0;
+  color: var(--site-color-accent-warm);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.system-lab h1 {
+  max-width: 860px;
+  margin: 0;
+  font-size: clamp(34px, 6vw, 64px);
+  font-weight: 340;
+  line-height: 1;
+}
+
+.system-lab__header p {
+  max-width: 760px;
+}
+
+.system-lab__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.system-lab__panel {
+  display: grid;
+  align-content: start;
+  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);
+  padding: 22px;
+}
+
+.system-lab__panel--featured {
+  border: 0;
+  padding: 0;
+}
+
+.system-lab__panel--wide {
+  grid-column: 1 / -1;
+}
+
+.system-lab__panel-inner {
+  display: grid;
+  gap: 18px;
+  border-radius: inherit;
+  background: var(--site-color-surface);
+  padding: 22px;
+}
+
+.system-lab__panel h2,
+.system-lab__panel p {
+  margin: 0;
+}
+
+.system-lab__actions,
+.system-lab__form,
+.system-lab__text-row,
+.system-lab__list,
+.system-lab__preview {
+  display: grid;
+  gap: 12px;
+}
+
+.system-lab__actions {
+  grid-template-columns: repeat(3, minmax(0, max-content));
+  align-items: center;
+}
+
+.system-lab__actions--stacked {
+  grid-template-columns: 1fr;
+  justify-items: start;
+}
+
+.system-lab__form {
+  max-width: 380px;
+}
+
+.system-lab__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.system-lab__list-item {
+  display: grid;
+  gap: 2px;
+  border: 1px solid var(--site-color-border);
+  border-radius: var(--site-radius-md);
+  padding: 12px;
+}
+
+.system-lab__list-item p {
+  margin: 0;
+}
+
+.system-lab__checkout-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 18px;
+}
+
+.system-lab__preview {
+  align-content: start;
+  border: 1px dashed var(--site-color-border-strong);
+  border-radius: var(--site-radius-lg);
+  padding: 18px;
+}
+
+.system-lab__preview code {
+  display: block;
+  overflow-wrap: anywhere;
+  border-radius: var(--site-radius-md);
+  background: var(--site-color-surface-muted);
+  padding: 12px;
+  color: var(--site-color-text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.system-lab__text-row {
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
+}
+
+@media (width <= 820px) {
+  .system-lab {
+    padding: 44px 16px 80px;
+  }
+
+  .system-lab__grid,
+  .system-lab__text-row,
+  .system-lab__checkout-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .system-lab__actions {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

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

@@ -0,0 +1 @@
+export { default } from "@stackonward/commitlint-config";

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

@@ -0,0 +1,4 @@
+import stackOnwardNuxt from "@stackonward/eslint-config/nuxt";
+import withNuxt from "./.nuxt/eslint.config.mjs";
+
+export default withNuxt(...stackOnwardNuxt);

package/dist/resources/templates/nuxt/lint-staged.config.mjs

@@ -0,0 +1,8 @@
+const prettier = "prettier --write --ignore-unknown";
+
+export default {
+  "*.{js,mjs,cjs,ts,mts,cts,tsx}": ["eslint --fix --max-warnings=0", prettier],
+  "*.vue": ["eslint --fix --max-warnings=0", "stylelint --fix", prettier],
+  "*.{css,pcss,postcss}": ["stylelint --fix", prettier],
+  "*.{json,jsonc,md,mdx,yml,yaml}": prettier,
+};

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

@@ -0,0 +1,71 @@
+import { defineNuxtConfig } from "nuxt/config";
+
+export default defineNuxtConfig({
+  extends: ["@stackonward/nuxt-site-shell"],
+  modules: ["@nuxt/eslint"],
+  compatibilityDate: "2025-07-15",
+  css: ["~/assets/css/site-shell.css"],
+  components: [
+    {
+      path: "~/components",
+      pathPrefix: false,
+    },
+  ],
+  imports: {
+    dirs: ["~/composables"],
+  },
+  icon: {
+    customCollections: [
+      {
+        prefix: "common",
+        dir: "./app/assets/icons/common",
+      },
+      {
+        prefix: "brand",
+        dir: "./app/assets/icons/brand",
+      },
+    ],
+  },
+  runtimeConfig: {
+    public: {
+      api: {
+        baseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || "",
+        timeout: Number.parseInt(process.env.NUXT_PUBLIC_API_TIMEOUT || "30000", 10),
+      },
+      site: {
+        url: process.env.NUXT_PUBLIC_SITE_URL || "",
+        env: process.env.NUXT_PUBLIC_SITE_ENV || "development",
+        name: process.env.NUXT_PUBLIC_SITE_NAME || "{{projectName}}",
+        description:
+          process.env.NUXT_PUBLIC_SITE_DESCRIPTION || "Premium product media production workspace.",
+      },
+      analytics: {
+        enabled: process.env.NUXT_PUBLIC_ANALYTICS_ENABLED === "true",
+        debug: process.env.NUXT_PUBLIC_ANALYTICS_DEBUG === "true",
+        requireConsent: process.env.NUXT_PUBLIC_ANALYTICS_REQUIRE_CONSENT !== "false",
+        pageTracking: process.env.NUXT_PUBLIC_ANALYTICS_PAGE_TRACKING !== "false",
+        dataLayerName: process.env.NUXT_PUBLIC_ANALYTICS_DATA_LAYER || "dataLayer",
+        gaId: process.env.NUXT_PUBLIC_GA_ID || "",
+        gtmId: process.env.NUXT_PUBLIC_GTM_ID || "",
+      },
+      identity: {
+        google: {
+          enabled: process.env.NUXT_PUBLIC_GOOGLE_IDENTITY_ENABLED === "true",
+          clientId: process.env.NUXT_PUBLIC_GOOGLE_CLIENT_ID || "",
+          credentialEndpoint: process.env.NUXT_PUBLIC_GOOGLE_CREDENTIAL_ENDPOINT || "",
+          oneTap: process.env.NUXT_PUBLIC_GOOGLE_ONE_TAP === "true",
+          autoPrompt: process.env.NUXT_PUBLIC_GOOGLE_AUTO_PROMPT === "true",
+        },
+      },
+      checkout: {
+        url: process.env.NUXT_PUBLIC_CHECKOUT_URL || "",
+        resultParam: process.env.NUXT_PUBLIC_CHECKOUT_RESULT_PARAM || "checkout_status",
+      },
+      media: {
+        youtube: {
+          privacyEnhanced: process.env.NUXT_PUBLIC_YOUTUBE_PRIVACY_ENHANCED !== "false",
+        },
+      },
+    },
+  },
+});

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

@@ -0,0 +1,67 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "packageManager": "pnpm@9.15.0",
+  "engines": {
+    "node": ">=22.22.1",
+    "pnpm": ">=9.0.0"
+  },
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "prepare": "husky",
+    "prepare:nuxt": "nuxt prepare",
+    "lint": "pnpm lint:code && pnpm lint:styles",
+    "lint:code": "eslint . --max-warnings=0",
+    "lint:code:fix": "eslint . --fix --max-warnings=0",
+    "lint:styles": "stylelint \"app/**/*.{css,vue}\"",
+    "lint:styles:fix": "stylelint \"app/**/*.{css,vue}\" --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "nuxt typecheck",
+    "check": "pnpm format:check && pnpm lint && pnpm typecheck && pnpm test && pnpm build"
+  },
+  "dependencies": {
+    "@stackonward/api-client": "^0.0.2",
+    "@stackonward/nuxt-layer-base": "^0.0.3",
+    "@stackonward/nuxt-site-shell": "^0.0.3"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^21.2.2",
+    "@iconify-json/lucide": "^1.2.116",
+    "@nuxt/eslint": "1.17.0",
+    "@nuxt/image": "^2.0.0",
+    "@nuxt/scripts": "^1.3.0",
+    "@nuxt/test-utils": "^4.3.2",
+    "@nuxt/ui": "^4.9.0",
+    "@nuxtjs/i18n": "^10.4.0",
+    "@nuxtjs/seo": "^5.3.2",
+    "@pinia/colada-nuxt": "^1.0.1",
+    "@pinia/nuxt": "^0.11.3",
+    "@stackonward/commitlint-config": "^0.1.0",
+    "@stackonward/eslint-config": "^1.0.0",
+    "@stackonward/prettier-config": "^0.0.2",
+    "@stackonward/stylelint-config": "^0.1.0",
+    "@types/node": "^22.0.0",
+    "@vueuse/nuxt": "^14.3.0",
+    "eslint": "^10.10.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.5.1",
+    "nuxt": "^4.4.8",
+    "pinia": "^3.0.4",
+    "prettier": "^3.9.6",
+    "stylelint": "^17.15.0",
+    "tailwindcss": "^4.3.2",
+    "typescript": "^5.9.3",
+    "unhead": "^3.1.7",
+    "vue-tsc": "^3.3.6",
+    "vue": "^3.5.0",
+    "vitest": "^5.0.0"
+  }
+}

package/dist/resources/templates/nuxt/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Product platform">
+  <rect width="64" height="64" rx="14" fill="#a86550" />
+  <path d="M18 20h18c7.7 0 13 4.9 13 12s-5.3 12-13 12H18V20Zm11 8v8h7c2.7 0 4.5-1.6 4.5-4s-1.8-4-4.5-4h-7Z" fill="#ffffff" />
+  <path d="M14 48h36v4H14v-4Z" fill="#111827" />
+</svg>

package/dist/resources/templates/nuxt/public/logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 64" role="img" aria-label="Product platform">
+  <rect x="0" y="8" width="48" height="48" rx="12" fill="#a86550" />
+  <path d="M13 20h15c7.4 0 12.5 4.8 12.5 12S35.4 44 28 44H13V20Zm9 8v8h6c2.5 0 4-1.6 4-4s-1.5-4-4-4h-6Z" fill="#ffffff" />
+  <path d="M10 50h34v4H10v-4Z" fill="#111827" />
+  <path d="M68 23h86v7H68v-7Zm0 13h132v7H68v-7Z" fill="#111827" />
+</svg>

package/dist/resources/templates/nuxt/server/api/content/sitemap-urls.get.ts

@@ -0,0 +1,12 @@
+export default defineEventHandler(() => {
+  const today = new Date().toISOString();
+
+  return [
+    { loc: "/", lastmod: today },
+    { loc: "/app", lastmod: today },
+    { loc: "/blog", lastmod: today },
+    { loc: "/blog/creative-playbook", lastmod: today },
+    { loc: "/legal/terms", lastmod: today },
+    { loc: "/legal/privacy", lastmod: today },
+  ];
+});

package/dist/resources/templates/nuxt/server/api/preview.get.ts

@@ -0,0 +1,9 @@
+export default defineEventHandler((event) => {
+  const query = getQuery(event);
+  const path = typeof query.path === "string" ? query.path : "/";
+
+  return {
+    preview: false,
+    path,
+  };
+});

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

@@ -0,0 +1,3 @@
+export default {
+  extends: ["@stackonward/stylelint-config"],
+};

package/dist/resources/templates/nuxt/test/e2e/rendering.test.ts

@@ -0,0 +1,13 @@
+import { $fetch, setup } from "@nuxt/test-utils/e2e";
+import { describe, expect, it } from "vitest";
+
+await setup({});
+
+describe("application rendering", () => {
+  it("renders the home route", async () => {
+    const html = await $fetch<string>("/");
+
+    expect(html).toContain("<html");
+    expect(html).toContain("<main");
+  });
+});

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

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

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

@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    include: ["test/**/*.test.ts"],
+    testTimeout: 120_000,
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackonward/cli",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "description": "StackOnward CLI for creating projects and installing reusable components and snippets",
   "type": "module",
   "main": "dist/index.js",
@@ -29,12 +29,14 @@
   },
   "dependencies": {
     "commander": "^12.0.0",
-    "prompts": "^2.4.2",
-    "kolorist": "^1.8.0",
+    "execa": "^9.0.0",
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",
+    "kolorist": "^1.8.0",
     "ora": "^8.0.0",
-    "execa": "^9.0.0"
+    "prompts": "^2.4.2",
+    "zod": "4",
+    "@stackonward/api-client": "0.0.2"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
@@ -51,6 +53,7 @@
     "build": "tsup",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "check:package": "node scripts/check-package.mjs"
   }
 }