@orion-studios/cms 0.5.7 → 0.5.8

package/dist/analytics/react.d.ts

@@ -1,3 +1,5 @@
+declare const ANALYTICS_READY_EVENT = "orion-analytics-ready";
+
 /**
  * The site-side analytics tracker: small, first-party, and zero dependency.
  * Mount <Analytics /> once in the site layout. It captures:
@@ -50,4 +52,4 @@ declare function AnalyticsNotFound(): null;
 /** Programmatic tracking for custom site components. No-op when analytics is off. */
 declare function trackEvent(name: string, meta?: Record<string, unknown>): void;
 
-export { ANALYTICS_CONSENT_COOKIE, ANALYTICS_CONSENT_EVENT, ANALYTICS_VISITOR_COOKIE, Analytics, type AnalyticsConsent, AnalyticsNotFound, type AnalyticsProps, EXCLUDE_FLAG, getAnalyticsConsent, setAnalyticsConsent, trackEvent };
+export { ANALYTICS_CONSENT_COOKIE, ANALYTICS_CONSENT_EVENT, ANALYTICS_READY_EVENT, ANALYTICS_VISITOR_COOKIE, Analytics, type AnalyticsConsent, AnalyticsNotFound, type AnalyticsProps, EXCLUDE_FLAG, getAnalyticsConsent, setAnalyticsConsent, trackEvent };

package/dist/analytics/react.js

@@ -1,5 +1,8 @@
 'use client';
 "use client";
+import {
+  ANALYTICS_READY_EVENT
+} from "../chunk-DPKXKG2S.js";
 
 // src/analytics/react.tsx
 import { useEffect, useRef, useState } from "react";
@@ -105,6 +108,7 @@ function Analytics({
       track({ type, name, path: window.location.pathname, meta });
       if (type === "form" || type === "not_found") flush();
     };
+    window.dispatchEvent(new Event(ANALYTICS_READY_EVENT));
     const onClick = (event) => {
       const target = event.target;
       const tagged = target?.closest("[data-analytics]");
@@ -185,6 +189,7 @@ function trackEvent(name, meta) {
 export {
   ANALYTICS_CONSENT_COOKIE,
   ANALYTICS_CONSENT_EVENT,
+  ANALYTICS_READY_EVENT,
   ANALYTICS_VISITOR_COOKIE,
   Analytics,
   AnalyticsNotFound,

package/dist/chunk-DPKXKG2S.js

@@ -0,0 +1,8 @@
+'use client';
+
+// src/analytics/constants.ts
+var ANALYTICS_READY_EVENT = "orion-analytics-ready";
+
+export {
+  ANALYTICS_READY_EVENT
+};

package/dist/{chunk-ULE565KD.js → chunk-Z52R6XR7.js}

@@ -1,7 +1,16 @@
 'use client';
+import {
+  ANALYTICS_READY_EVENT
+} from "./chunk-DPKXKG2S.js";
 
 // src/forms/react.tsx
-import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 
 // src/forms/validation.ts
 var MAJOR_EMAIL_PROVIDERS = [
@@ -248,8 +257,135 @@ function getAutoReplyEmailFields(config) {
   return [...fieldTypes.entries()].filter(([, types]) => types.size === 1 && types.has("email")).map(([name]) => name);
 }
 
+// src/forms/funnel.ts
+var FORM_VIEW_MIN_VISIBLE_RATIO = 0.75;
+var FORM_VIEW_DWELL_MS = 2e3;
+function createFormFunnelSession(trackStage) {
+  const trackedStages = /* @__PURE__ */ new Set();
+  const trackOnce = (stage) => {
+    if (trackedStages.has(stage) || !trackStage(stage)) return false;
+    trackedStages.add(stage);
+    return true;
+  };
+  return {
+    hasViewed: () => trackedStages.has("viewed"),
+    trackStarted: () => trackOnce("start"),
+    trackViewed: () => trackOnce("viewed")
+  };
+}
+function isQualifiedFormVisibility(intersectionRatio, isIntersecting, visibilityState) {
+  return isIntersecting && intersectionRatio >= FORM_VIEW_MIN_VISIBLE_RATIO && visibilityState === "visible";
+}
+
 // src/forms/react.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var analyticsTrack = () => window.__orionTrack;
+var isActionableFieldTarget = (target) => {
+  if (!(target instanceof Element)) return false;
+  const directField = target.closest("input, select, textarea");
+  const labelledField = target.closest("label")?.control;
+  const field = directField || labelledField;
+  if (!(field instanceof HTMLInputElement || field instanceof HTMLSelectElement || field instanceof HTMLTextAreaElement) || field.name === HONEYPOT_FIELD_NAME || field.disabled || "readOnly" in field && field.readOnly) {
+    return false;
+  }
+  return true;
+};
+function useFormFunnel(slug, options = {}) {
+  const { preview = false } = options;
+  const [attentionTarget, setAttentionTarget] = useState(null);
+  const visibleRef = useRef(false);
+  const timerRef = useRef(null);
+  const clearViewTimer = useCallback(() => {
+    if (timerRef.current === null) return;
+    window.clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }, []);
+  const trackStage = useCallback(
+    (stage) => {
+      if (preview || typeof window === "undefined") return false;
+      const track = analyticsTrack();
+      if (!track) return false;
+      track("form", `${slug}:${stage}`);
+      return true;
+    },
+    [preview, slug]
+  );
+  const session = useMemo(() => createFormFunnelSession(trackStage), [trackStage]);
+  const trackViewed = useCallback(() => {
+    if (session.trackViewed()) clearViewTimer();
+  }, [clearViewTimer, session]);
+  const startViewTimer = useCallback(() => {
+    if (session.hasViewed() || timerRef.current !== null || !visibleRef.current || document.visibilityState !== "visible" || !analyticsTrack()) {
+      return;
+    }
+    timerRef.current = window.setTimeout(() => {
+      timerRef.current = null;
+      if (visibleRef.current && document.visibilityState === "visible") trackViewed();
+    }, FORM_VIEW_DWELL_MS);
+  }, [session, trackViewed]);
+  useEffect(() => {
+    visibleRef.current = false;
+    clearViewTimer();
+    if (preview || !attentionTarget || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        visibleRef.current = Boolean(
+          entry && entry.isIntersecting && entry.intersectionRatio >= FORM_VIEW_MIN_VISIBLE_RATIO
+        );
+        if (entry && isQualifiedFormVisibility(
+          entry.intersectionRatio,
+          entry.isIntersecting,
+          document.visibilityState
+        )) {
+          startViewTimer();
+        } else clearViewTimer();
+      },
+      { threshold: FORM_VIEW_MIN_VISIBLE_RATIO }
+    );
+    const onVisibilityChange = () => {
+      if (document.visibilityState !== "visible") {
+        clearViewTimer();
+        return;
+      }
+      if (visibleRef.current) startViewTimer();
+    };
+    const onAnalyticsReady = () => {
+      if (visibleRef.current) startViewTimer();
+    };
+    observer.observe(attentionTarget);
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    window.addEventListener(ANALYTICS_READY_EVENT, onAnalyticsReady);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      window.removeEventListener(ANALYTICS_READY_EVENT, onAnalyticsReady);
+      clearViewTimer();
+    };
+  }, [attentionTarget, clearViewTimer, preview, slug, startViewTimer]);
+  const onFieldPointerDownCapture = useCallback(
+    (event) => {
+      if (!event.nativeEvent.isTrusted || !isActionableFieldTarget(event.target)) return;
+      trackViewed();
+    },
+    [trackViewed]
+  );
+  const onFieldKeyDownCapture = useCallback(
+    (event) => {
+      if (!event.nativeEvent.isTrusted || !isActionableFieldTarget(event.target)) return;
+      trackViewed();
+    },
+    [trackViewed]
+  );
+  const trackStarted = useCallback(() => {
+    session.trackStarted();
+  }, [session]);
+  return {
+    attentionRef: setAttentionTarget,
+    onFieldKeyDownCapture,
+    onFieldPointerDownCapture,
+    trackStarted
+  };
+}
 var DEFAULT_CLASSES = {
   form: "ocf-form",
   field: "ocf-field",
@@ -291,26 +427,17 @@ function FormRenderer({
   const [state, setState] = useState("idle");
   const [honeypot, setHoneypot] = useState("");
   const renderedAt = useRef(Date.now());
-  const startedRef = useRef(false);
-  const funnel = (stage) => {
-    if (preview || typeof window === "undefined") return;
-    window.__orionTrack?.(
-      "form",
-      `${slug}:${stage}`
-    );
-  };
-  useEffect(() => {
-    const timer = setTimeout(() => funnel("view"), 100);
-    return () => clearTimeout(timer);
-  }, [slug]);
+  const {
+    attentionRef,
+    onFieldKeyDownCapture,
+    onFieldPointerDownCapture,
+    trackStarted
+  } = useFormFunnel(slug, { preview });
   useEffect(() => {
     setStepIndex((current) => Math.min(current, Math.max(steps.length - 1, 0)));
   }, [steps.length]);
   const setValue = (name, next, type) => {
-    if (!startedRef.current) {
-      startedRef.current = true;
-      funnel("start");
-    }
+    trackStarted();
     setValues((current) => ({
       ...current,
       [name]: type === "phone" && typeof next === "string" ? formatPhoneUS(next) : next
@@ -393,6 +520,7 @@ function FormRenderer({
   }
   const isLastStep = stepIndex >= steps.length - 1;
   const visibleSteps = steps.length > 0 ? [steps[stepIndex]] : [];
+  const firstActionableFieldKey = visibleSteps.flatMap((step) => step.fields || []).map((field, index) => ({ field, key: fieldKey(field, index) })).find(({ field }) => inferFieldType(field) !== "hidden")?.key;
   const renderField = (field, index) => {
     const name = fieldKey(field, index);
     const type = inferFieldType(field);
@@ -402,15 +530,23 @@ function FormRenderer({
     const id = `ocf-${slug}-${name}`;
     const value = values[name];
     if (type === "hidden") return null;
-    const wrap = (control) => /* @__PURE__ */ jsxs("div", { className: `${cls.field}${error ? ` ${cls.fieldError}` : ""}`, children: [
-      type !== "checkbox" || options.length > 0 ? /* @__PURE__ */ jsxs("label", { className: cls.label, htmlFor: id, children: [
-        label,
-        field.required ? " *" : ""
-      ] }) : null,
-      control,
-      field.help ? /* @__PURE__ */ jsx("p", { className: "ocf-help", children: field.help }) : null,
-      error ? /* @__PURE__ */ jsx("p", { className: cls.errorText, role: "alert", children: error }) : null
-    ] }, name);
+    const wrap = (control) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${cls.field}${error ? ` ${cls.fieldError}` : ""}`,
+        ref: name === firstActionableFieldKey ? attentionRef : void 0,
+        children: [
+          type !== "checkbox" || options.length > 0 ? /* @__PURE__ */ jsxs("label", { className: cls.label, htmlFor: id, children: [
+            label,
+            field.required ? " *" : ""
+          ] }) : null,
+          control,
+          field.help ? /* @__PURE__ */ jsx("p", { className: "ocf-help", children: field.help }) : null,
+          error ? /* @__PURE__ */ jsx("p", { className: cls.errorText, role: "alert", children: error }) : null
+        ]
+      },
+      name
+    );
     if (type === "textarea") {
       return wrap(
         /* @__PURE__ */ jsx(
@@ -480,22 +616,30 @@ function FormRenderer({
       );
     }
     if (type === "checkbox") {
-      return /* @__PURE__ */ jsxs("div", { className: `${cls.field}${error ? ` ${cls.fieldError}` : ""}`, children: [
-        /* @__PURE__ */ jsxs("label", { className: cls.checkbox, htmlFor: id, children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              checked: value === true,
-              id,
-              onChange: (event) => setValue(name, event.target.checked, type),
-              type: "checkbox"
-            }
-          ),
-          label,
-          field.required ? " *" : ""
-        ] }),
-        error ? /* @__PURE__ */ jsx("p", { className: cls.errorText, role: "alert", children: error }) : null
-      ] }, name);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${cls.field}${error ? ` ${cls.fieldError}` : ""}`,
+          ref: name === firstActionableFieldKey ? attentionRef : void 0,
+          children: [
+            /* @__PURE__ */ jsxs("label", { className: cls.checkbox, htmlFor: id, children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  checked: value === true,
+                  id,
+                  onChange: (event) => setValue(name, event.target.checked, type),
+                  type: "checkbox"
+                }
+              ),
+              label,
+              field.required ? " *" : ""
+            ] }),
+            error ? /* @__PURE__ */ jsx("p", { className: cls.errorText, role: "alert", children: error }) : null
+          ]
+        },
+        name
+      );
     }
     const inputType = type === "email" ? "email" : type === "date" ? "date" : type === "number" ? "text" : "text";
     const inputMode = type === "phone" ? "tel" : type === "email" ? "email" : type === "number" ? "decimal" : void 0;
@@ -514,40 +658,51 @@ function FormRenderer({
       )
     );
   };
-  return /* @__PURE__ */ jsxs("form", { className: cls.form, noValidate: true, onSubmit: submit, children: [
-    title,
-    intro,
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        "aria-hidden": "true",
-        autoComplete: "off",
-        className: "ocf-honeypot",
-        name: HONEYPOT_FIELD_NAME,
-        onChange: (event) => setHoneypot(event.target.value),
-        style: { position: "absolute", left: "-9999px", height: 0, width: 0, opacity: 0 },
-        tabIndex: -1,
-        value: honeypot
-      }
-    ),
-    steps.length > 1 ? /* @__PURE__ */ jsxs("p", { className: cls.stepTitle, children: [
-      "Step ",
-      stepIndex + 1,
-      " of ",
-      steps.length,
-      steps[stepIndex]?.title ? ` \u2014 ${steps[stepIndex].title}` : ""
-    ] }) : null,
-    visibleSteps.map((step) => (step.fields || []).map(renderField)),
-    state === "error" ? /* @__PURE__ */ jsx("p", { className: cls.formError, role: "alert", children: "The request could not be sent. Please try again." }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "ocf-actions", children: [
-      steps.length > 1 && stepIndex > 0 ? /* @__PURE__ */ jsx("button", { className: cls.button, onClick: () => setStepIndex(stepIndex - 1), type: "button", children: "Back" }) : null,
-      !isLastStep ? /* @__PURE__ */ jsx("button", { className: cls.button, onClick: nextStep, type: "button", children: "Next" }) : /* @__PURE__ */ jsx("button", { className: cls.button, disabled: state === "submitting" || preview, type: "submit", children: state === "submitting" ? "Sending\u2026" : submitLabel })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: cls.form,
+      noValidate: true,
+      onKeyDownCapture: onFieldKeyDownCapture,
+      onPointerDownCapture: onFieldPointerDownCapture,
+      onSubmit: submit,
+      children: [
+        title,
+        intro,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-hidden": "true",
+            autoComplete: "off",
+            className: "ocf-honeypot",
+            name: HONEYPOT_FIELD_NAME,
+            onChange: (event) => setHoneypot(event.target.value),
+            style: { position: "absolute", left: "-9999px", height: 0, width: 0, opacity: 0 },
+            tabIndex: -1,
+            value: honeypot
+          }
+        ),
+        steps.length > 1 ? /* @__PURE__ */ jsxs("p", { className: cls.stepTitle, children: [
+          "Step ",
+          stepIndex + 1,
+          " of ",
+          steps.length,
+          steps[stepIndex]?.title ? ` \u2014 ${steps[stepIndex].title}` : ""
+        ] }) : null,
+        visibleSteps.map((step) => (step.fields || []).map(renderField)),
+        state === "error" ? /* @__PURE__ */ jsx("p", { className: cls.formError, role: "alert", children: "The request could not be sent. Please try again." }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "ocf-actions", children: [
+          steps.length > 1 && stepIndex > 0 ? /* @__PURE__ */ jsx("button", { className: cls.button, onClick: () => setStepIndex(stepIndex - 1), type: "button", children: "Back" }) : null,
+          !isLastStep ? /* @__PURE__ */ jsx("button", { className: cls.button, onClick: nextStep, type: "button", children: "Next" }) : /* @__PURE__ */ jsx("button", { className: cls.button, disabled: state === "submitting" || preview, type: "submit", children: state === "submitting" ? "Sending\u2026" : submitLabel })
+        ] })
+      ]
+    }
+  );
 }
 
 export {
   FORM_FIELD_TYPES,
   getAutoReplyEmailFields,
+  useFormFunnel,
   FormRenderer
 };

package/dist/forms/react.d.ts

@@ -1,7 +1,17 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { KeyboardEvent, PointerEvent, ReactNode } from 'react';
 import { F as FormConfig } from '../submission-CKZgx1h7.js';
 
+type FormFunnelOptions = {
+    preview?: boolean;
+};
+type FormFunnelTracking = {
+    attentionRef: (node: HTMLElement | null) => void;
+    onFieldKeyDownCapture: (event: KeyboardEvent<HTMLElement>) => void;
+    onFieldPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
+    trackStarted: () => void;
+};
+declare function useFormFunnel(slug: string, options?: FormFunnelOptions): FormFunnelTracking;
 /**
  * The shared, config-driven form renderer: the same component renders a form
  * in the Studio's form editor preview and on the public site, from the same
@@ -42,4 +52,4 @@ type FormRendererProps = {
 };
 declare function FormRenderer({ slug, config, successMessage, basePath, classNames, title, intro, submitLabel, preview, onSuccess, }: FormRendererProps): react.JSX.Element;
 
-export { FormRenderer, type FormRendererClassNames, type FormRendererProps };
+export { type FormFunnelOptions, type FormFunnelTracking, FormRenderer, type FormRendererClassNames, type FormRendererProps, useFormFunnel };

package/dist/forms/react.js

@@ -1,8 +1,11 @@
 'use client';
 "use client";
 import {
-  FormRenderer
-} from "../chunk-ULE565KD.js";
+  FormRenderer,
+  useFormFunnel
+} from "../chunk-Z52R6XR7.js";
+import "../chunk-DPKXKG2S.js";
 export {
-  FormRenderer
+  FormRenderer,
+  useFormFunnel
 };

package/dist/server/index.d.ts

@@ -183,8 +183,8 @@ declare function getPreviewPage(client: SupabaseClient, token: string, keys: Pre
  * and memory backends and is trivially testable.
  *
  * Call and email taps are useful interaction counts, but browser events are
- * forgeable. A conversion requires a server-verified event, currently a form
- * submission recorded after the authoritative lead write succeeds.
+ * forgeable. Form conversions come from authoritative submission rows. Any
+ * other conversion requires a server-verified event.
  */
 type StoredEvent = {
     id?: number | string;
@@ -202,6 +202,12 @@ type StoredEvent = {
     server_verified?: boolean;
     created_at: string;
 };
+/** Minimal authoritative form record used by aggregate analytics. */
+type StoredFormSubmission = {
+    form: string;
+    session_key: string;
+    created_at: string;
+};
 type AnalyticsKpis = {
     visitors: number;
     identifiedVisitors: number;
@@ -267,7 +273,7 @@ type AnalyticsSummary = {
 declare function aggregateAnalytics(events: StoredEvent[], previousEvents: StoredEvent[], range: {
     from: string;
     to: string;
-}): AnalyticsSummary;
+}, submissions?: StoredFormSubmission[], previousSubmissions?: StoredFormSubmission[]): AnalyticsSummary;
 
 /**
  * Server-side analytics ingest: validation, bot filtering, and the
@@ -489,4 +495,4 @@ declare function createMemoryCms(): MemoryCms;
 /** Process-wide singleton for Next.js dev servers (module state survives HMR via globalThis). */
 declare function getMemoryCms(): MemoryCms;
 
-export { type AnalyticsEventType, type AnalyticsKpis, type AnalyticsSummary, type CmsAction, type CmsEnv, type CmsRole, type CmsRoutesOptions, type CmsUser, type EmailMessage, type EmailSender, type IncomingEvent, MEMORY_DEV_TOKEN, type MemoryCms, PREVIEW_SESSION_COOKIE, PREVIEW_TOKEN_MAX_USES, PREVIEW_TOKEN_TTL_MS, type PreviewGrantClaims, type PreviewPage, type ResendSenderOptions, type StoredEvent, type SyncFormInput, type SyncGlobalInput, type SyncInput, type SyncMediaInput, type SyncOperation, type SyncOptions, type SyncPageInput, type SyncPlan, type SyncResult, aggregateAnalytics, can, createCmsRoutes, createDurableRateLimitStore, createMemoryCms, createPreviewToken, createResendSender, deviceFrom, formatSubmissionText, geoFrom, getMemoryCms, getPreviewPage, getServiceClient, isBotRequest, isStructuralChange, notifySubmission, parseEventBatch, readCmsEnv, resolveUser, runContentSync, sessionKeyFor, setServiceClientForTesting, validateCmsEnv, verifyPreviewGrantToken, verifyPreviewToken, visitorKeyFor };
+export { type AnalyticsEventType, type AnalyticsKpis, type AnalyticsSummary, type CmsAction, type CmsEnv, type CmsRole, type CmsRoutesOptions, type CmsUser, type EmailMessage, type EmailSender, type IncomingEvent, MEMORY_DEV_TOKEN, type MemoryCms, PREVIEW_SESSION_COOKIE, PREVIEW_TOKEN_MAX_USES, PREVIEW_TOKEN_TTL_MS, type PreviewGrantClaims, type PreviewPage, type ResendSenderOptions, type StoredEvent, type StoredFormSubmission, type SyncFormInput, type SyncGlobalInput, type SyncInput, type SyncMediaInput, type SyncOperation, type SyncOptions, type SyncPageInput, type SyncPlan, type SyncResult, aggregateAnalytics, can, createCmsRoutes, createDurableRateLimitStore, createMemoryCms, createPreviewToken, createResendSender, deviceFrom, formatSubmissionText, geoFrom, getMemoryCms, getPreviewPage, getServiceClient, isBotRequest, isStructuralChange, notifySubmission, parseEventBatch, readCmsEnv, resolveUser, runContentSync, sessionKeyFor, setServiceClientForTesting, validateCmsEnv, verifyPreviewGrantToken, verifyPreviewToken, visitorKeyFor };

package/dist/server/index.js

@@ -1,6 +1,3 @@
-import {
-  CONTENT_CACHE_TAG
-} from "../chunk-NSAZCP4I.js";
 import {
   createMemoryRateLimitStore,
   getAutoReplyEmailFields,
@@ -8,6 +5,9 @@ import {
   processSubmission,
   resolveAutoReplyEmailField
 } from "../chunk-CFZP7674.js";
+import {
+  CONTENT_CACHE_TAG
+} from "../chunk-NSAZCP4I.js";
 
 // src/server/routes.ts
 import { createHash as createHash3, createHmac as createHmac3, randomUUID, timingSafeEqual as timingSafeEqual2 } from "crypto";
@@ -40,9 +40,10 @@ function normalizeSource(utmSource, referrer) {
   if (host.includes("twitter.") || host === "t.co" || host.includes("x.com")) return "X (Twitter)";
   return host;
 }
-var isConversion = (event) => event.server_verified === true && (event.type === "click" && CONVERSION_NAMES.has(event.name) || event.type === "form" && event.name.endsWith(":submit"));
+var isFormSubmitEvent = (event) => event.type === "form" && event.name.endsWith(":submit");
+var isConversion = (event) => event.server_verified === true && (event.type === "click" && CONVERSION_NAMES.has(event.name) || isFormSubmitEvent(event));
 var top = (map, limit, by) => [...map.entries()].sort((a, b) => by(b[1]) - by(a[1])).slice(0, limit);
-function computeKpis(events) {
+function computeKpis(events, submissions) {
   const sessions = /* @__PURE__ */ new Set();
   const visitors = /* @__PURE__ */ new Set();
   const visitorSessions = /* @__PURE__ */ new Map();
@@ -65,12 +66,15 @@ function computeKpis(events) {
     if (event.type === "click" && event.name === "call") calls += 1;
     if (event.type === "click" && event.name === "email") emails += 1;
     if (event.type === "click" && event.name === "portal") portalClicks += 1;
-    if (event.server_verified === true && event.type === "form" && event.name.endsWith(":submit")) {
-      formSubmits += 1;
-    }
+    if (event.server_verified === true && isFormSubmitEvent(event)) formSubmits += 1;
     if (isConversion(event) && event.session_key) converting.add(event.session_key);
   }
-  const conversions = events.filter(isConversion).length;
+  for (const submission of submissions || []) {
+    if (submission.session_key && sessions.has(submission.session_key)) {
+      converting.add(submission.session_key);
+    }
+  }
+  const conversions = events.filter(isConversion).length + (submissions?.length ?? 0);
   const returningVisitors = [...visitorSessions.values()].filter((keys) => keys.size > 1).length;
   return {
     visitors: visitors.size,
@@ -80,19 +84,21 @@ function computeKpis(events) {
     pageviews,
     pagesPerVisitor: visitors.size > 0 ? pageviews / visitors.size : 0,
     calls,
-    formSubmits,
+    formSubmits: submissions?.length ?? formSubmits,
     emails,
     portalClicks,
     conversions,
     conversionRate: sessions.size > 0 ? converting.size / sessions.size : 0
   };
 }
-function aggregateAnalytics(events, previousEvents, range) {
-  const kpis = computeKpis(events);
-  const previous = computeKpis(previousEvents);
+function aggregateAnalytics(events, previousEvents, range, submissions, previousSubmissions) {
+  const trafficEvents = submissions === void 0 ? events : events.filter((event) => !isFormSubmitEvent(event));
+  const previousTrafficEvents = previousSubmissions === void 0 ? previousEvents : previousEvents.filter((event) => !isFormSubmitEvent(event));
+  const kpis = computeKpis(trafficEvents, submissions);
+  const previous = computeKpis(previousTrafficEvents, previousSubmissions);
   const byDay = /* @__PURE__ */ new Map();
   const dayOf = (iso) => iso.slice(0, 10);
-  for (const event of events) {
+  for (const event of trafficEvents) {
     const day = dayOf(event.created_at);
     const entry = byDay.get(day) || { visitors: /* @__PURE__ */ new Set(), conversions: 0 };
     const identity = event.visitor_key || event.session_key;
@@ -100,6 +106,12 @@ function aggregateAnalytics(events, previousEvents, range) {
     if (isConversion(event)) entry.conversions += 1;
     byDay.set(day, entry);
   }
+  for (const submission of submissions || []) {
+    const day = dayOf(submission.created_at);
+    const entry = byDay.get(day) || { visitors: /* @__PURE__ */ new Set(), conversions: 0 };
+    entry.conversions += 1;
+    byDay.set(day, entry);
+  }
   const trend = [];
   for (let cursor = /* @__PURE__ */ new Date(`${dayOf(range.from)}T00:00:00Z`); cursor.toISOString().slice(0, 10) <= dayOf(range.to); cursor.setUTCDate(cursor.getUTCDate() + 1)) {
     const day = cursor.toISOString().slice(0, 10);
@@ -108,7 +120,7 @@ function aggregateAnalytics(events, previousEvents, range) {
     if (trend.length > 370) break;
   }
   const bySession = /* @__PURE__ */ new Map();
-  for (const event of events) {
+  for (const event of trafficEvents) {
     if (!event.session_key) continue;
     const list = bySession.get(event.session_key) || [];
     list.push(event);
@@ -117,27 +129,39 @@ function aggregateAnalytics(events, previousEvents, range) {
   for (const list of bySession.values()) {
     list.sort((a, b) => a.created_at.localeCompare(b.created_at));
   }
+  const convertedSessionKeys = /* @__PURE__ */ new Set();
+  for (const event of trafficEvents) {
+    if (isConversion(event) && event.session_key) convertedSessionKeys.add(event.session_key);
+  }
+  for (const submission of submissions || []) {
+    if (submission.session_key) convertedSessionKeys.add(submission.session_key);
+  }
   const pages = /* @__PURE__ */ new Map();
   const pageEntry = (path) => {
     const entry = pages.get(path) || { views: 0, entries: 0, conversions: 0 };
     pages.set(path, entry);
     return entry;
   };
-  for (const event of events) {
+  for (const event of trafficEvents) {
     if (event.type === "pageview") pageEntry(event.path).views += 1;
     if (isConversion(event)) pageEntry(event.path).conversions += 1;
   }
+  for (const submission of submissions || []) {
+    const list = bySession.get(submission.session_key);
+    const lastPageview = list?.filter((event) => event.type === "pageview" && event.created_at <= submission.created_at).at(-1);
+    if (lastPageview) pageEntry(lastPageview.path).conversions += 1;
+  }
   for (const list of bySession.values()) {
     const first = list.find((event) => event.type === "pageview");
     if (first) pageEntry(first.path).entries += 1;
   }
   const sources = /* @__PURE__ */ new Map();
-  for (const list of bySession.values()) {
+  for (const [sessionKey, list] of bySession.entries()) {
     const first = list.find((event) => event.type === "pageview");
     const label = normalizeSource(first?.utm?.source || "", first?.referrer || "");
     const entry = sources.get(label) || { sessions: 0, conversions: 0 };
     entry.sessions += 1;
-    if (list.some(isConversion)) entry.conversions += 1;
+    if (convertedSessionKeys.has(sessionKey)) entry.conversions += 1;
     sources.set(label, entry);
   }
   const locations = /* @__PURE__ */ new Map();
@@ -149,13 +173,13 @@ function aggregateAnalytics(events, previousEvents, range) {
     if (sample.device) devices.set(sample.device, (devices.get(sample.device) || 0) + 1);
   }
   const hours = new Array(24).fill(0);
-  for (const event of events) {
+  for (const event of trafficEvents) {
     if (event.type !== "pageview") continue;
     const hour = new Date(event.created_at).getUTCHours();
     if (Number.isFinite(hour)) hours[hour] += 1;
   }
   const pathCounts = /* @__PURE__ */ new Map();
-  for (const list of bySession.values()) {
+  for (const [sessionKey, list] of bySession.entries()) {
     const steps = [];
     for (const event of list) {
       if (event.type !== "pageview") continue;
@@ -166,22 +190,28 @@ function aggregateAnalytics(events, previousEvents, range) {
     const key = steps.join(" \u2192 ");
     const entry = pathCounts.get(key) || { count: 0, converted: 0 };
     entry.count += 1;
-    if (list.some(isConversion)) entry.converted += 1;
+    if (convertedSessionKeys.has(sessionKey)) entry.converted += 1;
     pathCounts.set(key, entry);
   }
   const forms = /* @__PURE__ */ new Map();
-  for (const event of events) {
+  for (const event of trafficEvents) {
     if (event.type !== "form") continue;
     const [slug, stage] = event.name.split(":");
     if (!slug || !stage) continue;
+    if (stage !== "viewed" && stage !== "start" && stage !== "submit") continue;
     const entry = forms.get(slug) || { views: 0, starts: 0, submits: 0 };
-    if (stage === "view") entry.views += 1;
+    if (stage === "viewed") entry.views += 1;
     if (stage === "start") entry.starts += 1;
     if (stage === "submit" && event.server_verified === true) entry.submits += 1;
     forms.set(slug, entry);
   }
+  for (const submission of submissions || []) {
+    const entry = forms.get(submission.form) || { views: 0, starts: 0, submits: 0 };
+    entry.submits += 1;
+    forms.set(submission.form, entry);
+  }
   const notFound = /* @__PURE__ */ new Map();
-  for (const event of events) {
+  for (const event of trafficEvents) {
     if (event.type === "not_found") notFound.set(event.path, (notFound.get(event.path) || 0) + 1);
   }
   return {
@@ -2251,6 +2281,30 @@ function createCmsRoutes(options) {
     }
     return all;
   };
+  const fetchFormSubmissions = async (fromIso, toIso) => {
+    const all = [];
+    let cursor = 0;
+    for (let page = 0; page < 60; page += 1) {
+      const { data, error } = await db().from("cms_form_submissions").select("id, form_id, session_key, created_at").gte("created_at", fromIso).lte("created_at", toIso).gt("id", cursor).order("id", { ascending: true }).limit(1e3);
+      if (error) return all.length === 0 ? null : all;
+      if (!data || data.length === 0) break;
+      all.push(...data);
+      cursor = Number(data[data.length - 1].id);
+      if (data.length < 1e3) break;
+    }
+    return all;
+  };
+  const fetchFormSlugs = async () => {
+    const { data, error } = await db().from("cms_forms").select("id, slug").limit(1e3);
+    const slugs = /* @__PURE__ */ new Map();
+    if (error || !data) return slugs;
+    for (const form of data) {
+      const id = String(form.id || "");
+      const slug = String(form.slug || "");
+      if (id && slug) slugs.set(id, slug);
+    }
+    return slugs;
+  };
   const getAnalytics = async (request) => {
     const auth = await guard(request, "analytics.read");
     if (auth instanceof Response) return auth;
@@ -2262,11 +2316,26 @@ function createCmsRoutes(options) {
     const from = new Date(fromMs).toISOString();
     const to = new Date(toMs).toISOString();
     const previousFrom = new Date(fromMs - windowMs).toISOString();
-    const [events, previousEvents] = await Promise.all([
+    const [events, previousEvents, submissionRows, formSlugs] = await Promise.all([
       fetchEvents(from, to),
-      fetchEvents(previousFrom, from)
+      fetchEvents(previousFrom, from),
+      fetchFormSubmissions(previousFrom, to),
+      fetchFormSlugs()
     ]);
-    return json(aggregateAnalytics(events, previousEvents, { from, to }));
+    const submissions = submissionRows?.map((submission) => ({
+      form: formSlugs.get(String(submission.form_id)) || String(submission.form_id),
+      session_key: String(submission.session_key || ""),
+      created_at: String(submission.created_at)
+    }));
+    const currentSubmissions = submissions?.filter(
+      (submission) => Date.parse(submission.created_at) >= fromMs
+    );
+    const previousSubmissions = submissions?.filter(
+      (submission) => Date.parse(submission.created_at) < fromMs
+    );
+    return json(
+      aggregateAnalytics(events, previousEvents, { from, to }, currentSubmissions, previousSubmissions)
+    );
   };
   const pruneEvents = async () => {
     const cutoff = new Date(Date.now() - analyticsRetentionDays * 864e5).toISOString();

package/dist/studio/index.js

@@ -4,7 +4,8 @@ import {
   FORM_FIELD_TYPES,
   FormRenderer,
   getAutoReplyEmailFields
-} from "../chunk-ULE565KD.js";
+} from "../chunk-Z52R6XR7.js";
+import "../chunk-DPKXKG2S.js";
 
 // src/studio/Studio.tsx
 import { useCallback as useCallback5, useEffect as useEffect11, useMemo as useMemo5, useState as useState12 } from "react";
@@ -626,6 +627,7 @@ function AnalyticsView({ api }) {
         ] }),
         /* @__PURE__ */ jsxs3("section", { className: "ost-card ost-analytics-section", children: [
           /* @__PURE__ */ jsx3("h3", { children: "Form funnel" }),
+          /* @__PURE__ */ jsx3("p", { className: "ost-muted", children: "A view requires the first field to remain 75% visible for 2 seconds, or direct field interaction. Legacy form loads are excluded." }),
           data.forms.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "ost-muted", children: "No form activity yet." }) : null,
           data.forms.map((form) => /* @__PURE__ */ jsxs3("div", { className: "ost-funnel", children: [
             /* @__PURE__ */ jsx3("strong", { children: form.form }),
@@ -634,7 +636,7 @@ function AnalyticsView({ api }) {
               {
                 max: Math.max(form.views, 1),
                 rows: [
-                  { label: "Saw the form", value: form.views },
+                  { label: "Viewed form", value: form.views },
                   { label: "Started filling", value: form.starts },
                   { label: "Submitted", value: form.submits }
                 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/cms",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "Orion CMS v2 core engine \u2014 JSONB content model on Supabase primitives",
   "type": "module",
   "exports": {