@optiaxiom/react 1.9.10 → 1.9.11

package/dist/cjs/{unstable-Bb898ULi.js → unstable-B-D5C_OF.js}

@@ -1,43 +1,43 @@
 "use client";
 'use strict';
 
-var Textarea = require('./Textarea-Cj7_IcTw.js');
+var Textarea = require('./Textarea-7peZGuHS.js');
 var jsxRuntime = require('react/jsx-runtime');
 var reactId = require('@radix-ui/react-id');
 var clsx = require('clsx');
 var reactSlot = require('@radix-ui/react-slot');
 var React = require('react');
-require('./assets/src/layers/layers.css.ts.vanilla-wLXXILuv.css');
-require('./assets/src/details-panel/DetailsPanel.css.ts.vanilla-DjnicHVT.css');
+require('./assets/src/layers/layers.css.ts.vanilla-Boo8Am80.css');
+require('./assets/src/details-panel/DetailsPanel.css.ts.vanilla-B40_CN0s.css');
 var reactContext = require('@radix-ui/react-context');
-require('./assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-hWTHbaLa.css');
-require('./assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-BawpJl-K.css');
+require('./assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-B6RjvVx6.css');
+require('./assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-hfI4XXKr.css');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
-require('./assets/src/file-upload/FileUpload.css.ts.vanilla-DYqhVZIw.css');
-require('./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-CyWkGFMd.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-BMrqQ0_r.css');
+require('./assets/src/file-upload/FileUpload.css.ts.vanilla-DDewyRPz.css');
+require('./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-9_kAdCPD.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-DCWjOClR.css');
 var RadixHoverCard = require('@radix-ui/react-hover-card');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
-require('./assets/src/hover-card/HoverCardTrigger.css.ts.vanilla-Bk2XimWN.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-ydxc12qU.css');
+require('./assets/src/hover-card/HoverCardTrigger.css.ts.vanilla-kuSdtvfJ.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-D654_V_u.css');
 var ResizablePrimitive = require('react-resizable-panels');
-require('./assets/src/resizable/ResizableHandle.css.ts.vanilla-DoS07AA7.css');
-require('./assets/src/layout/Layout.css.ts.vanilla-N4Ii6HVc.css');
-require('./assets/src/layout/LayoutContent.css.ts.vanilla-BLEAwUjM.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-B1ra92VS.css');
+require('./assets/src/resizable/ResizableHandle.css.ts.vanilla-Dmz7wSbx.css');
+require('./assets/src/layout/Layout.css.ts.vanilla-Bbf2dzjm.css');
+require('./assets/src/layout/LayoutContent.css.ts.vanilla-D7Yl5XRK.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-nyG8fN7s.css');
 var RadixRovingFocus = require('@radix-ui/react-roving-focus');
-require('./assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-CGSDkRip.css');
+require('./assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-79k5Py4f.css');
 var jsonpointer = require('jsonpointer');
 var reactTable = require('@tanstack/react-table');
-require('./assets/src/proteus-document/ProteusImage.css.ts.vanilla-OtqkruZJ.css');
+require('./assets/src/proteus-document/ProteusImage.css.ts.vanilla-Ckr9JAKL.css');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/range/Range.css.ts.vanilla-3Q-043iy.css');
+require('./assets/src/range/Range.css.ts.vanilla-BLcExXpP.css');
 var jsonSchema = require('@cfworker/json-schema');
 var helpers = require('@dnd-kit/helpers');
 var react = require('@dnd-kit/react');
-require('./assets/src/sortable/SortableHandle.css.ts.vanilla-ZUBtYnZ6.css');
+require('./assets/src/sortable/SortableHandle.css.ts.vanilla-CMmwnI0B.css');
 var sortable = require('@dnd-kit/react/sortable');
-require('./assets/src/sortable/SortableItem.css.ts.vanilla-hs5pnyB7.css');
+require('./assets/src/sortable/SortableItem.css.ts.vanilla-Cc8uxy7_.css');
 require('@optiaxiom/globals');
 
 function _interopNamespaceDefault(e) {
@@ -217,7 +217,7 @@ function DataTableExpandableHeader({
 }
 DataTableExpandableHeader.displayName = "@optiaxiom/react/DataTableExpandableHeader";
 
-var root$4 = Textarea.recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'jzzq7a']});
+var root$4 = Textarea.recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'_1lnch5a']});
 
 const [DetailsPanelProvider, useDetailsPanelContext] = reactContext.createContext("@optiaxiom/react/DetailsPanel");
 
@@ -260,14 +260,14 @@ const DetailsPanelBody = React.forwardRef(({ children, ...props }, ref) => {
 });
 DetailsPanelBody.displayName = "@optiaxiom/react/DetailsPanelBody";
 
-var footer = Textarea.recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'16',pt:'8'},'_1wnyjw6']});
+var footer = Textarea.recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'16',pt:'8'},'_1gdnlkv']});
 
 const DetailsPanelFooter = React.forwardRef(({ children, className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Textarea.ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(Textarea.Group, { ref, ...footer({}, className), ...props, children }) });
 });
 DetailsPanelFooter.displayName = "@optiaxiom/react/DetailsPanelFooter";
 
-var header = Textarea.recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'_1mnozsl']});
+var header = Textarea.recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'_5nvcel']});
 
 const DetailsPanelHeader = React.forwardRef(
   ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
@@ -304,7 +304,7 @@ const DetailsPanelHeader = React.forwardRef(
 );
 DetailsPanelHeader.displayName = "@optiaxiom/react/DetailsPanelHeader";
 
-var upload = Textarea.recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'s0jm98']});
+var upload = Textarea.recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_5khr9d']});
 
 const [FileUploadProvider, useFileUploadContext] = reactContext.createContext("@optiaxiom/react/FileUpload");
 
@@ -341,8 +341,8 @@ const IconFileImport = Textarea.withIcon(
   )
 );
 
-var dropzone = Textarea.recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',flexDirection:'column',gap:'16',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors'},'_196i94e'],variants:{drag:{false:{},true:['a98izc']},hidden:{false:'_1vcg9jd',true:'ofvr2c'},overlay:{false:{flex:'1'},true:[{z:'10'},'_1928gsq']}}});
-var label = Textarea.recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'8'}],variants:{disabled:{false:{},true:'gb3r81'}}});
+var dropzone = Textarea.recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',flexDirection:'column',gap:'16',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors'},'gh62g6'],variants:{drag:{false:{},true:['_1weobqh']},hidden:{false:'_765lpr',true:'w877ka'},overlay:{false:{flex:'1'},true:[{z:'10'},'_1sbvboq']}}});
+var label = Textarea.recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'8'}],variants:{disabled:{false:{},true:'_3fjoym'}}});
 
 const useFileUploadTrigger = () => {
   const { inputRef } = useFileUploadContext(
@@ -689,7 +689,7 @@ const FileUploadDropzone = React.forwardRef(
 );
 FileUploadDropzone.displayName = "@optiaxiom/react/FileUploadDropzone";
 
-var mark$1 = Textarea.recipeRuntime({base:'_1oyktxo'});
+var mark$1 = Textarea.recipeRuntime({base:'_1m02d7l'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -803,7 +803,7 @@ const HoverCardContent = React.forwardRef(
 );
 HoverCardContent.displayName = "@optiaxiom/react/HoverCardContent";
 
-var trigger$1 = Textarea.recipeRuntime({base:'_1etzyt2'});
+var trigger$1 = Textarea.recipeRuntime({base:'_1334o8t'});
 
 const HoverCardTrigger = React.forwardRef(({ children, className, ...props }, ref) => {
   const { boxProps, restProps } = Textarea.extractBoxProps(props);
@@ -811,8 +811,8 @@ const HoverCardTrigger = React.forwardRef(({ children, className, ...props }, re
 });
 HoverCardTrigger.displayName = "@optiaxiom/react/HoverCardTrigger";
 
-var editor = Textarea.recipeRuntime({base:'_1xgikv4',variants:{empty:{false:{},true:'_8hth62'}}});
-var input = Textarea.recipeRuntime({base:'_1dd57rr'});
+var editor = Textarea.recipeRuntime({base:'_12ry38d',variants:{empty:{false:{},true:'_1a4tjoe'}}});
+var input = Textarea.recipeRuntime({base:'_8gbzgp'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -898,8 +898,8 @@ const Resizable = ({ ...props }) => {
 };
 Resizable.displayName = "@optiaxiom/react/Resizable";
 
-var handle$1 = Textarea.recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_2k0hj3']});
-var root$3 = Textarea.recipeRuntime({base:[{flexDirection:'column',gap:'16',justifyContent:'center',rounded:'sm',z:'10'},'_8e11ya']});
+var handle$1 = Textarea.recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_1cxmrmh']});
+var root$3 = Textarea.recipeRuntime({base:[{flexDirection:'column',gap:'16',justifyContent:'center',rounded:'sm',z:'10'},'_6ry91u']});
 
 const ResizableHandle = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Group, { asChild: true, ...root$3(), children: /* @__PURE__ */ jsxRuntime.jsx(ResizablePrimitive__namespace.PanelResizeHandle, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Textarea.Box, { ...handle$1() }) }) });
@@ -911,7 +911,7 @@ const ResizablePanel = ({ ...props }) => {
 };
 ResizablePanel.displayName = "@optiaxiom/react/ResizablePanel";
 
-var layout = Textarea.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1l2jmsd'],variants:{size:{full:'vd99ub',screen:'a1f08c'}}});
+var layout = Textarea.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'w729t2'],variants:{size:{full:'_1ogd4wc',screen:'_2f271m'}}});
 
 const Layout = React.forwardRef(
   ({
@@ -944,7 +944,7 @@ const Layout = React.forwardRef(
 );
 Layout.displayName = "@optiaxiom/react/Layout";
 
-var content = Textarea.recipeRuntime({base:[{flexDirection:'column',gap:'16',overflow:'auto',px:'32',py:'24'},'_14omufm']});
+var content = Textarea.recipeRuntime({base:[{flexDirection:'column',gap:'16',overflow:'auto',px:'32',py:'24'},'_6a1aww']});
 
 const LayoutContent = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -962,7 +962,7 @@ const LayoutContent = React.forwardRef(
 );
 LayoutContent.displayName = "@optiaxiom/react/LayoutContent";
 
-var pill = Textarea.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',transition:'colors',whiteSpace:'nowrap'},'_15bo8qd'],variants:{interactive:{false:{},true:'_1ewz1yp'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = Textarea.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',transition:'colors',whiteSpace:'nowrap'},'xdmtw5'],variants:{interactive:{false:{},true:'_1fkbhrd'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Slot$2 = reactSlot.createSlot("@optiaxiom/react/Pill");
 const Pill = React.forwardRef(
@@ -1223,9 +1223,9 @@ const PillMenuPill = React.forwardRef(
 );
 PillMenuPill.displayName = "@optiaxiom/react/PillMenuPill";
 
-var root$2 = Textarea.recipeRuntime({base:[{border:'1',rounded:'md',transition:'colors'},'nl8yh1'],variants:{size:{md:'_7ieik2',lg:'_834eyc'}}});
-var trigger = Textarea.recipeRuntime({base:[{display:'grid',placeItems:'center',rounded:'md'},'_137hxzu']});
-var wrapper = Textarea.recipeRuntime({base:'a62kfe'});
+var root$2 = Textarea.recipeRuntime({base:[{border:'1',rounded:'md',transition:'colors'},'o645fk'],variants:{size:{md:'ya0xs5',lg:'_21zok9'}}});
+var trigger = Textarea.recipeRuntime({base:[{display:'grid',placeItems:'center',rounded:'md'},'_1ct8tff']});
+var wrapper = Textarea.recipeRuntime({base:'w72wlv'});
 
 const remapSize = {
   md: "xs",
@@ -1311,8 +1311,52 @@ const PillMenuTrigger = React.forwardRef(
 );
 PillMenuTrigger.displayName = "@optiaxiom/react/PillMenuTrigger";
 
+async function downloadFile(url) {
+  const response = await fetch(url);
+  const blob = await response.blob();
+  const objectUrl = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = objectUrl;
+  a.download = url.split("/").pop() || "";
+  a.click();
+  URL.revokeObjectURL(objectUrl);
+}
+
 const [ProteusDocumentProvider, useProteusDocumentContext] = reactContext.createContext("@optiaxiom/react/ProteusDocument");
 
+const [ProteusDocumentPathProvider, useProteusDocumentPathContext] = reactContext.createContext("@optiaxiom/react/ProteusDocumentPath", {
+  path: ""
+});
+
+function getProteusValue(data, path, parentPath) {
+  try {
+    return jsonpointer.get(data, path.startsWith("/") ? path : `${parentPath}/${path}`);
+  } catch (error) {
+    return null;
+  }
+}
+
+function resolveProteusValue(value, data, parentPath) {
+  if (typeof value === "object" && value !== null && "$type" in value && value.$type === "Value" && "path" in value && typeof value.path === "string") {
+    return getProteusValue(data, value.path, parentPath);
+  }
+  return value;
+}
+
+function useResolvedProteusProps(props) {
+  const { data } = useProteusDocumentContext(
+    "@optiaxiom/react/useResolvedProteusProps"
+  );
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/react/useResolvedProteusProps"
+  );
+  const resolved = {};
+  for (const [key, value] of Object.entries(props)) {
+    resolved[key] = resolveProteusValue(value, data, parentPath);
+  }
+  return resolved;
+}
+
 function ProteusAction({
   children,
   onClick,
@@ -1321,17 +1365,21 @@ function ProteusAction({
   const { onEvent } = useProteusDocumentContext(
     "@optiaxiom/react/ProteusAction"
   );
+  const [loading, setLoading] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Textarea.Button,
     {
       justifyContent: "center",
-      onClick: () => {
-        if (!onClick) {
+      loading,
+      onClick: async () => {
+        if (!onClick || loading) {
           return;
         }
-        onEvent(onClick);
+        setLoading(true);
+        await onEvent(onClick);
+        setLoading(false);
       },
-      ...props,
+      ...useResolvedProteusProps(props),
       children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children })
     }
   );
@@ -1339,7 +1387,7 @@ function ProteusAction({
 ProteusAction.displayName = "@optiaxiom/react/ProteusAction";
 
 function ProteusBadge({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Badge, { ...props, children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Badge, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
 }
 ProteusBadge.displayName = "@optiaxiom/react/ProteusBadge";
 
@@ -1356,7 +1404,7 @@ function ProteusCancelAction({
     {
       onSubmit: (event) => {
         event.preventDefault();
-        onEvent?.({ message: inputValue });
+        void onEvent?.({ message: inputValue });
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(Textarea.Flex, { flexDirection: "row", gap: "16", w: "full", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1377,25 +1425,6 @@ function ProteusCancelAction({
 }
 ProteusCancelAction.displayName = "@optiaxiom/react/ProteusCancelAction";
 
-const [ProteusDocumentPathProvider, useProteusDocumentPathContext] = reactContext.createContext("@optiaxiom/react/ProteusDocumentPath", {
-  path: ""
-});
-
-function getProteusValue(data, path, parentPath) {
-  try {
-    return jsonpointer.get(data, path.startsWith("/") ? path : `${parentPath}/${path}`);
-  } catch (error) {
-    return null;
-  }
-}
-
-function resolveProteusValue(value, data, parentPath) {
-  if (typeof value === "object" && value !== null && "$type" in value && value.$type === "Value" && "path" in value && typeof value.path === "string") {
-    return getProteusValue(data, value.path, parentPath);
-  }
-  return value;
-}
-
 function useResolvedProteusValue(value) {
   const { data } = useProteusDocumentContext(
     "@optiaxiom/react/useResolvedProteusValue"
@@ -1428,17 +1457,17 @@ const ProteusDataTable = ({
 ProteusDataTable.displayName = "@optiaxiom/react/ProteusDataTable";
 
 function ProteusField({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Field, { ...props, children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Field, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
 }
 ProteusField.displayName = "@optiaxiom/react/ProteusField";
 
 function ProteusGroup({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Group, { ...props, children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Group, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
 }
 ProteusGroup.displayName = "@optiaxiom/react/ProteusGroup";
 
 function ProteusHeading({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Heading, { ...props, children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Heading, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
 }
 ProteusHeading.displayName = "@optiaxiom/react/ProteusHeading";
 
@@ -1502,14 +1531,16 @@ const IconDownload = Textarea.withIcon(
   ] })
 );
 
-var actions = Textarea.recipeRuntime({base:[{justifyContent:'center'},'_19uskvg']});
-var root$1 = Textarea.recipeRuntime({base:[{},'_45wbw5','_1pmy0o7']});
+var actions = Textarea.recipeRuntime({base:[{justifyContent:'center'},'_1wsw34']});
+var root$1 = Textarea.recipeRuntime({base:[{},'q8119f','_13bkpk3']});
 
 function ProteusImage(props) {
   const resolvedSrc = useResolvedProteusValue(props.src);
   const resolvedAlt = useResolvedProteusValue(props.alt);
   const [isCopied, setIsCopied] = React.useState(false);
+  const [isDownloading, setIsDownloading] = React.useState(false);
   const [isLoaded, setIsLoaded] = React.useState(false);
+  const imgRef = React.useRef(null);
   const timerRef = React.useRef();
   return /* @__PURE__ */ jsxRuntime.jsxs(Textarea.ActionsRoot, { ...root$1(), children: [
     !isLoaded && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1537,22 +1568,42 @@ function ProteusImage(props) {
           {
             alt: String(resolvedAlt),
             onLoad: () => setIsLoaded(true),
+            ref: imgRef,
             src: String(resolvedSrc)
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Textarea.ActionsContent, { ...actions(), children: /* @__PURE__ */ jsxRuntime.jsxs(Textarea.Group, { bg: "bg.default", gap: "4", p: "4", rounded: "md", children: [
+    isLoaded && /* @__PURE__ */ jsxRuntime.jsx(Textarea.ActionsContent, { ...actions(), children: /* @__PURE__ */ jsxRuntime.jsxs(Textarea.Group, { bg: "bg.default", gap: "4", p: "4", rounded: "md", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Textarea.Button,
         {
           appearance: "subtle",
           "aria-label": "Copy",
           icon: isCopied ? /* @__PURE__ */ jsxRuntime.jsx(Textarea.IconCheck, { pointerEvents: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(IconCopy, { pointerEvents: "none" }),
-          onClick: async (event) => {
-            event.preventDefault();
+          onClick: async () => {
+            if (!imgRef.current) {
+              return;
+            }
             setIsCopied(true);
-            await navigator.clipboard.writeText(String(resolvedSrc));
+            const canvas = document.createElement("canvas");
+            canvas.width = imgRef.current.naturalWidth;
+            canvas.height = imgRef.current.naturalHeight;
+            canvas.getContext("2d")?.drawImage(imgRef.current, 0, 0);
+            const blob = await new Promise((resolve) => {
+              try {
+                canvas.toBlob(resolve, "image/png");
+              } catch {
+                resolve(null);
+              }
+            });
+            if (blob) {
+              await navigator.clipboard.write([
+                new ClipboardItem({ "image/png": blob })
+              ]);
+            } else {
+              await navigator.clipboard.writeText(String(resolvedSrc));
+            }
             clearTimeout(timerRef.current);
             timerRef.current = window.setTimeout(() => {
               setIsCopied(false);
@@ -1584,6 +1635,19 @@ function ProteusImage(props) {
           "aria-label": "Download",
           asChild: true,
           icon: /* @__PURE__ */ jsxRuntime.jsx(IconDownload, {}),
+          loading: isDownloading,
+          onClick: async (event) => {
+            event.preventDefault();
+            if (isDownloading) {
+              return;
+            }
+            setIsDownloading(true);
+            try {
+              await downloadFile(String(resolvedSrc));
+            } finally {
+              setIsDownloading(false);
+            }
+          },
           size: "sm",
           children: /* @__PURE__ */ jsxRuntime.jsx("a", { download: true, href: String(resolvedSrc) })
         }
@@ -1614,7 +1678,7 @@ function ProteusInput(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Textarea.Input,
     {
-      ...props,
+      ...useResolvedProteusProps(props),
       onValueChange: (value2) => {
         if (props.name) {
           onDataChange?.(`${parentPath}/${props.name}`, value2);
@@ -1628,7 +1692,7 @@ function ProteusInput(props) {
 ProteusInput.displayName = "@optiaxiom/react/ProteusInput";
 
 function ProteusLink({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Link, { ...props, children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Link, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
 }
 ProteusLink.displayName = "@optiaxiom/react/ProteusLink";
 
@@ -1654,14 +1718,14 @@ function ProteusMap({
 }
 ProteusMap.displayName = "@optiaxiom/react/ProteusMap";
 
-var control = Textarea.recipeRuntime({base:[{bg:'transparent'},'el7bxb']});
-var fillValue = 'var(--_1qc471k)';
-var mark = Textarea.recipeRuntime({base:[{transition:'colors'},'_10rgr7k'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
-var markValue = 'var(--z9eeuk)';
-var range = Textarea.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_3cl5s2']});
-var root = Textarea.recipeRuntime({base:['_1r2ghli',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'oxudw3'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
-var thumb = Textarea.recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'_14kmms9']});
-var track = Textarea.recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'_12gfw32']});
+var control = Textarea.recipeRuntime({base:[{bg:'transparent'},'fz6n2w']});
+var fillValue = 'var(--_12z6wm4)';
+var mark = Textarea.recipeRuntime({base:[{transition:'colors'},'_10o1p46'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
+var markValue = 'var(--_1pqqvjg)';
+var range = Textarea.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_7xxccd']});
+var root = Textarea.recipeRuntime({base:['ecl29h',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'_5u99fv'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
+var thumb = Textarea.recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'x54swu']});
+var track = Textarea.recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'_1lruaih']});
 
 const useTooltipState = () => {
   const [tooltipOpen, setTooltipOpen] = React.useState(false);
@@ -1822,7 +1886,7 @@ const Range = React.forwardRef(
 Range.displayName = "@optiaxiom/react/Range";
 
 function ProteusRange(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Range, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Range, { ...useResolvedProteusProps(props) });
 }
 ProteusRange.displayName = "@optiaxiom/react/ProteusRange";
 
@@ -1844,7 +1908,7 @@ function ProteusSelect({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Textarea.Select,
     {
-      ...props,
+      ...useResolvedProteusProps(props),
       onValueChange: (value2) => {
         if (readOnly) {
           return;
@@ -1862,7 +1926,7 @@ function ProteusSelect({
 ProteusSelect.displayName = "@optiaxiom/react/ProteusSelect";
 
 function ProteusSelectContent(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.SelectContent, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.SelectContent, { ...useResolvedProteusProps(props) });
 }
 ProteusSelectContent.displayName = "@optiaxiom/react/ProteusSelectContent";
 
@@ -1871,12 +1935,12 @@ function ProteusSelectTrigger({
   ...props
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.SelectTrigger, { ...props, children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.SelectTrigger, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
 }
 ProteusSelectTrigger.displayName = "@optiaxiom/react/ProteusSelectTrigger";
 
 function ProteusSeparator(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Separator, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Separator, { ...useResolvedProteusProps(props) });
 }
 ProteusSeparator.displayName = "@optiaxiom/react/ProteusSeparator";
 
@@ -1947,7 +2011,7 @@ function evaluateCondition(condition, data, parentPath) {
 ProteusShow.displayName = "@optiaxiom/react/ProteusShow";
 
 function ProteusText({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Text, { ...props, children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Text, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: children }) });
 }
 ProteusText.displayName = "@optiaxiom/react/ProteusText";
 
@@ -1962,7 +2026,7 @@ function ProteusTextarea(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Textarea.Textarea,
     {
-      ...props,
+      ...useResolvedProteusProps(props),
       onValueChange: (value2) => {
         if (props.name) {
           onDataChange?.(`${parentPath}/${props.name}`, value2);
@@ -1975,6 +2039,40 @@ function ProteusTextarea(props) {
 }
 ProteusTextarea.displayName = "@optiaxiom/react/ProteusTextarea";
 
+const options = {
+  date: {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  },
+  time: {
+    hour: "numeric",
+    minute: "numeric"
+  }};
+function formatDate(date, { showDate = true, showTime = false }) {
+  return date.toLocaleString(["default", "en-US"], {
+    ...showDate ? options.date : {},
+    ...showTime ? options.time : {}
+  });
+}
+
+const Time = React.forwardRef(
+  ({ date, showDate = true, showTime, ...props }, ref) => {
+    const { boxProps, restProps } = Textarea.extractBoxProps(props);
+    if (typeof date === "string") {
+      date = new Date(date);
+    }
+    const value = formatDate(date, { showDate, showTime });
+    return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Box, { asChild: true, ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: date.toISOString(), ref, ...restProps, children: value }) });
+  }
+);
+Time.displayName = "@optiaxiom/react/Time";
+
+function ProteusTime(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Time, { ...props });
+}
+ProteusTime.displayName = "@optiaxiom/react/ProteusTime";
+
 function ProteusValue({ path }) {
   return useProteusValue(path);
 }
@@ -1997,6 +2095,9 @@ var definitions = {
 			},
 			{
 				"const": "start"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `align-items` CSS property"
@@ -2017,6 +2118,9 @@ var definitions = {
 			},
 			{
 				"const": "start"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `align-self` CSS property"
@@ -2031,6 +2135,9 @@ var definitions = {
 			},
 			{
 				"const": "spin"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Animate element with CSS animations"
@@ -2039,6 +2146,9 @@ var definitions = {
 		anyOf: [
 			{
 				"const": "gradient.opal"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `background-image` CSS property"
@@ -2164,6 +2274,9 @@ var definitions = {
 			},
 			{
 				"const": "current"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "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`."
@@ -2178,6 +2291,9 @@ var definitions = {
 			},
 			{
 				"const": "1"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `border-width` CSS property"
@@ -2192,6 +2308,9 @@ var definitions = {
 			},
 			{
 				"const": "1"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `border-bottom-width` CSS property"
@@ -2239,6 +2358,9 @@ var definitions = {
 			},
 			{
 				"const": "current"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "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`."
@@ -2253,6 +2375,9 @@ var definitions = {
 			},
 			{
 				"const": "1"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `border-left-width` CSS property"
@@ -2267,6 +2392,9 @@ var definitions = {
 			},
 			{
 				"const": "1"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `border-right-width` CSS property"
@@ -2281,6 +2409,9 @@ var definitions = {
 			},
 			{
 				"const": "1"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `border-top-width` CSS property"
@@ -2394,6 +2525,9 @@ var definitions = {
 			},
 			{
 				"const": "current"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "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`."
@@ -2408,6 +2542,9 @@ var definitions = {
 			},
 			{
 				"const": "text"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `cursor` CSS property"
@@ -2443,6 +2580,9 @@ var definitions = {
 			},
 			{
 				"const": "inline-flex"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `display` CSS property"
@@ -2460,6 +2600,9 @@ var definitions = {
 			},
 			{
 				"const": "1"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `flex` CSS property"
@@ -2477,6 +2620,9 @@ var definitions = {
 			},
 			{
 				"const": "row-reverse"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `flex-direction` CSS property"
@@ -2488,6 +2634,9 @@ var definitions = {
 			},
 			{
 				"const": "wrap"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `flex-wrap` CSS property"
@@ -2499,6 +2648,9 @@ var definitions = {
 			},
 			{
 				"const": "sans"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's font family. Only accepts predefined fontFamily tokens."
@@ -2531,6 +2683,9 @@ var definitions = {
 			},
 			{
 				"const": "4xl"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's font size and line height (both properties are set together). Only accepts predefined fontSize tokens."
@@ -2551,6 +2706,9 @@ var definitions = {
 			},
 			{
 				"const": "700"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `font-weight` CSS property"
@@ -2601,6 +2759,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `gap` CSS property"
@@ -2618,6 +2779,9 @@ var definitions = {
 			},
 			{
 				"const": "3"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's size across grid columns"
@@ -2635,6 +2799,9 @@ var definitions = {
 			},
 			{
 				"const": "3"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Control number of columns in a grid layout"
@@ -2733,6 +2900,9 @@ var definitions = {
 			},
 			{
 				"const": "min"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's height. Only accepts predefined size tokens."
@@ -2768,6 +2938,9 @@ var definitions = {
 			},
 			{
 				"const": "start"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `justify-content` CSS property"
@@ -2788,6 +2961,9 @@ var definitions = {
 			},
 			{
 				"const": "start"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `justify-items` CSS property"
@@ -2841,6 +3017,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's margin on all sides. Only accepts predefined spacing tokens."
@@ -2861,6 +3040,9 @@ var definitions = {
 			},
 			{
 				"const": "full"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's maximum height. Only accepts predefined maxSize tokens."
@@ -2881,6 +3063,9 @@ var definitions = {
 			},
 			{
 				"const": "full"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's maximum width. Only accepts predefined maxSize tokens."
@@ -2934,6 +3119,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's bottom margin. Only accepts predefined spacing tokens."
@@ -2987,6 +3175,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's left margin. Only accepts predefined spacing tokens."
@@ -3040,6 +3231,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's right margin. Only accepts predefined spacing tokens."
@@ -3093,6 +3287,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's top margin. Only accepts predefined spacing tokens."
@@ -3146,6 +3343,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's left and right margin. Only accepts predefined spacing tokens."
@@ -3199,6 +3399,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's top and bottom margin. Only accepts predefined spacing tokens."
@@ -3216,6 +3419,9 @@ var definitions = {
 			},
 			{
 				"const": "cover"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `object-fit` CSS property"
@@ -3230,6 +3436,9 @@ var definitions = {
 			},
 			{
 				"const": "visible"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `overflow` CSS property"
@@ -3244,6 +3453,9 @@ var definitions = {
 			},
 			{
 				"const": "visible"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `overflow-x` CSS property"
@@ -3258,6 +3470,9 @@ var definitions = {
 			},
 			{
 				"const": "visible"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `overflow-y` CSS property"
@@ -3308,6 +3523,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's padding on all sides. Only accepts predefined spacing tokens."
@@ -3358,6 +3576,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's bottom padding. Only accepts predefined spacing tokens."
@@ -3408,6 +3629,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's left padding. Only accepts predefined spacing tokens."
@@ -3416,6 +3640,9 @@ var definitions = {
 		anyOf: [
 			{
 				"const": "center"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `place-items` CSS property"
@@ -3427,6 +3654,9 @@ var definitions = {
 			},
 			{
 				"const": "auto"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `pointer-events` CSS property"
@@ -3477,6 +3707,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's right padding. Only accepts predefined spacing tokens."
@@ -3527,6 +3760,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's top padding. Only accepts predefined spacing tokens."
@@ -3577,6 +3813,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's left and right padding. Only accepts predefined spacing tokens."
@@ -3627,6 +3866,9 @@ var definitions = {
 			},
 			{
 				"const": "64"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's top and bottom padding. Only accepts predefined spacing tokens."
@@ -3656,6 +3898,9 @@ var definitions = {
 			},
 			{
 				"const": "full"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's border radius. Only accepts predefined borderRadius tokens."
@@ -3676,6 +3921,9 @@ var definitions = {
 			},
 			{
 				"const": "xl"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's box shadow. Only accepts predefined boxShadow tokens."
@@ -3774,6 +4022,9 @@ var definitions = {
 			},
 			{
 				"const": "min"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's width and height. Only accepts predefined size tokens.\n\nWhen width and height are the same, use `size` instead of setting both\n`w` and `h` separately (e.g., prefer `size=\"24\"` over `w=\"24\" h=\"24\"`)."
@@ -3791,6 +4042,9 @@ var definitions = {
 			},
 			{
 				"const": "justify"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `text-align` CSS property"
@@ -3805,6 +4059,9 @@ var definitions = {
 			},
 			{
 				"const": "uppercase"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `text-transform` CSS property"
@@ -3825,6 +4082,9 @@ var definitions = {
 			},
 			{
 				"const": "colors"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Control which CSS properties should transition"
@@ -3923,6 +4183,9 @@ var definitions = {
 			},
 			{
 				"const": "min"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's width. Only accepts predefined size tokens."
@@ -3931,6 +4194,9 @@ var definitions = {
 		anyOf: [
 			{
 				"const": "nowrap"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's `white-space` CSS property"
@@ -3960,6 +4226,9 @@ var definitions = {
 			},
 			{
 				"const": "30"
+			},
+			{
+				$ref: "#/definitions/ProteusValue"
 			}
 		],
 		description: "Set the element's stacking order. Only accepts predefined zIndex tokens (e.g., popover, toast, tooltip) or numeric values (0, 10, 20, 30, auto)."
@@ -4495,6 +4764,9 @@ var definitions = {
 			{
 				$ref: "#/definitions/ProteusTextarea"
 			},
+			{
+				$ref: "#/definitions/ProteusTime"
+			},
 			{
 				$ref: "#/definitions/ProteusValue"
 			}
@@ -4528,12 +4800,31 @@ var definitions = {
 					"message"
 				],
 				type: "object"
-			}
-		],
-		description: "Handler for user interactions - either a server-side tool call or client-side message"
-	},
-	ProteusNode: {
-		anyOf: [
+			},
+			{
+				description: "Client-side component action - for downloading a URL",
+				properties: {
+					action: {
+						"const": "download",
+						description: "The action type",
+						type: "string"
+					},
+					url: {
+						description: "URL to download",
+						type: "string"
+					}
+				},
+				required: [
+					"action",
+					"url"
+				],
+				type: "object"
+			}
+		],
+		description: "Handler for user interactions - a server-side tool call, client-side message, or client-side component action"
+	},
+	ProteusNode: {
+		anyOf: [
 			{
 				items: {
 					anyOf: [
@@ -4620,6 +4911,9 @@ var definitions = {
 					},
 					{
 						"const": "primary-opal"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
 					}
 				],
 				description: "Control the appearance by selecting between the different button types."
@@ -4902,6 +5196,9 @@ var definitions = {
 					},
 					{
 						"const": "primary"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
 					}
 				],
 				description: "Control the appearance by selecting between the different badge types."
@@ -5525,8 +5822,15 @@ var definitions = {
 				$ref: "#/definitions/SprinkleProp_py"
 			},
 			required: {
-				description: "Display an asterisk for required inputs.",
-				type: "boolean"
+				anyOf: [
+					{
+						type: "boolean"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "Display an asterisk for required inputs."
 			},
 			rounded: {
 				$ref: "#/definitions/SprinkleProp_rounded"
@@ -5591,6 +5895,9 @@ var definitions = {
 					},
 					{
 						"const": "start"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
 					}
 				],
 				description: "Set the element's `align-items` CSS property. Defaults to `center` when\n`flexDirection='row'`, and `stretch` when `flexDirection='column'`."
@@ -5653,6 +5960,9 @@ var definitions = {
 					},
 					{
 						"const": "row-reverse"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
 					}
 				],
 				description: "Set the element's `flex-direction` CSS property.\n\nDefault: 'row' (CSS standard)"
@@ -5892,6 +6202,9 @@ var definitions = {
 					},
 					{
 						"const": "3"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
 					}
 				],
 				description: "Heading level (1-4) that controls both the semantic HTML tag and font size.\n- `level=\"1\"`: renders `<h1>` with `fontSize=\"4xl\"` (default)\n- `level=\"2\"`: renders `<h2>` with `fontSize=\"3xl\"`\n- `level=\"3\"`: renders `<h3>` with `fontSize=\"2xl\"`\n- `level=\"4\"`: renders `<h4>` with `fontSize=\"xl\"`\n\nUse `asChild` to decouple the semantic level from visual appearance."
@@ -6242,6 +6555,9 @@ var definitions = {
 					},
 					{
 						"const": "default"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
 					}
 				],
 				description: "Control the appearance of the input."
@@ -6343,8 +6659,15 @@ var definitions = {
 				$ref: "#/definitions/SprinkleProp_my"
 			},
 			name: {
-				description: "The name of the form control element.",
-				type: "string"
+				anyOf: [
+					{
+						type: "string"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The name of the form control element."
 			},
 			objectFit: {
 				$ref: "#/definitions/SprinkleProp_objectFit"
@@ -6368,8 +6691,15 @@ var definitions = {
 				$ref: "#/definitions/SprinkleProp_pl"
 			},
 			placeholder: {
-				description: "The placeholder text to use when control has no value.",
-				type: "string"
+				anyOf: [
+					{
+						type: "string"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The placeholder text to use when control has no value."
 			},
 			placeItems: {
 				$ref: "#/definitions/SprinkleProp_placeItems"
@@ -6474,6 +6804,9 @@ var definitions = {
 					},
 					{
 						type: "string"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
 					}
 				],
 				description: "The input type."
@@ -6581,8 +6914,15 @@ var definitions = {
 				$ref: "#/definitions/SprinkleProp_h"
 			},
 			href: {
-				description: "The link href.",
-				type: "string"
+				anyOf: [
+					{
+						type: "string"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The link href."
 			},
 			justifyContent: {
 				$ref: "#/definitions/SprinkleProp_justifyContent"
@@ -6842,8 +7182,15 @@ var definitions = {
 				type: "array"
 			},
 			max: {
-				description: "The maximum value for the range.",
-				type: "number"
+				anyOf: [
+					{
+						type: "number"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The maximum value for the range."
 			},
 			maxH: {
 				$ref: "#/definitions/SprinkleProp_maxH"
@@ -6855,8 +7202,15 @@ var definitions = {
 				$ref: "#/definitions/SprinkleProp_mb"
 			},
 			min: {
-				description: "The minimum value for the range.",
-				type: "number"
+				anyOf: [
+					{
+						type: "number"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The minimum value for the range."
 			},
 			ml: {
 				$ref: "#/definitions/SprinkleProp_ml"
@@ -6919,8 +7273,15 @@ var definitions = {
 				$ref: "#/definitions/SprinkleProp_shadow"
 			},
 			step: {
-				description: "The stepping interval for the range.",
-				type: "number"
+				anyOf: [
+					{
+						type: "number"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The stepping interval for the range."
 			},
 			textAlign: {
 				$ref: "#/definitions/SprinkleProp_textAlign"
@@ -6980,8 +7341,15 @@ var definitions = {
 				$ref: "#/definitions/ProteusNode"
 			},
 			name: {
-				description: "The name of the inner select element.",
-				type: "string"
+				anyOf: [
+					{
+						type: "string"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The name of the inner select element."
 			},
 			options: {
 				description: "The select items/options we want to render.",
@@ -7703,6 +8071,9 @@ var definitions = {
 					},
 					{
 						"const": "3"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
 					}
 				],
 				description: "Truncate the text at specific number of lines."
@@ -7792,8 +8163,15 @@ var definitions = {
 				$ref: "#/definitions/SprinkleProp_transition"
 			},
 			truncate: {
-				description: "Whether to truncate the text and add an ellipsis at the end.",
-				type: "boolean"
+				anyOf: [
+					{
+						type: "boolean"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "Whether to truncate the text and add an ellipsis at the end."
 			},
 			w: {
 				$ref: "#/definitions/SprinkleProp_w"
@@ -7922,6 +8300,9 @@ var definitions = {
 					},
 					{
 						"const": 5
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
 					}
 				],
 				description: "Limits the height of the textarea when `resize=auto` is used."
@@ -7948,8 +8329,15 @@ var definitions = {
 				$ref: "#/definitions/SprinkleProp_my"
 			},
 			name: {
-				description: "The name of the form control element.",
-				type: "string"
+				anyOf: [
+					{
+						type: "string"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The name of the form control element."
 			},
 			objectFit: {
 				$ref: "#/definitions/SprinkleProp_objectFit"
@@ -7973,8 +8361,15 @@ var definitions = {
 				$ref: "#/definitions/SprinkleProp_pl"
 			},
 			placeholder: {
-				description: "The placeholder text to use when control has no value.",
-				type: "string"
+				anyOf: [
+					{
+						type: "string"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The placeholder text to use when control has no value."
 			},
 			placeItems: {
 				$ref: "#/definitions/SprinkleProp_placeItems"
@@ -8004,6 +8399,9 @@ var definitions = {
 					},
 					{
 						"const": "vertical"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
 					}
 				],
 				description: "Control whether resizing mode is manual, automatic, or disabled."
@@ -8012,8 +8410,15 @@ var definitions = {
 				$ref: "#/definitions/SprinkleProp_rounded"
 			},
 			rows: {
-				description: "The number of rows to display.",
-				type: "number"
+				anyOf: [
+					{
+						type: "number"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The number of rows to display."
 			},
 			shadow: {
 				$ref: "#/definitions/SprinkleProp_shadow"
@@ -8042,6 +8447,228 @@ var definitions = {
 		],
 		type: "object"
 	},
+	ProteusTime: {
+		examples: [
+			{
+				$type: "Time",
+				date: "2025-01-22T14:30:00Z"
+			}
+		],
+		properties: {
+			$type: {
+				"const": "Time"
+			},
+			alignItems: {
+				$ref: "#/definitions/SprinkleProp_alignItems"
+			},
+			alignSelf: {
+				$ref: "#/definitions/SprinkleProp_alignSelf"
+			},
+			animation: {
+				$ref: "#/definitions/SprinkleProp_animation"
+			},
+			backgroundImage: {
+				$ref: "#/definitions/SprinkleProp_backgroundImage"
+			},
+			bg: {
+				$ref: "#/definitions/SprinkleProp_bg"
+			},
+			border: {
+				$ref: "#/definitions/SprinkleProp_border"
+			},
+			borderB: {
+				$ref: "#/definitions/SprinkleProp_borderB"
+			},
+			borderColor: {
+				$ref: "#/definitions/SprinkleProp_borderColor"
+			},
+			borderL: {
+				$ref: "#/definitions/SprinkleProp_borderL"
+			},
+			borderR: {
+				$ref: "#/definitions/SprinkleProp_borderR"
+			},
+			borderT: {
+				$ref: "#/definitions/SprinkleProp_borderT"
+			},
+			color: {
+				$ref: "#/definitions/SprinkleProp_color"
+			},
+			cursor: {
+				$ref: "#/definitions/SprinkleProp_cursor"
+			},
+			date: {
+				anyOf: [
+					{
+						type: "string"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "The date to display. Can be a `Date` object or an ISO 8601 string."
+			},
+			display: {
+				$ref: "#/definitions/SprinkleProp_display"
+			},
+			flex: {
+				$ref: "#/definitions/SprinkleProp_flex"
+			},
+			flexDirection: {
+				$ref: "#/definitions/SprinkleProp_flexDirection"
+			},
+			flexWrap: {
+				$ref: "#/definitions/SprinkleProp_flexWrap"
+			},
+			fontFamily: {
+				$ref: "#/definitions/SprinkleProp_fontFamily"
+			},
+			fontSize: {
+				$ref: "#/definitions/SprinkleProp_fontSize"
+			},
+			fontWeight: {
+				$ref: "#/definitions/SprinkleProp_fontWeight"
+			},
+			gap: {
+				$ref: "#/definitions/SprinkleProp_gap"
+			},
+			gridColumn: {
+				$ref: "#/definitions/SprinkleProp_gridColumn"
+			},
+			gridTemplateColumns: {
+				$ref: "#/definitions/SprinkleProp_gridTemplateColumns"
+			},
+			h: {
+				$ref: "#/definitions/SprinkleProp_h"
+			},
+			justifyContent: {
+				$ref: "#/definitions/SprinkleProp_justifyContent"
+			},
+			justifyItems: {
+				$ref: "#/definitions/SprinkleProp_justifyItems"
+			},
+			m: {
+				$ref: "#/definitions/SprinkleProp_m"
+			},
+			maxH: {
+				$ref: "#/definitions/SprinkleProp_maxH"
+			},
+			maxW: {
+				$ref: "#/definitions/SprinkleProp_maxW"
+			},
+			mb: {
+				$ref: "#/definitions/SprinkleProp_mb"
+			},
+			ml: {
+				$ref: "#/definitions/SprinkleProp_ml"
+			},
+			mr: {
+				$ref: "#/definitions/SprinkleProp_mr"
+			},
+			mt: {
+				$ref: "#/definitions/SprinkleProp_mt"
+			},
+			mx: {
+				$ref: "#/definitions/SprinkleProp_mx"
+			},
+			my: {
+				$ref: "#/definitions/SprinkleProp_my"
+			},
+			objectFit: {
+				$ref: "#/definitions/SprinkleProp_objectFit"
+			},
+			overflow: {
+				$ref: "#/definitions/SprinkleProp_overflow"
+			},
+			overflowX: {
+				$ref: "#/definitions/SprinkleProp_overflowX"
+			},
+			overflowY: {
+				$ref: "#/definitions/SprinkleProp_overflowY"
+			},
+			p: {
+				$ref: "#/definitions/SprinkleProp_p"
+			},
+			pb: {
+				$ref: "#/definitions/SprinkleProp_pb"
+			},
+			pl: {
+				$ref: "#/definitions/SprinkleProp_pl"
+			},
+			placeItems: {
+				$ref: "#/definitions/SprinkleProp_placeItems"
+			},
+			pointerEvents: {
+				$ref: "#/definitions/SprinkleProp_pointerEvents"
+			},
+			pr: {
+				$ref: "#/definitions/SprinkleProp_pr"
+			},
+			pt: {
+				$ref: "#/definitions/SprinkleProp_pt"
+			},
+			px: {
+				$ref: "#/definitions/SprinkleProp_px"
+			},
+			py: {
+				$ref: "#/definitions/SprinkleProp_py"
+			},
+			rounded: {
+				$ref: "#/definitions/SprinkleProp_rounded"
+			},
+			shadow: {
+				$ref: "#/definitions/SprinkleProp_shadow"
+			},
+			showDate: {
+				anyOf: [
+					{
+						type: "boolean"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "Whether to show the date part of the value. Defaults to `true`."
+			},
+			showTime: {
+				anyOf: [
+					{
+						type: "boolean"
+					},
+					{
+						$ref: "#/definitions/ProteusValue"
+					}
+				],
+				description: "Whether to show the time part of the value. Defaults to `false`."
+			},
+			size: {
+				$ref: "#/definitions/SprinkleProp_size"
+			},
+			textAlign: {
+				$ref: "#/definitions/SprinkleProp_textAlign"
+			},
+			textTransform: {
+				$ref: "#/definitions/SprinkleProp_textTransform"
+			},
+			transition: {
+				$ref: "#/definitions/SprinkleProp_transition"
+			},
+			w: {
+				$ref: "#/definitions/SprinkleProp_w"
+			},
+			whiteSpace: {
+				$ref: "#/definitions/SprinkleProp_whiteSpace"
+			},
+			z: {
+				$ref: "#/definitions/SprinkleProp_z"
+			}
+		},
+		required: [
+			"$type",
+			"date"
+		],
+		type: "object"
+	},
 	ProteusValue: {
 		examples: [
 			{
@@ -8114,7 +8741,7 @@ function safeParseElement({
 
 const ProteusChart = React.lazy(async () => {
   return {
-    default: (await Promise.resolve().then(function () { return require('./ProteusChart-DfXqgqFg.js'); })).ProteusChart
+    default: (await Promise.resolve().then(function () { return require('./ProteusChart-C6B7OJTf.js'); })).ProteusChart
   };
 });
 const ProteusElement = ({
@@ -8193,6 +8820,8 @@ const ProteusElement = ({
       return /* @__PURE__ */ jsxRuntime.jsx(ProteusText, { ...omitType(element) });
     case "Textarea":
       return /* @__PURE__ */ jsxRuntime.jsx(ProteusTextarea, { ...omitType(element) });
+    case "Time":
+      return /* @__PURE__ */ jsxRuntime.jsx(ProteusTime, { ...omitType(element) });
     case "Value":
       return /* @__PURE__ */ jsxRuntime.jsx(
         ProteusValue,
@@ -8240,15 +8869,15 @@ function ProteusDocumentRenderer({
         jsonpointer.set(next, path, value);
         onDataChange?.(next);
       }),
-      onEvent: Textarea.useEffectEvent(
-        (event) => {
-          if ("tool" in event) {
-            onToolCall?.(event.tool);
-          } else if ("message" in event) {
-            onMessage?.(event.message);
-          }
+      onEvent: Textarea.useEffectEvent(async (event) => {
+        if ("tool" in event) {
+          await onToolCall?.(event.tool);
+        } else if ("message" in event) {
+          await onMessage?.(event.message);
+        } else if (event.action === "download") {
+          await downloadFile(event.url);
         }
-      ),
+      }),
       readOnly,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Textarea.Disclosure,
@@ -8272,13 +8901,14 @@ function ProteusDocumentRenderer({
                     {
                       asChild: true,
                       bg: result.data.appIcon ? void 0 : "bg.accent.subtle",
+                      flex: "none",
                       rounded: "xs",
                       size: "20",
                       children: result.data.appIcon ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: result.data.appIcon }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(Textarea.Text, { fontWeight: "500", children: result.data.appName }),
-                  !open && /* @__PURE__ */ jsxRuntime.jsx(Textarea.Text, { color: "fg.secondary", children: /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: result.data.title }) })
+                  !open && /* @__PURE__ */ jsxRuntime.jsx(Textarea.Text, { color: "fg.secondary", lineClamp: "1", children: /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: result.data.title }) })
                 ] })
               }
             ),
@@ -8293,7 +8923,7 @@ function ProteusDocumentRenderer({
                 pt: result.data.appName ? "16" : "0",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(Textarea.Group, { flexDirection: "column", gap: "4", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Textarea.Heading, { fontSize: "lg", fontWeight: "600", level: "2", children: /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: result.data.title }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Textarea.Heading, { fontSize: "lg", fontWeight: "600", level: "2", lineClamp: "2", children: /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: result.data.title }) }),
                     !!result.data.subtitle && /* @__PURE__ */ jsxRuntime.jsx(Textarea.Text, { color: "fg.secondary", fontSize: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: result.data.subtitle }) })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(ProteusElement, { element: result.data.body }),
@@ -8371,7 +9001,7 @@ const SortableGroup = React.forwardRef(
 );
 SortableGroup.displayName = "@optiaxiom/react/SortableGroup";
 
-var handle = Textarea.recipeRuntime({base:'_1deot1z'});
+var handle = Textarea.recipeRuntime({base:'fdjyi9'});
 
 const [SortableItemProvider, useSortableItemContext] = reactContext.createContext("@optiaxiom/react/SortableItem");
 
@@ -8396,7 +9026,7 @@ const SortableHandle = React.forwardRef(
 );
 SortableHandle.displayName = "@optiaxiom/react/SortableHandle";
 
-var item = Textarea.recipeRuntime({base:'_1p85ru7',variants:{handle:{false:{},true:'_1jn9tks'}}});
+var item = Textarea.recipeRuntime({base:'_1fcowg2',variants:{handle:{false:{},true:'_1wkrdk0'}}});
 
 const SortableItem = React.forwardRef(
   ({ children, className, index, item: id, ...props }, outerRef) => {
@@ -8493,6 +9123,7 @@ exports.SortableItem = SortableItem;
 exports.Spotlight = Spotlight;
 exports.SpotlightContent = SpotlightContent;
 exports.SpotlightTrigger = SpotlightTrigger;
+exports.Time = Time;
 exports.useDialogKit = useDialogKit;
 exports.useFileUploadTrigger = useFileUploadTrigger;
 exports.useResolvedProteusValue = useResolvedProteusValue;