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

package/dist/marketing.cjs

@@ -129,7 +129,7 @@ function BackedBy({
 }
 
 // src/marketing/components/BetaAccessForm/BetaAccessForm.tsx
-var import_react17 = require("react");
+var import_react21 = require("react");
 
 // src/components/Button/Button.tsx
 var import_framer_motion = require("framer-motion");
@@ -2309,1710 +2309,1792 @@ var Select = (0, import_react16.forwardRef)(function Select2({
 });
 Select.displayName = "Select";
 
-// 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, suffix: "%", label: "SAVED VS BASELINE", tone: "success" }
-];
-var WORKFLOW_SHOWCASE_SCHEDULES = ["AUTO", "HOURLY", "DAILY", "REAL-TIME"];
-var WORKFLOW_SHOWCASE_TRIGGERS = ["SCHEDULE", "WEBHOOK", "APP EVENT", "MANUAL"];
-var WORKFLOW_SHOWCASE_DEFAULT_TILES = [
-  "ELT",
-  "CDC",
-  "LLM",
-  "RAG",
-  "HEAL",
-  "COST",
-  "IDP",
-  "VEC"
-];
-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 });
+// src/components/Textarea/Textarea.tsx
+var import_react20 = require("react");
+var import_react_aria4 = require("react-aria");
+var import_react_dom3 = require("react-dom");
+var import_icons4 = require("@octaviaflow/icons");
+
+// src/hooks/useTextareaCommands.ts
+var import_react17 = require("react");
+function findOpenTrigger(value, caret, trigger) {
+  let i = caret - 1;
+  while (i >= 0) {
+    const ch = value[i];
+    if (ch === "\n" || ch === " " || ch === "	") return null;
+    if (value.startsWith(trigger, i)) {
+      const before = i === 0 ? "" : value[i - 1];
+      if (i === 0 || before === " " || before === "\n" || before === "	") {
+        return {
+          triggerIndex: i,
+          query: value.slice(i + trigger.length, caret)
+        };
+      }
+      return null;
+    }
+    i--;
   }
-  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];
+function getCaretRect(textarea, caret) {
+  if (typeof document === "undefined") return null;
+  const mirror = document.createElement("div");
+  const styles = window.getComputedStyle(textarea);
+  for (const prop of [
+    "boxSizing",
+    "width",
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "fontStyle",
+    "letterSpacing",
+    "lineHeight",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "textTransform",
+    "wordSpacing",
+    "tabSize",
+    "whiteSpace"
+  ]) {
+    mirror.style[prop] = styles[prop];
   }
-  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)}`)
-  ];
+  mirror.style.position = "absolute";
+  mirror.style.visibility = "hidden";
+  mirror.style.overflow = "hidden";
+  mirror.style.top = "0";
+  mirror.style.left = "0";
+  mirror.style.whiteSpace = "pre-wrap";
+  mirror.style.wordWrap = "break-word";
+  mirror.textContent = textarea.value.slice(0, caret);
+  const marker = document.createElement("span");
+  marker.textContent = "\u200B";
+  mirror.appendChild(marker);
+  document.body.appendChild(mirror);
+  const taRect = textarea.getBoundingClientRect();
+  const markerRect = marker.getBoundingClientRect();
+  const mirrorRect = mirror.getBoundingClientRect();
+  const x = taRect.left + (markerRect.left - mirrorRect.left) - textarea.scrollLeft;
+  const y = taRect.top + (markerRect.top - mirrorRect.top) - textarea.scrollTop;
+  const out = new DOMRect(x, y, 0, markerRect.height || 16);
+  document.body.removeChild(mirror);
+  return out;
 }
-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" });
+function useTextareaCommands({
+  textareaRef,
+  value,
+  onChange,
+  commands,
+  trigger = "/",
+  openOnEmptyTrigger = true,
+  maxItems = 8
+}) {
+  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
+  const [query, setQuery] = (0, import_react17.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react17.useState)(0);
+  const [triggerIndex, setTriggerIndex] = (0, import_react17.useState)(null);
+  const [caretRect, setCaretRect] = (0, import_react17.useState)(null);
+  const dismissedAtRef = (0, import_react17.useRef)(
+    null
+  );
+  const items = (0, import_react17.useMemo)(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return commands.slice(0, maxItems);
+    return commands.filter((c) => {
+      const hay = [
+        typeof c.label === "string" ? c.label : "",
+        typeof c.description === "string" ? c.description : "",
+        c.id,
+        ...c.keywords ?? []
+      ].join(" ").toLowerCase();
+      return hay.includes(q);
+    }).slice(0, maxItems);
+  }, [commands, query, maxItems]);
+  (0, import_react17.useEffect)(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const caret = ta.selectionStart ?? 0;
+    const dismissedAt = dismissedAtRef.current;
+    if (dismissedAt && dismissedAt.value === value && dismissedAt.caret === caret) {
+      return;
     }
-    return lines;
-  }
-  if (phase === "analyzing") {
-    for (const name of selected.slice(-4)) {
-      lines.push({ id: `sel-${name}`, text: `+ ${name.toLowerCase()} connected`, tone: "muted" });
+    const found = findOpenTrigger(value, caret, trigger);
+    if (!found) {
+      if (isOpen) setIsOpen(false);
+      setTriggerIndex(null);
+      return;
     }
-    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/BetaAccessForm/BetaAccessForm.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function BetaAccessForm({
-  title = "Request early access",
-  subtitle = "CURRENTLY IN PRIVATE BETA \u2014 WE REVIEW ACCESS REQUESTS WEEKLY",
-  fields = "email",
-  appearance = "card",
-  teamSizes,
-  plans,
-  defaultPlan,
-  submitLabel = "Request access \u2192",
-  footnote = "NO CREDIT CARD \xB7 SSO & SELF-HOSTING AVAILABLE",
-  onSubmit,
-  successTitle = "Request received.",
-  successBody = "We review access requests weekly \u2014 you'll hear from us by email.",
-  disabled = false,
-  className
-}) {
-  const uid = (0, import_react17.useId)();
-  const [values, setValues] = (0, import_react17.useState)({
-    email: "",
-    name: "",
-    company: "",
-    teamSize: "",
-    plan: defaultPlan ?? ""
-  });
-  const [phase, setPhase] = (0, import_react17.useState)("idle");
-  const [error, setError] = (0, import_react17.useState)(null);
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    if (phase === "submitting") return;
-    if (!isValidEmail(values.email)) {
-      setError("Please enter a valid work email.");
-      return;
-    }
-    if (fields === "full" && !values.name?.trim()) {
-      setError("Please enter your name.");
-      return;
-    }
-    if (fields === "full" && teamSizes?.length && !values.teamSize) {
-      setError("Please select your team size.");
-      return;
-    }
-    setError(null);
-    setPhase("submitting");
-    try {
-      await onSubmit?.(values);
-      setPhase("success");
-    } catch {
-      setError("Something went wrong \u2014 please try again.");
-      setPhase("idle");
+    if (dismissedAt) dismissedAtRef.current = null;
+    if (found.query.length > 0 || openOnEmptyTrigger) {
+      setQuery(found.query);
+      setTriggerIndex(found.triggerIndex);
+      setIsOpen(true);
+      setActiveIndex(0);
+      setCaretRect(getCaretRect(ta, caret));
     }
-  };
-  const inline = appearance === "inline";
-  if (phase === "success") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "div",
-      {
-        className: cn(
-          "ods-mkt-access",
-          "ods-mkt-access--success",
-          inline && "ods-mkt-access--inline",
-          className
-        ),
-        role: "status",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "ods-mkt-access__success-mark", children: [
-            "\u2713 ",
-            successTitle
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "ods-mkt-access__success-body", children: successBody })
-        ]
+  }, [value, trigger, openOnEmptyTrigger, isOpen, textareaRef]);
+  const commit = (0, import_react17.useCallback)(
+    (cmd) => {
+      const ta = textareaRef.current;
+      if (!ta || triggerIndex == null) return;
+      const insertText = typeof cmd.insert === "function" ? cmd.insert(query) : cmd.insert;
+      const caret = ta.selectionStart ?? value.length;
+      const before = value.slice(0, triggerIndex);
+      const after = value.slice(caret);
+      const next = `${before}${insertText}${after}`;
+      dismissedAtRef.current = {
+        value,
+        caret
+      };
+      onChange(next);
+      setIsOpen(false);
+      setTriggerIndex(null);
+      requestAnimationFrame(() => {
+        const pos = before.length + insertText.length;
+        ta.focus();
+        ta.setSelectionRange(pos, pos);
+      });
+    },
+    [textareaRef, triggerIndex, query, value, onChange]
+  );
+  const dismiss = (0, import_react17.useCallback)(() => {
+    const ta = textareaRef.current;
+    dismissedAtRef.current = {
+      value,
+      caret: ta?.selectionStart ?? value.length
+    };
+    setIsOpen(false);
+    setTriggerIndex(null);
+  }, [textareaRef, value]);
+  const onKeyDown = (0, import_react17.useCallback)(
+    (e) => {
+      if (!isOpen) return false;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(items.length - 1, i + 1));
+        return true;
       }
-    );
-  }
-  const busy = disabled || phase === "submitting";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "form",
-    {
-      className: cn("ods-mkt-access", inline && "ods-mkt-access--inline", className),
-      onSubmit: handleSubmit,
-      noValidate: true,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ods-mkt-access__head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "ods-mkt-access__title", children: title }),
-          subtitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "ods-mkt-access__subtitle", children: subtitle })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          "div",
-          {
-            className: cn(
-              "ods-mkt-access__fields",
-              fields === "full" && "ods-mkt-access__fields--full"
-            ),
-            children: [
-              fields === "full" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ods-mkt-access__field", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-name`, children: "Full name" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  Input,
-                  {
-                    id: `${uid}-name`,
-                    autoComplete: "name",
-                    placeholder: "Ada Lovelace",
-                    value: values.name ?? "",
-                    onChange: (e) => setValues((v) => ({ ...v, name: e.target.value })),
-                    disabled: busy
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ods-mkt-access__field", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-email`, children: "Work email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  Input,
-                  {
-                    id: `${uid}-email`,
-                    type: "email",
-                    autoComplete: "email",
-                    placeholder: "ada@company.com",
-                    value: values.email,
-                    onChange: (e) => setValues((v) => ({ ...v, email: e.target.value })),
-                    disabled: busy
-                  }
-                )
-              ] }),
-              fields === "full" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ods-mkt-access__field", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-company`, children: "Company" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  Input,
-                  {
-                    id: `${uid}-company`,
-                    autoComplete: "organization",
-                    placeholder: "Acme Inc.",
-                    value: values.company ?? "",
-                    onChange: (e) => setValues((v) => ({ ...v, company: e.target.value })),
-                    disabled: busy
-                  }
-                )
-              ] }),
-              fields === "full" && teamSizes && teamSizes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ods-mkt-access__field", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-mkt-access__label", id: `${uid}-teamsize-label`, children: "Team size" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  Select,
-                  {
-                    "aria-labelledby": `${uid}-teamsize-label`,
-                    placeholder: "Select team size\u2026",
-                    options: teamSizes.map((size) => ({ value: size, label: size })),
-                    value: values.teamSize ?? "",
-                    onChange: (teamSize) => setValues((v) => ({ ...v, teamSize })),
-                    disabled: busy
-                  }
-                )
-              ] }),
-              fields === "full" && plans && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ods-mkt-access__field", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ods-mkt-access__label", id: `${uid}-plan-label`, children: "Plan (optional)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  Select,
-                  {
-                    "aria-labelledby": `${uid}-plan-label`,
-                    placeholder: "Not sure yet",
-                    options: plans.map((plan) => ({ value: plan, label: plan })),
-                    value: values.plan ?? "",
-                    onChange: (plan) => setValues((v) => ({ ...v, plan })),
-                    disabled: busy
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                Button,
-                {
-                  type: "submit",
-                  variant: "primary",
-                  loading: phase === "submitting",
-                  disabled,
-                  children: submitLabel
-                }
-              )
-            ]
-          }
-        ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "ods-mkt-access__error", role: "alert", children: error }),
-        footnote && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "ods-mkt-access__footnote", children: footnote })
-      ]
-    }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(0, i - 1));
+        return true;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        const pick = items[activeIndex];
+        if (pick) {
+          e.preventDefault();
+          commit(pick);
+          return true;
+        }
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        dismiss();
+        return true;
+      }
+      return false;
+    },
+    [isOpen, items, activeIndex, commit, dismiss]
   );
+  return {
+    isOpen,
+    query,
+    activeIndex,
+    items,
+    onKeyDown,
+    dismiss,
+    commit,
+    caretRect
+  };
 }
 
-// src/components/BlogCard/BlogCard.tsx
-var import_react20 = require("react");
-
-// src/components/Avatar/Avatar.tsx
+// src/hooks/useTextareaSelection.ts
 var import_react18 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var PALETTE_SIZE = 12;
-function djb2(str) {
-  let h = 5381;
-  for (let i = 0; i < str.length; i++) h = (h << 5) + h + str.charCodeAt(i);
-  return h >>> 0;
-}
-function paletteIndexFor(seed) {
-  return djb2(seed) % PALETTE_SIZE;
-}
-function normalizeInitials(raw) {
-  const trimmed = raw.trim();
-  if (!trimmed) return "";
-  const tokens = trimmed.split(/\s+/).filter(Boolean);
-  if (tokens.length >= 2) {
-    return (tokens[0].charAt(0) + tokens[1].charAt(0)).toUpperCase();
+function getSelectionRect(textarea, start, end) {
+  if (typeof document === "undefined") return null;
+  if (start === end) return null;
+  const mirror = document.createElement("div");
+  const styles = window.getComputedStyle(textarea);
+  for (const prop of [
+    "boxSizing",
+    "width",
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "fontStyle",
+    "letterSpacing",
+    "lineHeight",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "textTransform",
+    "wordSpacing",
+    "tabSize",
+    "whiteSpace"
+  ]) {
+    mirror.style[prop] = styles[prop];
   }
-  return trimmed.slice(0, 2).toUpperCase();
+  mirror.style.position = "absolute";
+  mirror.style.visibility = "hidden";
+  mirror.style.overflow = "hidden";
+  mirror.style.top = "0";
+  mirror.style.left = "0";
+  mirror.style.whiteSpace = "pre-wrap";
+  mirror.style.wordWrap = "break-word";
+  const pre = document.createTextNode(textarea.value.slice(0, start));
+  const range = document.createElement("span");
+  range.textContent = textarea.value.slice(start, end) || "\u200B";
+  const post = document.createTextNode(textarea.value.slice(end));
+  mirror.appendChild(pre);
+  mirror.appendChild(range);
+  mirror.appendChild(post);
+  document.body.appendChild(mirror);
+  const taRect = textarea.getBoundingClientRect();
+  const rangeRect = range.getBoundingClientRect();
+  const mirrorRect = mirror.getBoundingClientRect();
+  const out = new DOMRect(
+    taRect.left + (rangeRect.left - mirrorRect.left) - textarea.scrollLeft,
+    taRect.top + (rangeRect.top - mirrorRect.top) - textarea.scrollTop,
+    rangeRect.width,
+    rangeRect.height
+  );
+  document.body.removeChild(mirror);
+  return out;
 }
-var STATUS_DEFAULT_LABEL = {
-  online: "Online",
-  offline: "Offline",
-  busy: "Busy",
-  away: "Away"
-};
-var Avatar = (0, import_react18.forwardRef)(function Avatar2({
-  src,
-  alt,
-  initials,
-  icon,
-  fallback,
-  seed,
-  size = "md",
-  shape = "circle",
-  status,
-  statusLabel,
-  onClick,
-  imgLoading = "lazy",
-  referrerPolicy,
-  className,
-  ...rest
-}, ref) {
-  const [imgFailed, setImgFailed] = (0, import_react18.useState)(false);
-  const handleImgError = (0, import_react18.useCallback)(() => setImgFailed(true), []);
-  const showImage = Boolean(src) && !imgFailed;
-  const normalizedInitials = (0, import_react18.useMemo)(
-    () => initials ? normalizeInitials(initials) : "",
-    [initials]
+function useTextareaSelection({
+  textareaRef,
+  value,
+  onChange
+}) {
+  const [start, setStart] = (0, import_react18.useState)(0);
+  const [end, setEnd] = (0, import_react18.useState)(0);
+  const [rect, setRect] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const handler = () => {
+      const ta = textareaRef.current;
+      if (!ta || document.activeElement !== ta) {
+        setStart(0);
+        setEnd(0);
+        setRect(null);
+        return;
+      }
+      const s = ta.selectionStart ?? 0;
+      const e = ta.selectionEnd ?? 0;
+      setStart(s);
+      setEnd(e);
+      setRect(s !== e ? getSelectionRect(ta, s, e) : null);
+    };
+    document.addEventListener("selectionchange", handler);
+    return () => document.removeEventListener("selectionchange", handler);
+  }, [textareaRef]);
+  const active = start !== end;
+  const text = active ? value.slice(start, end) : "";
+  const writeToClipboard = (0, import_react18.useCallback)(
+    async (str) => {
+      try {
+        if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(str);
+          return true;
+        }
+      } catch {
+      }
+      try {
+        const tmp = document.createElement("textarea");
+        tmp.value = str;
+        tmp.style.position = "fixed";
+        tmp.style.left = "-9999px";
+        document.body.appendChild(tmp);
+        tmp.select();
+        const ok = document.execCommand("copy");
+        document.body.removeChild(tmp);
+        return ok;
+      } catch {
+        return false;
+      }
+    },
+    []
   );
-  const paletteIdx = (0, import_react18.useMemo)(() => {
-    const resolved = seed ?? initials ?? alt ?? "?";
-    return paletteIndexFor(resolved);
-  }, [seed, initials, alt]);
-  const baseName = alt || normalizedInitials || "Avatar";
-  const announcedStatus = status ? statusLabel ?? STATUS_DEFAULT_LABEL[status] : "";
-  const accessibleName = announcedStatus ? `${baseName}, ${announcedStatus}` : baseName;
-  const isClickable = Boolean(onClick);
-  const handleKeyDown = (e) => {
-    if (!isClickable) return;
-    if ((e.key === "Enter" || e.key === " ") && !e.repeat) {
-      e.preventDefault();
-      onClick?.();
-    }
-  };
-  const rootClassName = cn(
-    "ods-avatar",
-    `ods-avatar--${size}`,
-    `ods-avatar--${shape}`,
-    isClickable && "ods-avatar--clickable",
-    className
+  const copy = (0, import_react18.useCallback)(async () => {
+    if (!active) return false;
+    return writeToClipboard(text);
+  }, [active, text, writeToClipboard]);
+  const replace = (0, import_react18.useCallback)(
+    (str) => {
+      const ta = textareaRef.current;
+      if (!ta) return;
+      const next = value.slice(0, start) + str + value.slice(end);
+      onChange(next);
+      requestAnimationFrame(() => {
+        ta.focus();
+        const caret = start + str.length;
+        ta.setSelectionRange(caret, caret);
+      });
+    },
+    [textareaRef, value, start, end, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    "div",
-    {
-      ...rest,
-      ref,
-      className: rootClassName,
-      role: isClickable ? "button" : "img",
-      "aria-label": accessibleName,
-      tabIndex: isClickable ? 0 : void 0,
-      onClick,
-      onKeyDown: isClickable ? handleKeyDown : void 0,
-      "data-status": status,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-avatar__inner", "data-palette": paletteIdx, children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "img",
-          {
-            src,
-            alt: "",
-            className: "ods-avatar__image",
-            loading: imgLoading,
-            decoding: "async",
-            referrerPolicy,
-            onError: handleImgError,
-            draggable: false
-          }
-        ) : icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-avatar__icon", "aria-hidden": "true", children: icon }) : normalizedInitials ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-avatar__initials", "aria-hidden": "true", children: normalizedInitials }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-avatar__initials", "aria-hidden": "true", children: fallback ?? "?" }) }),
-        status && // Decorative — the textual status is folded into the wrapper's
-        // aria-label above. `aria-hidden` keeps AT from double-announcing.
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "span",
-          {
-            className: cn("ods-avatar__status", `ods-avatar__status--${status}`),
-            "aria-hidden": "true"
-          }
-        )
-      ]
-    }
+  const cut = (0, import_react18.useCallback)(async () => {
+    if (!active) return false;
+    const ok = await writeToClipboard(text);
+    if (ok) replace("");
+    return ok;
+  }, [active, text, writeToClipboard, replace]);
+  const wrap = (0, import_react18.useCallback)(
+    (open, close) => {
+      const ta = textareaRef.current;
+      if (!ta) return;
+      const closing = close ?? open;
+      const before = value.slice(0, start);
+      const sel = value.slice(start, end);
+      const after = value.slice(end);
+      const next = `${before}${open}${sel}${closing}${after}`;
+      onChange(next);
+      requestAnimationFrame(() => {
+        ta.focus();
+        const newStart = start;
+        const newEnd = end + open.length + closing.length;
+        ta.setSelectionRange(newStart, newEnd);
+      });
+    },
+    [textareaRef, value, start, end, onChange]
   );
-});
-Avatar.displayName = "Avatar";
-var AvatarStack = (0, import_react18.forwardRef)(
-  function AvatarStack2({
-    children,
-    max,
-    size = "md",
-    renderOverflow,
-    direction = "ltr",
-    className,
-    ...rest
-  }, ref) {
-    const arr = Array.isArray(children) ? children : [children];
-    const visible = max && arr.length > max ? arr.slice(0, max) : arr;
-    const overflow = max && arr.length > max ? arr.length - max : 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      "div",
-      {
-        ...rest,
-        ref,
-        className: cn(
-          "ods-avatar-stack",
-          `ods-avatar-stack--${direction}`,
-          className
-        ),
-        children: [
-          visible,
-          overflow > 0 && (renderOverflow ? renderOverflow(overflow) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "div",
-            {
-              className: cn(
-                "ods-avatar",
-                `ods-avatar--${size}`,
-                "ods-avatar--circle",
-                "ods-avatar-stack__overflow"
-              ),
-              role: "img",
-              "aria-label": `${overflow} more`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-avatar__inner", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "ods-avatar__initials", "aria-hidden": "true", children: [
-                "+",
-                overflow
-              ] }) })
-            }
-          ))
-        ]
-      }
-    );
-  }
-);
-AvatarStack.displayName = "AvatarStack";
+  return {
+    active,
+    text,
+    start,
+    end,
+    rect,
+    copy,
+    cut,
+    wrap,
+    replace
+  };
+}
 
-// src/components/Card/Card.tsx
-var import_framer_motion4 = require("framer-motion");
+// src/hooks/useTextareaTools.tsx
+var import_icons3 = require("@octaviaflow/icons");
 var import_react19 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Card = (0, import_react19.forwardRef)(function Card2({
-  variant = "default",
-  padding = "md",
-  radius = "md",
-  hoverable = false,
-  disabled = false,
-  loading = false,
-  asChild = false,
-  onClick,
-  onKeyDown,
-  className,
-  children,
-  ...rest
-}, ref) {
-  const reducedMotion = (0, import_framer_motion4.useReducedMotion)();
-  const isInteractive = Boolean(onClick) && !disabled && !loading;
-  const handleKeyDown = (e) => {
-    onKeyDown?.(e);
-    if (e.defaultPrevented) return;
-    if (!isInteractive) return;
-    if ((e.key === "Enter" || e.key === " ") && !e.repeat) {
-      e.preventDefault();
-      onClick?.(e);
-    }
-  };
-  const rootClassName = cn(
-    "ods-card",
-    `ods-card--${variant}`,
-    `ods-card--pad-${padding}`,
-    `ods-card--radius-${radius}`,
-    (hoverable || isInteractive) && !loading && !disabled && "ods-card--hoverable",
-    isInteractive && "ods-card--clickable",
-    disabled && "ods-card--disabled",
-    loading && "ods-card--loading",
-    className
-  );
-  if (asChild) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      Slot,
-      {
-        ...rest,
-        ref,
-        className: rootClassName,
-        onClick: isInteractive ? onClick : void 0,
-        onKeyDown: isInteractive ? handleKeyDown : onKeyDown,
-        "aria-disabled": disabled || void 0,
-        children
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function useTextareaTools({
+  textareaRef,
+  value,
+  onChange,
+  tools
+}) {
+  const valueRef = (0, import_react19.useRef)(value);
+  valueRef.current = value;
+  const helpers = (0, import_react19.useMemo)(() => {
+    const getTa = () => textareaRef.current;
+    const getSelection = () => {
+      const ta = getTa();
+      const s = ta?.selectionStart ?? 0;
+      const e = ta?.selectionEnd ?? 0;
+      return {
+        text: valueRef.current.slice(s, e),
+        start: s,
+        end: e,
+        active: s !== e
+      };
+    };
+    const setValue = (next) => onChange(next);
+    const replace = (text) => {
+      const ta = getTa();
+      if (!ta) return;
+      const { start, end } = getSelection();
+      const next = valueRef.current.slice(0, start) + text + valueRef.current.slice(end);
+      onChange(next);
+      requestAnimationFrame(() => {
+        ta.focus();
+        const caret = start + text.length;
+        ta.setSelectionRange(caret, caret);
+      });
+    };
+    const insert = (text) => replace(text);
+    const wrap = (open, close) => {
+      const ta = getTa();
+      if (!ta) return;
+      const closing = close ?? open;
+      const { start, end } = getSelection();
+      const sel = valueRef.current.slice(start, end);
+      const next = valueRef.current.slice(0, start) + open + sel + closing + valueRef.current.slice(end);
+      onChange(next);
+      requestAnimationFrame(() => {
+        ta.focus();
+        if (start === end) {
+          const caret = start + open.length;
+          ta.setSelectionRange(caret, caret);
+        } else {
+          ta.setSelectionRange(start, end + open.length + closing.length);
+        }
+      });
+    };
+    const prependLines = (prefix) => {
+      const ta = getTa();
+      if (!ta) return;
+      const { start, end } = getSelection();
+      const v = valueRef.current;
+      const lineStart = v.lastIndexOf("\n", start - 1) + 1;
+      const lineEnd = (() => {
+        const idx = v.indexOf("\n", end);
+        return idx === -1 ? v.length : idx;
+      })();
+      const block = v.slice(lineStart, lineEnd);
+      const updated = block.split("\n").map((line) => `${prefix}${line}`).join("\n");
+      const next = v.slice(0, lineStart) + updated + v.slice(lineEnd);
+      onChange(next);
+      requestAnimationFrame(() => {
+        ta.focus();
+        ta.setSelectionRange(
+          lineStart,
+          lineStart + updated.length
+        );
+      });
+    };
+    const undo = () => {
+      try {
+        getTa()?.focus();
+        document.execCommand("undo");
+      } catch {
       }
-    );
-  }
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "div",
-      {
-        ...rest,
-        ref,
-        className: rootClassName,
-        "aria-busy": "true",
-        "aria-label": "Loading",
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ods-card__skeleton", "data-ods-animate": "shimmer" })
+    };
+    const redo = () => {
+      try {
+        getTa()?.focus();
+        document.execCommand("redo");
+      } catch {
       }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_framer_motion4.motion.div,
-    {
-      ...rest,
-      ref,
-      onClick: isInteractive ? onClick : void 0,
-      onKeyDown: isInteractive ? handleKeyDown : onKeyDown,
-      className: rootClassName,
-      whileHover: (hoverable || isInteractive) && !reducedMotion ? { y: -2, transition: { duration: 0.15 } } : void 0,
-      whileTap: isInteractive && !reducedMotion ? { scale: 0.99 } : void 0,
-      role: isInteractive ? "button" : rest.role,
-      tabIndex: isInteractive ? rest.tabIndex ?? 0 : rest.tabIndex,
-      "aria-disabled": disabled || void 0,
-      children
-    }
+    };
+    return {
+      get value() {
+        return valueRef.current;
+      },
+      get selection() {
+        return getSelection();
+      },
+      setValue,
+      replace,
+      insert,
+      wrap,
+      prependLines,
+      undo,
+      redo,
+      getTextarea: getTa
+    };
+  }, [textareaRef, onChange]);
+  const visibleTools = (0, import_react19.useMemo)(
+    () => tools.filter((t) => t.isVisible ? t.isVisible(helpers) : true),
+    [tools, helpers]
   );
-});
-Card.displayName = "Card";
-var CardHeader = (0, import_react19.forwardRef)(
-  function CardHeader2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...rest, ref, className: cn("ods-card__header", className), children });
-  }
-);
-CardHeader.displayName = "Card.Header";
-var CardBody = (0, import_react19.forwardRef)(
-  function CardBody2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...rest, ref, className: cn("ods-card__body", className), children });
-  }
-);
-CardBody.displayName = "Card.Body";
-var CardFooter = (0, import_react19.forwardRef)(
-  function CardFooter2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...rest, ref, className: cn("ods-card__footer", className), children });
-  }
-);
-CardFooter.displayName = "Card.Footer";
-var CardTitle = (0, import_react19.forwardRef)(
-  function CardTitle2({ as: Comp = "h3", className, children, ...rest }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      Comp,
-      {
-        ...rest,
-        ref,
-        className: cn("ods-card__title", className),
-        children
-      }
-    );
-  }
-);
-CardTitle.displayName = "Card.Title";
-var CardDescription = (0, import_react19.forwardRef)(function CardDescription2({ className, children, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ...rest, ref, className: cn("ods-card__description", className), children });
-});
-CardDescription.displayName = "Card.Description";
-Card.Header = CardHeader;
-Card.Body = CardBody;
-Card.Footer = CardFooter;
-Card.Title = CardTitle;
-Card.Description = CardDescription;
+  const runTool = (0, import_react19.useCallback)(
+    async (id) => {
+      const tool = tools.find((t) => t.id === id);
+      if (!tool || tool.kind === "divider") return;
+      await tool.onAction?.(helpers);
+    },
+    [tools, helpers]
+  );
+  return { tools: visibleTools, runTool, helpers };
+}
 
-// src/components/BlogCard/BlogCard.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var BlogCard = (0, import_react20.forwardRef)(
-  function BlogCard2({
-    cover,
-    coverAspect = "16/9",
-    category,
-    tags,
-    meta,
-    readingTime,
-    title,
-    titleAs = "h3",
-    description,
-    author,
-    footer,
-    radius = "md",
-    orientation = "vertical",
-    href,
-    onClick,
-    id: providedId,
+// src/components/Textarea/Textarea.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Textarea = (0, import_react20.forwardRef)(
+  function Textarea2({
+    label,
+    error = false,
+    errorMessage,
+    helperText,
+    resize = "vertical",
+    autoResize = false,
+    minRows,
+    maxRows,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    maxLength,
+    size = "md",
+    rows = 3,
+    disabled = false,
     className,
-    ...rest
-  }, ref) {
+    style: consumerStyle,
+    defaultValue,
+    value,
+    onChange,
+    id: providedId,
+    commands,
+    commandTrigger = "/",
+    selectionToolbar = false,
+    selectionActions,
+    tools,
+    toolbarPosition = "top",
+    ...props
+  }, forwardedRef) {
+    const innerRef = (0, import_react20.useRef)(null);
+    const setRef = (node) => {
+      innerRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef)
+        forwardedRef.current = node;
+    };
     const reactId = (0, import_react20.useId)();
-    const baseId = providedId ?? `ods-blog-card-${reactId}`;
-    const titleId = `${baseId}-title`;
-    const descId = description ? `${baseId}-desc` : void 0;
-    const tagList = tags ?? (category ? [category] : []);
-    const body = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      cover && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "div",
-        {
-          className: cn(
-            "ods-blog-card__cover",
-            `ods-blog-card__cover--aspect-${coverAspect.replace("/", "-")}`
-          ),
-          "aria-hidden": "true",
-          children: cover
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ods-blog-card__body", children: [
-        (tagList.length > 0 || meta || readingTime) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ods-blog-card__meta", children: [
-          tagList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-blog-card__tags", children: tagList.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-blog-card__tag", children: t }, i)) }),
-          meta && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-blog-card__date", children: meta }),
-          readingTime && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-blog-card__reading", children: readingTime })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Card.Title,
-          {
-            as: titleAs,
-            id: titleId,
-            className: "ods-blog-card__title",
-            children: title
-          }
-        ),
-        description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Card.Description,
-          {
-            id: descId,
-            className: "ods-blog-card__desc",
-            children: description
-          }
-        ),
-        (author || footer) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ods-blog-card__footer", children: [
-          author && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ods-blog-card__author", children: [
-            author.avatar && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              Avatar,
-              {
-                size: "sm",
-                src: author.avatar.src,
-                initials: author.avatar.initials,
-                alt: author.avatar.alt ?? (typeof author.name === "string" ? author.name : void 0)
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ods-blog-card__author-text", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-blog-card__author-name", children: author.name }),
-              author.byline && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-blog-card__author-byline", children: author.byline })
-            ] })
-          ] }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ods-blog-card__action", children: footer })
-        ] })
-      ] })
-    ] });
-    if (href) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        Card,
-        {
-          asChild: true,
-          radius,
-          padding: "none",
-          className: cn(
-            "ods-blog-card",
-            `ods-blog-card--${orientation}`,
-            "ods-blog-card--interactive",
-            className
-          ),
-          "aria-labelledby": titleId,
-          "aria-describedby": descId,
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "a",
-            {
-              ...rest,
-              ref,
-              href,
-              id: baseId,
-              onClick,
-              children: body
-            }
-          )
-        }
+    const baseId = providedId ?? `ods-textarea-${reactId}`;
+    const hintId = error && errorMessage || helperText ? `${baseId}-hint` : void 0;
+    const [charCount, setCharCount] = (0, import_react20.useState)(
+      () => String(value ?? defaultValue ?? "").length
+    );
+    const ariaNameProps = resolveAccessibleName({
+      label: typeof label === "string" ? label : void 0,
+      ariaLabel: props["aria-label"],
+      ariaLabelledby: props["aria-labelledby"],
+      componentName: "Textarea"
+    });
+    const { labelProps, inputProps } = (0, import_react_aria4.useTextField)(
+      {
+        label: typeof label === "string" ? label : void 0,
+        ...ariaNameProps,
+        isDisabled: disabled,
+        errorMessage: typeof errorMessage === "string" ? errorMessage : void 0,
+        validationState: error ? "invalid" : void 0,
+        inputElementType: "textarea",
+        value,
+        defaultValue
+      },
+      innerRef
+    );
+    const describedBy = [
+      props["aria-describedby"],
+      hintId
+    ].filter(Boolean).join(" ") || void 0;
+    const handleChange = (e) => {
+      setCharCount(e.target.value.length);
+      onChange?.(e);
+    };
+    const [liveValue, setLiveValue] = (0, import_react20.useState)(
+      String(value ?? defaultValue ?? "")
+    );
+    (0, import_react20.useEffect)(() => {
+      if (value != null) setLiveValue(String(value));
+    }, [value]);
+    const handleChangeWithMirror = (e) => {
+      setLiveValue(e.target.value);
+      handleChange(e);
+    };
+    const setLiveAndCommit = (next) => {
+      setLiveValue(next);
+      if (innerRef.current) innerRef.current.value = next;
+      onChange?.({
+        target: innerRef.current,
+        currentTarget: innerRef.current
+      });
+      setCharCount(next.length);
+    };
+    const cmdPalette = useTextareaCommands({
+      textareaRef: innerRef,
+      value: liveValue,
+      onChange: setLiveAndCommit,
+      commands: commands ?? [],
+      trigger: commandTrigger
+    });
+    const cmdEnabled = (commands?.length ?? 0) > 0;
+    const sel = useTextareaSelection({
+      textareaRef: innerRef,
+      value: liveValue,
+      onChange: setLiveAndCommit
+    });
+    const toolbar = useTextareaTools({
+      textareaRef: innerRef,
+      value: liveValue,
+      onChange: setLiveAndCommit,
+      tools: tools ?? []
+    });
+    const toolbarEnabled = (tools?.length ?? 0) > 0;
+    const handleKeyDownWithCommands = (e) => {
+      if (cmdEnabled) {
+        const consumed = cmdPalette.onKeyDown(e);
+        if (consumed) return;
+      }
+      props.onKeyDown?.(e);
+    };
+    (0, import_react20.useEffect)(() => {
+      if (!autoResize) return;
+      const el = innerRef.current;
+      if (!el) return;
+      const computed = window.getComputedStyle(el);
+      const fontSize = parseFloat(computed.fontSize) || 16;
+      const lhRaw = computed.lineHeight;
+      const lh = lhRaw === "normal" ? fontSize * 1.2 : lhRaw.endsWith("px") ? parseFloat(lhRaw) : parseFloat(lhRaw) * fontSize;
+      const padding = parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom);
+      const rowCap = maxRows != null && Number.isFinite(maxRows) ? lh * maxRows + padding : Number.POSITIVE_INFINITY;
+      const pixelCap = typeof maxHeight === "number" ? maxHeight : Number.POSITIVE_INFINITY;
+      const effectiveMax = Math.min(rowCap, pixelCap);
+      const rowFloor = lh * (minRows ?? rows) + padding;
+      el.style.height = "auto";
+      const target = Math.max(
+        rowFloor,
+        Math.min(effectiveMax, el.scrollHeight)
       );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Card,
+      el.style.height = `${target}px`;
+      el.style.overflowY = el.scrollHeight > effectiveMax ? "auto" : "hidden";
+    }, [autoResize, value, defaultValue, minRows, maxRows, maxHeight, rows]);
+    const resolvedResize = typeof resize === "boolean" ? resize ? "vertical" : "none" : resize;
+    const toCss = (v) => v == null ? void 0 : typeof v === "number" ? `${v}px` : v;
+    const fieldStyle = {
+      maxHeight: toCss(maxHeight),
+      maxWidth: toCss(maxWidth),
+      minHeight: toCss(minHeight),
+      minWidth: toCss(minWidth),
+      resize: resolvedResize
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
       {
-        ...rest,
-        ref,
-        id: baseId,
-        radius,
-        padding: "none",
-        onClick,
         className: cn(
-          "ods-blog-card",
-          `ods-blog-card--${orientation}`,
-          onClick && "ods-blog-card--interactive",
+          "ods-textarea",
+          `ods-textarea--${size}`,
+          `ods-textarea--resize-${resolvedResize}`,
+          autoResize && "ods-textarea--auto-resize",
+          error && "ods-textarea--error",
+          disabled && "ods-textarea--disabled",
           className
         ),
-        "aria-labelledby": titleId,
-        "aria-describedby": descId,
-        children: body
-      }
-    );
-  }
-);
-BlogCard.displayName = "BlogCard";
-
-// src/marketing/components/BlogGrid/BlogGrid.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function BlogGrid({
-  posts,
-  columns = 3,
-  viewAllHref,
-  viewAllLabel = "View all posts \u2192",
-  className,
-  ...rest
+        style: consumerStyle,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "label",
+            {
+              ...labelProps,
+              htmlFor: baseId,
+              className: "ods-textarea__label",
+              children: label
+            }
+          ),
+          toolbarEnabled && toolbarPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            TextareaToolbar,
+            {
+              tools: toolbar.tools,
+              onRun: toolbar.runTool
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ods-textarea__wrapper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "textarea",
+              {
+                ...props,
+                ...inputProps,
+                ref: setRef,
+                id: baseId,
+                rows: autoResize ? minRows ?? rows : rows,
+                disabled,
+                maxLength,
+                defaultValue,
+                value,
+                onChange: handleChangeWithMirror,
+                onKeyDown: handleKeyDownWithCommands,
+                className: "ods-textarea__field",
+                style: fieldStyle,
+                "aria-invalid": error || void 0,
+                "aria-describedby": describedBy,
+                "aria-autocomplete": cmdEnabled ? "list" : void 0,
+                "aria-expanded": cmdEnabled ? cmdPalette.isOpen : void 0,
+                "aria-controls": cmdEnabled && cmdPalette.isOpen ? `${baseId}-cmd-list` : void 0,
+                "aria-activedescendant": cmdEnabled && cmdPalette.isOpen && cmdPalette.items[cmdPalette.activeIndex] ? `${baseId}-cmd-${cmdPalette.items[cmdPalette.activeIndex].id}` : void 0
+              }
+            ),
+            cmdEnabled && cmdPalette.isOpen && cmdPalette.items.length > 0 && typeof document !== "undefined" && (0, import_react_dom3.createPortal)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "ul",
+                {
+                  id: `${baseId}-cmd-list`,
+                  role: "listbox",
+                  "aria-label": "Inline commands",
+                  className: "ods-textarea__cmd-popover",
+                  style: {
+                    position: "fixed",
+                    top: (cmdPalette.caretRect?.bottom ?? 0) + 6,
+                    left: cmdPalette.caretRect?.left ?? 0
+                  },
+                  children: cmdPalette.items.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    "li",
+                    {
+                      id: `${baseId}-cmd-${c.id}`,
+                      role: "option",
+                      "aria-selected": i === cmdPalette.activeIndex,
+                      className: cn(
+                        "ods-textarea__cmd-item",
+                        i === cmdPalette.activeIndex && "ods-textarea__cmd-item--active"
+                      ),
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                        cmdPalette.commit(c);
+                      },
+                      onMouseEnter: () => {
+                      },
+                      children: [
+                        c.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-textarea__cmd-icon", children: c.icon }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "ods-textarea__cmd-text", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-textarea__cmd-label", children: c.label }),
+                          c.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-textarea__cmd-desc", children: c.description })
+                        ] })
+                      ]
+                    },
+                    c.id
+                  ))
+                }
+              ),
+              document.body
+            ),
+            selectionToolbar && sel.active && sel.rect && typeof document !== "undefined" && (0, import_react_dom3.createPortal)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "div",
+                {
+                  role: "toolbar",
+                  "aria-label": "Selection actions",
+                  className: "ods-textarea__sel-toolbar",
+                  style: {
+                    position: "fixed",
+                    top: sel.rect.top - 36,
+                    left: sel.rect.left
+                  },
+                  onMouseDown: (e) => e.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ods-textarea__sel-btn",
+                        onClick: () => sel.copy(),
+                        "aria-label": "Copy selection",
+                        title: "Copy",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons4.CopyIcon, { size: "xs" })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ods-textarea__sel-btn",
+                        onClick: () => sel.cut(),
+                        "aria-label": "Cut selection",
+                        title: "Cut",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons4.CutIcon, { size: "xs" })
+                      }
+                    ),
+                    selectionActions?.map((a) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ods-textarea__sel-btn",
+                        onClick: () => a.onAction(sel.text, {
+                          replace: sel.replace,
+                          wrap: sel.wrap,
+                          copy: sel.copy,
+                          cut: sel.cut
+                        }),
+                        title: typeof a.label === "string" ? a.label : void 0,
+                        children: [
+                          a.icon,
+                          a.label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-textarea__sel-btn-label", children: a.label })
+                        ]
+                      },
+                      a.id
+                    ))
+                  ]
+                }
+              ),
+              document.body
+            ),
+            maxLength != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "span",
+              {
+                className: "ods-textarea__count",
+                "aria-live": charCount > maxLength ? "polite" : "off",
+                children: [
+                  charCount,
+                  "/",
+                  maxLength
+                ]
+              }
+            )
+          ] }),
+          toolbarEnabled && toolbarPosition === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            TextareaToolbar,
+            {
+              tools: toolbar.tools,
+              onRun: toolbar.runTool
+            }
+          ),
+          error && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              id: hintId,
+              className: "ods-textarea__error-message",
+              role: "alert",
+              children: errorMessage
+            }
+          ) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: hintId, className: "ods-textarea__hint", children: helperText }) : null
+        ]
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+function TextareaToolbar({
+  tools,
+  onRun
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ...rest, className: cn("ods-mkt-blog", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("ods-mkt-blog__grid", `ods-mkt-blog__grid--${columns}`), children: posts.map((post) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      BlogCard,
-      {
-        title: post.title,
-        description: post.excerpt,
-        href: post.href,
-        meta: post.date,
-        readingTime: post.readTime,
-        tags: post.tags,
-        cover: post.cover,
-        author: post.author
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Formatting",
+      className: "ods-textarea__toolbar",
+      onMouseDown: (e) => {
+        if (e.target.closest(".ods-textarea__toolbar-btn")) {
+          e.preventDefault();
+        }
       },
-      post.id
-    )) }),
-    viewAllHref && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ods-mkt-blog__more", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("a", { className: "ods-mkt-blog__more-link", href: viewAllHref, children: viewAllLabel }) })
-  ] });
-}
-
-// src/marketing/components/ContactForm/ContactForm.tsx
-var import_react25 = require("react");
-
-// src/components/Textarea/Textarea.tsx
-var import_react24 = require("react");
-var import_react_aria4 = require("react-aria");
-var import_react_dom3 = require("react-dom");
-var import_icons4 = require("@octaviaflow/icons");
-
-// src/hooks/useTextareaCommands.ts
-var import_react21 = require("react");
-function findOpenTrigger(value, caret, trigger) {
-  let i = caret - 1;
-  while (i >= 0) {
-    const ch = value[i];
-    if (ch === "\n" || ch === " " || ch === "	") return null;
-    if (value.startsWith(trigger, i)) {
-      const before = i === 0 ? "" : value[i - 1];
-      if (i === 0 || before === " " || before === "\n" || before === "	") {
-        return {
-          triggerIndex: i,
-          query: value.slice(i + trigger.length, caret)
-        };
-      }
-      return null;
+      children: tools.map((t) => {
+        if (t.kind === "divider") {
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "span",
+            {
+              className: "ods-textarea__toolbar-divider",
+              "aria-hidden": "true"
+            },
+            t.id
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "ods-textarea__toolbar-btn",
+            title: t.title ?? (typeof t.label === "string" ? t.label : void 0),
+            "aria-label": typeof t.label === "string" ? t.label : t.id,
+            onClick: () => onRun(t.id),
+            children: t.icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-textarea__toolbar-icon", children: t.icon }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ods-textarea__toolbar-text", children: t.label })
+          },
+          t.id
+        );
+      })
     }
-    i--;
-  }
-  return null;
+  );
 }
-function getCaretRect(textarea, caret) {
-  if (typeof document === "undefined") return null;
-  const mirror = document.createElement("div");
-  const styles = window.getComputedStyle(textarea);
-  for (const prop of [
-    "boxSizing",
-    "width",
-    "fontFamily",
-    "fontSize",
-    "fontWeight",
-    "fontStyle",
-    "letterSpacing",
-    "lineHeight",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
-    "borderTopWidth",
-    "borderRightWidth",
-    "borderBottomWidth",
-    "borderLeftWidth",
-    "textTransform",
-    "wordSpacing",
-    "tabSize",
-    "whiteSpace"
-  ]) {
-    mirror.style[prop] = styles[prop];
+
+// 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"
   }
-  mirror.style.position = "absolute";
-  mirror.style.visibility = "hidden";
-  mirror.style.overflow = "hidden";
-  mirror.style.top = "0";
-  mirror.style.left = "0";
-  mirror.style.whiteSpace = "pre-wrap";
-  mirror.style.wordWrap = "break-word";
-  mirror.textContent = textarea.value.slice(0, caret);
-  const marker = document.createElement("span");
-  marker.textContent = "\u200B";
-  mirror.appendChild(marker);
-  document.body.appendChild(mirror);
-  const taRect = textarea.getBoundingClientRect();
-  const markerRect = marker.getBoundingClientRect();
-  const mirrorRect = mirror.getBoundingClientRect();
-  const x = taRect.left + (markerRect.left - mirrorRect.left) - textarea.scrollLeft;
-  const y = taRect.top + (markerRect.top - mirrorRect.top) - textarea.scrollTop;
-  const out = new DOMRect(x, y, 0, markerRect.height || 16);
-  document.body.removeChild(mirror);
-  return out;
+];
+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, suffix: "%", label: "SAVED VS BASELINE", tone: "success" }
+];
+var WORKFLOW_SHOWCASE_SCHEDULES = ["AUTO", "HOURLY", "DAILY", "REAL-TIME"];
+var WORKFLOW_SHOWCASE_TRIGGERS = ["SCHEDULE", "WEBHOOK", "APP EVENT", "MANUAL"];
+var WORKFLOW_SHOWCASE_DEFAULT_TILES = [
+  "ELT",
+  "CDC",
+  "LLM",
+  "RAG",
+  "HEAL",
+  "COST",
+  "IDP",
+  "VEC"
+];
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function useTextareaCommands({
-  textareaRef,
-  value,
-  onChange,
-  commands,
-  trigger = "/",
-  openOnEmptyTrigger = true,
-  maxItems = 8
-}) {
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
-  const [query, setQuery] = (0, import_react21.useState)("");
-  const [activeIndex, setActiveIndex] = (0, import_react21.useState)(0);
-  const [triggerIndex, setTriggerIndex] = (0, import_react21.useState)(null);
-  const [caretRect, setCaretRect] = (0, import_react21.useState)(null);
-  const dismissedAtRef = (0, import_react21.useRef)(
-    null
-  );
-  const items = (0, import_react21.useMemo)(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return commands.slice(0, maxItems);
-    return commands.filter((c) => {
-      const hay = [
-        typeof c.label === "string" ? c.label : "",
-        typeof c.description === "string" ? c.description : "",
-        c.id,
-        ...c.keywords ?? []
-      ].join(" ").toLowerCase();
-      return hay.includes(q);
-    }).slice(0, maxItems);
-  }, [commands, query, maxItems]);
-  (0, import_react21.useEffect)(() => {
-    const ta = textareaRef.current;
-    if (!ta) return;
-    const caret = ta.selectionStart ?? 0;
-    const dismissedAt = dismissedAtRef.current;
-    if (dismissedAt && dismissedAt.value === value && dismissedAt.caret === caret) {
-      return;
+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" });
     }
-    const found = findOpenTrigger(value, caret, trigger);
-    if (!found) {
-      if (isOpen) setIsOpen(false);
-      setTriggerIndex(null);
-      return;
+    for (const name of selected.slice(-6)) {
+      lines.push({ id: `sel-${name}`, text: `+ ${name.toLowerCase()} connected`, tone: "plain" });
     }
-    if (dismissedAt) dismissedAtRef.current = null;
-    if (found.query.length > 0 || openOnEmptyTrigger) {
-      setQuery(found.query);
-      setTriggerIndex(found.triggerIndex);
-      setIsOpen(true);
-      setActiveIndex(0);
-      setCaretRect(getCaretRect(ta, caret));
+    return lines;
+  }
+  if (phase === "analyzing") {
+    for (const name of selected.slice(-4)) {
+      lines.push({ id: `sel-${name}`, text: `+ ${name.toLowerCase()} connected`, tone: "muted" });
     }
-  }, [value, trigger, openOnEmptyTrigger, isOpen, textareaRef]);
-  const commit = (0, import_react21.useCallback)(
-    (cmd) => {
-      const ta = textareaRef.current;
-      if (!ta || triggerIndex == null) return;
-      const insertText = typeof cmd.insert === "function" ? cmd.insert(query) : cmd.insert;
-      const caret = ta.selectionStart ?? value.length;
-      const before = value.slice(0, triggerIndex);
-      const after = value.slice(caret);
-      const next = `${before}${insertText}${after}`;
-      dismissedAtRef.current = {
-        value,
-        caret
-      };
-      onChange(next);
-      setIsOpen(false);
-      setTriggerIndex(null);
-      requestAnimationFrame(() => {
-        const pos = before.length + insertText.length;
-        ta.focus();
-        ta.setSelectionRange(pos, pos);
-      });
-    },
-    [textareaRef, triggerIndex, query, value, onChange]
-  );
-  const dismiss = (0, import_react21.useCallback)(() => {
-    const ta = textareaRef.current;
-    dismissedAtRef.current = {
-      value,
-      caret: ta?.selectionStart ?? value.length
-    };
-    setIsOpen(false);
-    setTriggerIndex(null);
-  }, [textareaRef, value]);
-  const onKeyDown = (0, import_react21.useCallback)(
-    (e) => {
-      if (!isOpen) return false;
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setActiveIndex((i) => Math.min(items.length - 1, i + 1));
-        return true;
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setActiveIndex((i) => Math.max(0, i - 1));
-        return true;
-      }
-      if (e.key === "Enter" || e.key === "Tab") {
-        const pick = items[activeIndex];
-        if (pick) {
-          e.preventDefault();
-          commit(pick);
-          return true;
-        }
-      }
-      if (e.key === "Escape") {
-        e.preventDefault();
-        dismiss();
-        return true;
-      }
-      return false;
-    },
-    [isOpen, items, activeIndex, commit, dismiss]
-  );
-  return {
-    isOpen,
-    query,
-    activeIndex,
-    items,
-    onKeyDown,
-    dismiss,
-    commit,
-    caretRect
-  };
-}
-
-// src/hooks/useTextareaSelection.ts
-var import_react22 = require("react");
-function getSelectionRect(textarea, start, end) {
-  if (typeof document === "undefined") return null;
-  if (start === end) return null;
-  const mirror = document.createElement("div");
-  const styles = window.getComputedStyle(textarea);
-  for (const prop of [
-    "boxSizing",
-    "width",
-    "fontFamily",
-    "fontSize",
-    "fontWeight",
-    "fontStyle",
-    "letterSpacing",
-    "lineHeight",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
-    "borderTopWidth",
-    "borderRightWidth",
-    "borderBottomWidth",
-    "borderLeftWidth",
-    "textTransform",
-    "wordSpacing",
-    "tabSize",
-    "whiteSpace"
-  ]) {
-    mirror.style[prop] = styles[prop];
+    lines.push({ id: "status", text: `\u27F3 ${status}`, tone: "active" });
+    return lines;
   }
-  mirror.style.position = "absolute";
-  mirror.style.visibility = "hidden";
-  mirror.style.overflow = "hidden";
-  mirror.style.top = "0";
-  mirror.style.left = "0";
-  mirror.style.whiteSpace = "pre-wrap";
-  mirror.style.wordWrap = "break-word";
-  const pre = document.createTextNode(textarea.value.slice(0, start));
-  const range = document.createElement("span");
-  range.textContent = textarea.value.slice(start, end) || "\u200B";
-  const post = document.createTextNode(textarea.value.slice(end));
-  mirror.appendChild(pre);
-  mirror.appendChild(range);
-  mirror.appendChild(post);
-  document.body.appendChild(mirror);
-  const taRect = textarea.getBoundingClientRect();
-  const rangeRect = range.getBoundingClientRect();
-  const mirrorRect = mirror.getBoundingClientRect();
-  const out = new DOMRect(
-    taRect.left + (rangeRect.left - mirrorRect.left) - textarea.scrollLeft,
-    taRect.top + (rangeRect.top - mirrorRect.top) - textarea.scrollTop,
-    rangeRect.width,
-    rangeRect.height
-  );
-  document.body.removeChild(mirror);
-  return out;
+  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 useTextareaSelection({
-  textareaRef,
-  value,
-  onChange
-}) {
-  const [start, setStart] = (0, import_react22.useState)(0);
-  const [end, setEnd] = (0, import_react22.useState)(0);
-  const [rect, setRect] = (0, import_react22.useState)(null);
-  (0, import_react22.useEffect)(() => {
-    if (typeof document === "undefined") return;
-    const handler = () => {
-      const ta = textareaRef.current;
-      if (!ta || document.activeElement !== ta) {
-        setStart(0);
-        setEnd(0);
-        setRect(null);
-        return;
-      }
-      const s = ta.selectionStart ?? 0;
-      const e = ta.selectionEnd ?? 0;
-      setStart(s);
-      setEnd(e);
-      setRect(s !== e ? getSelectionRect(ta, s, e) : null);
-    };
-    document.addEventListener("selectionchange", handler);
-    return () => document.removeEventListener("selectionchange", handler);
-  }, [textareaRef]);
-  const active = start !== end;
-  const text = active ? value.slice(start, end) : "";
-  const writeToClipboard = (0, import_react22.useCallback)(
-    async (str) => {
-      try {
-        if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
-          await navigator.clipboard.writeText(str);
-          return true;
-        }
-      } catch {
-      }
-      try {
-        const tmp = document.createElement("textarea");
-        tmp.value = str;
-        tmp.style.position = "fixed";
-        tmp.style.left = "-9999px";
-        document.body.appendChild(tmp);
-        tmp.select();
-        const ok = document.execCommand("copy");
-        document.body.removeChild(tmp);
-        return ok;
-      } catch {
-        return false;
-      }
-    },
-    []
-  );
-  const copy = (0, import_react22.useCallback)(async () => {
-    if (!active) return false;
-    return writeToClipboard(text);
-  }, [active, text, writeToClipboard]);
-  const replace = (0, import_react22.useCallback)(
-    (str) => {
-      const ta = textareaRef.current;
-      if (!ta) return;
-      const next = value.slice(0, start) + str + value.slice(end);
-      onChange(next);
-      requestAnimationFrame(() => {
-        ta.focus();
-        const caret = start + str.length;
-        ta.setSelectionRange(caret, caret);
-      });
-    },
-    [textareaRef, value, start, end, onChange]
-  );
-  const cut = (0, import_react22.useCallback)(async () => {
-    if (!active) return false;
-    const ok = await writeToClipboard(text);
-    if (ok) replace("");
-    return ok;
-  }, [active, text, writeToClipboard, replace]);
-  const wrap = (0, import_react22.useCallback)(
-    (open, close) => {
-      const ta = textareaRef.current;
-      if (!ta) return;
-      const closing = close ?? open;
-      const before = value.slice(0, start);
-      const sel = value.slice(start, end);
-      const after = value.slice(end);
-      const next = `${before}${open}${sel}${closing}${after}`;
-      onChange(next);
-      requestAnimationFrame(() => {
-        ta.focus();
-        const newStart = start;
-        const newEnd = end + open.length + closing.length;
-        ta.setSelectionRange(newStart, newEnd);
-      });
-    },
-    [textareaRef, value, start, end, onChange]
-  );
-  return {
-    active,
-    text,
-    start,
-    end,
-    rect,
-    copy,
-    cut,
-    wrap,
-    replace
-  };
+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/hooks/useTextareaTools.tsx
-var import_icons3 = require("@octaviaflow/icons");
-var import_react23 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function useTextareaTools({
-  textareaRef,
-  value,
-  onChange,
-  tools
+// src/marketing/components/BetaAccessForm/BetaAccessForm.tsx
+var import_jsx_runtime9 = require("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,
+  successTitle = "Request received.",
+  successBody = "We review access requests weekly \u2014 you'll hear from us by email.",
+  disabled = false,
+  className
 }) {
-  const valueRef = (0, import_react23.useRef)(value);
-  valueRef.current = value;
-  const helpers = (0, import_react23.useMemo)(() => {
-    const getTa = () => textareaRef.current;
-    const getSelection = () => {
-      const ta = getTa();
-      const s = ta?.selectionStart ?? 0;
-      const e = ta?.selectionEnd ?? 0;
-      return {
-        text: valueRef.current.slice(s, e),
-        start: s,
-        end: e,
-        active: s !== e
-      };
-    };
-    const setValue = (next) => onChange(next);
-    const replace = (text) => {
-      const ta = getTa();
-      if (!ta) return;
-      const { start, end } = getSelection();
-      const next = valueRef.current.slice(0, start) + text + valueRef.current.slice(end);
-      onChange(next);
-      requestAnimationFrame(() => {
-        ta.focus();
-        const caret = start + text.length;
-        ta.setSelectionRange(caret, caret);
-      });
-    };
-    const insert = (text) => replace(text);
-    const wrap = (open, close) => {
-      const ta = getTa();
-      if (!ta) return;
-      const closing = close ?? open;
-      const { start, end } = getSelection();
-      const sel = valueRef.current.slice(start, end);
-      const next = valueRef.current.slice(0, start) + open + sel + closing + valueRef.current.slice(end);
-      onChange(next);
-      requestAnimationFrame(() => {
-        ta.focus();
-        if (start === end) {
-          const caret = start + open.length;
-          ta.setSelectionRange(caret, caret);
-        } else {
-          ta.setSelectionRange(start, end + open.length + closing.length);
-        }
-      });
-    };
-    const prependLines = (prefix) => {
-      const ta = getTa();
-      if (!ta) return;
-      const { start, end } = getSelection();
-      const v = valueRef.current;
-      const lineStart = v.lastIndexOf("\n", start - 1) + 1;
-      const lineEnd = (() => {
-        const idx = v.indexOf("\n", end);
-        return idx === -1 ? v.length : idx;
-      })();
-      const block = v.slice(lineStart, lineEnd);
-      const updated = block.split("\n").map((line) => `${prefix}${line}`).join("\n");
-      const next = v.slice(0, lineStart) + updated + v.slice(lineEnd);
-      onChange(next);
-      requestAnimationFrame(() => {
-        ta.focus();
-        ta.setSelectionRange(
-          lineStart,
-          lineStart + updated.length
-        );
-      });
-    };
-    const undo = () => {
-      try {
-        getTa()?.focus();
-        document.execCommand("undo");
-      } catch {
-      }
-    };
-    const redo = () => {
-      try {
-        getTa()?.focus();
-        document.execCommand("redo");
-      } catch {
+  const uid = (0, import_react21.useId)();
+  const [values, setValues] = (0, import_react21.useState)({
+    email: "",
+    name: "",
+    firstName: "",
+    lastName: "",
+    company: "",
+    teamSize: "",
+    plan: defaultPlan ?? "",
+    useCase: "",
+    details: ""
+  });
+  const [phase, setPhase] = (0, import_react21.useState)("idle");
+  const [error, setError] = (0, import_react21.useState)(null);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (phase === "submitting") return;
+    if (!isValidEmail(values.email)) {
+      setError("Please enter a valid work email.");
+      return;
+    }
+    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 {
+      await onSubmit?.(values);
+      setPhase("success");
+    } catch {
+      setError("Something went wrong \u2014 please try again.");
+      setPhase("idle");
+    }
+  };
+  const inline = appearance === "inline";
+  if (phase === "success") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        className: cn(
+          "ods-mkt-access",
+          "ods-mkt-access--success",
+          inline && "ods-mkt-access--inline",
+          className
+        ),
+        role: "status",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "ods-mkt-access__success-mark", children: [
+            "\u2713 ",
+            successTitle
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ods-mkt-access__success-body", children: successBody })
+        ]
       }
-    };
-    return {
-      get value() {
-        return valueRef.current;
-      },
-      get selection() {
-        return getSelection();
-      },
-      setValue,
-      replace,
-      insert,
-      wrap,
-      prependLines,
-      undo,
-      redo,
-      getTextarea: getTa
-    };
-  }, [textareaRef, onChange]);
-  const visibleTools = (0, import_react23.useMemo)(
-    () => tools.filter((t) => t.isVisible ? t.isVisible(helpers) : true),
-    [tools, helpers]
-  );
-  const runTool = (0, import_react23.useCallback)(
-    async (id) => {
-      const tool = tools.find((t) => t.id === id);
-      if (!tool || tool.kind === "divider") return;
-      await tool.onAction?.(helpers);
-    },
-    [tools, helpers]
+    );
+  }
+  const busy = disabled || phase === "submitting";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "form",
+    {
+      className: cn("ods-mkt-access", inline && "ods-mkt-access--inline", className),
+      onSubmit: handleSubmit,
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-mkt-access__head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "ods-mkt-access__title", children: title }),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ods-mkt-access__subtitle", children: subtitle })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            className: cn(
+              "ods-mkt-access__fields",
+              fields === "full" && "ods-mkt-access__fields--full"
+            ),
+            children: [
+              fields === "full" && nameLayout === "single" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-mkt-access__field", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-name`, children: "Full name" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Input,
+                  {
+                    id: `${uid}-name`,
+                    autoComplete: "name",
+                    placeholder: "Ada Lovelace",
+                    value: values.name ?? "",
+                    onChange: (e) => setValues((v) => ({ ...v, name: e.target.value })),
+                    disabled: busy
+                  }
+                )
+              ] }),
+              fields === "full" && nameLayout === "split" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-mkt-access__field", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-firstname`, children: "First name" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Input,
+                    {
+                      id: `${uid}-firstname`,
+                      autoComplete: "given-name",
+                      placeholder: "Ada",
+                      value: values.firstName ?? "",
+                      onChange: (e) => setValues((v) => ({ ...v, firstName: e.target.value })),
+                      disabled: busy
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-mkt-access__field", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-lastname`, children: "Last name" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Input,
+                    {
+                      id: `${uid}-lastname`,
+                      autoComplete: "family-name",
+                      placeholder: "Lovelace",
+                      value: values.lastName ?? "",
+                      onChange: (e) => setValues((v) => ({ ...v, lastName: e.target.value })),
+                      disabled: busy
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-mkt-access__field", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-email`, children: "Work email" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Input,
+                  {
+                    id: `${uid}-email`,
+                    type: "email",
+                    autoComplete: "email",
+                    placeholder: "ada@company.com",
+                    value: values.email,
+                    onChange: (e) => setValues((v) => ({ ...v, email: e.target.value })),
+                    disabled: busy
+                  }
+                )
+              ] }),
+              fields === "full" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-mkt-access__field", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "ods-mkt-access__label", htmlFor: `${uid}-company`, children: "Company" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Input,
+                  {
+                    id: `${uid}-company`,
+                    autoComplete: "organization",
+                    placeholder: "Acme Inc.",
+                    value: values.company ?? "",
+                    onChange: (e) => setValues((v) => ({ ...v, company: e.target.value })),
+                    disabled: busy
+                  }
+                )
+              ] }),
+              fields === "full" && teamSizes && teamSizes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-mkt-access__field", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-mkt-access__label", id: `${uid}-teamsize-label`, children: "Team size" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Select,
+                  {
+                    "aria-labelledby": `${uid}-teamsize-label`,
+                    placeholder: "Select team size\u2026",
+                    options: teamSizes.map((size) => ({ value: size, label: size })),
+                    value: values.teamSize ?? "",
+                    onChange: (teamSize) => setValues((v) => ({ ...v, teamSize })),
+                    disabled: busy
+                  }
+                )
+              ] }),
+              fields === "full" && plans && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-mkt-access__field", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-mkt-access__label", id: `${uid}-plan-label`, children: "Plan (optional)" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Select,
+                  {
+                    "aria-labelledby": `${uid}-plan-label`,
+                    placeholder: "Not sure yet",
+                    options: plans.map((plan) => ({ value: plan, label: plan })),
+                    value: values.plan ?? "",
+                    onChange: (plan) => setValues((v) => ({ ...v, plan })),
+                    disabled: busy
+                  }
+                )
+              ] }),
+              fields === "full" && useCases && useCases.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-mkt-access__field", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-mkt-access__label", id: `${uid}-usecase-label`, children: "Primary use case" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-mkt-access__field ods-mkt-access__field--wide", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "label",
+                  {
+                    className: "ods-mkt-access__label",
+                    id: `${uid}-details-label`,
+                    htmlFor: `${uid}-details`,
+                    children: detailsLabel
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  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__ */ (0, import_jsx_runtime9.jsx)(
+                Button,
+                {
+                  type: "submit",
+                  variant: "primary",
+                  loading: phase === "submitting",
+                  disabled,
+                  children: submitLabel
+                }
+              )
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ods-mkt-access__error", role: "alert", children: error }),
+        footnote && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ods-mkt-access__footnote", children: footnote })
+      ]
+    }
   );
-  return { tools: visibleTools, runTool, helpers };
 }
 
-// src/components/Textarea/Textarea.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Textarea = (0, import_react24.forwardRef)(
-  function Textarea2({
-    label,
-    error = false,
-    errorMessage,
-    helperText,
-    resize = "vertical",
-    autoResize = false,
-    minRows,
-    maxRows,
-    maxHeight,
-    maxWidth,
-    minHeight,
-    minWidth,
-    maxLength,
-    size = "md",
-    rows = 3,
-    disabled = false,
-    className,
-    style: consumerStyle,
-    defaultValue,
-    value,
-    onChange,
-    id: providedId,
-    commands,
-    commandTrigger = "/",
-    selectionToolbar = false,
-    selectionActions,
-    tools,
-    toolbarPosition = "top",
-    ...props
-  }, forwardedRef) {
-    const innerRef = (0, import_react24.useRef)(null);
-    const setRef = (node) => {
-      innerRef.current = node;
-      if (typeof forwardedRef === "function") forwardedRef(node);
-      else if (forwardedRef)
-        forwardedRef.current = node;
-    };
-    const reactId = (0, import_react24.useId)();
-    const baseId = providedId ?? `ods-textarea-${reactId}`;
-    const hintId = error && errorMessage || helperText ? `${baseId}-hint` : void 0;
-    const [charCount, setCharCount] = (0, import_react24.useState)(
-      () => String(value ?? defaultValue ?? "").length
-    );
-    const ariaNameProps = resolveAccessibleName({
-      label: typeof label === "string" ? label : void 0,
-      ariaLabel: props["aria-label"],
-      ariaLabelledby: props["aria-labelledby"],
-      componentName: "Textarea"
-    });
-    const { labelProps, inputProps } = (0, import_react_aria4.useTextField)(
-      {
-        label: typeof label === "string" ? label : void 0,
-        ...ariaNameProps,
-        isDisabled: disabled,
-        errorMessage: typeof errorMessage === "string" ? errorMessage : void 0,
-        validationState: error ? "invalid" : void 0,
-        inputElementType: "textarea",
-        value,
-        defaultValue
-      },
-      innerRef
-    );
-    const describedBy = [
-      props["aria-describedby"],
-      hintId
-    ].filter(Boolean).join(" ") || void 0;
-    const handleChange = (e) => {
-      setCharCount(e.target.value.length);
-      onChange?.(e);
-    };
-    const [liveValue, setLiveValue] = (0, import_react24.useState)(
-      String(value ?? defaultValue ?? "")
-    );
-    (0, import_react24.useEffect)(() => {
-      if (value != null) setLiveValue(String(value));
-    }, [value]);
-    const handleChangeWithMirror = (e) => {
-      setLiveValue(e.target.value);
-      handleChange(e);
-    };
-    const setLiveAndCommit = (next) => {
-      setLiveValue(next);
-      if (innerRef.current) innerRef.current.value = next;
-      onChange?.({
-        target: innerRef.current,
-        currentTarget: innerRef.current
-      });
-      setCharCount(next.length);
-    };
-    const cmdPalette = useTextareaCommands({
-      textareaRef: innerRef,
-      value: liveValue,
-      onChange: setLiveAndCommit,
-      commands: commands ?? [],
-      trigger: commandTrigger
-    });
-    const cmdEnabled = (commands?.length ?? 0) > 0;
-    const sel = useTextareaSelection({
-      textareaRef: innerRef,
-      value: liveValue,
-      onChange: setLiveAndCommit
-    });
-    const toolbar = useTextareaTools({
-      textareaRef: innerRef,
-      value: liveValue,
-      onChange: setLiveAndCommit,
-      tools: tools ?? []
-    });
-    const toolbarEnabled = (tools?.length ?? 0) > 0;
-    const handleKeyDownWithCommands = (e) => {
-      if (cmdEnabled) {
-        const consumed = cmdPalette.onKeyDown(e);
-        if (consumed) return;
-      }
-      props.onKeyDown?.(e);
-    };
-    (0, import_react24.useEffect)(() => {
-      if (!autoResize) return;
-      const el = innerRef.current;
-      if (!el) return;
-      const computed = window.getComputedStyle(el);
-      const fontSize = parseFloat(computed.fontSize) || 16;
-      const lhRaw = computed.lineHeight;
-      const lh = lhRaw === "normal" ? fontSize * 1.2 : lhRaw.endsWith("px") ? parseFloat(lhRaw) : parseFloat(lhRaw) * fontSize;
-      const padding = parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom);
-      const rowCap = maxRows != null && Number.isFinite(maxRows) ? lh * maxRows + padding : Number.POSITIVE_INFINITY;
-      const pixelCap = typeof maxHeight === "number" ? maxHeight : Number.POSITIVE_INFINITY;
-      const effectiveMax = Math.min(rowCap, pixelCap);
-      const rowFloor = lh * (minRows ?? rows) + padding;
-      el.style.height = "auto";
-      const target = Math.max(
-        rowFloor,
-        Math.min(effectiveMax, el.scrollHeight)
-      );
-      el.style.height = `${target}px`;
-      el.style.overflowY = el.scrollHeight > effectiveMax ? "auto" : "hidden";
-    }, [autoResize, value, defaultValue, minRows, maxRows, maxHeight, rows]);
-    const resolvedResize = typeof resize === "boolean" ? resize ? "vertical" : "none" : resize;
-    const toCss = (v) => v == null ? void 0 : typeof v === "number" ? `${v}px` : v;
-    const fieldStyle = {
-      maxHeight: toCss(maxHeight),
-      maxWidth: toCss(maxWidth),
-      minHeight: toCss(minHeight),
-      minWidth: toCss(minWidth),
-      resize: resolvedResize
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+// src/components/BlogCard/BlogCard.tsx
+var import_react24 = require("react");
+
+// src/components/Avatar/Avatar.tsx
+var import_react22 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PALETTE_SIZE = 12;
+function djb2(str) {
+  let h = 5381;
+  for (let i = 0; i < str.length; i++) h = (h << 5) + h + str.charCodeAt(i);
+  return h >>> 0;
+}
+function paletteIndexFor(seed) {
+  return djb2(seed) % PALETTE_SIZE;
+}
+function normalizeInitials(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) return "";
+  const tokens = trimmed.split(/\s+/).filter(Boolean);
+  if (tokens.length >= 2) {
+    return (tokens[0].charAt(0) + tokens[1].charAt(0)).toUpperCase();
+  }
+  return trimmed.slice(0, 2).toUpperCase();
+}
+var STATUS_DEFAULT_LABEL = {
+  online: "Online",
+  offline: "Offline",
+  busy: "Busy",
+  away: "Away"
+};
+var Avatar = (0, import_react22.forwardRef)(function Avatar2({
+  src,
+  alt,
+  initials,
+  icon,
+  fallback,
+  seed,
+  size = "md",
+  shape = "circle",
+  status,
+  statusLabel,
+  onClick,
+  imgLoading = "lazy",
+  referrerPolicy,
+  className,
+  ...rest
+}, ref) {
+  const [imgFailed, setImgFailed] = (0, import_react22.useState)(false);
+  const handleImgError = (0, import_react22.useCallback)(() => setImgFailed(true), []);
+  const showImage = Boolean(src) && !imgFailed;
+  const normalizedInitials = (0, import_react22.useMemo)(
+    () => initials ? normalizeInitials(initials) : "",
+    [initials]
+  );
+  const paletteIdx = (0, import_react22.useMemo)(() => {
+    const resolved = seed ?? initials ?? alt ?? "?";
+    return paletteIndexFor(resolved);
+  }, [seed, initials, alt]);
+  const baseName = alt || normalizedInitials || "Avatar";
+  const announcedStatus = status ? statusLabel ?? STATUS_DEFAULT_LABEL[status] : "";
+  const accessibleName = announcedStatus ? `${baseName}, ${announcedStatus}` : baseName;
+  const isClickable = Boolean(onClick);
+  const handleKeyDown = (e) => {
+    if (!isClickable) return;
+    if ((e.key === "Enter" || e.key === " ") && !e.repeat) {
+      e.preventDefault();
+      onClick?.();
+    }
+  };
+  const rootClassName = cn(
+    "ods-avatar",
+    `ods-avatar--${size}`,
+    `ods-avatar--${shape}`,
+    isClickable && "ods-avatar--clickable",
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: rootClassName,
+      role: isClickable ? "button" : "img",
+      "aria-label": accessibleName,
+      tabIndex: isClickable ? 0 : void 0,
+      onClick,
+      onKeyDown: isClickable ? handleKeyDown : void 0,
+      "data-status": status,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-avatar__inner", "data-palette": paletteIdx, children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "img",
+          {
+            src,
+            alt: "",
+            className: "ods-avatar__image",
+            loading: imgLoading,
+            decoding: "async",
+            referrerPolicy,
+            onError: handleImgError,
+            draggable: false
+          }
+        ) : icon ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-avatar__icon", "aria-hidden": "true", children: icon }) : normalizedInitials ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-avatar__initials", "aria-hidden": "true", children: normalizedInitials }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-avatar__initials", "aria-hidden": "true", children: fallback ?? "?" }) }),
+        status && // Decorative — the textual status is folded into the wrapper's
+        // aria-label above. `aria-hidden` keeps AT from double-announcing.
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "span",
+          {
+            className: cn("ods-avatar__status", `ods-avatar__status--${status}`),
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+});
+Avatar.displayName = "Avatar";
+var AvatarStack = (0, import_react22.forwardRef)(
+  function AvatarStack2({
+    children,
+    max,
+    size = "md",
+    renderOverflow,
+    direction = "ltr",
+    className,
+    ...rest
+  }, ref) {
+    const arr = Array.isArray(children) ? children : [children];
+    const visible = max && arr.length > max ? arr.slice(0, max) : arr;
+    const overflow = max && arr.length > max ? arr.length - max : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "div",
       {
+        ...rest,
+        ref,
         className: cn(
-          "ods-textarea",
-          `ods-textarea--${size}`,
-          `ods-textarea--resize-${resolvedResize}`,
-          autoResize && "ods-textarea--auto-resize",
-          error && "ods-textarea--error",
-          disabled && "ods-textarea--disabled",
+          "ods-avatar-stack",
+          `ods-avatar-stack--${direction}`,
           className
         ),
-        style: consumerStyle,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "label",
-            {
-              ...labelProps,
-              htmlFor: baseId,
-              className: "ods-textarea__label",
-              children: label
-            }
-          ),
-          toolbarEnabled && toolbarPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            TextareaToolbar,
+          visible,
+          overflow > 0 && (renderOverflow ? renderOverflow(overflow) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "div",
             {
-              tools: toolbar.tools,
-              onRun: toolbar.runTool
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ods-textarea__wrapper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              "textarea",
-              {
-                ...props,
-                ...inputProps,
-                ref: setRef,
-                id: baseId,
-                rows: autoResize ? minRows ?? rows : rows,
-                disabled,
-                maxLength,
-                defaultValue,
-                value,
-                onChange: handleChangeWithMirror,
-                onKeyDown: handleKeyDownWithCommands,
-                className: "ods-textarea__field",
-                style: fieldStyle,
-                "aria-invalid": error || void 0,
-                "aria-describedby": describedBy,
-                "aria-autocomplete": cmdEnabled ? "list" : void 0,
-                "aria-expanded": cmdEnabled ? cmdPalette.isOpen : void 0,
-                "aria-controls": cmdEnabled && cmdPalette.isOpen ? `${baseId}-cmd-list` : void 0,
-                "aria-activedescendant": cmdEnabled && cmdPalette.isOpen && cmdPalette.items[cmdPalette.activeIndex] ? `${baseId}-cmd-${cmdPalette.items[cmdPalette.activeIndex].id}` : void 0
-              }
-            ),
-            cmdEnabled && cmdPalette.isOpen && cmdPalette.items.length > 0 && typeof document !== "undefined" && (0, import_react_dom3.createPortal)(
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                "ul",
-                {
-                  id: `${baseId}-cmd-list`,
-                  role: "listbox",
-                  "aria-label": "Inline commands",
-                  className: "ods-textarea__cmd-popover",
-                  style: {
-                    position: "fixed",
-                    top: (cmdPalette.caretRect?.bottom ?? 0) + 6,
-                    left: cmdPalette.caretRect?.left ?? 0
-                  },
-                  children: cmdPalette.items.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                    "li",
-                    {
-                      id: `${baseId}-cmd-${c.id}`,
-                      role: "option",
-                      "aria-selected": i === cmdPalette.activeIndex,
-                      className: cn(
-                        "ods-textarea__cmd-item",
-                        i === cmdPalette.activeIndex && "ods-textarea__cmd-item--active"
-                      ),
-                      onMouseDown: (e) => {
-                        e.preventDefault();
-                        cmdPalette.commit(c);
-                      },
-                      onMouseEnter: () => {
-                      },
-                      children: [
-                        c.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ods-textarea__cmd-icon", children: c.icon }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ods-textarea__cmd-text", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ods-textarea__cmd-label", children: c.label }),
-                          c.description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ods-textarea__cmd-desc", children: c.description })
-                        ] })
-                      ]
-                    },
-                    c.id
-                  ))
-                }
-              ),
-              document.body
-            ),
-            selectionToolbar && sel.active && sel.rect && typeof document !== "undefined" && (0, import_react_dom3.createPortal)(
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                "div",
-                {
-                  role: "toolbar",
-                  "aria-label": "Selection actions",
-                  className: "ods-textarea__sel-toolbar",
-                  style: {
-                    position: "fixed",
-                    top: sel.rect.top - 36,
-                    left: sel.rect.left
-                  },
-                  onMouseDown: (e) => e.preventDefault(),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        className: "ods-textarea__sel-btn",
-                        onClick: () => sel.copy(),
-                        "aria-label": "Copy selection",
-                        title: "Copy",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons4.CopyIcon, { size: "xs" })
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        className: "ods-textarea__sel-btn",
-                        onClick: () => sel.cut(),
-                        "aria-label": "Cut selection",
-                        title: "Cut",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons4.CutIcon, { size: "xs" })
-                      }
-                    ),
-                    selectionActions?.map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                      "button",
-                      {
-                        type: "button",
-                        className: "ods-textarea__sel-btn",
-                        onClick: () => a.onAction(sel.text, {
-                          replace: sel.replace,
-                          wrap: sel.wrap,
-                          copy: sel.copy,
-                          cut: sel.cut
-                        }),
-                        title: typeof a.label === "string" ? a.label : void 0,
-                        children: [
-                          a.icon,
-                          a.label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ods-textarea__sel-btn-label", children: a.label })
-                        ]
-                      },
-                      a.id
-                    ))
-                  ]
-                }
+              className: cn(
+                "ods-avatar",
+                `ods-avatar--${size}`,
+                "ods-avatar--circle",
+                "ods-avatar-stack__overflow"
               ),
-              document.body
-            ),
-            maxLength != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-              "span",
+              role: "img",
+              "aria-label": `${overflow} more`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-avatar__inner", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ods-avatar__initials", "aria-hidden": "true", children: [
+                "+",
+                overflow
+              ] }) })
+            }
+          ))
+        ]
+      }
+    );
+  }
+);
+AvatarStack.displayName = "AvatarStack";
+
+// src/components/Card/Card.tsx
+var import_framer_motion4 = require("framer-motion");
+var import_react23 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Card = (0, import_react23.forwardRef)(function Card2({
+  variant = "default",
+  padding = "md",
+  radius = "md",
+  hoverable = false,
+  disabled = false,
+  loading = false,
+  asChild = false,
+  onClick,
+  onKeyDown,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const reducedMotion = (0, import_framer_motion4.useReducedMotion)();
+  const isInteractive = Boolean(onClick) && !disabled && !loading;
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (!isInteractive) return;
+    if ((e.key === "Enter" || e.key === " ") && !e.repeat) {
+      e.preventDefault();
+      onClick?.(e);
+    }
+  };
+  const rootClassName = cn(
+    "ods-card",
+    `ods-card--${variant}`,
+    `ods-card--pad-${padding}`,
+    `ods-card--radius-${radius}`,
+    (hoverable || isInteractive) && !loading && !disabled && "ods-card--hoverable",
+    isInteractive && "ods-card--clickable",
+    disabled && "ods-card--disabled",
+    loading && "ods-card--loading",
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Slot,
+      {
+        ...rest,
+        ref,
+        className: rootClassName,
+        onClick: isInteractive ? onClick : void 0,
+        onKeyDown: isInteractive ? handleKeyDown : onKeyDown,
+        "aria-disabled": disabled || void 0,
+        children
+      }
+    );
+  }
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: rootClassName,
+        "aria-busy": "true",
+        "aria-label": "Loading",
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ods-card__skeleton", "data-ods-animate": "shimmer" })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_framer_motion4.motion.div,
+    {
+      ...rest,
+      ref,
+      onClick: isInteractive ? onClick : void 0,
+      onKeyDown: isInteractive ? handleKeyDown : onKeyDown,
+      className: rootClassName,
+      whileHover: (hoverable || isInteractive) && !reducedMotion ? { y: -2, transition: { duration: 0.15 } } : void 0,
+      whileTap: isInteractive && !reducedMotion ? { scale: 0.99 } : void 0,
+      role: isInteractive ? "button" : rest.role,
+      tabIndex: isInteractive ? rest.tabIndex ?? 0 : rest.tabIndex,
+      "aria-disabled": disabled || void 0,
+      children
+    }
+  );
+});
+Card.displayName = "Card";
+var CardHeader = (0, import_react23.forwardRef)(
+  function CardHeader2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...rest, ref, className: cn("ods-card__header", className), children });
+  }
+);
+CardHeader.displayName = "Card.Header";
+var CardBody = (0, import_react23.forwardRef)(
+  function CardBody2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...rest, ref, className: cn("ods-card__body", className), children });
+  }
+);
+CardBody.displayName = "Card.Body";
+var CardFooter = (0, import_react23.forwardRef)(
+  function CardFooter2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...rest, ref, className: cn("ods-card__footer", className), children });
+  }
+);
+CardFooter.displayName = "Card.Footer";
+var CardTitle = (0, import_react23.forwardRef)(
+  function CardTitle2({ as: Comp = "h3", className, children, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Comp,
+      {
+        ...rest,
+        ref,
+        className: cn("ods-card__title", className),
+        children
+      }
+    );
+  }
+);
+CardTitle.displayName = "Card.Title";
+var CardDescription = (0, import_react23.forwardRef)(function CardDescription2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { ...rest, ref, className: cn("ods-card__description", className), children });
+});
+CardDescription.displayName = "Card.Description";
+Card.Header = CardHeader;
+Card.Body = CardBody;
+Card.Footer = CardFooter;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+
+// src/components/BlogCard/BlogCard.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var BlogCard = (0, import_react24.forwardRef)(
+  function BlogCard2({
+    cover,
+    coverAspect = "16/9",
+    category,
+    tags,
+    meta,
+    readingTime,
+    title,
+    titleAs = "h3",
+    description,
+    author,
+    footer,
+    radius = "md",
+    orientation = "vertical",
+    href,
+    onClick,
+    id: providedId,
+    className,
+    ...rest
+  }, ref) {
+    const reactId = (0, import_react24.useId)();
+    const baseId = providedId ?? `ods-blog-card-${reactId}`;
+    const titleId = `${baseId}-title`;
+    const descId = description ? `${baseId}-desc` : void 0;
+    const tagList = tags ?? (category ? [category] : []);
+    const body = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      cover && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "div",
+        {
+          className: cn(
+            "ods-blog-card__cover",
+            `ods-blog-card__cover--aspect-${coverAspect.replace("/", "-")}`
+          ),
+          "aria-hidden": "true",
+          children: cover
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ods-blog-card__body", children: [
+        (tagList.length > 0 || meta || readingTime) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ods-blog-card__meta", children: [
+          tagList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ods-blog-card__tags", children: tagList.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ods-blog-card__tag", children: t }, i)) }),
+          meta && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ods-blog-card__date", children: meta }),
+          readingTime && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ods-blog-card__reading", children: readingTime })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Card.Title,
+          {
+            as: titleAs,
+            id: titleId,
+            className: "ods-blog-card__title",
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Card.Description,
+          {
+            id: descId,
+            className: "ods-blog-card__desc",
+            children: description
+          }
+        ),
+        (author || footer) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ods-blog-card__footer", children: [
+          author && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ods-blog-card__author", children: [
+            author.avatar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              Avatar,
               {
-                className: "ods-textarea__count",
-                "aria-live": charCount > maxLength ? "polite" : "off",
-                children: [
-                  charCount,
-                  "/",
-                  maxLength
-                ]
+                size: "sm",
+                src: author.avatar.src,
+                initials: author.avatar.initials,
+                alt: author.avatar.alt ?? (typeof author.name === "string" ? author.name : void 0)
               }
-            )
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ods-blog-card__author-text", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ods-blog-card__author-name", children: author.name }),
+              author.byline && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ods-blog-card__author-byline", children: author.byline })
+            ] })
           ] }),
-          toolbarEnabled && toolbarPosition === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            TextareaToolbar,
-            {
-              tools: toolbar.tools,
-              onRun: toolbar.runTool
-            }
+          footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ods-blog-card__action", children: footer })
+        ] })
+      ] })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        Card,
+        {
+          asChild: true,
+          radius,
+          padding: "none",
+          className: cn(
+            "ods-blog-card",
+            `ods-blog-card--${orientation}`,
+            "ods-blog-card--interactive",
+            className
           ),
-          error && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "div",
+          "aria-labelledby": titleId,
+          "aria-describedby": descId,
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "a",
             {
-              id: hintId,
-              className: "ods-textarea__error-message",
-              role: "alert",
-              children: errorMessage
+              ...rest,
+              ref,
+              href,
+              id: baseId,
+              onClick,
+              children: body
             }
-          ) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: hintId, className: "ods-textarea__hint", children: helperText }) : null
-        ]
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      Card,
+      {
+        ...rest,
+        ref,
+        id: baseId,
+        radius,
+        padding: "none",
+        onClick,
+        className: cn(
+          "ods-blog-card",
+          `ods-blog-card--${orientation}`,
+          onClick && "ods-blog-card--interactive",
+          className
+        ),
+        "aria-labelledby": titleId,
+        "aria-describedby": descId,
+        children: body
       }
     );
   }
 );
-Textarea.displayName = "Textarea";
-function TextareaToolbar({
-  tools,
-  onRun
+BlogCard.displayName = "BlogCard";
+
+// src/marketing/components/BlogGrid/BlogGrid.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function BlogGrid({
+  posts,
+  columns = 3,
+  viewAllHref,
+  viewAllLabel = "View all posts \u2192",
+  className,
+  ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "div",
-    {
-      role: "toolbar",
-      "aria-label": "Formatting",
-      className: "ods-textarea__toolbar",
-      onMouseDown: (e) => {
-        if (e.target.closest(".ods-textarea__toolbar-btn")) {
-          e.preventDefault();
-        }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...rest, className: cn("ods-mkt-blog", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("ods-mkt-blog__grid", `ods-mkt-blog__grid--${columns}`), children: posts.map((post) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      BlogCard,
+      {
+        title: post.title,
+        description: post.excerpt,
+        href: post.href,
+        meta: post.date,
+        readingTime: post.readTime,
+        tags: post.tags,
+        cover: post.cover,
+        author: post.author
       },
-      children: tools.map((t) => {
-        if (t.kind === "divider") {
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "span",
-            {
-              className: "ods-textarea__toolbar-divider",
-              "aria-hidden": "true"
-            },
-            t.id
-          );
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "ods-textarea__toolbar-btn",
-            title: t.title ?? (typeof t.label === "string" ? t.label : void 0),
-            "aria-label": typeof t.label === "string" ? t.label : t.id,
-            onClick: () => onRun(t.id),
-            children: t.icon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ods-textarea__toolbar-icon", children: t.icon }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ods-textarea__toolbar-text", children: t.label })
-          },
-          t.id
-        );
-      })
-    }
-  );
+      post.id
+    )) }),
+    viewAllHref && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ods-mkt-blog__more", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "ods-mkt-blog__more-link", href: viewAllHref, children: viewAllLabel }) })
+  ] });
 }
 
 // src/marketing/components/ContactForm/ContactForm.tsx
+var import_react25 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function ContactForm({
   title = "Talk to us",
@@ -4158,7 +4240,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 })),
@@ -4973,7 +5055,24 @@ function MarketingHero({
 }
 
 // src/marketing/components/MarketingNav/MarketingNav.tsx
+var import_react29 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
+function BurgerGlyph({ open }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "20",
+      height: "20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      "aria-hidden": "true",
+      children: open ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M6 6l12 12M18 6 6 18" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M4 7h16M4 12h16M4 17h16" })
+    }
+  );
+}
 function MarketingNav({
   brand,
   brandHref = "/",
@@ -4983,6 +5082,7 @@ function MarketingNav({
   className,
   ...rest
 }) {
+  const [mobileOpen, setMobileOpen] = (0, import_react29.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("header", { ...rest, className: cn("ods-mkt-nav", sticky && "ods-mkt-nav--sticky", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { className: "ods-mkt-nav__brand", href: brandHref, children: brand ?? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BrandMark, {}),
@@ -4998,7 +5098,35 @@ function MarketingNav({
       },
       link.href
     )) }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ods-mkt-nav__actions", children: actions })
+    actions && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ods-mkt-nav__actions", children: actions }),
+    (links.length > 0 || actions) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ods-mkt-nav__toggle",
+        "aria-expanded": mobileOpen,
+        "aria-label": "Toggle menu",
+        onClick: () => setMobileOpen((open) => !open),
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BurgerGlyph, { open: mobileOpen })
+      }
+    ),
+    mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("nav", { className: "ods-mkt-nav__mobile", "aria-label": "Main", children: [
+      links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "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__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ods-mkt-nav__mobile-actions", children: actions })
+    ] })
   ] });
 }
 
@@ -5122,10 +5250,10 @@ function PricingTiers({ tiers, note, className, ...rest }) {
 var import_framer_motion7 = require("framer-motion");
 
 // src/components/CountUp/CountUp.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
-var CountUp = (0, import_react29.forwardRef)(
+var CountUp = (0, import_react30.forwardRef)(
   function CountUp2({
     value,
     from = 0,
@@ -5141,9 +5269,9 @@ var CountUp = (0, import_react29.forwardRef)(
     className,
     ...rest
   }, ref) {
-    const [n, setN] = (0, import_react29.useState)(disableAnimation ? value : from);
-    const lastRendered = (0, import_react29.useRef)(disableAnimation ? value : from);
-    (0, import_react29.useEffect)(() => {
+    const [n, setN] = (0, import_react30.useState)(disableAnimation ? value : from);
+    const lastRendered = (0, import_react30.useRef)(disableAnimation ? value : from);
+    (0, import_react30.useEffect)(() => {
       const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
       if (disableAnimation || reduced) {
         setN(value);
@@ -5241,13 +5369,13 @@ function StatBand({ items, orientation = "column", className, ...rest }) {
 
 // src/components/TestimonialCard/TestimonialCard.tsx
 var import_icons9 = require("@octaviaflow/icons");
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function isAuthorObject(v) {
   return typeof v === "object" && v !== null && !("type" in v) && // exclude React elements
   "name" in v;
 }
-var TestimonialCard = (0, import_react30.forwardRef)(function TestimonialCard2({
+var TestimonialCard = (0, import_react31.forwardRef)(function TestimonialCard2({
   quote,
   author,
   role: legacyRole,
@@ -5261,7 +5389,7 @@ var TestimonialCard = (0, import_react30.forwardRef)(function TestimonialCard2({
   className,
   ...rest
 }, ref) {
-  const reactId = (0, import_react30.useId)();
+  const reactId = (0, import_react31.useId)();
   const baseId = providedId ?? `ods-testimonial-${reactId}`;
   const quoteId = `${baseId}-quote`;
   const authorId = `${baseId}-author`;
@@ -5383,10 +5511,10 @@ function TestimonialStrip({
 
 // src/marketing/components/WorkflowShowcase/WorkflowShowcase.tsx
 var import_framer_motion9 = require("framer-motion");
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/marketing/components/WorkflowShowcase/ShowcaseScene.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function slots(n) {
   return Array.from({ length: n }, (_, i) => 208 + (i - (n - 1) / 2) * 80);
@@ -5459,9 +5587,9 @@ function ShowcaseScene({
   caption,
   onCoreClick
 }) {
-  const [pulse, setPulse] = (0, import_react31.useState)(false);
-  const pulseTimer = (0, import_react31.useRef)(null);
-  (0, import_react31.useEffect)(
+  const [pulse, setPulse] = (0, import_react32.useState)(false);
+  const pulseTimer = (0, import_react32.useRef)(null);
+  (0, import_react32.useEffect)(
     () => () => {
       if (pulseTimer.current) clearTimeout(pulseTimer.current);
     },
@@ -5692,7 +5820,7 @@ function ShowcaseScene({
 
 // src/marketing/components/WorkflowShowcase/ShowcaseSignup.tsx
 var import_framer_motion8 = require("framer-motion");
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_react_aria5 = require("react-aria");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var OVERLAY_MOTION = {
@@ -5712,9 +5840,9 @@ function ShowcaseSignup({
   onboardingHref = "#"
 }) {
   const reducedMotion = (0, import_framer_motion8.useReducedMotion)();
-  const titleId = (0, import_react32.useId)();
-  const subtitleId = (0, import_react32.useId)();
-  const [values, setValues] = (0, import_react32.useState)({
+  const titleId = (0, import_react33.useId)();
+  const subtitleId = (0, import_react33.useId)();
+  const [values, setValues] = (0, import_react33.useState)({
     name: "",
     email: "",
     company: "",
@@ -5932,53 +6060,53 @@ function WorkflowShowcase({
 }) {
   const reducedMotion = (0, import_framer_motion9.useReducedMotion)();
   const rotationActive = rotatePrompts && !defaultPrompt && examples.length > 0;
-  const [prompt, setPrompt] = (0, import_react33.useState)(
+  const [prompt, setPrompt] = (0, import_react34.useState)(
     defaultPrompt || (rotationActive ? examples[0]?.prompt ?? "" : "")
   );
-  const [engagedWithPrompt, setEngagedWithPrompt] = (0, import_react33.useState)(false);
-  const [promptHovered, setPromptHovered] = (0, import_react33.useState)(false);
-  const [promptFocused, setPromptFocused] = (0, import_react33.useState)(false);
-  const rotateIdx = (0, import_react33.useRef)(0);
-  const [selected, setSelected] = (0, import_react33.useState)([]);
-  const [phase, setPhase] = (0, import_react33.useState)("idle");
-  const [shown, setShown] = (0, import_react33.useState)(0);
-  const [status, setStatus] = (0, import_react33.useState)("");
-  const [pickerOpen, setPickerOpen] = (0, import_react33.useState)(false);
-  const [schedIdx, setSchedIdx] = (0, import_react33.useState)(0);
-  const [swap, setSwap] = (0, import_react33.useState)(null);
-  const [signupError, setSignupError] = (0, import_react33.useState)(null);
-  const signupReturnPhase = (0, import_react33.useRef)("done");
-  const cardRef = (0, import_react33.useRef)(null);
-  const timers = (0, import_react33.useRef)([]);
-  const clearTimers = (0, import_react33.useCallback)(() => {
+  const [engagedWithPrompt, setEngagedWithPrompt] = (0, import_react34.useState)(false);
+  const [promptHovered, setPromptHovered] = (0, import_react34.useState)(false);
+  const [promptFocused, setPromptFocused] = (0, import_react34.useState)(false);
+  const rotateIdx = (0, import_react34.useRef)(0);
+  const [selected, setSelected] = (0, import_react34.useState)([]);
+  const [phase, setPhase] = (0, import_react34.useState)("idle");
+  const [shown, setShown] = (0, import_react34.useState)(0);
+  const [status, setStatus] = (0, import_react34.useState)("");
+  const [pickerOpen, setPickerOpen] = (0, import_react34.useState)(false);
+  const [schedIdx, setSchedIdx] = (0, import_react34.useState)(0);
+  const [swap, setSwap] = (0, import_react34.useState)(null);
+  const [signupError, setSignupError] = (0, import_react34.useState)(null);
+  const signupReturnPhase = (0, import_react34.useRef)("done");
+  const cardRef = (0, import_react34.useRef)(null);
+  const timers = (0, import_react34.useRef)([]);
+  const clearTimers = (0, import_react34.useCallback)(() => {
     for (const t of timers.current) clearTimeout(t);
     timers.current = [];
   }, []);
-  (0, import_react33.useEffect)(() => clearTimers, [clearTimers]);
+  (0, import_react34.useEffect)(() => clearTimers, [clearTimers]);
   const tempo = reducedMotion ? 0.35 : 1;
-  const at = (0, import_react33.useCallback)(
+  const at = (0, import_react34.useCallback)(
     (ms, fn) => {
       timers.current.push(setTimeout(fn, ms * tempo));
     },
     [tempo]
   );
-  const firstPhase = (0, import_react33.useRef)(true);
-  (0, import_react33.useEffect)(() => {
+  const firstPhase = (0, import_react34.useRef)(true);
+  (0, import_react34.useEffect)(() => {
     if (firstPhase.current) {
       firstPhase.current = false;
       return;
     }
     onPhaseChange?.(phase);
   }, [phase, onPhaseChange]);
-  const phaseRef = (0, import_react33.useRef)(phase);
+  const phaseRef = (0, import_react34.useRef)(phase);
   phaseRef.current = phase;
-  const byName = (0, import_react33.useMemo)(() => new Map(connectors.map((c) => [c.name, c])), [connectors]);
-  const detected = (0, import_react33.useMemo)(() => detectConnectors(prompt, connectors), [prompt, connectors]);
-  const union = (0, import_react33.useMemo)(() => [.../* @__PURE__ */ new Set([...selected, ...detected])], [selected, detected]);
+  const byName = (0, import_react34.useMemo)(() => new Map(connectors.map((c) => [c.name, c])), [connectors]);
+  const detected = (0, import_react34.useMemo)(() => detectConnectors(prompt, connectors), [prompt, connectors]);
+  const union = (0, import_react34.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 = (0, import_react33.useMemo)(() => {
+  const plan = (0, import_react34.useMemo)(() => {
     if (!selected.length) return EMPTY_PLAN;
     return resolvePlan(selected, [], connectors);
   }, [selected, connectors]);
@@ -5987,10 +6115,10 @@ function WorkflowShowcase({
   const manualSchedule = schedules[schedIdx];
   const scheduleShown = inferredSchedule ?? (manualSchedule === "AUTO" ? "HOURLY" : manualSchedule);
   const triggers = WORKFLOW_SHOWCASE_TRIGGERS;
-  const [triggerIdx, setTriggerIdx] = (0, import_react33.useState)(0);
+  const [triggerIdx, setTriggerIdx] = (0, import_react34.useState)(0);
   const manualTrigger = triggers[triggerIdx];
   const cadenceShown = manualTrigger === "SCHEDULE" ? scheduleShown : manualTrigger;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!rotationActive || engagedWithPrompt || promptHovered || promptFocused || phase !== "idle") {
       return;
     }
@@ -6000,7 +6128,7 @@ function WorkflowShowcase({
     }, 4200);
     return () => clearInterval(timer);
   }, [rotationActive, engagedWithPrompt, promptHovered, promptFocused, phase, examples]);
-  const startBuild = (0, import_react33.useCallback)(
+  const startBuild = (0, import_react34.useCallback)(
     (text, baseSelected) => {
       if (phaseRef.current === "analyzing" || phaseRef.current === "building") return;
       phaseRef.current = "analyzing";
@@ -6037,7 +6165,7 @@ function WorkflowShowcase({
     },
     [clearTimers, connectors, onBuild, scheduleShown, manualTrigger, at]
   );
-  const resetToIdle = (0, import_react33.useCallback)(() => {
+  const resetToIdle = (0, import_react34.useCallback)(() => {
     clearTimers();
     phaseRef.current = "idle";
     setPhase("idle");