@octaviaflow/core 3.1.0-beta.70 → 3.1.0-beta.72

package/dist/marketing.js

@@ -249,15 +249,20 @@ function isValidEmail(value) {
 }
 
 // src/marketing/components/BetaAccessForm/BetaAccessForm.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function BetaAccessForm({
   title = "Request early access",
   subtitle = "CURRENTLY IN PRIVATE BETA \u2014 WE REVIEW ACCESS REQUESTS WEEKLY",
   fields = "email",
+  nameLayout = "single",
   appearance = "card",
   teamSizes,
   plans,
   defaultPlan,
+  useCases,
+  showDetails = false,
+  detailsLabel = "Anything else we should know?",
+  detailsPlaceholder = "Current stack, timelines, must-have connectors\u2026",
   submitLabel = "Request access \u2192",
   footnote = "NO CREDIT CARD \xB7 SSO & SELF-HOSTING AVAILABLE",
   onSubmit,
@@ -270,9 +275,13 @@ function BetaAccessForm({
   const [values, setValues] = useState({
     email: "",
     name: "",
+    firstName: "",
+    lastName: "",
     company: "",
     teamSize: "",
-    plan: defaultPlan ?? ""
+    plan: defaultPlan ?? "",
+    useCase: "",
+    details: ""
   });
   const [phase, setPhase] = useState("idle");
   const [error, setError] = useState(null);
@@ -283,14 +292,22 @@ function BetaAccessForm({
       setError("Please enter a valid work email.");
       return;
     }
-    if (fields === "full" && !values.name?.trim()) {
+    if (fields === "full" && nameLayout === "single" && !values.name?.trim()) {
       setError("Please enter your name.");
       return;
     }
+    if (fields === "full" && nameLayout === "split" && !values.firstName?.trim()) {
+      setError("Please enter your first name.");
+      return;
+    }
     if (fields === "full" && teamSizes?.length && !values.teamSize) {
       setError("Please select your team size.");
       return;
     }
+    if (fields === "full" && useCases?.length && !values.useCase) {
+      setError("Please select your primary use case.");
+      return;
+    }
     setError(null);
     setPhase("submitting");
     try {
@@ -343,7 +360,7 @@ function BetaAccessForm({
               fields === "full" && "ods-mkt-access__fields--full"
             ),
             children: [
-              fields === "full" && /* @__PURE__ */ jsxs3("div", { className: "ods-mkt-access__field", children: [
+              fields === "full" && nameLayout === "single" && /* @__PURE__ */ jsxs3("div", { className: "ods-mkt-access__field", children: [
                 /* @__PURE__ */ jsx3("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-name`, children: "Full name" }),
                 /* @__PURE__ */ jsx3(
                   Input,
@@ -357,6 +374,36 @@ function BetaAccessForm({
                   }
                 )
               ] }),
+              fields === "full" && nameLayout === "split" && /* @__PURE__ */ jsxs3(Fragment, { children: [
+                /* @__PURE__ */ jsxs3("div", { className: "ods-mkt-access__field", children: [
+                  /* @__PURE__ */ jsx3("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-firstname`, children: "First name" }),
+                  /* @__PURE__ */ jsx3(
+                    Input,
+                    {
+                      id: `${uid}-firstname`,
+                      autoComplete: "given-name",
+                      placeholder: "Ada",
+                      value: values.firstName ?? "",
+                      onChange: (e) => setValues((v) => ({ ...v, firstName: e.target.value })),
+                      disabled: busy
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs3("div", { className: "ods-mkt-access__field", children: [
+                  /* @__PURE__ */ jsx3("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-lastname`, children: "Last name" }),
+                  /* @__PURE__ */ jsx3(
+                    Input,
+                    {
+                      id: `${uid}-lastname`,
+                      autoComplete: "family-name",
+                      placeholder: "Lovelace",
+                      value: values.lastName ?? "",
+                      onChange: (e) => setValues((v) => ({ ...v, lastName: e.target.value })),
+                      disabled: busy
+                    }
+                  )
+                ] })
+              ] }),
               /* @__PURE__ */ jsxs3("div", { className: "ods-mkt-access__field", children: [
                 /* @__PURE__ */ jsx3("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-email`, children: "Work email" }),
                 /* @__PURE__ */ jsx3(
@@ -414,6 +461,43 @@ function BetaAccessForm({
                   }
                 )
               ] }),
+              fields === "full" && useCases && useCases.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "ods-mkt-access__field", children: [
+                /* @__PURE__ */ jsx3("span", { className: "ods-mkt-access__label", id: `${uid}-usecase-label`, children: "Primary use case" }),
+                /* @__PURE__ */ jsx3(
+                  Select,
+                  {
+                    "aria-labelledby": `${uid}-usecase-label`,
+                    placeholder: "Select a use case\u2026",
+                    options: useCases.map((useCase) => ({ value: useCase, label: useCase })),
+                    value: values.useCase ?? "",
+                    onChange: (useCase) => setValues((v) => ({ ...v, useCase })),
+                    disabled: busy
+                  }
+                )
+              ] }),
+              fields === "full" && showDetails && /* @__PURE__ */ jsxs3("div", { className: "ods-mkt-access__field ods-mkt-access__field--wide", children: [
+                /* @__PURE__ */ jsx3(
+                  "label",
+                  {
+                    className: "ods-mkt-access__label",
+                    id: `${uid}-details-label`,
+                    htmlFor: `${uid}-details`,
+                    children: detailsLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  Textarea,
+                  {
+                    id: `${uid}-details`,
+                    "aria-labelledby": `${uid}-details-label`,
+                    placeholder: detailsPlaceholder,
+                    rows: 3,
+                    value: values.details ?? "",
+                    onChange: (e) => setValues((v) => ({ ...v, details: e.target.value })),
+                    disabled: busy
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsx3(
                 Button,
                 {
@@ -610,7 +694,7 @@ function ContactForm({
           {
             id: `${uid}-message`,
             "aria-labelledby": `${uid}-message-label`,
-            placeholder: "What are you trying to build?",
+            placeholder: selectedTopic?.messagePlaceholder ?? "What are you trying to build?",
             rows: 4,
             value: values.message,
             onChange: (e) => setValues((v) => ({ ...v, message: e.target.value })),
@@ -732,7 +816,7 @@ function FeatureGrid({
 // src/marketing/components/IntegrationsFinder/IntegrationsFinder.tsx
 import { CheckmarkIcon, SearchIcon } from "@octaviaflow/icons";
 import { useMemo, useState as useState3 } from "react";
-import { Fragment, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function LetterTile({ name }) {
   return /* @__PURE__ */ jsx9("span", { className: "ods-mkt-finder__letter", "aria-hidden": "true", children: name.trim().charAt(0).toUpperCase() });
 }
@@ -854,7 +938,7 @@ function IntegrationsFinder({
       " ",
       /* @__PURE__ */ jsx9("strong", { children: query.trim() }),
       " connector is available."
-    ] }) : /* @__PURE__ */ jsxs8(Fragment, { children: [
+    ] }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
       /* @__PURE__ */ jsxs8("h3", { className: "ods-mkt-finder__miss-title", children: [
         "No native ",
         /* @__PURE__ */ jsx9("strong", { children: query.trim() }),
@@ -1087,7 +1171,7 @@ function roleGlyph(role, size = 12) {
 }
 
 // src/marketing/components/MarketingFooter/MarketingFooter.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function MarketingFooter({
   brand,
   tagline,
@@ -1102,7 +1186,7 @@ function MarketingFooter({
   return /* @__PURE__ */ jsxs13("footer", { ...rest, className: cn("ods-mkt-footer", className), children: [
     /* @__PURE__ */ jsxs13("div", { className: "ods-mkt-footer__grid", children: [
       /* @__PURE__ */ jsxs13("div", { className: "ods-mkt-footer__brand-col", children: [
-        /* @__PURE__ */ jsx14("div", { className: "ods-mkt-footer__brand", children: brand ?? /* @__PURE__ */ jsxs13(Fragment2, { children: [
+        /* @__PURE__ */ jsx14("div", { className: "ods-mkt-footer__brand", children: brand ?? /* @__PURE__ */ jsxs13(Fragment3, { children: [
           /* @__PURE__ */ jsx14(BrandMark, { size: 16 }),
           /* @__PURE__ */ jsx14("span", { children: "OctaviaFlow" })
         ] }) }),
@@ -1193,7 +1277,24 @@ function MarketingHero({
 }
 
 // src/marketing/components/MarketingNav/MarketingNav.tsx
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+function BurgerGlyph({ open }) {
+  return /* @__PURE__ */ jsx16(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "20",
+      height: "20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      "aria-hidden": "true",
+      children: open ? /* @__PURE__ */ jsx16("path", { d: "M6 6l12 12M18 6 6 18" }) : /* @__PURE__ */ jsx16("path", { d: "M4 7h16M4 12h16M4 17h16" })
+    }
+  );
+}
 function MarketingNav({
   brand,
   brandHref = "/",
@@ -1203,8 +1304,9 @@ function MarketingNav({
   className,
   ...rest
 }) {
+  const [mobileOpen, setMobileOpen] = useState4(false);
   return /* @__PURE__ */ jsxs15("header", { ...rest, className: cn("ods-mkt-nav", sticky && "ods-mkt-nav--sticky", className), children: [
-    /* @__PURE__ */ jsx16("a", { className: "ods-mkt-nav__brand", href: brandHref, children: brand ?? /* @__PURE__ */ jsxs15(Fragment3, { children: [
+    /* @__PURE__ */ jsx16("a", { className: "ods-mkt-nav__brand", href: brandHref, children: brand ?? /* @__PURE__ */ jsxs15(Fragment4, { children: [
       /* @__PURE__ */ jsx16(BrandMark, {}),
       /* @__PURE__ */ jsx16("span", { children: "OctaviaFlow" })
     ] }) }),
@@ -1218,7 +1320,35 @@ function MarketingNav({
       },
       link.href
     )) }),
-    actions && /* @__PURE__ */ jsx16("div", { className: "ods-mkt-nav__actions", children: actions })
+    actions && /* @__PURE__ */ jsx16("div", { className: "ods-mkt-nav__actions", children: actions }),
+    (links.length > 0 || actions) && /* @__PURE__ */ jsx16(
+      "button",
+      {
+        type: "button",
+        className: "ods-mkt-nav__toggle",
+        "aria-expanded": mobileOpen,
+        "aria-label": "Toggle menu",
+        onClick: () => setMobileOpen((open) => !open),
+        children: /* @__PURE__ */ jsx16(BurgerGlyph, { open: mobileOpen })
+      }
+    ),
+    mobileOpen && /* @__PURE__ */ jsxs15("nav", { className: "ods-mkt-nav__mobile", "aria-label": "Main", children: [
+      links.map((link) => /* @__PURE__ */ jsx16(
+        "a",
+        {
+          href: link.href,
+          className: cn(
+            "ods-mkt-nav__mobile-link",
+            link.active && "ods-mkt-nav__mobile-link--active"
+          ),
+          "aria-current": link.active ? "page" : void 0,
+          onClick: () => setMobileOpen(false),
+          children: link.label
+        },
+        link.href
+      )),
+      actions && /* @__PURE__ */ jsx16("div", { className: "ods-mkt-nav__mobile-actions", children: actions })
+    ] })
   ] });
 }
 
@@ -1340,7 +1470,7 @@ function PricingTiers({ tiers, note, className, ...rest }) {
 
 // src/marketing/components/StatBand/StatBand.tsx
 import { useReducedMotion as useReducedMotion2 } from "framer-motion";
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 function StatBand({ items, orientation = "column", className, ...rest }) {
   const reducedMotion = useReducedMotion2();
   return /* @__PURE__ */ jsx20(
@@ -1359,7 +1489,7 @@ function StatBand({ items, orientation = "column", className, ...rest }) {
             suffix: item.suffix,
             formatValue: (v) => Math.round(v).toLocaleString("en-US")
           }
-        ) : /* @__PURE__ */ jsxs19(Fragment4, { children: [
+        ) : /* @__PURE__ */ jsxs19(Fragment5, { children: [
           item.prefix,
           item.value,
           item.suffix
@@ -1404,11 +1534,11 @@ import {
   useEffect as useEffect2,
   useMemo as useMemo2,
   useRef as useRef2,
-  useState as useState6
+  useState as useState7
 } from "react";
 
 // src/marketing/components/WorkflowShowcase/ShowcaseScene.tsx
-import { useEffect, useRef, useState as useState4 } from "react";
+import { useEffect, useRef, useState as useState5 } from "react";
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function slots(n) {
   return Array.from({ length: n }, (_, i) => 208 + (i - (n - 1) / 2) * 80);
@@ -1481,7 +1611,7 @@ function ShowcaseScene({
   caption,
   onCoreClick
 }) {
-  const [pulse, setPulse] = useState4(false);
+  const [pulse, setPulse] = useState5(false);
   const pulseTimer = useRef(null);
   useEffect(
     () => () => {
@@ -1714,7 +1844,7 @@ function ShowcaseScene({
 
 // src/marketing/components/WorkflowShowcase/ShowcaseSignup.tsx
 import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion3 } from "framer-motion";
-import { useId as useId3, useState as useState5 } from "react";
+import { useId as useId3, useState as useState6 } from "react";
 import { FocusScope } from "react-aria";
 import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var OVERLAY_MOTION = {
@@ -1736,7 +1866,7 @@ function ShowcaseSignup({
   const reducedMotion = useReducedMotion3();
   const titleId = useId3();
   const subtitleId = useId3();
-  const [values, setValues] = useState5({
+  const [values, setValues] = useState6({
     name: "",
     email: "",
     company: "",
@@ -1917,7 +2047,7 @@ function ShowcaseSignup({
 }
 
 // src/marketing/components/WorkflowShowcase/WorkflowShowcase.tsx
-import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 var EMPTY_PLAN = { left: [], right: [], all: [], totalSteps: 1 };
 function ConnectorTile({ connector }) {
   return /* @__PURE__ */ jsx24(
@@ -1954,21 +2084,21 @@ function WorkflowShowcase({
 }) {
   const reducedMotion = useReducedMotion4();
   const rotationActive = rotatePrompts && !defaultPrompt && examples.length > 0;
-  const [prompt, setPrompt] = useState6(
+  const [prompt, setPrompt] = useState7(
     defaultPrompt || (rotationActive ? examples[0]?.prompt ?? "" : "")
   );
-  const [engagedWithPrompt, setEngagedWithPrompt] = useState6(false);
-  const [promptHovered, setPromptHovered] = useState6(false);
-  const [promptFocused, setPromptFocused] = useState6(false);
+  const [engagedWithPrompt, setEngagedWithPrompt] = useState7(false);
+  const [promptHovered, setPromptHovered] = useState7(false);
+  const [promptFocused, setPromptFocused] = useState7(false);
   const rotateIdx = useRef2(0);
-  const [selected, setSelected] = useState6([]);
-  const [phase, setPhase] = useState6("idle");
-  const [shown, setShown] = useState6(0);
-  const [status, setStatus] = useState6("");
-  const [pickerOpen, setPickerOpen] = useState6(false);
-  const [schedIdx, setSchedIdx] = useState6(0);
-  const [swap, setSwap] = useState6(null);
-  const [signupError, setSignupError] = useState6(null);
+  const [selected, setSelected] = useState7([]);
+  const [phase, setPhase] = useState7("idle");
+  const [shown, setShown] = useState7(0);
+  const [status, setStatus] = useState7("");
+  const [pickerOpen, setPickerOpen] = useState7(false);
+  const [schedIdx, setSchedIdx] = useState7(0);
+  const [swap, setSwap] = useState7(null);
+  const [signupError, setSignupError] = useState7(null);
   const signupReturnPhase = useRef2("done");
   const cardRef = useRef2(null);
   const timers = useRef2([]);
@@ -2009,7 +2139,7 @@ function WorkflowShowcase({
   const manualSchedule = schedules[schedIdx];
   const scheduleShown = inferredSchedule ?? (manualSchedule === "AUTO" ? "HOURLY" : manualSchedule);
   const triggers = WORKFLOW_SHOWCASE_TRIGGERS;
-  const [triggerIdx, setTriggerIdx] = useState6(0);
+  const [triggerIdx, setTriggerIdx] = useState7(0);
   const manualTrigger = triggers[triggerIdx];
   const cadenceShown = manualTrigger === "SCHEDULE" ? scheduleShown : manualTrigger;
   useEffect2(() => {
@@ -2229,7 +2359,7 @@ function WorkflowShowcase({
                 // biome-ignore lint/suspicious/noArrayIndexKey: segments are positional by nature
                 /* @__PURE__ */ jsx24("span", { children: seg.text }, i)
               )
-            ) : /* @__PURE__ */ jsxs22(Fragment5, { children: [
+            ) : /* @__PURE__ */ jsxs22(Fragment6, { children: [
               /* @__PURE__ */ jsx24("span", { className: "ods-showcase__placeholder", children: "Describe your pipeline \u2014 e.g. " }),
               /* @__PURE__ */ jsx24("span", { className: "ods-showcase__placeholder ods-showcase__placeholder--faint", children: '"Sync Storefront orders to Warehouse hourly, alert sales in Team Chat"' })
             ] }) })
@@ -2347,7 +2477,7 @@ function WorkflowShowcase({
               }
             )
           ] }),
-          swap && swapRole && /* @__PURE__ */ jsxs22(Fragment5, { children: [
+          swap && swapRole && /* @__PURE__ */ jsxs22(Fragment6, { children: [
             /* @__PURE__ */ jsx24(
               "button",
               {