@funnelsgrove/cli 0.1.14 → 0.1.18

package/template_scaffold/src/steps/styles/shared/progress-shared.css

@@ -0,0 +1,117 @@
+.progress-step {
+  position: absolute;
+  inset: 0;
+}
+
+.progress-step--warm {
+  background: var(--color-bg-warning);
+}
+
+.progress-step-content {
+  position: absolute;
+  top: 122px;
+  left: var(--padding);
+  right: var(--padding);
+  width: auto;
+}
+
+.progress-step-title {
+  margin: 0;
+  color: var(--color-button);
+  font-size: 56px;
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+}
+
+.progress-step-title--indigo {
+  color: var(--color-accent);
+}
+
+.progress-step-text {
+  margin: 16px 0 0;
+  color: var(--color-text);
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+.progress-step-text--dark {
+  font-size: 20px;
+}
+
+.progress-step-art {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  height: auto;
+}
+
+.progress-step-art--claims {
+  top: 399px;
+  width: 404px;
+}
+
+.progress-step-art--be-first {
+  top: 505px;
+  width: 412px;
+}
+
+.status-section {
+  position: absolute;
+  left: var(--padding);
+  right: var(--padding);
+  bottom: 96px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.status-section--be-first {
+  bottom: 94px;
+}
+
+.status-label {
+  margin: 0;
+  color: var(--color-accent);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 24px;
+  text-align: center;
+}
+
+.status-progress {
+  width: 100%;
+  height: 10px;
+  border-radius: 25px;
+  background: var(--color-accent-soft);
+  overflow: hidden;
+}
+
+.status-progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: 25px;
+  background: var(--color-accent);
+}
+
+.status-progress-fill--five-sec {
+  width: 0;
+  animation: be-first-progress-run 5s linear forwards;
+}
+
+@keyframes be-first-progress-run {
+  from {
+    width: 0;
+  }
+
+  to {
+    width: 100%;
+  }
+}
+
+.status-progress-fill--claims {
+  width: 0;
+  animation: be-first-progress-run 5s linear forwards;
+}

package/template_scaffold/src/steps/styles/shared/question-shared.css

@@ -0,0 +1,76 @@
+.step-tag {
+  position: absolute;
+  top: 82px;
+  left: 50%;
+  margin: 0;
+  transform: translateX(-50%);
+  color: var(--color-accent);
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.step-tag--green {
+  color: var(--color-button);
+}
+
+.question-step {
+  position: absolute;
+  inset: 0;
+  background: var(--color-bg);
+  font-family: var(--font-family-base);
+}
+
+.question-step-title {
+  position: absolute;
+  top: 220px;
+  left: var(--padding);
+  right: var(--padding);
+  width: auto;
+  margin: 0;
+  color: var(--color-text);
+  font-size: 56px;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.04em;
+  text-align: center;
+}
+
+.question-step-title--delivery {
+  top: 208px;
+  font-size: 32px;
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+}
+
+.question-step-title--compact {
+  top: 220px;
+}
+
+.question-step-art {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 406px;
+  height: auto;
+}
+
+.question-step-art--medium {
+  top: 466px;
+}
+
+.question-step-art--small {
+  top: 474px;
+}
+
+.is-orange {
+  color: var(--color-warning);
+}
+
+.is-green {
+  color: var(--color-button);
+}
+
+.is-indigo {
+  color: var(--color-accent);
+}

package/template_scaffold/src/steps/styles/shared/responsive-container.css

@@ -0,0 +1,176 @@
+@container (max-width: 430px) {
+  .step-tag {
+    top: 76px;
+  }
+
+  .question-step-title,
+  .info-title,
+  .progress-step-title,
+  .great-news-title,
+  .filing-title,
+  .journey-title,
+  .warning-title,
+  .relationship-title,
+  .email-title,
+  .paywall-title {
+    font-size: 28px;
+    letter-spacing: -0.02em;
+  }
+
+  .great-news-title {
+    font-size: 32px;
+  }
+
+  .active-cases-title-line--main {
+    font-size: 44px;
+  }
+
+  .active-cases-title-line--small {
+    font-size: 18px;
+  }
+
+  .question-step-title--delivery {
+    top: 216px;
+    font-size: 28px;
+    line-height: 1.2;
+  }
+
+  .question-step-title {
+    top: 216px;
+    left: var(--padding);
+    right: var(--padding);
+    width: auto;
+  }
+
+  .question-step-title--compact {
+    top: 260px;
+  }
+
+  .question-step-art,
+  .info-step-art,
+  .progress-step-art,
+  .sequence-step-art,
+  .filing-art,
+  .family-art {
+    width: min(406px, calc(100% - (var(--padding) * 2)));
+  }
+
+  .info-step-content,
+  .progress-step-content,
+  .great-news-copy,
+  .filing-copy,
+  .journey-copy,
+  .relationship-copy,
+  .family-copy,
+  .email-copy {
+    left: var(--padding);
+    right: var(--padding);
+    width: auto;
+  }
+
+  .is-green-lg {
+    font-size: 62px;
+  }
+
+  .is-indigo-xl {
+    font-size: 48px;
+  }
+
+  .info-pill,
+  .warning-pill,
+  .great-news-badge,
+  .family-pill {
+    font-size: 26px;
+  }
+
+  .great-news-badge {
+    font-size: 28px;
+  }
+
+  .info-amount {
+    font-size: 42px;
+  }
+
+  .info-amount--large {
+    font-size: 58px;
+  }
+
+  .status-section,
+  .status-section--be-first {
+    left: var(--padding);
+    right: var(--padding);
+  }
+
+  .sequence-step-title {
+    top: 260px;
+    left: var(--padding);
+    right: var(--padding);
+    width: auto;
+    font-size: 28px;
+  }
+
+  .great-news-chart {
+    left: var(--padding);
+    right: var(--padding);
+    top: 450px;
+  }
+
+  .great-news-footnote {
+    left: var(--padding);
+    right: var(--padding);
+    top: 748px;
+  }
+
+  .journey-options,
+  .relationship-options,
+  .email-field-wrap,
+  .email-action {
+    left: var(--padding);
+    right: var(--padding);
+    width: auto;
+  }
+
+  .paywall-step {
+    padding: 114px var(--padding) 34px;
+  }
+
+  .paywall-v2-step {
+    padding: 20px var(--padding) 34px;
+  }
+
+  .paywall-v2-top-row {
+    gap: 10px;
+  }
+
+  .paywall-v2-countdown {
+    width: 149px;
+  }
+
+  .paywall-v2-countdown-value {
+    font-size: 30px;
+  }
+
+  .paywall-v2-pill-line {
+    font-size: 26px;
+  }
+
+  .paywall-v2-highlight-title {
+    font-size: 24px;
+  }
+
+  .paywall-v2-plan-title {
+    font-size: 18px;
+  }
+
+  .paywall-v2-plan-price-main {
+    font-size: 24px;
+  }
+
+  .paywall-v2-plan-per-day-amount {
+    font-size: 22px;
+  }
+
+  .paywall-v2-feedback-title {
+    font-size: 28px;
+  }
+}

package/template_scaffold/src/steps/types.ts

@@ -0,0 +1,7 @@
+export {
+  FUNNEL_STEP_TYPES,
+  type FunnelStepActionBar,
+  type FunnelStepKind,
+  type FunnelStepMeta,
+  type FunnelStepType,
+} from '@funnelsgrove/runtime';

package/template_scaffold/src/steps/use-claimbee-step-content.ts

@@ -0,0 +1,15 @@
+import {
+  useFunnel,
+  usePreviewStepLocalizedContent,
+  type LocalizedStepContent,
+} from '@funnelsgrove/runtime';
+import { getStepContentLocale } from '@/runtime/step-content-context';
+
+export function useClaimbeeStepContent<TLocaleContent>(
+  stepId: string,
+  definition: LocalizedStepContent<TLocaleContent>,
+): TLocaleContent {
+  const { attributes } = useFunnel();
+
+  return usePreviewStepLocalizedContent(stepId, definition, getStepContentLocale(attributes));
+}

package/template_scaffold/src/theme/theme.ts

@@ -0,0 +1,81 @@
+import { createThemeCssVariables, type FunnelTheme } from '@funnelsgrove/runtime';
+
+export const theme = {
+  interfaceMode: 'light',
+  colors: {
+    interface: {
+      background: '#f4f7f4',
+      primary: '#4db53f',
+      primaryText: '#ffffff',
+      secondary: '#f4cf3a',
+      secondaryText: '#1f2933',
+      text: '#1f2933',
+    },
+    interfaceOpacity: {
+      background: 100,
+      primary: 100,
+      primaryText: 100,
+      secondary: 100,
+      secondaryText: 100,
+      text: 100,
+    },
+    semantic: {
+      accent: '#f4cf3a',
+      button: '#4db53f',
+      buttonText: '#ffffff',
+      surface: '#ffffff',
+      border: '#d7e3df',
+      warning: '#d58b24',
+      danger: '#c74b43',
+    },
+    derived: {
+      bgMuted: '#edf4f2',
+      bgSuccess: '#eef8f1',
+      bgWarning: '#fff6e8',
+      bgDanger: '#fff2ee',
+      bgNeutral: '#f6f1e8',
+      textMuted: '#5f6b74',
+      accentSoft: 'rgb(244 207 58 / 16%)',
+      accentMuted: '#dccd82',
+    },
+  },
+  darkOverrides: {},
+  typography: {
+    font: {
+      family: 'Inter',
+      style: 'Normal',
+      fallbacks: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    },
+    fontSizes: {
+      xs: '12px',
+      sm: '14px',
+      md: '16px',
+      lg: '20px',
+      xl: '28px',
+      xxl: '36px',
+    },
+    fontWeights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      heavy: 800,
+    },
+    lineHeights: {
+      tight: 1.2,
+      normal: 1.45,
+      relaxed: 1.65,
+    },
+  },
+  deviceSize: {
+    activePreset: 'Universal',
+    presets: [{ name: 'Universal', shellWidth: 430, maxWidth: 430 }],
+    padding: 16,
+    cornerRadius: 16,
+  },
+  layout: {
+    safeAreaOffsets: { top: 0, right: 0, bottom: 0, left: 0 },
+  },
+} as const satisfies FunnelTheme;
+
+export const themeCssVariables = createThemeCssVariables(theme);

package/template_scaffold/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@funnelsgrove/runtime/config/env.config": ["../funnel-runtime/src/config/env.config.ts"],
+      "@funnelsgrove/runtime": ["../funnel-runtime/src/index.ts"],
+      "@funnelsgrove/analytics": ["../funnel-analytics/src/index.ts"],
+      "@funnelsgrove/payments": ["../funnel-payments/src/index.ts"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

package/template_scaffold/vitest.config.ts

@@ -0,0 +1,32 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+
+// Inside the funnelsgrove monorepo, test against shared package sources so
+// changes there surface immediately. Standalone copies (funnels scaffolded
+// from this template) resolve @funnelsgrove/* from node_modules instead.
+const monorepoRuntimeSrc = path.resolve(__dirname, '../funnel-runtime/src/index.ts');
+
+const monorepoAliases: Record<string, string> = fs.existsSync(monorepoRuntimeSrc)
+  ? {
+      '@funnelsgrove/runtime/config/env.config': path.resolve(
+        __dirname,
+        '../funnel-runtime/src/config/env.config.ts',
+      ),
+      '@funnelsgrove/runtime': monorepoRuntimeSrc,
+      '@funnelsgrove/analytics': path.resolve(__dirname, '../funnel-analytics/src/index.ts'),
+      '@funnelsgrove/payments': path.resolve(__dirname, '../funnel-payments/src/index.ts'),
+    }
+  : {};
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      ...monorepoAliases,
+    },
+  },
+});

package/template_validation/.funnelsgrove-contract-tools.json

@@ -0,0 +1,19 @@
+{
+  "schemaVersion": 1,
+  "stepContractVersion": 3,
+  "contractHash": "d761e91d5ac6ff9e72c6d49c5bcd014270912473a66f99c49d726c65998085cf",
+  "managedFiles": [
+    {
+      "path": "src/contract/funnel-project.validation.ts",
+      "sha256": "b0ec02eac1bd56812eef773be71628ae4e94f80fcd88837bbc5c8bf04e73a62c"
+    },
+    {
+      "path": "src/contract/funnel-validator.vite.config.ts",
+      "sha256": "014c0c2c5e29d98e7c91548f233843d83630905ba20c10d248364271ca448e9b"
+    },
+    {
+      "path": "src/contract/validate-funnel.cli.ts",
+      "sha256": "1b268b194865d633c760b704a0d4552adc2eb4526801da138ab2a4036f643d58"
+    }
+  ]
+}

package/template_validation/src/contract/funnel-project.validation.ts

@@ -0,0 +1,44 @@
+import {
+  CURRENT_STEP_CONTRACT_VERSION,
+  validateFunnelStepContractSnapshot,
+  type FunnelContractDiagnostic,
+  type FunnelStepContractProjectSnapshot,
+  type FunnelStepMeta,
+} from '@funnelsgrove/runtime';
+import docsManifest from '../../.funnelsgrove-docs.json';
+import { manifestExperiments } from '@/config/experiments';
+import { rawFunnelManifest } from '@/config/funnel.manifest';
+import { stepRegistry } from '@/runtime/step-registry';
+import { contentOptionsByStepId } from '@/steps/step-content.registry';
+
+export const FUNNEL_PROJECT_CONTRACT_VERSION = CURRENT_STEP_CONTRACT_VERSION;
+
+export const buildFunnelProjectSnapshot = (): FunnelStepContractProjectSnapshot => {
+  const componentMetaByKey = Object.fromEntries(
+    Object.entries(stepRegistry).map(([componentKey, entry]) => [componentKey, entry.meta]),
+  ) as Record<string, FunnelStepMeta>;
+
+  return {
+    manifest: rawFunnelManifest,
+    componentMetaByKey,
+    registeredComponentKeys: Object.keys(stepRegistry),
+    contentOptionsByStepId,
+    edgesByStepId: rawFunnelManifest.edgesByStepId,
+    experiments: manifestExperiments,
+    docs: {
+      schemaVersion: docsManifest.schemaVersion,
+      bundleVersion: docsManifest.bundleVersion,
+      stepContractVersion: docsManifest.stepContractVersion,
+      contractHash: docsManifest.contractHash,
+      missing: [],
+      changed: [],
+      conflicts: [],
+    },
+  };
+};
+
+export const validateFunnelProject = (
+  snapshot: FunnelStepContractProjectSnapshot = buildFunnelProjectSnapshot(),
+): FunnelContractDiagnostic[] => {
+  return validateFunnelStepContractSnapshot(snapshot, { mode: 'authoring' });
+};

package/template_validation/src/contract/funnel-validator.vite.config.ts

@@ -0,0 +1,11 @@
+import { fileURLToPath } from 'node:url';
+
+const sourceRoot = fileURLToPath(new URL('../', import.meta.url));
+
+export default {
+  resolve: {
+    alias: {
+      '@': sourceRoot,
+    },
+  },
+};