@optimizely-opal/opal-tools-sdk 0.1.8-dev → 0.1.10-dev

package/src/proteus.ts

@@ -7,8 +7,11 @@
 export type OpalProteusDocumentSpecification =
   | ProteusAction
   | ProteusAtomicCondition
+  | ProteusBadge
   | ProteusCancelAction
+  | ProteusChart
   | ProteusCondition
+  | ProteusDataTable
   | ProteusDocument
   | ProteusElement
   | ProteusEventHandler
@@ -28,6 +31,7 @@ export type OpalProteusDocumentSpecification =
   | ProteusShow
   | ProteusText
   | ProteusTextarea
+  | ProteusTime
   | ProteusValue;
 export interface ProteusAction {
   $type: "Action";
@@ -45,7 +49,8 @@ export interface ProteusAction {
     | "inverse"
     | "primary"
     | "primary-opal"
-    | "subtle";
+    | "subtle"
+    | ProteusValue;
   backgroundImage?: SprinklePropBackgroundImage;
   bg?: SprinklePropBg;
   border?: SprinklePropBorder;
@@ -95,6 +100,16 @@ export interface ProteusAction {
          * Name of registered tool to call
          */
         tool: string;
+      }
+    | {
+        /**
+         * The action type
+         */
+        action: "download";
+        /**
+         * URL to download
+         */
+        url: string;
       };
   overflow?: SprinklePropOverflow;
   overflowX?: SprinklePropOverflowX;
@@ -199,6 +214,78 @@ export type ProteusAtomicCondition =
        */
       "!!": 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"
+    | ProteusValue;
+  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;
@@ -263,6 +350,46 @@ export interface ProteusCancelAction {
   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.
  */
@@ -299,40 +426,91 @@ export type ProteusCondition =
         )[],
       ];
     };
+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?: ProteusNode;
+  actions?:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
   /**
-   * A visual representation of the application
+   * 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;
+  appName?: string;
   /**
    * If true, hides chat prompt and forces user interaction with document. User can press ESC or close to abandon.
    */
   blocking?: boolean;
-  body: ProteusNode;
   /**
-   * A brief description or tagline that provides additional context about the Proteus document's purpose.
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
    */
-  subtitle?: string;
+  body:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
   /**
-   * A concise heading that encapsulates the essence of the Proteus document's content or intended action.
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
    */
-  title: string;
+  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
@@ -348,9 +526,10 @@ export type ProteusElement =
   | ProteusShow
   | ProteusText
   | ProteusTextarea
+  | ProteusTime
   | ProteusValue;
 /**
- * Handler for user interactions - either a server-side tool call or client-side message
+ * Handler for user interactions - a server-side tool call, client-side message, or client-side component action
  */
 export type ProteusEventHandler =
   | {
@@ -364,6 +543,16 @@ export type ProteusEventHandler =
        * Name of registered tool to call
        */
       tool: string;
+    }
+  | {
+      /**
+       * The action type
+       */
+      action: "download";
+      /**
+       * URL to download
+       */
+      url: string;
     };
 export interface ProteusField {
   $type: "Field";
@@ -449,7 +638,7 @@ export interface ProteusField {
   /**
    * Display an asterisk for required inputs.
    */
-  required?: boolean;
+  required?: boolean | ProteusValue;
   rounded?: SprinklePropRounded;
   shadow?: SprinklePropShadow;
   size?: SprinklePropSize;
@@ -466,7 +655,7 @@ export interface ProteusGroup {
    * 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";
+  alignItems?: "center" | "end" | "normal" | "start" | "stretch" | ProteusValue;
   alignSelf?: SprinklePropAlignSelf;
   animation?: SprinklePropAnimation;
   backgroundImage?: SprinklePropBackgroundImage;
@@ -487,7 +676,12 @@ export interface ProteusGroup {
    *
    * Default: 'row' (CSS standard)
    */
-  flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+  flexDirection?:
+    | "column"
+    | "column-reverse"
+    | "row"
+    | "row-reverse"
+    | ProteusValue;
   flexWrap?: SprinklePropFlexWrap;
   fontFamily?: SprinklePropFontFamily;
   fontSize?: SprinklePropFontSize;
@@ -568,7 +762,7 @@ export interface ProteusHeading {
    *
    * Use `asChild` to decouple the semantic level from visual appearance.
    */
-  level?: "1" | "2" | "3" | "4";
+  level?: "1" | "2" | "3" | "4" | ProteusValue;
   m?: SprinklePropM;
   maxH?: SprinklePropMaxH;
   maxW?: SprinklePropMaxW;
@@ -608,7 +802,7 @@ export interface ProteusImage {
   /**
    * Alternative text for the image
    */
-  alt?: string;
+  alt?: ProteusValue | string;
   animation?: SprinklePropAnimation;
   backgroundImage?: SprinklePropBackgroundImage;
   bg?: SprinklePropBg;
@@ -661,7 +855,7 @@ export interface ProteusImage {
   /**
    * The image source URL
    */
-  src?: string;
+  src?: ProteusValue | string;
   textAlign?: SprinklePropTextAlign;
   textTransform?: SprinklePropTextTransform;
   transition?: SprinklePropTransition;
@@ -697,7 +891,7 @@ export interface ProteusInput {
   /**
    * Control the appearance of the input.
    */
-  appearance?: "default" | "number";
+  appearance?: "default" | "number" | ProteusValue;
   backgroundImage?: SprinklePropBackgroundImage;
   bg?: SprinklePropBg;
   border?: SprinklePropBorder;
@@ -733,7 +927,7 @@ export interface ProteusInput {
   /**
    * The name of the form control element.
    */
-  name?: string;
+  name?: ProteusValue | string;
   objectFit?: SprinklePropObjectFit;
   overflow?: SprinklePropOverflow;
   overflowX?: SprinklePropOverflowX;
@@ -744,7 +938,7 @@ export interface ProteusInput {
   /**
    * The placeholder text to use when control has no value.
    */
-  placeholder?: string;
+  placeholder?: ProteusValue | string;
   placeItems?: SprinklePropPlaceItems;
   pointerEvents?: SprinklePropPointerEvents;
   pr?: SprinklePropPr;
@@ -782,6 +976,7 @@ export interface ProteusInput {
     | "time"
     | "url"
     | "week"
+    | ProteusValue
     | string;
   w?: SprinklePropW;
   whiteSpace?: SprinklePropWhiteSpace;
@@ -817,7 +1012,7 @@ export interface ProteusLink {
   /**
    * The link href.
    */
-  href?: string;
+  href?: ProteusValue | string;
   justifyContent?: SprinklePropJustifyContent;
   justifyItems?: SprinklePropJustifyItems;
   m?: SprinklePropM;
@@ -855,13 +1050,17 @@ export interface ProteusLink {
 export interface ProteusMap {
   $type: "Map";
   /**
-   * Template object to render for each item in the array. Value paths are relative to current item.
+   * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
    */
-  children?: {
-    [k: string]: undefined | unknown;
-  };
+  children?:
+    | (boolean | null | number | ProteusElement | string)[]
+    | boolean
+    | null
+    | number
+    | ProteusElement
+    | string;
   /**
-   * JSON pointer path to array (e.g., '/questions')
+   * JSON pointer path to the source array in the data (e.g., '/results')
    */
   path: string;
 }
@@ -923,14 +1122,14 @@ export interface ProteusRange {
   /**
    * The maximum value for the range.
    */
-  max?: number;
+  max?: number | ProteusValue;
   maxH?: SprinklePropMaxH;
   maxW?: SprinklePropMaxW;
   mb?: SprinklePropMb;
   /**
    * The minimum value for the range.
    */
-  min?: number;
+  min?: number | ProteusValue;
   ml?: SprinklePropMl;
   mr?: SprinklePropMr;
   mt?: SprinklePropMt;
@@ -954,7 +1153,7 @@ export interface ProteusRange {
   /**
    * The stepping interval for the range.
    */
-  step?: number;
+  step?: number | ProteusValue;
   textAlign?: SprinklePropTextAlign;
   textTransform?: SprinklePropTextTransform;
   transition?: SprinklePropTransition;
@@ -968,7 +1167,7 @@ export interface ProteusSelect {
   /**
    * The name of the inner select element.
    */
-  name?: string;
+  name?: ProteusValue | string;
   /**
    * The select items/options we want to render.
    */
@@ -1208,6 +1407,10 @@ export interface ProteusText {
   h?: SprinklePropH;
   justifyContent?: SprinklePropJustifyContent;
   justifyItems?: SprinklePropJustifyItems;
+  /**
+   * Truncate the text at specific number of lines.
+   */
+  lineClamp?: "1" | "2" | "3" | "4" | ProteusValue;
   m?: SprinklePropM;
   maxH?: SprinklePropMaxH;
   maxW?: SprinklePropMaxW;
@@ -1236,6 +1439,10 @@ export interface ProteusText {
   textAlign?: SprinklePropTextAlign;
   textTransform?: SprinklePropTextTransform;
   transition?: SprinklePropTransition;
+  /**
+   * Whether to truncate the text and add an ellipsis at the end.
+   */
+  truncate?: boolean | ProteusValue;
   w?: SprinklePropW;
   whiteSpace?: SprinklePropWhiteSpace;
   z?: SprinklePropZ;
@@ -1273,7 +1480,7 @@ export interface ProteusTextarea {
   /**
    * Limits the height of the textarea when `resize=auto` is used.
    */
-  maxRows?: 1 | 2 | 3 | 4 | 5;
+  maxRows?: 1 | 2 | 3 | 4 | 5 | ProteusValue;
   maxW?: SprinklePropMaxW;
   mb?: SprinklePropMb;
   ml?: SprinklePropMl;
@@ -1284,7 +1491,7 @@ export interface ProteusTextarea {
   /**
    * The name of the form control element.
    */
-  name?: string;
+  name?: ProteusValue | string;
   objectFit?: SprinklePropObjectFit;
   overflow?: SprinklePropOverflow;
   overflowX?: SprinklePropOverflowX;
@@ -1295,7 +1502,7 @@ export interface ProteusTextarea {
   /**
    * The placeholder text to use when control has no value.
    */
-  placeholder?: string;
+  placeholder?: ProteusValue | string;
   placeItems?: SprinklePropPlaceItems;
   pointerEvents?: SprinklePropPointerEvents;
   pr?: SprinklePropPr;
@@ -1305,12 +1512,12 @@ export interface ProteusTextarea {
   /**
    * Control whether resizing mode is manual, automatic, or disabled.
    */
-  resize?: "auto" | "none" | "vertical";
+  resize?: "auto" | "none" | "vertical" | ProteusValue;
   rounded?: SprinklePropRounded;
   /**
    * The number of rows to display.
    */
-  rows?: number;
+  rows?: number | ProteusValue;
   shadow?: SprinklePropShadow;
   textAlign?: SprinklePropTextAlign;
   textTransform?: SprinklePropTextTransform;
@@ -1319,10 +1526,82 @@ export interface ProteusTextarea {
   whiteSpace?: SprinklePropWhiteSpace;
   z?: SprinklePropZ;
 }
+export interface ProteusTime {
+  $type: "Time";
+  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;
+  /**
+   * The date to display. Can be a `Date` object or an ISO 8601 string.
+   */
+  date: ProteusValue | string;
+  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;
+  /**
+   * Whether to show the date part of the value. Defaults to `true`.
+   */
+  showDate?: boolean | ProteusValue;
+  /**
+   * Whether to show the time part of the value. Defaults to `false`.
+   */
+  showTime?: boolean | ProteusValue;
+  size?: SprinklePropSize;
+  textAlign?: SprinklePropTextAlign;
+  textTransform?: SprinklePropTextTransform;
+  transition?: SprinklePropTransition;
+  w?: SprinklePropW;
+  whiteSpace?: SprinklePropWhiteSpace;
+  z?: SprinklePropZ;
+}
 export interface ProteusValue {
   $type: "Value";
   /**
-   * JSON pointer path to value (e.g., '/question', '/options/0/label')
+   * 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;
 }
@@ -1334,7 +1613,8 @@ export type SprinklePropAlignItems =
   | "end"
   | "normal"
   | "start"
-  | "stretch";
+  | "stretch"
+  | ProteusValue;
 /**
  * Set the element's `align-self` CSS property
  */
@@ -1343,15 +1623,16 @@ export type SprinklePropAlignSelf =
   | "end"
   | "normal"
   | "start"
-  | "stretch";
+  | "stretch"
+  | ProteusValue;
 /**
  * Animate element with CSS animations
  */
-export type SprinklePropAnimation = "ping" | "pulse" | "spin";
+export type SprinklePropAnimation = "ping" | "pulse" | "spin" | ProteusValue;
 /**
  * Set the element's `background-image` CSS property
  */
-export type SprinklePropBackgroundImage = "gradient.opal";
+export type SprinklePropBackgroundImage = "gradient.opal" | ProteusValue;
 /**
  * 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`.
  */
@@ -1395,15 +1676,16 @@ export type SprinklePropBg =
   | "bg.warning.light"
   | "bg.warning.subtle"
   | "current"
-  | "transparent";
+  | "transparent"
+  | ProteusValue;
 /**
  * Set the element's `border-width` CSS property
  */
-export type SprinklePropBorder = "0" | "1" | "2";
+export type SprinklePropBorder = "0" | "1" | "2" | ProteusValue;
 /**
  * Set the element's `border-bottom-width` CSS property
  */
-export type SprinklePropBorderB = "0" | "1" | "2";
+export type SprinklePropBorderB = "0" | "1" | "2" | ProteusValue;
 /**
  * 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`.
  */
@@ -1421,19 +1703,20 @@ export type SprinklePropBorderColor =
   | "border.tertiary"
   | "border.warning"
   | "current"
-  | "transparent";
+  | "transparent"
+  | ProteusValue;
 /**
  * Set the element's `border-left-width` CSS property
  */
-export type SprinklePropBorderL = "0" | "1" | "2";
+export type SprinklePropBorderL = "0" | "1" | "2" | ProteusValue;
 /**
  * Set the element's `border-right-width` CSS property
  */
-export type SprinklePropBorderR = "0" | "1" | "2";
+export type SprinklePropBorderR = "0" | "1" | "2" | ProteusValue;
 /**
  * Set the element's `border-top-width` CSS property
  */
-export type SprinklePropBorderT = "0" | "1" | "2";
+export type SprinklePropBorderT = "0" | "1" | "2" | ProteusValue;
 /**
  * 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`.
  */
@@ -1473,11 +1756,12 @@ export type SprinklePropColor =
   | "fg.warning.light"
   | "fg.warning.strong"
   | "fg.white"
-  | "transparent";
+  | "transparent"
+  | ProteusValue;
 /**
  * Set the element's `cursor` CSS property
  */
-export type SprinklePropCursor = "default" | "pointer" | "text";
+export type SprinklePropCursor = "default" | "pointer" | "text" | ProteusValue;
 /**
  * Set the element's `display` CSS property
  */
@@ -1491,11 +1775,12 @@ export type SprinklePropDisplay =
   | "none"
   | "table"
   | "table-cell"
-  | "table-row";
+  | "table-row"
+  | ProteusValue;
 /**
  * Set the element's `flex` CSS property
  */
-export type SprinklePropFlex = "1" | "auto" | "initial" | "none";
+export type SprinklePropFlex = "1" | "auto" | "initial" | "none" | ProteusValue;
 /**
  * Set the element's `flex-direction` CSS property
  */
@@ -1503,15 +1788,16 @@ export type SprinklePropFlexDirection =
   | "column"
   | "column-reverse"
   | "row"
-  | "row-reverse";
+  | "row-reverse"
+  | ProteusValue;
 /**
  * Set the element's `flex-wrap` CSS property
  */
-export type SprinklePropFlexWrap = "nowrap" | "wrap";
+export type SprinklePropFlexWrap = "nowrap" | "wrap" | ProteusValue;
 /**
  * Set the element's font family. Only accepts predefined fontFamily tokens.
  */
-export type SprinklePropFontFamily = "mono" | "sans";
+export type SprinklePropFontFamily = "mono" | "sans" | ProteusValue;
 /**
  * Set the element's font size and line height (both properties are set together). Only accepts predefined fontSize tokens.
  */
@@ -1524,11 +1810,18 @@ export type SprinklePropFontSize =
   | "md"
   | "sm"
   | "xl"
-  | "xs";
+  | "xs"
+  | ProteusValue;
 /**
  * Set the element's `font-weight` CSS property
  */
-export type SprinklePropFontWeight = "400" | "500" | "600" | "700" | "inherit";
+export type SprinklePropFontWeight =
+  | "400"
+  | "500"
+  | "600"
+  | "700"
+  | "inherit"
+  | ProteusValue;
 /**
  * Set the element's `gap` CSS property
  */
@@ -1547,15 +1840,21 @@ export type SprinklePropGap =
   | "40"
   | "48"
   | "64"
-  | "80";
+  | "80"
+  | ProteusValue;
 /**
  * Set the element's size across grid columns
  */
-export type SprinklePropGridColumn = "1" | "2" | "3" | "4";
+export type SprinklePropGridColumn = "1" | "2" | "3" | "4" | ProteusValue;
 /**
  * Control number of columns in a grid layout
  */
-export type SprinklePropGridTemplateColumns = "1" | "2" | "3" | "4";
+export type SprinklePropGridTemplateColumns =
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | ProteusValue;
 /**
  * Set the element's height. Only accepts predefined size tokens.
  */
@@ -1590,7 +1889,8 @@ export type SprinklePropH =
   | "min"
   | "sm"
   | "xl"
-  | "xs";
+  | "xs"
+  | ProteusValue;
 /**
  * Set the element's `justify-content` CSS property
  */
@@ -1604,7 +1904,8 @@ export type SprinklePropJustifyContent =
   | "space-between"
   | "space-evenly"
   | "start"
-  | "stretch";
+  | "stretch"
+  | ProteusValue;
 /**
  * Set the element's `justify-items` CSS property
  */
@@ -1613,7 +1914,8 @@ export type SprinklePropJustifyItems =
   | "end"
   | "normal"
   | "start"
-  | "stretch";
+  | "stretch"
+  | ProteusValue;
 /**
  * Set the element's margin on all sides. Only accepts predefined spacing tokens.
  */
@@ -1633,15 +1935,28 @@ export type SprinklePropM =
   | "48"
   | "64"
   | "80"
-  | "auto";
+  | "auto"
+  | ProteusValue;
 /**
  * Set the element's maximum height. Only accepts predefined maxSize tokens.
  */
-export type SprinklePropMaxH = "full" | "lg" | "md" | "sm" | "xs";
+export type SprinklePropMaxH =
+  | "full"
+  | "lg"
+  | "md"
+  | "sm"
+  | "xs"
+  | ProteusValue;
 /**
  * Set the element's maximum width. Only accepts predefined maxSize tokens.
  */
-export type SprinklePropMaxW = "full" | "lg" | "md" | "sm" | "xs";
+export type SprinklePropMaxW =
+  | "full"
+  | "lg"
+  | "md"
+  | "sm"
+  | "xs"
+  | ProteusValue;
 /**
  * Set the element's bottom margin. Only accepts predefined spacing tokens.
  */
@@ -1661,7 +1976,8 @@ export type SprinklePropMb =
   | "48"
   | "64"
   | "80"
-  | "auto";
+  | "auto"
+  | ProteusValue;
 /**
  * Set the element's left margin. Only accepts predefined spacing tokens.
  */
@@ -1681,7 +1997,8 @@ export type SprinklePropMl =
   | "48"
   | "64"
   | "80"
-  | "auto";
+  | "auto"
+  | ProteusValue;
 /**
  * Set the element's right margin. Only accepts predefined spacing tokens.
  */
@@ -1701,7 +2018,8 @@ export type SprinklePropMr =
   | "48"
   | "64"
   | "80"
-  | "auto";
+  | "auto"
+  | ProteusValue;
 /**
  * Set the element's top margin. Only accepts predefined spacing tokens.
  */
@@ -1721,7 +2039,8 @@ export type SprinklePropMt =
   | "48"
   | "64"
   | "80"
-  | "auto";
+  | "auto"
+  | ProteusValue;
 /**
  * Set the element's left and right margin. Only accepts predefined spacing tokens.
  */
@@ -1741,7 +2060,9 @@ export type SprinklePropMx =
   | "48"
   | "64"
   | "80"
-  | "auto";
+  | "auto"
+  | ProteusValue;
+
 /**
  * Set the element's top and bottom margin. Only accepts predefined spacing tokens.
  */
@@ -1761,24 +2082,37 @@ export type SprinklePropMy =
   | "48"
   | "64"
   | "80"
-  | "auto";
+  | "auto"
+  | ProteusValue;
 /**
  * Set the element's `object-fit` CSS property
  */
-export type SprinklePropObjectFit = "contain" | "cover" | "fill" | "none";
+export type SprinklePropObjectFit =
+  | "contain"
+  | "cover"
+  | "fill"
+  | "none"
+  | ProteusValue;
 /**
  * Set the element's `overflow` CSS property
  */
-export type SprinklePropOverflow = "auto" | "hidden" | "visible";
+export type SprinklePropOverflow = "auto" | "hidden" | "visible" | ProteusValue;
 /**
  * Set the element's `overflow-x` CSS property
  */
-export type SprinklePropOverflowX = "auto" | "hidden" | "visible";
-
+export type SprinklePropOverflowX =
+  | "auto"
+  | "hidden"
+  | "visible"
+  | ProteusValue;
 /**
  * Set the element's `overflow-y` CSS property
  */
-export type SprinklePropOverflowY = "auto" | "hidden" | "visible";
+export type SprinklePropOverflowY =
+  | "auto"
+  | "hidden"
+  | "visible"
+  | ProteusValue;
 /**
  * Set the element's padding on all sides. Only accepts predefined spacing tokens.
  */
@@ -1797,7 +2131,8 @@ export type SprinklePropP =
   | "40"
   | "48"
   | "64"
-  | "80";
+  | "80"
+  | ProteusValue;
 /**
  * Set the element's bottom padding. Only accepts predefined spacing tokens.
  */
@@ -1816,7 +2151,8 @@ export type SprinklePropPb =
   | "40"
   | "48"
   | "64"
-  | "80";
+  | "80"
+  | ProteusValue;
 /**
  * Set the element's left padding. Only accepts predefined spacing tokens.
  */
@@ -1835,15 +2171,16 @@ export type SprinklePropPl =
   | "40"
   | "48"
   | "64"
-  | "80";
+  | "80"
+  | ProteusValue;
 /**
  * Set the element's `place-items` CSS property
  */
-export type SprinklePropPlaceItems = "center";
+export type SprinklePropPlaceItems = "center" | ProteusValue;
 /**
  * Set the element's `pointer-events` CSS property
  */
-export type SprinklePropPointerEvents = "auto" | "none";
+export type SprinklePropPointerEvents = "auto" | "none" | ProteusValue;
 /**
  * Set the element's right padding. Only accepts predefined spacing tokens.
  */
@@ -1862,7 +2199,8 @@ export type SprinklePropPr =
   | "40"
   | "48"
   | "64"
-  | "80";
+  | "80"
+  | ProteusValue;
 /**
  * Set the element's top padding. Only accepts predefined spacing tokens.
  */
@@ -1881,7 +2219,8 @@ export type SprinklePropPt =
   | "40"
   | "48"
   | "64"
-  | "80";
+  | "80"
+  | ProteusValue;
 /**
  * Set the element's left and right padding. Only accepts predefined spacing tokens.
  */
@@ -1900,7 +2239,8 @@ export type SprinklePropPx =
   | "40"
   | "48"
   | "64"
-  | "80";
+  | "80"
+  | ProteusValue;
 /**
  * Set the element's top and bottom padding. Only accepts predefined spacing tokens.
  */
@@ -1919,7 +2259,8 @@ export type SprinklePropPy =
   | "40"
   | "48"
   | "64"
-  | "80";
+  | "80"
+  | ProteusValue;
 /**
  * Set the element's border radius. Only accepts predefined borderRadius tokens.
  */
@@ -1931,11 +2272,18 @@ export type SprinklePropRounded =
   | "none"
   | "sm"
   | "xl"
-  | "xs";
+  | "xs"
+  | ProteusValue;
 /**
  * Set the element's box shadow. Only accepts predefined boxShadow tokens.
  */
-export type SprinklePropShadow = "lg" | "md" | "none" | "sm" | "xl";
+export type SprinklePropShadow =
+  | "lg"
+  | "md"
+  | "none"
+  | "sm"
+  | "xl"
+  | ProteusValue;
 /**
  * Set the element's width and height. Only accepts predefined size tokens.
  *
@@ -1973,15 +2321,25 @@ export type SprinklePropSize =
   | "min"
   | "sm"
   | "xl"
-  | "xs";
+  | "xs"
+  | ProteusValue;
 /**
  * Set the element's `text-align` CSS property
  */
-export type SprinklePropTextAlign = "center" | "end" | "justify" | "start";
+export type SprinklePropTextAlign =
+  | "center"
+  | "end"
+  | "justify"
+  | "start"
+  | ProteusValue;
 /**
  * Set the element's `text-transform` CSS property
  */
-export type SprinklePropTextTransform = "capitalize" | "none" | "uppercase";
+export type SprinklePropTextTransform =
+  | "capitalize"
+  | "none"
+  | "uppercase"
+  | ProteusValue;
 /**
  * Control which CSS properties should transition
  */
@@ -1990,7 +2348,8 @@ export type SprinklePropTransition =
   | "colors"
   | "none"
   | "opacity"
-  | "transform";
+  | "transform"
+  | ProteusValue;
 /**
  * Set the element's width. Only accepts predefined size tokens.
  */
@@ -2025,11 +2384,12 @@ export type SprinklePropW =
   | "min"
   | "sm"
   | "xl"
-  | "xs";
+  | "xs"
+  | ProteusValue;
 /**
  * Set the element's `white-space` CSS property
  */
-export type SprinklePropWhiteSpace = "nowrap";
+export type SprinklePropWhiteSpace = "nowrap" | ProteusValue;
 /**
  * Set the element's stacking order. Only accepts predefined zIndex tokens (e.g., popover, toast, tooltip) or numeric values (0, 10, 20, 30, auto).
  */
@@ -2041,7 +2401,8 @@ export type SprinklePropZ =
   | "auto"
   | "popover"
   | "toast"
-  | "tooltip";
+  | "tooltip"
+  | ProteusValue;
 
 /**
  * Builder namespace for Adaptive UI Document components.
@@ -2056,9 +2417,21 @@ export const UI = {
     $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,
@@ -2122,6 +2495,10 @@ export const UI = {
     $type: "Textarea" as const,
     ...props,
   }),
+  Time: (props: Omit<ProteusTime, "$type">): ProteusTime => ({
+    $type: "Time" as const,
+    ...props,
+  }),
   Value: (props: Omit<ProteusValue, "$type">): ProteusValue => ({
     $type: "Value" as const,
     ...props,