@optiaxiom/proteus 0.1.23 → 0.1.24

package/dist/esm/assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-DxHEfy0L.css

@@ -0,0 +1,17 @@
+@layer optiaxiom.tmkl1w;
+@layer optiaxiom.tmkl1w {
+  .ProteusDocumentShell__vpuvfj1 {
+    margin: -4px;
+  }
+  .ProteusDocumentShell__vpuvfj2 {
+    align-self: center;
+    bottom: 8px;
+    margin-top: -56px;
+    opacity: 0;
+    position: sticky;
+    z-index: 10;
+  }
+  .ProteusDocumentShell__vpuvfj0[data-can-scroll] .ProteusDocumentShell__vpuvfj2 {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,7 @@
+import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-DxHEfy0L.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']}}});
+var scrollIndicator = recipe({base:[{bg:'bg.secondary',border:'1',borderColor:'border.secondary',color:'fg.secondary',display:'grid',flex:'none',placeItems:'center',pointerEvents:'none',rounded:'full',shadow:'sm',size:'lg',transition:'opacity'},'ProteusDocumentShell__vpuvfj2']});
+
+export { body, scrollIndicator };

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { IconSouth } from '@optiaxiom/icons';
 import { Disclosure, DisclosureTrigger, Box, Group, Text, DisclosureContent, Heading, Tooltip } from '@optiaxiom/react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { set } from 'jsonpointer';
@@ -7,6 +8,7 @@ import { useState, useRef, useEffect } from 'react';
 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';
 
 function ProteusDocumentShell({
   collapsible: collapsibleProp,
@@ -34,6 +36,26 @@ function ProteusDocumentShell({
     onChange: onOpenChange,
     prop: openProp
   });
+  const bodyRef = useRef(null);
+  useEffect(() => {
+    const node = bodyRef.current;
+    if (!node)
+      return;
+    const update = () => {
+      if (node.scrollHeight - node.scrollTop - node.clientHeight > 1) {
+        node.dataset.canScroll = "";
+      } else {
+        delete node.dataset.canScroll;
+      }
+    };
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    node.addEventListener("scroll", update, { passive: true });
+    return () => {
+      observer.disconnect();
+      node.removeEventListener("scroll", update);
+    };
+  }, []);
   const collapsible = collapsibleProp && element.appName;
   const Trigger = collapsible ? DisclosureTrigger : Box;
   return /* @__PURE__ */ jsx(
@@ -151,7 +173,17 @@ function ProteusDocumentShell({
                       },
                       ref: formRef,
                       children: [
-                        element.body,
+                        /* @__PURE__ */ jsxs(
+                          Group,
+                          {
+                            ref: element.compact ? bodyRef : void 0,
+                            ...body({ truncate: element.compact }),
+                            children: [
+                              element.body,
+                              element.compact && /* @__PURE__ */ jsx(Box, { ...scrollIndicator(), children: /* @__PURE__ */ jsx(IconSouth, {}) })
+                            ]
+                          }
+                        ),
                         element.actions && !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: element.actions })
                       ]
                     }

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

@@ -2673,6 +2673,10 @@ var definitions = {
 				$ref: "#/definitions/ProteusNode",
 				description: "The main content of the document."
 			},
+			compact: {
+				description: "If true, constrains the body to a max height and makes it scrollable when content overflows.",
+				type: "boolean"
+			},
 			subtitle: {
 				$ref: "#/definitions/ProteusNode",
 				description: "A brief description or tagline that provides additional context about the Proteus document's purpose."

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

@@ -2661,6 +2661,10 @@ var definitions = {
 				$ref: "#/definitions/ProteusNode",
 				description: "The main content of the document."
 			},
+			compact: {
+				description: "If true, constrains the body to a max height and makes it scrollable when content overflows.",
+				type: "boolean"
+			},
 			subtitle: {
 				$ref: "#/definitions/ProteusNode",
 				description: "A brief description or tagline that provides additional context about the Proteus document's purpose."

package/dist/index.d.ts

@@ -240,6 +240,7 @@ type ProteusDocument$2 = {
     appName?: string;
     blocking?: boolean;
     body: ReactNode;
+    compact?: boolean;
     subtitle?: ReactNode;
     title?: ReactNode;
     titleIcon?: string;
@@ -299,6 +300,7 @@ type ProteusDocument = {
     appName?: string;
     blocking?: boolean;
     body: unknown;
+    compact?: boolean;
     subtitle?: unknown;
     title?: unknown;
     titleIcon?: string;