@contractspec/lib.ui-kit-web 3.7.6 → 3.9.2

package/dist/browser/ui/usecases/UseCaseCard.js

@@ -7,23 +7,23 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/button.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+var buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-hidden transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
   variants: {
     variant: {
       default: "bg-primary text-primary-foreground hover:bg-primary/90",
-      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
       secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
       ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
       link: "text-primary underline-offset-4 hover:underline"
     },
     size: {
       default: "h-9 px-4 py-2 has-[>svg]:px-3",
-      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
       lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
       icon: "size-9"
     }
@@ -56,8 +56,8 @@ function Button({
   }, undefined, false, undefined, this);
 }
 // ui/stack.tsx
-import { cva as cva2 } from "class-variance-authority";
 import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { cva as cva2 } from "class-variance-authority";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 var vStackVariants = cva2("flex flex-col", {
   variants: {
@@ -233,11 +233,11 @@ function UseCaseCard({
     gap: "sm",
     children: [
       /* @__PURE__ */ jsxDEV3("div", {
-        className: "text-lg font-semibold",
+        className: "font-semibold text-lg",
         children: title
       }, undefined, false, undefined, this),
       summary && /* @__PURE__ */ jsxDEV3("div", {
-        className: "text-muted-foreground text-base",
+        className: "text-base text-muted-foreground",
         children: summary
       }, undefined, false, undefined, this),
       ctaHref && /* @__PURE__ */ jsxDEV3(HStack, {

package/dist/browser/ui/usecases/UserStoryCard.js

@@ -7,8 +7,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ui/stack.tsx
-import { cva } from "class-variance-authority";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { cva } from "class-variance-authority";
 import { jsxDEV } from "react/jsx-dev-runtime";
 var vStackVariants = cva("flex flex-col", {
   variants: {
@@ -182,11 +182,11 @@ function UserStoryCard({
     gap: "sm",
     children: [
       /* @__PURE__ */ jsxDEV2("div", {
-        className: "text-lg font-semibold",
+        className: "font-semibold text-lg",
         children: title
       }, undefined, false, undefined, this),
       body && /* @__PURE__ */ jsxDEV2("div", {
-        className: "text-muted-foreground text-base",
+        className: "text-base text-muted-foreground",
         children: body
       }, undefined, false, undefined, this),
       outcome && /* @__PURE__ */ jsxDEV2("div", {

package/dist/browser/ui/visualization/Visualization.js

@@ -0,0 +1,447 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/map/MapBase.tsx
+import * as React from "react";
+import Map, {
+  NavigationControl,
+  ScaleControl
+} from "react-map-gl/maplibre";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+var DEFAULT_STYLE = "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
+function MapBase(props) {
+  const {
+    initialViewState = { longitude: 2.3522, latitude: 48.8566, zoom: 5 },
+    styleUrl = DEFAULT_STYLE,
+    style,
+    showControls = true,
+    showCssLink = true,
+    onMapRef,
+    children
+  } = props;
+  const mapRef = React.useRef(null);
+  React.useEffect(() => {
+    onMapRef?.(mapRef.current);
+  }, [mapRef.current]);
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      ...style || {}
+    },
+    children: [
+      showCssLink && /* @__PURE__ */ jsxDEV("link", {
+        href: "https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css",
+        rel: "stylesheet"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Map, {
+        ref: mapRef,
+        mapLib: import("maplibre-gl"),
+        initialViewState,
+        style: { width: "100%", height: "100%" },
+        mapStyle: styleUrl,
+        maplibreLogo: false,
+        children: [
+          showControls && /* @__PURE__ */ jsxDEV(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxDEV(ScaleControl, {
+                position: "bottom-left"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(NavigationControl, {
+                position: "bottom-left"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          children
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// ui/map/MapGeoJsonOverlay.tsx
+import { Layer, Source } from "react-map-gl/maplibre";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function MapGeoJsonOverlay(props) {
+  const {
+    id = "geojson-overlay",
+    data,
+    fillColor = "#2563eb",
+    fillOpacity = 0.25,
+    lineColor = "#1e40af",
+    lineWidth = 1.5,
+    lineOpacity = 0.8
+  } = props;
+  const fillLayer = {
+    id: `${id}-fill`,
+    type: "fill",
+    paint: {
+      "fill-color": fillColor,
+      "fill-opacity": fillOpacity
+    }
+  };
+  const outlineLayer = {
+    id: `${id}-outline`,
+    type: "line",
+    paint: {
+      "line-color": lineColor,
+      "line-width": lineWidth,
+      "line-opacity": lineOpacity
+    }
+  };
+  return /* @__PURE__ */ jsxDEV2(Source, {
+    id,
+    type: "geojson",
+    data,
+    children: [
+      /* @__PURE__ */ jsxDEV2(Layer, {
+        ...fillLayer
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2(Layer, {
+        ...outlineLayer
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// ui/map/MapMarkers.tsx
+import { Marker } from "react-map-gl/maplibre";
+import { jsxDEV as jsxDEV3, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+"use client";
+function MapMarkers({ points }) {
+  return /* @__PURE__ */ jsxDEV3(Fragment2, {
+    children: points.map((p) => /* @__PURE__ */ jsxDEV3(Marker, {
+      longitude: p.lng,
+      latitude: p.lat,
+      anchor: "bottom",
+      children: /* @__PURE__ */ jsxDEV3("button", {
+        role: p.onClick ? "button" : undefined,
+        tabIndex: p.onClick ? 0 : -1,
+        "aria-label": p.ariaLabel || "marker",
+        onClick: p.onClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            p.onClick?.();
+          }
+        },
+        style: {
+          width: p.size ?? 14,
+          height: p.size ?? 14,
+          background: p.color ?? "#2563eb",
+          border: "2px solid white",
+          borderRadius: 9999,
+          boxShadow: "0 1px 3px rgba(0,0,0,0.35)",
+          cursor: p.onClick ? "pointer" : "default"
+        }
+      }, undefined, false, undefined, this)
+    }, p.id, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+
+// ui/visualization/Visualization.support.tsx
+import {
+  formatVisualizationValue
+} from "@contractspec/lib.presentation-runtime-core";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as echarts from "echarts/core";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function MetricVisualization({
+  className,
+  model
+}) {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: cn("space-y-2", className),
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "text-muted-foreground text-sm",
+        children: model.metric?.label ?? model.title
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "font-semibold text-3xl",
+        children: formatVisualizationValue(model.metric?.value, model.metric?.format)
+      }, undefined, false, undefined, this),
+      model.metric?.comparisonValue != null ? /* @__PURE__ */ jsxDEV4("div", {
+        className: "text-muted-foreground text-sm",
+        children: [
+          "Comparison:",
+          " ",
+          formatVisualizationValue(model.metric.comparisonValue, model.metric.format)
+        ]
+      }, undefined, true, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV4(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function TableAlternative({
+  model
+}) {
+  if (!model.table.columns.length || !model.table.rows.length)
+    return null;
+  return /* @__PURE__ */ jsxDEV4("details", {
+    className: "rounded-md border p-3 text-sm",
+    children: [
+      /* @__PURE__ */ jsxDEV4("summary", {
+        className: "cursor-pointer font-medium",
+        children: "Data summary"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "mt-3 overflow-x-auto",
+        children: /* @__PURE__ */ jsxDEV4("table", {
+          className: "w-full text-left",
+          children: [
+            /* @__PURE__ */ jsxDEV4("thead", {
+              children: /* @__PURE__ */ jsxDEV4("tr", {
+                children: model.table.columns.map((column) => /* @__PURE__ */ jsxDEV4("th", {
+                  className: "px-2 py-1 font-medium",
+                  children: column.label
+                }, column.key, false, undefined, this))
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV4("tbody", {
+              children: model.table.rows.slice(0, 8).map((row, index) => /* @__PURE__ */ jsxDEV4("tr", {
+                children: model.table.columns.map((column) => /* @__PURE__ */ jsxDEV4("td", {
+                  className: "px-2 py-1",
+                  children: String(row[column.key] ?? "—")
+                }, column.key, false, undefined, this))
+              }, `summary-row-${index}`, false, undefined, this))
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function FallbackVisualization({
+  className,
+  model,
+  reason
+}) {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: cn("space-y-3", className),
+    children: [
+      /* @__PURE__ */ jsxDEV4("p", {
+        className: "text-muted-foreground text-sm",
+        children: reason
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function shouldRenderEChart(model) {
+  if (model.kind === "metric")
+    return false;
+  if (model.kind === "geo" && model.geo?.mode === "slippy-map")
+    return false;
+  if (model.kind === "geo" && model.geo?.geoJson?.type === "url")
+    return false;
+  return true;
+}
+function registerGeoMap(model) {
+  if (model.kind !== "geo" || model.geo?.geoJson?.type !== "inline")
+    return;
+  registerInlineMap(model.geo.geoJson);
+}
+function registerInlineMap(geoJson) {
+  if (geoJson.type !== "inline")
+    return;
+  echarts.registerMap("contractspec-visualization-geo", geoJson.data);
+}
+
+// ui/visually-hidden.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+var srOnlyStyle = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  width: "1px",
+  whiteSpace: "nowrap"
+};
+function VisuallyHidden({
+  as = "span",
+  style,
+  children,
+  ref,
+  ...props
+}) {
+  const Comp = as;
+  return /* @__PURE__ */ jsxDEV5(Comp, {
+    ref,
+    style: { ...srOnlyStyle, ...style },
+    ...props,
+    children
+  }, undefined, false, undefined, this);
+}
+// ui/visualization/Visualization.tsx
+import {
+  buildVisualizationEChartsOption
+} from "@contractspec/lib.presentation-runtime-core";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import {
+  BarChart,
+  FunnelChart,
+  HeatmapChart,
+  LineChart,
+  MapChart,
+  PieChart,
+  ScatterChart
+} from "echarts/charts";
+import {
+  AriaComponent,
+  GeoComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  VisualMapComponent
+} from "echarts/components";
+import * as echarts2 from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import * as React2 from "react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+"use client";
+echarts2.use([
+  AriaComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  VisualMapComponent,
+  GeoComponent,
+  CanvasRenderer,
+  LineChart,
+  BarChart,
+  PieChart,
+  ScatterChart,
+  HeatmapChart,
+  FunnelChart,
+  MapChart
+]);
+function canRenderCanvasCharts() {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const canvas = document.createElement("canvas");
+  return typeof canvas.getContext === "function" && canvas.getContext("2d") !== null;
+}
+function Visualization({
+  model,
+  className,
+  height = 280,
+  onDataPointPress
+}) {
+  const chartRef = React2.useRef(null);
+  const option = React2.useMemo(() => buildVisualizationEChartsOption(model), [model]);
+  React2.useEffect(() => {
+    if (!shouldRenderEChart(model) || !chartRef.current || !canRenderCanvasCharts()) {
+      return;
+    }
+    registerGeoMap(model);
+    const chart = echarts2.init(chartRef.current, undefined, {
+      renderer: "canvas"
+    });
+    chart.setOption(option);
+    if (onDataPointPress) {
+      chart.on("click", onDataPointPress);
+    }
+    const observer = new ResizeObserver(() => chart.resize());
+    observer.observe(chartRef.current);
+    return () => {
+      observer.disconnect();
+      if (onDataPointPress) {
+        chart.off("click", onDataPointPress);
+      }
+      chart.dispose();
+    };
+  }, [model, onDataPointPress, option]);
+  if (model.kind === "metric") {
+    return /* @__PURE__ */ jsxDEV6(MetricVisualization, {
+      className,
+      model
+    }, undefined, false, undefined, this);
+  }
+  if (model.kind === "geo" && model.geo?.mode === "slippy-map") {
+    return /* @__PURE__ */ jsxDEV6(MapVisualization, {
+      className,
+      height,
+      model
+    }, undefined, false, undefined, this);
+  }
+  if (model.kind === "geo" && model.geo?.geoJson?.type === "url") {
+    return /* @__PURE__ */ jsxDEV6(FallbackVisualization, {
+      className,
+      model,
+      reason: "Geo URL sources currently fall back to the summary table."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: cn2("space-y-3", className),
+    children: [
+      /* @__PURE__ */ jsxDEV6(VisuallyHidden, {
+        children: model.summary
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        ref: chartRef,
+        "aria-label": model.summary,
+        className: "w-full rounded-md",
+        style: { height }
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function MapVisualization({
+  className,
+  height,
+  model
+}) {
+  const markers = model.series.flatMap((series) => series.points.filter((point) => point.latitude != null && point.longitude != null).map((point) => ({
+    id: point.id,
+    lat: point.latitude,
+    lng: point.longitude,
+    ariaLabel: point.name
+  })));
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: cn2("space-y-3", className),
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        style: { height },
+        children: /* @__PURE__ */ jsxDEV6(MapBase, {
+          children: [
+            markers.length > 0 ? /* @__PURE__ */ jsxDEV6(MapMarkers, {
+              points: markers
+            }, undefined, false, undefined, this) : null,
+            model.geo?.geoJson?.type === "inline" ? /* @__PURE__ */ jsxDEV6(MapGeoJsonOverlay, {
+              data: model.geo.geoJson.data
+            }, undefined, false, undefined, this) : null
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  Visualization
+};

package/dist/browser/ui/visualization/Visualization.support.js

@@ -0,0 +1,128 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/visualization/Visualization.support.tsx
+import {
+  formatVisualizationValue
+} from "@contractspec/lib.presentation-runtime-core";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as echarts from "echarts/core";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function MetricVisualization({
+  className,
+  model
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: cn("space-y-2", className),
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "text-muted-foreground text-sm",
+        children: model.metric?.label ?? model.title
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "font-semibold text-3xl",
+        children: formatVisualizationValue(model.metric?.value, model.metric?.format)
+      }, undefined, false, undefined, this),
+      model.metric?.comparisonValue != null ? /* @__PURE__ */ jsxDEV("div", {
+        className: "text-muted-foreground text-sm",
+        children: [
+          "Comparison:",
+          " ",
+          formatVisualizationValue(model.metric.comparisonValue, model.metric.format)
+        ]
+      }, undefined, true, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function TableAlternative({
+  model
+}) {
+  if (!model.table.columns.length || !model.table.rows.length)
+    return null;
+  return /* @__PURE__ */ jsxDEV("details", {
+    className: "rounded-md border p-3 text-sm",
+    children: [
+      /* @__PURE__ */ jsxDEV("summary", {
+        className: "cursor-pointer font-medium",
+        children: "Data summary"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "mt-3 overflow-x-auto",
+        children: /* @__PURE__ */ jsxDEV("table", {
+          className: "w-full text-left",
+          children: [
+            /* @__PURE__ */ jsxDEV("thead", {
+              children: /* @__PURE__ */ jsxDEV("tr", {
+                children: model.table.columns.map((column) => /* @__PURE__ */ jsxDEV("th", {
+                  className: "px-2 py-1 font-medium",
+                  children: column.label
+                }, column.key, false, undefined, this))
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("tbody", {
+              children: model.table.rows.slice(0, 8).map((row, index) => /* @__PURE__ */ jsxDEV("tr", {
+                children: model.table.columns.map((column) => /* @__PURE__ */ jsxDEV("td", {
+                  className: "px-2 py-1",
+                  children: String(row[column.key] ?? "—")
+                }, column.key, false, undefined, this))
+              }, `summary-row-${index}`, false, undefined, this))
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function FallbackVisualization({
+  className,
+  model,
+  reason
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: cn("space-y-3", className),
+    children: [
+      /* @__PURE__ */ jsxDEV("p", {
+        className: "text-muted-foreground text-sm",
+        children: reason
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(TableAlternative, {
+        model
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function shouldRenderEChart(model) {
+  if (model.kind === "metric")
+    return false;
+  if (model.kind === "geo" && model.geo?.mode === "slippy-map")
+    return false;
+  if (model.kind === "geo" && model.geo?.geoJson?.type === "url")
+    return false;
+  return true;
+}
+function registerGeoMap(model) {
+  if (model.kind !== "geo" || model.geo?.geoJson?.type !== "inline")
+    return;
+  registerInlineMap(model.geo.geoJson);
+}
+function registerInlineMap(geoJson) {
+  if (geoJson.type !== "inline")
+    return;
+  echarts.registerMap("contractspec-visualization-geo", geoJson.data);
+}
+export {
+  shouldRenderEChart,
+  registerGeoMap,
+  TableAlternative,
+  MetricVisualization,
+  FallbackVisualization
+};

package/dist/browser/ui/visualization/index.js

@@ -0,0 +1,10 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+export {
+  Visualization
+};

package/dist/ui/accordion.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
 declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
 declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };