@optiaxiom/react 1.9.13 → 1.9.15

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { theme } from '@optiaxiom/globals';
-import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, Tooltip, Bar, LabelList } from 'recharts';
+import { ResponsiveContainer, BarChart, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, Line } from 'recharts';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -9,13 +9,16 @@ import { chart } from './ProteusChart-css.js';
 import { ProteusChartTooltipContent } from './ProteusChartTooltipContent.js';
 
 const DEFAULT_COLORS = ["#096DD9", "#E59700", "#38C56C", "#D1D8DE"];
-const getColor = (series, index) => series.color ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length];
+const getColor = (index) => DEFAULT_COLORS[index % DEFAULT_COLORS.length];
 const ProteusChart = ({
   data,
   series,
+  type,
   xAxisKey
 }) => {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ...chart(), children: /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, width: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data, margin: { top: 20 }, children: [
+  const ChartComponent = type === "bar" ? BarChart : LineChart;
+  const Chart = type === "bar" ? Bar : Line;
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...chart(), children: /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, width: "100%", children: /* @__PURE__ */ jsxs(ChartComponent, { data, children: [
     /* @__PURE__ */ jsx(
       CartesianGrid,
       {
@@ -29,28 +32,37 @@ const ProteusChart = ({
       {
         axisLine: false,
         dataKey: xAxisKey,
+        minTickGap: 32,
+        padding: { left: 16, right: 16 },
         tick: { fill: theme.colors["fg.secondary"] },
         tickLine: false,
-        tickMargin: 10
+        tickMargin: 8
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        axisLine: { stroke: "#CBD5E1" },
+        minTickGap: 32,
+        tick: { fill: theme.colors["fg.secondary"] },
+        tickFormatter: (value) => new Intl.NumberFormat(void 0, {
+          compactDisplay: "short",
+          notation: "compact"
+        }).format(value),
+        tickMargin: 8,
+        width: "auto"
       }
     ),
     /* @__PURE__ */ jsx(Tooltip, { content: ProteusChartTooltipContent, cursor: false }),
     series.map((s, i) => /* @__PURE__ */ jsx(
-      Bar,
+      Chart,
       {
         dataKey: s.dataKey,
-        fill: getColor(s, i),
+        dot: false,
+        fill: getColor(i),
         name: s.name ?? s.dataKey,
-        radius: [4, 4, 0, 0],
-        children: s.labelKey && /* @__PURE__ */ jsx(
-          LabelList,
-          {
-            dataKey: s.labelKey,
-            fill: theme.colors["fg.secondary"],
-            offset: 12,
-            position: "top"
-          }
-        )
+        radius: type === "bar" ? 4 : void 0,
+        type: "natural"
       },
       s.dataKey
     ))

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKObgrxp.css';
-import './../../../../assets/src/proteus-document/ProteusChartTooltipContent.css.ts.vanilla-Pn5jjCuE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B_eNKbRT.css';
+import './../../../../assets/src/proteus-document/ProteusChartTooltipContent.css.ts.vanilla-BvoKlvkh.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var tooltip = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',px:'8',py:'10',rounded:'lg',shadow:'lg'},'_1xmbct6']});
-var value = recipeRuntime({base:[{color:'fg.default',fontWeight:'500'},'_17xvnb0']});
+var tooltip = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',px:'8',py:'10',rounded:'lg',shadow:'lg'},'_1d33xjp']});
+var value = recipeRuntime({base:[{color:'fg.default',fontWeight:'500'},'y2jw4a']});
 
 export { tooltip, value };

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

@@ -1,125 +1,28 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { set } from 'jsonpointer';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Disclosure } from '../disclosure/Disclosure.js';
-import { DisclosureContent } from '../disclosure/DisclosureContent.js';
-import { DisclosureTrigger } from '../disclosure/DisclosureTrigger.js';
-import { Group } from '../group/Group.js';
-import { Heading } from '../heading/Heading.js';
-import { useEffectEvent } from '../hooks/useEffectEvent.js';
-import 'react';
-import '../field/FieldContext.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import { Text } from '../text/Text.js';
-import { downloadFile } from './downloadFile.js';
-import { ProteusDocumentProvider } from './ProteusDocumentContext.js';
+import { jsx } from 'react/jsx-runtime';
+import { ProteusDocumentShell } from './ProteusDocumentShell.js';
 import { ProteusElement } from './ProteusElement.js';
 import { safeParseDocument } from './schemas.js';
 
 function ProteusDocumentRenderer({
-  collapsible: collapsibleProp,
-  data = {},
-  defaultOpen = true,
   element: elementProp,
-  onDataChange,
-  onMessage,
-  onOpenChange,
-  onToolCall,
-  open: openProp,
-  readOnly = false
+  ...props
 }) {
-  const [open, setOpen] = useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
   const result = safeParseDocument(elementProp);
-  if (!result.success) ;
-  const collapsible = collapsibleProp && result.success && result.data.appName;
-  const Trigger = collapsible ? DisclosureTrigger : Box;
+  if (!result.success) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
-    ProteusDocumentProvider,
+    ProteusDocumentShell,
     {
-      data,
-      onDataChange: useEffectEvent((path, value) => {
-        const next = structuredClone(data);
-        set(next, path, value);
-        onDataChange?.(next);
-      }),
-      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") {
-          if (typeof event.url === "string") {
-            await downloadFile(event.url);
-          } else {
-            throw new Error("Invalid URL for download action");
-          }
-        }
-      }),
-      readOnly,
-      children: /* @__PURE__ */ jsx(
-        Disclosure,
-        {
-          bg: "bg.default",
-          border: "1",
-          borderColor: "border.tertiary",
-          onOpenChange: setOpen,
-          open,
-          p: "16",
-          rounded: "xl",
-          children: result.success && /* @__PURE__ */ jsxs(Fragment, { children: [
-            result.data.appName && /* @__PURE__ */ jsx(
-              Trigger,
-              {
-                py: "0",
-                ...collapsible ? { chevronPosition: "end" } : {},
-                children: /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "8", children: [
-                  /* @__PURE__ */ jsx(
-                    Box,
-                    {
-                      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", lineClamp: "1", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title }) })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              DisclosureContent,
-              {
-                alignItems: "stretch",
-                display: "flex",
-                flexDirection: "column",
-                gap: "16",
-                pb: "0",
-                pt: result.data.appName ? "16" : "0",
-                children: [
-                  /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "4", children: [
-                    /* @__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 }),
-                  !!result.data.actions && !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.actions }) })
-                ]
-              }
-            )
-          ] })
-        }
-      )
+      element: {
+        ...result.data,
+        actions: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.actions }),
+        body: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.body }),
+        subtitle: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.subtitle }),
+        title: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title })
+      },
+      ...props
     }
   );
 }

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

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { set } from 'jsonpointer';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { Disclosure } from '../disclosure/Disclosure.js';
+import { DisclosureContent } from '../disclosure/DisclosureContent.js';
+import { DisclosureTrigger } from '../disclosure/DisclosureTrigger.js';
+import { Group } from '../group/Group.js';
+import { Heading } from '../heading/Heading.js';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import 'react';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import '../utils/isHoverSupported.js';
+import { Text } from '../text/Text.js';
+import { downloadFile } from './downloadFile.js';
+import { ProteusDocumentProvider } from './ProteusDocumentContext.js';
+
+function ProteusDocumentShell({
+  collapsible: collapsibleProp,
+  data = {},
+  defaultOpen = true,
+  element,
+  onDataChange,
+  onMessage,
+  onOpenChange,
+  onToolCall,
+  open: openProp,
+  readOnly = false
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const collapsible = collapsibleProp && element.appName;
+  const Trigger = collapsible ? DisclosureTrigger : Box;
+  return /* @__PURE__ */ jsx(
+    ProteusDocumentProvider,
+    {
+      data,
+      onDataChange: useEffectEvent((path, value) => {
+        const next = structuredClone(data);
+        set(next, path, value);
+        onDataChange?.(next);
+      }),
+      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") {
+          if (typeof event.url === "string") {
+            await downloadFile(event.url);
+          } else {
+            throw new Error("Invalid URL for download action");
+          }
+        }
+      }),
+      readOnly,
+      children: /* @__PURE__ */ jsxs(
+        Disclosure,
+        {
+          bg: "bg.default",
+          border: "1",
+          borderColor: "border.tertiary",
+          onOpenChange: setOpen,
+          open,
+          p: "16",
+          rounded: "xl",
+          children: [
+            element.appName && /* @__PURE__ */ jsx(Trigger, { py: "0", ...collapsible ? { chevronPosition: "end" } : {}, children: /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "8", children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  asChild: true,
+                  bg: element.appIcon ? void 0 : "bg.accent.subtle",
+                  flex: "none",
+                  rounded: "xs",
+                  size: "20",
+                  children: element.appIcon ? /* @__PURE__ */ jsx("img", { src: element.appIcon }) : /* @__PURE__ */ jsx("div", {})
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { fontWeight: "500", children: element.appName }),
+              !open && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", lineClamp: "1", children: element.title })
+            ] }) }),
+            /* @__PURE__ */ jsxs(
+              DisclosureContent,
+              {
+                alignItems: "stretch",
+                display: "flex",
+                flexDirection: "column",
+                gap: "16",
+                pb: "0",
+                pt: element.appName ? "16" : "0",
+                children: [
+                  /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "4", children: [
+                    /* @__PURE__ */ jsx(Heading, { fontSize: "lg", fontWeight: "600", level: "2", lineClamp: "2", children: element.title }),
+                    !!element.subtitle && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", fontSize: "sm", children: element.subtitle })
+                  ] }),
+                  element.body,
+                  !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: element.actions })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+ProteusDocumentShell.displayName = "@optiaxiom/react/ProteusDocumentShell";
+
+export { ProteusDocumentShell };

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

@@ -1,28 +1,30 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { lazy, Suspense } from 'react';
+import { Badge } from '../badge/Badge.js';
+import { Field } from '../field/Field.js';
+import '../field/FieldLabel.js';
+import { Group } from '../group/Group.js';
+import { Heading } from '../heading/Heading.js';
+import { Link } from '../link/Link.js';
+import { Range } from '../range/Range.js';
+import '../select/Select.js';
+import { SelectContent } from '../select/SelectContent.js';
+import { SelectTrigger } from '../select/SelectTrigger.js';
+import { Separator } from '../separator/Separator.js';
+import { Text } from '../text/Text.js';
+import { Time } from '../time/Time.js';
 import { ProteusAction } from './ProteusAction.js';
-import { ProteusBadge } from './ProteusBadge.js';
 import { ProteusCancelAction } from './ProteusCancelAction.js';
 import { ProteusDataTable } from './ProteusDataTable.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
-import { ProteusField } from './ProteusField.js';
-import { ProteusGroup } from './ProteusGroup.js';
-import { ProteusHeading } from './ProteusHeading.js';
 import { ProteusImage } from './ProteusImage.js';
 import { ProteusInput } from './ProteusInput.js';
-import { ProteusLink } from './ProteusLink.js';
 import { ProteusMap } from './ProteusMap.js';
-import { ProteusRange } from './ProteusRange.js';
 import { ProteusSelect } from './ProteusSelect.js';
-import { ProteusSelectContent } from './ProteusSelectContent.js';
-import { ProteusSelectTrigger } from './ProteusSelectTrigger.js';
-import { ProteusSeparator } from './ProteusSeparator.js';
 import { ProteusShow } from './ProteusShow.js';
-import { ProteusText } from './ProteusText.js';
 import { ProteusTextarea } from './ProteusTextarea.js';
-import { ProteusTime } from './ProteusTime.js';
 import { ProteusValue } from './ProteusValue.js';
 import { resolveProteusValue } from './resolveProteusValue.js';
 import { safeParseElement } from './schemas.js';
@@ -52,8 +54,10 @@ const ProteusElement = ({
   }
   const element = result.data;
   const resolve = (obj) => {
-    const { $type: _$type, ...rest } = obj;
-    const resolved = {};
+    const { $type: _$type, children, ...rest } = obj;
+    const resolved = {
+      children: children ? /* @__PURE__ */ jsx(ProteusElement, { element: children }) : children
+    };
     for (const [key, value] of Object.entries(rest)) {
       resolved[key] = resolveProteusValue(value, data, parentPath);
     }
@@ -63,7 +67,7 @@ const ProteusElement = ({
     case "Action":
       return /* @__PURE__ */ jsx(ProteusAction, { ...resolve(element) });
     case "Badge":
-      return /* @__PURE__ */ jsx(ProteusBadge, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(Badge, { ...resolve(element) });
     case "CancelAction":
       return /* @__PURE__ */ jsx(ProteusCancelAction, { ...resolve(element) });
     case "Chart":
@@ -81,17 +85,17 @@ const ProteusElement = ({
         }
       );
     case "Field":
-      return /* @__PURE__ */ jsx(ProteusField, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(Field, { ...resolve(element) });
     case "Group":
-      return /* @__PURE__ */ jsx(ProteusGroup, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(Group, { ...resolve(element) });
     case "Heading":
-      return /* @__PURE__ */ jsx(ProteusHeading, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(Heading, { ...resolve(element) });
     case "Image":
       return /* @__PURE__ */ jsx(ProteusImage, { ...resolve(element) });
     case "Input":
       return /* @__PURE__ */ jsx(ProteusInput, { ...resolve(element) });
     case "Link":
-      return /* @__PURE__ */ jsx(ProteusLink, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(Link, { ...resolve(element) });
     case "Map":
       return /* @__PURE__ */ jsx(
         ProteusMap,
@@ -100,15 +104,15 @@ const ProteusElement = ({
         }
       );
     case "Range":
-      return /* @__PURE__ */ jsx(ProteusRange, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(Range, { ...resolve(element) });
     case "Select":
       return /* @__PURE__ */ jsx(ProteusSelect, { ...resolve(element) });
     case "SelectContent":
-      return /* @__PURE__ */ jsx(ProteusSelectContent, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(SelectContent, { ...resolve(element) });
     case "SelectTrigger":
-      return /* @__PURE__ */ jsx(ProteusSelectTrigger, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(SelectTrigger, { ...resolve(element) });
     case "Separator":
-      return /* @__PURE__ */ jsx(ProteusSeparator, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(Separator, { ...resolve(element) });
     case "Show":
       return /* @__PURE__ */ jsx(
         ProteusShow,
@@ -117,16 +121,21 @@ const ProteusElement = ({
         }
       );
     case "Text":
-      return /* @__PURE__ */ jsx(ProteusText, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(Text, { ...resolve(element) });
     case "Textarea":
       return /* @__PURE__ */ jsx(ProteusTextarea, { ...resolve(element) });
     case "Time":
-      return /* @__PURE__ */ jsx(ProteusTime, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(
+        Time,
+        {
+          ...resolve(element)
+        }
+      );
     case "Value":
       return /* @__PURE__ */ jsx(
         ProteusValue,
         {
-          ...resolve(element)
+          ...element
         }
       );
     default:

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

@@ -1,8 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
-import { ActionsContent } from '../actions/ActionsContent.js';
-import { ActionsRoot } from '../actions/ActionsRoot.js';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -16,22 +14,15 @@ import { DialogFooter } from '../dialog/DialogFooter.js';
 import '../dialog/DialogForm.js';
 import { DialogHeader } from '../dialog/DialogHeader.js';
 import { DialogTrigger } from '../dialog/DialogTrigger.js';
-import { Group } from '../group/Group.js';
-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';
 
 function ProteusImage(props) {
-  const [isCopied, setIsCopied] = useState(false);
+  const [open, setOpen] = 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: [
+  return /* @__PURE__ */ jsxs(Box, { children: [
     !isLoaded && /* @__PURE__ */ jsx(
       Box,
       {
@@ -45,103 +36,65 @@ function ProteusImage(props) {
         children: /* @__PURE__ */ jsx(Spinner, {})
       }
     ),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        display: isLoaded ? "block" : "none",
-        objectFit: "cover",
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            alt: props.alt,
-            onLoad: () => setIsLoaded(true),
-            ref: imgRef,
-            src: props.src
-          }
-        )
-      }
-    ),
-    isLoaded && /* @__PURE__ */ jsx(ActionsContent, { ...actions(), children: /* @__PURE__ */ jsxs(Group, { bg: "bg.default", gap: "4", p: "4", rounded: "md", children: [
-      /* @__PURE__ */ jsx(
-        Button,
+    /* @__PURE__ */ jsxs(Dialog, { onOpenChange: setOpen, open, children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { "aria-label": "Expand", asChild: true, children: /* @__PURE__ */ jsx(
+        "a",
         {
-          appearance: "subtle",
-          "aria-label": "Copy",
-          icon: isCopied ? /* @__PURE__ */ jsx(IconCheck, { pointerEvents: "none" }) : /* @__PURE__ */ jsx(IconCopy, { pointerEvents: "none" }),
-          onClick: async () => {
-            if (!imgRef.current) {
-              return;
-            }
-            setIsCopied(true);
-            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(props.src));
-            }
-            clearTimeout(timerRef.current);
-            timerRef.current = window.setTimeout(() => {
-              setIsCopied(false);
-            }, 2e3);
-          },
-          size: "sm"
-        }
-      ),
-      /* @__PURE__ */ jsxs(Dialog, { children: [
-        /* @__PURE__ */ jsx(
-          DialogTrigger,
-          {
-            appearance: "subtle",
-            "aria-label": "Expand",
-            icon: /* @__PURE__ */ jsx(IconArrowsDiagonal, {}),
-            size: "sm"
-          }
-        ),
-        /* @__PURE__ */ jsxs(DialogContent, { size: "lg", children: [
-          /* @__PURE__ */ jsx(DialogHeader, { children: props.alt }),
-          /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx(Box, { asChild: true, display: "block", objectFit: "cover", ...props, children: /* @__PURE__ */ jsx("img", { alt: props.alt, src: props.src }) }) }),
-          /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(DialogClose, { children: "Close" }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          appearance: "subtle",
-          "aria-label": "Download",
-          asChild: true,
-          icon: /* @__PURE__ */ jsx(IconDownload, {}),
-          loading: isDownloading,
-          onClick: async (event) => {
+          href: props.src,
+          onClick: (event) => {
             event.preventDefault();
-            if (isDownloading) {
-              return;
-            }
-            setIsDownloading(true);
-            try {
-              await downloadFile(String(props.src));
-            } finally {
-              setIsDownloading(false);
-            }
+            setOpen(true);
           },
-          size: "sm",
-          children: /* @__PURE__ */ jsx("a", { download: true, href: props.src })
+          type: "",
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              asChild: true,
+              display: isLoaded ? "block" : "none",
+              objectFit: "cover",
+              ...props,
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  alt: props.alt,
+                  onLoad: () => setIsLoaded(true),
+                  ref: imgRef,
+                  src: props.src
+                }
+              )
+            }
+          )
         }
-      )
-    ] }) })
+      ) }),
+      /* @__PURE__ */ jsxs(DialogContent, { size: "lg", children: [
+        /* @__PURE__ */ jsx(DialogHeader, { lineClamp: "2", children: props.alt }),
+        /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx(Box, { asChild: true, display: "block", objectFit: "cover", ...props, children: /* @__PURE__ */ jsx("img", { alt: props.alt, src: props.src }) }) }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(DialogClose, { children: "Close" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              asChild: true,
+              loading: isDownloading,
+              onClick: async (event) => {
+                event.preventDefault();
+                if (isDownloading) {
+                  return;
+                }
+                setIsDownloading(true);
+                try {
+                  await downloadFile(String(props.src));
+                } finally {
+                  setIsDownloading(false);
+                }
+              },
+              children: /* @__PURE__ */ jsx("a", { download: true, href: props.src, children: "Download" })
+            }
+          )
+        ] })
+      ] })
+    ] })
   ] });
 }
 ProteusImage.displayName = "@optiaxiom/react/ProteusImage";