@meridial/react 0.1.0

package/dist/chunk-VDQAVB4N.js

@@ -0,0 +1,1754 @@
+import {
+  Button,
+  DragHandle,
+  MIN_DESC_LENGTH,
+  STORAGE_KEYS,
+  Separator,
+  apiWorkflowsResponseSchema,
+  cn,
+  generateWorkflowName,
+  useElementTracker,
+  workflowSchema
+} from "./chunk-QCWLFL7O.js";
+
+// src/recorder.tsx
+import { useRef as useRef7, useState as useState7, useCallback as useCallback6, useEffect as useEffect4 } from "react";
+import { useDraggable as useDraggable2 } from "@neodrag/react";
+import { motion as motion3, AnimatePresence as AnimatePresence2 } from "motion/react";
+
+// ../ui/src/components/waveform.tsx
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Waveform = ({
+  active = false,
+  processing = false,
+  deviceId,
+  barWidth = 3,
+  barGap = 1,
+  barRadius = 1.5,
+  barColor,
+  fadeEdges = true,
+  fadeWidth = 24,
+  barHeight: baseBarHeight = 4,
+  height = 64,
+  sensitivity = 1,
+  smoothingTimeConstant = 0.8,
+  fftSize = 256,
+  historySize = 60,
+  updateRate = 30,
+  mode = "static",
+  onError,
+  onStreamReady,
+  onStreamEnd,
+  className,
+  ...props
+}) => {
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const historyRef = useRef([]);
+  const analyserRef = useRef(null);
+  const audioContextRef = useRef(null);
+  const streamRef = useRef(null);
+  const animationRef = useRef(0);
+  const lastUpdateRef = useRef(0);
+  const processingAnimationRef = useRef(null);
+  const lastActiveDataRef = useRef([]);
+  const transitionProgressRef = useRef(0);
+  const staticBarsRef = useRef([]);
+  const needsRedrawRef = useRef(true);
+  const gradientCacheRef = useRef(null);
+  const lastWidthRef = useRef(0);
+  const heightStyle = typeof height === "number" ? `${height}px` : height;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+    const resizeObserver = new ResizeObserver(() => {
+      const rect = container.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = rect.width * dpr;
+      canvas.height = rect.height * dpr;
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${rect.height}px`;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.scale(dpr, dpr);
+      }
+      gradientCacheRef.current = null;
+      lastWidthRef.current = rect.width;
+      needsRedrawRef.current = true;
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, []);
+  useEffect(() => {
+    if (processing && !active) {
+      let time = 0;
+      transitionProgressRef.current = 0;
+      const animateProcessing = () => {
+        time += 0.03;
+        transitionProgressRef.current = Math.min(
+          1,
+          transitionProgressRef.current + 0.02
+        );
+        const processingData = [];
+        const barCount = Math.floor(
+          (containerRef.current?.getBoundingClientRect().width || 200) / (barWidth + barGap)
+        );
+        if (mode === "static") {
+          const halfCount = Math.floor(barCount / 2);
+          for (let i = 0; i < barCount; i++) {
+            const normalizedPosition = (i - halfCount) / halfCount;
+            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4;
+            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25;
+            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2;
+            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15;
+            const combinedWave = wave1 + wave2 + wave3;
+            const processingValue = (0.2 + combinedWave) * centerWeight;
+            let finalValue = processingValue;
+            if (lastActiveDataRef.current.length > 0 && transitionProgressRef.current < 1) {
+              const lastDataIndex = Math.min(
+                i,
+                lastActiveDataRef.current.length - 1
+              );
+              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0;
+              finalValue = lastValue * (1 - transitionProgressRef.current) + processingValue * transitionProgressRef.current;
+            }
+            processingData.push(Math.max(0.05, Math.min(1, finalValue)));
+          }
+        } else {
+          for (let i = 0; i < barCount; i++) {
+            const normalizedPosition = (i - barCount / 2) / (barCount / 2);
+            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4;
+            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25;
+            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2;
+            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15;
+            const combinedWave = wave1 + wave2 + wave3;
+            const processingValue = (0.2 + combinedWave) * centerWeight;
+            let finalValue = processingValue;
+            if (lastActiveDataRef.current.length > 0 && transitionProgressRef.current < 1) {
+              const lastDataIndex = Math.floor(
+                i / barCount * lastActiveDataRef.current.length
+              );
+              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0;
+              finalValue = lastValue * (1 - transitionProgressRef.current) + processingValue * transitionProgressRef.current;
+            }
+            processingData.push(Math.max(0.05, Math.min(1, finalValue)));
+          }
+        }
+        if (mode === "static") {
+          staticBarsRef.current = processingData;
+        } else {
+          historyRef.current = processingData;
+        }
+        needsRedrawRef.current = true;
+        processingAnimationRef.current = requestAnimationFrame(animateProcessing);
+      };
+      animateProcessing();
+      return () => {
+        if (processingAnimationRef.current) {
+          cancelAnimationFrame(processingAnimationRef.current);
+        }
+      };
+    } else if (!active && !processing) {
+      const hasData = mode === "static" ? staticBarsRef.current.length > 0 : historyRef.current.length > 0;
+      if (hasData) {
+        let fadeProgress = 0;
+        const fadeToIdle = () => {
+          fadeProgress += 0.03;
+          if (fadeProgress < 1) {
+            if (mode === "static") {
+              staticBarsRef.current = staticBarsRef.current.map(
+                (value) => value * (1 - fadeProgress)
+              );
+            } else {
+              historyRef.current = historyRef.current.map(
+                (value) => value * (1 - fadeProgress)
+              );
+            }
+            needsRedrawRef.current = true;
+            requestAnimationFrame(fadeToIdle);
+          } else {
+            if (mode === "static") {
+              staticBarsRef.current = [];
+            } else {
+              historyRef.current = [];
+            }
+          }
+        };
+        fadeToIdle();
+      }
+    }
+  }, [processing, active, barWidth, barGap, mode]);
+  useEffect(() => {
+    if (!active) {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+        onStreamEnd?.();
+      }
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close();
+        audioContextRef.current = null;
+      }
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = 0;
+      }
+      return;
+    }
+    const setupMicrophone = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: deviceId ? {
+            deviceId: { exact: deviceId },
+            echoCancellation: true,
+            noiseSuppression: true,
+            autoGainControl: true
+          } : {
+            echoCancellation: true,
+            noiseSuppression: true,
+            autoGainControl: true
+          }
+        });
+        streamRef.current = stream;
+        onStreamReady?.(stream);
+        const AudioContextConstructor = window.AudioContext || window.webkitAudioContext;
+        const audioContext = new AudioContextConstructor();
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = fftSize;
+        analyser.smoothingTimeConstant = smoothingTimeConstant;
+        const source = audioContext.createMediaStreamSource(stream);
+        source.connect(analyser);
+        audioContextRef.current = audioContext;
+        analyserRef.current = analyser;
+        historyRef.current = [];
+      } catch (error) {
+        onError?.(error);
+      }
+    };
+    setupMicrophone();
+    return () => {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+        onStreamEnd?.();
+      }
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close();
+        audioContextRef.current = null;
+      }
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = 0;
+      }
+    };
+  }, [
+    active,
+    deviceId,
+    fftSize,
+    smoothingTimeConstant,
+    onError,
+    onStreamReady,
+    onStreamEnd
+  ]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let rafId;
+    const animate = (currentTime) => {
+      const rect = canvas.getBoundingClientRect();
+      if (active && currentTime - lastUpdateRef.current > updateRate) {
+        lastUpdateRef.current = currentTime;
+        if (analyserRef.current) {
+          const dataArray = new Uint8Array(
+            analyserRef.current.frequencyBinCount
+          );
+          analyserRef.current.getByteFrequencyData(dataArray);
+          if (mode === "static") {
+            const startFreq = Math.floor(dataArray.length * 0.05);
+            const endFreq = Math.floor(dataArray.length * 0.4);
+            const relevantData = dataArray.slice(startFreq, endFreq);
+            const barCount2 = Math.floor(rect.width / (barWidth + barGap));
+            const halfCount = Math.floor(barCount2 / 2);
+            const newBars = [];
+            for (let i = halfCount - 1; i >= 0; i--) {
+              const dataIndex = Math.floor(
+                i / halfCount * relevantData.length
+              );
+              const source = relevantData[dataIndex] ?? 0;
+              const value = Math.min(1, source / 255 * sensitivity);
+              newBars.push(Math.max(0.05, value));
+            }
+            for (let i = 0; i < halfCount; i++) {
+              const dataIndex = Math.floor(
+                i / halfCount * relevantData.length
+              );
+              const source = relevantData[dataIndex] ?? 0;
+              const value = Math.min(1, source / 255 * sensitivity);
+              newBars.push(Math.max(0.05, value));
+            }
+            staticBarsRef.current = newBars;
+            lastActiveDataRef.current = newBars;
+          } else {
+            let sum = 0;
+            const startFreq = Math.floor(dataArray.length * 0.05);
+            const endFreq = Math.floor(dataArray.length * 0.4);
+            const relevantData = dataArray.slice(startFreq, endFreq);
+            for (let i = 0; i < relevantData.length; i++) {
+              const sample = relevantData[i] ?? 0;
+              sum += sample;
+            }
+            const average = sum / (relevantData.length || 1) / 255 * sensitivity;
+            historyRef.current.push(Math.min(1, Math.max(0.05, average)));
+            lastActiveDataRef.current = [...historyRef.current];
+            if (historyRef.current.length > historySize) {
+              historyRef.current.shift();
+            }
+          }
+          needsRedrawRef.current = true;
+        }
+      }
+      if (!needsRedrawRef.current && !active) {
+        rafId = requestAnimationFrame(animate);
+        return;
+      }
+      needsRedrawRef.current = active;
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      const computedBarColor = barColor || (() => {
+        const style = getComputedStyle(canvas);
+        const color = style.color;
+        return color || "#000";
+      })();
+      const step = barWidth + barGap;
+      const barCount = Math.floor(rect.width / step);
+      const centerY = rect.height / 2;
+      if (mode === "static") {
+        const dataToRender = processing ? staticBarsRef.current : active ? staticBarsRef.current : staticBarsRef.current.length > 0 ? staticBarsRef.current : [];
+        for (let i = 0; i < barCount && i < dataToRender.length; i++) {
+          const value = dataToRender[i] || 0.1;
+          const x = i * step;
+          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8);
+          const y = centerY - barHeight / 2;
+          ctx.fillStyle = computedBarColor;
+          ctx.globalAlpha = 0.4 + value * 0.6;
+          if (barRadius > 0) {
+            ctx.beginPath();
+            ctx.roundRect(x, y, barWidth, barHeight, barRadius);
+            ctx.fill();
+          } else {
+            ctx.fillRect(x, y, barWidth, barHeight);
+          }
+        }
+      } else {
+        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {
+          const dataIndex = historyRef.current.length - 1 - i;
+          const value = historyRef.current[dataIndex] || 0.1;
+          const x = rect.width - (i + 1) * step;
+          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8);
+          const y = centerY - barHeight / 2;
+          ctx.fillStyle = computedBarColor;
+          ctx.globalAlpha = 0.4 + value * 0.6;
+          if (barRadius > 0) {
+            ctx.beginPath();
+            ctx.roundRect(x, y, barWidth, barHeight, barRadius);
+            ctx.fill();
+          } else {
+            ctx.fillRect(x, y, barWidth, barHeight);
+          }
+        }
+      }
+      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {
+        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {
+          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0);
+          const fadePercent = Math.min(0.3, fadeWidth / rect.width);
+          gradient.addColorStop(0, "rgba(255,255,255,1)");
+          gradient.addColorStop(fadePercent, "rgba(255,255,255,0)");
+          gradient.addColorStop(1 - fadePercent, "rgba(255,255,255,0)");
+          gradient.addColorStop(1, "rgba(255,255,255,1)");
+          gradientCacheRef.current = gradient;
+          lastWidthRef.current = rect.width;
+        }
+        ctx.globalCompositeOperation = "destination-out";
+        ctx.fillStyle = gradientCacheRef.current;
+        ctx.fillRect(0, 0, rect.width, rect.height);
+        ctx.globalCompositeOperation = "source-over";
+      }
+      ctx.globalAlpha = 1;
+      rafId = requestAnimationFrame(animate);
+    };
+    rafId = requestAnimationFrame(animate);
+    return () => {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [
+    active,
+    processing,
+    sensitivity,
+    updateRate,
+    historySize,
+    barWidth,
+    baseBarHeight,
+    barGap,
+    barRadius,
+    barColor,
+    fadeEdges,
+    fadeWidth,
+    mode
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative h-full w-full", className),
+      ref: containerRef,
+      style: { height: heightStyle },
+      "aria-label": active ? "Live audio waveform" : processing ? "Processing audio" : "Audio waveform idle",
+      role: "img",
+      ...props,
+      children: [
+        !active && !processing && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted border-muted-foreground/20" }),
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            className: "block h-full w-full",
+            ref: canvasRef,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/hooks/use-recorder-state.ts
+import { useReducer } from "react";
+function recorderReducer(state, action) {
+  switch (action.type) {
+    case "START_RECORDING":
+      return { status: "recording", stepCount: 0, startTime: Date.now() };
+    case "STEP_CAPTURED":
+      if (state.status === "recording") {
+        return { ...state, stepCount: state.stepCount + 1 };
+      }
+      return state;
+    case "PAUSE":
+      if (state.status === "recording") {
+        return { status: "paused", stepCount: state.stepCount };
+      }
+      return state;
+    case "RESUME":
+      if (state.status === "paused") {
+        return {
+          status: "recording",
+          stepCount: state.stepCount,
+          startTime: Date.now()
+        };
+      }
+      return state;
+    case "SAVE":
+      if (state.status === "paused") {
+        return { status: "saving" };
+      }
+      return state;
+    case "SAVE_COMPLETE":
+      return { status: "idle" };
+    default:
+      return state;
+  }
+}
+var initialState = { status: "idle" };
+function useRecorderState() {
+  return useReducer(recorderReducer, initialState);
+}
+
+// src/hooks/use-audio-recorder.ts
+import { useRef as useRef2, useState, useCallback } from "react";
+function useAudioRecorder() {
+  const mediaRecorderRef = useRef2(null);
+  const chunksRef = useRef2([]);
+  const [audioBlob, setAudioBlob] = useState(null);
+  const start = useCallback((stream) => {
+    chunksRef.current = [];
+    setAudioBlob(null);
+    const recorder = new MediaRecorder(stream);
+    recorder.ondataavailable = (e) => {
+      if (e.data.size > 0) {
+        chunksRef.current.push(e.data);
+      }
+    };
+    recorder.onstop = () => {
+      const blob = new Blob(chunksRef.current, { type: "audio/webm" });
+      setAudioBlob(blob);
+    };
+    recorder.start();
+    mediaRecorderRef.current = recorder;
+  }, []);
+  const stop = useCallback(() => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.stop();
+    }
+  }, []);
+  const pause = useCallback(() => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state === "recording") {
+      mediaRecorderRef.current.pause();
+    }
+  }, []);
+  const resume = useCallback(() => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state === "paused") {
+      mediaRecorderRef.current.resume();
+    }
+  }, []);
+  return { start, stop, pause, resume, audioBlob };
+}
+
+// src/hooks/use-click-capture.ts
+import { useEffect as useEffect2, useCallback as useCallback2 } from "react";
+function getStableElementId(el) {
+  const meridialId = el.getAttribute("data-meridial-id");
+  if (meridialId) return `[data-meridial-id="${meridialId}"]`;
+  if (el.id) return `#${el.id}`;
+  return getCssPath(el);
+}
+function getCssPath(el) {
+  const parts = [];
+  let current = el;
+  while (current && current !== document.body) {
+    let selector = current.tagName.toLowerCase();
+    if (current.id) {
+      parts.unshift(`#${current.id}`);
+      break;
+    }
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (child) => child.tagName === current.tagName
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        selector += `:nth-of-type(${index})`;
+      }
+    }
+    parts.unshift(selector);
+    current = current.parentElement;
+  }
+  return parts.join(" > ");
+}
+function getElementLabel(el) {
+  const ariaLabel = el.getAttribute("aria-label");
+  if (ariaLabel) return ariaLabel;
+  const placeholder = el.getAttribute("placeholder");
+  if (placeholder) return placeholder;
+  const text = el.innerText?.trim();
+  if (text && text.length <= 50) return text;
+  const tag = el.tagName.toLowerCase();
+  return el.id ? `${tag}#${el.id}` : tag;
+}
+function useClickCapture({
+  enabled,
+  onCapture
+}) {
+  const handleClick = useCallback2(
+    (e) => {
+      const target = e.target;
+      if (!target || target.closest("[data-meridial-ui]")) return;
+      const el = target.closest("[data-meridial-id]") ?? target;
+      const elementId = getStableElementId(el);
+      const elementLabel = getElementLabel(el);
+      const urlPath = window.location.pathname + window.location.search;
+      onCapture({ elementId, elementLabel, urlPath, description: "" });
+    },
+    [onCapture]
+  );
+  useEffect2(() => {
+    if (!enabled) return;
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, [enabled, handleClick]);
+}
+
+// src/hooks/use-workflows.ts
+import { useState as useState2, useCallback as useCallback3, useMemo } from "react";
+
+// src/storage.ts
+import { z } from "zod";
+var workflowsArraySchema = z.array(workflowSchema);
+var isBrowser = typeof window !== "undefined";
+function loadWorkflows() {
+  if (!isBrowser) return [];
+  try {
+    const raw = localStorage.getItem(STORAGE_KEYS.workflows);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    const result = workflowsArraySchema.safeParse(parsed);
+    if (!result.success) {
+      if (Array.isArray(parsed)) {
+        const valid = parsed.filter(
+          (item) => workflowSchema.safeParse(item).success
+        );
+        const validWorkflows = valid.map((item) => workflowSchema.parse(item));
+        saveWorkflows(validWorkflows);
+        return validWorkflows;
+      }
+      localStorage.removeItem(STORAGE_KEYS.workflows);
+      return [];
+    }
+    return result.data;
+  } catch {
+    localStorage.removeItem(STORAGE_KEYS.workflows);
+    return [];
+  }
+}
+function saveWorkflows(workflows) {
+  if (!isBrowser) return;
+  localStorage.setItem(STORAGE_KEYS.workflows, JSON.stringify(workflows));
+}
+function addWorkflow(workflow) {
+  const workflows = loadWorkflows();
+  workflows.push(workflow);
+  saveWorkflows(workflows);
+}
+function updateWorkflow(id, updates) {
+  const workflows = loadWorkflows();
+  const index = workflows.findIndex((w) => w.id === id);
+  if (index !== -1) {
+    workflows[index] = { ...workflows[index], ...updates };
+    saveWorkflows(workflows);
+  }
+}
+function deleteWorkflow(id) {
+  const workflows = loadWorkflows().filter((w) => w.id !== id);
+  saveWorkflows(workflows);
+}
+function getWorkflow(id) {
+  return loadWorkflows().find((w) => w.id === id);
+}
+var DB_NAME = "meridial";
+var AUDIO_STORE = "audio";
+var DB_VERSION = 1;
+function openDB() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(AUDIO_STORE)) {
+        db.createObjectStore(AUDIO_STORE);
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+async function saveAudio(key, blob) {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(AUDIO_STORE, "readwrite");
+    tx.objectStore(AUDIO_STORE).put(blob, key);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+async function loadAudio(key) {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(AUDIO_STORE, "readonly");
+    const request = tx.objectStore(AUDIO_STORE).get(key);
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+async function deleteAudio(key) {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(AUDIO_STORE, "readwrite");
+    tx.objectStore(AUDIO_STORE).delete(key);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+// src/hooks/use-workflows.ts
+var PAGE_SIZE = 5;
+function useWorkflows() {
+  const [workflows, setWorkflows] = useState2(
+    () => loadWorkflows()
+  );
+  const [visibleCount, setVisibleCount] = useState2(PAGE_SIZE);
+  const sorted = useMemo(() => {
+    const unconfigured = workflows.filter((w) => !w.configured);
+    const configured = workflows.filter((w) => w.configured);
+    return [...unconfigured, ...configured];
+  }, [workflows]);
+  const hasUnconfigured = useMemo(
+    () => workflows.some((w) => !w.configured),
+    [workflows]
+  );
+  const visibleWorkflows = useMemo(
+    () => sorted.slice(0, visibleCount),
+    [sorted, visibleCount]
+  );
+  const hasMore = sorted.length > visibleCount;
+  const remainingCount = sorted.length - visibleCount;
+  const loadMore = useCallback3(() => {
+    setVisibleCount((c) => c + PAGE_SIZE);
+  }, []);
+  const refresh = useCallback3(() => {
+    setWorkflows(loadWorkflows());
+  }, []);
+  const addWorkflow2 = useCallback3((workflow) => {
+    addWorkflow(workflow);
+    setWorkflows(loadWorkflows());
+  }, []);
+  const updateWorkflow2 = useCallback3(
+    (id, updates) => {
+      updateWorkflow(id, updates);
+      setWorkflows(loadWorkflows());
+    },
+    []
+  );
+  const deleteWorkflow2 = useCallback3((id) => {
+    deleteWorkflow(id);
+    setWorkflows(loadWorkflows());
+  }, []);
+  const getWorkflow2 = useCallback3((id) => {
+    return getWorkflow(id);
+  }, []);
+  return {
+    workflows,
+    hasUnconfigured,
+    visibleWorkflows,
+    loadMore,
+    hasMore,
+    remainingCount,
+    addWorkflow: addWorkflow2,
+    updateWorkflow: updateWorkflow2,
+    deleteWorkflow: deleteWorkflow2,
+    getWorkflow: getWorkflow2,
+    refresh
+  };
+}
+
+// src/components/action-button.tsx
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+  ArrowDown01Icon,
+  Alert01Icon,
+  StopIcon,
+  PlayIcon,
+  Loading03Icon
+} from "@hugeicons/core-free-icons";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ActionButton({
+  state,
+  openPanel,
+  hasUnconfigured,
+  onClick
+}) {
+  let icon = ArrowDown01Icon;
+  let className = "text-muted-foreground";
+  let spin = false;
+  if (state.status === "idle") {
+    if (hasUnconfigured) {
+      icon = Alert01Icon;
+      className = "text-amber-500 fill-amber-500/20";
+    } else {
+      icon = ArrowDown01Icon;
+      className = cn(
+        "fill-none text-muted-foreground transition-transform duration-200",
+        openPanel ? "rotate-180" : "rotate-0"
+      );
+    }
+  } else if (state.status === "recording") {
+    icon = StopIcon;
+    className = "text-red-500 fill-destructive/50";
+  } else if (state.status === "paused") {
+    icon = PlayIcon;
+    className = "text-emerald-500 fill-emerald-500/20";
+  } else if (state.status === "saving") {
+    icon = Loading03Icon;
+    className = "text-muted-foreground";
+    spin = true;
+  }
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      "data-meridial-ui": true,
+      onClick,
+      disabled: state.status === "saving",
+      className: cn("flex items-center justify-center px-2.5", className, {
+        "cursor-not-allowed": state.status === "saving",
+        "cursor-pointer hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50": state.status !== "saving"
+      }),
+      children: /* @__PURE__ */ jsx2(
+        HugeiconsIcon,
+        {
+          icon,
+          size: 18,
+          className: spin ? "animate-spin" : "",
+          fill: className
+        }
+      )
+    }
+  );
+}
+
+// src/components/step-badge.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function StepBadge({ count }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-meridial-ui": true,
+      className: "absolute right-1 bottom-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-foreground px-1 text-xs font-medium text-background",
+      children: count
+    }
+  );
+}
+
+// src/components/workflow-row.tsx
+import { useState as useState3, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { HugeiconsIcon as HugeiconsIcon2 } from "@hugeicons/react";
+import {
+  Alert01Icon as Alert01Icon2,
+  CheckmarkCircle02Icon,
+  Delete01Icon,
+  Settings01Icon
+} from "@hugeicons/core-free-icons";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function WorkflowRow({
+  workflow,
+  onRename,
+  onDelete,
+  onConfigure
+}) {
+  const [editing, setEditing] = useState3(false);
+  const [name, setName] = useState3(workflow.name);
+  const inputRef = useRef3(null);
+  useEffect3(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing]);
+  const commitRename = () => {
+    const trimmed = name.trim();
+    if (trimmed && trimmed !== workflow.name) {
+      onRename(workflow.id, trimmed);
+    } else {
+      setName(workflow.name);
+    }
+    setEditing(false);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-meridial-ui": true,
+      className: "flex items-center gap-2 px-3 py-2 hover:bg-muted/50",
+      children: [
+        /* @__PURE__ */ jsx4(
+          HugeiconsIcon2,
+          {
+            icon: workflow.configured ? CheckmarkCircle02Icon : Alert01Icon2,
+            size: 16,
+            className: workflow.configured ? "shrink-0 fill-green-500/20 text-green-500" : "shrink-0 fill-amber-500/20 text-amber-500"
+          }
+        ),
+        editing ? /* @__PURE__ */ jsx4(
+          "input",
+          {
+            ref: inputRef,
+            "data-meridial-ui": true,
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            onBlur: commitRename,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") commitRename();
+              if (e.key === "Escape") {
+                setName(workflow.name);
+                setEditing(false);
+              }
+            },
+            className: "min-w-0 flex-1 rounded border border-border bg-background px-1.5 py-0.5 text-sm outline-none"
+          }
+        ) : /* @__PURE__ */ jsx4(
+          "button",
+          {
+            "data-meridial-ui": true,
+            onClick: () => {
+              if (workflow.configured) return;
+              setEditing(true);
+            },
+            className: "min-w-0 flex-1 cursor-pointer truncate text-left text-sm",
+            children: workflow.name
+          }
+        ),
+        !workflow.configured && /* @__PURE__ */ jsx4(
+          "button",
+          {
+            "data-meridial-ui": true,
+            onClick: () => onDelete(workflow.id),
+            className: "shrink-0 cursor-pointer p-0.5 text-muted-foreground hover:text-destructive",
+            children: /* @__PURE__ */ jsx4(HugeiconsIcon2, { icon: Delete01Icon, size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            "data-meridial-ui": true,
+            onClick: () => onConfigure(workflow.id),
+            className: cn(
+              "shrink-0 cursor-pointer p-0.5",
+              workflow.configured ? "text-muted-foreground hover:text-foreground" : "text-amber-500 hover:text-amber-500/80"
+            ),
+            children: /* @__PURE__ */ jsx4(HugeiconsIcon2, { icon: Settings01Icon, size: 14 })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/workflow-list-panel.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function WorkflowListPanel({
+  workflows,
+  hasMore,
+  remainingCount,
+  onLoadMore,
+  onRename,
+  onDelete,
+  onConfigure
+}) {
+  return /* @__PURE__ */ jsx5("div", { "data-meridial-ui": true, className: "max-h-60 overflow-y-auto border-b bg-card", children: workflows.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No workflow recorded" }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+    workflows.map((w) => /* @__PURE__ */ jsx5(
+      WorkflowRow,
+      {
+        workflow: w,
+        onRename,
+        onDelete,
+        onConfigure
+      },
+      w.id
+    )),
+    hasMore && /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        "data-meridial-ui": true,
+        onClick: onLoadMore,
+        className: "w-full cursor-pointer px-3 py-2 text-center text-sm text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+        children: [
+          remainingCount,
+          " More\u2026"
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/workflow-editor.tsx
+import { useRef as useRef6, useState as useState6, useCallback as useCallback5 } from "react";
+import {
+  MultiplicationSignIcon,
+  Cursor02Icon,
+  ArrowLeft01Icon,
+  ArrowRight01Icon,
+  Loading03Icon as Loading03Icon2,
+  Tick01Icon
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react";
+import { createPortal as createPortal2 } from "react-dom";
+import { useDraggable } from "@neodrag/react";
+
+// src/hooks/use-position.ts
+import { useState as useState4, useCallback as useCallback4 } from "react";
+function usePosition(storageKey, defaultPos = { x: 0, y: 0 }) {
+  const [position] = useState4(() => {
+    if (typeof window === "undefined") return defaultPos;
+    try {
+      const raw = localStorage.getItem(storageKey);
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (typeof parsed.x === "number" && typeof parsed.y === "number") {
+          return parsed;
+        }
+      }
+    } catch {
+    }
+    return defaultPos;
+  });
+  const updatePosition = useCallback4(
+    (pos) => {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(pos));
+      } catch {
+      }
+    },
+    [storageKey]
+  );
+  return { position, updatePosition };
+}
+
+// src/components/cursor-guide.tsx
+import { useRef as useRef4 } from "react";
+import { createPortal } from "react-dom";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  AnimatePresence
+} from "motion/react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SPRING_CONFIG = { stiffness: 120, damping: 20, mass: 0.8 };
+var OFFSET = -16;
+function CursorGuide({
+  selector,
+  urlPath,
+  children,
+  onError,
+  onClick
+}) {
+  const { rect } = useElementTracker({
+    selector,
+    urlPath,
+    onError: onError ? (msg) => {
+      if (msg !== null) onError(msg);
+    } : void 0,
+    onClick
+  });
+  const hasAnimated = useRef4(false);
+  const springX = useSpring(useMotionValue(0), SPRING_CONFIG);
+  const springY = useSpring(useMotionValue(0), SPRING_CONFIG);
+  if (rect) {
+    const targetX = rect.right + OFFSET;
+    const targetY = rect.bottom + OFFSET;
+    if (!hasAnimated.current) {
+      springX.jump(targetX);
+      springY.jump(targetY);
+      hasAnimated.current = true;
+    } else {
+      springX.set(targetX);
+      springY.set(targetY);
+    }
+  } else {
+    hasAnimated.current = false;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx6(AnimatePresence, { children: rect && /* @__PURE__ */ jsx6(
+      motion.div,
+      {
+        "data-meridial-ui": true,
+        className: "pointer-events-none fixed z-[99999]",
+        style: { top: springY, left: springX },
+        initial: { opacity: 0, scale: 0.6 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.6 },
+        transition: { duration: 0.2 },
+        children
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/components/delete-step-button.tsx
+import { useRef as useRef5, useState as useState5 } from "react";
+import { motion as motion2, useAnimation } from "motion/react";
+import { HugeiconsIcon as HugeiconsIcon3 } from "@hugeicons/react";
+import { Delete01Icon as Delete01Icon2 } from "@hugeicons/core-free-icons";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function DeleteStepButton({
+  holdDuration = 3e3,
+  onConfirm
+}) {
+  const [isHolding, setIsHolding] = useState5(false);
+  const controls = useAnimation();
+  const holdingRef = useRef5(false);
+  async function handleHoldStart() {
+    holdingRef.current = true;
+    setIsHolding(true);
+    controls.set({ width: "5%" });
+    await controls.start({
+      width: "100%",
+      transition: {
+        duration: holdDuration / 1e3,
+        ease: "linear"
+      }
+    });
+    if (holdingRef.current) {
+      holdingRef.current = false;
+      setIsHolding(false);
+      onConfirm();
+    }
+  }
+  function handleHoldEnd() {
+    holdingRef.current = false;
+    setIsHolding(false);
+    controls.stop();
+    controls.start({
+      width: "0%",
+      transition: { duration: 0.1 }
+    });
+  }
+  return /* @__PURE__ */ jsxs4(
+    Button,
+    {
+      type: "button",
+      onMouseDown: handleHoldStart,
+      onMouseLeave: handleHoldEnd,
+      onMouseUp: handleHoldEnd,
+      onTouchCancel: handleHoldEnd,
+      onTouchEnd: handleHoldEnd,
+      onTouchStart: handleHoldStart,
+      variant: "destructive",
+      className: "relative w-42",
+      children: [
+        /* @__PURE__ */ jsx7(
+          motion2.div,
+          {
+            animate: controls,
+            className: "absolute top-0 left-0 h-full rounded-tl-lg rounded-bl-lg bg-red-200/40 dark:bg-red-300/40",
+            initial: { width: "0%" }
+          }
+        ),
+        /* @__PURE__ */ jsxs4("span", { className: "relative z-10 flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx7(HugeiconsIcon3, { icon: Delete01Icon2, size: 14 }),
+          isHolding ? "Release to cancel" : "Hold to delete"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/workflow-editor.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function WorkflowEditor({
+  baseUrl = "",
+  workflowId,
+  workflow: workflowProp,
+  publishableKey,
+  cursor,
+  onClose,
+  onWorkflowDeleted,
+  onError
+}) {
+  const draggableRef = useRef6(null);
+  const { position, updatePosition } = usePosition(STORAGE_KEYS.editorPos);
+  useDraggable(draggableRef, {
+    handle: "[data-meridial-drag-handle]",
+    defaultPosition: position,
+    onDragEnd: ({ offsetX, offsetY }) => {
+      updatePosition({ x: offsetX, y: offsetY });
+    }
+  });
+  const [workflowState, setWorkflowState] = useState6(
+    () => workflowProp ?? getWorkflow(workflowId) ?? null
+  );
+  const isConfigured = workflowState?.configured ?? false;
+  const initialDescriptions = (() => {
+    if (!workflowState) return {};
+    const map = {};
+    for (const step of workflowState.steps) {
+      map[step.id] = step.description;
+    }
+    return map;
+  })();
+  const originalDescriptions = useRef6(initialDescriptions);
+  const [currentIndex, setCurrentIndex] = useState6(0);
+  const [descriptions, setDescriptions] = useState6(initialDescriptions);
+  const [saving, setSaving] = useState6(false);
+  const [savingChanges, setSavingChanges] = useState6(false);
+  const steps = workflowState?.steps ?? [];
+  const currentStep = steps[currentIndex];
+  const currentDesc = currentStep ? descriptions[currentStep.id] ?? "" : "";
+  const completedCount = steps.filter(
+    (s) => (descriptions[s.id] ?? "").length >= MIN_DESC_LENGTH
+  ).length;
+  const hasChanges = isConfigured && steps.some(
+    (s) => (descriptions[s.id] ?? "") !== (originalDescriptions.current[s.id] ?? "")
+  );
+  const updateDescription = useCallback5(
+    (value) => {
+      if (!currentStep) return;
+      setDescriptions((prev) => ({ ...prev, [currentStep.id]: value }));
+    },
+    [currentStep]
+  );
+  const handleDeleteStep = useCallback5(async () => {
+    if (!workflowState || !currentStep) return;
+    if (isConfigured && publishableKey) {
+      try {
+        const res = await fetch(
+          `${baseUrl}/api/workflows/${workflowState.id}`,
+          {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${publishableKey}`
+            },
+            body: JSON.stringify({ deleteStepId: currentStep.id })
+          }
+        );
+        if (!res.ok) {
+          const data2 = await res.json().catch(() => ({}));
+          throw new Error(data2?.error || `Failed (${res.status})`);
+        }
+        const data = await res.json();
+        if (data.deleted) {
+          onWorkflowDeleted(workflowState.id);
+          onClose();
+          return;
+        }
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        onError?.(msg);
+        return;
+      }
+    } else {
+      if (workflowState.steps.length === 1) {
+        deleteWorkflow(workflowState.id);
+        if (workflowState.audioKey) {
+          deleteAudio(workflowState.audioKey).catch(() => {
+          });
+        }
+        onWorkflowDeleted(workflowState.id);
+        onClose();
+        return;
+      }
+      updateWorkflow(workflowState.id, {
+        steps: workflowState.steps.filter((s) => s.id !== currentStep.id)
+      });
+    }
+    const newSteps = workflowState.steps.filter((s) => s.id !== currentStep.id);
+    setWorkflowState({ ...workflowState, steps: newSteps });
+    setCurrentIndex((prev) => Math.min(prev, newSteps.length - 1));
+  }, [
+    workflowState,
+    currentStep,
+    isConfigured,
+    publishableKey,
+    onClose,
+    onWorkflowDeleted
+  ]);
+  const handleSaveChanges = useCallback5(async () => {
+    if (!workflowState || !publishableKey || !isConfigured) return;
+    setSavingChanges(true);
+    try {
+      const updatedSteps = steps.map((s) => ({
+        ...s,
+        description: descriptions[s.id] ?? s.description
+      }));
+      const res = await fetch(`${baseUrl}/api/workflows/${workflowState.id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${publishableKey}`
+        },
+        body: JSON.stringify({ steps: updatedSteps })
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data?.error || `Failed (${res.status})`);
+      }
+      setWorkflowState({ ...workflowState, steps: updatedSteps });
+      const newBaseline = {};
+      for (const s of updatedSteps) {
+        newBaseline[s.id] = s.description;
+      }
+      originalDescriptions.current = newBaseline;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      onError?.(msg);
+    } finally {
+      setSavingChanges(false);
+    }
+  }, [workflowState, publishableKey, isConfigured, steps, descriptions]);
+  const handleBack = useCallback5(() => {
+    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  }, []);
+  const uploadAndFinish = useCallback5(async () => {
+    const wf = workflowState;
+    const finalSteps = steps.map((s) => ({
+      ...s,
+      description: descriptions[s.id] ?? s.description
+    }));
+    const finish = () => {
+      deleteWorkflow(wf.id);
+      if (wf.audioKey) {
+        deleteAudio(wf.audioKey).catch(() => {
+        });
+      }
+      onWorkflowDeleted(wf.id);
+      setTimeout(() => {
+        setSaving(false);
+        onClose();
+      }, 300);
+    };
+    if (publishableKey && wf.audioKey) {
+      try {
+        const audioBlob = await loadAudio(wf.audioKey);
+        const presignRes = await fetch(`${baseUrl}/api/upload/presigned-url`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${publishableKey}`
+          },
+          body: JSON.stringify({ workflowId: wf.id })
+        });
+        if (!presignRes.ok) {
+          throw new Error(
+            `[Meridial] Failed to get presigned URL (status ${presignRes.status})`
+          );
+        }
+        const { uploadUrl } = await presignRes.json();
+        if (audioBlob) {
+          const uploadRes = await fetch(uploadUrl, {
+            method: "PUT",
+            headers: { "Content-Type": "audio/webm" },
+            body: audioBlob
+          });
+          if (!uploadRes.ok) {
+            throw new Error(
+              `[Meridial] Failed to upload audio blob (status ${uploadRes.status})`
+            );
+          }
+        }
+        await fetch(`${baseUrl}/api/upload/complete`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${publishableKey}`
+          },
+          body: JSON.stringify({
+            workflowId: wf.id,
+            name: wf.name,
+            description: "",
+            steps: finalSteps
+          })
+        });
+        finish();
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        onError?.(msg);
+        setSaving(false);
+      }
+    } else {
+      finish();
+    }
+  }, [
+    workflowState,
+    steps,
+    descriptions,
+    publishableKey,
+    onClose,
+    onWorkflowDeleted,
+    baseUrl
+  ]);
+  const handleNext = useCallback5(() => {
+    const isLast = currentIndex === steps.length - 1;
+    if (!isLast) {
+      setCurrentIndex((prev) => prev + 1);
+      return;
+    }
+    if (isConfigured) {
+      onClose();
+      return;
+    }
+    setSaving(true);
+    uploadAndFinish();
+  }, [isConfigured, currentIndex, steps, uploadAndFinish, onClose]);
+  if (!workflowState || !currentStep) return null;
+  const isLastStep = currentIndex === steps.length - 1;
+  const canAdvance = currentDesc.length >= MIN_DESC_LENGTH;
+  const allConfigured = completedCount === steps.length && steps.length > 0;
+  const isConfiguredSaveMode = isConfigured && hasChanges;
+  const primaryDisabled = isConfiguredSaveMode ? savingChanges : isLastStep ? isConfigured ? false : !allConfigured || saving : !canAdvance;
+  const primaryAction = isConfiguredSaveMode ? handleSaveChanges : handleNext;
+  return createPortal2(
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: draggableRef,
+        "data-meridial-ui": true,
+        className: "group fixed bottom-4 left-1/2 z-[99998] w-[500px] -translate-x-1/2 rounded border border-border bg-card shadow-md",
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 p-2", children: [
+              /* @__PURE__ */ jsx8(DragHandle, {}),
+              /* @__PURE__ */ jsx8("span", { className: "text-sm text-muted-foreground", children: currentStep.elementLabel })
+            ] }),
+            /* @__PURE__ */ jsx8(Button, { variant: "ghost", size: "icon", onClick: onClose, children: /* @__PURE__ */ jsx8(
+              HugeiconsIcon4,
+              {
+                icon: MultiplicationSignIcon,
+                strokeWidth: 2,
+                size: 16
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx8(
+            "textarea",
+            {
+              "data-meridial-ui": true,
+              value: currentDesc,
+              onChange: (e) => updateDescription(e.target.value),
+              placeholder: "Add or edit existing step description",
+              rows: 3,
+              className: "-mb-2 w-full resize-none border-y bg-muted/50 px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ jsxs5("div", { "data-meridial-ui": true, className: "flex items-center justify-between p-2", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "text-xs text-muted-foreground", children: [
+              completedCount,
+              " / ",
+              steps.length,
+              " Steps Completed"
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx8(DeleteStepButton, { onConfirm: handleDeleteStep }),
+              /* @__PURE__ */ jsxs5(
+                Button,
+                {
+                  variant: "outline",
+                  "data-meridial-ui": true,
+                  onClick: handleBack,
+                  disabled: currentIndex === 0,
+                  title: "Back",
+                  children: [
+                    /* @__PURE__ */ jsx8(HugeiconsIcon4, { icon: ArrowLeft01Icon, size: 16 }),
+                    /* @__PURE__ */ jsx8("span", { className: "text-xs", children: "Back" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                Button,
+                {
+                  variant: "default",
+                  "data-meridial-ui": true,
+                  onClick: primaryAction,
+                  disabled: primaryDisabled,
+                  children: isConfiguredSaveMode ? savingChanges ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    /* @__PURE__ */ jsx8(
+                      HugeiconsIcon4,
+                      {
+                        icon: Loading03Icon2,
+                        size: 14,
+                        className: "animate-spin"
+                      }
+                    ),
+                    "Saving Workflow"
+                  ] }) : "Save Workflow" : saving ? /* @__PURE__ */ jsx8(
+                    HugeiconsIcon4,
+                    {
+                      icon: Loading03Icon2,
+                      size: 14,
+                      className: "animate-spin"
+                    }
+                  ) : isLastStep ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    "Finish",
+                    /* @__PURE__ */ jsx8(HugeiconsIcon4, { icon: Tick01Icon, size: 14 })
+                  ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    "Next",
+                    /* @__PURE__ */ jsx8(HugeiconsIcon4, { icon: ArrowRight01Icon, size: 14 })
+                  ] })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx8(
+            CursorGuide,
+            {
+              selector: currentStep.elementId,
+              urlPath: currentStep.urlPath,
+              onError,
+              onClick: isConfigured ? primaryAction : void 0,
+              children: cursor ?? /* @__PURE__ */ jsx8(
+                HugeiconsIcon4,
+                {
+                  icon: Cursor02Icon,
+                  strokeWidth: 2,
+                  size: 32,
+                  className: "fill-primary/80 text-primary"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
+// src/recorder.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function Recorder({
+  baseUrl = "",
+  publishableKey,
+  cursor,
+  onError
+}) {
+  const draggableRef = useRef7(null);
+  const keylessWarned = useRef7(false);
+  useDraggable2(draggableRef);
+  const [state, dispatch] = useRecorderState();
+  const audio = useAudioRecorder();
+  const wf = useWorkflows();
+  const [showPanel, setShowPanel] = useState7(false);
+  const [editorWorkflowId, setPlayerWorkflowId] = useState7(null);
+  const stepsRef = useRef7([]);
+  const streamRef = useRef7(null);
+  const [serverWorkflows, setServerWorkflows] = useState7([]);
+  const isRecording = state.status === "recording";
+  const isPaused = state.status === "paused";
+  useEffect4(() => {
+    if (!publishableKey && !keylessWarned.current) {
+      keylessWarned.current = true;
+      console.warn(
+        "[Meridial] No publishableKey provided. Workflows will only be saved locally."
+      );
+    }
+  }, [publishableKey]);
+  useEffect4(() => {
+    if (!publishableKey) return;
+    fetch(`${baseUrl}/api/workflows`, {
+      headers: { Authorization: `Bearer ${publishableKey}` }
+    }).then(async (res) => {
+      const data = await res.json();
+      if (!res.ok) {
+        const msg = data?.error || `Request failed (${res.status})`;
+        onError?.(msg);
+        return;
+      }
+      if (!data.workflows) return;
+      const parsed = apiWorkflowsResponseSchema.safeParse(data);
+      if (!parsed.success) {
+        onError?.("Invalid workflows response");
+        return;
+      }
+      if (parsed.data.error) {
+        onError?.(parsed.data.error);
+        return;
+      }
+      const workflows = parsed.data.workflows ?? [];
+      const mapped = [];
+      for (const w of workflows) {
+        const workflow = workflowSchema.safeParse({
+          id: w.id,
+          name: w.name,
+          steps: w.steps,
+          configured: true,
+          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+        });
+        if (workflow.success) {
+          mapped.push(workflow.data);
+        } else {
+          console.error(
+            "[Meridial] Invalid workflow shape:",
+            w.id,
+            workflow.error
+          );
+        }
+      }
+      setServerWorkflows(mapped);
+    }).catch((err) => {
+      const msg = err instanceof Error ? err.message : String(err);
+      onError?.(msg);
+    });
+  }, [publishableKey]);
+  const getLastElementId = useCallback6(
+    () => stepsRef.current[stepsRef.current.length - 1]?.elementId,
+    []
+  );
+  useClickCapture({
+    enabled: isRecording,
+    onCapture: (step) => {
+      if (getLastElementId() === step.elementId) return;
+      stepsRef.current.push(step);
+      dispatch({ type: "STEP_CAPTURED" });
+    }
+  });
+  const handleStreamReady = useCallback6(
+    (stream) => {
+      streamRef.current = stream;
+      audio.start(stream);
+    },
+    [audio.start]
+  );
+  const handleStartRecording = useCallback6(() => {
+    stepsRef.current = [];
+    dispatch({ type: "START_RECORDING" });
+  }, [dispatch]);
+  const handleActionClick = useCallback6(() => {
+    if (state.status === "idle") {
+      setShowPanel((prev) => !prev);
+    } else if (state.status === "recording") {
+      dispatch({ type: "PAUSE" });
+      audio.pause();
+    } else if (state.status === "paused") {
+      dispatch({ type: "RESUME" });
+      audio.resume();
+    }
+  }, [state.status, dispatch, audio]);
+  const handleSave = useCallback6(async () => {
+    dispatch({ type: "SAVE" });
+    audio.stop();
+    const id = crypto.randomUUID();
+    const audioKey = `audio-${id}`;
+    const steps = stepsRef.current.map((s) => ({
+      ...s,
+      id: crypto.randomUUID()
+    }));
+    wf.addWorkflow({
+      id,
+      name: generateWorkflowName(),
+      steps,
+      audioKey,
+      configured: false,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    setTimeout(async () => {
+      if (audio.audioBlob) {
+        await saveAudio(audioKey, audio.audioBlob).catch(() => {
+        });
+      }
+      dispatch({ type: "SAVE_COMPLETE" });
+    }, 200);
+  }, [dispatch, audio, wf, publishableKey, baseUrl]);
+  const handleRename = useCallback6(
+    (id, name) => {
+      wf.updateWorkflow(id, { name });
+    },
+    [wf]
+  );
+  const handleDelete = useCallback6(
+    (id) => {
+      const workflow = wf.getWorkflow(id);
+      if (workflow?.audioKey) {
+        deleteAudio(workflow.audioKey).catch(() => {
+        });
+      }
+      wf.deleteWorkflow(id);
+    },
+    [wf]
+  );
+  const handleConfigure = useCallback6((id) => {
+    setPlayerWorkflowId(id);
+    setShowPanel(false);
+  }, []);
+  const handleEditorClose = useCallback6(() => {
+    setPlayerWorkflowId(null);
+  }, []);
+  const handleWorkflowDeleted = useCallback6(() => {
+    wf.refresh();
+  }, [wf]);
+  const allWorkflows = [
+    ...wf.visibleWorkflows,
+    ...serverWorkflows.filter(
+      (sw) => !wf.visibleWorkflows.some((lw) => lw.id === sw.id)
+    )
+  ];
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref: draggableRef,
+        "data-meridial-ui": true,
+        className: "fixed bottom-4 left-4 z-50 w-64 items-stretch rounded border border-border bg-card shadow-md",
+        children: [
+          /* @__PURE__ */ jsx9(AnimatePresence2, { initial: false, children: showPanel && state.status === "idle" && /* @__PURE__ */ jsx9(
+            motion3.div,
+            {
+              initial: { height: 0, opacity: 0 },
+              animate: { height: "auto", opacity: 1 },
+              exit: { height: 0, opacity: 0 },
+              transition: { duration: 0.24, ease: "easeOut" },
+              style: { overflow: "hidden" },
+              children: /* @__PURE__ */ jsx9(
+                WorkflowListPanel,
+                {
+                  workflows: allWorkflows,
+                  hasMore: wf.hasMore,
+                  remainingCount: wf.remainingCount,
+                  onLoadMore: wf.loadMore,
+                  onRename: handleRename,
+                  onDelete: handleDelete,
+                  onConfigure: handleConfigure
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxs6("div", { "data-meridial-ui": true, className: "flex h-12 items-center", children: [
+            /* @__PURE__ */ jsx9(DragHandle, { className: "px-2" }),
+            /* @__PURE__ */ jsx9(Separator, { orientation: "vertical", className: "h-full" }),
+            state.status === "idle" ? /* @__PURE__ */ jsx9(
+              "button",
+              {
+                "data-meridial-ui": true,
+                onClick: handleStartRecording,
+                className: "w-full cursor-pointer px-4 text-sm tracking-wide text-foreground uppercase",
+                children: "Start Recording"
+              }
+            ) : /* @__PURE__ */ jsxs6("div", { className: "relative h-full w-full", children: [
+              isRecording && /* @__PURE__ */ jsx9(
+                Waveform,
+                {
+                  "data-meridial-ui": true,
+                  active: isRecording,
+                  height: 48,
+                  mode: "static",
+                  barWidth: 3,
+                  barGap: 1,
+                  barRadius: 1.5,
+                  onStreamReady: handleStreamReady,
+                  className: "text-primary"
+                }
+              ),
+              isPaused && /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  "data-meridial-ui": true,
+                  onClick: handleSave,
+                  className: "absolute inset-0 flex cursor-pointer items-center justify-center text-sm backdrop-blur-[1px]",
+                  children: "SAVE WORKFLOW"
+                }
+              ),
+              isRecording && state.stepCount > 0 && /* @__PURE__ */ jsx9(StepBadge, { count: state.stepCount })
+            ] }),
+            /* @__PURE__ */ jsx9(Separator, { orientation: "vertical", className: "h-full" }),
+            /* @__PURE__ */ jsx9(
+              ActionButton,
+              {
+                openPanel: showPanel,
+                state,
+                hasUnconfigured: wf.hasUnconfigured,
+                onClick: handleActionClick
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    editorWorkflowId && /* @__PURE__ */ jsx9(
+      WorkflowEditor,
+      {
+        workflowId: editorWorkflowId,
+        workflow: allWorkflows.find((w) => w.id === editorWorkflowId),
+        publishableKey,
+        cursor,
+        onClose: handleEditorClose,
+        onWorkflowDeleted: handleWorkflowDeleted,
+        onError
+      }
+    )
+  ] });
+}
+
+export {
+  Recorder
+};
+//# sourceMappingURL=chunk-VDQAVB4N.js.map