@optiaxiom/proteus 0.2.13 → 0.2.15

package/dist/esm/assets/src/proteus-chart/{ProteusChart.css.ts.vanilla-B_WDPh7C.css → ProteusChart.css.ts.vanilla-CfYErTvq.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._2eth5s;
-@layer optiaxiom._2eth5s {
+@layer optiaxiom.yvqquz;
+@layer optiaxiom.yvqquz {
   .ProteusChart__jmlqij1 {
     border-radius: 16px;
   }

package/dist/esm/assets/src/proteus-chart/{ProteusChartTooltipContent.css.ts.vanilla-UZNvVvUU.css → ProteusChartTooltipContent.css.ts.vanilla-CFiMPH60.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._2eth5s;
-@layer optiaxiom._2eth5s {
+@layer optiaxiom.yvqquz;
+@layer optiaxiom.yvqquz {
   .ProteusChartTooltipContent__1gsvq810 {
     min-width: 128px;
     position: absolute;

package/dist/esm/assets/src/proteus-document/{ProteusDocumentShell.css.ts.vanilla-N08uRH65.css → ProteusDocumentShell.css.ts.vanilla-C6b32Qx3.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._2eth5s;
-@layer optiaxiom._2eth5s {
+@layer optiaxiom.yvqquz;
+@layer optiaxiom.yvqquz {
   .ProteusDocumentShell__vpuvfj1 {
     margin: -4px;
   }

package/dist/esm/assets/src/proteus-image-carousel/{ProteusImageCarousel.css.ts.vanilla-DPgPnDmb.css → ProteusImageCarousel.css.ts.vanilla-Dvvb8Qx5.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._2eth5s;
-@layer optiaxiom._2eth5s {
+@layer optiaxiom.yvqquz;
+@layer optiaxiom.yvqquz {
   .ProteusImageCarousel__1t6qej70 {
     outline: none;
     user-select: none;

package/dist/esm/assets/src/proteus-question/{ProteusQuestion.css.ts.vanilla-BAhvFxEB.css → ProteusQuestion.css.ts.vanilla-BTVHkw1E.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._2eth5s;
-@layer optiaxiom._2eth5s {
+@layer optiaxiom.yvqquz;
+@layer optiaxiom.yvqquz {
   .ProteusQuestion__8f590p0 {
     outline: none;
   }

package/dist/esm/proteus-card-link/ProteusCardLink.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { CardLink } from '@optiaxiom/react';
+import { useState } from 'react';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+import { useResolveProteusValues } from '../proteus-document/useResolveProteusValues.js';
+
+function ProteusCardLink({
+  children,
+  onClick,
+  ...props
+}) {
+  const { onEvent } = useProteusDocumentContext(
+    "@optiaxiom/proteus/ProteusCardLink"
+  );
+  const resolvedOnClick = useResolveProteusValues(
+    onClick ?? {}
+  );
+  const [loading, setLoading] = useState(false);
+  return /* @__PURE__ */ jsx(
+    CardLink,
+    {
+      "aria-busy": loading || void 0,
+      onClick: onClick ? async (event) => {
+        event.preventDefault();
+        if (loading) {
+          return;
+        }
+        setLoading(true);
+        await onEvent(resolvedOnClick);
+        setLoading(false);
+      } : void 0,
+      target: "_blank",
+      ...props,
+      children
+    }
+  );
+}
+ProteusCardLink.displayName = "@optiaxiom/proteus/ProteusCardLink";
+
+export { ProteusCardLink };

package/dist/esm/proteus-chart/ProteusChart-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-B_WDPh7C.css';
+import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-CfYErTvq.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var chart = recipe({base:[{border:'1',borderColor:'border.tertiary',fontSize:'sm',p:'16'},'ProteusChart__jmlqij1','ProteusChart__jmlqij0']});

package/dist/esm/proteus-chart/ProteusChartTooltipContent-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-UZNvVvUU.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-CFiMPH60.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var tooltip = recipe({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',pointerEvents:'none',px:'8',py:'10',rounded:'lg',shadow:'lg',transition:'all',z:'popover'},'ProteusChartTooltipContent__1gsvq810']});

package/dist/esm/proteus-document/ProteusDocumentShell-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-N08uRH65.css';
+import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-C6b32Qx3.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var body = recipe({base:[{flexDirection:'column',gap:'16'},'ProteusDocumentShell__vpuvfj0'],variants:{truncate:{false:{},true:[{maxH:'sm',overflow:'auto',p:'4'},'ProteusDocumentShell__vpuvfj1']}}});

package/dist/esm/proteus-document/ProteusDocumentShell.js

@@ -9,6 +9,7 @@ import { useEffectEvent } from '../hooks/useEffectEvent.js';
 import { downloadFile } from '../proteus-image/downloadFile.js';
 import { ProteusDocumentProvider } from './ProteusDocumentContext.js';
 import { scrollIndicator, body } from './ProteusDocumentShell-css.js';
+import { resolveProteusValue } from './resolveProteusValue.js';
 
 function ProteusDocumentShell({
   collapsible: collapsibleProp,
@@ -20,6 +21,7 @@ function ProteusDocumentShell({
   onInteraction,
   onMessage,
   onOpenChange,
+  onPreview,
   onTrack,
   onUpload,
   open: openProp,
@@ -61,6 +63,8 @@ function ProteusDocumentShell({
   }, []);
   const collapsible = collapsibleProp && element.appName;
   const Trigger = collapsible ? DisclosureTrigger : Box;
+  const appearance = resolveProteusValue(element.appearance, data, "", []);
+  const inline = appearance === "inline";
   return /* @__PURE__ */ jsx(
     ProteusDocumentProvider,
     {
@@ -98,6 +102,8 @@ function ProteusDocumentShell({
           if (typeof event.url === "string") {
             window.open(event.url, "_blank", "noopener,noreferrer");
           }
+        } else if (event.action === "preview") {
+          await onPreview?.(event.file);
         }
         return;
       }),
@@ -114,13 +120,13 @@ function ProteusDocumentShell({
       children: /* @__PURE__ */ jsxs(
         Disclosure,
         {
-          bg: "bg.default",
-          border: "1",
-          borderColor: "border.tertiary",
+          bg: inline ? void 0 : "bg.default",
+          border: inline ? void 0 : "1",
+          borderColor: inline ? void 0 : "border.tertiary",
           onOpenChange: setOpen,
           open,
-          p: "20",
-          rounded: "xl",
+          p: inline ? void 0 : "20",
+          rounded: inline ? void 0 : "xl",
           children: [
             element.appName && /* @__PURE__ */ jsx(Trigger, { py: "0", ...collapsible ? { chevronPosition: "end" } : {}, children: /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "8", children: [
               /* @__PURE__ */ jsx(

package/dist/esm/proteus-element/ProteusElement.js

@@ -1,17 +1,19 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { Text, Separator, SelectTrigger, SelectContent, Link, Box, Heading, Group, Field, CardLink, CardHeader, Card, Badge, Avatar } from '@optiaxiom/react';
+import { Text, Separator, SelectTrigger, SelectContent, Link, Box, Heading, Group, Field, CardHeader, Card, Badge, Avatar } from '@optiaxiom/react';
 import { Time, Range } from '@optiaxiom/react/unstable';
 import { lazy, Suspense } from 'react';
 import { IconCalendar } from '../icons/IconCalendar.js';
 import { ProteusAction } from '../proteus-action/ProteusAction.js';
 import { ProteusBridge } from '../proteus-bridge/ProteusBridge.js';
+import { ProteusCardLink } from '../proteus-card-link/ProteusCardLink.js';
 import { ProteusDataTable } from '../proteus-data-table/ProteusDataTable.js';
 import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
 import { resolveProteusProp } from '../proteus-document/resolveProteusProp.js';
 import { safeParseElement } from '../proteus-document/schemas.js';
 import { ProteusFederated } from '../proteus-federated/ProteusFederated.js';
+import { ProteusFileIcon } from '../proteus-file-icon/ProteusFileIcon.js';
 import { ProteusFileUpload } from '../proteus-file-upload/ProteusFileUpload.js';
 import { ProteusImageCarousel } from '../proteus-image-carousel/ProteusImageCarousel.js';
 import { ProteusImage } from '../proteus-image/ProteusImage.js';
@@ -82,7 +84,7 @@ const ProteusElement = ({
     case "CardHeader":
       return /* @__PURE__ */ jsx(CardHeader, { ...resolve(element) });
     case "CardLink":
-      return /* @__PURE__ */ jsx(CardLink, { target: "_blank", ...resolve(element) });
+      return /* @__PURE__ */ jsx(ProteusCardLink, { ...resolve(element) });
     case "Chart":
       return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
         ProteusChart,
@@ -106,6 +108,8 @@ const ProteusElement = ({
       );
     case "Field":
       return /* @__PURE__ */ jsx(Field, { ...resolve(element) });
+    case "FileIcon":
+      return /* @__PURE__ */ jsx(ProteusFileIcon, { ...resolve(element) });
     case "FileUpload":
       return /* @__PURE__ */ jsx(ProteusFileUpload, { ...resolve(element) });
     case "Group":

package/dist/esm/proteus-file-icon/ProteusFileIcon.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { IconFileImage, IconFileVideo, IconMusic, IconPresentationScreen, IconTableLayout, IconFileZipper, IconFileLines, IconCode, IconFile } from '@optiaxiom/icons';
+import { Box } from '@optiaxiom/react';
+
+const mimeIconMap = [
+  [/^image\//, IconFileImage],
+  [/^video\//, IconFileVideo],
+  [/^audio\//, IconMusic],
+  [/presentation|powerpoint|keynote|slides/, IconPresentationScreen],
+  [/spreadsheet|excel|csv|tab-separated-values|tsv|parquet/, IconTableLayout],
+  [/zip|tar|compress|archive|x-7z|x-rar/, IconFileZipper],
+  [/pdf|wordprocessing|opendocument\.text/, IconFileLines],
+  [
+    /json|xml|yaml|javascript|typescript|html|css|x-sh|x-python|code|script/,
+    IconCode
+  ],
+  [/^text\/|word|rtf/, IconFileLines]
+];
+function ProteusFileIcon({ mimeType, ...props }) {
+  const Icon = getIconForMimeType(mimeType);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      bg: "bg.secondary",
+      color: "fg.tertiary",
+      p: "8",
+      rounded: "md",
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }
+  );
+}
+function getIconForMimeType(mimeType) {
+  if (mimeType) {
+    for (const [pattern, Icon] of mimeIconMap) {
+      if (pattern.test(mimeType)) {
+        return Icon;
+      }
+    }
+  }
+  return IconFile;
+}
+ProteusFileIcon.displayName = "@optiaxiom/proteus/ProteusFileIcon";
+
+export { ProteusFileIcon };

package/dist/esm/proteus-file-upload/ProteusFileUpload.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { IconPlus } from '@optiaxiom/icons';
-import { Flex } from '@optiaxiom/react';
+import { toaster, Flex } from '@optiaxiom/react';
 import { FileUpload, VisuallyHidden, FileUploadTrigger, FileUploadList, FileUploadDropzone } from '@optiaxiom/react/unstable';
 import { useRef, useState, useCallback } from 'react';
 import { useObserveValue } from '../hooks/useObserveValue.js';
@@ -40,10 +40,22 @@ function ProteusFileUpload({
   }, [forceValueChange, name, onDataChange, parentPath]);
   const handleFilesDrop = useCallback(
     async (incoming) => {
-      if (multiple) {
-        incoming = maxFiles !== void 0 ? incoming.slice(0, Math.max(0, maxFiles - itemsRef.current.length)) : incoming;
-      } else {
-        incoming = incoming.slice(0, 1);
+      let skipped = 0;
+      if (maxFiles !== void 0) {
+        const existing = multiple ? itemsRef.current.length : 0;
+        const remaining = Math.max(0, maxFiles - existing);
+        if (incoming.length > remaining) {
+          skipped = incoming.length - remaining;
+          incoming = incoming.slice(0, remaining);
+        }
+      }
+      if (skipped > 0) {
+        const accepted = incoming.length;
+        const skippedWord = skipped === 1 ? "was" : "were";
+        toaster.create(
+          accepted > 0 ? `Added ${accepted} file${accepted === 1 ? "" : "s"}. ${skipped} ${skippedWord} skipped because the limit is ${maxFiles}.` : `${skipped} file${skipped === 1 ? "" : "s"} ${skippedWord} skipped because the limit is ${maxFiles}.`,
+          { type: "warning" }
+        );
       }
       if (!onUpload || readOnly || incoming.length === 0) {
         return;

package/dist/esm/proteus-image-carousel/ProteusImageCarousel-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-DPgPnDmb.css';
+import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-Dvvb8Qx5.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var carousel = recipe({base:[{flexDirection:'column',gap:'12'},'ProteusImageCarousel__1t6qej70']});

package/dist/esm/proteus-question/ProteusQuestion-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-BAhvFxEB.css';
+import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-BTVHkw1E.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestion__8f590p3'],variants:{cursor:{pointer:{cursor:'pointer'}}}});

package/dist/esm/schema/public-schema.json.js

@@ -2657,6 +2657,20 @@ var definitions = {
 				$ref: "#/definitions/ProteusNode",
 				description: "Actions available for this document"
 			},
+			appearance: {
+				anyOf: [
+					{
+						"const": "default"
+					},
+					{
+						"const": "inline"
+					},
+					{
+						$ref: "#/definitions/ProteusExpression"
+					}
+				],
+				description: "Visual treatment of the document shell. 'default' renders the document as a card with background, border, and padding. 'inline' strips the surrounding chrome so the document blends into its host container."
+			},
 			appIcon: {
 				description: "URL or data URI for the application icon (e.g., 'https://example.com/icon.png' or 'data:image/svg+xml,...'). Rendered as an <img> element.",
 				type: "string"
@@ -2746,6 +2760,9 @@ var definitions = {
 			{
 				$ref: "#/definitions/ProteusField"
 			},
+			{
+				$ref: "#/definitions/ProteusFileIcon"
+			},
 			{
 				$ref: "#/definitions/ProteusFileUpload"
 			},
@@ -2914,6 +2931,36 @@ var definitions = {
 					"url"
 				],
 				type: "object"
+			},
+			{
+				additionalProperties: false,
+				description: "Client-side component action - for previewing a file inline",
+				properties: {
+					action: {
+						"const": "preview",
+						description: "The action type",
+						type: "string"
+					},
+					file: {
+						anyOf: [
+							{
+								$ref: "#/definitions/ProteusExpression"
+							},
+							{
+								type: "object"
+							},
+							{
+								type: "string"
+							}
+						],
+						description: "The file object to preview"
+					}
+				},
+				required: [
+					"action",
+					"file"
+				],
+				type: "object"
 			}
 		],
 		description: "Handler for user interactions - a server-side interaction call, client-side message, or client-side component action"
@@ -4668,6 +4715,10 @@ var definitions = {
 			objectFit: {
 				$ref: "#/definitions/SprinkleProp_objectFit"
 			},
+			onClick: {
+				$ref: "#/definitions/ProteusEventHandler",
+				description: "Action triggered when link is clicked"
+			},
 			overflow: {
 				$ref: "#/definitions/SprinkleProp_overflow"
 			},
@@ -5226,6 +5277,209 @@ var definitions = {
 		],
 		type: "object"
 	},
+	ProteusFileIcon: {
+		additionalProperties: false,
+		examples: [
+			{
+				$type: "FileIcon",
+				mimeType: "application/pdf"
+			}
+		],
+		properties: {
+			$type: {
+				"const": "FileIcon"
+			},
+			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"
+			},
+			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"
+			},
+			gridAutoRows: {
+				$ref: "#/definitions/SprinkleProp_gridAutoRows"
+			},
+			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"
+			},
+			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"
+			},
+			mimeType: {
+				anyOf: [
+					{
+						type: "string"
+					},
+					{
+						$ref: "#/definitions/ProteusExpression"
+					}
+				],
+				description: "MIME type of the file to determine which icon to display"
+			}
+		},
+		required: [
+			"$type"
+		],
+		type: "object"
+	},
 	ProteusFileUpload: {
 		additionalProperties: false,
 		examples: [