@stackonward/cli 0.0.1 → 1.0.0

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

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type {
+  GoogleButtonOptions,
+  GoogleCredentialResponse,
+} from "../../composables/useGoogleIdentity";
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    disabledLabel?: string;
+    options?: GoogleButtonOptions;
+    autoExchange?: boolean;
+    oneTap?: boolean;
+  }>(),
+  {
+    label: "Continue with Google",
+    disabledLabel: "Google sign-in is not configured",
+    options: () => ({ theme: "outline", size: "large", text: "continue_with", shape: "rectangular" }),
+    autoExchange: false,
+    oneTap: false,
+  },
+);
+
+const emit = defineEmits<{
+  credential: [response: GoogleCredentialResponse];
+  authenticated: [payload: unknown];
+  error: [error: Error];
+}>();
+
+const identity = useGoogleIdentity();
+const analytics = useAnalytics();
+const buttonRef = ref<HTMLElement | null>(null);
+const errorMessage = ref("");
+const loading = ref(false);
+
+async function handleCredential(response: GoogleCredentialResponse) {
+  emit("credential", response);
+  analytics.track("identity_google_credential", {
+    select_by: response.select_by,
+  });
+
+  if (!props.autoExchange || !response.credential) {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const payload = await identity.exchangeCredential(response.credential);
+    emit("authenticated", payload);
+  } catch (error) {
+    const nextError = error instanceof Error ? error : new Error("Google credential exchange failed");
+    errorMessage.value = nextError.message;
+    emit("error", nextError);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function renderGoogleButton() {
+  if (!import.meta.client || !buttonRef.value || !identity.enabled.value) {
+    return;
+  }
+
+  errorMessage.value = "";
+  try {
+    await identity.renderButton(buttonRef.value, handleCredential, props.options);
+    if (props.oneTap && identity.oneTapEnabled.value) {
+      await identity.promptOneTap(handleCredential);
+    }
+  } catch (error) {
+    const nextError = error instanceof Error ? error : new Error("Google sign-in failed to initialize");
+    errorMessage.value = nextError.message;
+    emit("error", nextError);
+  }
+}
+
+onMounted(renderGoogleButton);
+
+watch(
+  () => [identity.enabled.value, props.options, props.oneTap] as const,
+  () => {
+    nextTick(renderGoogleButton);
+  },
+);
+</script>
+
+<template>
+  <div class="google-sign-in">
+    <div v-if="identity.enabled" ref="buttonRef" class="google-sign-in__button" />
+    <BaseButton
+      v-else
+      color="neutral"
+      variant="outline"
+      leading-icon="i-lucide-lock"
+      :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>
+  </div>
+</template>
+
+<style scoped>
+.google-sign-in {
+  display: grid;
+  gap: 8px;
+  justify-items: start;
+}
+
+.google-sign-in__button {
+  min-height: 40px;
+}
+</style>

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

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    loading?: boolean;
+    hasMore?: boolean;
+    rootMargin?: string;
+    threshold?: number;
+  }>(),
+  {
+    disabled: false,
+    loading: false,
+    hasMore: true,
+    rootMargin: "320px 0px",
+    threshold: 0,
+  },
+);
+
+const emit = defineEmits<{
+  "load-more": [];
+  intersect: [entry: IntersectionObserverEntry];
+}>();
+
+const sentinelRef = ref<HTMLElement | null>(null);
+const lastIntersecting = ref(false);
+const requestInFlight = ref(false);
+let observer: IntersectionObserver | null = null;
+
+function canRequest(): boolean {
+  return !props.disabled && !props.loading && props.hasMore && !requestInFlight.value;
+}
+
+function requestMore(): void {
+  if (!lastIntersecting.value || !canRequest()) {
+    return;
+  }
+  requestInFlight.value = true;
+  emit("load-more");
+}
+
+function connectObserver(): void {
+  if (!import.meta.client || !sentinelRef.value) {
+    return;
+  }
+
+  observer?.disconnect();
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      if (!entry) {
+        return;
+      }
+      lastIntersecting.value = entry.isIntersecting;
+      emit("intersect", entry);
+      requestMore();
+    },
+    {
+      root: null,
+      rootMargin: props.rootMargin,
+      threshold: props.threshold,
+    },
+  );
+  observer.observe(sentinelRef.value);
+}
+
+onMounted(connectObserver);
+onBeforeUnmount(() => observer?.disconnect());
+
+watch(
+  () => props.loading,
+  (loading, previousLoading) => {
+    if (previousLoading && !loading) {
+      requestInFlight.value = false;
+      nextTick(requestMore);
+    }
+  },
+);
+
+watch(
+  () => [props.disabled, props.hasMore, props.rootMargin, props.threshold] as const,
+  () => {
+    requestInFlight.value = false;
+    nextTick(() => {
+      connectObserver();
+      requestMore();
+    });
+  },
+);
+</script>
+
+<template>
+  <div class="infinite-scroll">
+    <slot />
+    <div ref="sentinelRef" class="infinite-scroll__sentinel" aria-hidden="true" />
+    <div v-if="loading" class="infinite-scroll__state">
+      <slot name="loading">
+        <BaseText as="p" size="sm" tone="muted">Loading more...</BaseText>
+      </slot>
+    </div>
+    <div v-else-if="!hasMore" class="infinite-scroll__state">
+      <slot name="complete">
+        <BaseText as="p" size="sm" tone="muted">All items loaded.</BaseText>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.infinite-scroll {
+  display: grid;
+  gap: 12px;
+}
+
+.infinite-scroll__sentinel {
+  width: 100%;
+  height: 1px;
+}
+
+.infinite-scroll__state {
+  display: grid;
+  min-height: 32px;
+  place-items: center;
+}
+</style>

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

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    source: string;
+    title?: string;
+    aspectRatio?: string;
+    privacyEnhanced?: boolean;
+    controls?: boolean;
+    autoplay?: boolean;
+    start?: number;
+    playlist?: string;
+  }>(),
+  {
+    title: "Embedded video",
+    aspectRatio: "16 / 9",
+    privacyEnhanced: undefined,
+    controls: true,
+    autoplay: false,
+    start: undefined,
+    playlist: "",
+  },
+);
+
+const config = useRuntimeConfig();
+
+function extractYoutubeId(source: string): string {
+  if (/^[a-zA-Z0-9_-]{11}$/.test(source)) {
+    return source;
+  }
+
+  try {
+    const url = new URL(source, "https://www.youtube.com");
+    if (url.hostname === "youtu.be") {
+      return url.pathname.replace("/", "").slice(0, 11);
+    }
+    if (url.pathname.startsWith("/embed/") || url.pathname.startsWith("/shorts/")) {
+      return url.pathname.split("/")[2]?.slice(0, 11) || "";
+    }
+    return url.searchParams.get("v")?.slice(0, 11) || "";
+  } catch {
+    return "";
+  }
+}
+
+const videoId = computed(() => extractYoutubeId(props.source));
+const usePrivacyHost = computed(() => {
+  if (typeof props.privacyEnhanced === "boolean") {
+    return props.privacyEnhanced;
+  }
+  return config.public.media?.youtube?.privacyEnhanced !== false;
+});
+
+const embedSrc = computed(() => {
+  if (!videoId.value) {
+    return "";
+  }
+
+  const host = usePrivacyHost.value ? "www.youtube-nocookie.com" : "www.youtube.com";
+  const url = new URL(`https://${host}/embed/${videoId.value}`);
+  url.searchParams.set("playsinline", "1");
+  url.searchParams.set("rel", "0");
+  url.searchParams.set("controls", props.controls ? "1" : "0");
+
+  if (props.autoplay) {
+    url.searchParams.set("autoplay", "1");
+    url.searchParams.set("mute", "1");
+  }
+  if (Number.isInteger(props.start) && Number(props.start) > 0) {
+    url.searchParams.set("start", String(props.start));
+  }
+  if (props.playlist) {
+    url.searchParams.set("playlist", props.playlist);
+  }
+
+  return url.toString();
+});
+</script>
+
+<template>
+  <figure class="youtube-embed" :style="{ '--youtube-embed-ratio': aspectRatio }">
+    <iframe
+      v-if="embedSrc"
+      class="youtube-embed__frame"
+      :src="embedSrc"
+      :title="title"
+      loading="lazy"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    />
+    <div v-else class="youtube-embed__fallback">
+      <BaseText tone="danger" size="sm">Invalid YouTube source.</BaseText>
+    </div>
+  </figure>
+</template>
+
+<style scoped>
+.youtube-embed {
+  width: 100%;
+  min-width: 200px;
+  margin: 0;
+  overflow: hidden;
+  border: 1px solid var(--site-color-border);
+  border-radius: 12px;
+  background: var(--site-color-surface-muted);
+  aspect-ratio: var(--youtube-embed-ratio);
+}
+
+.youtube-embed__frame,
+.youtube-embed__fallback {
+  width: 100%;
+  height: 100%;
+}
+
+.youtube-embed__frame {
+  display: block;
+  border: 0;
+}
+
+.youtube-embed__fallback {
+  display: grid;
+  min-height: 200px;
+  place-items: center;
+  padding: 16px;
+}
+</style>

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

@@ -0,0 +1,24 @@
+export interface AnalyticsEvent {
+  name: string;
+  properties?: Record<string, unknown>;
+}
+
+export function useAnalytics() {
+  function track(event: AnalyticsEvent | string, properties?: Record<string, unknown>): void {
+    if (!import.meta.client) return;
+    const detail = typeof event === "string" ? { name: event, properties } : event;
+    window.dispatchEvent(new CustomEvent("site:analytics", { detail }));
+  }
+
+  function pageView(path: string, title?: string): void {
+    track({
+      name: "page_view",
+      properties: {
+        page_path: path,
+        page_title: title,
+      },
+    });
+  }
+
+  return { track, pageView };
+}

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

@@ -0,0 +1,121 @@
+export type CheckoutStatusValue = "idle" | "pending" | "succeeded" | "cancelled" | "failed";
+
+export interface CheckoutLineItem {
+  id: string;
+  label: string;
+  quantity: number;
+  amountMinor: number;
+  currency: string;
+  description?: string;
+}
+
+export interface CheckoutUrlInput {
+  checkoutUrl?: string;
+  attemptId: string;
+  lineItems: CheckoutLineItem[];
+  locale?: string;
+  successUrl?: string;
+  cancelUrl?: string;
+  customer?: {
+    id?: string;
+    email?: string;
+  };
+  metadata?: Record<string, string | number | boolean>;
+}
+
+function assertMinorAmount(value: number): void {
+  if (!Number.isInteger(value)) {
+    throw new Error("Checkout amounts must use integer minor units");
+  }
+}
+
+function assertLineItem(item: CheckoutLineItem): void {
+  if (!item.id) {
+    throw new Error("Checkout line item id is required");
+  }
+  if (!item.label) {
+    throw new Error("Checkout line item label is required");
+  }
+  if (!Number.isInteger(item.quantity) || item.quantity <= 0) {
+    throw new Error("Checkout line item quantity must be a positive integer");
+  }
+  if (!item.currency) {
+    throw new Error("Checkout line item currency is required");
+  }
+  assertMinorAmount(item.amountMinor);
+}
+
+export function useCheckout() {
+  const config = useRuntimeConfig();
+
+  function formatMoney(amountMinor: number, currency: string, locale = "en"): string {
+    assertMinorAmount(amountMinor);
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency,
+    }).format(amountMinor / 100);
+  }
+
+  function getTotalAmountMinor(items: CheckoutLineItem[]): number {
+    return items.reduce((total, item) => {
+      assertLineItem(item);
+      return total + item.amountMinor * item.quantity;
+    }, 0);
+  }
+
+  function buildCheckoutUrl(input: CheckoutUrlInput): string {
+    const base = input.checkoutUrl || config.public.checkout?.url;
+    if (!base) {
+      throw new Error("Checkout URL is not configured");
+    }
+
+    if (!input.attemptId) {
+      throw new Error("Checkout attemptId is required");
+    }
+
+    input.lineItems.forEach(assertLineItem);
+
+    const url = new URL(base, import.meta.client ? window.location.origin : "http://localhost");
+    url.searchParams.set("attempt_id", input.attemptId);
+    url.searchParams.set("line_items", JSON.stringify(input.lineItems));
+
+    if (input.locale) url.searchParams.set("locale", input.locale);
+    if (input.successUrl) url.searchParams.set("success_url", input.successUrl);
+    if (input.cancelUrl) url.searchParams.set("cancel_url", input.cancelUrl);
+    if (input.customer?.id) url.searchParams.set("customer_id", input.customer.id);
+    if (input.customer?.email) url.searchParams.set("customer_email", input.customer.email);
+    if (input.metadata) url.searchParams.set("metadata", JSON.stringify(input.metadata));
+
+    return url.toString();
+  }
+
+  function openCheckout(input: CheckoutUrlInput, target = "_blank"): void {
+    if (!import.meta.client) {
+      return;
+    }
+    window.open(buildCheckoutUrl(input), target, "noopener,noreferrer");
+  }
+
+  function parseCheckoutStatus(
+    search = import.meta.client ? window.location.search : "",
+  ): CheckoutStatusValue {
+    const params = new URLSearchParams(search);
+    const resultParam = config.public.checkout?.resultParam || "checkout_status";
+    const raw = params.get(resultParam) || params.get("payment_status") || params.get("payment");
+
+    if (raw === "success" || raw === "succeeded" || raw === "paid") return "succeeded";
+    if (raw === "cancel" || raw === "cancelled" || raw === "canceled") return "cancelled";
+    if (raw === "failed" || raw === "error") return "failed";
+    if (raw === "pending" || raw === "processing") return "pending";
+    return "idle";
+  }
+
+  return {
+    checkoutUrl: computed(() => config.public.checkout?.url || ""),
+    formatMoney,
+    getTotalAmountMinor,
+    buildCheckoutUrl,
+    openCheckout,
+    parseCheckoutStatus,
+  };
+}

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

@@ -0,0 +1,31 @@
+export type ConsentValue = "accepted" | "rejected";
+
+export function useConsent(storageKey?: string) {
+  const site = useSiteShell();
+  const resolvedStorageKey = computed(() => storageKey ?? site.value.consent.storageKey);
+  const value = ref<ConsentValue | null>(null);
+  const ready = ref(false);
+
+  onMounted(() => {
+    const stored = window.localStorage.getItem(resolvedStorageKey.value);
+    value.value = stored === "accepted" || stored === "rejected" ? stored : null;
+    ready.value = true;
+  });
+
+  const visible = computed(() => site.value.consent.enabled && ready.value && value.value === null);
+
+  function setConsent(next: ConsentValue): void {
+    value.value = next;
+    if (import.meta.client) {
+      window.localStorage.setItem(resolvedStorageKey.value, next);
+      window.dispatchEvent(new CustomEvent("site:consent", { detail: { value: next } }));
+    }
+  }
+
+  return {
+    value: readonly(value),
+    visible,
+    accept: () => setConsent("accepted"),
+    reject: () => setConsent("rejected"),
+  };
+}

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

@@ -0,0 +1,163 @@
+export interface GoogleCredentialResponse {
+  credential?: string;
+  select_by?: string;
+  clientId?: string;
+}
+
+export interface GoogleButtonOptions {
+  type?: "standard" | "icon";
+  theme?: "outline" | "filled_blue" | "filled_black";
+  size?: "large" | "medium" | "small";
+  text?: "signin_with" | "signup_with" | "continue_with" | "signin";
+  shape?: "rectangular" | "pill" | "circle" | "square";
+  logo_alignment?: "left" | "center";
+  width?: string | number;
+  locale?: string;
+}
+
+interface GoogleIdentityApi {
+  accounts: {
+    id: {
+      initialize: (options: {
+        client_id: string;
+        callback: (response: GoogleCredentialResponse) => void;
+        use_fedcm_for_prompt?: boolean;
+        cancel_on_tap_outside?: boolean;
+      }) => void;
+      prompt: () => void;
+      renderButton: (element: HTMLElement, options: GoogleButtonOptions) => void;
+      cancel: () => void;
+    };
+  };
+}
+
+type GoogleIdentityWindow = Window &
+  typeof globalThis & {
+    google?: GoogleIdentityApi;
+    __siteGoogleIdentityScript?: Promise<void>;
+  };
+
+function getGoogleWindow(): GoogleIdentityWindow {
+  return window as GoogleIdentityWindow;
+}
+
+function loadGoogleIdentityScript(): Promise<void> {
+  if (!import.meta.client) {
+    return Promise.resolve();
+  }
+
+  const googleWindow = getGoogleWindow();
+
+  if (googleWindow.google?.accounts?.id) {
+    return Promise.resolve();
+  }
+
+  if (googleWindow.__siteGoogleIdentityScript) {
+    return googleWindow.__siteGoogleIdentityScript;
+  }
+
+  googleWindow.__siteGoogleIdentityScript = new Promise<void>((resolve, reject) => {
+    const existing = document.querySelector<HTMLScriptElement>(
+      'script[src="https://accounts.google.com/gsi/client"]',
+    );
+
+    if (existing) {
+      existing.addEventListener("load", () => resolve(), { once: true });
+      existing.addEventListener(
+        "error",
+        () => reject(new Error("Google Identity failed to load")),
+        {
+          once: true,
+        },
+      );
+      return;
+    }
+
+    const script = document.createElement("script");
+    script.src = "https://accounts.google.com/gsi/client";
+    script.async = true;
+    script.defer = true;
+    script.addEventListener("load", () => resolve(), { once: true });
+    script.addEventListener("error", () => reject(new Error("Google Identity failed to load")), {
+      once: true,
+    });
+    document.head.appendChild(script);
+  });
+
+  return googleWindow.__siteGoogleIdentityScript;
+}
+
+export function useGoogleIdentity() {
+  const config = useRuntimeConfig();
+  const googleConfig = computed(() => config.public.identity?.google);
+  const enabled = computed(() =>
+    Boolean(googleConfig.value?.enabled && googleConfig.value.clientId),
+  );
+
+  async function initialize(callback: (response: GoogleCredentialResponse) => void) {
+    const clientId = googleConfig.value?.clientId;
+
+    if (!enabled.value || !clientId) {
+      throw new Error("Google Identity is not configured");
+    }
+
+    await loadGoogleIdentityScript();
+
+    const googleWindow = getGoogleWindow();
+
+    if (!googleWindow.google?.accounts?.id) {
+      throw new Error("Google Identity is unavailable");
+    }
+
+    googleWindow.google.accounts.id.initialize({
+      client_id: clientId,
+      callback,
+      use_fedcm_for_prompt: false,
+      cancel_on_tap_outside: true,
+    });
+  }
+
+  async function renderButton(
+    element: HTMLElement,
+    callback: (response: GoogleCredentialResponse) => void,
+    options: GoogleButtonOptions = {},
+  ) {
+    await initialize(callback);
+    getGoogleWindow().google?.accounts.id.renderButton(element, options);
+  }
+
+  async function promptOneTap(callback: (response: GoogleCredentialResponse) => void) {
+    await initialize(callback);
+    getGoogleWindow().google?.accounts.id.prompt();
+  }
+
+  function cancel() {
+    getGoogleWindow().google?.accounts.id.cancel();
+  }
+
+  async function exchangeCredential<T = unknown>(
+    credential: string,
+    endpoint = googleConfig.value?.credentialEndpoint,
+  ): Promise<T> {
+    if (!endpoint) {
+      throw new Error("Google credential endpoint is not configured");
+    }
+
+    const response = await $fetch(endpoint, {
+      method: "POST",
+      body: { credential },
+    });
+    return response as T;
+  }
+
+  return {
+    enabled,
+    clientId: computed(() => googleConfig.value?.clientId || ""),
+    oneTapEnabled: computed(() => Boolean(googleConfig.value?.oneTap)),
+    initialize,
+    renderButton,
+    promptOneTap,
+    cancel,
+    exchangeCredential,
+  };
+}