@waypointjs/builder 0.1.0 → 0.1.4

package/dist/index.js

@@ -3,6 +3,7 @@ import { useState, useRef, useEffect } from 'react';
 import { create } from 'zustand';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useWaypoint, useWaypointStep } from '@waypointjs/react';
+import { DevPanel } from '@waypointjs/devtools';
 
 // src/components/WaypointBuilder.tsx
 
@@ -344,9 +345,19 @@ var useBuilderStore = create((set, _get) => ({
     isDirty: true
   }))
 }));
-var BLANK_FORM = { id: "", label: "", type: "string", blocking: false };
+var BLANK_FORM = {
+  id: "",
+  label: "",
+  type: "string",
+  blocking: false
+};
 function ExternalVariablePanel() {
-  const { schema, addExternalVariable, updateExternalVariable, removeExternalVariable } = useBuilderStore();
+  const {
+    schema,
+    addExternalVariable,
+    updateExternalVariable,
+    removeExternalVariable
+  } = useBuilderStore();
   const variables = schema.externalVariables ?? [];
   const [isAdding, setIsAdding] = useState(false);
   const [editingId, setEditingId] = useState(null);
@@ -372,9 +383,11 @@ function ExternalVariablePanel() {
   }
   function validateForm() {
     if (!form.id.trim()) return "ID is required";
-    if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(form.id.trim())) return "ID must be alphanumeric (no spaces)";
+    if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(form.id.trim()))
+      return "ID must be alphanumeric (no spaces)";
     if (!form.label.trim()) return "Label is required";
-    if (isAdding && variables.some((v) => v.id === form.id.trim())) return `ID "${form.id}" already exists`;
+    if (isAdding && variables.some((v) => v.id === form.id.trim()))
+      return `ID "${form.id}" already exists`;
     return null;
   }
   function submitAdd() {
@@ -383,7 +396,12 @@ function ExternalVariablePanel() {
       setError(err);
       return;
     }
-    addExternalVariable({ id: form.id.trim(), label: form.label.trim(), type: form.type, blocking: form.blocking });
+    addExternalVariable({
+      id: form.id.trim(),
+      label: form.label.trim(),
+      type: form.type,
+      blocking: form.blocking
+    });
     setIsAdding(false);
     setForm(BLANK_FORM);
     setError(null);
@@ -395,7 +413,11 @@ function ExternalVariablePanel() {
       return;
     }
     if (!editingId) return;
-    updateExternalVariable(editingId, { label: form.label.trim(), type: form.type, blocking: form.blocking });
+    updateExternalVariable(editingId, {
+      label: form.label.trim(),
+      type: form.type,
+      blocking: form.blocking
+    });
     setEditingId(null);
     setError(null);
   }
@@ -409,7 +431,15 @@ function ExternalVariablePanel() {
   return /* @__PURE__ */ jsxs("div", { style: panelStyle, children: [
     /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
       /* @__PURE__ */ jsx("span", { style: titleStyle, children: "External Variables" }),
-      !isAdding && /* @__PURE__ */ jsx("button", { style: addBtnStyle, onClick: startAdd, title: "Add external variable", children: "+ Add" })
+      !isAdding && /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: addBtnStyle,
+          onClick: startAdd,
+          title: "Add external variable",
+          children: "+ Add"
+        }
+      )
     ] }),
     variables.length === 0 && !isAdding && /* @__PURE__ */ jsxs("p", { style: emptyStyle, children: [
       "No external variables declared.",
@@ -423,37 +453,55 @@ function ExternalVariablePanel() {
     variables.map((v) => {
       const refs = usageMap.get(v.id) ?? [];
       const isBeingEdited = editingId === v.id;
-      return /* @__PURE__ */ jsx("div", { style: { ...varRowStyle, ...isBeingEdited ? varRowActiveStyle : {} }, children: isBeingEdited ? /* @__PURE__ */ jsx(
-        VarForm,
+      return /* @__PURE__ */ jsx(
+        "div",
         {
-          form,
-          onChange: setForm,
-          error,
-          onSubmit: submitEdit,
-          onCancel: cancelForm,
-          submitLabel: "Save",
-          idReadOnly: true
-        }
-      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { style: varMainStyle, children: [
-          /* @__PURE__ */ jsxs("div", { style: varTopRowStyle, children: [
-            /* @__PURE__ */ jsxs("span", { style: varIdStyle, children: [
-              "$",
-              `ext.${v.id}`
+          style: {
+            ...varRowStyle,
+            ...isBeingEdited ? varRowActiveStyle : {}
+          },
+          children: isBeingEdited ? /* @__PURE__ */ jsx(
+            VarForm,
+            {
+              form,
+              onChange: setForm,
+              error,
+              onSubmit: submitEdit,
+              onCancel: cancelForm,
+              submitLabel: "Save",
+              idReadOnly: true
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { style: varMainStyle, children: [
+              /* @__PURE__ */ jsxs("div", { style: varTopRowStyle, children: [
+                /* @__PURE__ */ jsxs("span", { style: varIdStyle, children: [
+                  "$",
+                  `ext.${v.id}`
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: badgeRowStyle, children: [
+                  /* @__PURE__ */ jsx(TypeBadge, { type: v.type }),
+                  v.blocking && /* @__PURE__ */ jsx("span", { style: blockingBadgeStyle, children: "blocking" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: varLabelStyle, children: v.label }),
+              refs.length > 0 && /* @__PURE__ */ jsx("div", { style: refsStyle, children: refs.map((ref, i) => /* @__PURE__ */ jsx("span", { style: refChipStyle, children: ref }, i)) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { style: badgeRowStyle, children: [
-              /* @__PURE__ */ jsx(TypeBadge, { type: v.type }),
-              v.blocking && /* @__PURE__ */ jsx("span", { style: blockingBadgeStyle, children: "blocking" })
+            /* @__PURE__ */ jsxs("div", { style: varActionsStyle, children: [
+              /* @__PURE__ */ jsx("button", { style: actionBtnStyle, onClick: () => startEdit(v), children: "Edit" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  style: { ...actionBtnStyle, color: "#ef4444" },
+                  title: "Remove variable",
+                  onClick: () => remove(v.id),
+                  children: "\u2715"
+                }
+              )
             ] })
-          ] }),
-          /* @__PURE__ */ jsx("span", { style: varLabelStyle, children: v.label }),
-          refs.length > 0 && /* @__PURE__ */ jsx("div", { style: refsStyle, children: refs.map((ref, i) => /* @__PURE__ */ jsx("span", { style: refChipStyle, children: ref }, i)) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: varActionsStyle, children: [
-          /* @__PURE__ */ jsx("button", { style: actionBtnStyle, onClick: () => startEdit(v), children: "Edit" }),
-          /* @__PURE__ */ jsx("button", { style: { ...actionBtnStyle, color: "#ef4444" }, title: "Remove variable", onClick: () => remove(v.id), children: "\u2715" })
-        ] })
-      ] }) }, v.id);
+          ] })
+        },
+        v.id
+      );
     }),
     isAdding && /* @__PURE__ */ jsx("div", { style: { ...varRowStyle, ...varRowActiveStyle }, children: /* @__PURE__ */ jsx(
       VarForm,
@@ -468,7 +516,15 @@ function ExternalVariablePanel() {
     ) })
   ] });
 }
-function VarForm({ form, onChange, error, onSubmit, onCancel, submitLabel, idReadOnly }) {
+function VarForm({
+  form,
+  onChange,
+  error,
+  onSubmit,
+  onCancel,
+  submitLabel,
+  idReadOnly
+}) {
   function set(key, value) {
     onChange({ ...form, [key]: value });
   }
@@ -477,7 +533,10 @@ function VarForm({ form, onChange, error, onSubmit, onCancel, submitLabel, idRea
     /* @__PURE__ */ jsx(
       "input",
       {
-        style: { ...inputStyle, ...idReadOnly ? { background: "#f9fafb", color: "#6b7280" } : {} },
+        style: {
+          ...inputStyle,
+          ...idReadOnly ? { background: "#f9fafb", color: "#6b7280" } : {}
+        },
         value: form.id,
         onChange: (e) => set("id", e.target.value),
         placeholder: "e.g. userId",
@@ -495,12 +554,20 @@ function VarForm({ form, onChange, error, onSubmit, onCancel, submitLabel, idRea
       }
     ),
     /* @__PURE__ */ jsx("label", { style: formLabelStyle, children: "Type" }),
-    /* @__PURE__ */ jsxs("select", { style: selectStyle, value: form.type, onChange: (e) => set("type", e.target.value), children: [
-      /* @__PURE__ */ jsx("option", { value: "string", children: "string" }),
-      /* @__PURE__ */ jsx("option", { value: "number", children: "number" }),
-      /* @__PURE__ */ jsx("option", { value: "boolean", children: "boolean" }),
-      /* @__PURE__ */ jsx("option", { value: "object", children: "object" })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        style: selectStyle,
+        value: form.type,
+        onChange: (e) => set("type", e.target.value),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "string", children: "string" }),
+          /* @__PURE__ */ jsx("option", { value: "number", children: "number" }),
+          /* @__PURE__ */ jsx("option", { value: "boolean", children: "boolean" }),
+          /* @__PURE__ */ jsx("option", { value: "object", children: "object" })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs("label", { style: checkboxRowStyle, children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -594,7 +661,8 @@ var emptyStyle = {
 };
 var codeStyle = {
   fontFamily: "monospace",
-  background: "#f3f4f6",
+  background: "#f97316",
+  color: "#070714",
   borderRadius: 3,
   padding: "1px 3px"
 };
@@ -2025,6 +2093,7 @@ function PreviewPanel({ store, schema }) {
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { style: styles6.panel, children: [
+    /* @__PURE__ */ jsx(DevPanel, { store }),
     /* @__PURE__ */ jsx("div", { style: styles6.leftCol, children: /* @__PURE__ */ jsx(
       StepList,
       {
@@ -2841,7 +2910,7 @@ var styles8 = {
     borderRadius: 4
   }
 };
-function Toolbar({ onSave, previewMode, onTest }) {
+function Toolbar({ onSave, previewMode, onTest, isMobile }) {
   const { schema, isDirty, resetSchema } = useBuilderStore();
   const handleExport = () => {
     const json = JSON.stringify(schema, null, 2);
@@ -2899,12 +2968,15 @@ ${result.errors.map((e2) => `\u2022 ${e2}`).join("\n")}`);
   }
   return /* @__PURE__ */ jsxs("div", { style: styles9.toolbar, children: [
     /* @__PURE__ */ jsxs("div", { style: styles9.left, children: [
-      /* @__PURE__ */ jsx("span", { style: styles9.logo, children: "\u25C8 waypoint" }),
-      /* @__PURE__ */ jsx("span", { style: styles9.separator, children: "/" }),
+      !isMobile && /* @__PURE__ */ jsx("span", { style: styles9.logo, children: "\u25C8 waypoint" }),
+      !isMobile && /* @__PURE__ */ jsx("span", { style: styles9.separator, children: "/" }),
       /* @__PURE__ */ jsx(
         "input",
         {
-          style: styles9.journeyName,
+          style: {
+            ...styles9.journeyName,
+            ...isMobile ? { maxWidth: 120, fontSize: 12 } : {}
+          },
           value: schema.name,
           placeholder: "Journey name",
           onChange: (e) => useBuilderStore.setState((s) => ({
@@ -2916,25 +2988,27 @@ ${result.errors.map((e2) => `\u2022 ${e2}`).join("\n")}`);
       isDirty && /* @__PURE__ */ jsx("span", { style: styles9.dirtyDot, title: "Unsaved changes" })
     ] }),
     /* @__PURE__ */ jsxs("div", { style: styles9.right, children: [
-      onTest && /* @__PURE__ */ jsx("button", { style: { ...styles9.btn, ...styles9.testBtn }, onClick: onTest, children: "\u25B6 Tester" }),
-      /* @__PURE__ */ jsx("button", { style: styles9.btn, onClick: handleImport, children: "Import" }),
-      /* @__PURE__ */ jsx("button", { style: styles9.btn, onClick: handleExport, children: "Export JSON" }),
+      onTest && /* @__PURE__ */ jsx("button", { style: { ...styles9.btn, ...styles9.testBtn }, onClick: onTest, title: "Tester", children: isMobile ? "\u25B6" : "\u25B6 Tester" }),
+      /* @__PURE__ */ jsx("button", { style: styles9.btn, onClick: handleImport, title: "Import", children: isMobile ? "\u2193" : "Import" }),
+      /* @__PURE__ */ jsx("button", { style: styles9.btn, onClick: handleExport, title: "Export JSON", children: isMobile ? "\u2191" : "Export JSON" }),
       onSave && /* @__PURE__ */ jsx(
         "button",
         {
           style: { ...styles9.btn, ...styles9.saveBtn },
           onClick: () => onSave(schema),
-          children: "Save"
+          title: "Save",
+          children: isMobile ? "\u2713" : "Save"
         }
       ),
       /* @__PURE__ */ jsx(
         "button",
         {
           style: { ...styles9.btn, color: "var(--wp-danger)" },
+          title: "Reset",
           onClick: () => {
             if (confirm("Reset the journey? All changes will be lost.")) resetSchema();
           },
-          children: "Reset"
+          children: isMobile ? "\u27F3" : "Reset"
         }
       )
     ] })
@@ -2993,18 +3067,32 @@ function WaypointBuilder({
   className,
   style
 }) {
-  const { loadSchema, schema } = useBuilderStore();
+  const { loadSchema, schema, selectedStepId, selectedFieldId } = useBuilderStore();
   const [previewMode, setPreviewMode] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [activeTab, setActiveTab] = useState("steps");
   const previewStoreRef = useRef(null);
   if (previewStoreRef.current === null) {
     previewStoreRef.current = createRuntimeStore();
   }
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 640);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
   useEffect(() => {
     if (defaultValue) loadSchema(defaultValue);
   }, []);
   useEffect(() => {
     onChange?.(schema);
   }, [schema, onChange]);
+  useEffect(() => {
+    if (isMobile && selectedStepId) setActiveTab("fields");
+  }, [selectedStepId]);
+  useEffect(() => {
+    if (isMobile && selectedFieldId) setActiveTab("config");
+  }, [selectedFieldId]);
   function handleTest() {
     previewStoreRef.current.getState().init(schema);
     setPreviewMode(true);
@@ -3014,6 +3102,7 @@ function WaypointBuilder({
     /* @__PURE__ */ jsx(
       Toolbar,
       {
+        isMobile,
         onSave: !previewMode && onSave ? () => onSave(schema) : void 0,
         previewMode,
         onTest: previewMode ? () => setPreviewMode(false) : handleTest
@@ -3026,7 +3115,29 @@ function WaypointBuilder({
         schema,
         onEdit: () => setPreviewMode(false)
       }
-    ) : /* @__PURE__ */ jsxs("div", { style: layoutStyle, children: [
+    ) : isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { ...colStyle, display: activeTab === "steps" ? "flex" : "none" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(StepList2, {}) }),
+        /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--wp-border)", flexShrink: 0, overflow: "auto", maxHeight: 200 }, children: /* @__PURE__ */ jsx(ExternalVariablePanel, {}) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { ...colStyle, display: activeTab === "fields" ? "flex" : "none" }, children: /* @__PURE__ */ jsx(FieldList, {}) }),
+      /* @__PURE__ */ jsxs("div", { style: { ...colStyle, display: activeTab === "config" ? "flex" : "none" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, borderBottom: "1px solid var(--wp-border)", overflow: "hidden" }, children: /* @__PURE__ */ jsx(StepEditor, {}) }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(FieldEditor, {}) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: tabBarStyle, children: ["steps", "fields", "config"].map((tab) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          style: { ...tabBtnStyle, ...activeTab === tab ? tabBtnActiveStyle : {} },
+          onClick: () => setActiveTab(tab),
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: tab === "steps" ? "\u26A1" : tab === "fields" ? "\u229E" : "\u2699" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 11, fontWeight: 600, textTransform: "capitalize" }, children: tab })
+          ]
+        },
+        tab
+      )) })
+    ] }) : /* @__PURE__ */ jsxs("div", { style: layoutStyle, children: [
       /* @__PURE__ */ jsxs("div", { style: colStyle, children: [
         /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(StepList2, {}) }),
         /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--wp-border)", flexShrink: 0, overflow: "auto", maxHeight: 280 }, children: /* @__PURE__ */ jsx(ExternalVariablePanel, {}) })
@@ -3068,6 +3179,29 @@ var dividerStyle = {
   background: "var(--wp-border)",
   flexShrink: 0
 };
+var tabBarStyle = {
+  display: "flex",
+  borderTop: "1px solid var(--wp-border)",
+  background: "var(--wp-toolbar-bg)",
+  flexShrink: 0
+};
+var tabBtnStyle = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 3,
+  padding: "8px 4px",
+  border: "none",
+  background: "transparent",
+  color: "var(--wp-text-subtle)",
+  cursor: "pointer"
+};
+var tabBtnActiveStyle = {
+  color: "var(--wp-primary)",
+  borderTop: "2px solid var(--wp-primary)"
+};
 
 export { DARK_THEME, DEFAULT_THEME, WaypointBuilder, buildThemeVars, useBuilderStore };
 //# sourceMappingURL=index.js.map