@optiaxiom/react 1.9.9 → 1.9.11

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

@@ -16,6 +16,7 @@ import '../field/FieldContext.js';
 import '../utils/conditions.js';
 import '../utils/isHoverSupported.js';
 import { Text } from '../text/Text.js';
+import { downloadFile } from './downloadFile.js';
 import { ProteusDocumentProvider } from './ProteusDocumentContext.js';
 import { ProteusElement } from './ProteusElement.js';
 import { safeParseDocument } from './schemas.js';
@@ -50,15 +51,15 @@ function ProteusDocumentRenderer({
         set(next, path, value);
         onDataChange?.(next);
       }),
-      onEvent: useEffectEvent(
-        (event) => {
-          if ("tool" in event) {
-            onToolCall?.(event.tool);
-          } else if ("message" in event) {
-            onMessage?.(event.message);
-          }
+      onEvent: 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__ */ jsx(
         Disclosure,
@@ -82,13 +83,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__ */ jsx("img", { src: result.data.appIcon }) : /* @__PURE__ */ jsx("div", {})
                     }
                   ),
                   /* @__PURE__ */ jsx(Text, { fontWeight: "500", children: result.data.appName }),
-                  !open && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title }) })
+                  !open && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", lineClamp: "1", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title }) })
                 ] })
               }
             ),
@@ -103,7 +105,7 @@ function ProteusDocumentRenderer({
                 pt: result.data.appName ? "16" : "0",
                 children: [
                   /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "4", children: [
-                    /* @__PURE__ */ jsx(Heading, { fontSize: "lg", fontWeight: "600", level: "2", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title }) }),
+                    /* @__PURE__ */ jsx(Heading, { fontSize: "lg", fontWeight: "600", level: "2", lineClamp: "2", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title }) }),
                     !!result.data.subtitle && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", fontSize: "sm", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.subtitle }) })
                   ] }),
                   /* @__PURE__ */ jsx(ProteusElement, { element: result.data.body }),

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

@@ -20,6 +20,7 @@ import { ProteusSeparator } from './ProteusSeparator.js';
 import { ProteusShow } from './ProteusShow.js';
 import { ProteusText } from './ProteusText.js';
 import { ProteusTextarea } from './ProteusTextarea.js';
+import { ProteusTime } from './ProteusTime.js';
 import { ProteusValue } from './ProteusValue.js';
 import { safeParseElement } from './schemas.js';
 
@@ -104,6 +105,8 @@ const ProteusElement = ({
       return /* @__PURE__ */ jsx(ProteusText, { ...omitType(element) });
     case "Textarea":
       return /* @__PURE__ */ jsx(ProteusTextarea, { ...omitType(element) });
+    case "Time":
+      return /* @__PURE__ */ jsx(ProteusTime, { ...omitType(element) });
     case "Value":
       return /* @__PURE__ */ jsx(
         ProteusValue,

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

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { Field } from '../field/Field.js';
 import '../field/FieldLabel.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusField({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Field, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(Field, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusField.displayName = "@optiaxiom/react/ProteusField";
 

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

@@ -2,9 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { Group } from '../group/Group.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusGroup({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Group, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(Group, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusGroup.displayName = "@optiaxiom/react/ProteusGroup";
 

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

@@ -2,9 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { Heading } from '../heading/Heading.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusHeading({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Heading, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(Heading, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusHeading.displayName = "@optiaxiom/react/ProteusHeading";
 

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D7MnXLBq.css';
-import './../../../../assets/src/proteus-document/ProteusImage.css.ts.vanilla-C-b-2Wng.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Boo8Am80.css';
+import './../../../../assets/src/proteus-document/ProteusImage.css.ts.vanilla-Ckr9JAKL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{justifyContent:'center'},'qnmlgx']});
-var root = recipeRuntime({base:[{},'_16dgzdx','akvy6d']});
+var actions = recipeRuntime({base:[{justifyContent:'center'},'_1wsw34']});
+var root = recipeRuntime({base:[{},'q8119f','_13bkpk3']});
 
 export { actions, root };

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

@@ -21,6 +21,8 @@ import { IconArrowsDiagonal } from '../icons/IconArrowsDiagonal.js';
 import { IconCheck } from '../icons/IconCheck.js';
 import { IconCopy } from '../icons/IconCopy.js';
 import { IconDownload } from '../icons/IconDownload.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { downloadFile } from './downloadFile.js';
 import { root, actions } from './ProteusImage-css.js';
 import { useResolvedProteusValue } from './useResolvedProteusValue.js';
 
@@ -28,20 +30,72 @@ function ProteusImage(props) {
   const resolvedSrc = useResolvedProteusValue(props.src);
   const resolvedAlt = useResolvedProteusValue(props.alt);
   const [isCopied, setIsCopied] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const imgRef = useRef(null);
   const timerRef = useRef();
   return /* @__PURE__ */ jsxs(ActionsRoot, { ...root(), children: [
-    /* @__PURE__ */ jsx(Box, { asChild: true, display: "block", objectFit: "cover", ...props, children: /* @__PURE__ */ jsx("img", { alt: String(resolvedAlt), src: String(resolvedSrc) }) }),
-    /* @__PURE__ */ jsx(ActionsContent, { ...actions(), children: /* @__PURE__ */ jsxs(Group, { bg: "bg.default", gap: "4", p: "4", rounded: "md", children: [
+    !isLoaded && /* @__PURE__ */ jsx(
+      Box,
+      {
+        alignItems: "center",
+        bg: "bg.tertiary",
+        display: "flex",
+        justifyContent: "center",
+        p: "24",
+        rounded: "md",
+        style: { aspectRatio: "16 / 9" },
+        children: /* @__PURE__ */ jsx(Spinner, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        display: isLoaded ? "block" : "none",
+        objectFit: "cover",
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: String(resolvedAlt),
+            onLoad: () => setIsLoaded(true),
+            ref: imgRef,
+            src: String(resolvedSrc)
+          }
+        )
+      }
+    ),
+    isLoaded && /* @__PURE__ */ jsx(ActionsContent, { ...actions(), children: /* @__PURE__ */ jsxs(Group, { bg: "bg.default", gap: "4", p: "4", rounded: "md", children: [
       /* @__PURE__ */ jsx(
         Button,
         {
           appearance: "subtle",
           "aria-label": "Copy",
           icon: isCopied ? /* @__PURE__ */ jsx(IconCheck, { pointerEvents: "none" }) : /* @__PURE__ */ 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);
@@ -73,6 +127,19 @@ function ProteusImage(props) {
           "aria-label": "Download",
           asChild: true,
           icon: /* @__PURE__ */ 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__ */ jsx("a", { download: true, href: String(resolvedSrc) })
         }

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

@@ -7,6 +7,7 @@ import '../input/InputRoot.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
 import { useProteusValue } from './useProteusValue.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusInput(props) {
   const { onDataChange, readOnly } = useProteusDocumentContext(
@@ -19,7 +20,7 @@ function ProteusInput(props) {
   return /* @__PURE__ */ jsx(
     Input,
     {
-      ...props,
+      ...useResolvedProteusProps(props),
       onValueChange: (value2) => {
         if (props.name) {
           onDataChange?.(`${parentPath}/${props.name}`, value2);

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

@@ -2,9 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { Link } from '../link/Link.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusLink({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Link, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(Link, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusLink.displayName = "@optiaxiom/react/ProteusLink";
 

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Range } from '../range/Range.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusRange(props) {
-  return /* @__PURE__ */ jsx(Range, { ...props });
+  return /* @__PURE__ */ jsx(Range, { ...useResolvedProteusProps(props) });
 }
 ProteusRange.displayName = "@optiaxiom/react/ProteusRange";
 

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

@@ -8,6 +8,7 @@ import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
 import { ProteusElement } from './ProteusElement.js';
 import { useProteusValue } from './useProteusValue.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusSelect({
   children,
@@ -27,7 +28,7 @@ function ProteusSelect({
   return /* @__PURE__ */ jsx(
     Select,
     {
-      ...props,
+      ...useResolvedProteusProps(props),
       onValueChange: (value2) => {
         if (readOnly) {
           return;

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

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

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

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

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Separator } from '../separator/Separator.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusSeparator(props) {
-  return /* @__PURE__ */ jsx(Separator, { ...props });
+  return /* @__PURE__ */ jsx(Separator, { ...useResolvedProteusProps(props) });
 }
 ProteusSeparator.displayName = "@optiaxiom/react/ProteusSeparator";
 

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

@@ -2,9 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { Text } from '../text/Text.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusText({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Text, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(Text, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusText.displayName = "@optiaxiom/react/ProteusText";
 

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

@@ -4,6 +4,7 @@ import { Textarea } from '../textarea/Textarea.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
 import { useProteusValue } from './useProteusValue.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusTextarea(props) {
   const { onDataChange, readOnly } = useProteusDocumentContext(
@@ -16,7 +17,7 @@ function ProteusTextarea(props) {
   return /* @__PURE__ */ jsx(
     Textarea,
     {
-      ...props,
+      ...useResolvedProteusProps(props),
       onValueChange: (value2) => {
         if (props.name) {
           onDataChange?.(`${parentPath}/${props.name}`, value2);

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Time } from '../time/Time.js';
+
+function ProteusTime(props) {
+  return /* @__PURE__ */ jsx(Time, { ...props });
+}
+ProteusTime.displayName = "@optiaxiom/react/ProteusTime";
+
+export { ProteusTime };

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

@@ -0,0 +1,12 @@
+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);
+}
+
+export { downloadFile };