@optiaxiom/react 1.9.3 → 1.9.5

package/dist/esm/packages/react/src/proteus-document/ProteusDocumentPathContext.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [ProteusDocumentPathProvider, useProteusDocumentPathContext] = createContext("@optiaxiom/react/ProteusDocumentPath", {
+  path: ""
+});
+
+export { ProteusDocumentPathProvider, useProteusDocumentPathContext };

package/dist/esm/packages/react/src/{block-document/BlockDocumentRenderer.js → proteus-document/ProteusDocumentRenderer.js}

@@ -1,32 +1,32 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useState } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { Disclosure } from '../disclosure/Disclosure.js';
 import { DisclosureContent } from '../disclosure/DisclosureContent.js';
 import { DisclosureTrigger } from '../disclosure/DisclosureTrigger.js';
-import { Flex } from '../flex/Flex.js';
 import { Group } from '../group/Group.js';
 import { Heading } from '../heading/Heading.js';
 import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import 'react';
 import '../field/FieldContext.js';
 import '../utils/conditions.js';
 import '../utils/isHoverSupported.js';
 import { Text } from '../text/Text.js';
-import { BlockDocumentProvider } from './BlockDocumentContext.js';
-import { BlockElement } from './BlockElement.js';
-import { BlockDocumentSchema } from './schemas.js';
+import { ProteusDocumentProvider } from './ProteusDocumentContext.js';
+import { ProteusElement } from './ProteusElement.js';
+import { safeParseDocument } from './schemas.js';
 
-function BlockDocumentRenderer({
+function ProteusDocumentRenderer({
   collapsible,
   data = {},
   defaultOpen = true,
   element: elementProp,
   onCancelAction,
   onDataChange,
+  onMessage,
   onOpenChange,
   onToolCall,
   open: openProp,
@@ -37,12 +37,11 @@ function BlockDocumentRenderer({
     onChange: onOpenChange,
     prop: openProp
   });
-  const [visibility, setVisibility] = useState({});
-  const result = BlockDocumentSchema.safeParse(elementProp);
+  const result = safeParseDocument(elementProp);
   if (!result.success) ;
   const Trigger = collapsible ? DisclosureTrigger : Box;
   return /* @__PURE__ */ jsx(
-    BlockDocumentProvider,
+    ProteusDocumentProvider,
     {
       data,
       onCancelAction,
@@ -50,19 +49,15 @@ function BlockDocumentRenderer({
         onDataChange?.({ ...data, [name]: value });
       }),
       onEvent: useEffectEvent(
-        (event, value) => {
+        (event) => {
           if ("tool" in event) {
             onToolCall?.(event.tool);
-          } else if (event.action === "setVisibility") {
-            if (event.when && !(value || "").match(new RegExp(event.when))) {
-              return;
-            }
-            setVisibility((visibility2) => ({ ...visibility2, ...event.params }));
+          } else if ("message" in event) {
+            onMessage?.(event.message);
           }
         }
       ),
       readOnly,
-      visibility,
       children: /* @__PURE__ */ jsx(
         Disclosure,
         {
@@ -99,8 +94,8 @@ function BlockDocumentRenderer({
                     /* @__PURE__ */ jsx(Heading, { fontSize: "lg", fontWeight: "600", level: "2", children: result.data.title }),
                     result.data.subtitle && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", fontSize: "sm", children: result.data.subtitle })
                   ] }),
-                  /* @__PURE__ */ jsx(BlockElement, { element: result.data.body }),
-                  result.data.actions && result.data.actions.length > 0 && !readOnly && /* @__PURE__ */ jsx(Flex, { gap: "16", w: "full", children: /* @__PURE__ */ jsx(BlockElement, { element: result.data.actions }) })
+                  /* @__PURE__ */ jsx(ProteusElement, { element: result.data.body }),
+                  !!result.data.actions && !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.actions }) })
                 ]
               }
             )
@@ -110,6 +105,6 @@ function BlockDocumentRenderer({
     }
   );
 }
-BlockDocumentRenderer.displayName = "@optiaxiom/react/BlockDocumentRenderer";
+ProteusDocumentRenderer.displayName = "@optiaxiom/react/ProteusDocumentRenderer";
 
-export { BlockDocumentRenderer };
+export { ProteusDocumentRenderer };

package/dist/esm/packages/react/src/proteus-document/ProteusElement.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { ProteusAction } from './ProteusAction.js';
+import { ProteusCancelAction } from './ProteusCancelAction.js';
+import { ProteusField } from './ProteusField.js';
+import { ProteusGroup } from './ProteusGroup.js';
+import { ProteusHeading } from './ProteusHeading.js';
+import { ProteusImage } from './ProteusImage.js';
+import { ProteusInput } from './ProteusInput.js';
+import { ProteusLink } from './ProteusLink.js';
+import { ProteusMap } from './ProteusMap.js';
+import { ProteusRange } from './ProteusRange.js';
+import { ProteusSelect } from './ProteusSelect.js';
+import { ProteusSelectContent } from './ProteusSelectContent.js';
+import { ProteusSelectTrigger } from './ProteusSelectTrigger.js';
+import { ProteusSeparator } from './ProteusSeparator.js';
+import { ProteusShow } from './ProteusShow.js';
+import { ProteusText } from './ProteusText.js';
+import { ProteusTextarea } from './ProteusTextarea.js';
+import { ProteusValue } from './ProteusValue.js';
+import { safeParseElement } from './schemas.js';
+
+const ProteusElement = ({
+  element: elementProp
+}) => {
+  if (!elementProp) {
+    return null;
+  } else if (typeof elementProp === "string" || typeof elementProp === "number") {
+    return elementProp;
+  } else if (Array.isArray(elementProp)) {
+    return /* @__PURE__ */ jsx(Fragment, { children: elementProp.map((element2, index) => /* @__PURE__ */ jsx(ProteusElement, { element: element2 }, index)) });
+  }
+  const result = safeParseElement(elementProp);
+  if (!result.success) {
+    return null;
+  }
+  const element = result.data;
+  switch (element.$type) {
+    case "Action":
+      return /* @__PURE__ */ jsx(ProteusAction, { ...omitType(element) });
+    case "CancelAction":
+      return /* @__PURE__ */ jsx(ProteusCancelAction, { ...omitType(element) });
+    case "Field":
+      return /* @__PURE__ */ jsx(ProteusField, { ...omitType(element) });
+    case "Group":
+      return /* @__PURE__ */ jsx(ProteusGroup, { ...omitType(element) });
+    case "Heading":
+      return /* @__PURE__ */ jsx(ProteusHeading, { ...omitType(element) });
+    case "Image":
+      return /* @__PURE__ */ jsx(ProteusImage, { ...omitType(element) });
+    case "Input":
+      return /* @__PURE__ */ jsx(ProteusInput, { ...omitType(element) });
+    case "Link":
+      return /* @__PURE__ */ jsx(ProteusLink, { ...omitType(element) });
+    case "Map":
+      return /* @__PURE__ */ jsx(
+        ProteusMap,
+        {
+          ...omitType(element)
+        }
+      );
+    case "Range":
+      return /* @__PURE__ */ jsx(ProteusRange, { ...omitType(element) });
+    case "Select":
+      return /* @__PURE__ */ jsx(ProteusSelect, { ...omitType(element) });
+    case "SelectContent":
+      return /* @__PURE__ */ jsx(ProteusSelectContent, { ...omitType(element) });
+    case "SelectTrigger":
+      return /* @__PURE__ */ jsx(ProteusSelectTrigger, { ...omitType(element) });
+    case "Separator":
+      return /* @__PURE__ */ jsx(ProteusSeparator, { ...omitType(element) });
+    case "Show":
+      return /* @__PURE__ */ jsx(
+        ProteusShow,
+        {
+          ...omitType(element)
+        }
+      );
+    case "Text":
+      return /* @__PURE__ */ jsx(ProteusText, { ...omitType(element) });
+    case "Textarea":
+      return /* @__PURE__ */ jsx(ProteusTextarea, { ...omitType(element) });
+    case "Value":
+      return /* @__PURE__ */ jsx(
+        ProteusValue,
+        {
+          ...omitType(element)
+        }
+      );
+    default:
+      return null;
+  }
+};
+ProteusElement.displayName = "@optiaxiom/react/ProteusElement";
+const omitType = (obj) => {
+  const { $type: _$type, ...rest } = obj;
+  return rest;
+};
+
+export { ProteusElement };

package/dist/esm/packages/react/src/proteus-document/ProteusField.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Field } from '../field/Field.js';
+import '../field/FieldLabel.js';
+import { ProteusElement } from './ProteusElement.js';
+
+function ProteusField({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Field, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+}
+ProteusField.displayName = "@optiaxiom/react/ProteusField";
+
+export { ProteusField };

package/dist/esm/packages/react/src/proteus-document/ProteusGroup.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Group } from '../group/Group.js';
+import { ProteusElement } from './ProteusElement.js';
+
+function ProteusGroup({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Group, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+}
+ProteusGroup.displayName = "@optiaxiom/react/ProteusGroup";
+
+export { ProteusGroup };

package/dist/esm/packages/react/src/proteus-document/ProteusHeading.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Heading } from '../heading/Heading.js';
+import { ProteusElement } from './ProteusElement.js';
+
+function ProteusHeading({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Heading, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+}
+ProteusHeading.displayName = "@optiaxiom/react/ProteusHeading";
+
+export { ProteusHeading };

package/dist/esm/packages/react/src/proteus-document/ProteusImage.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function ProteusImage(props) {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, display: "block", objectFit: "cover", ...props, children: /* @__PURE__ */ jsx("img", {}) });
+}
+ProteusImage.displayName = "@optiaxiom/react/ProteusImage";
+
+export { ProteusImage };

package/dist/esm/packages/react/src/{block-document/BlockInput.js → proteus-document/ProteusInput.js}

@@ -4,11 +4,11 @@ import { Input } from '../input/Input.js';
 import '../input/InputAddon.js';
 import '../input/InputControl.js';
 import '../input/InputRoot.js';
-import { useBlockDocumentContext } from './BlockDocumentContext.js';
+import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 
-function BlockInput({ onValueChange, ...props }) {
-  const { data, onDataChange, onEvent, readOnly } = useBlockDocumentContext(
-    "@optiaxiom/react/BlockInput"
+function ProteusInput(props) {
+  const { data, onDataChange, readOnly } = useProteusDocumentContext(
+    "@optiaxiom/react/ProteusInput"
   );
   return /* @__PURE__ */ jsx(
     Input,
@@ -18,15 +18,12 @@ function BlockInput({ onValueChange, ...props }) {
         if (props.name) {
           onDataChange?.(props.name, value);
         }
-        if (onValueChange) {
-          onEvent(onValueChange, value);
-        }
       },
       readOnly,
       value: props.name ? data[props.name] : ""
     }
   );
 }
-BlockInput.displayName = "@optiaxiom/react/BlockInput";
+ProteusInput.displayName = "@optiaxiom/react/ProteusInput";
 
-export { BlockInput };
+export { ProteusInput };

package/dist/esm/packages/react/src/proteus-document/ProteusLink.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Link } from '../link/Link.js';
+import { ProteusElement } from './ProteusElement.js';
+
+function ProteusLink({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Link, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+}
+ProteusLink.displayName = "@optiaxiom/react/ProteusLink";
+
+export { ProteusLink };

package/dist/esm/packages/react/src/proteus-document/ProteusMap.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useProteusDocumentPathContext, ProteusDocumentPathProvider } from './ProteusDocumentPathContext.js';
+import { ProteusElement } from './ProteusElement.js';
+import { useProteusValue } from './useProteusValue.js';
+
+function ProteusMap({
+  children,
+  path
+}) {
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/react/ProteusMap"
+  );
+  const array = useProteusValue(path);
+  if (!Array.isArray(array)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: array.map((_, index) => /* @__PURE__ */ jsx(
+    ProteusDocumentPathProvider,
+    {
+      path: `${path.startsWith("/") ? path : `${parentPath}/${path}`}/${index}`,
+      children: /* @__PURE__ */ jsx(ProteusElement, { element: children })
+    },
+    index
+  )) });
+}
+ProteusMap.displayName = "@optiaxiom/react/ProteusMap";
+
+export { ProteusMap };

package/dist/esm/packages/react/src/{block-document/BlockRange.js → proteus-document/ProteusRange.js}

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { Range } from '../range/Range.js';
 
-function BlockRange(props) {
+function ProteusRange(props) {
   return /* @__PURE__ */ jsx(Range, { ...props });
 }
-BlockRange.displayName = "@optiaxiom/react/BlockRange";
+ProteusRange.displayName = "@optiaxiom/react/ProteusRange";
 
-export { BlockRange };
+export { ProteusRange };

package/dist/esm/packages/react/src/proteus-document/ProteusSelect.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { Select } from '../select/Select.js';
+import '../select/SelectContent.js';
+import '../select/SelectTrigger.js';
+import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { ProteusElement } from './ProteusElement.js';
+
+function ProteusSelect({
+  children,
+  options = [],
+  ...props
+}) {
+  const { data, onDataChange, readOnly } = useProteusDocumentContext(
+    "@optiaxiom/react/ProteusSelect"
+  );
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const value = props.name ? data[props.name] : options[0]?.value ?? "";
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ...props,
+      onValueChange: (value2) => {
+        if (readOnly) {
+          return;
+        }
+        if (props.name) {
+          onDataChange?.(props.name, value2);
+        }
+      },
+      options,
+      value,
+      children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children })
+    }
+  );
+}
+ProteusSelect.displayName = "@optiaxiom/react/ProteusSelect";
+
+export { ProteusSelect };

package/dist/esm/packages/react/src/{block-document/BlockSelectContent.js → proteus-document/ProteusSelectContent.js}

@@ -4,9 +4,9 @@ import '../select/Select.js';
 import { SelectContent } from '../select/SelectContent.js';
 import '../select/SelectTrigger.js';
 
-function BlockSelectContent(props) {
+function ProteusSelectContent(props) {
   return /* @__PURE__ */ jsx(SelectContent, { ...props });
 }
-BlockSelectContent.displayName = "@optiaxiom/react/BlockSelectContent";
+ProteusSelectContent.displayName = "@optiaxiom/react/ProteusSelectContent";
 
-export { BlockSelectContent };
+export { ProteusSelectContent };

package/dist/esm/packages/react/src/proteus-document/ProteusSelectTrigger.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import '../select/Select.js';
+import '../select/SelectContent.js';
+import { SelectTrigger } from '../select/SelectTrigger.js';
+import { ProteusElement } from './ProteusElement.js';
+
+function ProteusSelectTrigger({
+  children,
+  ...props
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) {
+  return /* @__PURE__ */ jsx(SelectTrigger, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+}
+ProteusSelectTrigger.displayName = "@optiaxiom/react/ProteusSelectTrigger";
+
+export { ProteusSelectTrigger };

package/dist/esm/packages/react/src/{block-document/BlockSeparator.js → proteus-document/ProteusSeparator.js}

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { Separator } from '../separator/Separator.js';
 
-function BlockSeparator(props) {
+function ProteusSeparator(props) {
   return /* @__PURE__ */ jsx(Separator, { ...props });
 }
-BlockSeparator.displayName = "@optiaxiom/react/BlockSeparator";
+ProteusSeparator.displayName = "@optiaxiom/react/ProteusSeparator";
 
-export { BlockSeparator };
+export { ProteusSeparator };

package/dist/esm/packages/react/src/proteus-document/ProteusShow.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { getProteusValue } from './getProteusValue.js';
+import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
+import { ProteusElement } from './ProteusElement.js';
+
+function ProteusShow({
+  children,
+  when
+}) {
+  const { data } = useProteusDocumentContext("@optiaxiom/react/ProteusShow");
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/react/ProteusShow"
+  );
+  const conditions = Array.isArray(when) ? when : [when];
+  const shouldShow = conditions.every(
+    (condition) => evaluateCondition(condition, data, parentPath)
+  );
+  if (!shouldShow) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ProteusElement, { element: children });
+}
+function evaluateCondition(condition, data, parentPath) {
+  if (!condition) {
+    return true;
+  }
+  if ("and" in condition) {
+    return condition.and.every(
+      (cond) => evaluateCondition(cond, data, parentPath)
+    );
+  }
+  if ("or" in condition) {
+    return condition.or.some(
+      (cond) => evaluateCondition(cond, data, parentPath)
+    );
+  }
+  if ("!!" in condition) {
+    const value = resolveValue(condition["!!"], data, parentPath);
+    return !!value;
+  }
+  if ("==" in condition) {
+    const [left, right] = condition["=="];
+    return resolveValue(left, data, parentPath) === resolveValue(right, data, parentPath);
+  } else if ("!=" in condition) {
+    const [left, right] = condition["!="];
+    return resolveValue(left, data, parentPath) !== resolveValue(right, data, parentPath);
+  } else if ("<" in condition) {
+    const [left, right] = condition["<"];
+    const leftVal = resolveValue(left, data, parentPath);
+    const rightVal = resolveValue(right, data, parentPath);
+    return typeof leftVal === "number" && typeof rightVal === "number" && leftVal < rightVal;
+  } else if ("<=" in condition) {
+    const [left, right] = condition["<="];
+    const leftVal = resolveValue(left, data, parentPath);
+    const rightVal = resolveValue(right, data, parentPath);
+    return typeof leftVal === "number" && typeof rightVal === "number" && leftVal <= rightVal;
+  } else if (">" in condition) {
+    const [left, right] = condition[">"];
+    const leftVal = resolveValue(left, data, parentPath);
+    const rightVal = resolveValue(right, data, parentPath);
+    return typeof leftVal === "number" && typeof rightVal === "number" && leftVal > rightVal;
+  } else if (">=" in condition) {
+    const [left, right] = condition[">="];
+    const leftVal = resolveValue(left, data, parentPath);
+    const rightVal = resolveValue(right, data, parentPath);
+    return typeof leftVal === "number" && typeof rightVal === "number" && leftVal >= rightVal;
+  }
+  return false;
+}
+function resolveValue(value, data, parentPath) {
+  if (typeof value === "object" && value !== null && "$type" in value && value.$type === "Value" && "path" in value && typeof value.path === "string") {
+    return getProteusValue(data, value.path, parentPath);
+  }
+  return value;
+}
+ProteusShow.displayName = "@optiaxiom/react/ProteusShow";
+
+export { ProteusShow };

package/dist/esm/packages/react/src/proteus-document/ProteusText.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Text } from '../text/Text.js';
+import { ProteusElement } from './ProteusElement.js';
+
+function ProteusText({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Text, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+}
+ProteusText.displayName = "@optiaxiom/react/ProteusText";
+
+export { ProteusText };

package/dist/esm/packages/react/src/proteus-document/ProteusTextarea.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Textarea } from '../textarea/Textarea.js';
+import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+
+function ProteusTextarea(props) {
+  const { data, onDataChange, readOnly } = useProteusDocumentContext(
+    "@optiaxiom/react/ProteusTextarea"
+  );
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ...props,
+      onValueChange: (value) => {
+        if (props.name) {
+          onDataChange?.(props.name, value);
+        }
+      },
+      readOnly,
+      value: props.name ? data[props.name] : void 0
+    }
+  );
+}
+ProteusTextarea.displayName = "@optiaxiom/react/ProteusTextarea";
+
+export { ProteusTextarea };

package/dist/esm/packages/react/src/proteus-document/ProteusValue.js

@@ -0,0 +1,9 @@
+"use client";
+import { useProteusValue } from './useProteusValue.js';
+
+function ProteusValue({ path }) {
+  return useProteusValue(path);
+}
+ProteusValue.displayName = "@optiaxiom/react/ProteusValue";
+
+export { ProteusValue };

package/dist/esm/packages/react/src/proteus-document/getProteusValue.js

@@ -0,0 +1,11 @@
+import { get } from 'jsonpointer';
+
+function getProteusValue(data, path, parentPath) {
+  try {
+    return get(data, path.startsWith("/") ? path : `${parentPath}/${path}`);
+  } catch (error) {
+    return null;
+  }
+}
+
+export { getProteusValue };