@optiaxiom/proteus 0.1.16-next.0 → 0.1.17

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

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

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

@@ -1,5 +1,5 @@
-@layer optiaxiom.ndq0nz;
-@layer optiaxiom.ndq0nz {
+@layer optiaxiom._1g6ippr;
+@layer optiaxiom._1g6ippr {
   .ProteusChartTooltipContent__1gsvq810 {
     min-width: 128px;
   }

package/dist/esm/assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-DV3O-VwO.css

@@ -0,0 +1,72 @@
+@layer optiaxiom._1g6ippr;
+@layer optiaxiom._1g6ippr {
+  .ProteusImageCarousel__1t6qej70 {
+    outline: none;
+    user-select: none;
+  }
+  .ProteusImageCarousel__1t6qej71 {
+    aspect-ratio: 16 / 9;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto 1fr auto;
+    position: relative;
+  }
+  .ProteusImageCarousel__1t6qej72 {
+    grid-area: 1 / 1 / -1 / -1;
+  }
+  .ProteusImageCarousel__1t6qej73 {
+    backface-visibility: hidden;
+    display: flex;
+    touch-action: pan-y pinch-zoom;
+  }
+  .ProteusImageCarousel__1t6qej74 {
+    flex: 0 0 100%;
+    height: 100%;
+    min-width: 0;
+  }
+  .ProteusImageCarousel__1t6qej75 {
+    align-self: center;
+    grid-row: 2;
+    opacity: 0.7;
+    z-index: 1;
+  }
+  .ProteusImageCarousel__1t6qej75::before {
+    content: "";
+    inset-block: 0;
+    padding-left: 32px;
+    padding-right: 16px;
+    position: absolute;
+    width: 32px;
+  }
+  .ProteusImageCarousel__1t6qej75:hover {
+    opacity: 1;
+  }
+  .ProteusImageCarousel__1t6qej76 {
+    grid-column: 1;
+  }
+  .ProteusImageCarousel__1t6qej77 {
+    grid-column: 3;
+  }
+  .ProteusImageCarousel__1t6qej78 {
+    position: relative;
+  }
+  .ProteusImageCarousel__1t6qej78::after {
+    content: "";
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 2px var(--ax-colors-border-focus);
+    inset: 0;
+    opacity: 0;
+    outline: 2px solid var(--ax-colors-bg-default);
+    outline-offset: -4px;
+    position: absolute;
+    transition: opacity var(--ax-duration-sm);
+  }
+  .ProteusImageCarousel__1t6qej79 {
+    opacity: 0.7;
+  }
+  .ProteusImageCarousel__1t6qej7a {
+    opacity: 1;
+  }
+  .ProteusImageCarousel__1t6qej7a::after {
+    opacity: 1;
+  }
+}

package/dist/esm/assets/src/proteus-question/{ProteusQuestion.css.ts.vanilla-nFTJBsO_.css → ProteusQuestion.css.ts.vanilla-0cQoAJ0-.css}

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

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export { ProteusDocumentRenderer } from './proteus-document/ProteusDocumentRende
 export { ProteusDocumentShell } from './proteus-document/ProteusDocumentShell.js';
 export { safeParseDocument } from './proteus-document/schemas.js';
 export { ProteusImage } from './proteus-image/ProteusImage.js';
+export { ProteusImageCarousel } from './proteus-image-carousel/ProteusImageCarousel.js';
 export { ProteusInput } from './proteus-input/ProteusInput.js';
 export { ProteusMap } from './proteus-map/ProteusMap.js';
 export { ProteusSelect } from './proteus-select/ProteusSelect.js';

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

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-Ct8ajpEs.css';
+import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-CK0mlfvQ.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-CV4s3EJV.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-VEKfizml.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',px:'8',py:'10',rounded:'lg',shadow:'lg'},'ProteusChartTooltipContent__1gsvq810']});

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

@@ -2,6 +2,7 @@
 import { createContext } from '@radix-ui/react-context';
 
 const [ProteusDocumentPathProvider, useProteusDocumentPathContext] = createContext("@optiaxiom/proteus/ProteusDocumentPath", {
+  mapIndices: [],
   path: ""
 });
 

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

@@ -77,7 +77,7 @@ function ProteusDocumentShell({
           borderColor: "border.tertiary",
           onOpenChange: setOpen,
           open,
-          p: "16",
+          p: "20",
           rounded: "xl",
           children: [
             element.appName && /* @__PURE__ */ jsx(Trigger, { py: "0", ...collapsible ? { chevronPosition: "end" } : {}, children: /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "8", children: [

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

@@ -4,10 +4,13 @@ import { ProteusElement } from '../proteus-element/ProteusElement.js';
 import { getProteusValue } from './getProteusValue.js';
 import { evaluateCondition } from './resolveProteusValue.js';
 
-function resolveProteusProp(value, data, parentPath) {
+function resolveProteusProp(value, data, parentPath, mapIndices = []) {
   if (typeof value !== "object" || value === null) {
     return value;
   }
+  if ("$type" in value && value.$type === "MapIndex") {
+    return mapIndices.at(-1);
+  }
   if ("$type" in value && value.$type === "Value" && "path" in value && typeof value.path === "string") {
     return getProteusValue(
       data,
@@ -20,7 +23,7 @@ function resolveProteusProp(value, data, parentPath) {
     const resolved = {};
     let length = 0;
     for (const [k, v] of Object.entries(sources)) {
-      const arr = resolveProteusProp(v, data, parentPath);
+      const arr = resolveProteusProp(v, data, parentPath, mapIndices);
       if (Array.isArray(arr)) {
         resolved[k] = arr;
         length = Math.max(length, arr.length);
@@ -37,12 +40,12 @@ function resolveProteusProp(value, data, parentPath) {
   if ("$type" in value && value.$type === "Show" && "when" in value && "children" in value) {
     const conditions = Array.isArray(value.when) ? value.when : [value.when];
     const shouldShow = conditions.every(
-      (condition) => evaluateCondition(condition, data, parentPath)
+      (condition) => evaluateCondition(condition, data, parentPath, mapIndices)
     );
     if (!shouldShow) {
       return void 0;
     }
-    return resolveProteusProp(value.children, data, parentPath);
+    return resolveProteusProp(value.children, data, parentPath, mapIndices);
   }
   return "$type" in value || Array.isArray(value) && value.some((v) => v && typeof v === "object" && "$type" in v) ? /* @__PURE__ */ jsx(ProteusElement, { element: value }) : value;
 }

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

@@ -1,62 +1,75 @@
 "use client";
 import { getProteusValue } from './getProteusValue.js';
 
-function evaluateCondition(condition, data, parentPath) {
+function evaluateCondition(condition, data, parentPath, mapIndices = []) {
   if (!condition) {
     return true;
   }
   if ("and" in condition) {
     return condition.and.every(
-      (cond) => evaluateCondition(cond, data, parentPath)
+      (cond) => evaluateCondition(cond, data, parentPath, mapIndices)
     );
   }
   if ("or" in condition) {
     return condition.or.some(
-      (cond) => evaluateCondition(cond, data, parentPath)
+      (cond) => evaluateCondition(cond, data, parentPath, mapIndices)
     );
   }
   if ("!!" in condition) {
-    const value = resolveProteusValue(condition["!!"], data, parentPath);
+    const value = resolveProteusValue(
+      condition["!!"],
+      data,
+      parentPath,
+      mapIndices
+    );
     return !!value;
   }
   if ("!" in condition) {
-    const value = resolveProteusValue(condition["!"], data, parentPath);
+    const value = resolveProteusValue(
+      condition["!"],
+      data,
+      parentPath,
+      mapIndices
+    );
     return !value;
   }
   if ("==" in condition) {
     const [left, right] = condition["=="];
-    return resolveProteusValue(left, data, parentPath) === resolveProteusValue(right, data, parentPath);
+    return resolveProteusValue(left, data, parentPath, mapIndices) === resolveProteusValue(right, data, parentPath, mapIndices);
   } else if ("!=" in condition) {
     const [left, right] = condition["!="];
-    return resolveProteusValue(left, data, parentPath) !== resolveProteusValue(right, data, parentPath);
+    return resolveProteusValue(left, data, parentPath, mapIndices) !== resolveProteusValue(right, data, parentPath, mapIndices);
   } else if ("<" in condition) {
     const [left, right] = condition["<"];
-    const leftVal = resolveProteusValue(left, data, parentPath);
-    const rightVal = resolveProteusValue(right, data, parentPath);
+    const leftVal = resolveProteusValue(left, data, parentPath, mapIndices);
+    const rightVal = resolveProteusValue(right, data, parentPath, mapIndices);
     return typeof leftVal === "number" && typeof rightVal === "number" && leftVal < rightVal;
   } else if ("<=" in condition) {
     const [left, right] = condition["<="];
-    const leftVal = resolveProteusValue(left, data, parentPath);
-    const rightVal = resolveProteusValue(right, data, parentPath);
+    const leftVal = resolveProteusValue(left, data, parentPath, mapIndices);
+    const rightVal = resolveProteusValue(right, data, parentPath, mapIndices);
     return typeof leftVal === "number" && typeof rightVal === "number" && leftVal <= rightVal;
   } else if (">" in condition) {
     const [left, right] = condition[">"];
-    const leftVal = resolveProteusValue(left, data, parentPath);
-    const rightVal = resolveProteusValue(right, data, parentPath);
+    const leftVal = resolveProteusValue(left, data, parentPath, mapIndices);
+    const rightVal = resolveProteusValue(right, data, parentPath, mapIndices);
     return typeof leftVal === "number" && typeof rightVal === "number" && leftVal > rightVal;
   } else if (">=" in condition) {
     const [left, right] = condition[">="];
-    const leftVal = resolveProteusValue(left, data, parentPath);
-    const rightVal = resolveProteusValue(right, data, parentPath);
+    const leftVal = resolveProteusValue(left, data, parentPath, mapIndices);
+    const rightVal = resolveProteusValue(right, data, parentPath, mapIndices);
     return typeof leftVal === "number" && typeof rightVal === "number" && leftVal >= rightVal;
   }
   return false;
 }
-function resolveProteusValue(value, data, parentPath) {
+function resolveProteusValue(value, data, parentPath, mapIndices = []) {
   if (typeof value !== "object" || value === null) {
     return value;
   }
   if ("$type" in value) {
+    if (value.$type === "MapIndex") {
+      return mapIndices.at(-1);
+    }
     if (value.$type === "Value" && "path" in value && typeof value.path === "string") {
       return getProteusValue(
         data,
@@ -75,10 +88,18 @@ function resolveProteusValue(value, data, parentPath) {
       }
       const resolvedPath = value.path.startsWith("/") ? value.path : `${parentPath}/${value.path}`;
       const items = array.map(
-        (_, index) => resolveProteusValue(value.children, data, `${resolvedPath}/${index}`)
+        (_, index) => resolveProteusValue(value.children, data, `${resolvedPath}/${index}`, [
+          ...mapIndices,
+          index
+        ])
       );
       if ("separator" in value) {
-        const sep = resolveProteusValue(value.separator, data, parentPath);
+        const sep = resolveProteusValue(
+          value.separator,
+          data,
+          parentPath,
+          mapIndices
+        );
         return items.join(typeof sep === "string" ? sep : "");
       }
       return items;
@@ -86,18 +107,20 @@ function resolveProteusValue(value, data, parentPath) {
     if (value.$type === "Show" && "when" in value && "children" in value) {
       const conditions = Array.isArray(value.when) ? value.when : [value.when];
       const shouldShow = conditions.every(
-        (condition) => evaluateCondition(condition, data, parentPath)
+        (condition) => evaluateCondition(condition, data, parentPath, mapIndices)
       );
       if (!shouldShow) {
         return void 0;
       }
-      return resolveProteusValue(value.children, data, parentPath);
+      return resolveProteusValue(value.children, data, parentPath, mapIndices);
     }
     if (value.$type === "Concat" && "children" in value) {
       if (!Array.isArray(value.children)) {
         return value;
       }
-      return value.children.map((child) => resolveProteusValue(child, data, parentPath)).filter((v) => v !== void 0).join("");
+      return value.children.map(
+        (child) => resolveProteusValue(child, data, parentPath, mapIndices)
+      ).filter((v) => v !== void 0).join("");
     }
   }
   return value;

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

@@ -6,12 +6,12 @@ function useResolveProteusValues(props) {
   const { data } = useProteusDocumentContext(
     "@optiaxiom/react/useResolveProteusValues"
   );
-  const { path: parentPath } = useProteusDocumentPathContext(
+  const { mapIndices, path: parentPath } = useProteusDocumentPathContext(
     "@optiaxiom/react/useResolveProteusValues"
   );
   const resolved = {};
   for (const [key, value] of Object.entries(props)) {
-    resolved[key] = resolveProteusValue(value, data, parentPath);
+    resolved[key] = resolveProteusValue(value, data, parentPath, mapIndices);
   }
   return resolved;
 }

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

@@ -11,6 +11,7 @@ import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentCo
 import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
 import { resolveProteusProp } from '../proteus-document/resolveProteusProp.js';
 import { safeParseElement } from '../proteus-document/schemas.js';
+import { ProteusImageCarousel } from '../proteus-image-carousel/ProteusImageCarousel.js';
 import { ProteusImage } from '../proteus-image/ProteusImage.js';
 import { ProteusInput } from '../proteus-input/ProteusInput.js';
 import { ProteusMap } from '../proteus-map/ProteusMap.js';
@@ -32,7 +33,7 @@ const ProteusElement = ({
   const { data, strict } = useProteusDocumentContext(
     "@optiaxiom/proteus/ProteusElement"
   );
-  const { path: parentPath } = useProteusDocumentPathContext(
+  const { mapIndices, path: parentPath } = useProteusDocumentPathContext(
     "@optiaxiom/proteus/ProteusElement"
   );
   if (!elementProp) {
@@ -54,7 +55,7 @@ const ProteusElement = ({
     const { $type: _$type, ...rest } = obj;
     const resolved = {};
     for (const [key, value] of Object.entries(rest)) {
-      resolved[key] = resolveProteusProp(value, data, parentPath);
+      resolved[key] = resolveProteusProp(value, data, parentPath, mapIndices);
     }
     return resolved;
   };
@@ -72,7 +73,7 @@ const ProteusElement = ({
     case "CardHeader":
       return /* @__PURE__ */ jsx(CardHeader, { ...resolve(element) });
     case "CardLink":
-      return /* @__PURE__ */ jsx(CardLink, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(CardLink, { target: "_blank", ...resolve(element) });
     case "Chart":
       return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
         ProteusChart,
@@ -97,10 +98,17 @@ const ProteusElement = ({
       return /* @__PURE__ */ jsx(Box, { asChild: true, ...resolve(element), children: /* @__PURE__ */ jsx(IconCalendar, {}) });
     case "Image":
       return /* @__PURE__ */ jsx(ProteusImage, { ...resolve(element) });
+    case "ImageCarousel":
+      return /* @__PURE__ */ jsx(
+        ProteusImageCarousel,
+        {
+          ...resolve(element)
+        }
+      );
     case "Input":
       return /* @__PURE__ */ jsx(ProteusInput, { ...resolve(element) });
     case "Link":
-      return /* @__PURE__ */ jsx(Link, { ...resolve(element) });
+      return /* @__PURE__ */ jsx(Link, { target: "_blank", ...resolve(element) });
     case "Map":
       return /* @__PURE__ */ jsx(
         ProteusMap,

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

@@ -0,0 +1,12 @@
+import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-DV3O-VwO.css';
+import { recipe } from '@optiaxiom/react/css-runtime';
+
+var carousel = recipe({base:[{flexDirection:'column',gap:'12'},'ProteusImageCarousel__1t6qej70']});
+var content = recipe({base:[{display:'grid',overflow:'hidden',rounded:'lg'},'ProteusImageCarousel__1t6qej71']});
+var navButton = recipe({base:[{bg:'bg.default',display:'grid',mx:'16',placeItems:'center',rounded:'full',size:'md',transition:'opacity'},'ProteusImageCarousel__1t6qej75'],variants:{side:{left:[{mr:'32'},'ProteusImageCarousel__1t6qej76'],right:[{ml:'32'},'ProteusImageCarousel__1t6qej77']}}});
+var slide = recipe({base:[{objectFit:'cover',size:'full'},'ProteusImageCarousel__1t6qej74']});
+var slideContainer = recipe({base:[{size:'full'},'ProteusImageCarousel__1t6qej73']});
+var thumbnail = recipe({base:[{cursor:'pointer',flex:'none',objectFit:'cover',overflow:'hidden',rounded:'lg',size:'80',transition:'opacity'},'ProteusImageCarousel__1t6qej78'],variants:{selected:{false:'ProteusImageCarousel__1t6qej79',true:'ProteusImageCarousel__1t6qej7a'}}});
+var viewport = recipe({base:[{overflow:'hidden'},'ProteusImageCarousel__1t6qej72']});
+
+export { carousel, content, navButton, slide, slideContainer, thumbnail, viewport };

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

@@ -0,0 +1,164 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Group, Box, Text, Menu, MenuTrigger, MenuContent, Button } from '@optiaxiom/react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { useState, useCallback, useEffect } from 'react';
+import { IconAngleLeft } from '../icons/IconAngleLeft.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { downloadFile } from '../proteus-image/downloadFile.js';
+import { ProteusImage } from '../proteus-image/ProteusImage.js';
+import { carousel, content, viewport, slideContainer, slide, navButton, thumbnail } from './ProteusImageCarousel-css.js';
+
+function ProteusImageCarousel({
+  downloadAll,
+  images,
+  title
+}) {
+  const [emblaMainRef, emblaMainApi] = useEmblaCarousel({ loop: false });
+  const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({
+    containScroll: "keepSnaps",
+    dragFree: true
+  });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const onSelect = useCallback(() => {
+    if (!emblaMainApi || !emblaThumbsApi)
+      return;
+    setSelectedIndex(emblaMainApi.selectedScrollSnap());
+    emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap());
+    setCanScrollPrev(emblaMainApi.canScrollPrev());
+    setCanScrollNext(emblaMainApi.canScrollNext());
+  }, [emblaMainApi, emblaThumbsApi]);
+  useEffect(() => {
+    if (!emblaMainApi)
+      return;
+    onSelect();
+    emblaMainApi.on("select", onSelect).on("reInit", onSelect);
+  }, [emblaMainApi, onSelect]);
+  if (!images.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      "aria-label": title ?? "Image carousel",
+      "aria-roledescription": "carousel",
+      onKeyDownCapture: (event) => {
+        if (event.target instanceof HTMLInputElement)
+          return;
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          emblaMainApi?.scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          emblaMainApi?.scrollNext();
+        }
+      },
+      role: "region",
+      tabIndex: 0,
+      ...carousel(),
+      children: [
+        /* @__PURE__ */ jsxs(Box, { ...content(), children: [
+          /* @__PURE__ */ jsx(Box, { ...viewport(), ref: emblaMainRef, children: /* @__PURE__ */ jsx(Group, { ...slideContainer(), children: images.map((image, index) => /* @__PURE__ */ jsx(
+            ProteusImage,
+            {
+              alt: image.alt,
+              src: image.src,
+              ...slide()
+            },
+            index
+          )) }) }),
+          canScrollPrev && /* @__PURE__ */ jsx(
+            Box,
+            {
+              "aria-label": "Previous image",
+              asChild: true,
+              onClick: () => emblaMainApi?.scrollPrev(),
+              ...navButton({ side: "left" }),
+              children: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconAngleLeft, {}) })
+            }
+          ),
+          canScrollNext && /* @__PURE__ */ jsx(
+            Box,
+            {
+              "aria-label": "Next image",
+              asChild: true,
+              onClick: () => emblaMainApi?.scrollNext(),
+              ...navButton({ side: "right" }),
+              children: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconAngleRight, {}) })
+            }
+          )
+        ] }),
+        images.length > 1 && /* @__PURE__ */ jsx(Box, { overflow: "hidden", ref: emblaThumbsRef, children: /* @__PURE__ */ jsx(Group, { gap: "12", children: images.map((image, index) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            onClick: () => emblaMainApi?.scrollTo(index),
+            ...thumbnail({
+              selected: index === selectedIndex
+            }),
+            children: /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", size: "full", children: /* @__PURE__ */ jsx("img", { alt: image.alt, src: image.thumb ?? image.src }) })
+          },
+          index
+        )) }) }),
+        /* @__PURE__ */ jsxs(Group, { mt: "4", children: [
+          images.length > 1 && /* @__PURE__ */ jsxs(
+            Text,
+            {
+              bg: "bg.secondary",
+              color: "fg.default",
+              fontSize: "sm",
+              fontWeight: "500",
+              px: "8",
+              py: "2",
+              rounded: "full",
+              children: [
+                selectedIndex + 1,
+                " / ",
+                images.length
+              ]
+            }
+          ),
+          images.length > 1 ? /* @__PURE__ */ jsxs(
+            Menu,
+            {
+              options: [
+                {
+                  execute: () => downloadFile(images[selectedIndex].src),
+                  label: "Download this image"
+                },
+                {
+                  execute: () => {
+                    if (downloadAll) {
+                      window.open(downloadAll, "_blank");
+                    } else {
+                      for (const image of images) {
+                        void downloadFile(image.src);
+                      }
+                    }
+                  },
+                  label: "Download all images"
+                }
+              ],
+              children: [
+                /* @__PURE__ */ jsx(MenuTrigger, { appearance: "primary", ml: "auto", children: "Download" }),
+                /* @__PURE__ */ jsx(MenuContent, { align: "end" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              ml: "auto",
+              onClick: () => downloadFile(images[0].src),
+              children: "Download"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+ProteusImageCarousel.displayName = "@optiaxiom/proteus/ProteusImageCarousel";
+
+export { ProteusImageCarousel };

package/dist/esm/proteus-map/ProteusMap.js

@@ -6,7 +6,7 @@ import { useProteusValue } from '../use-proteus-value/useProteusValue.js';
 
 function ProteusMap({ children, path, separator }) {
   const { strict } = useProteusDocumentContext("@optiaxiom/proteus/ProteusMap");
-  const { path: parentPath } = useProteusDocumentPathContext(
+  const { mapIndices, path: parentPath } = useProteusDocumentPathContext(
     "@optiaxiom/proteus/ProteusMap"
   );
   const array = useProteusValue({ path });
@@ -21,6 +21,7 @@ function ProteusMap({ children, path, separator }) {
   return /* @__PURE__ */ jsx(Fragment, { children: array.map((_, index) => /* @__PURE__ */ jsxs(
     ProteusDocumentPathProvider,
     {
+      mapIndices: [...mapIndices, index],
       path: `${path.startsWith("/") ? path : `${parentPath}/${path}`}/${index}`,
       children: [
         index > 0 && separator,

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

@@ -1,9 +1,9 @@
-import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-nFTJBsO_.css';
+import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-0cQoAJ0-.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'}}}});
 var choice = recipe({base:[{color:'fg.default',flexDirection:'column',fontSize:'md',gap:'8',px:'10',py:'16',rounded:'lg',transition:'colors'},'ProteusQuestion__8f590p2','ProteusQuestion__8f590p1'],variants:{cursor:{pointer:{borderB:'1'},text:{cursor:'text'}}}});
 var choiceGroup = recipe({base:{flexDirection:'column'}});
-var question = recipe({base:[{flexDirection:'column',gap:'16',p:'4'},'ProteusQuestion__8f590p0']});
+var question = recipe({base:[{flexDirection:'column',gap:'16'},'ProteusQuestion__8f590p0']});
 
 export { addon, choice, choiceGroup, question };

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

@@ -45,9 +45,9 @@ function ProteusQuestion({ questions }) {
         }
       );
       lastIndexRef.current = currentIndex;
-      const item = questionRef.current?.querySelector("[data-selected]") ?? questionRef.current?.querySelector("[tabindex]");
-      item?.focus();
     }
+    const item = questionRef.current?.querySelector("[data-selected]") ?? questionRef.current?.querySelector("[tabindex]");
+    item?.focus();
   }, [currentIndex]);
   const otherInputRef = useRef(null);
   const otherItemRef = useRef(null);
@@ -90,7 +90,7 @@ A: ${value2 || "[Not specified]"}`
       onKeyDown: (event) => {
         if (event.key === "Escape") {
           event.preventDefault();
-          if (valid) {
+          if (type === "multi_select" && valid) {
             onValueChange(null);
           } else {
             onSkip();
@@ -328,28 +328,28 @@ A: ${value2 || "[Not specified]"}`
                 value?.length || 0,
                 " selected"
               ] }),
-              (value?.length || 0) > 0 ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 Button,
                 {
-                  appearance: "primary",
-                  "aria-label": isLast ? "Submit" : "Next",
-                  disabled: !valid,
-                  icon: /* @__PURE__ */ jsx(IconNorth, {}),
                   ml: "auto",
                   onClick: (event) => {
                     event.preventDefault();
-                    onSubmit();
-                  }
+                    onSkip();
+                  },
+                  children: "Skip"
                 }
-              ) : /* @__PURE__ */ jsx(
+              ),
+              /* @__PURE__ */ jsx(
                 Button,
                 {
-                  ml: "auto",
+                  appearance: valid ? "primary" : "default",
+                  "aria-label": isLast ? "Submit" : "Next",
+                  disabled: !valid,
+                  icon: /* @__PURE__ */ jsx(IconNorth, {}),
                   onClick: (event) => {
                     event.preventDefault();
-                    onSkip();
-                  },
-                  children: "Skip"
+                    onSubmit();
+                  }
                 }
               )
             ]