@sqlrooms/mosaic 0.29.0-rc.1 → 0.29.0-rc.3

package/dist/VgPlotChart.js

@@ -1,12 +1,64 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { astToDOM, parseSpec } from '@uwdata/mosaic-spec';
-import { useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { ResponsivePlot } from './ResponsivePlot';
+function areEquivalentParams(left, right) {
+    if (left === right) {
+        return true;
+    }
+    if (!left || !right || left.size !== right.size) {
+        return false;
+    }
+    for (const [key, value] of left) {
+        if (right.get(key) !== value) {
+            return false;
+        }
+    }
+    return true;
+}
 export function isSpecProps(props) {
     return 'spec' in props;
 }
 export function isPlotProps(props) {
     return 'plot' in props;
 }
+export function destroyRetainedVgPlotChart(chart) {
+    const plot = getPlotInstance(chart.element);
+    plot?.marks?.forEach((mark) => {
+        mark.destroy?.();
+    });
+}
+function getPlotInstance(element) {
+    const plot = element.value;
+    return plot && typeof plot === 'object' ? plot : null;
+}
+function resizeChartElement(element, size) {
+    const plot = getPlotInstance(element);
+    if (!plot?.setAttribute || !plot.render) {
+        return false;
+    }
+    const widthChanged = plot.setAttribute('width', size.width);
+    const heightChanged = plot.setAttribute('height', size.height);
+    if (widthChanged || heightChanged) {
+        void plot.render();
+    }
+    return true;
+}
+async function createSpecChartElement(spec, size, params) {
+    const sizedSpec = {
+        ...spec,
+        width: size.width,
+        height: size.height,
+    };
+    const ast = await parseSpec(sizedSpec);
+    const options = params
+        ? { params: params }
+        : undefined;
+    return (await astToDOM(ast, options)).element;
+}
+function asPlotDomElement(element) {
+    return element;
+}
 /**
  * Renders a Vega-Lite chart using the Mosaic library.
  *
@@ -14,27 +66,81 @@ export function isPlotProps(props) {
  * @param {Spec} props.spec - The Vega-Lite specification for the chart.
  * @returns {React.ReactElement} The rendered chart component.
  */
-export const VgPlotChart = (props) => {
+export const VgPlotChart = memo((props) => {
+    const [containerSize, setContainerSize] = useState(null);
     const containerRef = useRef(null);
+    const localSpecChartRef = useRef(null);
+    const renderVersionRef = useRef(0);
+    const specKey = useMemo(() => (isSpecProps(props) ? JSON.stringify(props.spec) : null), [props]);
+    const handleResize = useCallback((size) => {
+        setContainerSize((prev) => {
+            if (prev && prev.width === size.width && prev.height === size.height) {
+                return prev;
+            }
+            return size;
+        });
+    }, []);
     useEffect(() => {
-        (async () => {
-            if (containerRef.current) {
-                let element;
-                if (isPlotProps(props)) {
-                    element = props.plot;
-                }
-                else if (isSpecProps(props)) {
-                    const ast = await parseSpec(props.spec);
-                    element = (await astToDOM(ast)).element;
-                }
-                else {
-                    element = document.createElement('div');
-                    element.innerHTML = 'Error: Invalid props provided to VgPlotChart';
-                }
-                containerRef.current?.replaceChildren(element);
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        if (isPlotProps(props)) {
+            container.replaceChildren(props.plot);
+            return;
+        }
+        if (!containerSize) {
+            return;
+        }
+        const cached = props.retention?.chart;
+        const current = localSpecChartRef.current &&
+            localSpecChartRef.current.specKey === specKey &&
+            areEquivalentParams(localSpecChartRef.current.params, props.params)
+            ? localSpecChartRef.current
+            : cached &&
+                cached.specKey === specKey &&
+                areEquivalentParams(cached.params, props.params)
+                ? cached
+                : null;
+        if (current) {
+            localSpecChartRef.current = current;
+            container.replaceChildren(asPlotDomElement(current.element));
+            resizeChartElement(current.element, containerSize);
+            return;
+        }
+        const renderVersion = ++renderVersionRef.current;
+        let cancelled = false;
+        void createSpecChartElement(props.spec, containerSize, props.params).then((element) => {
+            if (cancelled ||
+                renderVersion !== renderVersionRef.current ||
+                !containerRef.current) {
+                return;
             }
-        })();
-    }, [props, containerRef]);
-    return _jsx("div", { ref: containerRef });
-};
+            const nextChart = {
+                element,
+                params: props.params,
+                specKey: specKey ?? JSON.stringify(props.spec),
+            };
+            localSpecChartRef.current = nextChart;
+            props.retention?.setChart(nextChart);
+            containerRef.current.replaceChildren(element);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [containerSize, props, specKey]);
+    return (_jsx(ResponsivePlot, { ref: containerRef, onResize: handleResize, className: "h-full w-full" }));
+}, (prevProps, nextProps) => {
+    if (isPlotProps(prevProps) && isPlotProps(nextProps)) {
+        return prevProps.plot === nextProps.plot;
+    }
+    if (isSpecProps(prevProps) && isSpecProps(nextProps)) {
+        const specEqual = JSON.stringify(prevProps.spec) === JSON.stringify(nextProps.spec);
+        const paramsEqual = areEquivalentParams(prevProps.params, nextProps.params);
+        const retentionEqual = prevProps.retention === nextProps.retention;
+        return specEqual && paramsEqual && retentionEqual;
+    }
+    return false;
+});
+VgPlotChart.displayName = 'VgPlotChart';
 //# sourceMappingURL=VgPlotChart.js.map

package/dist/VgPlotChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"VgPlotChart.js","sourceRoot":"","sources":["../src/VgPlotChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAO,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAK,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAM5C,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,MAAM,IAAI,KAAK,CAAC;AACzB,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,MAAM,IAAI,KAAK,CAAC;AACzB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,KAAK,IAAI,EAAE;YACV,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;gBACzB,IAAI,OAAoC,CAAC;gBACzC,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;oBACvB,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC;gBACvB,CAAC;qBAAM,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;oBAC9B,MAAM,GAAG,GAAG,MAAM,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBACxC,OAAO,GAAG,CAAC,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;gBAC1C,CAAC;qBAAM,CAAC;oBACN,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACxC,OAAO,CAAC,SAAS,GAAG,8CAA8C,CAAC;gBACrE,CAAC;gBACD,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;YACjD,CAAC;QACH,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE1B,OAAO,cAAK,GAAG,EAAE,YAAY,GAAI,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import {astToDOM, parseSpec, Spec} from '@uwdata/mosaic-spec';\nimport {FC, useEffect, useRef} from 'react';\n\ntype SpecProps = {spec: Spec};\ntype PlotProps = {plot: HTMLElement | SVGSVGElement};\ntype VgPlotChartProps = SpecProps | PlotProps;\n\nexport function isSpecProps(props: VgPlotChartProps): props is SpecProps {\n  return 'spec' in props;\n}\n\nexport function isPlotProps(props: VgPlotChartProps): props is PlotProps {\n  return 'plot' in props;\n}\n\n/**\n * Renders a Vega-Lite chart using the Mosaic library.\n *\n * @param {VgPlotChartProps} props - The component props.\n * @param {Spec} props.spec - The Vega-Lite specification for the chart.\n * @returns {React.ReactElement} The rendered chart component.\n */\nexport const VgPlotChart: FC<VgPlotChartProps> = (props) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    (async () => {\n      if (containerRef.current) {\n        let element: HTMLElement | SVGSVGElement;\n        if (isPlotProps(props)) {\n          element = props.plot;\n        } else if (isSpecProps(props)) {\n          const ast = await parseSpec(props.spec);\n          element = (await astToDOM(ast)).element;\n        } else {\n          element = document.createElement('div');\n          element.innerHTML = 'Error: Invalid props provided to VgPlotChart';\n        }\n        containerRef.current?.replaceChildren(element);\n      }\n    })();\n  }, [props, containerRef]);\n\n  return <div ref={containerRef} />;\n};\n"]}
+{"version":3,"file":"VgPlotChart.js","sourceRoot":"","sources":["../src/VgPlotChart.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAO,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAEL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAW,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAuC1D,SAAS,mBAAmB,CAC1B,IAA0C,EAC1C,KAA2C;IAE3C,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,EAAE,CAAC;QAChD,OAAO,KAAK,CAAC;IACf,CAAC;IACD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;QAChC,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,MAAM,IAAI,KAAK,CAAC;AACzB,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,MAAM,IAAI,KAAK,CAAC;AACzB,CAAC;AAED,MAAM,UAAU,0BAA0B,CAAC,KAA0B;IACnE,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5C,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5B,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;IACnB,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,eAAe,CAAC,OAAe;IACtC,MAAM,IAAI,GAAI,OAA2C,CAAC,KAAK,CAAC;IAChE,OAAO,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAE,IAAqB,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1E,CAAC;AAED,SAAS,kBAAkB,CAAC,OAAe,EAAE,IAAc;IACzD,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,IAAI,CAAC,IAAI,EAAE,YAAY,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QACxC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/D,IAAI,YAAY,IAAI,aAAa,EAAE,CAAC;QAClC,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;IACrB,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,KAAK,UAAU,sBAAsB,CACnC,IAAU,EACV,IAAc,EACd,MAA4C;IAE5C,MAAM,SAAS,GAAG;QAChB,GAAG,IAAI;QACP,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM,EAAE,IAAI,CAAC,MAAM;KACZ,CAAC;IAEV,MAAM,GAAG,GAAG,MAAM,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,MAAM;QACpB,CAAC,CAAC,EAAC,MAAM,EAAE,MAA4C,EAAC;QACxD,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CAAC,MAAM,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;AAChD,CAAC;AAED,SAAS,gBAAgB,CAAC,OAAe;IACvC,OAAO,OAAyB,CAAC;AACnC,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAyB,IAAI,CACnD,CAAC,KAAK,EAAE,EAAE;IACR,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAC;IAC1E,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,iBAAiB,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IACnE,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACnC,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAC9D,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,IAAc,EAAE,EAAE;QAClD,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE;YACxB,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;gBACrE,OAAO,IAAI,CAAC;YACd,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;YACvB,SAAS,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;QACtC,MAAM,OAAO,GACX,iBAAiB,CAAC,OAAO;YACzB,iBAAiB,CAAC,OAAO,CAAC,OAAO,KAAK,OAAO;YAC7C,mBAAmB,CAAC,iBAAiB,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC;YACjE,CAAC,CAAC,iBAAiB,CAAC,OAAO;YAC3B,CAAC,CAAC,MAAM;gBACJ,MAAM,CAAC,OAAO,KAAK,OAAO;gBAC1B,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC;gBAClD,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,IAAI,CAAC;QAEb,IAAI,OAAO,EAAE,CAAC;YACZ,iBAAiB,CAAC,OAAO,GAAG,OAAO,CAAC;YACpC,SAAS,CAAC,eAAe,CAAC,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;YAC7D,kBAAkB,CAAC,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;YACnD,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,EAAE,gBAAgB,CAAC,OAAO,CAAC;QACjD,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,KAAK,sBAAsB,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CACvE,CAAC,OAAO,EAAE,EAAE;YACV,IACE,SAAS;gBACT,aAAa,KAAK,gBAAgB,CAAC,OAAO;gBAC1C,CAAC,YAAY,CAAC,OAAO,EACrB,CAAC;gBACD,OAAO;YACT,CAAC;YAED,MAAM,SAAS,GAAG;gBAChB,OAAO;gBACP,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;aACjB,CAAC;YAEhC,iBAAiB,CAAC,OAAO,GAAG,SAAS,CAAC;YACtC,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;YACrC,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QAChD,CAAC,CACF,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,KAAC,cAAc,IACb,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAC,eAAe,GACzB,CACH,CAAC;AACJ,CAAC,EACD,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE;IACvB,IAAI,WAAW,CAAC,SAAS,CAAC,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC;QACrD,OAAO,SAAS,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC;IAC3C,CAAC;IACD,IAAI,WAAW,CAAC,SAAS,CAAC,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC;QACrD,MAAM,SAAS,GACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACpE,MAAM,WAAW,GAAG,mBAAmB,CACrC,SAAS,CAAC,MAAM,EAChB,SAAS,CAAC,MAAM,CACjB,CAAC;QACF,MAAM,cAAc,GAAG,SAAS,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,CAAC;QACnE,OAAO,SAAS,IAAI,WAAW,IAAI,cAAc,CAAC;IACpD,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import {Param, Selection} from '@uwdata/mosaic-core';\nimport {astToDOM, parseSpec, Spec} from '@uwdata/mosaic-spec';\nimport {\n  FC,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {PlotSize, ResponsivePlot} from './ResponsivePlot';\n\ntype SpecProps = {\n  spec: Spec;\n  /**\n   * Pre-defined params/selections to inject when rendering the spec.\n   * Keys are param names (without $), values are Param or Selection instances.\n   * This allows multiple independently-rendered specs to share the same\n   * Selection objects for cross-filtering.\n   */\n  params?: Map<string, Param<any> | Selection>;\n  /**\n   * Optional retention adapter for preserving the underlying vgplot\n   * instance across temporary unmount/remount cycles, such as dashboard tab\n   * switches.\n   */\n  retention?: VgPlotChartRetention;\n};\ntype PlotProps = {plot: HTMLElement | SVGSVGElement};\ntype VgPlotChartProps = SpecProps | PlotProps;\ntype PlotDomElement = HTMLElement | SVGSVGElement;\n\nexport type RetainedVgPlotChart = {\n  element: object;\n  params?: Map<string, Param<any> | Selection>;\n  specKey: string;\n};\n\nexport type VgPlotChartRetention = {\n  chart?: RetainedVgPlotChart;\n  setChart: (chart: RetainedVgPlotChart) => void;\n};\n\ntype PlotInstance = {\n  marks?: Array<{destroy?: () => void}>;\n  render?: () => Promise<unknown> | unknown;\n  setAttribute?: (name: string, value: unknown) => boolean;\n};\n\nfunction areEquivalentParams(\n  left?: Map<string, Param<any> | Selection>,\n  right?: Map<string, Param<any> | Selection>,\n) {\n  if (left === right) {\n    return true;\n  }\n  if (!left || !right || left.size !== right.size) {\n    return false;\n  }\n  for (const [key, value] of left) {\n    if (right.get(key) !== value) {\n      return false;\n    }\n  }\n  return true;\n}\n\nexport function isSpecProps(props: VgPlotChartProps): props is SpecProps {\n  return 'spec' in props;\n}\n\nexport function isPlotProps(props: VgPlotChartProps): props is PlotProps {\n  return 'plot' in props;\n}\n\nexport function destroyRetainedVgPlotChart(chart: RetainedVgPlotChart) {\n  const plot = getPlotInstance(chart.element);\n  plot?.marks?.forEach((mark) => {\n    mark.destroy?.();\n  });\n}\n\nfunction getPlotInstance(element: object): PlotInstance | null {\n  const plot = (element as HTMLElement & {value?: unknown}).value;\n  return plot && typeof plot === 'object' ? (plot as PlotInstance) : null;\n}\n\nfunction resizeChartElement(element: object, size: PlotSize): boolean {\n  const plot = getPlotInstance(element);\n  if (!plot?.setAttribute || !plot.render) {\n    return false;\n  }\n\n  const widthChanged = plot.setAttribute('width', size.width);\n  const heightChanged = plot.setAttribute('height', size.height);\n  if (widthChanged || heightChanged) {\n    void plot.render();\n  }\n  return true;\n}\n\nasync function createSpecChartElement(\n  spec: Spec,\n  size: PlotSize,\n  params?: Map<string, Param<any> | Selection>,\n): Promise<PlotDomElement> {\n  const sizedSpec = {\n    ...spec,\n    width: size.width,\n    height: size.height,\n  } as Spec;\n\n  const ast = await parseSpec(sizedSpec);\n  const options = params\n    ? {params: params as unknown as Map<string, Param<any>>}\n    : undefined;\n\n  return (await astToDOM(ast, options)).element;\n}\n\nfunction asPlotDomElement(element: object): PlotDomElement {\n  return element as PlotDomElement;\n}\n\n/**\n * Renders a Vega-Lite chart using the Mosaic library.\n *\n * @param {VgPlotChartProps} props - The component props.\n * @param {Spec} props.spec - The Vega-Lite specification for the chart.\n * @returns {React.ReactElement} The rendered chart component.\n */\nexport const VgPlotChart: FC<VgPlotChartProps> = memo(\n  (props) => {\n    const [containerSize, setContainerSize] = useState<PlotSize | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const localSpecChartRef = useRef<RetainedVgPlotChart | null>(null);\n    const renderVersionRef = useRef(0);\n    const specKey = useMemo(\n      () => (isSpecProps(props) ? JSON.stringify(props.spec) : null),\n      [props],\n    );\n\n    const handleResize = useCallback((size: PlotSize) => {\n      setContainerSize((prev) => {\n        if (prev && prev.width === size.width && prev.height === size.height) {\n          return prev;\n        }\n        return size;\n      });\n    }, []);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) {\n        return;\n      }\n\n      if (isPlotProps(props)) {\n        container.replaceChildren(props.plot);\n        return;\n      }\n\n      if (!containerSize) {\n        return;\n      }\n\n      const cached = props.retention?.chart;\n      const current =\n        localSpecChartRef.current &&\n        localSpecChartRef.current.specKey === specKey &&\n        areEquivalentParams(localSpecChartRef.current.params, props.params)\n          ? localSpecChartRef.current\n          : cached &&\n              cached.specKey === specKey &&\n              areEquivalentParams(cached.params, props.params)\n            ? cached\n            : null;\n\n      if (current) {\n        localSpecChartRef.current = current;\n        container.replaceChildren(asPlotDomElement(current.element));\n        resizeChartElement(current.element, containerSize);\n        return;\n      }\n\n      const renderVersion = ++renderVersionRef.current;\n      let cancelled = false;\n\n      void createSpecChartElement(props.spec, containerSize, props.params).then(\n        (element) => {\n          if (\n            cancelled ||\n            renderVersion !== renderVersionRef.current ||\n            !containerRef.current\n          ) {\n            return;\n          }\n\n          const nextChart = {\n            element,\n            params: props.params,\n            specKey: specKey ?? JSON.stringify(props.spec),\n          } satisfies RetainedVgPlotChart;\n\n          localSpecChartRef.current = nextChart;\n          props.retention?.setChart(nextChart);\n          containerRef.current.replaceChildren(element);\n        },\n      );\n\n      return () => {\n        cancelled = true;\n      };\n    }, [containerSize, props, specKey]);\n\n    return (\n      <ResponsivePlot\n        ref={containerRef}\n        onResize={handleResize}\n        className=\"h-full w-full\"\n      />\n    );\n  },\n  (prevProps, nextProps) => {\n    if (isPlotProps(prevProps) && isPlotProps(nextProps)) {\n      return prevProps.plot === nextProps.plot;\n    }\n    if (isSpecProps(prevProps) && isSpecProps(nextProps)) {\n      const specEqual =\n        JSON.stringify(prevProps.spec) === JSON.stringify(nextProps.spec);\n      const paramsEqual = areEquivalentParams(\n        prevProps.params,\n        nextProps.params,\n      );\n      const retentionEqual = prevProps.retention === nextProps.retention;\n      return specEqual && paramsEqual && retentionEqual;\n    }\n    return false;\n  },\n);\n\nVgPlotChart.displayName = 'VgPlotChart';\n"]}

package/dist/chart-builders/ChartBuilderActions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ChartBuilderActionsProps {
+    className?: string;
+}
+export declare const ChartBuilderActions: React.FC<ChartBuilderActionsProps>;
+//# sourceMappingURL=ChartBuilderActions.d.ts.map

package/dist/chart-builders/ChartBuilderActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderActions.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAOrC,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgDlE,CAAC"}

package/dist/chart-builders/ChartBuilderActions.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn } from '@sqlrooms/ui';
+import { useMemo } from 'react';
+import { useChartBuilderContext, useChartBuilderStore, } from './ChartBuilderContext';
+import { buildChartTypeTitle, canCreateChartFromType } from './chartTypeUtils';
+export const ChartBuilderActions = ({ className, }) => {
+    const { columns, onCreateChart, tableName, templates } = useChartBuilderContext();
+    const selectedTemplateId = useChartBuilderStore((state) => state.selectedTemplateId);
+    const fieldValues = useChartBuilderStore((state) => state.fieldValues);
+    const reset = useChartBuilderStore((state) => state.reset);
+    const selectedTemplate = useMemo(() => templates.find((template) => template.id === selectedTemplateId), [templates, selectedTemplateId]);
+    const canCreate = canCreateChartFromType(selectedTemplate, fieldValues, columns);
+    if (!selectedTemplate)
+        return null;
+    return (_jsxs("div", { className: cn('flex items-center justify-end gap-2', className), children: [_jsx(Button, { variant: "outline", size: "sm", onClick: reset, children: "Back" }), _jsx(Button, { size: "sm", onClick: () => {
+                    if (!selectedTemplate || !canCreate || !selectedTemplateId)
+                        return;
+                    const spec = selectedTemplate.createSpec(tableName, fieldValues);
+                    const title = buildChartTypeTitle(selectedTemplate, fieldValues);
+                    onCreateChart(title, {
+                        chartType: selectedTemplateId,
+                        settings: fieldValues,
+                        vgplot: spec,
+                    });
+                    reset();
+                }, disabled: !canCreate, children: "Create" })] }));
+};
+//# sourceMappingURL=ChartBuilderActions.js.map

package/dist/chart-builders/ChartBuilderActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderActions.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAc,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,mBAAmB,EAAE,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAM7E,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAC,GAClD,sBAAsB,EAAE,CAAC;IAC3B,MAAM,kBAAkB,GAAG,oBAAoB,CAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB,CACpC,CAAC;IACF,MAAM,WAAW,GAAG,oBAAoB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACvE,MAAM,KAAK,GAAG,oBAAoB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE3D,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,kBAAkB,CAAC,EACtE,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAChC,CAAC;IAEF,MAAM,SAAS,GAAG,sBAAsB,CACtC,gBAAgB,EAChB,WAAW,EACX,OAAO,CACR,CAAC;IAEF,IAAI,CAAC,gBAAgB;QAAE,OAAO,IAAI,CAAC;IAEnC,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,SAAS,CAAC,aAClE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,KAAK,qBAEzC,EACT,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,gBAAgB,IAAI,CAAC,SAAS,IAAI,CAAC,kBAAkB;wBAAE,OAAO;oBACnE,MAAM,IAAI,GAAG,gBAAgB,CAAC,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;oBACjE,MAAM,KAAK,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;oBACjE,aAAa,CAAC,KAAK,EAAE;wBACnB,SAAS,EAAE,kBAAkB;wBAC7B,QAAQ,EAAE,WAAW;wBACrB,MAAM,EAAE,IAAI;qBACb,CAAC,CAAC;oBACH,KAAK,EAAE,CAAC;gBACV,CAAC,EACD,QAAQ,EAAE,CAAC,SAAS,uBAGb,IACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Button, cn} from '@sqlrooms/ui';\nimport React, {useMemo} from 'react';\nimport {\n  useChartBuilderContext,\n  useChartBuilderStore,\n} from './ChartBuilderContext';\nimport {buildChartTypeTitle, canCreateChartFromType} from './chartTypeUtils';\n\nexport interface ChartBuilderActionsProps {\n  className?: string;\n}\n\nexport const ChartBuilderActions: React.FC<ChartBuilderActionsProps> = ({\n  className,\n}) => {\n  const {columns, onCreateChart, tableName, templates} =\n    useChartBuilderContext();\n  const selectedTemplateId = useChartBuilderStore(\n    (state) => state.selectedTemplateId,\n  );\n  const fieldValues = useChartBuilderStore((state) => state.fieldValues);\n  const reset = useChartBuilderStore((state) => state.reset);\n\n  const selectedTemplate = useMemo(\n    () => templates.find((template) => template.id === selectedTemplateId),\n    [templates, selectedTemplateId],\n  );\n\n  const canCreate = canCreateChartFromType(\n    selectedTemplate,\n    fieldValues,\n    columns,\n  );\n\n  if (!selectedTemplate) return null;\n\n  return (\n    <div className={cn('flex items-center justify-end gap-2', className)}>\n      <Button variant=\"outline\" size=\"sm\" onClick={reset}>\n        Back\n      </Button>\n      <Button\n        size=\"sm\"\n        onClick={() => {\n          if (!selectedTemplate || !canCreate || !selectedTemplateId) return;\n          const spec = selectedTemplate.createSpec(tableName, fieldValues);\n          const title = buildChartTypeTitle(selectedTemplate, fieldValues);\n          onCreateChart(title, {\n            chartType: selectedTemplateId,\n            settings: fieldValues,\n            vgplot: spec,\n          });\n          reset();\n        }}\n        disabled={!canCreate}\n      >\n        Create\n      </Button>\n    </div>\n  );\n};\n"]}

package/dist/chart-builders/ChartBuilderContent.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { VgPlotChartConfig } from '../chart-types';
+import { type ChartBuilderRootProps } from './ChartBuilderRoot';
+import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
+type StandaloneChartBuilderContentProps = {
+    /** Table name to use in generated specs */
+    tableName: string;
+    /** Available columns for field selectors */
+    columns: ChartBuilderColumn[];
+    /** Callback when a chart spec is created */
+    onCreateChart: (title: string, config: VgPlotChartConfig) => void;
+    /** Preferred shared chart-type customization surface */
+    chartTypes?: ChartTypeDefinition[];
+    /** Backward-compatible UI template customization surface */
+    builders?: ChartBuilderTemplate[];
+    /** Custom class name */
+    className?: string;
+};
+export type ChartBuilderContentProps = Partial<Omit<ChartBuilderRootProps, 'children'>> & Pick<StandaloneChartBuilderContentProps, 'className'>;
+/**
+ * Standalone chart builder UI for creating Mosaic charts from templates.
+ *
+ * Can be used directly with props, or inside `<MosaicChartBuilder>` where it
+ * consumes the surrounding builder context.
+ */
+export declare const ChartBuilderContent: React.FC<ChartBuilderContentProps>;
+export {};
+//# sourceMappingURL=ChartBuilderContent.d.ts.map

package/dist/chart-builders/ChartBuilderContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderContent.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAItD,OAAO,EAAmB,KAAK,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAEhF,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,KAAK,kCAAkC,GAAG;IACxC,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClE,wDAAwD;IACxD,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAClC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,CACxC,GACC,IAAI,CAAC,kCAAkC,EAAE,WAAW,CAAC,CAAC;AAoBxD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAalE,CAAC"}

package/dist/chart-builders/ChartBuilderContent.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@sqlrooms/ui';
+import { ChartBuilderActions } from './ChartBuilderActions';
+import { useChartBuilderContext } from './ChartBuilderContext';
+import { ChartBuilderFields } from './ChartBuilderFields';
+import { ChartBuilderRoot } from './ChartBuilderRoot';
+import { ChartBuilderTypeGrid } from './ChartBuilderTypeGrid';
+function isStandaloneProps(props) {
+    return Boolean(props.tableName && props.columns && props.onCreateChart);
+}
+function ChartBuilderContentBody({ className }) {
+    useChartBuilderContext();
+    return (_jsxs("div", { className: cn('flex flex-col gap-2', className), children: [_jsx(ChartBuilderTypeGrid, {}), _jsx(ChartBuilderFields, {}), _jsx(ChartBuilderActions, {})] }));
+}
+/**
+ * Standalone chart builder UI for creating Mosaic charts from templates.
+ *
+ * Can be used directly with props, or inside `<MosaicChartBuilder>` where it
+ * consumes the surrounding builder context.
+ */
+export const ChartBuilderContent = (props) => {
+    if (isStandaloneProps(props)) {
+        const { className, ...rootProps } = props;
+        return (_jsx(ChartBuilderRoot, { ...rootProps, children: _jsx(ChartBuilderContentBody, { className: className }) }));
+    }
+    return _jsx(ChartBuilderContentBody, { className: props.className });
+};
+//# sourceMappingURL=ChartBuilderContent.js.map

package/dist/chart-builders/ChartBuilderContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderContent.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,sBAAsB,EAAC,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,gBAAgB,EAA6B,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AA2B5D,SAAS,iBAAiB,CACxB,KAA+B;IAE/B,OAAO,OAAO,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC;AAC1E,CAAC;AAED,SAAS,uBAAuB,CAAC,EAAC,SAAS,EAAuB;IAChE,sBAAsB,EAAE,CAAC;IAEzB,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAClD,KAAC,oBAAoB,KAAG,EACxB,KAAC,kBAAkB,KAAG,EACtB,KAAC,mBAAmB,KAAG,IACnB,CACP,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CACrE,KAAK,EACL,EAAE;IACF,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;QAC7B,MAAM,EAAC,SAAS,EAAE,GAAG,SAAS,EAAC,GAAG,KAAK,CAAC;QACxC,OAAO,CACL,KAAC,gBAAgB,OAAK,SAAS,YAC7B,KAAC,uBAAuB,IAAC,SAAS,EAAE,SAAS,GAAI,GAChC,CACpB,CAAC;IACJ,CAAC;IAED,OAAO,KAAC,uBAAuB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;AACjE,CAAC,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport React from 'react';\nimport type {VgPlotChartConfig} from '../chart-types';\nimport {ChartBuilderActions} from './ChartBuilderActions';\nimport {useChartBuilderContext} from './ChartBuilderContext';\nimport {ChartBuilderFields} from './ChartBuilderFields';\nimport {ChartBuilderRoot, type ChartBuilderRootProps} from './ChartBuilderRoot';\nimport {ChartBuilderTypeGrid} from './ChartBuilderTypeGrid';\nimport type {\n  ChartBuilderColumn,\n  ChartBuilderTemplate,\n  ChartTypeDefinition,\n} from './types';\n\ntype StandaloneChartBuilderContentProps = {\n  /** Table name to use in generated specs */\n  tableName: string;\n  /** Available columns for field selectors */\n  columns: ChartBuilderColumn[];\n  /** Callback when a chart spec is created */\n  onCreateChart: (title: string, config: VgPlotChartConfig) => void;\n  /** Preferred shared chart-type customization surface */\n  chartTypes?: ChartTypeDefinition[];\n  /** Backward-compatible UI template customization surface */\n  builders?: ChartBuilderTemplate[];\n  /** Custom class name */\n  className?: string;\n};\n\nexport type ChartBuilderContentProps = Partial<\n  Omit<ChartBuilderRootProps, 'children'>\n> &\n  Pick<StandaloneChartBuilderContentProps, 'className'>;\n\nfunction isStandaloneProps(\n  props: ChartBuilderContentProps,\n): props is StandaloneChartBuilderContentProps {\n  return Boolean(props.tableName && props.columns && props.onCreateChart);\n}\n\nfunction ChartBuilderContentBody({className}: {className?: string}) {\n  useChartBuilderContext();\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      <ChartBuilderTypeGrid />\n      <ChartBuilderFields />\n      <ChartBuilderActions />\n    </div>\n  );\n}\n\n/**\n * Standalone chart builder UI for creating Mosaic charts from templates.\n *\n * Can be used directly with props, or inside `<MosaicChartBuilder>` where it\n * consumes the surrounding builder context.\n */\nexport const ChartBuilderContent: React.FC<ChartBuilderContentProps> = (\n  props,\n) => {\n  if (isStandaloneProps(props)) {\n    const {className, ...rootProps} = props;\n    return (\n      <ChartBuilderRoot {...rootProps}>\n        <ChartBuilderContentBody className={className} />\n      </ChartBuilderRoot>\n    );\n  }\n\n  return <ChartBuilderContentBody className={props.className} />;\n};\n"]}

package/dist/chart-builders/ChartBuilderContext.d.ts

@@ -0,0 +1,16 @@
+import type { VgPlotChartConfig } from '../chart-types';
+import type { ChartBuilderStore, ChartBuilderStoreState } from './createChartBuilderStore';
+import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
+export type ChartBuilderContextValue = {
+    tableName: string;
+    columns: ChartBuilderColumn[];
+    onCreateChart: (title: string, config: VgPlotChartConfig) => void;
+    templates: ChartBuilderTemplate[];
+    availableChartTypes: ChartTypeDefinition[];
+    availableTemplates: ChartBuilderTemplate[];
+    store: ChartBuilderStore;
+};
+export declare const ChartBuilderContext: import("react").Context<ChartBuilderContextValue | null>;
+export declare function useChartBuilderContext(): ChartBuilderContextValue;
+export declare function useChartBuilderStore<T>(selector: (state: ChartBuilderStoreState) => T): T;
+//# sourceMappingURL=ChartBuilderContext.d.ts.map

package/dist/chart-builders/ChartBuilderContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderContext.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AACtD,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClE,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,mBAAmB,EAAE,mBAAmB,EAAE,CAAC;IAC3C,kBAAkB,EAAE,oBAAoB,EAAE,CAAC;IAC3C,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,0DACsB,CAAC;AAEvD,wBAAgB,sBAAsB,IAAI,wBAAwB,CAQjE;AAED,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,CAAC,GAC7C,CAAC,CAGH"}

package/dist/chart-builders/ChartBuilderContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+import { useStore } from 'zustand';
+export const ChartBuilderContext = createContext(null);
+export function useChartBuilderContext() {
+    const ctx = useContext(ChartBuilderContext);
+    if (!ctx) {
+        throw new Error('ChartBuilder compound components must be rendered inside <MosaicChartBuilder>.');
+    }
+    return ctx;
+}
+export function useChartBuilderStore(selector) {
+    const { store } = useChartBuilderContext();
+    return useStore(store, selector);
+}
+//# sourceMappingURL=ChartBuilderContext.js.map

package/dist/chart-builders/ChartBuilderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderContext.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAsBjC,MAAM,CAAC,MAAM,mBAAmB,GAC9B,aAAa,CAAkC,IAAI,CAAC,CAAC;AAEvD,MAAM,UAAU,sBAAsB;IACpC,MAAM,GAAG,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAC5C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,gFAAgF,CACjF,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,QAA8C;IAE9C,MAAM,EAAC,KAAK,EAAC,GAAG,sBAAsB,EAAE,CAAC;IACzC,OAAO,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AACnC,CAAC","sourcesContent":["import {createContext, useContext} from 'react';\nimport {useStore} from 'zustand';\nimport type {VgPlotChartConfig} from '../chart-types';\nimport type {\n  ChartBuilderStore,\n  ChartBuilderStoreState,\n} from './createChartBuilderStore';\nimport type {\n  ChartBuilderColumn,\n  ChartBuilderTemplate,\n  ChartTypeDefinition,\n} from './types';\n\nexport type ChartBuilderContextValue = {\n  tableName: string;\n  columns: ChartBuilderColumn[];\n  onCreateChart: (title: string, config: VgPlotChartConfig) => void;\n  templates: ChartBuilderTemplate[];\n  availableChartTypes: ChartTypeDefinition[];\n  availableTemplates: ChartBuilderTemplate[];\n  store: ChartBuilderStore;\n};\n\nexport const ChartBuilderContext =\n  createContext<ChartBuilderContextValue | null>(null);\n\nexport function useChartBuilderContext(): ChartBuilderContextValue {\n  const ctx = useContext(ChartBuilderContext);\n  if (!ctx) {\n    throw new Error(\n      'ChartBuilder compound components must be rendered inside <MosaicChartBuilder>.',\n    );\n  }\n  return ctx;\n}\n\nexport function useChartBuilderStore<T>(\n  selector: (state: ChartBuilderStoreState) => T,\n): T {\n  const {store} = useChartBuilderContext();\n  return useStore(store, selector);\n}\n"]}

package/dist/chart-builders/ChartBuilderDialog.d.ts

@@ -0,0 +1,48 @@
+import { type ButtonProps } from '@sqlrooms/ui';
+import React from 'react';
+import type { VgPlotChartConfig } from '../chart-types';
+import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
+export type ChartBuilderTriggerProps = ButtonProps;
+export declare const ChartBuilderTrigger: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ChartBuilderDialogContentProps {
+    /** Override dialog title (default "Add Chart") */
+    title?: string;
+    /** Override dialog description */
+    description?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * The dialog content pane that renders the chart-builder steps.
+ * Must be rendered inside `<MosaicChartBuilder>`.
+ */
+export declare const ChartBuilderDialogContent: React.FC<ChartBuilderDialogContentProps>;
+export interface ChartBuilderDialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Table name to use in generated specs */
+    tableName: string;
+    /** Available columns for field selectors */
+    columns: ChartBuilderColumn[];
+    /** Callback when a chart spec is created */
+    onCreateChart: (title: string, config: VgPlotChartConfig) => void;
+    /** Preferred shared chart-type customization surface */
+    chartTypes?: ChartTypeDefinition[];
+    /** Backward-compatible UI template customization surface */
+    builders?: ChartBuilderTemplate[];
+}
+/**
+ * Dialog wrapper for the chart builder (legacy API).
+ *
+ * @deprecated Prefer the compound form:
+ * ```tsx
+ * <MosaicChartBuilder tableName={…} columns={…} onCreateChart={…}>
+ *   <MosaicChartBuilder.Trigger />
+ *   <MosaicChartBuilder.Dialog />
+ * </MosaicChartBuilder>
+ * ```
+ */
+export declare const ChartBuilderDialog: React.FC<ChartBuilderDialogProps>;
+//# sourceMappingURL=ChartBuilderDialog.d.ts.map

package/dist/chart-builders/ChartBuilderDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderDialog.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAGtD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC;AAEnD,eAAO,MAAM,mBAAmB,uFAgB9B,CAAC;AAGH,MAAM,WAAW,8BAA8B;IAC7C,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,8BAA8B,CAgB/B,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,8CAA8C;IAC9C,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClE,wDAAwD;IACxD,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACnC;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAoBhE,CAAC"}

package/dist/chart-builders/ChartBuilderDialog.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@sqlrooms/ui';
+import { Plus } from 'lucide-react';
+import React from 'react';
+import { ChartBuilderContent } from './ChartBuilderContent';
+import { ChartBuilderRoot } from './ChartBuilderRoot';
+export const ChartBuilderTrigger = React.forwardRef(({ children, ...props }, ref) => {
+    return (_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { ref: ref, variant: "outline", size: "sm", ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Add Chart"] })) }) }));
+});
+ChartBuilderTrigger.displayName = 'ChartBuilderTrigger';
+/**
+ * The dialog content pane that renders the chart-builder steps.
+ * Must be rendered inside `<MosaicChartBuilder>`.
+ */
+export const ChartBuilderDialogContent = ({ title = 'Add Chart', description = 'Select a chart type to create.', className, children, }) => {
+    return (_jsxs(DialogContent, { className: className ?? 'sm:max-w-lg', children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), children ?? _jsx(ChartBuilderContent, {})] }));
+};
+/**
+ * Dialog wrapper for the chart builder (legacy API).
+ *
+ * @deprecated Prefer the compound form:
+ * ```tsx
+ * <MosaicChartBuilder tableName={…} columns={…} onCreateChart={…}>
+ *   <MosaicChartBuilder.Trigger />
+ *   <MosaicChartBuilder.Dialog />
+ * </MosaicChartBuilder>
+ * ```
+ */
+export const ChartBuilderDialog = ({ open, onOpenChange, tableName, columns, onCreateChart, chartTypes, builders, }) => (_jsx(ChartBuilderRoot, { open: open, onOpenChange: onOpenChange, tableName: tableName, columns: columns, onCreateChart: onCreateChart, chartTypes: chartTypes, builders: builders, children: _jsx(ChartBuilderDialogContent, {}) }));
+//# sourceMappingURL=ChartBuilderDialog.js.map

package/dist/chart-builders/ChartBuilderDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderDialog.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EAEN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AASpD,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAGjD,CAAC,EAAC,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE;IAC9B,OAAO,CACL,KAAC,aAAa,IAAC,OAAO,kBACpB,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,KAAK,KAAK,YACpD,QAAQ,IAAI,CACX,8BACE,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,GAAG,iBAEhC,CACJ,GACM,GACK,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAWxD;;;GAGG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAElC,CAAC,EACH,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,gCAAgC,EAC9C,SAAS,EACT,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,aAAa,IAAC,SAAS,EAAE,SAAS,IAAI,aAAa,aAClD,MAAC,YAAY,eACX,KAAC,WAAW,cAAE,KAAK,GAAe,EAClC,KAAC,iBAAiB,cAAE,WAAW,GAAqB,IACvC,EACd,QAAQ,IAAI,KAAC,mBAAmB,KAAG,IACtB,CACjB,CAAC;AACJ,CAAC,CAAC;AAmBF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,aAAa,EACb,UAAU,EACV,QAAQ,GACT,EAAE,EAAE,CAAC,CACJ,KAAC,gBAAgB,IACf,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,YAElB,KAAC,yBAAyB,KAAG,GACZ,CACpB,CAAC","sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@sqlrooms/ui';\nimport {Plus} from 'lucide-react';\nimport React from 'react';\nimport type {VgPlotChartConfig} from '../chart-types';\nimport {ChartBuilderContent} from './ChartBuilderContent';\nimport {ChartBuilderRoot} from './ChartBuilderRoot';\nimport type {\n  ChartBuilderColumn,\n  ChartBuilderTemplate,\n  ChartTypeDefinition,\n} from './types';\n\nexport type ChartBuilderTriggerProps = ButtonProps;\n\nexport const ChartBuilderTrigger = React.forwardRef<\n  HTMLButtonElement,\n  ChartBuilderTriggerProps\n>(({children, ...props}, ref) => {\n  return (\n    <DialogTrigger asChild>\n      <Button ref={ref} variant=\"outline\" size=\"sm\" {...props}>\n        {children ?? (\n          <>\n            <Plus className=\"mr-1 h-4 w-4\" />\n            Add Chart\n          </>\n        )}\n      </Button>\n    </DialogTrigger>\n  );\n});\nChartBuilderTrigger.displayName = 'ChartBuilderTrigger';\n\nexport interface ChartBuilderDialogContentProps {\n  /** Override dialog title (default \"Add Chart\") */\n  title?: string;\n  /** Override dialog description */\n  description?: string;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * The dialog content pane that renders the chart-builder steps.\n * Must be rendered inside `<MosaicChartBuilder>`.\n */\nexport const ChartBuilderDialogContent: React.FC<\n  ChartBuilderDialogContentProps\n> = ({\n  title = 'Add Chart',\n  description = 'Select a chart type to create.',\n  className,\n  children,\n}) => {\n  return (\n    <DialogContent className={className ?? 'sm:max-w-lg'}>\n      <DialogHeader>\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      {children ?? <ChartBuilderContent />}\n    </DialogContent>\n  );\n};\n\nexport interface ChartBuilderDialogProps {\n  /** Whether the dialog is open */\n  open: boolean;\n  /** Callback when dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Table name to use in generated specs */\n  tableName: string;\n  /** Available columns for field selectors */\n  columns: ChartBuilderColumn[];\n  /** Callback when a chart spec is created */\n  onCreateChart: (title: string, config: VgPlotChartConfig) => void;\n  /** Preferred shared chart-type customization surface */\n  chartTypes?: ChartTypeDefinition[];\n  /** Backward-compatible UI template customization surface */\n  builders?: ChartBuilderTemplate[];\n}\n\n/**\n * Dialog wrapper for the chart builder (legacy API).\n *\n * @deprecated Prefer the compound form:\n * ```tsx\n * <MosaicChartBuilder tableName={…} columns={…} onCreateChart={…}>\n *   <MosaicChartBuilder.Trigger />\n *   <MosaicChartBuilder.Dialog />\n * </MosaicChartBuilder>\n * ```\n */\nexport const ChartBuilderDialog: React.FC<ChartBuilderDialogProps> = ({\n  open,\n  onOpenChange,\n  tableName,\n  columns,\n  onCreateChart,\n  chartTypes,\n  builders,\n}) => (\n  <ChartBuilderRoot\n    open={open}\n    onOpenChange={onOpenChange}\n    tableName={tableName}\n    columns={columns}\n    onCreateChart={onCreateChart}\n    chartTypes={chartTypes}\n    builders={builders}\n  >\n    <ChartBuilderDialogContent />\n  </ChartBuilderRoot>\n);\n"]}

package/dist/chart-builders/ChartBuilderFields.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ChartBuilderFieldsProps {
+    className?: string;
+}
+export declare const ChartBuilderFields: React.FC<ChartBuilderFieldsProps>;
+//# sourceMappingURL=ChartBuilderFields.d.ts.map

package/dist/chart-builders/ChartBuilderFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderFields.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderFields.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8ChE,CAAC"}

package/dist/chart-builders/ChartBuilderFields.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@sqlrooms/ui';
+import React from 'react';
+import { useChartBuilderContext, useChartBuilderStore, } from './ChartBuilderContext';
+import { FieldSelectorInput } from './FieldSelectorInput';
+import { useChartFieldForm } from './hooks/useChartFieldForm';
+export const ChartBuilderFields = ({ className, }) => {
+    const { columns, templates } = useChartBuilderContext();
+    const selectedTemplateId = useChartBuilderStore((state) => state.selectedTemplateId);
+    const fieldValues = useChartBuilderStore((state) => state.fieldValues);
+    const setFieldValue = useChartBuilderStore((state) => state.setFieldValue);
+    const selectedTemplate = React.useMemo(() => templates.find((template) => template.id === selectedTemplateId), [templates, selectedTemplateId]);
+    const { fields, handleFieldChange } = useChartFieldForm({
+        fields: selectedTemplate?.fields || [],
+        values: fieldValues,
+        onChange: (key, value) => setFieldValue(key, value),
+    });
+    if (!selectedTemplate)
+        return null;
+    if (fields.length === 0) {
+        return (_jsx("p", { className: cn('text-muted-foreground py-2 text-sm', className), children: "This chart type has no configurable fields. A starter spec will be created that you can edit manually." }));
+    }
+    return (_jsx("div", { className: cn('flex flex-col gap-4 py-2', className), children: fields.map((field) => (_jsx(FieldSelectorInput, { field: field, columns: columns, value: fieldValues[field.key], onChange: (value) => handleFieldChange(field.key, value) }, field.key))) }));
+};
+//# sourceMappingURL=ChartBuilderFields.js.map

package/dist/chart-builders/ChartBuilderFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderFields.js","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderFields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAM5D,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAC,OAAO,EAAE,SAAS,EAAC,GAAG,sBAAsB,EAAE,CAAC;IACtD,MAAM,kBAAkB,GAAG,oBAAoB,CAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB,CACpC,CAAC;IACF,MAAM,WAAW,GAAG,oBAAoB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACvE,MAAM,aAAa,GAAG,oBAAoB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CACpC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,kBAAkB,CAAC,EACtE,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAChC,CAAC;IAEF,MAAM,EAAC,MAAM,EAAE,iBAAiB,EAAC,GAAG,iBAAiB,CAAC;QACpD,MAAM,EAAE,gBAAgB,EAAE,MAAM,IAAI,EAAE;QACtC,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,CAAC,GAAW,EAAE,KAAc,EAAE,EAAE,CACxC,aAAa,CAAC,GAAG,EAAE,KAAe,CAAC;KACtC,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB;QAAE,OAAO,IAAI,CAAC;IAEnC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,CACL,YAAG,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,SAAS,CAAC,uHAG7D,CACL,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,YACtD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,kBAAkB,IAEjB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,EAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,IAJnD,KAAK,CAAC,GAAG,CAKd,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {cn} from '@sqlrooms/ui';\nimport React from 'react';\nimport {\n  useChartBuilderContext,\n  useChartBuilderStore,\n} from './ChartBuilderContext';\nimport {FieldSelectorInput} from './FieldSelectorInput';\nimport {useChartFieldForm} from './hooks/useChartFieldForm';\n\nexport interface ChartBuilderFieldsProps {\n  className?: string;\n}\n\nexport const ChartBuilderFields: React.FC<ChartBuilderFieldsProps> = ({\n  className,\n}) => {\n  const {columns, templates} = useChartBuilderContext();\n  const selectedTemplateId = useChartBuilderStore(\n    (state) => state.selectedTemplateId,\n  );\n  const fieldValues = useChartBuilderStore((state) => state.fieldValues);\n  const setFieldValue = useChartBuilderStore((state) => state.setFieldValue);\n\n  const selectedTemplate = React.useMemo(\n    () => templates.find((template) => template.id === selectedTemplateId),\n    [templates, selectedTemplateId],\n  );\n\n  const {fields, handleFieldChange} = useChartFieldForm({\n    fields: selectedTemplate?.fields || [],\n    values: fieldValues,\n    onChange: (key: string, value: unknown) =>\n      setFieldValue(key, value as string),\n  });\n\n  if (!selectedTemplate) return null;\n\n  if (fields.length === 0) {\n    return (\n      <p className={cn('text-muted-foreground py-2 text-sm', className)}>\n        This chart type has no configurable fields. A starter spec will be\n        created that you can edit manually.\n      </p>\n    );\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-4 py-2', className)}>\n      {fields.map((field) => (\n        <FieldSelectorInput\n          key={field.key}\n          field={field}\n          columns={columns}\n          value={fieldValues[field.key]}\n          onChange={(value) => handleFieldChange(field.key, value)}\n        />\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/chart-builders/ChartBuilderRoot.d.ts

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react';
+import type { VgPlotChartConfig } from '../chart-types';
+import type { ChartBuilderColumn, ChartBuilderTemplate, ChartTypeDefinition } from './types';
+export type ChartBuilderRootProps = PropsWithChildren<{
+    /** Table name to use in generated specs */
+    tableName: string;
+    /** Available columns for field selectors */
+    columns: ChartBuilderColumn[];
+    /** Callback when a chart spec is created */
+    onCreateChart: (title: string, metadata: VgPlotChartConfig) => void;
+    /** Preferred shared chart-type customization surface */
+    chartTypes?: ChartTypeDefinition[];
+    /** Backward-compatible UI template customization surface */
+    builders?: ChartBuilderTemplate[];
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}>;
+/**
+ * Compound-component root that provides shared chart-builder state via context
+ * and renders a Radix `Dialog`.
+ *
+ * Supports both controlled (`open`/`onOpenChange`) and uncontrolled usage.
+ */
+export declare const ChartBuilderRoot: React.FC<ChartBuilderRootProps>;
+//# sourceMappingURL=ChartBuilderRoot.d.ts.map

package/dist/chart-builders/ChartBuilderRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilderRoot.d.ts","sourceRoot":"","sources":["../../src/chart-builders/ChartBuilderRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAQtD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;IACpD,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpE,wDAAwD;IACxD,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAClC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyF5D,CAAC"}

package/dist/chart-builders/ChartBuilderRoot.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog } from '@sqlrooms/ui';
+import { useCallback, useEffect, useMemo, useState, } from 'react';
+import { createChartBuilderTemplates, createDefaultChartBuilders, } from './builders';
+import { ChartBuilderContext } from './ChartBuilderContext';
+import { createChartBuilderStore } from './createChartBuilderStore';
+import { getAvailableChartTypes } from './chartTypeUtils';
+/**
+ * Compound-component root that provides shared chart-builder state via context
+ * and renders a Radix `Dialog`.
+ *
+ * Supports both controlled (`open`/`onOpenChange`) and uncontrolled usage.
+ */
+export const ChartBuilderRoot = ({ tableName, columns, onCreateChart, chartTypes, builders, open, onOpenChange, children, }) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const [store] = useState(() => createChartBuilderStore());
+    const isControlled = open !== undefined;
+    const resolvedOpen = isControlled ? open : uncontrolledOpen;
+    const resolvedOnOpenChange = useMemo(() => (isControlled ? (onOpenChange ?? (() => { })) : setUncontrolledOpen), [isControlled, onOpenChange]);
+    const resolvedTemplates = useMemo(() => {
+        if (chartTypes) {
+            return createChartBuilderTemplates(chartTypes);
+        }
+        if (builders) {
+            return builders;
+        }
+        return createDefaultChartBuilders();
+    }, [builders, chartTypes]);
+    const availableChartTypes = useMemo(() => getAvailableChartTypes(resolvedTemplates, columns), [columns, resolvedTemplates]);
+    const availableTemplates = useMemo(() => resolvedTemplates.filter((template) => availableChartTypes.some((chartType) => chartType.id === template.id)), [availableChartTypes, resolvedTemplates]);
+    useEffect(() => {
+        const { selectedTemplateId, reset } = store.getState();
+        if (selectedTemplateId &&
+            !availableTemplates.some((template) => template.id === selectedTemplateId)) {
+            reset();
+        }
+    }, [availableTemplates, store]);
+    const handleCreateChart = useCallback((title, config) => {
+        onCreateChart(title, config);
+        resolvedOnOpenChange(false);
+    }, [onCreateChart, resolvedOnOpenChange]);
+    const ctx = useMemo(() => ({
+        tableName,
+        columns,
+        onCreateChart: handleCreateChart,
+        templates: resolvedTemplates,
+        availableChartTypes,
+        availableTemplates,
+        store,
+    }), [
+        availableChartTypes,
+        availableTemplates,
+        columns,
+        handleCreateChart,
+        resolvedTemplates,
+        store,
+        tableName,
+    ]);
+    return (_jsx(ChartBuilderContext.Provider, { value: ctx, children: _jsx(Dialog, { open: resolvedOpen, onOpenChange: resolvedOnOpenChange, children: children }) }));
+};
+//# sourceMappingURL=ChartBuilderRoot.js.map