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

package/dist/input-PUOZDNSI.mjs

@@ -0,0 +1,222 @@
+// 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) => {
+    setLocalValue(e.target.value);
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+  }, [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) => {
+    setLocalValue(e.target.value);
+    if (typeof onChange === "function") onChange(e);
+  }, [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/layout-RATDMCLP.mjs

@@ -0,0 +1,106 @@
+// src/player/atoms/layout.tsx
+import { jsx } from "react/jsx-runtime";
+var filterHtmlProps = (props) => {
+  const html = {};
+  for (const [k, v] of Object.entries(props)) {
+    if (["className", "style", "id", "role", "tabIndex", "title", "onClick", "data-node-id"].includes(k)) {
+      html[k] = v;
+    }
+    if (k.startsWith("data-") || k.startsWith("aria-")) html[k] = v;
+  }
+  return html;
+};
+var Stack = ({ children, gap, padding, align, justify, className, style, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...filterHtmlProps(rest),
+    className,
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: gap != null ? Number(gap) * 4 : void 0,
+      padding: padding != null ? Number(padding) * 4 : void 0,
+      alignItems: align,
+      justifyContent: justify,
+      ...style
+    },
+    children
+  }
+);
+var Row = ({ children, gap, padding, align, justify, wrap, className, style, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...filterHtmlProps(rest),
+    className,
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      gap: gap != null ? Number(gap) * 4 : void 0,
+      padding: padding != null ? Number(padding) * 4 : void 0,
+      alignItems: align ?? "center",
+      justifyContent: justify,
+      flexWrap: wrap ? "wrap" : void 0,
+      ...style
+    },
+    children
+  }
+);
+var Grid = ({ children, columns, gap, padding, minChildWidth, className, style, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...filterHtmlProps(rest),
+    className,
+    style: {
+      display: "grid",
+      gridTemplateColumns: minChildWidth ? `repeat(auto-fill, minmax(${Number(minChildWidth)}px, 1fr))` : columns ? `repeat(${Number(columns)}, 1fr)` : "repeat(auto-fill, minmax(200px, 1fr))",
+      gap: gap != null ? Number(gap) * 4 : 16,
+      padding: padding != null ? Number(padding) * 4 : void 0,
+      ...style
+    },
+    children
+  }
+);
+var Column = ({ children, span, className, style, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...filterHtmlProps(rest),
+    className,
+    style: {
+      gridColumn: span ? `span ${Number(span)}` : void 0,
+      ...style
+    },
+    children
+  }
+);
+var Divider = ({ orientation, className, style }) => /* @__PURE__ */ jsx(
+  "hr",
+  {
+    className,
+    style: {
+      border: "none",
+      borderTop: orientation === "vertical" ? "none" : "1px solid #e2e8f0",
+      borderLeft: orientation === "vertical" ? "1px solid #e2e8f0" : "none",
+      margin: orientation === "vertical" ? "0 8px" : "8px 0",
+      alignSelf: orientation === "vertical" ? "stretch" : void 0,
+      ...style
+    }
+  }
+);
+var Spacer = ({ size, className, style }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className,
+    style: {
+      flex: size ? `0 0 ${Number(size) * 4}px` : "1",
+      ...style
+    }
+  }
+);
+export {
+  Column,
+  Divider,
+  Grid,
+  Row,
+  Spacer,
+  Stack
+};

package/dist/navigation-VCT7ZBMA.mjs

@@ -0,0 +1,15 @@
+import {
+  NavLink,
+  RoleGuard,
+  Route,
+  Router,
+  usePlayerRouter
+} from "./chunk-HULEMSN2.mjs";
+import "./chunk-WV7DVCP6.mjs";
+export {
+  NavLink,
+  RoleGuard,
+  Route,
+  Router,
+  usePlayerRouter
+};

package/dist/navigation-WFV7YWOU.mjs

@@ -0,0 +1,14 @@
+import {
+  NavLink,
+  RoleGuard,
+  Route,
+  Router,
+  usePlayerRouter
+} from "./chunk-CL6FYZ43.mjs";
+export {
+  NavLink,
+  RoleGuard,
+  Route,
+  Router,
+  usePlayerRouter
+};

package/dist/player/index.d.mts

@@ -1,14 +1,40 @@
-import { S as ScopeData } from '../builtin-atoms-B0AUDsW7.mjs';
-export { A as AtomComponent, f as AtomRegistry, d as ComponentNode, e as ComponentTree, C as ComponentTreeRenderer, a as ComponentTreeRendererProps, D as DevPlayer, b as DevPlayerProps, c as builtinAtoms } from '../builtin-atoms-B0AUDsW7.mjs';
-import 'react';
+export { a3 as ActionDefinition, J as ActionScope, V as ApiDataSource, A as ApiResolverConfig, x as AtomComponent, y as AtomRegistry, n as AtomRegistryImpl, K as AtomRegistryInterface, M as BindingClass, R as BuildScopeOptions, v as ComponentNode, w as ComponentTree, C as ComponentTreeRenderer, q as ComponentTreeRendererProps, T as DataSource, U as DataSourceResult, D as DevPlayer, s as DevPlayerProps, z as ExperienceNode, E as ExperienceRenderer, a as ExperienceRendererProps, L as ExprClass, a8 as ExpressionEvaluator, a9 as FacetEntry, $ as FieldDefinition, I as InstanceData, F as PlayerAuth, c as PlayerContextValue, P as PlayerProvider, b as PlayerProviderProps, B as PlayerResolver, G as PlayerRouter, a6 as QueryParams, a7 as QueryResult, Y as RefDataSource, a2 as RoleDefinition, S as ScopeContext, H as ScopeData, a0 as StateDefinition, X as StaticDataSource, a1 as TransitionDefinition, a4 as TransitionInfo, a5 as TransitionResult, W as WorkflowDataSource, Z as WorkflowDefinition, _ as WorkflowInstance, h as buildActionScope, i as buildEvalContext, l as buildLoopScope, k as buildScope, t as builtinAtoms, f as builtinFunctions, Q as classifyBinding, d as createApiResolver, o as createCoreAtomRegistry, e as evaluateExpression, p as mergeRegistries, m as mergeScope, g as resolveAllBindings, r as resolveBinding, O as setWasmModule, u as usePlayerContext, j as useScope, N as useTheme } from '../builtin-atoms-C-sNyYJl.mjs';
+import React__default from 'react';
 
-/** Minimal expression evaluator for the standalone player. */
+/**
+ * Design Tokens — Default theme values for the player runtime.
+ *
+ * Tokens are resolved via `resolveTokens()` in ExperienceRenderer.
+ * Users can override via PlayerProvider's `theme` prop.
+ */
+declare const DEFAULT_DESIGN_TOKENS: Record<string, string>;
 
-/** Check if a string contains {{...}} expressions */
-declare function containsExpression(value: unknown): boolean;
-/** Evaluate a simple expression against scopes */
-declare function evaluateExpression(expr: string, scopes: Partial<ScopeData>): unknown;
-/** Evaluate a prop value: resolve {{expr}} templates, pass through non-strings */
-declare function evaluateProp(value: unknown, scopes: Partial<ScopeData>): unknown;
+/**
+ * Composition Atoms — Slot, ModuleOutlet, SlotRegistry
+ * Module composition injection points with registry-based contribution resolution.
+ */
 
-export { ScopeData, containsExpression, evaluateExpression, evaluateProp };
+interface SlotContribution {
+    name: string;
+    tree: React__default.ReactNode;
+    priority?: number;
+}
+declare const SlotRegistryProvider: React__default.FC<{
+    contributions: SlotContribution[];
+    children: React__default.ReactNode;
+}>;
+declare function useSlotContributions(name: string): SlotContribution[];
+
+/**
+ * Navigation Atoms — Router, Route, NavLink, RoleGuard
+ * Client-side routing with path matching and active state.
+ */
+
+interface RouterContextValue {
+    path: string;
+    navigate: (to: string) => void;
+    params: Record<string, string>;
+}
+declare function usePlayerRouter(): RouterContextValue;
+
+export { DEFAULT_DESIGN_TOKENS, type SlotContribution, SlotRegistryProvider, usePlayerRouter, useSlotContributions };

package/dist/player/index.d.ts

@@ -1,14 +1,40 @@
-import { S as ScopeData } from '../builtin-atoms-B0AUDsW7.js';
-export { A as AtomComponent, f as AtomRegistry, d as ComponentNode, e as ComponentTree, C as ComponentTreeRenderer, a as ComponentTreeRendererProps, D as DevPlayer, b as DevPlayerProps, c as builtinAtoms } from '../builtin-atoms-B0AUDsW7.js';
-import 'react';
+export { a3 as ActionDefinition, J as ActionScope, V as ApiDataSource, A as ApiResolverConfig, x as AtomComponent, y as AtomRegistry, n as AtomRegistryImpl, K as AtomRegistryInterface, M as BindingClass, R as BuildScopeOptions, v as ComponentNode, w as ComponentTree, C as ComponentTreeRenderer, q as ComponentTreeRendererProps, T as DataSource, U as DataSourceResult, D as DevPlayer, s as DevPlayerProps, z as ExperienceNode, E as ExperienceRenderer, a as ExperienceRendererProps, L as ExprClass, a8 as ExpressionEvaluator, a9 as FacetEntry, $ as FieldDefinition, I as InstanceData, F as PlayerAuth, c as PlayerContextValue, P as PlayerProvider, b as PlayerProviderProps, B as PlayerResolver, G as PlayerRouter, a6 as QueryParams, a7 as QueryResult, Y as RefDataSource, a2 as RoleDefinition, S as ScopeContext, H as ScopeData, a0 as StateDefinition, X as StaticDataSource, a1 as TransitionDefinition, a4 as TransitionInfo, a5 as TransitionResult, W as WorkflowDataSource, Z as WorkflowDefinition, _ as WorkflowInstance, h as buildActionScope, i as buildEvalContext, l as buildLoopScope, k as buildScope, t as builtinAtoms, f as builtinFunctions, Q as classifyBinding, d as createApiResolver, o as createCoreAtomRegistry, e as evaluateExpression, p as mergeRegistries, m as mergeScope, g as resolveAllBindings, r as resolveBinding, O as setWasmModule, u as usePlayerContext, j as useScope, N as useTheme } from '../builtin-atoms-C-sNyYJl.js';
+import React__default from 'react';
 
-/** Minimal expression evaluator for the standalone player. */
+/**
+ * Design Tokens — Default theme values for the player runtime.
+ *
+ * Tokens are resolved via `resolveTokens()` in ExperienceRenderer.
+ * Users can override via PlayerProvider's `theme` prop.
+ */
+declare const DEFAULT_DESIGN_TOKENS: Record<string, string>;
 
-/** Check if a string contains {{...}} expressions */
-declare function containsExpression(value: unknown): boolean;
-/** Evaluate a simple expression against scopes */
-declare function evaluateExpression(expr: string, scopes: Partial<ScopeData>): unknown;
-/** Evaluate a prop value: resolve {{expr}} templates, pass through non-strings */
-declare function evaluateProp(value: unknown, scopes: Partial<ScopeData>): unknown;
+/**
+ * Composition Atoms — Slot, ModuleOutlet, SlotRegistry
+ * Module composition injection points with registry-based contribution resolution.
+ */
 
-export { ScopeData, containsExpression, evaluateExpression, evaluateProp };
+interface SlotContribution {
+    name: string;
+    tree: React__default.ReactNode;
+    priority?: number;
+}
+declare const SlotRegistryProvider: React__default.FC<{
+    contributions: SlotContribution[];
+    children: React__default.ReactNode;
+}>;
+declare function useSlotContributions(name: string): SlotContribution[];
+
+/**
+ * Navigation Atoms — Router, Route, NavLink, RoleGuard
+ * Client-side routing with path matching and active state.
+ */
+
+interface RouterContextValue {
+    path: string;
+    navigate: (to: string) => void;
+    params: Record<string, string>;
+}
+declare function usePlayerRouter(): RouterContextValue;
+
+export { DEFAULT_DESIGN_TOKENS, type SlotContribution, SlotRegistryProvider, usePlayerRouter, useSlotContributions };