@optiaxiom/proteus 0.1.27-next.2 → 0.2.1

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

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

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

@@ -1,7 +1,8 @@
-@layer optiaxiom._2m54yp;
-@layer optiaxiom._2m54yp {
+@layer optiaxiom._155jno1;
+@layer optiaxiom._155jno1 {
   .ProteusChartTooltipContent__1gsvq810 {
     min-width: 128px;
+    position: absolute;
   }
   .ProteusChartTooltipContent__1gsvq811 {
     font-variant-numeric: tabular-nums;

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-BjD9gTQa.css';
+import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-BLxzbWut.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/ProteusChart.js

@@ -2,8 +2,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Box, theme } from '@optiaxiom/react';
 import { get } from 'jsonpointer';
+import { useRef } from 'react';
 import { ResponsiveContainer, BarChart, LineChart, CartesianGrid, YAxis, XAxis, Tooltip, Bar, Line } from 'recharts';
 import { chart } from './ProteusChart-css.js';
+import { ProteusChartContext } from './ProteusChartContext.js';
 import { ProteusChartTooltipContent } from './ProteusChartTooltipContent.js';
 
 const DEFAULT_COLORS = ["#096DD9", "#E59700", "#38C56C", "#D1D8DE"];
@@ -20,11 +22,12 @@ const ProteusChart = ({
   const Chart = type === "bar" ? Bar : Line;
   const CategoryAxis = isVertical ? YAxis : XAxis;
   const ValueAxis = isVertical ? XAxis : YAxis;
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ...chart(), children: /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, width: "100%", children: /* @__PURE__ */ jsxs(ChartComponent, { data, layout, children: [
+  const containerRef = useRef(null);
+  return /* @__PURE__ */ jsx(ProteusChartContext.Provider, { value: containerRef, children: /* @__PURE__ */ jsx(Box, { asChild: true, ref: containerRef, ...chart(), children: /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, width: "100%", children: /* @__PURE__ */ jsxs(ChartComponent, { data, layout, children: [
     /* @__PURE__ */ jsx(
       CartesianGrid,
       {
-        stroke: "#E0E0E0",
+        stroke: theme.colors["border.secondary"],
         strokeDasharray: "4 4",
         vertical: false
       }
@@ -36,6 +39,7 @@ const ProteusChart = ({
         dataKey: (row) => get(row, "/" + xAxisKey),
         padding: { left: 16, right: 16 },
         tick: { fill: theme.colors["fg.secondary"] },
+        tickFormatter: (value) => value.length > 30 ? value.slice(0, 30) + "\u2026" : value,
         tickLine: false,
         tickMargin: 8,
         type: "category",
@@ -45,7 +49,7 @@ const ProteusChart = ({
     /* @__PURE__ */ jsx(
       ValueAxis,
       {
-        axisLine: { stroke: "#CBD5E1" },
+        axisLine: { stroke: theme.colors["border.default"] },
         minTickGap: 32,
         tick: { fill: theme.colors["fg.secondary"] },
         tickFormatter: (value) => new Intl.NumberFormat(void 0, {
@@ -57,7 +61,14 @@ const ProteusChart = ({
         width: isVertical ? void 0 : "auto"
       }
     ),
-    /* @__PURE__ */ jsx(Tooltip, { content: ProteusChartTooltipContent, cursor: false }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: ProteusChartTooltipContent,
+        cursor: false,
+        portal: document.body
+      }
+    ),
     series.map((s, i) => /* @__PURE__ */ jsx(
       Chart,
       {
@@ -70,7 +81,7 @@ const ProteusChart = ({
       },
       i
     ))
-  ] }) }) });
+  ] }) }) }) });
 };
 ProteusChart.displayName = "@optiaxiom/proteus/ProteusChart";
 

package/dist/esm/proteus-chart/ProteusChartContext.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+const ProteusChartContext = createContext(void 0);
+const useProteusChartContainer = () => useContext(ProteusChartContext);
+
+export { ProteusChartContext, useProteusChartContainer };

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

@@ -1,7 +1,7 @@
-import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-CiBO2VBA.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-JTr7n2a8.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']});
+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'},'ProteusChartTooltipContent__1gsvq810']});
 var value = recipe({base:[{color:'fg.default',fontWeight:'500'},'ProteusChartTooltipContent__1gsvq811']});
 
 export { tooltip, value };

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

@@ -1,45 +1,70 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Box, Group } from '@optiaxiom/react';
+import { useRef } from 'react';
 import { applyFormatter } from '../proteus-document/getProteusValue.js';
+import { useProteusChartContainer } from './ProteusChartContext.js';
 import { value, tooltip } from './ProteusChartTooltipContent-css.js';
 
+const OFFSET = 10;
 function ProteusChartTooltipContent({
   active,
+  coordinate,
   label,
   payload
 }) {
+  const containerRef = useProteusChartContainer();
+  const ref = useRef(null);
   if (!active || !payload?.length) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Box, { ...tooltip(), children: [
-    label && /* @__PURE__ */ jsx(Box, { fontWeight: "500", children: label }),
-    /* @__PURE__ */ jsx("div", { children: payload.filter((item) => item.type !== "none").map((item, i) => /* @__PURE__ */ jsxs(
-      Box,
-      {
-        alignItems: "center",
-        display: "flex",
-        gap: "8",
-        justifyContent: "space-between",
-        children: [
-          /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                flex: "none",
-                rounded: "xs",
-                size: "10",
-                style: { backgroundColor: item.color }
-              }
-            ),
-            /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children: item.name ?? String(item.dataKey) })
-          ] }),
-          /* @__PURE__ */ jsx(Box, { ...value(), children: applyFormatter(item.value, "Number") })
-        ]
+  const wrapperRect = containerRef?.current?.querySelector(".recharts-wrapper")?.getBoundingClientRect();
+  const tooltipRect = ref.current?.getBoundingClientRect();
+  const cx = coordinate?.x ?? 0;
+  const cy = coordinate?.y ?? 0;
+  const th = tooltipRect?.height ?? 0;
+  const translateX = cx + OFFSET;
+  const translateY = cy - th / 2;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref,
+      style: {
+        left: 0,
+        top: 0,
+        transform: `translate(${(wrapperRect?.left ?? 0) + translateX + window.scrollX}px, ${(wrapperRect?.top ?? 0) + translateY + window.scrollY}px)`
       },
-      i
-    )) })
-  ] });
+      ...tooltip(),
+      children: [
+        label && /* @__PURE__ */ jsx(Box, { fontWeight: "500", children: label }),
+        /* @__PURE__ */ jsx("div", { children: payload.filter((item) => item.type !== "none").map((item, i) => /* @__PURE__ */ jsxs(
+          Box,
+          {
+            alignItems: "center",
+            display: "flex",
+            gap: "8",
+            justifyContent: "space-between",
+            children: [
+              /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    flex: "none",
+                    rounded: "xs",
+                    size: "10",
+                    style: { backgroundColor: item.color }
+                  }
+                ),
+                /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children: item.name ?? String(item.dataKey) })
+              ] }),
+              /* @__PURE__ */ jsx(Box, { ...value(), children: applyFormatter(item.value, "Number") })
+            ]
+          },
+          i
+        )) })
+      ]
+    }
+  );
 }
 
 export { ProteusChartTooltipContent };

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

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-CONvLXzv.css';
+import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-BZNGG_wN.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

@@ -20,6 +20,7 @@ function ProteusDocumentShell({
   onInteraction,
   onMessage,
   onOpenChange,
+  onTrack,
   open: openProp,
   readOnly = false,
   strict,
@@ -95,6 +96,11 @@ function ProteusDocumentShell({
         }
         return;
       }),
+      onTrack: useEffectEvent(
+        (event, properties) => {
+          onTrack?.(event, properties);
+        }
+      ),
       readOnly,
       strict,
       useResource,

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

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-BR0bm1gm.css';
+import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-f4zcbZW_.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-B6KKoYKy.css';
+import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-D7Zi6Bwi.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/proteus-question/ProteusQuestion.js

@@ -12,18 +12,28 @@ import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentCo
 import { addon, choice, choiceGroup, question } from './ProteusQuestion-css.js';
 
 function ProteusQuestion({ questions }) {
-  const { onEvent } = useProteusDocumentContext(
+  const { onEvent, onTrack } = useProteusDocumentContext(
     "@optiaxiom/proteus/ProteusQuestion"
   );
   const [answers, setAnswers] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const value = answers[currentIndex];
   const valid = Array.isArray(value) && value.length > 0 && value.every(Boolean);
+  const goBack = useCallback(() => {
+    onTrack?.("Ask User Question Back", {
+      fromIndex: String(currentIndex),
+      toIndex: String(currentIndex - 1)
+    });
+    setCurrentIndex((i) => i - 1);
+  }, [currentIndex, onTrack]);
   const onDismiss = useCallback(() => {
+    onTrack?.("Ask User Question Dismissed", {
+      questionIndex: String(currentIndex)
+    });
     void onEvent({
       message: "[User declined to answer the question]"
     });
-  }, [onEvent]);
+  }, [currentIndex, onEvent, onTrack]);
   const questionRef = useRef(null);
   const lastIndexRef = useRef(currentIndex);
   useEffect(() => {
@@ -57,17 +67,30 @@ function ProteusQuestion({ questions }) {
   const isLast = currentIndex === questions.length - 1;
   const otherValue = value?.find((v) => !options.includes(v));
   const otherChecked = otherValue !== void 0;
-  const onComplete = () => onEvent({
-    message: answers.map(
-      (value2, index) => `Q: ${questions[index].question}
+  const onComplete = () => {
+    const answeredCount = answers.filter(
+      (answer) => Array.isArray(answer) && answer.length > 0
+    ).length;
+    onTrack?.("Ask User Question Submitted", {
+      answeredCount: String(answeredCount),
+      skippedCount: String(questions.length - answeredCount),
+      totalQuestions: String(questions.length)
+    });
+    return onEvent({
+      message: answers.map(
+        (value2, index) => `Q: ${questions[index].question}
 A: ${value2 || "[Not specified]"}`
-    ).join("\n\n")
-  });
+      ).join("\n\n")
+    });
+  };
   const onValueChange = (value2) => {
     answers[currentIndex] = value2;
     setAnswers([...answers]);
   };
   const onSkip = () => {
+    onTrack?.("Ask User Question Skipped", {
+      questionIndex: String(currentIndex)
+    });
     answers[currentIndex] = null;
     setAnswers([...answers]);
     if (isLast) {
@@ -77,6 +100,15 @@ A: ${value2 || "[Not specified]"}`
     }
   };
   const onSubmit = () => {
+    const currentValue = answers[currentIndex];
+    if (currentValue) {
+      const firstIndex = options.indexOf(currentValue[0]);
+      onTrack?.("Ask User Question Option Selected", {
+        isCustomText: String(currentValue.some((v) => !options.includes(v))),
+        optionIndex: String(firstIndex),
+        questionIndex: String(currentIndex)
+      });
+    }
     if (isLast) {
       void onComplete();
     } else {
@@ -98,7 +130,7 @@ A: ${value2 || "[Not specified]"}`
         if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && !(event.target instanceof HTMLInputElement) && !event.target.isContentEditable) {
           event.preventDefault();
           if (event.key === "ArrowLeft" && currentIndex > 0) {
-            setCurrentIndex((i) => i - 1);
+            goBack();
           } else if (event.key === "ArrowRight" && !isLast) {
             setCurrentIndex((i) => i + 1);
           }
@@ -121,7 +153,7 @@ A: ${value2 || "[Not specified]"}`
                     icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
                     onClick: (event) => {
                       event.preventDefault();
-                      setCurrentIndex((i) => i - 1);
+                      goBack();
                     },
                     size: "sm"
                   }