@mmapp/react 0.1.0-alpha.20 → 0.1.0-alpha.22

package/dist/index.js

@@ -1123,9 +1123,10 @@ var init_input = __esm({
         }
       }, [value]);
       const handleChange = (0, import_react37.useCallback)((e) => {
-        setLocalValue(e.target.value);
+        const val = e.target.value;
+        setLocalValue(val);
         if (typeof onChange === "function") {
-          onChange(e);
+          onChange(val);
         }
       }, [onChange]);
       const displayValue = isControlled ? value ?? "" : localValue;
@@ -1191,8 +1192,9 @@ var init_input = __esm({
         if (value != null && String(value) !== localValue) setLocalValue(String(value));
       }, [value]);
       const handleChange = (0, import_react37.useCallback)((e) => {
-        setLocalValue(e.target.value);
-        if (typeof onChange === "function") onChange(e);
+        const val = e.target.value;
+        setLocalValue(val);
+        if (typeof onChange === "function") onChange(val);
       }, [onChange]);
       const displayValue = isControlled ? value ?? "" : localValue;
       const opts = Array.isArray(options) ? options : [];
@@ -5915,6 +5917,14 @@ function resolveFunction(name, rawArgs, scope) {
 function resolveAction(name, rawArgs, scope) {
   const actions = scope.$action;
   if (!actions) return void 0;
+  if (name === "seq") {
+    return () => {
+      for (const arg of rawArgs) {
+        const resolved = resolveBinding(arg.trim(), scope);
+        if (typeof resolved === "function") resolved();
+      }
+    };
+  }
   if (rawArgs.length === 0) {
     const actionFn2 = actions[name];
     if (typeof actionFn2 === "function") return actionFn2;
@@ -5928,6 +5938,24 @@ function resolveAction(name, rawArgs, scope) {
   };
 }
 function resolveCondition(expression, scope) {
+  const arrowMatch = expression.match(/^\(\)\s*=>\s*(.+)$/s);
+  if (arrowMatch) {
+    const body = arrowMatch[1].trim();
+    const actionCallMatch = body.match(/^\(?(\$action)\)?\.(\w+)\((.*)?\)$/s);
+    if (actionCallMatch) {
+      const [, , method, argsStr] = actionCallMatch;
+      return () => {
+        const actionFn = scope.$action?.[method];
+        if (typeof actionFn !== "function") return;
+        const args = argsStr ? splitArgs(argsStr.trim()).map((a) => resolveBinding(a.trim(), scope)) : [];
+        return actionFn(...args);
+      };
+    }
+    return () => {
+      const context2 = buildEvalContext(scope);
+      return evaluateExpression(body, context2);
+    };
+  }
   const context = buildEvalContext(scope);
   return evaluateExpression(expression, context);
 }
@@ -5951,6 +5979,11 @@ function buildEvalContext(scope) {
   }
   if (scope.$item) ctx.item = scope.$item;
   if (scope.$index != null) ctx.index = scope.$index;
+  for (const [key, value] of Object.entries(scope)) {
+    if (!key.startsWith("$") && !(key in ctx) && value !== void 0) {
+      ctx[key] = value;
+    }
+  }
   if (scope.state_data) ctx.state_data = scope.state_data;
   if (scope.memory) ctx.memory = scope.memory;
   if (scope.context) ctx.context = scope.context;
@@ -5959,17 +5992,34 @@ function buildEvalContext(scope) {
 function buildActionScope(opts) {
   const { resolver, instanceId, slug, setLocal, router, toast, refreshQuery, onEvent } = opts;
   return {
-    transition: async (name, id, data) => {
-      const targetId = id ?? instanceId;
+    transition: async (idOrName, nameOrId, data) => {
+      let targetId;
+      let transitionName;
+      if (nameOrId) {
+        targetId = idOrName;
+        transitionName = nameOrId;
+      } else {
+        transitionName = idOrName;
+        targetId = instanceId;
+      }
       if (!targetId) {
         console.warn("[action] transition called without instanceId");
         return;
       }
-      await resolver.transition(targetId, name, data);
+      await resolver.transition(targetId, transitionName, data);
       refreshQuery?.();
     },
-    create: async (targetSlug, data) => {
-      const id = await resolver.create(targetSlug || slug || "", data);
+    create: async (slugOrData, data) => {
+      let targetSlug;
+      let fields;
+      if (typeof slugOrData === "object") {
+        targetSlug = slug || "";
+        fields = slugOrData;
+      } else {
+        targetSlug = slugOrData || slug || "";
+        fields = data;
+      }
+      const id = await resolver.create(targetSlug, fields);
       refreshQuery?.();
       return id;
     },
@@ -6571,7 +6621,35 @@ var NodeRenderer = ({ node, fallback }) => {
   const enrichedScope = (0, import_react44.useMemo)(() => {
     const handleCreate = () => {
       if (primarySlug && resolver) {
-        resolver.create(primarySlug).then(() => handleRefreshQuery());
+        const fields = {};
+        for (const [key, val] of Object.entries(localState)) {
+          if (key.startsWith("new_") && val != null && val !== "") {
+            fields[key.slice(4)] = val;
+          }
+        }
+        resolver.create(primarySlug, Object.keys(fields).length > 0 ? fields : void 0).then(() => {
+          for (const key of Object.keys(localState)) {
+            if (key.startsWith("new_")) handleSetLocal(key, "");
+          }
+          handleSetLocal("show_create", false);
+          handleRefreshQuery();
+        });
+      }
+    };
+    const handleUpdate = (id) => {
+      if (primarySlug && resolver) {
+        const fields = {};
+        for (const [key, val] of Object.entries(localState)) {
+          if (key.startsWith("edit_") && val != null && val !== "") {
+            fields[key.slice(5)] = val;
+          }
+        }
+        if (Object.keys(fields).length > 0) {
+          resolver.update(id, fields).then(() => {
+            handleSetLocal("editing_id", null);
+            handleRefreshQuery();
+          });
+        }
       }
     };
     const setSearch = (e) => {
@@ -6581,15 +6659,18 @@ var NodeRenderer = ({ node, fallback }) => {
     const enrichedAction = {
       ...scope.$action,
       handleCreate,
+      handleUpdate,
       setSearch
     };
-    const enrichedInstance = scope.$instance ? { ...scope.$instance, handleCreate, setSearch } : void 0;
+    const baseInstance = scope.$instance ?? { id: "", state: "", fields: {} };
+    const enrichedInstance = { ...baseInstance, handleCreate, handleUpdate, setSearch };
     return {
       ...scope,
       $action: enrichedAction,
       $instance: enrichedInstance,
       // Also add at top-level for direct access
       handleCreate,
+      handleUpdate,
       setSearch
     };
   }, [scope, primarySlug, resolver, handleRefreshQuery, handleSetLocal]);

package/dist/index.mjs

@@ -55,7 +55,7 @@ import {
   useMutation,
   usePlayerContext,
   useQuery
-} from "./chunk-ZAHMWAER.mjs";
+} from "./chunk-XWBUADY2.mjs";
 import {
   ScopeContext,
   buildLoopScope,

package/dist/input-YMO6H7RP.mjs

@@ -0,0 +1,224 @@
+// src/player/atoms/input.tsx
+import { useState, useCallback, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var inputBase = {
+  padding: "6px 12px",
+  border: "1px solid #e2e8f0",
+  borderRadius: 6,
+  fontSize: 14,
+  outline: "none",
+  width: "100%",
+  boxSizing: "border-box",
+  background: "#fff",
+  color: "#1a202c",
+  transition: "border-color 0.15s"
+};
+var TextInput = ({
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  label,
+  type,
+  name,
+  disabled,
+  required,
+  error,
+  helperText,
+  multiline,
+  rows,
+  maxLength,
+  className,
+  style,
+  bind: _bind
+}) => {
+  const isControlled = typeof onChange === "function";
+  const [localValue, setLocalValue] = useState(value ?? "");
+  useEffect(() => {
+    if (value != null && String(value) !== localValue) {
+      setLocalValue(String(value));
+    }
+  }, [value]);
+  const handleChange = useCallback((e) => {
+    const val = e.target.value;
+    setLocalValue(val);
+    if (typeof onChange === "function") {
+      onChange(val);
+    }
+  }, [onChange]);
+  const displayValue = isControlled ? value ?? "" : localValue;
+  const hasError = Boolean(error);
+  const inputStyle = {
+    ...inputBase,
+    borderColor: hasError ? "#e53e3e" : "#e2e8f0",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: { width: "100%" }, children: [
+    label ? /* @__PURE__ */ jsxs("label", { style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4, color: "#4a5568" }, children: [
+      String(label),
+      required ? /* @__PURE__ */ jsx("span", { style: { color: "#e53e3e" }, children: " *" }) : null
+    ] }) : null,
+    multiline ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        value: displayValue,
+        onChange: handleChange,
+        onBlur,
+        placeholder,
+        name,
+        disabled: Boolean(disabled),
+        required: Boolean(required),
+        rows: Number(rows) || 3,
+        maxLength: maxLength ? Number(maxLength) : void 0,
+        style: inputStyle
+      }
+    ) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: type ?? "text",
+        value: displayValue,
+        onChange: handleChange,
+        onBlur,
+        placeholder,
+        name,
+        disabled: Boolean(disabled),
+        required: Boolean(required),
+        maxLength: maxLength ? Number(maxLength) : void 0,
+        style: inputStyle
+      }
+    ),
+    error || helperText ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, marginTop: 2, color: hasError ? "#e53e3e" : "#a0aec0" }, children: String(error || helperText) }) : null
+  ] });
+};
+var Select = ({
+  value,
+  onChange,
+  options,
+  placeholder,
+  label,
+  disabled,
+  required,
+  error,
+  name,
+  className,
+  style
+}) => {
+  const [localValue, setLocalValue] = useState(value ?? "");
+  const isControlled = typeof onChange === "function";
+  useEffect(() => {
+    if (value != null && String(value) !== localValue) setLocalValue(String(value));
+  }, [value]);
+  const handleChange = useCallback((e) => {
+    const val = e.target.value;
+    setLocalValue(val);
+    if (typeof onChange === "function") onChange(val);
+  }, [onChange]);
+  const displayValue = isControlled ? value ?? "" : localValue;
+  const opts = Array.isArray(options) ? options : [];
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    label ? /* @__PURE__ */ jsxs("label", { style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4, color: "#4a5568" }, children: [
+      String(label),
+      required ? /* @__PURE__ */ jsx("span", { style: { color: "#e53e3e" }, children: " *" }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        value: displayValue,
+        onChange: handleChange,
+        disabled: Boolean(disabled),
+        name,
+        style: {
+          ...inputBase,
+          borderColor: error ? "#e53e3e" : "#e2e8f0",
+          ...style
+        },
+        children: [
+          placeholder ? /* @__PURE__ */ jsx("option", { value: "", children: String(placeholder) }) : null,
+          opts.map((opt, i) => {
+            const val = typeof opt === "object" ? opt.value : opt;
+            const lbl = typeof opt === "object" ? opt.label ?? val : opt;
+            return /* @__PURE__ */ jsx("option", { value: String(val), children: String(lbl) }, String(val) ?? i);
+          })
+        ]
+      }
+    )
+  ] });
+};
+var Toggle = ({ value, checked, onChange, label, disabled, className, style }) => {
+  const isOn = Boolean(value ?? checked);
+  const handleClick = useCallback(() => {
+    if (disabled) return;
+    if (typeof onChange === "function") onChange(!isOn);
+  }, [onChange, isOn, disabled]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: { display: "flex", alignItems: "center", gap: 8, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            role: "switch",
+            "aria-checked": isOn,
+            disabled: Boolean(disabled),
+            onClick: handleClick,
+            style: {
+              width: 40,
+              height: 22,
+              borderRadius: 11,
+              border: "none",
+              cursor: disabled ? "not-allowed" : "pointer",
+              background: isOn ? "#3182ce" : "#cbd5e0",
+              padding: 2,
+              transition: "background 0.2s",
+              display: "flex",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ jsx("div", { style: {
+              width: 18,
+              height: 18,
+              borderRadius: "50%",
+              background: "#fff",
+              transform: isOn ? "translateX(18px)" : "translateX(0)",
+              transition: "transform 0.2s",
+              boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+            } })
+          }
+        ),
+        label ? /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: String(label) }) : null
+      ]
+    }
+  );
+};
+var Slider = ({ value, onChange, min, max, step, label, disabled, className, style }) => {
+  const numVal = Number(value) || Number(min) || 0;
+  const handleChange = useCallback((e) => {
+    if (typeof onChange === "function") onChange(Number(e.target.value));
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...style }, children: [
+    label ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 4 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { color: "#4a5568", fontWeight: 500 }, children: String(label) }),
+      /* @__PURE__ */ jsx("span", { style: { color: "#718096" }, children: numVal })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        value: numVal,
+        onChange: handleChange,
+        min: Number(min) ?? 0,
+        max: Number(max) ?? 100,
+        step: Number(step) ?? 1,
+        disabled: Boolean(disabled),
+        style: { width: "100%" }
+      }
+    )
+  ] });
+};
+export {
+  Select,
+  Slider,
+  TextInput,
+  Toggle
+};

package/dist/player/index.js

@@ -1127,9 +1127,10 @@ var init_input = __esm({
         }
       }, [value]);
       const handleChange = (0, import_react5.useCallback)((e) => {
-        setLocalValue(e.target.value);
+        const val = e.target.value;
+        setLocalValue(val);
         if (typeof onChange === "function") {
-          onChange(e);
+          onChange(val);
         }
       }, [onChange]);
       const displayValue = isControlled ? value ?? "" : localValue;
@@ -1195,8 +1196,9 @@ var init_input = __esm({
         if (value != null && String(value) !== localValue) setLocalValue(String(value));
       }, [value]);
       const handleChange = (0, import_react5.useCallback)((e) => {
-        setLocalValue(e.target.value);
-        if (typeof onChange === "function") onChange(e);
+        const val = e.target.value;
+        setLocalValue(val);
+        if (typeof onChange === "function") onChange(val);
       }, [onChange]);
       const displayValue = isControlled ? value ?? "" : localValue;
       const opts = Array.isArray(options) ? options : [];
@@ -2083,6 +2085,14 @@ function resolveFunction(name, rawArgs, scope) {
 function resolveAction(name, rawArgs, scope) {
   const actions = scope.$action;
   if (!actions) return void 0;
+  if (name === "seq") {
+    return () => {
+      for (const arg of rawArgs) {
+        const resolved = resolveBinding(arg.trim(), scope);
+        if (typeof resolved === "function") resolved();
+      }
+    };
+  }
   if (rawArgs.length === 0) {
     const actionFn2 = actions[name];
     if (typeof actionFn2 === "function") return actionFn2;
@@ -2096,6 +2106,24 @@ function resolveAction(name, rawArgs, scope) {
   };
 }
 function resolveCondition(expression, scope) {
+  const arrowMatch = expression.match(/^\(\)\s*=>\s*(.+)$/s);
+  if (arrowMatch) {
+    const body = arrowMatch[1].trim();
+    const actionCallMatch = body.match(/^\(?(\$action)\)?\.(\w+)\((.*)?\)$/s);
+    if (actionCallMatch) {
+      const [, , method, argsStr] = actionCallMatch;
+      return () => {
+        const actionFn = scope.$action?.[method];
+        if (typeof actionFn !== "function") return;
+        const args = argsStr ? splitArgs(argsStr.trim()).map((a) => resolveBinding(a.trim(), scope)) : [];
+        return actionFn(...args);
+      };
+    }
+    return () => {
+      const context2 = buildEvalContext(scope);
+      return evaluateExpression(body, context2);
+    };
+  }
   const context = buildEvalContext(scope);
   return evaluateExpression(expression, context);
 }
@@ -2119,6 +2147,11 @@ function buildEvalContext(scope) {
   }
   if (scope.$item) ctx.item = scope.$item;
   if (scope.$index != null) ctx.index = scope.$index;
+  for (const [key, value] of Object.entries(scope)) {
+    if (!key.startsWith("$") && !(key in ctx) && value !== void 0) {
+      ctx[key] = value;
+    }
+  }
   if (scope.state_data) ctx.state_data = scope.state_data;
   if (scope.memory) ctx.memory = scope.memory;
   if (scope.context) ctx.context = scope.context;
@@ -2127,17 +2160,34 @@ function buildEvalContext(scope) {
 function buildActionScope(opts) {
   const { resolver, instanceId, slug, setLocal, router, toast, refreshQuery, onEvent } = opts;
   return {
-    transition: async (name, id, data) => {
-      const targetId = id ?? instanceId;
+    transition: async (idOrName, nameOrId, data) => {
+      let targetId;
+      let transitionName;
+      if (nameOrId) {
+        targetId = idOrName;
+        transitionName = nameOrId;
+      } else {
+        transitionName = idOrName;
+        targetId = instanceId;
+      }
       if (!targetId) {
         console.warn("[action] transition called without instanceId");
         return;
       }
-      await resolver.transition(targetId, name, data);
+      await resolver.transition(targetId, transitionName, data);
       refreshQuery?.();
     },
-    create: async (targetSlug, data) => {
-      const id = await resolver.create(targetSlug || slug || "", data);
+    create: async (slugOrData, data) => {
+      let targetSlug;
+      let fields;
+      if (typeof slugOrData === "object") {
+        targetSlug = slug || "";
+        fields = slugOrData;
+      } else {
+        targetSlug = slugOrData || slug || "";
+        fields = data;
+      }
+      const id = await resolver.create(targetSlug, fields);
       refreshQuery?.();
       return id;
     },
@@ -2753,7 +2803,35 @@ var NodeRenderer = ({ node, fallback }) => {
   const enrichedScope = (0, import_react12.useMemo)(() => {
     const handleCreate = () => {
       if (primarySlug && resolver) {
-        resolver.create(primarySlug).then(() => handleRefreshQuery());
+        const fields = {};
+        for (const [key, val] of Object.entries(localState)) {
+          if (key.startsWith("new_") && val != null && val !== "") {
+            fields[key.slice(4)] = val;
+          }
+        }
+        resolver.create(primarySlug, Object.keys(fields).length > 0 ? fields : void 0).then(() => {
+          for (const key of Object.keys(localState)) {
+            if (key.startsWith("new_")) handleSetLocal(key, "");
+          }
+          handleSetLocal("show_create", false);
+          handleRefreshQuery();
+        });
+      }
+    };
+    const handleUpdate = (id) => {
+      if (primarySlug && resolver) {
+        const fields = {};
+        for (const [key, val] of Object.entries(localState)) {
+          if (key.startsWith("edit_") && val != null && val !== "") {
+            fields[key.slice(5)] = val;
+          }
+        }
+        if (Object.keys(fields).length > 0) {
+          resolver.update(id, fields).then(() => {
+            handleSetLocal("editing_id", null);
+            handleRefreshQuery();
+          });
+        }
       }
     };
     const setSearch = (e) => {
@@ -2763,15 +2841,18 @@ var NodeRenderer = ({ node, fallback }) => {
     const enrichedAction = {
       ...scope.$action,
       handleCreate,
+      handleUpdate,
       setSearch
     };
-    const enrichedInstance = scope.$instance ? { ...scope.$instance, handleCreate, setSearch } : void 0;
+    const baseInstance = scope.$instance ?? { id: "", state: "", fields: {} };
+    const enrichedInstance = { ...baseInstance, handleCreate, handleUpdate, setSearch };
     return {
       ...scope,
       $action: enrichedAction,
       $instance: enrichedInstance,
       // Also add at top-level for direct access
       handleCreate,
+      handleUpdate,
       setSearch
     };
   }, [scope, primarySlug, resolver, handleRefreshQuery, handleSetLocal]);

package/dist/player/index.mjs

@@ -23,7 +23,7 @@ import {
   resolveBinding,
   usePlayerContext,
   useTheme
-} from "../chunk-ZAHMWAER.mjs";
+} from "../chunk-XWBUADY2.mjs";
 import {
   ScopeContext,
   buildLoopScope,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmapp/react",
-  "version": "0.1.0-alpha.20",
+  "version": "0.1.0-alpha.22",
   "description": "React integration for the MindMatrix Player — hooks, components, and WebSocket bridge for browser-side workflow engines",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -35,9 +35,13 @@
     "@tanstack/react-query": ">=5.0.0"
   },
   "dependencies": {
-    "@mmapp/player-core": "^0.1.0-alpha.20"
+    "@mmapp/player-core": "workspace:*"
   },
-  "publishConfig": {
-    "access": "public"
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.5.0"
   }
 }