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

package/dist/{chunk-2VJQJM7S.mjs → chunk-ZDWACXZN.mjs}

@@ -2,7 +2,7 @@
 function stub(displayName) {
   const Component = () => {
     throw new Error(
-      `<${displayName}> is a compile-time stub from @mindmatrix/react/atoms. It should only appear in .workflow.tsx files processed by the compiler. At runtime, use the ComponentTreeRenderer which resolves "${displayName}" from the component registry.`
+      `<${displayName}> is a compile-time stub from @mmapp/react/atoms. It should only appear in .workflow.tsx files processed by the compiler. At runtime, use the ComponentTreeRenderer which resolves "${displayName}" from the component registry.`
     );
   };
   Component.displayName = displayName;

package/dist/composition-BJ6QQTWT.mjs

@@ -0,0 +1,12 @@
+import {
+  ModuleOutlet,
+  Slot,
+  SlotRegistryProvider,
+  useSlotContributions
+} from "./chunk-3PL6FL6I.mjs";
+export {
+  ModuleOutlet,
+  Slot,
+  SlotRegistryProvider,
+  useSlotContributions
+};

package/dist/composition-XBGKKCI7.mjs

@@ -0,0 +1,57 @@
+// src/player/atoms/composition.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Slot = ({ children, name, fallback, className, style }) => {
+  const content = children ?? fallback;
+  if (!content) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "data-slot": name,
+      style,
+      children: content
+    }
+  );
+};
+var ModuleOutlet = ({ children, module: moduleName, basePath, className, style }) => {
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        "data-module": moduleName,
+        style,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      "data-module": moduleName,
+      style: {
+        padding: 16,
+        border: "1px dashed #cbd5e0",
+        borderRadius: 8,
+        color: "#a0aec0",
+        fontSize: 13,
+        textAlign: "center",
+        ...style
+      },
+      children: [
+        "Module: ",
+        String(moduleName ?? "unknown"),
+        basePath ? /* @__PURE__ */ jsxs("span", { children: [
+          " (",
+          String(basePath),
+          ")"
+        ] }) : null
+      ]
+    }
+  );
+};
+export {
+  ModuleOutlet,
+  Slot
+};

package/dist/content-QVPFUG4P.mjs

@@ -0,0 +1,246 @@
+// src/player/atoms/content.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Text = ({ value, children, variant, size, weight, color, align, className, style }) => {
+  const text = value ?? children;
+  const sizeMap = { xs: 11, sm: 13, md: 14, lg: 16, xl: 20, "2xl": 24 };
+  const weightMap = { light: 300, normal: 400, medium: 500, semibold: 600, bold: 700 };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      style: {
+        fontSize: size ? sizeMap[size] ?? Number(size) : void 0,
+        fontWeight: weight ? weightMap[weight] ?? weight : void 0,
+        color: variant === "muted" ? "#718096" : variant === "error" ? "#e53e3e" : variant === "success" ? "#38a169" : color,
+        textAlign: align,
+        ...style
+      },
+      children: text == null ? "" : String(text)
+    }
+  );
+};
+var Heading = ({ value, children, level, className, style }) => {
+  const text = value ?? children;
+  const sizes = { 1: 32, 2: 24, 3: 20, 4: 16, 5: 14, 6: 12 };
+  const lvl = Number(level) || 2;
+  const Tag = `h${Math.min(Math.max(lvl, 1), 6)}`;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className,
+      style: {
+        fontSize: sizes[lvl] ?? 20,
+        fontWeight: 600,
+        margin: "0 0 8px 0",
+        lineHeight: 1.3,
+        ...style
+      },
+      children: text == null ? "" : String(text)
+    }
+  );
+};
+var Field = ({ label, value, type: _type, children, className, style }) => /* @__PURE__ */ jsxs("div", { className, style: { marginBottom: 8, ...style }, children: [
+  label ? /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: 12, fontWeight: 500, color: "#718096", marginBottom: 2 }, children: String(label) }) : null,
+  /* @__PURE__ */ jsx("div", { style: { fontSize: 14 }, children: children ?? (value != null ? String(value) : /* @__PURE__ */ jsx("span", { style: { color: "#a0aec0" }, children: "\u2014" })) })
+] });
+var Image = ({ src, alt, width, height, fit, radius, className, style }) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    src,
+    alt: alt ?? "",
+    className,
+    style: {
+      width: width ? Number(width) : void 0,
+      height: height ? Number(height) : void 0,
+      objectFit: fit ?? "cover",
+      borderRadius: radius ? Number(radius) : void 0,
+      maxWidth: "100%",
+      ...style
+    }
+  }
+);
+var Badge = ({ value, children, variant, color, className, style }) => {
+  const text = value ?? children;
+  const colorMap = {
+    default: { bg: "#edf2f7", fg: "#4a5568" },
+    primary: { bg: "#ebf8ff", fg: "#2b6cb0" },
+    success: { bg: "#f0fff4", fg: "#276749" },
+    warning: { bg: "#fffaf0", fg: "#c05621" },
+    error: { bg: "#fff5f5", fg: "#c53030" },
+    info: { bg: "#ebf8ff", fg: "#2b6cb0" }
+  };
+  const c = colorMap[variant ?? "default"] ?? colorMap.default;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-block",
+        padding: "1px 8px",
+        borderRadius: 9999,
+        fontSize: 12,
+        fontWeight: 500,
+        background: color ? void 0 : c.bg,
+        color: color ?? c.fg,
+        ...style
+      },
+      children: text == null ? "" : String(text)
+    }
+  );
+};
+var ICON_MAP = {
+  "check": "\u2713",
+  "x": "\u2715",
+  "plus": "+",
+  "minus": "\u2212",
+  "arrow-right": "\u2192",
+  "arrow-left": "\u2190",
+  "arrow-up": "\u2191",
+  "arrow-down": "\u2193",
+  "search": "\u{1F50D}",
+  "home": "\u{1F3E0}",
+  "user": "\u{1F464}",
+  "settings": "\u2699",
+  "star": "\u2B50",
+  "heart": "\u2764",
+  "mail": "\u2709",
+  "phone": "\u{1F4DE}",
+  "calendar": "\u{1F4C5}",
+  "clock": "\u{1F550}",
+  "edit": "\u270E",
+  "trash": "\u{1F5D1}",
+  "download": "\u2B07",
+  "upload": "\u2B06",
+  "share": "\u2197",
+  "lock": "\u{1F512}",
+  "unlock": "\u{1F513}",
+  "eye": "\u{1F441}",
+  "eye-off": "\u{1F648}",
+  "bell": "\u{1F514}",
+  "info": "\u2139",
+  "warning": "\u26A0",
+  "error": "\u274C",
+  "loading": "\u23F3",
+  "menu": "\u2630",
+  "close": "\u2715",
+  "chevron-right": "\u203A",
+  "chevron-left": "\u2039",
+  "chevron-up": "\u2038",
+  "chevron-down": "\u02EC",
+  "copy": "\u{1F4CB}",
+  "save": "\u{1F4BE}",
+  "refresh": "\u21BB",
+  "filter": "\u23CF",
+  "sort": "\u21C5"
+};
+var Icon = ({ name, size, color, className, style }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className,
+    role: "img",
+    "aria-label": name,
+    style: {
+      fontSize: size ? Number(size) : 16,
+      color,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      ...style
+    },
+    children: ICON_MAP[name?.toLowerCase()] ?? name ?? "?"
+  }
+);
+var Alert = ({ children, variant, title, message, className, style }) => {
+  const colorMap = {
+    info: { bg: "#ebf8ff", border: "#90cdf4", fg: "#2b6cb0" },
+    success: { bg: "#f0fff4", border: "#9ae6b4", fg: "#276749" },
+    warning: { bg: "#fffaf0", border: "#fbd38d", fg: "#c05621" },
+    error: { bg: "#fff5f5", border: "#feb2b2", fg: "#c53030" }
+  };
+  const c = colorMap[variant ?? "info"] ?? colorMap.info;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      role: "alert",
+      style: {
+        padding: "12px 16px",
+        borderRadius: 6,
+        border: `1px solid ${c.border}`,
+        background: c.bg,
+        color: c.fg,
+        fontSize: 14,
+        ...style
+      },
+      children: [
+        title ? /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: 4 }, children: String(title) }) : null,
+        message ? /* @__PURE__ */ jsx("div", { children: String(message) }) : null,
+        children
+      ]
+    }
+  );
+};
+var EmptyState = ({ children, title, description, icon, className, style }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className,
+    style: {
+      textAlign: "center",
+      padding: "32px 16px",
+      color: "#a0aec0",
+      ...style
+    },
+    children: [
+      icon ? /* @__PURE__ */ jsx("div", { style: { fontSize: 40, marginBottom: 12 }, children: ICON_MAP[icon] ?? icon }) : null,
+      title ? /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 600, color: "#4a5568", marginBottom: 4 }, children: String(title) }) : null,
+      description ? /* @__PURE__ */ jsx("div", { style: { fontSize: 14, marginBottom: 8 }, children: String(description) }) : null,
+      children
+    ]
+  }
+);
+var Markdown = ({ value, children, className, style }) => {
+  const text = String(value ?? children ?? "");
+  const html = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/`(.+?)`/g, '<code style="background:#edf2f7;padding:1px 4px;border-radius:3px;font-size:13px">$1</code>').replace(/\n/g, "<br/>");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: { fontSize: 14, lineHeight: 1.6, ...style },
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+};
+var Progress = ({ value, max, label, variant, className, style }) => {
+  const pct = Math.min(100, Math.max(0, Number(value) / (Number(max) || 100) * 100));
+  const colorMap = {
+    default: "#3182ce",
+    success: "#38a169",
+    warning: "#dd6b20",
+    error: "#e53e3e"
+  };
+  const color = colorMap[variant ?? "default"] ?? colorMap.default;
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...style }, children: [
+    label ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, marginBottom: 4, color: "#718096" }, children: String(label) }) : null,
+    /* @__PURE__ */ jsx("div", { style: { height: 8, background: "#edf2f7", borderRadius: 4, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { height: "100%", width: `${pct}%`, background: color, borderRadius: 4, transition: "width 0.3s" } }) })
+  ] });
+};
+var Separator = ({ className, style }) => /* @__PURE__ */ jsx(
+  "hr",
+  {
+    className,
+    style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "16px 0", ...style }
+  }
+);
+export {
+  Alert,
+  Badge,
+  EmptyState,
+  Field,
+  Heading,
+  Icon,
+  Image,
+  Markdown,
+  Progress,
+  Separator,
+  Text
+};

package/dist/control-flow-CBREHWJW.mjs

@@ -0,0 +1,35 @@
+import {
+  ScopeContext,
+  buildLoopScope,
+  useScope
+} from "./chunk-HHMWR6NA.mjs";
+
+// src/player/atoms/control-flow.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var Show = ({ when, fallback, children }) => {
+  if (when) return /* @__PURE__ */ jsx(Fragment, { children });
+  if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  return null;
+};
+var Each = ({ items, as: asName, keyField, children, renderItem, emptyState, className, style }) => {
+  const parentScope = useScope();
+  const itemArray = Array.isArray(items) ? items : [];
+  const varName = asName ?? "item";
+  const keyProp = keyField ?? "id";
+  if (itemArray.length === 0) {
+    if (emptyState) return /* @__PURE__ */ jsx(Fragment, { children: emptyState });
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className, style, children: itemArray.map((item, index) => {
+    const loopScope = buildLoopScope(parentScope, item, index, varName);
+    const key = item && typeof item === "object" && keyProp in item ? String(item[keyProp]) : String(index);
+    if (typeof renderItem === "function") {
+      return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: loopScope, children: renderItem(item, index) }, key);
+    }
+    return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: loopScope, children }, key);
+  }) });
+};
+export {
+  Each,
+  Show
+};

package/dist/control-flow-FWBOI6SM.mjs

@@ -0,0 +1,35 @@
+import {
+  ScopeContext,
+  buildLoopScope,
+  useScope
+} from "./chunk-FB3WCZAU.mjs";
+
+// src/player/atoms/control-flow.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var Show = ({ when, fallback, children }) => {
+  if (when) return /* @__PURE__ */ jsx(Fragment, { children });
+  if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  return null;
+};
+var Each = ({ items, as: asName, keyField, children, renderItem, emptyState, className, style }) => {
+  const parentScope = useScope();
+  const itemArray = Array.isArray(items) ? items : [];
+  const varName = asName ?? "item";
+  const keyProp = keyField ?? "id";
+  if (itemArray.length === 0) {
+    if (emptyState) return /* @__PURE__ */ jsx(Fragment, { children: emptyState });
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className, style, children: itemArray.map((item, index) => {
+    const loopScope = buildLoopScope(parentScope, item, index, varName);
+    const key = item && typeof item === "object" && keyProp in item ? String(item[keyProp]) : String(index);
+    if (typeof renderItem === "function") {
+      return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: loopScope, children: renderItem(item, index) }, key);
+    }
+    return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: loopScope, children }, key);
+  }) });
+};
+export {
+  Each,
+  Show
+};

package/dist/control-flow-ZWUGCDSP.mjs

@@ -0,0 +1,35 @@
+import {
+  ScopeContext,
+  buildLoopScope,
+  useScope
+} from "./chunk-WV7DVCP6.mjs";
+
+// src/player/atoms/control-flow.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var Show = ({ when, fallback, children }) => {
+  if (when) return /* @__PURE__ */ jsx(Fragment, { children });
+  if (fallback) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  return null;
+};
+var Each = ({ items, as: asName, keyField, children, renderItem, emptyState, className, style }) => {
+  const parentScope = useScope();
+  const itemArray = Array.isArray(items) ? items : [];
+  const varName = asName ?? "item";
+  const keyProp = keyField ?? "id";
+  if (itemArray.length === 0) {
+    if (emptyState) return /* @__PURE__ */ jsx(Fragment, { children: emptyState });
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className, style, children: itemArray.map((item, index) => {
+    const loopScope = buildLoopScope(parentScope, item, index, varName);
+    const key = item && typeof item === "object" && keyProp in item ? String(item[keyProp]) : String(index);
+    if (typeof renderItem === "function") {
+      return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: loopScope, children: renderItem(item, index) }, key);
+    }
+    return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: loopScope, children }, key);
+  }) });
+};
+export {
+  Each,
+  Show
+};

package/dist/data-WCMIZYKD.mjs

@@ -0,0 +1,97 @@
+// src/player/atoms/data.tsx
+import { useState, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Table = ({ data, columns, rows, onRowClick, striped, compact, className, style }) => {
+  const items = Array.isArray(data ?? rows) ? data ?? rows : [];
+  const cols = Array.isArray(columns) ? columns.map(
+    (c) => typeof c === "string" ? { key: c, label: c, header: c } : c
+  ) : items.length > 0 ? Object.keys(items[0]).filter((k) => k !== "id" && !k.startsWith("_")).map((k) => ({ key: k, label: k, header: k })) : [];
+  const pad = compact ? "4px 8px" : "8px 12px";
+  return /* @__PURE__ */ jsx("div", { className, style: { overflow: "auto", ...style }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 14 }, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: cols.map((col, i) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        style: {
+          textAlign: "left",
+          padding: pad,
+          fontWeight: 600,
+          fontSize: 12,
+          color: "#718096",
+          borderBottom: "2px solid #e2e8f0",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em"
+        },
+        children: String(col.label ?? col.header ?? col.key ?? "")
+      },
+      String(col.key ?? i)
+    )) }) }),
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      items.map((row, ri) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          onClick: typeof onRowClick === "function" ? () => onRowClick(row) : void 0,
+          style: {
+            cursor: typeof onRowClick === "function" ? "pointer" : void 0,
+            background: striped && ri % 2 === 1 ? "#f7fafc" : void 0
+          },
+          children: cols.map((col, ci) => {
+            const val = row[col.key];
+            return /* @__PURE__ */ jsx(
+              "td",
+              {
+                style: { padding: pad, borderBottom: "1px solid #edf2f7" },
+                children: val != null ? String(val) : /* @__PURE__ */ jsx("span", { style: { color: "#cbd5e0" }, children: "\u2014" })
+              },
+              String(col.key ?? ci)
+            );
+          })
+        },
+        String(row.id ?? ri)
+      )),
+      items.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: cols.length,
+          style: { padding: "24px 12px", textAlign: "center", color: "#a0aec0", fontStyle: "italic" },
+          children: "No data"
+        }
+      ) }) : null
+    ] })
+  ] }) });
+};
+var DataGrid = ({ data, columns, onRowClick, searchable, className, style, children }) => {
+  const [search, setSearch] = useState("");
+  const items = Array.isArray(data) ? data : [];
+  const filtered = useMemo(() => {
+    if (!search) return items;
+    const q = search.toLowerCase();
+    return items.filter(
+      (item) => Object.values(item).some((v) => v != null && String(v).toLowerCase().includes(q))
+    );
+  }, [items, search]);
+  return /* @__PURE__ */ jsxs("div", { className, style, children: [
+    searchable ? /* @__PURE__ */ jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search...",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        style: {
+          padding: "6px 12px",
+          border: "1px solid #e2e8f0",
+          borderRadius: 6,
+          fontSize: 14,
+          width: "100%",
+          boxSizing: "border-box"
+        }
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx(Table, { data: filtered, columns, onRowClick, striped: true }),
+    children
+  ] });
+};
+export {
+  DataGrid,
+  Table
+};