pxengine 0.1.120 → 0.1.122

package/dist/index.mjs

@@ -15748,6 +15748,8 @@ import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef8
 
 // src/lib/shared-poll.ts
 import { useEffect as useEffect6, useRef as useRef7 } from "react";
+var MAX_RETAINED = 50;
+var RETAIN_TTL_MS = 30 * 60 * 1e3;
 var entries = /* @__PURE__ */ new Map();
 function clearTimer(entry) {
   if (entry.timer !== null) {
@@ -15757,6 +15759,32 @@ function clearTimer(entry) {
   entry.controller?.abort();
   entry.controller = null;
 }
+function isIdle(entry) {
+  return entry.dataListeners.size === 0 && entry.errorListeners.size === 0;
+}
+function pruneRetained(keepKey) {
+  const now = Date.now();
+  const idle = [];
+  for (const [key, entry] of entries) {
+    if (!isIdle(entry)) continue;
+    if (entry.retainedAt != null && now - entry.retainedAt > RETAIN_TTL_MS) {
+      entries.delete(key);
+      continue;
+    }
+    idle.push([key, entry]);
+  }
+  if (idle.length <= MAX_RETAINED) return;
+  idle.sort(
+    (a, b) => (a[1].retainedAt ?? 0) - (b[1].retainedAt ?? 0)
+  );
+  let excess = idle.length - MAX_RETAINED;
+  for (const [key] of idle) {
+    if (excess <= 0) break;
+    if (key === keepKey) continue;
+    entries.delete(key);
+    excess -= 1;
+  }
+}
 async function runPoll(key) {
   const entry = entries.get(key);
   if (!entry || entry.inFlight || entry.stopped) return;
@@ -15807,11 +15835,13 @@ function subscribeSharedPoll(config, onData, onError) {
       lastData: void 0,
       hasData: false,
       stopped: false,
-      inFlight: false
+      inFlight: false,
+      retainedAt: null
     };
     entries.set(key, entry);
   }
   const activeEntry = entry;
+  activeEntry.retainedAt = null;
   activeEntry.dataListeners.add(onData);
   if (onError) activeEntry.errorListeners.add(onError);
   if (activeEntry.hasData && activeEntry.lastData !== void 0) {
@@ -15829,6 +15859,11 @@ function subscribeSharedPoll(config, onData, onError) {
     if (onError) activeEntry.errorListeners.delete(onError);
     if (activeEntry.dataListeners.size === 0 && activeEntry.errorListeners.size === 0) {
       clearTimer(activeEntry);
+      if (activeEntry.hasData) {
+        activeEntry.retainedAt = Date.now();
+        pruneRetained(key);
+        return;
+      }
       entries.delete(key);
     }
   };
@@ -15839,6 +15874,16 @@ function stopSharedPoll(key) {
   entry.stopped = true;
   clearTimer(entry);
 }
+function getSharedPollLastData(key) {
+  if (!key) return void 0;
+  const entry = entries.get(key);
+  if (!entry || !entry.hasData) return void 0;
+  return entry.lastData;
+}
+function isSharedPollStopped(key) {
+  if (!key) return false;
+  return entries.get(key)?.stopped === true;
+}
 function useSharedPoll(config, onData, onError) {
   const fetcherRef = useRef7(config.fetcher);
   fetcherRef.current = config.fetcher;
@@ -22820,6 +22865,15 @@ var formatTime = (seconds) => {
   const minutes = Math.floor(seconds / 60);
   return minutes >= 1 ? `${minutes} min remaining...` : `${seconds} sec remaining...`;
 };
+function isTerminalStatus(status) {
+  return status === "completed" || status === "complete" || status === "failed";
+}
+function versionPollKey(sessionId, version, validated) {
+  return `creator:versions:${sessionId}:${version ?? "latest"}:${validated ? 1 : 0}`;
+}
+function statusPollKey(sessionId, version) {
+  return `creator:status:${sessionId}:${version}`;
+}
 function useCreatorWidgetPolling({
   sessionId,
   currentVersion,
@@ -22834,17 +22888,53 @@ function useCreatorWidgetPolling({
     () => ({ ...DEFAULT_POLLING_CONFIG, ...pollingConfig }),
     [pollingConfig]
   );
-  const [versionData, setVersionData] = useState21(null);
-  const [totalVersions, setTotalVersions] = useState21(0);
+  const hydrated = useMemo11(() => {
+    if (!sessionId) {
+      return {
+        versionData: null,
+        statusPayload: void 0,
+        activeVersion: currentVersion
+      };
+    }
+    const versionHint = currentVersion;
+    const cachedVersion = getSharedPollLastData(
+      versionPollKey(sessionId, versionHint, true)
+    ) ?? getSharedPollLastData(
+      versionPollKey(sessionId, versionHint, false)
+    );
+    const activeVersion2 = versionHint ?? cachedVersion?.currentVersion ?? void 0;
+    const statusPayload = activeVersion2 != null ? getSharedPollLastData(
+      statusPollKey(sessionId, activeVersion2)
+    ) : void 0;
+    return { versionData: cachedVersion ?? null, statusPayload, activeVersion: activeVersion2 };
+  }, [sessionId, currentVersion]);
+  const hydratedStatus = hydrated.statusPayload?.status?.status;
+  const hydratedTerminal = isTerminalStatus(hydratedStatus);
+  const [versionData, setVersionData] = useState21(
+    hydrated.versionData
+  );
+  const [totalVersions, setTotalVersions] = useState21(
+    hydrated.versionData?.totalVersions || 0
+  );
   const [selectedVersion, setSelectedVersion] = useState21();
-  const [isLoadingVersion, setIsLoadingVersion] = useState21(false);
-  const [isValidationComplete, setIsValidationComplete] = useState21(false);
-  const [versionStatus, setVersionStatus] = useState21("checking");
-  const [statusDetails, setStatusDetails] = useState21();
+  const [isLoadingVersion, setIsLoadingVersion] = useState21(!hydrated.versionData);
+  const [isValidationComplete, setIsValidationComplete] = useState21(
+    hydratedTerminal && hydratedStatus !== "failed"
+  );
+  const [versionStatus, setVersionStatus] = useState21(
+    hydratedStatus || (hydrated.versionData ? "in-progress" : "checking")
+  );
+  const [statusDetails, setStatusDetails] = useState21(
+    hydrated.statusPayload?.status
+  );
   const [timeDisplay, setTimeDisplay] = useState21("");
-  const [loadingStatus, setLoadingStatus] = useState21(true);
+  const [loadingStatus, setLoadingStatus] = useState21(
+    !(hydrated.versionData && hydratedTerminal)
+  );
   const remainingTimeRef = useRef13(0);
   const countdownRef = useRef13(null);
+  const versionDataRef = useRef13(versionData);
+  versionDataRef.current = versionData;
   const requestedVersion = selectedVersion ?? currentVersion ?? versionData?.currentVersion;
   const updateStatus = useCallback8(
     (status) => {
@@ -22853,13 +22943,13 @@ function useCreatorWidgetPolling({
     },
     [onStatusChange]
   );
-  const versionKey = sessionId ? `creator:versions:${sessionId}:${requestedVersion ?? "latest"}:${isValidationComplete ? 1 : 0}` : null;
+  const versionKey = sessionId ? versionPollKey(sessionId, requestedVersion, isValidationComplete) : null;
   useSharedPoll(
     {
       key: versionKey,
       intervalMs: config.pollInterval,
       fetcher: async () => {
-        if (!versionData) setIsLoadingVersion(true);
+        if (!versionDataRef.current) setIsLoadingVersion(true);
         return fetchVersions({
           sessionId,
           version: requestedVersion,
@@ -22883,10 +22973,10 @@ function useCreatorWidgetPolling({
     }
   );
   const activeVersion = selectedVersion ?? requestedVersion;
-  const statusKey = sessionId && activeVersion != null ? `creator:status:${sessionId}:${activeVersion}` : null;
+  const statusKey = sessionId && activeVersion != null ? statusPollKey(sessionId, activeVersion) : null;
   const errorCountRef = useRef13(0);
   const deadlineRef = useRef13(0);
-  const doneRef = useRef13(false);
+  const doneRef = useRef13(hydratedTerminal);
   const stopCountdown = useCallback8(() => {
     if (countdownRef.current) {
       clearInterval(countdownRef.current);
@@ -22896,13 +22986,28 @@ function useCreatorWidgetPolling({
   }, []);
   useEffect15(() => {
     if (statusKey == null) return;
+    const cached = getSharedPollLastData(statusKey);
+    const cachedStatus = cached?.status?.status;
+    if (isTerminalStatus(cachedStatus) && isSharedPollStopped(statusKey)) {
+      setStatusDetails(cached?.status);
+      setVersionStatus(cachedStatus);
+      onStatusChange?.(cachedStatus);
+      if (cachedStatus === "completed" || cachedStatus === "complete") {
+        setIsValidationComplete(true);
+      }
+      setLoadingStatus(false);
+      doneRef.current = true;
+      errorCountRef.current = 0;
+      stopCountdown();
+      return;
+    }
     setLoadingStatus(true);
     setStatusDetails(void 0);
     setVersionStatus("checking");
     errorCountRef.current = 0;
     doneRef.current = false;
     deadlineRef.current = Date.now() + config.maxDuration;
-    const creatorLength2 = versionData?.length || 0;
+    const creatorLength2 = versionDataRef.current?.length || 0;
     remainingTimeRef.current = creatorLength2 > 0 ? creatorLength2 * config.secondsPerCreator : 60;
     setTimeDisplay(formatTime(remainingTimeRef.current));
     countdownRef.current = setInterval(() => {
@@ -22924,7 +23029,7 @@ function useCreatorWidgetPolling({
       shouldContinue: (data) => {
         if (Date.now() >= deadlineRef.current) return false;
         const s = data?.status?.status;
-        return !(s === "completed" || s === "complete" || s === "failed");
+        return !isTerminalStatus(s);
       }
     },
     (data) => {
@@ -23069,7 +23174,186 @@ function CreatorWidgetInner({
 var CreatorWidget = memo(CreatorWidgetInner);
 
 // src/molecules/analytics/AnalyticsChart.tsx
-import { useEffect as useEffect16, useRef as useRef14, useState as useState23 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo12, useRef as useRef14, useState as useState23 } from "react";
+
+// src/molecules/analytics/buildOptions.ts
+function deepMerge(base, override) {
+  const out = Array.isArray(base) ? [...base] : { ...base };
+  for (const key of Object.keys(override)) {
+    const o = override[key];
+    const b = out[key];
+    if (o && typeof o === "object" && !Array.isArray(o) && b && typeof b === "object" && !Array.isArray(b)) {
+      out[key] = deepMerge(b, o);
+    } else if (o !== void 0) {
+      out[key] = o;
+    }
+  }
+  return out;
+}
+function highchartsType(type) {
+  if (type === "donut") return "pie";
+  return type;
+}
+function buildAxis(axis, fallbackCategories) {
+  const cfg = {};
+  if (!axis) {
+    if (fallbackCategories) cfg.categories = fallbackCategories;
+    return cfg;
+  }
+  if (axis.title) cfg.title = { text: axis.title };
+  if (axis.type) cfg.type = axis.type;
+  if (axis.categories || fallbackCategories) cfg.categories = axis.categories ?? fallbackCategories;
+  if (axis.format) cfg.labels = { format: axis.format };
+  if (typeof axis.min === "number") cfg.min = axis.min;
+  if (typeof axis.max === "number") cfg.max = axis.max;
+  if (axis.opposite) cfg.opposite = true;
+  return cfg;
+}
+function resolveStacking(stacked) {
+  if (stacked === true || stacked === "normal") return "normal";
+  if (stacked === "percent") return "percent";
+  return void 0;
+}
+function buildChartOptions(config, palette) {
+  const hcType = highchartsType(config.type);
+  const isCircular = config.type === "pie" || config.type === "donut";
+  const seriesColors = config.colors ?? palette.series;
+  const safeSeries = Array.isArray(config.series) ? config.series : [];
+  const options = {
+    chart: { type: hcType, ...config.height && { height: config.height } },
+    title: { text: config.title ?? void 0 },
+    subtitle: { text: config.subtitle ?? void 0 },
+    series: safeSeries.map((s, i) => ({
+      name: s.name,
+      data: s.data,
+      ...s.type && { type: highchartsType(s.type) },
+      ...s.stack && { stack: s.stack },
+      ...typeof s.yAxis === "number" && { yAxis: s.yAxis },
+      color: s.color ?? seriesColors[i % seriesColors.length]
+    })),
+    legend: { enabled: config.legend ?? (safeSeries.length > 1 || isCircular) }
+  };
+  if (config.colors) options.colors = config.colors;
+  if (!isCircular && config.type !== "funnel") {
+    options.xAxis = buildAxis(config.xAxis, config.categories);
+    const yAxes = Array.isArray(config.yAxis) ? config.yAxis : [config.yAxis];
+    options.yAxis = yAxes.map((a) => buildAxis(a));
+    if (options.yAxis.length === 1) options.yAxis = options.yAxis[0];
+  }
+  if (config.tooltip) {
+    options.tooltip = {
+      ...config.tooltip.shared !== void 0 && { shared: config.tooltip.shared },
+      ...config.tooltip.valuePrefix && { valuePrefix: config.tooltip.valuePrefix },
+      ...config.tooltip.valueSuffix && { valueSuffix: config.tooltip.valueSuffix },
+      ...config.tooltip.pointFormat && { pointFormat: config.tooltip.pointFormat }
+    };
+  }
+  const stacking = resolveStacking(config.stacked);
+  const dataLabels = config.dataLabels === true ? { enabled: true } : config.dataLabels && typeof config.dataLabels === "object" ? { enabled: true, ...config.dataLabels } : void 0;
+  const plotOptions = {};
+  if (stacking || dataLabels) {
+    plotOptions.series = {
+      ...stacking && { stacking },
+      ...dataLabels && { dataLabels }
+    };
+  }
+  if (config.type === "donut") {
+    plotOptions.pie = {
+      innerSize: "55%",
+      dataLabels: dataLabels ?? {
+        enabled: true,
+        format: "<b>{point.name}</b>: {point.percentage:.1f}%"
+      }
+    };
+  } else if (config.type === "pie") {
+    plotOptions.pie = {
+      dataLabels: dataLabels ?? {
+        enabled: true,
+        format: "<b>{point.name}</b>: {point.percentage:.1f}%"
+      }
+    };
+  } else if (config.type === "funnel") {
+    plotOptions.funnel = {
+      neckWidth: "30%",
+      neckHeight: "25%",
+      dataLabels: dataLabels ?? { enabled: true, format: "<b>{point.name}</b> ({point.y:,.0f})" }
+    };
+  }
+  if (Object.keys(plotOptions).length) options.plotOptions = plotOptions;
+  return options;
+}
+
+// src/molecules/analytics/highchartsTheme.ts
+var PXENGINE_SERIES_COLORS = [
+  "#6366f1",
+  // indigo
+  "#10b981",
+  // emerald
+  "#f59e0b",
+  // amber
+  "#ec4899",
+  // pink
+  "#8b5cf6",
+  // violet
+  "#06b6d4",
+  // cyan
+  "#f43f5e",
+  // rose
+  "#84cc16",
+  // lime
+  "#3b82f6",
+  // blue
+  "#f97316"
+  // orange
+];
+var DARK_PALETTE = {
+  text: "#e5e7eb",
+  textMuted: "#9ca3af",
+  grid: "rgba(255,255,255,0.08)",
+  border: "rgba(255,255,255,0.12)",
+  background: "transparent",
+  series: PXENGINE_SERIES_COLORS,
+  tooltipBg: "rgba(17,24,39,0.95)",
+  tooltipText: "#f9fafb"
+};
+var LIGHT_PALETTE = {
+  text: "#1f2937",
+  textMuted: "#6b7280",
+  grid: "rgba(0,0,0,0.06)",
+  border: "rgba(0,0,0,0.10)",
+  background: "transparent",
+  series: PXENGINE_SERIES_COLORS,
+  tooltipBg: "rgba(255,255,255,0.98)",
+  tooltipText: "#111827"
+};
+function resolveColorMode(mode = "auto") {
+  if (mode === "light" || mode === "dark") return mode;
+  if (typeof document !== "undefined") {
+    if (document.documentElement.classList.contains("dark")) return "dark";
+    if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  }
+  return "dark";
+}
+function buildChartPalette(theme, mode = "auto") {
+  const base = resolveColorMode(mode) === "dark" ? DARK_PALETTE : LIGHT_PALETTE;
+  if (!theme) return base;
+  const series = theme.accent ? [theme.accent, ...base.series.filter((c) => c.toLowerCase() !== theme.accent.toLowerCase())] : base.series;
+  return {
+    ...base,
+    ...theme.text && { text: theme.text },
+    ...theme.textMuted && { textMuted: theme.textMuted },
+    ...theme.border && { border: theme.border, grid: theme.border },
+    ...theme.surface && { tooltipBg: theme.surface },
+    ...theme.text && { tooltipText: theme.text },
+    ...theme.fontFamily && { fontFamily: theme.fontFamily },
+    series
+  };
+}
+
+// src/molecules/analytics/AnalyticsChart.tsx
 import { jsx as jsx179, jsxs as jsxs137 } from "react/jsx-runtime";
 function getCSSVar(name) {
   if (typeof document === "undefined") return "";
@@ -23106,6 +23390,30 @@ function stripNulls(val) {
   }
   return val;
 }
+function resolveDeclarativeConfig(props) {
+  if (props.chartConfig) {
+    return {
+      ...props.chartConfig,
+      ...props.height != null && !props.chartConfig.height ? { height: props.height } : {}
+    };
+  }
+  if (!props.chartType) return null;
+  return {
+    type: props.chartType,
+    title: props.title,
+    subtitle: props.subtitle,
+    series: props.series ?? [],
+    categories: props.categories,
+    xAxis: props.xAxis,
+    yAxis: props.yAxis,
+    colors: props.colors,
+    stacked: props.stacked,
+    legend: props.legend,
+    tooltip: props.tooltip,
+    dataLabels: props.dataLabels,
+    height: props.height
+  };
+}
 var hcSingleton = null;
 var hcLoadPromise = null;
 function loadHighcharts() {
@@ -23174,9 +23482,25 @@ function buildTheme(height) {
 }
 function AnalyticsChart({
   config: configProp,
+  chartConfig,
+  chartType,
+  series,
+  categories,
+  xAxis,
+  yAxis,
+  colors,
+  stacked,
+  legend,
+  tooltip,
+  dataLabels,
+  extraOptions,
   chartId,
   apiBase = "",
   authToken,
+  title,
+  subtitle,
+  theme,
+  mode = "auto",
   height = 400,
   className,
   loading: loadingProp,
@@ -23188,11 +23512,51 @@ function AnalyticsChart({
   const [fetchError, setFetchError] = useState23(null);
   const containerRef = useRef14(null);
   const chartRef = useRef14(null);
+  const declarative = useMemo12(
+    () => resolveDeclarativeConfig({
+      chartConfig,
+      chartType,
+      title,
+      subtitle,
+      series,
+      categories,
+      xAxis,
+      yAxis,
+      colors,
+      stacked,
+      legend,
+      tooltip,
+      dataLabels,
+      height
+    }),
+    [
+      chartConfig,
+      chartType,
+      title,
+      subtitle,
+      series,
+      categories,
+      xAxis,
+      yAxis,
+      colors,
+      stacked,
+      legend,
+      tooltip,
+      dataLabels,
+      height
+    ]
+  );
+  const builtConfig = useMemo12(() => {
+    if (!declarative) return null;
+    const palette = buildChartPalette(theme, mode);
+    const options = buildChartOptions(declarative, palette);
+    return extraOptions ? deepMerge(options, extraOptions) : options;
+  }, [declarative, theme, mode, extraOptions]);
   useEffect16(() => {
     setMounted(true);
   }, []);
   useEffect16(() => {
-    if (!chartId || configProp) return;
+    if (!chartId || configProp || builtConfig) return;
     let cancelled = false;
     setFetching(true);
     setFetchError(null);
@@ -23211,8 +23575,8 @@ function AnalyticsChart({
     return () => {
       cancelled = true;
     };
-  }, [chartId, apiBase, authToken, configProp]);
-  const activeConfig = configProp ?? fetchedConfig;
+  }, [chartId, apiBase, authToken, configProp, builtConfig]);
+  const activeConfig = configProp ?? builtConfig ?? fetchedConfig;
   useEffect16(() => {
     if (!mounted || !activeConfig || !containerRef.current) return;
     const container = containerRef.current;
@@ -23726,7 +24090,7 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/ui/field.tsx
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 import { cva as cva10 } from "class-variance-authority";
 import { jsx as jsx182, jsxs as jsxs138 } from "react/jsx-runtime";
 function FieldSet({ className, ...props }) {
@@ -23909,7 +24273,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = useMemo12(() => {
+  const content = useMemo13(() => {
     if (children) {
       return children;
     }