@octaviaflow/core 3.1.0-beta.65 → 3.1.0-beta.68

package/dist/marketing.js

@@ -0,0 +1,1669 @@
+import {
+  CountUp
+} from "./chunk-X7YETDK7.js";
+import {
+  Button,
+  Input,
+  Select
+} from "./chunk-KZP2MNBO.js";
+import {
+  cn
+} from "./chunk-ZAUUGK2Y.js";
+
+// src/marketing/components/AssistantTranscript/AssistantTranscript.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function AssistantTranscript({
+  title = "OctaviaFlow AI Assistant",
+  turns,
+  userLabel = "you",
+  assistantLabel = "octavia",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("ods-mkt-transcript", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "ods-mkt-transcript__head", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "ods-mkt-transcript__body", children: turns.map((turn) => /* @__PURE__ */ jsxs("div", { className: "ods-mkt-transcript__turn", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "ods-mkt-transcript__speaker",
+            `ods-mkt-transcript__speaker--${turn.speaker}`
+          ),
+          children: [
+            turn.speaker === "user" ? userLabel : assistantLabel,
+            " \u2192"
+          ]
+        }
+      ),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "ods-mkt-transcript__content", children: turn.content })
+    ] }, turn.id)) })
+  ] });
+}
+
+// src/marketing/components/CtaBanner/CtaBanner.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Action({
+  action,
+  variant
+}) {
+  if (action.href) {
+    return /* @__PURE__ */ jsx2(
+      "a",
+      {
+        className: cn("ods-mkt-cta__link", `ods-mkt-cta__link--${variant}`),
+        href: action.href,
+        onClick: action.onClick,
+        children: action.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(Button, { variant, onClick: action.onClick, children: action.label });
+}
+function CtaBanner({
+  title,
+  lede,
+  primary,
+  secondary,
+  footnote,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs2("section", { ...rest, className: cn("ods-mkt-cta", className), children: [
+    /* @__PURE__ */ jsx2("h2", { className: "ods-mkt-cta__title", children: title }),
+    lede && /* @__PURE__ */ jsx2("p", { className: "ods-mkt-cta__lede", children: lede }),
+    /* @__PURE__ */ jsxs2("div", { className: "ods-mkt-cta__actions", children: [
+      /* @__PURE__ */ jsx2(Action, { action: primary, variant: "primary" }),
+      secondary && /* @__PURE__ */ jsx2(Action, { action: secondary, variant: "secondary" })
+    ] }),
+    footnote && /* @__PURE__ */ jsx2("p", { className: "ods-mkt-cta__footnote", children: footnote })
+  ] });
+}
+
+// src/marketing/components/FeatureGrid/FeatureGrid.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FeatureGrid({
+  items,
+  columns = 3,
+  dense = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "ods-mkt-features",
+        `ods-mkt-features--${columns}`,
+        dense && "ods-mkt-features--dense",
+        className
+      ),
+      children: items.map((item) => /* @__PURE__ */ jsxs3("article", { className: "ods-mkt-features__cell", children: [
+        item.icon && /* @__PURE__ */ jsx3("span", { className: "ods-mkt-features__icon", "aria-hidden": "true", children: item.icon }),
+        /* @__PURE__ */ jsx3("h3", { className: "ods-mkt-features__title", children: item.title }),
+        /* @__PURE__ */ jsx3("p", { className: "ods-mkt-features__body", children: item.body })
+      ] }, item.id))
+    }
+  );
+}
+
+// src/marketing/glyphs.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var base = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function SourceGlyph({ size = 12 }) {
+  return /* @__PURE__ */ jsxs4("svg", { ...base, width: size, height: size, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx4("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
+    /* @__PURE__ */ jsx4("path", { d: "M3 5v14a9 3 0 0 0 18 0V5" }),
+    /* @__PURE__ */ jsx4("path", { d: "M3 12a9 3 0 0 0 18 0" })
+  ] });
+}
+function DestinationGlyph({ size = 12 }) {
+  return /* @__PURE__ */ jsxs4("svg", { ...base, width: size, height: size, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx4("rect", { x: "2", y: "3", width: "20", height: "5", rx: "1" }),
+    /* @__PURE__ */ jsx4("path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" }),
+    /* @__PURE__ */ jsx4("path", { d: "M10 12h4" })
+  ] });
+}
+function ActionGlyph({ size = 12 }) {
+  return /* @__PURE__ */ jsx4("svg", { ...base, width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M13 2 3 14h9l-1 8 10-12h-9l1-8z" }) });
+}
+function NotifyGlyph({ size = 12 }) {
+  return /* @__PURE__ */ jsx4("svg", { ...base, width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+}
+function ConnectorGlyph({ size = 12 }) {
+  return /* @__PURE__ */ jsxs4("svg", { ...base, width: size, height: size, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx4("path", { d: "M12 22v-5" }),
+    /* @__PURE__ */ jsx4("path", { d: "M9 8V2M15 8V2" }),
+    /* @__PURE__ */ jsx4("path", { d: "M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8h12z" })
+  ] });
+}
+function BrandMark({ size = 18 }) {
+  return /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 18 18", width: size, height: size, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx4("rect", { width: "18", height: "18", fill: "var(--ods-accent)" }),
+    /* @__PURE__ */ jsx4("path", { d: "M4 9h8.5M9.5 5.5 13 9l-3.5 3.5", stroke: "#fff", strokeWidth: "1.6", fill: "none" })
+  ] });
+}
+function roleGlyph(role, size = 12) {
+  switch (role) {
+    case "source":
+      return /* @__PURE__ */ jsx4(SourceGlyph, { size });
+    case "destination":
+      return /* @__PURE__ */ jsx4(DestinationGlyph, { size });
+    case "action":
+      return /* @__PURE__ */ jsx4(ActionGlyph, { size });
+    case "notify":
+      return /* @__PURE__ */ jsx4(NotifyGlyph, { size });
+  }
+}
+
+// src/marketing/components/IntegrationsWall/IntegrationsWall.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function IntegrationsWall({
+  categories,
+  footnote,
+  bareChips = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs5("div", { ...rest, className: cn("ods-mkt-wall", className), children: [
+    /* @__PURE__ */ jsx5("div", { className: "ods-mkt-wall__grid", children: categories.map((category) => /* @__PURE__ */ jsxs5("div", { className: "ods-mkt-wall__row", children: [
+      /* @__PURE__ */ jsx5("div", { className: "ods-mkt-wall__category", children: category.label }),
+      /* @__PURE__ */ jsx5("div", { className: "ods-mkt-wall__chips", children: category.items.map((item) => /* @__PURE__ */ jsxs5("span", { className: "ods-mkt-wall__chip", children: [
+        (item.icon || !bareChips) && /* @__PURE__ */ jsx5("span", { className: "ods-mkt-wall__chip-icon", "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ jsx5(ConnectorGlyph, { size: 13 }) }),
+        item.name
+      ] }, item.name)) })
+    ] }, category.id)) }),
+    footnote && /* @__PURE__ */ jsx5("p", { className: "ods-mkt-wall__footnote", children: footnote })
+  ] });
+}
+
+// src/marketing/components/LiveConsole/LiveConsole.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var STATE_GLYPH = {
+  done: "\u2713",
+  running: "\u27F3",
+  queued: "\u2192",
+  error: "\u2715"
+};
+function LiveConsole({
+  title,
+  badge = "LIVE",
+  lines,
+  animated = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs6("div", { ...rest, className: cn("ods-mkt-console", className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "ods-mkt-console__head", children: [
+      /* @__PURE__ */ jsx6("span", { className: "ods-mkt-console__title", children: title }),
+      badge != null && /* @__PURE__ */ jsxs6("span", { className: "ods-mkt-console__badge", children: [
+        /* @__PURE__ */ jsx6("span", { className: "ods-mkt-console__dot" }),
+        badge
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "ods-mkt-console__body", children: lines.map((line, i) => {
+      const state = line.state ?? "done";
+      return /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          className: cn("ods-mkt-console__line", animated && "ods-mkt-console__line--animated"),
+          style: animated ? { animationDelay: `${0.3 + i * 0.6}s` } : void 0,
+          children: [
+            /* @__PURE__ */ jsx6(
+              "span",
+              {
+                className: cn("ods-mkt-console__glyph", `ods-mkt-console__glyph--${state}`),
+                "aria-hidden": "true",
+                children: STATE_GLYPH[state]
+              }
+            ),
+            " ",
+            /* @__PURE__ */ jsx6("span", { className: "ods-mkt-console__label", children: line.label }),
+            line.detail && /* @__PURE__ */ jsxs6(
+              "span",
+              {
+                className: cn(
+                  "ods-mkt-console__detail",
+                  state === "running" && "ods-mkt-console__detail--running"
+                ),
+                children: [
+                  " ",
+                  line.detail
+                ]
+              }
+            )
+          ]
+        },
+        line.id
+      );
+    }) })
+  ] });
+}
+
+// src/marketing/components/MarketingFooter/MarketingFooter.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function MarketingFooter({
+  brand,
+  tagline,
+  meta,
+  columns = [],
+  legal,
+  social,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs7("footer", { ...rest, className: cn("ods-mkt-footer", className), children: [
+    /* @__PURE__ */ jsxs7("div", { className: "ods-mkt-footer__grid", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "ods-mkt-footer__brand-col", children: [
+        /* @__PURE__ */ jsx7("div", { className: "ods-mkt-footer__brand", children: brand ?? /* @__PURE__ */ jsxs7(Fragment, { children: [
+          /* @__PURE__ */ jsx7(BrandMark, { size: 16 }),
+          /* @__PURE__ */ jsx7("span", { children: "OctaviaFlow" })
+        ] }) }),
+        tagline && /* @__PURE__ */ jsx7("p", { className: "ods-mkt-footer__tagline", children: tagline }),
+        meta && /* @__PURE__ */ jsx7("div", { className: "ods-mkt-footer__meta", children: meta })
+      ] }),
+      columns.map((column) => /* @__PURE__ */ jsxs7("nav", { className: "ods-mkt-footer__col", "aria-label": String(column.id), children: [
+        /* @__PURE__ */ jsx7("span", { className: "ods-mkt-footer__col-label", children: column.label }),
+        column.links.map((link) => /* @__PURE__ */ jsx7("a", { className: "ods-mkt-footer__link", href: link.href, children: link.label }, link.href))
+      ] }, column.id))
+    ] }),
+    (legal || social) && /* @__PURE__ */ jsxs7("div", { className: "ods-mkt-footer__bar", children: [
+      /* @__PURE__ */ jsx7("span", { children: legal }),
+      /* @__PURE__ */ jsx7("span", { children: social })
+    ] })
+  ] });
+}
+
+// src/marketing/components/MarketingHero/MarketingHero.tsx
+import { motion, useReducedMotion } from "framer-motion";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function MarketingHero({
+  kicker,
+  title,
+  lede,
+  align = "center",
+  className,
+  children,
+  ...rest
+}) {
+  const reducedMotion = useReducedMotion();
+  const words = title.split(/\s+/).filter(Boolean);
+  return /* @__PURE__ */ jsxs8(
+    "section",
+    {
+      ...rest,
+      className: cn("ods-mkt-hero", align === "center" && "ods-mkt-hero--center", className),
+      children: [
+        kicker && /* @__PURE__ */ jsx8("p", { className: "ods-mkt-hero__kicker", children: kicker }),
+        /* @__PURE__ */ jsx8("h1", { className: "ods-mkt-hero__title", children: words.map((word, i) => /* @__PURE__ */ jsxs8(
+          "span",
+          {
+            className: "ods-mkt-hero__word-clip",
+            children: [
+              /* @__PURE__ */ jsx8(
+                motion.span,
+                {
+                  className: "ods-mkt-hero__word",
+                  initial: reducedMotion ? false : { opacity: 0, y: "100%" },
+                  animate: { opacity: 1, y: 0 },
+                  transition: {
+                    duration: 0.7,
+                    delay: 0.05 + i * 0.08,
+                    ease: [0.2, 0.7, 0.2, 1]
+                  },
+                  children: word
+                }
+              ),
+              " "
+            ]
+          },
+          i
+        )) }),
+        lede && /* @__PURE__ */ jsx8(
+          motion.p,
+          {
+            className: "ods-mkt-hero__lede",
+            initial: reducedMotion ? false : { opacity: 0, y: 12 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.8, delay: 0.6, ease: [0.2, 0.7, 0.2, 1] },
+            children: lede
+          }
+        ),
+        children && /* @__PURE__ */ jsx8(
+          motion.div,
+          {
+            className: "ods-mkt-hero__body",
+            initial: reducedMotion ? false : { opacity: 0, y: 12 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.8, delay: 0.75, ease: [0.2, 0.7, 0.2, 1] },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/marketing/components/MarketingNav/MarketingNav.tsx
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function MarketingNav({
+  brand,
+  brandHref = "/",
+  links = [],
+  actions,
+  sticky = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs9("header", { ...rest, className: cn("ods-mkt-nav", sticky && "ods-mkt-nav--sticky", className), children: [
+    /* @__PURE__ */ jsx9("a", { className: "ods-mkt-nav__brand", href: brandHref, children: brand ?? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+      /* @__PURE__ */ jsx9(BrandMark, {}),
+      /* @__PURE__ */ jsx9("span", { children: "OctaviaFlow" })
+    ] }) }),
+    links.length > 0 && /* @__PURE__ */ jsx9("nav", { className: "ods-mkt-nav__links", "aria-label": "Main", children: links.map((link) => /* @__PURE__ */ jsx9(
+      "a",
+      {
+        href: link.href,
+        className: cn("ods-mkt-nav__link", link.active && "ods-mkt-nav__link--active"),
+        "aria-current": link.active ? "page" : void 0,
+        children: link.label
+      },
+      link.href
+    )) }),
+    actions && /* @__PURE__ */ jsx9("div", { className: "ods-mkt-nav__actions", children: actions })
+  ] });
+}
+
+// src/marketing/components/MarketingSection/MarketingSection.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function MarketingSection({
+  kicker,
+  title,
+  lede,
+  align = "start",
+  tone = "default",
+  flushTop = false,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs10(
+    "section",
+    {
+      ...rest,
+      className: cn(
+        "ods-mkt-section",
+        align === "center" && "ods-mkt-section--center",
+        tone === "subtle" && "ods-mkt-section--subtle",
+        flushTop && "ods-mkt-section--flush",
+        className
+      ),
+      children: [
+        (kicker || title || lede) && /* @__PURE__ */ jsxs10("header", { className: "ods-mkt-section__head", children: [
+          kicker && /* @__PURE__ */ jsx10("p", { className: "ods-mkt-section__kicker", children: kicker }),
+          title && /* @__PURE__ */ jsx10("h2", { className: "ods-mkt-section__title", children: title }),
+          lede && /* @__PURE__ */ jsx10("p", { className: "ods-mkt-section__lede", children: lede })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+
+// src/marketing/components/StatBand/StatBand.tsx
+import { useReducedMotion as useReducedMotion2 } from "framer-motion";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function StatBand({ items, orientation = "column", className, ...rest }) {
+  const reducedMotion = useReducedMotion2();
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ...rest,
+      className: cn("ods-mkt-statband", `ods-mkt-statband--${orientation}`, className),
+      children: items.map((item) => /* @__PURE__ */ jsxs11("div", { className: "ods-mkt-statband__item", children: [
+        /* @__PURE__ */ jsx11("div", { className: "ods-mkt-statband__value", children: typeof item.value === "number" ? /* @__PURE__ */ jsx11(
+          CountUp,
+          {
+            value: item.value,
+            duration: 900,
+            disableAnimation: Boolean(reducedMotion),
+            prefix: item.prefix,
+            suffix: item.suffix,
+            formatValue: (v) => Math.round(v).toLocaleString("en-US")
+          }
+        ) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+          item.prefix,
+          item.value,
+          item.suffix
+        ] }) }),
+        /* @__PURE__ */ jsx11("div", { className: "ods-mkt-statband__label", children: item.label })
+      ] }, item.id))
+    }
+  );
+}
+
+// src/marketing/components/WorkflowShowcase/showcaseEngine.ts
+var SETTLED_PHASES = [
+  "done",
+  "signup",
+  "creating",
+  "welcome"
+];
+var WORKFLOW_SHOWCASE_DEFAULT_CONNECTORS = [
+  { name: "Storefront", role: "source", aliases: ["store", "shop orders"] },
+  { name: "Payments", role: "source", aliases: ["payouts"] },
+  { name: "Orders DB", role: "source", aliases: ["orders database"] },
+  { name: "CRM", role: "source", aliases: ["crm leads"] },
+  { name: "Warehouse", role: "destination" },
+  { name: "Lakehouse", role: "destination" },
+  { name: "Campaigns", role: "action", aliases: ["campaign"] },
+  { name: "Team Chat", role: "notify", aliases: ["chat", "alert the team"] }
+];
+var WORKFLOW_SHOWCASE_DEFAULT_EXAMPLES = [
+  {
+    id: "hourly-sync",
+    label: "Storefront orders \u2192 Warehouse, hourly",
+    prompt: "Sync Storefront orders to Warehouse every hour, alert sales in Team Chat"
+  },
+  {
+    id: "daily-load",
+    label: "Payments payouts \u2192 Lakehouse, daily",
+    prompt: "Load Payments payouts into Lakehouse daily"
+  },
+  {
+    id: "realtime-stream",
+    label: "Orders DB changes \u2192 Warehouse + Team Chat",
+    prompt: "Stream Orders DB changes to Warehouse in real-time and notify Team Chat"
+  }
+];
+var WORKFLOW_SHOWCASE_DEFAULT_METRICS = [
+  { id: "throughput", value: 2341, buildingValue: 842, unit: "rows/min", label: "THROUGHPUT" },
+  {
+    id: "latency",
+    value: 0.8,
+    buildingValue: 1.1,
+    decimals: 1,
+    unit: "s latency",
+    label: "SYNC SPEED"
+  },
+  { id: "cost", value: 43, prefix: "\u2212", suffix: "%", label: "COST VS BASELINE", tone: "success" }
+];
+var WORKFLOW_SHOWCASE_SCHEDULES = ["AUTO", "HOURLY", "DAILY", "REAL-TIME"];
+var WORKFLOW_SHOWCASE_DEFAULT_TILES = [
+  "ELT",
+  "CDC",
+  "DAG",
+  "CRON",
+  "HEAL",
+  "COST",
+  "API",
+  "LOG"
+];
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function mentionsOf(catalog) {
+  const out = [];
+  for (const connector of catalog) {
+    out.push({ connector, pattern: connector.name });
+    for (const alias of connector.aliases ?? []) out.push({ connector, pattern: alias });
+  }
+  return out.sort((a, b) => b.pattern.length - a.pattern.length);
+}
+function detectConnectors(prompt, catalog) {
+  const lower = prompt.toLowerCase();
+  return catalog.filter((c) => [c.name, ...c.aliases ?? []].some((p) => lower.includes(p.toLowerCase()))).map((c) => c.name);
+}
+function segmentPrompt(prompt, catalog) {
+  if (!prompt) return [];
+  const mentions = mentionsOf(catalog);
+  if (!mentions.length) return [{ text: prompt }];
+  const re = new RegExp(`(${mentions.map((m) => escapeRegExp(m.pattern)).join("|")})`, "gi");
+  const byPattern = new Map(mentions.map((m) => [m.pattern.toLowerCase(), m.connector]));
+  return prompt.split(re).filter((part) => part !== "").map((part) => {
+    const connector = byPattern.get(part.toLowerCase());
+    return connector ? { text: part, connector } : { text: part };
+  });
+}
+function scheduleFromPrompt(prompt) {
+  const t = prompt.toLowerCase();
+  if (/stream|real.?time|cdc/.test(t)) return "REAL-TIME";
+  if (/hour/.test(t)) return "HOURLY";
+  if (/dail|every day|nightly/.test(t)) return "DAILY";
+  return null;
+}
+var RIGHT_ORDER = {
+  source: -1,
+  destination: 0,
+  action: 1,
+  notify: 2
+};
+function resolvePlan(selected, detected, catalog) {
+  const byName = new Map(catalog.map((c) => [c.name, c]));
+  let names = [.../* @__PURE__ */ new Set([...selected, ...detected])].filter((n) => byName.has(n));
+  if (!names.length) {
+    const fallback = [
+      catalog.find((c) => c.role === "source"),
+      catalog.find((c) => c.role === "destination"),
+      catalog.find((c) => c.role === "notify")
+    ].filter((c) => Boolean(c));
+    names = fallback.map((c) => c.name);
+  }
+  const has = (predicate) => names.some((n) => {
+    const c = byName.get(n);
+    return Boolean(c && predicate(c));
+  });
+  if (!has((c) => c.role === "source")) {
+    const source = catalog.find((c) => c.role === "source");
+    if (source) names = [source.name, ...names];
+  }
+  if (!has((c) => c.role !== "source")) {
+    const sink = catalog.find((c) => c.role === "notify") ?? catalog.find((c) => c.role !== "source");
+    if (sink) names = [...names, sink.name];
+  }
+  const picked = catalog.filter((c) => names.includes(c.name));
+  const left = picked.filter((c) => c.role === "source");
+  const right = picked.filter((c) => c.role !== "source").sort((a, b) => RIGHT_ORDER[a.role] - RIGHT_ORDER[b.role]);
+  const all = [...left, ...right];
+  return { left, right, all, totalSteps: all.length + 1 };
+}
+function stepVerb(role) {
+  if (role === "notify") return "alert";
+  if (role === "action") return "trigger";
+  return "load";
+}
+function assembleSteps(plan) {
+  return [
+    ...plan.left.map((c) => `${c.name.toLowerCase()} extract`),
+    "schema map \xB7 14 fields",
+    ...plan.right.map((c) => `${c.name.toLowerCase()} ${stepVerb(c.role)}`)
+  ];
+}
+function buildActivity(args) {
+  const { phase, shown, plan, selected, status } = args;
+  const settled = SETTLED_PHASES.includes(phase);
+  const lines = [];
+  if (phase === "idle") {
+    if (!selected.length) {
+      lines.push({ id: "wait", text: "\u25B8 waiting for instructions\u2026", tone: "muted" });
+      lines.push({ id: "hint", text: "\xB7 type a request or pick apps", tone: "faint" });
+    }
+    for (const name of selected.slice(-6)) {
+      lines.push({ id: `sel-${name}`, text: `+ ${name.toLowerCase()} connected`, tone: "plain" });
+    }
+    return lines;
+  }
+  if (phase === "analyzing") {
+    for (const name of selected.slice(-4)) {
+      lines.push({ id: `sel-${name}`, text: `+ ${name.toLowerCase()} connected`, tone: "muted" });
+    }
+    lines.push({ id: "status", text: `\u27F3 ${status}`, tone: "active" });
+    return lines;
+  }
+  assembleSteps(plan).forEach((step, i) => {
+    if (settled || shown > i) lines.push({ id: `step-${i}`, text: `\u2713 ${step}`, tone: "done" });
+    else if (shown === i) lines.push({ id: `step-${i}`, text: `\u27F3 ${step}\u2026`, tone: "active" });
+    else lines.push({ id: `step-${i}`, text: `\xB7 ${step} queued`, tone: "muted" });
+  });
+  if (settled) lines.push({ id: "errors", text: "\u2713 error handling attached", tone: "done" });
+  return lines.slice(-8);
+}
+function slugify(value) {
+  return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "your-team";
+}
+function isValidEmail(value) {
+  return /^\S+@\S+\.\S+$/.test(value.trim());
+}
+
+// src/marketing/components/WorkflowShowcase/WorkflowShowcase.tsx
+import { AnimatePresence as AnimatePresence2, motion as motion3, useReducedMotion as useReducedMotion4 } from "framer-motion";
+import {
+  useCallback,
+  useEffect as useEffect2,
+  useMemo,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+
+// src/marketing/components/WorkflowShowcase/ShowcaseScene.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function slots(n) {
+  return Array.from({ length: n }, (_, i) => 208 + (i - (n - 1) / 2) * 80);
+}
+var leftGuide = (cy) => `M74 ${cy} H150 V228 H193`;
+var rightGuide = (cy) => `M263 228 H340 V${cy} H388`;
+function particlesFor(side, index, path, active, fast) {
+  const base2 = index * 0.4 + (side === "r" ? 0.5 : 0);
+  const duration = fast ? active ? "1.1s" : "2.6s" : active ? "2.2s" : "4.8s";
+  const size = active ? 8 : 6;
+  const out = [
+    { key: `${side}${index}-a`, path, size, duration, delay: `${base2}s`, variant: "lead" },
+    {
+      key: `${side}${index}-b`,
+      path,
+      size,
+      duration,
+      delay: `${base2 + (active ? 1.1 : 2.4)}s`,
+      variant: "echo"
+    }
+  ];
+  if (active) {
+    out.push({
+      key: `${side}${index}-c`,
+      path,
+      size: 6,
+      duration,
+      delay: `${base2 + 0.55}s`,
+      variant: "spark"
+    });
+  }
+  return out;
+}
+function DefaultCoreGlyph() {
+  return /* @__PURE__ */ jsxs12("svg", { viewBox: "0 0 24 24", width: "30", height: "30", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx12("rect", { x: "3", y: "3", width: "18", height: "18", rx: "1", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx12(
+      "path",
+      {
+        d: "M7 12h7M11.5 8.5 15 12l-3.5 3.5",
+        stroke: "currentColor",
+        strokeWidth: "1.6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function CubeFace({ connector }) {
+  return /* @__PURE__ */ jsx12(
+    "span",
+    {
+      className: cn(
+        "ods-showcase__apptile",
+        "ods-showcase__apptile--lg",
+        `ods-showcase__apptile--${connector.role}`
+      ),
+      children: connector.icon ?? roleGlyph(connector.role, 18)
+    }
+  );
+}
+function ShowcaseScene({
+  left,
+  right,
+  engaged,
+  tiles,
+  coreIcon,
+  caption
+}) {
+  const [pulse, setPulse] = useState(false);
+  const pulseTimer = useRef(null);
+  useEffect(
+    () => () => {
+      if (pulseTimer.current) clearTimeout(pulseTimer.current);
+    },
+    []
+  );
+  const firePulse = () => {
+    if (pulse) return;
+    setPulse(true);
+    pulseTimer.current = setTimeout(() => setPulse(false), 1500);
+  };
+  const leftYs = slots(left.length);
+  const rightYs = slots(right.length);
+  const guides = [];
+  const particles = [];
+  left.forEach((node, i) => {
+    const d = leftGuide(leftYs[i]);
+    const on = engaged && node.active;
+    guides.push({ d, on, delay: `${i * 0.2}s` });
+    particles.push(...particlesFor("l", i, d, on, pulse));
+  });
+  right.forEach((node, j) => {
+    const d = rightGuide(rightYs[j]);
+    const on = engaged && node.active;
+    guides.push({ d, on, delay: `${j * 0.2 + 0.3}s` });
+    particles.push(...particlesFor("r", j, d, on, pulse));
+  });
+  if (!left.length) guides.push({ d: leftGuide(208), on: false, delay: "0s" });
+  if (!right.length) guides.push({ d: rightGuide(208), on: false, delay: "0s" });
+  const pins = [];
+  for (let x = 118; x <= 338; x += 20) {
+    pins.push({ d: `M${x} 346 L${x} 368`, accent: x / 20 % 4 === 0 });
+  }
+  for (let y = 118; y <= 338; y += 20) {
+    pins.push({ d: `M346 ${y} L368 ${y}`, accent: y / 20 % 4 === 1 });
+  }
+  const tilePositions = [
+    { left: 8, top: 8 },
+    { left: 83, top: 8 },
+    { left: 158, top: 8 },
+    { left: 8, top: 83 },
+    { left: 158, top: 83 },
+    { left: 8, top: 158 },
+    { left: 83, top: 158 },
+    { left: 158, top: 158 }
+  ];
+  return /* @__PURE__ */ jsxs12("div", { className: "ods-showcase__scene", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "ods-showcase__scene-stage", children: [
+      /* @__PURE__ */ jsxs12("svg", { className: "ods-showcase__wires", width: "460", height: "460", "aria-hidden": "true", children: [
+        pins.map((pin) => /* @__PURE__ */ jsx12(
+          "path",
+          {
+            d: pin.d,
+            className: cn("ods-showcase__pin", pin.accent && "ods-showcase__pin--accent")
+          },
+          pin.d
+        )),
+        guides.map((guide) => /* @__PURE__ */ jsxs12("g", { children: [
+          /* @__PURE__ */ jsx12("path", { d: guide.d, className: "ods-showcase__guide" }),
+          /* @__PURE__ */ jsx12(
+            "path",
+            {
+              d: guide.d,
+              className: cn(
+                "ods-showcase__guide-trace",
+                guide.on && "ods-showcase__guide-trace--on"
+              ),
+              style: { animationDelay: guide.delay }
+            }
+          )
+        ] }, guide.d))
+      ] }),
+      particles.map((p) => /* @__PURE__ */ jsx12(
+        "span",
+        {
+          className: cn("ods-showcase__particle", `ods-showcase__particle--${p.variant}`),
+          style: {
+            width: p.size,
+            height: p.size,
+            offsetPath: `path('${p.path}')`,
+            animationDuration: p.duration,
+            animationDelay: p.delay
+          }
+        },
+        p.key
+      )),
+      /* @__PURE__ */ jsxs12("div", { className: "ods-showcase__platform", children: [
+        /* @__PURE__ */ jsx12("span", { className: "ods-showcase__platform-south" }),
+        /* @__PURE__ */ jsx12("span", { className: "ods-showcase__platform-east" }),
+        /* @__PURE__ */ jsx12("span", { className: "ods-showcase__platform-top" }),
+        tiles.slice(0, 8).map((label, i) => /* @__PURE__ */ jsx12(
+          "span",
+          {
+            className: "ods-showcase__tile",
+            style: { left: tilePositions[i].left, top: tilePositions[i].top },
+            children: label
+          },
+          label
+        )),
+        pulse && /* @__PURE__ */ jsx12("span", { className: "ods-showcase__core-ring" }),
+        /* @__PURE__ */ jsxs12("button", { type: "button", tabIndex: -1, className: "ods-showcase__core", onClick: firePulse, children: [
+          /* @__PURE__ */ jsx12("span", { className: "ods-showcase__core-south" }),
+          /* @__PURE__ */ jsx12("span", { className: "ods-showcase__core-east" }),
+          /* @__PURE__ */ jsx12("span", { className: "ods-showcase__core-top", children: coreIcon ?? /* @__PURE__ */ jsx12(DefaultCoreGlyph, {}) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx12("span", { className: "ods-showcase__floater ods-showcase__floater--a" }),
+      /* @__PURE__ */ jsx12("span", { className: "ods-showcase__floater ods-showcase__floater--b" }),
+      /* @__PURE__ */ jsx12("span", { className: "ods-showcase__floater ods-showcase__floater--c" }),
+      !left.length && /* @__PURE__ */ jsx12("span", { className: "ods-showcase__ghost", style: { left: 8, top: 178 }, children: "+" }),
+      !right.length && /* @__PURE__ */ jsx12("span", { className: "ods-showcase__ghost", style: { left: 392, top: 178 }, children: "+" }),
+      left.map((node, i) => /* @__PURE__ */ jsxs12(
+        "span",
+        {
+          className: cn(
+            "ods-showcase__cube",
+            node.active && "ods-showcase__cube--active",
+            i % 2 ? "ods-showcase__cube--float-b" : "ods-showcase__cube--float-a"
+          ),
+          style: { left: 8, top: leftYs[i] - 30, animationDelay: `${i * 0.15}s` },
+          children: [
+            /* @__PURE__ */ jsx12("span", { className: "ods-showcase__cube-south" }),
+            /* @__PURE__ */ jsx12("span", { className: "ods-showcase__cube-east" }),
+            /* @__PURE__ */ jsx12("span", { className: "ods-showcase__cube-top", children: /* @__PURE__ */ jsx12(CubeFace, { connector: node.connector }) })
+          ]
+        },
+        node.connector.name
+      )),
+      right.map((node, j) => /* @__PURE__ */ jsxs12(
+        "span",
+        {
+          className: cn(
+            "ods-showcase__cube",
+            node.active && "ods-showcase__cube--active",
+            j % 2 ? "ods-showcase__cube--float-a" : "ods-showcase__cube--float-b"
+          ),
+          style: { left: 392, top: rightYs[j] - 30, animationDelay: `${j * 0.15}s` },
+          children: [
+            /* @__PURE__ */ jsx12("span", { className: "ods-showcase__cube-south" }),
+            /* @__PURE__ */ jsx12("span", { className: "ods-showcase__cube-east" }),
+            /* @__PURE__ */ jsx12("span", { className: "ods-showcase__cube-top", children: /* @__PURE__ */ jsx12(CubeFace, { connector: node.connector }) })
+          ]
+        },
+        node.connector.name
+      ))
+    ] }),
+    /* @__PURE__ */ jsx12("span", { className: "ods-showcase__scene-caption", children: caption })
+  ] });
+}
+
+// src/marketing/components/WorkflowShowcase/ShowcaseSignup.tsx
+import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion3 } from "framer-motion";
+import { useId, useState as useState2 } from "react";
+import { FocusScope } from "react-aria";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var OVERLAY_MOTION = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 }
+};
+function ShowcaseSignup({
+  phase,
+  stepCount,
+  workspaceDomain,
+  teamSizes,
+  error,
+  onSubmit,
+  onBack,
+  dashboardHref = "#",
+  onboardingHref = "#"
+}) {
+  const reducedMotion = useReducedMotion3();
+  const titleId = useId();
+  const subtitleId = useId();
+  const [values, setValues] = useState2({
+    name: "",
+    email: "",
+    company: "",
+    teamSize: teamSizes[0] ?? "1\u201310"
+  });
+  const open = phase === "signup" || phase === "creating" || phase === "welcome";
+  const cardMotion = reducedMotion ? OVERLAY_MOTION : {
+    initial: { opacity: 0, y: 14, scale: 0.985 },
+    animate: { opacity: 1, y: 0, scale: 1 },
+    exit: { opacity: 0, y: 8, scale: 0.99 }
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit(values);
+  };
+  const firstName = values.name.trim().split(/\s+/)[0] || "";
+  const emailShown = values.email.trim() || "your inbox";
+  const slug = `${slugify(values.company)}.${workspaceDomain}`;
+  return /* @__PURE__ */ jsx13(AnimatePresence, { children: open && /* @__PURE__ */ jsx13(
+    motion2.div,
+    {
+      className: "ods-showcase__veil",
+      ...OVERLAY_MOTION,
+      transition: { duration: reducedMotion ? 0 : 0.22 },
+      children: /* @__PURE__ */ jsxs13(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: [
+        phase === "signup" && /* @__PURE__ */ jsxs13(
+          motion2.form,
+          {
+            className: "ods-showcase__glass-card",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": subtitleId,
+            onSubmit: handleSubmit,
+            onKeyDown: (e) => {
+              if (e.key === "Escape") onBack();
+            },
+            ...cardMotion,
+            transition: { duration: reducedMotion ? 0 : 0.3, ease: [0.2, 0.7, 0.2, 1] },
+            children: [
+              /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__glass-head", children: [
+                /* @__PURE__ */ jsx13("h3", { id: titleId, className: "ods-showcase__glass-title", children: "Create your workspace" }),
+                /* @__PURE__ */ jsxs13("p", { id: subtitleId, className: "ods-showcase__microcopy", children: [
+                  "FREE IN PRIVATE BETA \xB7 YOUR ",
+                  stepCount,
+                  "-STEP WORKFLOW COMES WITH YOU"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__form-grid", children: [
+                /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__field", children: [
+                  /* @__PURE__ */ jsx13("span", { className: "ods-showcase__field-label", children: "FULL NAME" }),
+                  /* @__PURE__ */ jsx13(
+                    Input,
+                    {
+                      "aria-label": "Full name",
+                      autoComplete: "name",
+                      placeholder: "Ada Lovelace",
+                      value: values.name,
+                      onChange: (e) => setValues((v) => ({ ...v, name: e.target.value }))
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__field", children: [
+                  /* @__PURE__ */ jsx13("span", { className: "ods-showcase__field-label", children: "WORK EMAIL" }),
+                  /* @__PURE__ */ jsx13(
+                    Input,
+                    {
+                      "aria-label": "Work email",
+                      type: "email",
+                      autoComplete: "email",
+                      placeholder: "ada@company.com",
+                      value: values.email,
+                      onChange: (e) => setValues((v) => ({ ...v, email: e.target.value }))
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__field", children: [
+                  /* @__PURE__ */ jsx13("span", { className: "ods-showcase__field-label", children: "COMPANY" }),
+                  /* @__PURE__ */ jsx13(
+                    Input,
+                    {
+                      "aria-label": "Company",
+                      autoComplete: "organization",
+                      placeholder: "Acme Inc.",
+                      value: values.company,
+                      onChange: (e) => setValues((v) => ({ ...v, company: e.target.value }))
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__field", children: [
+                  /* @__PURE__ */ jsx13("span", { className: "ods-showcase__field-label", children: "TEAM SIZE" }),
+                  /* @__PURE__ */ jsx13(
+                    Select,
+                    {
+                      "aria-label": "Team size",
+                      options: teamSizes.map((size) => ({ value: size, label: size })),
+                      value: values.teamSize,
+                      onChange: (teamSize) => setValues((v) => ({ ...v, teamSize }))
+                    }
+                  )
+                ] })
+              ] }),
+              error && /* @__PURE__ */ jsx13("p", { className: "ods-showcase__form-error", role: "alert", children: error }),
+              /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__glass-foot", children: [
+                /* @__PURE__ */ jsx13("span", { className: "ods-showcase__microcopy", children: "NO CREDIT CARD \xB7 SSO & SELF-HOSTING LATER" }),
+                /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__glass-actions", children: [
+                  /* @__PURE__ */ jsx13(Button, { type: "button", variant: "secondary", onClick: onBack, children: "Back" }),
+                  /* @__PURE__ */ jsx13(Button, { type: "submit", variant: "primary", children: "Create account & deploy \u2192" })
+                ] })
+              ] })
+            ]
+          },
+          "signup"
+        ),
+        phase === "creating" && /* @__PURE__ */ jsxs13(
+          motion2.div,
+          {
+            className: "ods-showcase__glass-card ods-showcase__glass-card--slim",
+            role: "status",
+            ...cardMotion,
+            transition: { duration: reducedMotion ? 0 : 0.25 },
+            children: [
+              /* @__PURE__ */ jsx13("span", { className: "ods-showcase__spin", "aria-hidden": "true", children: "\u27F3" }),
+              /* @__PURE__ */ jsxs13("span", { className: "ods-showcase__creating-line", children: [
+                "provisioning workspace \xB7 saving draft \xB7 inviting ",
+                emailShown
+              ] })
+            ]
+          },
+          "creating"
+        ),
+        phase === "welcome" && /* @__PURE__ */ jsxs13(
+          motion2.div,
+          {
+            className: "ods-showcase__glass-card ods-showcase__glass-card--welcome",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            ...cardMotion,
+            transition: { duration: reducedMotion ? 0 : 0.3, ease: [0.2, 0.7, 0.2, 1] },
+            children: [
+              /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__glass-head", children: [
+                /* @__PURE__ */ jsx13("p", { className: "ods-showcase__microcopy ods-showcase__microcopy--success", children: "\u2713 WORKSPACE READY" }),
+                /* @__PURE__ */ jsxs13("h3", { id: titleId, className: "ods-showcase__glass-title", children: [
+                  "Welcome to OctaviaFlow",
+                  firstName ? `, ${firstName}` : "",
+                  "."
+                ] }),
+                /* @__PURE__ */ jsxs13("p", { className: "ods-showcase__welcome-body", children: [
+                  "We emailed a sign-in link to ",
+                  /* @__PURE__ */ jsx13("strong", { children: emailShown }),
+                  ". Your ",
+                  stepCount,
+                  "-step workflow is saved as a draft in",
+                  " ",
+                  /* @__PURE__ */ jsx13("code", { className: "ods-showcase__slug", children: slug }),
+                  " \u2014 deploy it from the dashboard whenever you're ready."
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__glass-foot", children: [
+                /* @__PURE__ */ jsxs13("div", { className: "ods-showcase__glass-actions", children: [
+                  /* @__PURE__ */ jsx13("a", { className: "ods-showcase__solid-link", href: dashboardHref, children: "Open dashboard \u2192" }),
+                  /* @__PURE__ */ jsx13("a", { className: "ods-showcase__text-link", href: onboardingHref, children: "Book onboarding \u2192" })
+                ] }),
+                /* @__PURE__ */ jsxs13("span", { className: "ods-showcase__microcopy ods-showcase__microcopy--right", children: [
+                  "PRIVATE BETA",
+                  /* @__PURE__ */ jsx13("br", {}),
+                  "ONBOARDING INCLUDED"
+                ] })
+              ] })
+            ]
+          },
+          "welcome"
+        )
+      ] })
+    }
+  ) });
+}
+
+// src/marketing/components/WorkflowShowcase/WorkflowShowcase.tsx
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var EMPTY_PLAN = { left: [], right: [], all: [], totalSteps: 1 };
+function ConnectorTile({ connector }) {
+  return /* @__PURE__ */ jsx14(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn("ods-showcase__apptile", `ods-showcase__apptile--${connector.role}`),
+      children: connector.icon ?? roleGlyph(connector.role)
+    }
+  );
+}
+function WorkflowShowcase({
+  connectors = WORKFLOW_SHOWCASE_DEFAULT_CONNECTORS,
+  examples = WORKFLOW_SHOWCASE_DEFAULT_EXAMPLES,
+  metrics = WORKFLOW_SHOWCASE_DEFAULT_METRICS,
+  defaultPrompt = "",
+  modelLabel = "octavia-core-1",
+  canvasLabel = "workflow_canvas",
+  railLabel = "OCTAVIA IS DOING",
+  platformTiles = WORKFLOW_SHOWCASE_DEFAULT_TILES,
+  coreIcon,
+  catalogNote = "600+",
+  teamSizes = ["1\u201310", "11\u201350", "51\u2013200", "200+"],
+  workspaceDomain = "octaviaflow.com",
+  dashboardHref,
+  onboardingHref = "#",
+  promptAriaLabel = "Describe your pipeline",
+  onBuild,
+  onPhaseChange,
+  onSignup,
+  className,
+  ...rest
+}) {
+  const reducedMotion = useReducedMotion4();
+  const [prompt, setPrompt] = useState3(defaultPrompt);
+  const [selected, setSelected] = useState3([]);
+  const [phase, setPhase] = useState3("idle");
+  const [shown, setShown] = useState3(0);
+  const [status, setStatus] = useState3("");
+  const [pickerOpen, setPickerOpen] = useState3(false);
+  const [schedIdx, setSchedIdx] = useState3(0);
+  const [swap, setSwap] = useState3(null);
+  const [signupError, setSignupError] = useState3(null);
+  const cardRef = useRef2(null);
+  const timers = useRef2([]);
+  const clearTimers = useCallback(() => {
+    for (const t of timers.current) clearTimeout(t);
+    timers.current = [];
+  }, []);
+  useEffect2(() => clearTimers, [clearTimers]);
+  const tempo = reducedMotion ? 0.35 : 1;
+  const at = useCallback(
+    (ms, fn) => {
+      timers.current.push(setTimeout(fn, ms * tempo));
+    },
+    [tempo]
+  );
+  const firstPhase = useRef2(true);
+  useEffect2(() => {
+    if (firstPhase.current) {
+      firstPhase.current = false;
+      return;
+    }
+    onPhaseChange?.(phase);
+  }, [phase, onPhaseChange]);
+  const phaseRef = useRef2(phase);
+  phaseRef.current = phase;
+  const byName = useMemo(() => new Map(connectors.map((c) => [c.name, c])), [connectors]);
+  const detected = useMemo(() => detectConnectors(prompt, connectors), [prompt, connectors]);
+  const union = useMemo(() => [.../* @__PURE__ */ new Set([...selected, ...detected])], [selected, detected]);
+  const settled = SETTLED_PHASES.includes(phase);
+  const engaged = phase !== "idle";
+  const buildingNow = phase === "analyzing" || phase === "building";
+  const plan = useMemo(() => {
+    if (!selected.length) return EMPTY_PLAN;
+    return resolvePlan(selected, [], connectors);
+  }, [selected, connectors]);
+  const schedules = WORKFLOW_SHOWCASE_SCHEDULES;
+  const inferredSchedule = scheduleFromPrompt(prompt);
+  const manualSchedule = schedules[schedIdx];
+  const scheduleShown = inferredSchedule ?? (manualSchedule === "AUTO" ? "HOURLY" : manualSchedule);
+  const startBuild = useCallback(
+    (text, baseSelected) => {
+      if (phaseRef.current === "analyzing" || phaseRef.current === "building") return;
+      phaseRef.current = "analyzing";
+      clearTimers();
+      const resolved = resolvePlan(baseSelected, detectConnectors(text, connectors), connectors);
+      const target = resolved.all.map((c) => c.name);
+      const additions = target.filter((n) => !baseSelected.includes(n));
+      setPrompt(text);
+      setSelected(baseSelected);
+      setPhase("analyzing");
+      setShown(0);
+      setStatus("analyzing request \xB7 matching connectors");
+      setPickerOpen(false);
+      setSwap(null);
+      onBuild?.({ prompt: text, connectors: target, schedule: scheduleShown });
+      additions.forEach((name, i) => {
+        at(250 + i * 200, () => setSelected((s) => s.includes(name) ? s : [...s, name]));
+      });
+      const t0 = 250 + additions.length * 200;
+      at(t0 + 750, () => setStatus("wiring transforms \xB7 adding error handling"));
+      at(t0 + 1500, () => {
+        setPhase("building");
+        setStatus("assembling workflow \xB7 optimizing plan");
+      });
+      for (let i = 0; i < resolved.totalSteps; i++) {
+        at(t0 + 1600 + i * 380, () => setShown(i + 1));
+      }
+      at(t0 + 1600 + resolved.totalSteps * 380 + 350, () => setPhase("done"));
+    },
+    [clearTimers, connectors, onBuild, scheduleShown, at]
+  );
+  const resetToIdle = useCallback(() => {
+    clearTimers();
+    phaseRef.current = "idle";
+    setPhase("idle");
+    setShown(0);
+    setStatus("");
+    setSwap(null);
+  }, [clearTimers]);
+  const toggleConnector = (name) => {
+    resetToIdle();
+    setSelected((s) => s.includes(name) ? s.filter((n) => n !== name) : [...s, name]);
+  };
+  const runExample = (example) => {
+    resetToIdle();
+    startBuild(example.prompt, []);
+  };
+  const openSwap = (name, text, anchor) => {
+    const card = cardRef.current;
+    if (!card) return;
+    const r = anchor.getBoundingClientRect();
+    const cr = card.getBoundingClientRect();
+    const x = Math.max(8, Math.min(r.left - cr.left, cr.width - 264));
+    setSwap({ name, text, x, y: r.bottom - cr.top + 6 });
+  };
+  const doSwap = (current, next) => {
+    resetToIdle();
+    const re = new RegExp(current.text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i");
+    setPrompt((p) => p.replace(re, next));
+    setSelected((s) => s.map((n) => n === current.name ? next : n));
+  };
+  const swapRole = swap ? byName.get(swap.name)?.role : void 0;
+  const swapItems = swapRole ? connectors.filter((c) => c.role === swapRole) : [];
+  const roles = union.map((n) => byName.get(n)?.role);
+  const hasSource = roles.includes("source");
+  const hasSink = roles.some((r) => r && r !== "source");
+  const hasNotify = roles.includes("notify");
+  let coachLine;
+  let coachAdds = [];
+  const notIn = (c) => !union.includes(c.name);
+  if (!union.length) {
+    coachLine = prompt ? "LISTENING\u2026 CONNECTOR NAMES LIGHT UP AS OCTAVIA RECOGNIZES THEM" : `OCTAVIA MATCHES CONNECTORS LIVE AS YOU TYPE \u2014 OR PICK FROM ${catalogNote}`;
+  } else if (union.length >= connectors.length) {
+    coachLine = "FULL STACK \u2014 OCTAVIA SPLITS THIS INTO PARALLEL INGEST \u2192 AI TRANSFORM \u2192 SEQUENCED ACTIONS";
+  } else if (union.length >= 6) {
+    coachLine = `BIG STACK \u2014 ${union.length} CONNECTORS FAN OUT ACROSS PARALLEL BRANCHES \xB7 COST OPTIMIZER ON`;
+  } else if (hasSource && !hasSink) {
+    coachLine = "SOURCES WIRED \u2014 WHERE SHOULD THE DATA LAND?";
+    coachAdds = connectors.filter((c) => c.role === "destination" && notIn(c)).slice(0, 2);
+  } else if (!hasSource && hasSink) {
+    coachLine = "DESTINATION SET \u2014 WHAT SHOULD OCTAVIA PULL FROM?";
+    coachAdds = connectors.filter((c) => c.role === "source" && notIn(c)).slice(0, 2);
+  } else if (!hasNotify) {
+    coachLine = `\u2713 ${union.length} CONNECTORS \xB7 ${scheduleShown} \xB7 TIP: ALERT YOUR TEAM WHEN RUNS FINISH`;
+    coachAdds = connectors.filter((c) => c.role === "notify" && notIn(c)).slice(0, 1);
+  } else {
+    coachLine = `\u2713 ${union.length} CONNECTORS \xB7 ${scheduleShown} \xB7 CLICK A HIGHLIGHTED NAME TO SWAP IT`;
+  }
+  const coachTone = union.length ? hasSource && hasSink ? "success" : "accent" : "muted";
+  const badge = settled ? { label: "LIVE", tone: "success", pulse: true } : buildingNow ? {
+    label: phase === "analyzing" ? "ANALYZING" : "BUILDING",
+    tone: "accent",
+    pulse: true
+  } : { label: "IDLE", tone: "muted", pulse: false };
+  const canvasSub = settled ? "production" : buildingNow ? "generating" : "draft";
+  const sceneCaption = settled ? "PIPELINE LIVE \xB7 SQUARES = ROWS IN FLIGHT" : phase === "building" ? "ASSEMBLING WORKFLOW\u2026" : phase === "analyzing" ? "ANALYZING REQUEST\u2026" : "CLICK THE CORE \xB7 CONNECTORS LAND AS CUBES";
+  const activity = buildActivity({ phase, shown, plan, selected, status });
+  const costMetric = metrics.find((m) => m.tone === "success");
+  const costLabel = costMetric ? `${costMetric.prefix ?? ""}${costMetric.value}${costMetric.suffix ?? ""}` : "";
+  const railFoot = phase === "idle" ? `${catalogNote} CONNECTORS \xB7 FREE IN PRIVATE BETA` : settled ? `COST PLAN SELECTED \xB7 ${costLabel}` : "COST OPTIMIZER RUNNING\u2026";
+  const nLeft = plan.left.length;
+  const sceneLeft = plan.left.map((c, i) => ({
+    connector: c,
+    active: engaged && (settled || shown > i)
+  }));
+  const sceneRight = plan.right.map((c, j) => ({
+    connector: c,
+    active: engaged && (settled || shown > nLeft + 1 + j)
+  }));
+  const stepCount = (selected.length || 3) + 1;
+  const doneNote = costMetric ? `${stepCount}-step workflow generated \xB7 cost optimizer: ${costMetric.value}% below baseline` : `${stepCount}-step workflow generated`;
+  const submitSignup = (values) => {
+    if (!values.name.trim() || !isValidEmail(values.email)) {
+      setSignupError("Please enter your name and a valid work email.");
+      return;
+    }
+    setSignupError(null);
+    setPhase("creating");
+    const finish = () => setPhase("welcome");
+    const fail = () => {
+      setSignupError("Something went wrong \u2014 please try again.");
+      setPhase("signup");
+    };
+    if (!onSignup) {
+      at(1600, finish);
+      return;
+    }
+    try {
+      const result = onSignup(values);
+      if (result && typeof result.then === "function") {
+        result.then(finish, fail);
+      } else {
+        finish();
+      }
+    } catch {
+      fail();
+    }
+  };
+  const segments = segmentPrompt(prompt, connectors);
+  const onPromptKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      startBuild(prompt, selected);
+    }
+  };
+  const rise = (delay = 0) => reducedMotion ? {} : {
+    initial: { opacity: 0, y: 10 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.4, delay, ease: [0.2, 0.7, 0.2, 1] }
+  };
+  return /* @__PURE__ */ jsxs14("section", { ...rest, className: cn("ods-showcase", className), children: [
+    /* @__PURE__ */ jsxs14("div", { ref: cardRef, className: "ods-showcase__card", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__prompt", children: [
+        /* @__PURE__ */ jsx14(
+          "textarea",
+          {
+            className: "ods-showcase__prompt-input",
+            value: prompt,
+            onChange: (e) => setPrompt(e.target.value),
+            onKeyDown: onPromptKeyDown,
+            "aria-label": promptAriaLabel,
+            spellCheck: false,
+            rows: 2
+          }
+        ),
+        /* @__PURE__ */ jsx14("div", { className: "ods-showcase__prompt-render", "aria-hidden": "true", children: prompt ? segments.map(
+          (seg, i) => seg.connector ? /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              className: cn(
+                "ods-showcase__token",
+                `ods-showcase__token--${seg.connector.role}`
+              ),
+              onClick: (e) => {
+                const name = seg.connector?.name;
+                if (name) openSwap(name, seg.text, e.currentTarget);
+              },
+              children: seg.text
+            },
+            i
+          ) : (
+            // biome-ignore lint/suspicious/noArrayIndexKey: segments are positional by nature
+            /* @__PURE__ */ jsx14("span", { children: seg.text }, i)
+          )
+        ) : /* @__PURE__ */ jsxs14(Fragment4, { children: [
+          /* @__PURE__ */ jsx14("span", { className: "ods-showcase__placeholder", children: "Describe your pipeline \u2014 e.g. " }),
+          /* @__PURE__ */ jsx14("span", { className: "ods-showcase__placeholder ods-showcase__placeholder--faint", children: '"Sync Storefront orders to Warehouse hourly, alert sales in Team Chat"' })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__coach", children: [
+        /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: cn("ods-showcase__coach-line", `ods-showcase__coach-line--${coachTone}`),
+            children: coachLine
+          }
+        ),
+        coachAdds.map((c) => /* @__PURE__ */ jsxs14(
+          "button",
+          {
+            type: "button",
+            className: "ods-showcase__coach-add",
+            onClick: () => toggleConnector(c.name),
+            children: [
+              /* @__PURE__ */ jsx14(ConnectorTile, { connector: c }),
+              "+ ",
+              c.name
+            ]
+          },
+          c.name
+        ))
+      ] }),
+      /* @__PURE__ */ jsx14(AnimatePresence2, { initial: false, children: pickerOpen && /* @__PURE__ */ jsx14(
+        motion3.div,
+        {
+          className: "ods-showcase__picker",
+          initial: reducedMotion ? false : { opacity: 0, height: 0 },
+          animate: { opacity: 1, height: "auto" },
+          exit: reducedMotion ? { opacity: 0 } : { opacity: 0, height: 0 },
+          transition: { duration: 0.22, ease: [0.2, 0.7, 0.2, 1] },
+          children: /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__picker-row", children: [
+            /* @__PURE__ */ jsx14("span", { className: "ods-showcase__microcopy", children: "CONNECTORS" }),
+            connectors.map((c) => /* @__PURE__ */ jsxs14(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "ods-showcase__pick",
+                  selected.includes(c.name) && "ods-showcase__pick--on"
+                ),
+                "aria-pressed": selected.includes(c.name),
+                onClick: () => toggleConnector(c.name),
+                children: [
+                  /* @__PURE__ */ jsx14(ConnectorTile, { connector: c }),
+                  c.name
+                ]
+              },
+              c.name
+            )),
+            /* @__PURE__ */ jsxs14("span", { className: "ods-showcase__microcopy ods-showcase__microcopy--faint", children: [
+              "+ ",
+              catalogNote,
+              " IN THE APP"
+            ] })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__toolbar", children: [
+        /* @__PURE__ */ jsxs14(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "ods-showcase__tool",
+              (pickerOpen || selected.length > 0) && "ods-showcase__tool--on"
+            ),
+            "aria-expanded": pickerOpen,
+            onClick: () => setPickerOpen((o) => !o),
+            children: [
+              "\uFF0B Connectors",
+              selected.length ? ` \xB7 ${selected.length}` : ""
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs14(
+          "button",
+          {
+            type: "button",
+            className: "ods-showcase__tool",
+            onClick: () => setSchedIdx((i) => (i + 1) % schedules.length),
+            children: [
+              "\u25F7 ",
+              manualSchedule
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx14("span", { className: "ods-showcase__model", children: modelLabel }),
+        /* @__PURE__ */ jsx14(
+          Button,
+          {
+            variant: "primary",
+            onClick: () => startBuild(prompt, selected),
+            disabled: buildingNow,
+            children: buildingNow ? "Building\u2026" : "Build workflow \u2192"
+          }
+        )
+      ] }),
+      swap && swapRole && /* @__PURE__ */ jsxs14(Fragment4, { children: [
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            className: "ods-showcase__swap-backdrop",
+            "aria-label": "Close swap menu",
+            onClick: () => setSwap(null)
+          }
+        ),
+        /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            className: "ods-showcase__swap",
+            role: "menu",
+            style: { left: swap.x, top: swap.y },
+            onKeyDown: (e) => {
+              if (e.key === "Escape") setSwap(null);
+            },
+            children: [
+              /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__swap-head", children: [
+                "SWAP ",
+                swapRole.toUpperCase(),
+                " \u2014 ",
+                swap.name.toUpperCase()
+              ] }),
+              swapItems.map((c) => /* @__PURE__ */ jsxs14(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: "ods-showcase__swap-item",
+                  onClick: () => doSwap(swap, c.name),
+                  children: [
+                    /* @__PURE__ */ jsx14(ConnectorTile, { connector: c }),
+                    /* @__PURE__ */ jsx14("span", { className: "ods-showcase__swap-name", children: c.name }),
+                    c.name === swap.name && /* @__PURE__ */ jsx14("span", { className: "ods-showcase__swap-mark", children: "\u25CF CURRENT" })
+                  ]
+                },
+                c.name
+              )),
+              /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__swap-foot", children: [
+                catalogNote,
+                " CONNECTORS IN THE APP"
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__examples", children: [
+      /* @__PURE__ */ jsx14("span", { className: "ods-showcase__microcopy", children: "TRY:" }),
+      examples.map((ex) => /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "button",
+          className: "ods-showcase__try",
+          onClick: () => runExample(ex),
+          children: ex.label
+        },
+        ex.id
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__canvas", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__canvas-head", children: [
+        /* @__PURE__ */ jsxs14("span", { className: "ods-showcase__microcopy", children: [
+          canvasLabel,
+          " \xB7 ",
+          canvasSub
+        ] }),
+        /* @__PURE__ */ jsxs14("span", { className: cn("ods-showcase__badge", `ods-showcase__badge--${badge.tone}`), children: [
+          /* @__PURE__ */ jsx14("span", { className: cn("ods-showcase__dot", badge.pulse && "ods-showcase__dot--pulse") }),
+          badge.label
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__stage", children: [
+        /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__rail", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__rail-head", children: [
+            /* @__PURE__ */ jsx14("span", { className: "ods-showcase__microcopy", children: railLabel }),
+            /* @__PURE__ */ jsx14(
+              "span",
+              {
+                className: cn("ods-showcase__dot", badge.pulse && "ods-showcase__dot--pulse")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx14("div", { className: "ods-showcase__rail-body", children: /* @__PURE__ */ jsx14(AnimatePresence2, { initial: false, children: activity.map((line) => /* @__PURE__ */ jsx14(
+            motion3.div,
+            {
+              className: cn("ods-showcase__act", `ods-showcase__act--${line.tone}`),
+              initial: reducedMotion ? false : { opacity: 0, y: 6 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.25 },
+              children: line.text
+            },
+            line.id
+          )) }) }),
+          /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: cn(
+                "ods-showcase__rail-foot",
+                settled && "ods-showcase__rail-foot--done",
+                buildingNow && "ods-showcase__rail-foot--active"
+              ),
+              children: railFoot
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx14(
+          ShowcaseScene,
+          {
+            left: sceneLeft,
+            right: sceneRight,
+            engaged,
+            tiles: platformTiles,
+            coreIcon,
+            caption: sceneCaption
+          }
+        ),
+        /* @__PURE__ */ jsx14("div", { className: "ods-showcase__metrics", children: metrics.map((m, idx) => {
+          const revealed = settled || phase === "building" && shown > idx;
+          const interim = m.buildingValue != null && !settled && revealed;
+          return /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__metric", children: [
+            /* @__PURE__ */ jsxs14(
+              "div",
+              {
+                className: cn(
+                  "ods-showcase__metric-value",
+                  !revealed && "ods-showcase__metric-value--empty",
+                  m.tone === "success" && settled && "ods-showcase__metric-value--success"
+                ),
+                children: [
+                  settled ? /* @__PURE__ */ jsx14(
+                    CountUp,
+                    {
+                      value: m.value,
+                      from: m.buildingValue ?? 0,
+                      decimals: m.decimals ?? 0,
+                      duration: reducedMotion ? 0 : 900,
+                      disableAnimation: Boolean(reducedMotion),
+                      prefix: m.prefix,
+                      formatValue: m.decimals ? void 0 : (v) => Math.round(v).toLocaleString("en-US")
+                    }
+                  ) : interim ? `${m.prefix ?? ""}${m.buildingValue}` : "\u2014",
+                  revealed && m.suffix ? m.suffix : null,
+                  revealed && m.unit ? /* @__PURE__ */ jsxs14("span", { className: "ods-showcase__metric-unit", children: [
+                    " ",
+                    m.unit
+                  ] }) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx14("div", { className: "ods-showcase__microcopy", children: m.label })
+          ] }, m.id);
+        }) }),
+        /* @__PURE__ */ jsx14(
+          ShowcaseSignup,
+          {
+            phase,
+            stepCount,
+            workspaceDomain,
+            teamSizes,
+            error: signupError,
+            onSubmit: submitSignup,
+            onBack: () => {
+              setSignupError(null);
+              setPhase("done");
+            },
+            dashboardHref,
+            onboardingHref
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__outro", "aria-live": "polite", children: [
+      buildingNow && /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__building", children: [
+        /* @__PURE__ */ jsx14("span", { className: "ods-showcase__spin", "aria-hidden": "true", children: "\u27F3" }),
+        " ",
+        status
+      ] }),
+      phase === "done" && /* @__PURE__ */ jsxs14("div", { className: "ods-showcase__done", children: [
+        /* @__PURE__ */ jsxs14(motion3.div, { className: "ods-showcase__done-note", ...rise(0), children: [
+          "\u2713 ",
+          doneNote
+        ] }),
+        /* @__PURE__ */ jsxs14(motion3.div, { className: "ods-showcase__cta", ...rise(0.2), children: [
+          /* @__PURE__ */ jsx14("span", { className: "ods-showcase__cta-copy", children: "Deploy it on your own data \u2014 takes 2 minutes." }),
+          /* @__PURE__ */ jsx14(
+            Button,
+            {
+              variant: "primary",
+              onClick: () => {
+                setSignupError(null);
+                setPhase("signup");
+              },
+              children: "Create free account \u2192"
+            }
+          ),
+          /* @__PURE__ */ jsx14("a", { className: "ods-showcase__text-link", href: onboardingHref, children: "Book onboarding \u2192" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  ActionGlyph,
+  AssistantTranscript,
+  BrandMark,
+  ConnectorGlyph,
+  CtaBanner,
+  DestinationGlyph,
+  FeatureGrid,
+  IntegrationsWall,
+  LiveConsole,
+  MarketingFooter,
+  MarketingHero,
+  MarketingNav,
+  MarketingSection,
+  NotifyGlyph,
+  SourceGlyph,
+  StatBand,
+  WORKFLOW_SHOWCASE_DEFAULT_CONNECTORS,
+  WORKFLOW_SHOWCASE_DEFAULT_EXAMPLES,
+  WORKFLOW_SHOWCASE_DEFAULT_METRICS,
+  WORKFLOW_SHOWCASE_DEFAULT_TILES,
+  WORKFLOW_SHOWCASE_SCHEDULES,
+  WorkflowShowcase,
+  roleGlyph
+};
+//# sourceMappingURL=marketing.js.map