@stackonward/cli 0.0.1 → 1.0.1

package/dist/resources/components/nuxt/site-source/app/composables/useNavigation.ts

@@ -0,0 +1,11 @@
+export function useNavigation() {
+  const site = useSiteShell();
+
+  return {
+    marketingNav: computed(() => site.value.navigation.marketing),
+    appNavGroups: computed(() => site.value.navigation.app),
+    footerGroups: computed(() => site.value.navigation.footer),
+    legalLinks: computed(() => site.value.navigation.legal),
+    socialLinks: computed(() => site.value.navigation.social),
+  };
+}

package/dist/resources/components/nuxt/site-source/app/composables/useSeo.ts

@@ -0,0 +1,33 @@
+export interface SeoInput {
+  title?: string;
+  description?: string;
+  image?: string;
+  canonicalPath?: string;
+  robots?: string;
+}
+
+function joinUrl(baseUrl: string, path: string): string {
+  if (!baseUrl) return path;
+  const base = baseUrl.replace(/\/+$/, "");
+  const suffix = path.startsWith("/") ? path : `/${path}`;
+  return `${base}${suffix}`;
+}
+
+export function useSeo(input: SeoInput): void {
+  const site = useSiteShell();
+  const route = useRoute();
+  const canonical = computed(() => joinUrl(site.value.url, input.canonicalPath ?? route.path));
+
+  useSeoMeta({
+    title: input.title,
+    description: input.description ?? site.value.description,
+    ogTitle: input.title,
+    ogDescription: input.description ?? site.value.description,
+    ogImage: input.image,
+    robots: input.robots,
+  });
+
+  useHead(() => ({
+    link: canonical.value ? [{ rel: "canonical", href: canonical.value }] : [],
+  }));
+}

package/dist/resources/components/nuxt/site-source/app/composables/useSiteShell.ts

@@ -0,0 +1,58 @@
+import type { SiteShellConfig } from "~/types/site-shell";
+
+const DEFAULT_SITE_SHELL_CONFIG: SiteShellConfig = {
+  name: "Product Studio",
+  description: "Premium product imagery and ad video production workspace.",
+  url: "",
+  defaultLocale: "en",
+  homePath: "/",
+  appPath: "/app",
+  logoText: "Product Studio",
+  primaryActionLabel: "Start creating",
+  secondaryActionLabel: "Sign in",
+  secondaryActionPath: "/app",
+  consent: {
+    enabled: true,
+    storageKey: "site-consent",
+    message: "This site can store optional preferences on this device.",
+    acceptLabel: "Allow",
+    rejectLabel: "Decline",
+  },
+  navigation: {
+    marketing: [],
+    app: [],
+    footer: [],
+    legal: [],
+    social: [],
+  },
+  content: {
+    blogPath: "/blog",
+    authorPath: "/authors",
+    previewPath: "/api/preview",
+    sitemapSourcePath: "/api/content/sitemap-urls",
+  },
+};
+
+function mergeSiteShellConfig(input: Partial<SiteShellConfig> | undefined): SiteShellConfig {
+  return {
+    ...DEFAULT_SITE_SHELL_CONFIG,
+    ...input,
+    consent: {
+      ...DEFAULT_SITE_SHELL_CONFIG.consent,
+      ...input?.consent,
+    },
+    navigation: {
+      ...DEFAULT_SITE_SHELL_CONFIG.navigation,
+      ...input?.navigation,
+    },
+    content: {
+      ...DEFAULT_SITE_SHELL_CONFIG.content,
+      ...input?.content,
+    },
+  };
+}
+
+export function useSiteShell() {
+  const appConfig = useAppConfig() as { siteShell?: Partial<SiteShellConfig> };
+  return computed(() => mergeSiteShellConfig(appConfig.siteShell));
+}

package/dist/resources/components/nuxt/site-source/app/composables/useToasts.ts

@@ -0,0 +1,48 @@
+export interface ToastInput {
+  title: string;
+  description?: string;
+  tone?: "info" | "success" | "warning" | "danger";
+  timeoutMs?: number;
+}
+
+export interface ToastMessage extends ToastInput {
+  id: string;
+  tone: "info" | "success" | "warning" | "danger";
+}
+
+function createToastId(): string {
+  if (import.meta.client && "crypto" in window && "randomUUID" in window.crypto) {
+    return window.crypto.randomUUID();
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+
+export function useToasts() {
+  const toasts = useState<ToastMessage[]>("site-toasts", () => []);
+
+  function dismiss(id: string): void {
+    toasts.value = toasts.value.filter((toast) => toast.id !== id);
+  }
+
+  function push(input: ToastInput): string {
+    const id = createToastId();
+    const toast: ToastMessage = {
+      ...input,
+      id,
+      tone: input.tone ?? "info",
+    };
+    toasts.value = [...toasts.value, toast];
+
+    const timeoutMs = input.timeoutMs ?? 4500;
+    if (import.meta.client && timeoutMs > 0) {
+      window.setTimeout(() => dismiss(id), timeoutMs);
+    }
+    return id;
+  }
+
+  return {
+    toasts: readonly(toasts),
+    push,
+    dismiss,
+  };
+}

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

@@ -0,0 +1,5 @@
+<template>
+  <ApplicationShell>
+    <slot />
+  </ApplicationShell>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <MarketingShell>
+    <slot />
+  </MarketingShell>
+</template>

package/dist/resources/components/nuxt/site-source/app/plugins/analytics.client.ts

@@ -0,0 +1,121 @@
+type DataLayerEvent = Record<string, unknown> & {
+  event?: string;
+};
+
+declare global {
+  interface Window {
+    dataLayer?: DataLayerEvent[];
+    gtag?: (...args: unknown[]) => void;
+    __siteAnalyticsInstalled?: boolean;
+  }
+}
+
+function appendScript(id: string, src: string): void {
+  if (document.getElementById(id)) {
+    return;
+  }
+
+  const script = document.createElement("script");
+  script.id = id;
+  script.async = true;
+  script.src = src;
+  document.head.appendChild(script);
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+  const site = useSiteShell();
+  const analytics = config.public.analytics;
+
+  if (!analytics?.enabled || window.__siteAnalyticsInstalled) {
+    return;
+  }
+
+  const dataLayerName = analytics.dataLayerName || "dataLayer";
+  const win = window as unknown as Window & Record<string, unknown>;
+
+  function dataLayer(): DataLayerEvent[] {
+    const existing = win[dataLayerName];
+    if (Array.isArray(existing)) {
+      return existing as DataLayerEvent[];
+    }
+
+    const next: DataLayerEvent[] = [];
+    win[dataLayerName] = next;
+    if (dataLayerName === "dataLayer") {
+      window.dataLayer = next;
+    }
+    return next;
+  }
+
+  function push(event: DataLayerEvent): void {
+    dataLayer().push(event);
+    if (analytics.debug) {
+      window.dispatchEvent(new CustomEvent("site:analytics-debug", { detail: event }));
+    }
+  }
+
+  function hasConsent(): boolean {
+    if (!analytics.requireConsent) {
+      return true;
+    }
+    return window.localStorage.getItem(site.value.consent.storageKey) === "accepted";
+  }
+
+  function install(): void {
+    if (window.__siteAnalyticsInstalled || !hasConsent()) {
+      return;
+    }
+
+    window.__siteAnalyticsInstalled = true;
+
+    if (analytics.gtmId) {
+      push({ "gtm.start": Date.now(), event: "gtm.js" });
+      appendScript(
+        "site-gtm",
+        `https://www.googletagmanager.com/gtm.js?id=${encodeURIComponent(analytics.gtmId)}`,
+      );
+    }
+
+    if (analytics.gaId) {
+      window.gtag = (...args: unknown[]) => {
+        dataLayer().push(args as unknown as DataLayerEvent);
+      };
+      appendScript(
+        "site-gtag",
+        `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(analytics.gaId)}`,
+      );
+      window.gtag("js", new Date());
+      window.gtag("config", analytics.gaId, { send_page_view: false });
+    }
+  }
+
+  window.addEventListener("site:consent", (event) => {
+    const detail = (event as CustomEvent<{ value?: string }>).detail;
+    if (detail?.value === "accepted") {
+      install();
+    }
+  });
+
+  window.addEventListener("site:analytics", (event) => {
+    const detail = (event as CustomEvent<{ name?: string; properties?: Record<string, unknown> }>)
+      .detail;
+    if (!detail?.name) {
+      return;
+    }
+    push({ event: detail.name, ...(detail.properties || {}) });
+  });
+
+  if (analytics.pageTracking) {
+    const router = useRouter();
+    router.afterEach((to) => {
+      push({
+        event: "page_view",
+        page_path: to.fullPath,
+        page_title: document.title,
+      });
+    });
+  }
+
+  nuxtApp.hook("app:mounted", install);
+});

package/dist/resources/components/nuxt/site-source/app/plugins/google-identity.client.ts

@@ -0,0 +1,24 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const identity = useGoogleIdentity();
+  const analytics = useAnalytics();
+  const config = useRuntimeConfig();
+  const googleConfig = computed(() => config.public.identity?.google);
+
+  if (!identity.enabled.value || !googleConfig.value?.oneTap || !googleConfig.value?.autoPrompt) {
+    return;
+  }
+
+  nuxtApp.hook("app:mounted", () => {
+    identity
+      .promptOneTap((response) => {
+        window.dispatchEvent(new CustomEvent("site:google-credential", { detail: response }));
+        analytics.track("identity_google_credential", {
+          select_by: response.select_by,
+        });
+      })
+      .catch((error) => {
+        const detail = error instanceof Error ? error : new Error("Google One Tap failed");
+        window.dispatchEvent(new CustomEvent("site:google-error", { detail }));
+      });
+  });
+});

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

@@ -0,0 +1,9 @@
+export default {
+  slots: {
+    root: "divide-y divide-border",
+    item: "py-1",
+    trigger:
+      "rounded-md px-2 py-3 text-left text-sm font-semibold text-text hover:bg-surface-muted",
+    content: "px-2 pb-3 text-sm leading-6 text-muted",
+  },
+};

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

@@ -0,0 +1,8 @@
+export default {
+  slots: {
+    root: "text-sm",
+    list: "gap-1.5",
+    link: "text-muted hover:text-text",
+    separator: "text-dimmed",
+  },
+};

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

@@ -0,0 +1,92 @@
+export default {
+  slots: {
+    base: "inline-flex items-center justify-center rounded-ml font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-60",
+    label: "truncate",
+    leadingIcon: "shrink-0",
+    trailingIcon: "shrink-0",
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "h-9 gap-1 px-3 text-xs",
+        leadingIcon: "size-4",
+        trailingIcon: "size-4",
+      },
+      sm: {
+        base: "h-10 gap-1.5 px-3.5 text-sm",
+        leadingIcon: "size-4",
+        trailingIcon: "size-4",
+      },
+      md: {
+        base: "h-11 gap-2 px-4 text-sm",
+        leadingIcon: "size-5",
+        trailingIcon: "size-5",
+      },
+      lg: {
+        base: "h-12 gap-2 px-5 text-base",
+        leadingIcon: "size-5",
+        trailingIcon: "size-5",
+      },
+      xl: {
+        base: "h-14 gap-2.5 px-6 text-base",
+        leadingIcon: "size-6",
+        trailingIcon: "size-6",
+      },
+    },
+    block: {
+      true: {
+        base: "w-full",
+        trailingIcon: "ms-auto",
+      },
+    },
+    variant: {
+      link: "h-auto px-0",
+    },
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      variant: "solid",
+      class: "bg-primary text-primary-contrast hover:bg-primary-hover active:bg-primary-active",
+    },
+    {
+      color: "primary",
+      variant: "outline",
+      class:
+        "border border-primary text-primary hover:bg-primary hover:text-primary-contrast active:bg-primary-active",
+    },
+    {
+      color: "primary",
+      variant: "soft",
+      class: "bg-primary/10 text-primary hover:bg-primary/15 active:bg-primary/20",
+    },
+    {
+      color: "primary",
+      variant: "ghost",
+      class: "text-primary hover:bg-primary/10 active:bg-primary/15",
+    },
+    {
+      color: "secondary",
+      variant: "solid",
+      class: "bg-secondary text-white hover:bg-secondary-hover active:bg-secondary-active",
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      class:
+        "border border-primary/30 bg-surface text-primary hover:border-primary/45 hover:bg-primary/5",
+    },
+    {
+      loading: true,
+      class: {
+        leadingIcon: "animate-spin",
+        trailingIcon: "animate-spin",
+      },
+    },
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid",
+    size: "md",
+  },
+};

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

@@ -0,0 +1,11 @@
+export default {
+  slots: {
+    root: "relative",
+    container: "items-stretch",
+    item: "min-w-0",
+    controls: "gap-2",
+    arrows: "gap-2",
+    dots: "gap-1.5",
+    dot: "size-2 rounded-full bg-border data-[state=active]:bg-primary",
+  },
+};

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

@@ -0,0 +1,12 @@
+export default {
+  slots: {
+    base: "rounded-md border-border text-primary focus-visible:ring-2 focus-visible:ring-primary/25",
+    label: "text-sm font-medium text-text",
+    description: "text-sm text-muted",
+  },
+  defaultVariants: {
+    color: "primary",
+    variant: "outline",
+    size: "md",
+  },
+};

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

@@ -0,0 +1,30 @@
+import accordion from "./accordion";
+import breadcrumb from "./breadcrumb";
+import button from "./button";
+import carousel from "./carousel";
+import checkbox from "./checkbox";
+import input from "./input";
+import modal from "./modal";
+import pagination from "./pagination";
+import select from "./select";
+import stepper from "./stepper";
+import toast from "./toast";
+import tooltip from "./tooltip";
+
+const siteUiTheme = {
+  strategy: "override",
+  accordion,
+  breadcrumb,
+  button,
+  carousel,
+  checkbox,
+  input,
+  modal,
+  pagination,
+  select,
+  stepper,
+  toast,
+  tooltip,
+};
+
+export default siteUiTheme;

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

@@ -0,0 +1,47 @@
+export default {
+  slots: {
+    root: "w-full",
+    base: "min-h-11 rounded-ml border-border bg-surface text-text placeholder:text-dimmed transition-colors",
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "px-2 py-1 text-xs",
+        leadingIcon: "size-4",
+        trailingIcon: "size-4",
+      },
+      sm: {
+        base: "px-2.5 py-1.5 text-sm",
+        leadingIcon: "size-4",
+        trailingIcon: "size-4",
+      },
+      md: {
+        base: "px-3 py-2 text-sm",
+        leadingIcon: "size-5",
+        trailingIcon: "size-5",
+      },
+      lg: {
+        base: "px-3.5 py-2.5 text-base",
+        leadingIcon: "size-5",
+        trailingIcon: "size-5",
+      },
+      xl: {
+        base: "px-4 py-3 text-base",
+        leadingIcon: "size-6",
+        trailingIcon: "size-6",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      variant: ["outline", "subtle"],
+      class: "focus-visible:ring-2 focus-visible:ring-primary/25",
+    },
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    variant: "outline",
+  },
+};

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

@@ -0,0 +1,9 @@
+export default {
+  slots: {
+    overlay: "bg-neutral/55 backdrop-blur-sm",
+    content: "rounded-2ml border border-border bg-surface p-0 shadow-xl",
+    header: "px-5 py-4",
+    body: "px-5 py-4",
+    footer: "px-5 py-4",
+  },
+};

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

@@ -0,0 +1,6 @@
+export default {
+  slots: {
+    root: "gap-1",
+    item: "rounded-md border-border text-muted hover:bg-surface-muted hover:text-text",
+  },
+};

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

@@ -0,0 +1,23 @@
+export default {
+  slots: {
+    base: "min-h-11 rounded-ml border-border bg-surface text-text",
+    placeholder: "text-dimmed",
+    content: "rounded-ml border border-border bg-surface shadow-lg",
+    group: "p-1.5",
+    item: "rounded-md px-2.5 py-2 text-muted data-highlighted:bg-surface-muted data-highlighted:text-text",
+    trailingIcon:
+      "text-dimmed transition-transform duration-200 group-data-[state=open]:rotate-180",
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      variant: ["outline", "subtle"],
+      class: "focus-visible:ring-2 focus-visible:ring-primary/25",
+    },
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    variant: "outline",
+  },
+};

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

@@ -0,0 +1,10 @@
+export default {
+  slots: {
+    root: "gap-4",
+    item: "gap-3",
+    trigger: "rounded-md text-sm text-muted data-[state=active]:text-primary",
+    indicator: "border-border data-[state=active]:border-primary data-[state=active]:bg-primary",
+    title: "font-semibold",
+    description: "text-muted",
+  },
+};

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

@@ -0,0 +1,8 @@
+export default {
+  slots: {
+    root: "rounded-ml border border-border bg-surface shadow-lg",
+    title: "text-sm font-semibold text-text",
+    description: "text-sm text-muted",
+    close: "min-w-0 p-1",
+  },
+};

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

@@ -0,0 +1,6 @@
+export default {
+  slots: {
+    content:
+      "rounded-md border border-border bg-surface-elevated px-2.5 py-1.5 text-xs text-text shadow-lg",
+  },
+};

package/dist/resources/components/nuxt/site-source/app/types/site-shell.ts

@@ -0,0 +1,85 @@
+export interface MarketingNavigationItem {
+  label: string;
+  to?: string;
+  external?: boolean;
+  description?: string;
+  children?: MarketingNavigationItem[];
+}
+
+export interface AppNavigationItem {
+  label: string;
+  to: string;
+  icon?: string;
+  badge?: string;
+}
+
+export interface NavigationGroup {
+  label?: string;
+  items: AppNavigationItem[];
+}
+
+export interface FooterGroup {
+  title: string;
+  links: MarketingNavigationItem[];
+}
+
+export interface LegalLink {
+  label: string;
+  to: string;
+}
+
+export interface SocialLink {
+  label: string;
+  href: string;
+}
+
+export interface ContentListItem {
+  title: string;
+  description?: string;
+  to: string;
+  category?: string;
+  date?: string;
+  author?: string;
+}
+
+export interface ContentArticle {
+  title: string;
+  description?: string;
+  category?: string;
+  author?: string;
+  date?: string;
+  updatedAt?: string;
+}
+
+export interface SiteShellConfig {
+  name: string;
+  description: string;
+  url: string;
+  defaultLocale: string;
+  homePath: string;
+  appPath: string;
+  logoText: string;
+  primaryActionLabel: string;
+  secondaryActionLabel: string;
+  secondaryActionPath: string;
+  consent: {
+    enabled: boolean;
+    storageKey: string;
+    message: string;
+    acceptLabel: string;
+    rejectLabel: string;
+  };
+  navigation: {
+    marketing: MarketingNavigationItem[];
+    app: NavigationGroup[];
+    footer: FooterGroup[];
+    legal: LegalLink[];
+    social: SocialLink[];
+  };
+  content: {
+    blogPath: string;
+    authorPath: string;
+    previewPath: string;
+    sitemapSourcePath: string;
+  };
+}