@optiaxiom/react 1.9.2 → 1.9.4

package/dist/esm/packages/react/src/paper/Paper-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Er3WnjvX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CDX2D93i.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var paper = recipeRuntime({base:{bg:'bg.default',color:'fg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'},screen:{}}}});

package/dist/esm/packages/react/src/pill/Pill-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Er3WnjvX.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-0H-gzPNK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CDX2D93i.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-DyZGjryd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',transition:'colors',whiteSpace:'nowrap'},'_21xhm3'],variants:{interactive:{false:{},true:'_3fmmnr'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',transition:'colors',whiteSpace:'nowrap'},'aq7euv'],variants:{interactive:{false:{},true:'ko6dz2'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

package/dist/esm/packages/react/src/pill-menu/PillMenuTrigger-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Er3WnjvX.css';
-import './../../../../assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-D6hNt14e.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CDX2D93i.css';
+import './../../../../assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-CmYFKa-2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{border:'1',rounded:'md',transition:'colors'},'ljefv8'],variants:{size:{md:'_15ss09r',lg:'_10kaqv1'}}});
-var trigger = recipeRuntime({base:[{display:'grid',placeItems:'center',rounded:'md'},'_1nest7y']});
-var wrapper = recipeRuntime({base:'_1vack1r'});
+var root = recipeRuntime({base:[{border:'1',rounded:'md',transition:'colors'},'em7mlz'],variants:{size:{md:'_1u68nu',lg:'u6qj6q'}}});
+var trigger = recipeRuntime({base:[{display:'grid',placeItems:'center',rounded:'md'},'sy50wx']});
+var wrapper = recipeRuntime({base:'_2cxjrd'});
 
 export { root, trigger, wrapper };

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Er3WnjvX.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-BKBy-rK9.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CDX2D93i.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-DZ4_egBQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:[{h:'full',rounded:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},opal:'lwh0qd',primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'tczcmh']});
+var indicator = recipeRuntime({base:[{h:'full',rounded:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},opal:'ddgcxn',primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1ist1we']});
 
 export { indicator, progress };

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

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
+import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { ProteusElement } from './ProteusElement.js';
+
+function ProteusAction({
+  children,
+  onClick,
+  ...props
+}) {
+  const { onEvent } = useProteusDocumentContext(
+    "@optiaxiom/react/ProteusAction"
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      justifyContent: "center",
+      onClick: () => {
+        if (!onClick) {
+          return;
+        }
+        onEvent(onClick);
+      },
+      ...props,
+      children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children })
+    }
+  );
+}
+ProteusAction.displayName = "@optiaxiom/react/ProteusAction";
+
+export { ProteusAction };

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

@@ -8,15 +8,15 @@ import { Input } from '../input/Input.js';
 import '../input/InputAddon.js';
 import '../input/InputControl.js';
 import '../input/InputRoot.js';
-import { useBlockDocumentContext } from './BlockDocumentContext.js';
-import { BlockElement } from './BlockElement.js';
+import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { ProteusElement } from './ProteusElement.js';
 
-function BlockCancelAction({
+function ProteusCancelAction({
   children,
   placeholder = "Tell Opal what to do instead"
 }) {
-  const { onCancelAction } = useBlockDocumentContext(
-    "@optiaxiom/react/BlockCancelAction"
+  const { onCancelAction } = useProteusDocumentContext(
+    "@optiaxiom/react/ProteusCancelAction"
   );
   const [inputValue, setInputValue] = useState("");
   return /* @__PURE__ */ jsx(
@@ -38,11 +38,11 @@ function BlockCancelAction({
             w: "full"
           }
         ),
-        /* @__PURE__ */ jsx(Button, { size: "lg", type: "submit", children: children && /* @__PURE__ */ jsx(BlockElement, { element: children }) })
+        /* @__PURE__ */ jsx(Button, { size: "lg", type: "submit", children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) })
       ] })
     }
   );
 }
-BlockCancelAction.displayName = "@optiaxiom/react/BlockCancelAction";
+ProteusCancelAction.displayName = "@optiaxiom/react/ProteusCancelAction";
 
-export { BlockCancelAction };
+export { ProteusCancelAction };

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

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [ProteusDocumentProvider, useProteusDocumentContext] = createContext("@optiaxiom/react/ProteusDocument");
+
+export { ProteusDocumentProvider, useProteusDocumentContext };

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 { ProteusDocumentSchema } 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 = ProteusDocumentSchema.safeParse(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 && result.data.actions.length > 0 && !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,85 @@
+"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 { ProteusElementSchema } 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 = ProteusElementSchema.safeParse(elementProp);
+  if (!result.success) {
+    return null;
+  }
+  const element = result.data;
+  switch (element.$type) {
+    case "Proteus.Action":
+      return /* @__PURE__ */ jsx(ProteusAction, { ...omitType(element) });
+    case "Proteus.CancelAction":
+      return /* @__PURE__ */ jsx(ProteusCancelAction, { ...omitType(element) });
+    case "Proteus.Field":
+      return /* @__PURE__ */ jsx(ProteusField, { ...omitType(element) });
+    case "Proteus.Group":
+      return /* @__PURE__ */ jsx(ProteusGroup, { ...omitType(element) });
+    case "Proteus.Heading":
+      return /* @__PURE__ */ jsx(ProteusHeading, { ...omitType(element) });
+    case "Proteus.Image":
+      return /* @__PURE__ */ jsx(ProteusImage, { ...omitType(element) });
+    case "Proteus.Input":
+      return /* @__PURE__ */ jsx(ProteusInput, { ...omitType(element) });
+    case "Proteus.Link":
+      return /* @__PURE__ */ jsx(ProteusLink, { ...omitType(element) });
+    case "Proteus.Map":
+      return /* @__PURE__ */ jsx(ProteusMap, { ...omitType(element) });
+    case "Proteus.Range":
+      return /* @__PURE__ */ jsx(ProteusRange, { ...omitType(element) });
+    case "Proteus.Select":
+      return /* @__PURE__ */ jsx(ProteusSelect, { ...omitType(element) });
+    case "Proteus.SelectContent":
+      return /* @__PURE__ */ jsx(ProteusSelectContent, { ...omitType(element) });
+    case "Proteus.SelectTrigger":
+      return /* @__PURE__ */ jsx(ProteusSelectTrigger, { ...omitType(element) });
+    case "Proteus.Separator":
+      return /* @__PURE__ */ jsx(ProteusSeparator, { ...omitType(element) });
+    case "Proteus.Show":
+      return /* @__PURE__ */ jsx(ProteusShow, { ...omitType(element) });
+    case "Proteus.Text":
+      return /* @__PURE__ */ jsx(ProteusText, { ...omitType(element) });
+    case "Proteus.Textarea":
+      return /* @__PURE__ */ jsx(ProteusTextarea, { ...omitType(element) });
+    case "Proteus.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,26 @@
+"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/{block-document/BlockSelectTrigger.js → proteus-document/ProteusSelectTrigger.js}

@@ -3,14 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import '../select/Select.js';
 import '../select/SelectContent.js';
 import { SelectTrigger } from '../select/SelectTrigger.js';
-import { BlockElement } from './BlockElement.js';
+import { ProteusElement } from './ProteusElement.js';
 
-function BlockSelectTrigger({
+function ProteusSelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(SelectTrigger, { ...props, children: children && /* @__PURE__ */ jsx(BlockElement, { element: children }) });
+  return /* @__PURE__ */ jsx(SelectTrigger, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
-BlockSelectTrigger.displayName = "@optiaxiom/react/BlockSelectTrigger";
+ProteusSelectTrigger.displayName = "@optiaxiom/react/ProteusSelectTrigger";
 
-export { BlockSelectTrigger };
+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,77 @@
+"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 === "Proteus.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 };