@optimizely-opal/opal-tools-sdk 0.1.6-dev → 0.1.9-dev

package/src/proteus.ts

@@ -0,0 +1,2314 @@
+/**
+ * Generated by json-schema-to-typescript
+ * DO NOT MODIFY - This file is auto-generated from proteus-document-spec.json
+ * Run 'npm run generate:proteus' to regenerate
+ */
+
+export type OpalProteusDocumentSpecification =
+  | ProteusAction
+  | ProteusAtomicCondition
+  | ProteusBadge
+  | ProteusCancelAction
+  | ProteusChart
+  | ProteusCondition
+  | ProteusDataTable
+  | ProteusDocument
+  | ProteusElement
+  | ProteusEventHandler
+  | ProteusField
+  | ProteusGroup
+  | ProteusHeading
+  | ProteusImage
+  | ProteusInput
+  | ProteusLink
+  | ProteusMap
+  | ProteusNode
+  | ProteusRange
+  | ProteusSelect
+  | ProteusSelectContent
+  | ProteusSelectTrigger
+  | ProteusSeparator
+  | ProteusShow
+  | ProteusText
+  | ProteusTextarea
+  | ProteusValue;
+export interface ProteusAction {
+  $type: "Action";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  /**
+   * Control the appearance by selecting between the different button types.
+   */
+  appearance?:
+    | "danger"
+    | "danger-outline"
+    | "default"
+    | "default-opal"
+    | "inverse"
+    | "primary"
+    | "primary-opal"
+    | "subtle";
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  children?: ProteusNode;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  /**
+   * Action triggered when button is clicked
+   */
+  onClick?:
+    | {
+        /**
+         * Message to send to LLM via sendNewMessage()
+         */
+        message: string;
+      }
+    | {
+        /**
+         * Name of registered tool to call
+         */
+        tool: string;
+      };
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+/**
+ * Simple comparison condition - single operator only (used in OR arrays to avoid recursion)
+ */
+export type ProteusAtomicCondition =
+  | {
+      /**
+       * Equality comparison
+       *
+       * @minItems 2
+       * @maxItems 2
+       */
+      "==": [
+        boolean | null | number | ProteusValue | string,
+        boolean | null | number | ProteusValue | string,
+      ];
+    }
+  | {
+      /**
+       * Greater than comparison
+       *
+       * @minItems 2
+       * @maxItems 2
+       */
+      ">": [
+        boolean | null | number | ProteusValue | string,
+        boolean | null | number | ProteusValue | string,
+      ];
+    }
+  | {
+      /**
+       * Greater than or equal comparison
+       *
+       * @minItems 2
+       * @maxItems 2
+       */
+      ">=": [
+        boolean | null | number | ProteusValue | string,
+        boolean | null | number | ProteusValue | string,
+      ];
+    }
+  | {
+      /**
+       * Inequality comparison
+       *
+       * @minItems 2
+       * @maxItems 2
+       */
+      "!=": [
+        boolean | null | number | ProteusValue | string,
+        boolean | null | number | ProteusValue | string,
+      ];
+    }
+  | {
+      /**
+       * Less than comparison
+       *
+       * @minItems 2
+       * @maxItems 2
+       */
+      "<": [
+        boolean | null | number | ProteusValue | string,
+        boolean | null | number | ProteusValue | string,
+      ];
+    }
+  | {
+      /**
+       * Less than or equal comparison
+       *
+       * @minItems 2
+       * @maxItems 2
+       */
+      "<=": [
+        boolean | null | number | ProteusValue | string,
+        boolean | null | number | ProteusValue | string,
+      ];
+    }
+  | {
+      /**
+       * Truthy check - returns true if value is truthy (not null, undefined, false, 0, or empty string)
+       */
+      "!!": boolean | null | number | ProteusValue | string;
+    };
+export interface ProteusBadge {
+  $type: "Badge";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  children?: ProteusNode;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  /**
+   * Control the appearance by selecting between the different badge types.
+   */
+  intent?:
+    | "danger"
+    | "information"
+    | "neutral"
+    | "primary"
+    | "success"
+    | "warning";
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  size?: SprinklePropSize;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusCancelAction {
+  $type: "CancelAction";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  children?: ProteusNode;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  /**
+   * Placeholder text for the text input field
+   */
+  placeholder?: string;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusChart {
+  $type: "Chart";
+  /**
+   * Chart data records, either inline or a ProteusValue reference
+   */
+  data?:
+    | ProteusValue
+    | {
+        [k: string]: undefined | unknown;
+      }[];
+  /**
+   * Data series configuration
+   */
+  series?: {
+    /**
+     * Series color
+     */
+    color?: string;
+    /**
+     * Key in data records for this series
+     */
+    dataKey: string;
+    /**
+     * Key in data records for pre-formatted labels displayed above bars
+     */
+    labelKey?: string;
+    /**
+     * Display name for legend
+     */
+    name?: string;
+  }[];
+  /**
+   * Chart type
+   */
+  type?: "bar";
+  /**
+   * Key in data records for x-axis labels
+   */
+  xAxisKey?: string;
+}
+/**
+ * Condition for Show component. Can be a comparison operator, logical AND, or logical OR. Supports nesting.
+ */
+export type ProteusCondition =
+  | ProteusAtomicCondition
+  | {
+      /**
+       * Logical OR - returns true if any condition is true
+       *
+       * @minItems 1
+       */
+      or: [
+        (
+          | ProteusAtomicCondition
+          | {
+              /**
+               * Logical AND - returns true if all conditions are true
+               *
+               * @minItems 1
+               */
+              and: [ProteusAtomicCondition, ...ProteusAtomicCondition[]];
+            }
+        ),
+        ...(
+          | ProteusAtomicCondition
+          | {
+              /**
+               * Logical AND - returns true if all conditions are true
+               *
+               * @minItems 1
+               */
+              and: [ProteusAtomicCondition, ...ProteusAtomicCondition[]];
+            }
+        )[],
+      ];
+    };
+export interface ProteusDataTable {
+  $type: "DataTable";
+  /**
+   * Column definitions
+   */
+  columns?: {
+    /**
+     * Key in data objects
+     */
+    accessorKey: string;
+    /**
+     * Column header text
+     */
+    header: string;
+  }[];
+  data?:
+    | ProteusValue
+    | {
+        [k: string]: undefined | unknown;
+      }[];
+}
+export interface ProteusDocument {
+  $type: "Document";
+  /**
+   * Actions available for this document
+   */
+  actions?:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
+  /**
+   * URL or data URI for the application icon (e.g., 'https://example.com/icon.png' or 'data:image/svg+xml,...'). Rendered as an <img> element.
+   */
+  appIcon?: string;
+  /**
+   * The official name of the application
+   */
+  appName: string;
+  /**
+   * If true, hides chat prompt and forces user interaction with document. User can press ESC or close to abandon.
+   */
+  blocking?: boolean;
+  /**
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+   */
+  body:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
+  /**
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+   */
+  subtitle?:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
+  /**
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+   */
+  title:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
+}
+/**
+ * A single Proteus UI component element identified by its $type discriminator
+ */
+export type ProteusElement =
+  | ProteusAction
+  | ProteusBadge
+  | ProteusCancelAction
+  | ProteusChart
+  | ProteusDataTable
+  | ProteusField
+  | ProteusGroup
+  | ProteusHeading
+  | ProteusImage
+  | ProteusInput
+  | ProteusLink
+  | ProteusMap
+  | ProteusRange
+  | ProteusSelect
+  | ProteusSelectContent
+  | ProteusSelectTrigger
+  | ProteusSeparator
+  | ProteusShow
+  | ProteusText
+  | ProteusTextarea
+  | ProteusValue;
+/**
+ * Handler for user interactions - either a server-side tool call or client-side message
+ */
+export type ProteusEventHandler =
+  | {
+      /**
+       * Message to send to LLM via sendNewMessage()
+       */
+      message: string;
+    }
+  | {
+      /**
+       * Name of registered tool to call
+       */
+      tool: string;
+    };
+export interface ProteusField {
+  $type: "Field";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  children?: ProteusNode;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  /**
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+   */
+  description?:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  /**
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+   */
+  info?:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  /**
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+   */
+  label?:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  /**
+   * Display an asterisk for required inputs.
+   */
+  required?: boolean;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  size?: SprinklePropSize;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusGroup {
+  $type: "Group";
+  /**
+   * Set the element's `align-items` CSS property. Defaults to `center` when
+   * `flexDirection='row'`, and `stretch` when `flexDirection='column'`.
+   */
+  alignItems?: "center" | "end" | "normal" | "start" | "stretch";
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  children?: ProteusNode;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  /**
+   * Set the element's `flex-direction` CSS property.
+   *
+   * Default: 'row' (CSS standard)
+   */
+  flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  size?: SprinklePropSize;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusHeading {
+  $type: "Heading";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  children?: ProteusNode;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  /**
+   * Heading level (1-4) that controls both the semantic HTML tag and font size.
+   * - `level="1"`: renders `<h1>` with `fontSize="4xl"` (default)
+   * - `level="2"`: renders `<h2>` with `fontSize="3xl"`
+   * - `level="3"`: renders `<h3>` with `fontSize="2xl"`
+   * - `level="4"`: renders `<h4>` with `fontSize="xl"`
+   *
+   * Use `asChild` to decouple the semantic level from visual appearance.
+   */
+  level?: "1" | "2" | "3" | "4";
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  size?: SprinklePropSize;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusImage {
+  $type: "Image";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  /**
+   * Alternative text for the image
+   */
+  alt?: ProteusValue | string;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  size?: SprinklePropSize;
+  /**
+   * The image source URL
+   */
+  src?: ProteusValue | string;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusInput {
+  $type: "Input";
+  /**
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+   */
+  addonAfter?:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
+  /**
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+   */
+  addonBefore?:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  /**
+   * Control the appearance of the input.
+   */
+  appearance?: "default" | "number";
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  /**
+   * The name of the form control element.
+   */
+  name?: string;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  /**
+   * The placeholder text to use when control has no value.
+   */
+  placeholder?: string;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  /**
+   * The input type.
+   */
+  type?:
+    | "button"
+    | "checkbox"
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "file"
+    | "hidden"
+    | "image"
+    | "month"
+    | "number"
+    | "password"
+    | "radio"
+    | "range"
+    | "reset"
+    | "search"
+    | "submit"
+    | "tel"
+    | "text"
+    | "time"
+    | "url"
+    | "week"
+    | string;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusLink {
+  $type: "Link";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  children?: ProteusNode;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  /**
+   * The link href.
+   */
+  href?: string;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  size?: SprinklePropSize;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusMap {
+  $type: "Map";
+  /**
+   * Template object to render for each item in the array. Value paths inside this template are relative to the current item (e.g., path='title' resolves to each item's 'title' field). Use a leading '/' to reference top-level data (e.g., path='/title' resolves to the root data's 'title').
+   */
+  children?: {
+    [k: string]: undefined | unknown;
+  };
+  /**
+   * JSON pointer path to the source array in the data (e.g., '/results')
+   */
+  path: string;
+}
+/**
+ * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+ */
+export type ProteusNode =
+  | (boolean | null | number | ProteusElement | string)[]
+  | boolean
+  | null
+  | number
+  | ProteusElement
+  | string;
+export interface ProteusRange {
+  $type: "Range";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  /**
+   * The marks to display on the range steps.
+   */
+  marks?: (
+    | number
+    | {
+        /**
+         * The label for the mark
+         */
+        label: string;
+        /**
+         * The value for the mark
+         */
+        value: number;
+      }
+  )[];
+  /**
+   * The maximum value for the range.
+   */
+  max?: number;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  /**
+   * The minimum value for the range.
+   */
+  min?: number;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  /**
+   * The stepping interval for the range.
+   */
+  step?: number;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusSelect {
+  $type: "Select";
+  children?: ProteusNode;
+  /**
+   * The name of the inner select element.
+   */
+  name?: string;
+  /**
+   * The select items/options we want to render.
+   */
+  options: {
+    /**
+     * String representation of items
+     */
+    label: string;
+    /**
+     * Return a unique key for each item
+     */
+    value: string;
+  }[];
+}
+export interface ProteusSelectContent {
+  $type: "SelectContent";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  size?: SprinklePropSize;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusSelectTrigger {
+  $type: "SelectTrigger";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  children?: ProteusNode;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusSeparator {
+  $type: "Separator";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  size?: SprinklePropSize;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusShow {
+  $type: "Show";
+  /**
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+   */
+  children?:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
+  /**
+   * Single condition or array of conditions (AND logic). Each condition is an object with one operator key.
+   */
+  when?: ProteusCondition | ProteusCondition[];
+}
+export interface ProteusText {
+  $type: "Text";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  children?: ProteusNode;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  /**
+   * Truncate the text at specific number of lines.
+   */
+  lineClamp?: "1" | "2" | "3" | "4";
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  rounded?: SprinklePropRounded;
+  shadow?: SprinklePropShadow;
+  size?: SprinklePropSize;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  /**
+   * Whether to truncate the text and add an ellipsis at the end.
+   */
+  truncate?: boolean;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusTextarea {
+  $type: "Textarea";
+  alignItems?: SprinklePropAlignItems;
+  alignSelf?: SprinklePropAlignSelf;
+  animation?: SprinklePropAnimation;
+  backgroundImage?: SprinklePropBackgroundImage;
+  bg?: SprinklePropBg;
+  border?: SprinklePropBorder;
+  borderB?: SprinklePropBorderB;
+  borderColor?: SprinklePropBorderColor;
+  borderL?: SprinklePropBorderL;
+  borderR?: SprinklePropBorderR;
+  borderT?: SprinklePropBorderT;
+  color?: SprinklePropColor;
+  cursor?: SprinklePropCursor;
+  display?: SprinklePropDisplay;
+  flex?: SprinklePropFlex;
+  flexDirection?: SprinklePropFlexDirection;
+  flexWrap?: SprinklePropFlexWrap;
+  fontFamily?: SprinklePropFontFamily;
+  fontSize?: SprinklePropFontSize;
+  fontWeight?: SprinklePropFontWeight;
+  gap?: SprinklePropGap;
+  gridColumn?: SprinklePropGridColumn;
+  gridTemplateColumns?: SprinklePropGridTemplateColumns;
+  h?: SprinklePropH;
+  justifyContent?: SprinklePropJustifyContent;
+  justifyItems?: SprinklePropJustifyItems;
+  m?: SprinklePropM;
+  maxH?: SprinklePropMaxH;
+  /**
+   * Limits the height of the textarea when `resize=auto` is used.
+   */
+  maxRows?: 1 | 2 | 3 | 4 | 5;
+  maxW?: SprinklePropMaxW;
+  mb?: SprinklePropMb;
+  ml?: SprinklePropMl;
+  mr?: SprinklePropMr;
+  mt?: SprinklePropMt;
+  mx?: SprinklePropMx;
+  my?: SprinklePropMy;
+  /**
+   * The name of the form control element.
+   */
+  name?: string;
+  objectFit?: SprinklePropObjectFit;
+  overflow?: SprinklePropOverflow;
+  overflowX?: SprinklePropOverflowX;
+  overflowY?: SprinklePropOverflowY;
+  p?: SprinklePropP;
+  pb?: SprinklePropPb;
+  pl?: SprinklePropPl;
+  /**
+   * The placeholder text to use when control has no value.
+   */
+  placeholder?: string;
+  placeItems?: SprinklePropPlaceItems;
+  pointerEvents?: SprinklePropPointerEvents;
+  pr?: SprinklePropPr;
+  pt?: SprinklePropPt;
+  px?: SprinklePropPx;
+  py?: SprinklePropPy;
+  /**
+   * Control whether resizing mode is manual, automatic, or disabled.
+   */
+  resize?: "auto" | "none" | "vertical";
+  rounded?: SprinklePropRounded;
+  /**
+   * The number of rows to display.
+   */
+  rows?: number;
+  shadow?: SprinklePropShadow;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
+export interface ProteusValue {
+  $type: "Value";
+  /**
+   * Path to a value in the data. Absolute paths start with '/' and resolve from the root (e.g., '/title', '/options/0/label'). Inside a Map template, paths without a leading '/' are relative to the current item (e.g., 'title' resolves to each item's 'title' field).
+   */
+  path: string;
+}
+/**
+ * Set the element's `align-items` CSS property
+ */
+export type SprinklePropAlignItems =
+  | "center"
+  | "end"
+  | "normal"
+  | "start"
+  | "stretch";
+/**
+ * Set the element's `align-self` CSS property
+ */
+export type SprinklePropAlignSelf =
+  | "center"
+  | "end"
+  | "normal"
+  | "start"
+  | "stretch";
+/**
+ * Animate element with CSS animations
+ */
+export type SprinklePropAnimation = "ping" | "pulse" | "spin";
+/**
+ * Set the element's `background-image` CSS property
+ */
+export type SprinklePropBackgroundImage = "gradient.opal";
+/**
+ * Set the element's background color. Only accepts predefined color tokens starting with `bg.` (e.g., `bg.default`, `bg.accent`, `bg.error`), or the special values `current` and `transparent`.
+ */
+export type SprinklePropBg =
+  | "bg.accent"
+  | "bg.accent.hovered"
+  | "bg.accent.light"
+  | "bg.accent.pressed"
+  | "bg.accent.subtle"
+  | "bg.avatar.neutral"
+  | "bg.avatar.purple"
+  | "bg.default"
+  | "bg.default.hovered"
+  | "bg.default.inverse"
+  | "bg.default.inverse.hovered"
+  | "bg.default.inverse.pressed"
+  | "bg.default.pressed"
+  | "bg.error"
+  | "bg.error.hovered"
+  | "bg.error.light"
+  | "bg.error.pressed"
+  | "bg.error.subtle"
+  | "bg.error.subtlest"
+  | "bg.information"
+  | "bg.information.light"
+  | "bg.information.subtle"
+  | "bg.overlay"
+  | "bg.page"
+  | "bg.secondary"
+  | "bg.secondary.hovered"
+  | "bg.spinner.default"
+  | "bg.spinner.inverse"
+  | "bg.success"
+  | "bg.success.hovered"
+  | "bg.success.light"
+  | "bg.success.subtle"
+  | "bg.tertiary"
+  | "bg.tertiary.hovered"
+  | "bg.warning"
+  | "bg.warning.hovered"
+  | "bg.warning.light"
+  | "bg.warning.subtle"
+  | "current"
+  | "transparent";
+/**
+ * Set the element's `border-width` CSS property
+ */
+export type SprinklePropBorder = "0" | "1" | "2";
+/**
+ * Set the element's `border-bottom-width` CSS property
+ */
+export type SprinklePropBorderB = "0" | "1" | "2";
+/**
+ * Set the element's border color. Only accepts predefined color tokens starting with `border.` (e.g., `border.default`, `border.accent`, `border.error`), or the special values `current` and `transparent`.
+ */
+export type SprinklePropBorderColor =
+  | "border.accent"
+  | "border.control"
+  | "border.control.hovered"
+  | "border.default"
+  | "border.disabled"
+  | "border.error"
+  | "border.focus"
+  | "border.focus.error"
+  | "border.secondary"
+  | "border.success"
+  | "border.tertiary"
+  | "border.warning"
+  | "current"
+  | "transparent";
+/**
+ * Set the element's `border-left-width` CSS property
+ */
+export type SprinklePropBorderL = "0" | "1" | "2";
+/**
+ * Set the element's `border-right-width` CSS property
+ */
+export type SprinklePropBorderR = "0" | "1" | "2";
+/**
+ * Set the element's `border-top-width` CSS property
+ */
+export type SprinklePropBorderT = "0" | "1" | "2";
+/**
+ * Set the element's text color. Only accepts predefined color tokens starting with `fg.` (e.g., `fg.default`, `fg.accent`, `fg.error`), or the special values `current` and `transparent`.
+ */
+export type SprinklePropColor =
+  | "current"
+  | "fg.accent"
+  | "fg.accent.hovered"
+  | "fg.accent.strong"
+  | "fg.avatar.neutral"
+  | "fg.avatar.purple"
+  | "fg.default"
+  | "fg.default.inverse"
+  | "fg.disabled"
+  | "fg.error"
+  | "fg.error.hovered"
+  | "fg.error.light"
+  | "fg.error.strong"
+  | "fg.information"
+  | "fg.information.light"
+  | "fg.information.strong"
+  | "fg.link.default"
+  | "fg.link.default.hovered"
+  | "fg.link.inverse"
+  | "fg.link.subtle"
+  | "fg.link.visited"
+  | "fg.secondary"
+  | "fg.spinner.default"
+  | "fg.spinner.inverse"
+  | "fg.success"
+  | "fg.success.hovered"
+  | "fg.success.light"
+  | "fg.success.strong"
+  | "fg.tertiary"
+  | "fg.warning"
+  | "fg.warning.hovered"
+  | "fg.warning.inverse"
+  | "fg.warning.light"
+  | "fg.warning.strong"
+  | "fg.white"
+  | "transparent";
+/**
+ * Set the element's `cursor` CSS property
+ */
+export type SprinklePropCursor = "default" | "pointer" | "text";
+/**
+ * Set the element's `display` CSS property
+ */
+export type SprinklePropDisplay =
+  | "block"
+  | "flex"
+  | "grid"
+  | "inline"
+  | "inline-block"
+  | "inline-flex"
+  | "none"
+  | "table"
+  | "table-cell"
+  | "table-row";
+/**
+ * Set the element's `flex` CSS property
+ */
+export type SprinklePropFlex = "1" | "auto" | "initial" | "none";
+/**
+ * Set the element's `flex-direction` CSS property
+ */
+export type SprinklePropFlexDirection =
+  | "column"
+  | "column-reverse"
+  | "row"
+  | "row-reverse";
+/**
+ * Set the element's `flex-wrap` CSS property
+ */
+export type SprinklePropFlexWrap = "nowrap" | "wrap";
+/**
+ * Set the element's font family. Only accepts predefined fontFamily tokens.
+ */
+export type SprinklePropFontFamily = "mono" | "sans";
+/**
+ * Set the element's font size and line height (both properties are set together). Only accepts predefined fontSize tokens.
+ */
+export type SprinklePropFontSize =
+  | "2xl"
+  | "3xl"
+  | "4xl"
+  | "inherit"
+  | "lg"
+  | "md"
+  | "sm"
+  | "xl"
+  | "xs";
+/**
+ * Set the element's `font-weight` CSS property
+ */
+export type SprinklePropFontWeight = "400" | "500" | "600" | "700" | "inherit";
+/**
+ * Set the element's `gap` CSS property
+ */
+export type SprinklePropGap =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80";
+/**
+ * Set the element's size across grid columns
+ */
+export type SprinklePropGridColumn = "1" | "2" | "3" | "4";
+/**
+ * Control number of columns in a grid layout
+ */
+export type SprinklePropGridTemplateColumns = "1" | "2" | "3" | "4";
+/**
+ * Set the element's height. Only accepts predefined size tokens.
+ */
+export type SprinklePropH =
+  | "0"
+  | "1/2"
+  | "1/3"
+  | "1/4"
+  | "2/3"
+  | "2xs"
+  | "3/4"
+  | "3xl"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "56"
+  | "64"
+  | "80"
+  | "224"
+  | "384"
+  | "auto"
+  | "fit"
+  | "full"
+  | "lg"
+  | "max"
+  | "md"
+  | "min"
+  | "sm"
+  | "xl"
+  | "xs";
+/**
+ * Set the element's `justify-content` CSS property
+ */
+export type SprinklePropJustifyContent =
+  | "center"
+  | "end"
+  | "flex-end"
+  | "flex-start"
+  | "normal"
+  | "space-around"
+  | "space-between"
+  | "space-evenly"
+  | "start"
+  | "stretch";
+/**
+ * Set the element's `justify-items` CSS property
+ */
+export type SprinklePropJustifyItems =
+  | "center"
+  | "end"
+  | "normal"
+  | "start"
+  | "stretch";
+/**
+ * Set the element's margin on all sides. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropM =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80"
+  | "auto";
+/**
+ * Set the element's maximum height. Only accepts predefined maxSize tokens.
+ */
+export type SprinklePropMaxH = "full" | "lg" | "md" | "sm" | "xs";
+/**
+ * Set the element's maximum width. Only accepts predefined maxSize tokens.
+ */
+export type SprinklePropMaxW = "full" | "lg" | "md" | "sm" | "xs";
+/**
+ * Set the element's bottom margin. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropMb =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80"
+  | "auto";
+/**
+ * Set the element's left margin. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropMl =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80"
+  | "auto";
+/**
+ * Set the element's right margin. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropMr =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80"
+  | "auto";
+/**
+ * Set the element's top margin. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropMt =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80"
+  | "auto";
+/**
+ * Set the element's left and right margin. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropMx =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80"
+  | "auto";
+/**
+ * Set the element's top and bottom margin. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropMy =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80"
+  | "auto";
+
+/**
+ * Set the element's `object-fit` CSS property
+ */
+export type SprinklePropObjectFit = "contain" | "cover" | "fill" | "none";
+/**
+ * Set the element's `overflow` CSS property
+ */
+export type SprinklePropOverflow = "auto" | "hidden" | "visible";
+/**
+ * Set the element's `overflow-x` CSS property
+ */
+export type SprinklePropOverflowX = "auto" | "hidden" | "visible";
+/**
+ * Set the element's `overflow-y` CSS property
+ */
+export type SprinklePropOverflowY = "auto" | "hidden" | "visible";
+/**
+ * Set the element's padding on all sides. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropP =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80";
+/**
+ * Set the element's bottom padding. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropPb =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80";
+/**
+ * Set the element's left padding. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropPl =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80";
+/**
+ * Set the element's `place-items` CSS property
+ */
+export type SprinklePropPlaceItems = "center";
+/**
+ * Set the element's `pointer-events` CSS property
+ */
+export type SprinklePropPointerEvents = "auto" | "none";
+/**
+ * Set the element's right padding. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropPr =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80";
+/**
+ * Set the element's top padding. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropPt =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80";
+/**
+ * Set the element's left and right padding. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropPx =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80";
+/**
+ * Set the element's top and bottom padding. Only accepts predefined spacing tokens.
+ */
+export type SprinklePropPy =
+  | "0"
+  | "2"
+  | "4"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64"
+  | "80";
+/**
+ * Set the element's border radius. Only accepts predefined borderRadius tokens.
+ */
+export type SprinklePropRounded =
+  | "full"
+  | "inherit"
+  | "lg"
+  | "md"
+  | "none"
+  | "sm"
+  | "xl"
+  | "xs";
+/**
+ * Set the element's box shadow. Only accepts predefined boxShadow tokens.
+ */
+export type SprinklePropShadow = "lg" | "md" | "none" | "sm" | "xl";
+/**
+ * Set the element's width and height. Only accepts predefined size tokens.
+ *
+ * When width and height are the same, use `size` instead of setting both
+ * `w` and `h` separately (e.g., prefer `size="24"` over `w="24" h="24"`).
+ */
+export type SprinklePropSize =
+  | "0"
+  | "1/2"
+  | "1/3"
+  | "1/4"
+  | "2/3"
+  | "2xs"
+  | "3/4"
+  | "3xl"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "56"
+  | "64"
+  | "80"
+  | "224"
+  | "384"
+  | "auto"
+  | "fit"
+  | "full"
+  | "lg"
+  | "max"
+  | "md"
+  | "min"
+  | "sm"
+  | "xl"
+  | "xs";
+/**
+ * Set the element's `text-align` CSS property
+ */
+export type SprinklePropTextAlign = "center" | "end" | "justify" | "start";
+/**
+ * Set the element's `text-transform` CSS property
+ */
+export type SprinklePropTextTransform = "capitalize" | "none" | "uppercase";
+/**
+ * Control which CSS properties should transition
+ */
+export type SprinklePropTransition =
+  | "all"
+  | "colors"
+  | "none"
+  | "opacity"
+  | "transform";
+/**
+ * Set the element's width. Only accepts predefined size tokens.
+ */
+export type SprinklePropW =
+  | "0"
+  | "1/2"
+  | "1/3"
+  | "1/4"
+  | "2/3"
+  | "2xs"
+  | "3/4"
+  | "3xl"
+  | "10"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "56"
+  | "64"
+  | "80"
+  | "224"
+  | "384"
+  | "auto"
+  | "fit"
+  | "full"
+  | "lg"
+  | "max"
+  | "md"
+  | "min"
+  | "sm"
+  | "xl"
+  | "xs";
+/**
+ * Set the element's `white-space` CSS property
+ */
+export type SprinklePropWhiteSpace = "nowrap";
+/**
+ * Set the element's stacking order. Only accepts predefined zIndex tokens (e.g., popover, toast, tooltip) or numeric values (0, 10, 20, 30, auto).
+ */
+export type SprinklePropZ =
+  | "0"
+  | "10"
+  | "20"
+  | "30"
+  | "auto"
+  | "popover"
+  | "toast"
+  | "tooltip";
+
+/**
+ * Builder namespace for Adaptive UI Document components.
+ *
+ * Usage:
+ *   UI.Document({ children: [...] })
+ *   UI.Heading({ children: "Title", level: "2" })
+ *   UI.Input({ name: "field_name", placeholder: "Enter..." })
+ */
+export const UI = {
+  Action: (props: Omit<ProteusAction, "$type">): ProteusAction => ({
+    $type: "Action" as const,
+    ...props,
+  }),
+  Badge: (props: Omit<ProteusBadge, "$type">): ProteusBadge => ({
+    $type: "Badge" as const,
+    ...props,
+  }),
+  CancelAction: (
+    props: Omit<ProteusCancelAction, "$type">,
+  ): ProteusCancelAction => ({ $type: "CancelAction" as const, ...props }),
+  Chart: (props: Omit<ProteusChart, "$type">): ProteusChart => ({
+    $type: "Chart" as const,
+    ...props,
+  }),
+  DataTable: (props: Omit<ProteusDataTable, "$type">): ProteusDataTable => ({
+    $type: "DataTable" as const,
+    ...props,
+  }),
+  Document: (props: Omit<ProteusDocument, "$type">): ProteusDocument => ({
+    $type: "Document" as const,
+    ...props,
+  }),
+  Field: (props: Omit<ProteusField, "$type">): ProteusField => ({
+    $type: "Field" as const,
+    ...props,
+  }),
+  Group: (props: Omit<ProteusGroup, "$type">): ProteusGroup => ({
+    $type: "Group" as const,
+    ...props,
+  }),
+  Heading: (props: Omit<ProteusHeading, "$type">): ProteusHeading => ({
+    $type: "Heading" as const,
+    ...props,
+  }),
+  Image: (props: Omit<ProteusImage, "$type">): ProteusImage => ({
+    $type: "Image" as const,
+    ...props,
+  }),
+  Input: (props: Omit<ProteusInput, "$type">): ProteusInput => ({
+    $type: "Input" as const,
+    ...props,
+  }),
+  Link: (props: Omit<ProteusLink, "$type">): ProteusLink => ({
+    $type: "Link" as const,
+    ...props,
+  }),
+  Map: (props: Omit<ProteusMap, "$type">): ProteusMap => ({
+    $type: "Map" as const,
+    ...props,
+  }),
+  MIME_TYPE: "application/vnd.opal.proteus+json" as const,
+  Range: (props: Omit<ProteusRange, "$type">): ProteusRange => ({
+    $type: "Range" as const,
+    ...props,
+  }),
+  Select: (props: Omit<ProteusSelect, "$type">): ProteusSelect => ({
+    $type: "Select" as const,
+    ...props,
+  }),
+  SelectContent: (
+    props: Omit<ProteusSelectContent, "$type">,
+  ): ProteusSelectContent => ({ $type: "SelectContent" as const, ...props }),
+  SelectTrigger: (
+    props: Omit<ProteusSelectTrigger, "$type">,
+  ): ProteusSelectTrigger => ({ $type: "SelectTrigger" as const, ...props }),
+  Separator: (props: Omit<ProteusSeparator, "$type">): ProteusSeparator => ({
+    $type: "Separator" as const,
+    ...props,
+  }),
+  Show: (props: Omit<ProteusShow, "$type">): ProteusShow => ({
+    $type: "Show" as const,
+    ...props,
+  }),
+  Text: (props: Omit<ProteusText, "$type">): ProteusText => ({
+    $type: "Text" as const,
+    ...props,
+  }),
+  Textarea: (props: Omit<ProteusTextarea, "$type">): ProteusTextarea => ({
+    $type: "Textarea" as const,
+    ...props,
+  }),
+  Value: (props: Omit<ProteusValue, "$type">): ProteusValue => ({
+    $type: "Value" as const,
+    ...props,
+  }),
+};