@cfasim-ui/charts 0.4.5 → 0.4.6

package/dist/BarChart/BarChart.d.ts

@@ -1,4 +1,4 @@
-import { ChartData } from '../_shared/index.js';
+import { ChartData, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps } from '../_shared/index.js';
 export type BarChartData = ChartData;
 export interface BarSeries {
     /** Bar values; one entry per category. `y` is accepted as an alias. */
@@ -9,7 +9,7 @@ export interface BarSeries {
     /** Label shown in the inline legend. */
     legend?: string;
 }
-type __VLS_Props = {
+interface BarChartProps extends ChartCommonProps {
     /** Single-series values. Equivalent to `y`. */
     data?: BarChartData;
     /** Single-series values (alias for `data`). */
@@ -25,11 +25,6 @@ type __VLS_Props = {
     orientation?: "vertical" | "horizontal";
     /** "grouped" (default) places series side-by-side; "stacked" stacks them. */
     layout?: "grouped" | "stacked";
-    width?: number;
-    height?: number;
-    title?: string;
-    xLabel?: string;
-    yLabel?: string;
     /** Force the value axis to start at this value or lower (default 0). */
     valueMin?: number;
     /**
@@ -39,11 +34,6 @@ type __VLS_Props = {
     valueTicks?: number | number[];
     /** Formatter for value-axis tick labels. */
     valueTickFormat?: (value: number) => string;
-    /**
-     * Formatter for numeric values shown in the default tooltip. Receives
-     * the raw value. Defaults to the same tick formatter used for axes.
-     */
-    tooltipValueFormat?: (value: number) => string;
     /** Formatter for category-axis labels. Receives the resolved category string. */
     categoryFormat?: (label: string, index: number) => string;
     /**
@@ -56,49 +46,17 @@ type __VLS_Props = {
      * Default 1.
      */
     groupGap?: number;
-    debounce?: number;
-    menu?: boolean | string;
     valueGrid?: boolean;
-    /**
-     * Custom per-index data passed to the tooltip slot. Accepts a plain
-     * array or any `ArrayLike` (e.g. a typed array column from a
-     * `ModelOutput`).
-     */
-    tooltipData?: ArrayLike<unknown>;
-    /** Tooltip activation mode. */
-    tooltipTrigger?: "hover" | "click";
-    /** Boundary for tooltip flip/clamp. Default "chart". */
-    tooltipClamp?: "none" | "chart" | "window";
-    /** Custom CSV content (string or function). When omitted, generated from the bars. */
-    csv?: string | (() => string);
-    /** Filename (without extension) for downloaded SVG, PNG, CSV. */
-    filename?: string;
-    /** Show a plain text link below the chart to download the CSV. */
-    downloadLink?: boolean | string;
-};
+}
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
-        tooltip?(props: {
-            index: number;
+        tooltip?(props: ChartTooltipBaseProps & {
             category: string;
-            values: {
-                value: number;
-                color: string;
-                seriesIndex: number;
-            }[];
-            data: unknown;
         }): unknown;
     }> & {
-        tooltip?(props: {
-            index: number;
+        tooltip?(props: ChartTooltipBaseProps & {
             category: string;
-            values: {
-                value: number;
-                color: string;
-                seriesIndex: number;
-            }[];
-            data: unknown;
         }): unknown;
     };
     refs: {
@@ -109,14 +67,10 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    hover: (payload: {
-        index: number;
-    } | null) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onHover?: ((payload: {
-        index: number;
-    } | null) => any) | undefined;
+declare const __VLS_component: import('vue').DefineComponent<BarChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    hover: (payload: ChartHoverPayload) => any;
+}, string, import('vue').PublicProps, Readonly<BarChartProps> & Readonly<{
+    onHover?: ((payload: ChartHoverPayload) => any) | undefined;
 }>, {
     menu: boolean | string;
     tooltipClamp: "none" | "chart" | "window";

package/dist/LineChart/LineChart.d.ts

@@ -1,4 +1,4 @@
-import { ChartData } from '../_shared/index.js';
+import { ChartData, ChartCommonProps, ChartHoverPayload, ChartTooltipBaseProps } from '../_shared/index.js';
 /**
  * Numeric input accepted by the chart. `number[]` and any standard numeric
  * typed array are supported, so the output of
@@ -64,7 +64,7 @@ export interface AreaSection {
     /** Label placement: "below" (default) renders below chart, "inline" renders in legend row, false hides label */
     legend?: "inline" | "below" | false;
 }
-type __VLS_Props = {
+interface LineChartProps extends ChartCommonProps {
     /** Y-values. Equivalent to `data`. If both are set, `y` wins. */
     y?: LineChartData;
     /** Y-values (alternative name for `y`). */
@@ -78,12 +78,7 @@ type __VLS_Props = {
     series?: Series[];
     areas?: Area[];
     areaSections?: AreaSection[];
-    width?: number;
-    height?: number;
     lineOpacity?: number;
-    title?: string;
-    xLabel?: string;
-    yLabel?: string;
     yMin?: number;
     /**
      * Offset applied to index-based x values (e.g. `xMin: 10` starts the
@@ -108,73 +103,24 @@ type __VLS_Props = {
     xTickFormat?: (value: number, index: number) => string;
     /** Formatter for y-axis tick labels. Receives the raw numeric value. */
     yTickFormat?: (value: number) => string;
-    /**
-     * Formatter for numeric values shown in the default tooltip. Receives
-     * the raw value. Defaults to the same tick formatter used for axes.
-     */
-    tooltipValueFormat?: (value: number) => string;
     /**
      * @deprecated Use `xTickFormat` (e.g. `(_, i) => labels[i]`) together
      * with `xTicks` for explicit control. Still honored for tooltip x-labels
      * and as a default x-tick formatter when `xTickFormat` is not provided.
      */
     xLabels?: string[];
-    debounce?: number;
-    menu?: boolean | string;
     xGrid?: boolean;
     yGrid?: boolean;
-    /**
-     * Custom per-index data passed to the tooltip slot. Accepts a plain
-     * array or any `ArrayLike` (e.g. a typed array column from a
-     * `ModelOutput`).
-     */
-    tooltipData?: ArrayLike<unknown>;
-    /** Tooltip activation mode. Default: 'hover' */
-    tooltipTrigger?: "hover" | "click";
-    /**
-     * Boundary for tooltip flip/clamp. `"none"` always places to the right of
-     * the pointer with no clamping. `"chart"` (default) uses the chart
-     * container's bounding box. `"window"` uses the viewport.
-     */
-    tooltipClamp?: "none" | "chart" | "window";
-    /**
-     * Custom CSV content for the Download CSV menu item. Can be a raw CSV
-     * string or a function returning one. When omitted, CSV is generated
-     * from the chart series.
-     */
-    csv?: string | (() => string);
-    /** Filename (without extension) for downloaded SVG, PNG and CSV files. */
-    filename?: string;
-    /**
-     * Show a plain text link below the chart to download the CSV data.
-     * Pass `true` for the default label ("Download data (CSV)") or a string
-     * to customize the link text.
-     */
-    downloadLink?: boolean | string;
-};
+}
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
-        tooltip?(props: {
-            index: number;
+        tooltip?(props: ChartTooltipBaseProps & {
             xLabel?: string;
-            values: {
-                value: number;
-                color: string;
-                seriesIndex: number;
-            }[];
-            data: unknown;
         }): unknown;
     }> & {
-        tooltip?(props: {
-            index: number;
+        tooltip?(props: ChartTooltipBaseProps & {
             xLabel?: string;
-            values: {
-                value: number;
-                color: string;
-                seriesIndex: number;
-            }[];
-            data: unknown;
         }): unknown;
     };
     refs: {
@@ -185,14 +131,10 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    hover: (payload: {
-        index: number;
-    } | null) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onHover?: ((payload: {
-        index: number;
-    } | null) => any) | undefined;
+declare const __VLS_component: import('vue').DefineComponent<LineChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    hover: (payload: ChartHoverPayload) => any;
+}, string, import('vue').PublicProps, Readonly<LineChartProps> & Readonly<{
+    onHover?: ((payload: ChartHoverPayload) => any) | undefined;
 }>, {
     menu: boolean | string;
     lineOpacity: number;

package/dist/_shared/ChartAnnotations.d.ts

@@ -0,0 +1,25 @@
+import { ChartAnnotation } from './annotations.js';
+import { ChartBounds } from './useChartPadding.js';
+type __VLS_Props = {
+    annotations?: readonly ChartAnnotation[];
+    /**
+     * Project an annotation's `(x, y)` (data coordinates) to pixel
+     * coordinates on the chart canvas. Return `null` to drop the
+     * annotation (e.g. an off-projection point on a map).
+     */
+    project: (x: number, y: number) => {
+        x: number;
+        y: number;
+    } | null;
+    /**
+     * Pixel-space bounds of the plot area. Required for rule annotations
+     * so the line can span the full plot. When omitted, rule annotations
+     * are skipped.
+     */
+    bounds?: ChartBounds;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    annotations: readonly ChartAnnotation[];
+    bounds: ChartBounds;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/_shared/annotations.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Shared annotation API for charts. Each chart projects an annotation's
+ * data-space `(x, y)` to pixels with its own scales and hands the resolved
+ * positions to `ChartAnnotations.vue` for rendering.
+ */
+export interface ChartAnnotation {
+    /**
+     * Anchor x position in data coordinates. For `LineChart` this is the
+     * same x-space as the series data; for `BarChart` it's the category
+     * index (fractional values land between categories).
+     */
+    x: number;
+    /** Anchor y position in data coordinates (value axis). */
+    y: number;
+    /**
+     * Label text.
+     * - `\n` produces a line break.
+     * - `**bold**` renders a run in bold.
+     * - `_italic_` renders a run in italic.
+     * - The two compose: `**_both_**`.
+     */
+    text: string;
+    /**
+     * Pixel offset from the anchor to the label's reference position.
+     * Positive `x` = right, positive `y` = down (screen-space).
+     */
+    offset: {
+        x: number;
+        y: number;
+    };
+    /** Text and pointer-line color. Defaults to `currentColor`. */
+    color?: string;
+    /** Font size in pixels. Default: 13 (matches axis labels). */
+    fontSize?: number;
+    /**
+     * Base font weight applied to all non-bold runs. Default: `"normal"`
+     * (matches axis labels). `**bold**` runs in `text` always render at
+     * weight 700.
+     */
+    fontWeight?: string | number;
+    /**
+     * Halo (stroke) color drawn behind the text so the label stays legible
+     * against busy chart elements. Defaults to `var(--color-bg-0, #fff)` so
+     * it matches the page background out of the box.
+     */
+    haloColor?: string;
+    /** Halo stroke width in pixels. Default: 3. */
+    haloWidth?: number;
+    /**
+     * SVG text-anchor for the label. When omitted, derived from the sign of
+     * `offset.x`: positive → `start`, negative → `end`, zero → `middle`.
+     */
+    textAnchor?: "start" | "middle" | "end";
+    /** Pointer- or rule-line color override. Defaults to `color`. */
+    lineColor?: string;
+    /** Pointer- or rule-line width in pixels. Default: 1. */
+    lineWidth?: number;
+    /**
+     * SVG `stroke-dasharray` for the pointer or rule line. Accepts the
+     * raw string form (`"4 4"`), a single number (uniform dash/gap), or
+     * an array of numbers. Default: solid line.
+     */
+    lineDash?: string | number | readonly number[];
+    /**
+     * Connector shape between anchor and label.
+     * - `"curved"` (default): quarter-arc emerging vertically from the
+     *   anchor, landing horizontally at the label.
+     * - `"straight"`: single straight line from anchor to label.
+     * - `"none"`: no connector — just the text label is rendered.
+     * - `"ruleX"`: vertical rule at the annotation's `x` value spanning
+     *   the full plot height. Label still positions via `offset`.
+     * - `"ruleY"`: horizontal rule at the annotation's `y` value spanning
+     *   the full plot width.
+     * - `"ruleUp"`: vertical rule from the plot's bottom edge up to the
+     *   anchor.
+     * - `"ruleDown"`: vertical rule from the plot's top edge down to the
+     *   anchor.
+     * - `"ruleFromLeft"`: horizontal rule from the plot's left edge in to
+     *   the anchor.
+     * - `"ruleFromRight"`: horizontal rule from the plot's right edge in
+     *   to the anchor.
+     *
+     * When the offset is purely horizontal or vertical (and `pointer`
+     * isn't `"none"` or a rule), the pointer is always straight regardless
+     * of this setting. Rule pointers ignore `arrow`.
+     */
+    pointer?: "curved" | "straight" | "none" | "ruleX" | "ruleY" | "ruleUp" | "ruleDown" | "ruleFromLeft" | "ruleFromRight";
+    /**
+     * Whether to draw a small filled triangle at the anchor end of the
+     * connector line. Defaults to `true`. Set to `false` for an
+     * uncapped line. Ignored for rule pointers.
+     */
+    arrow?: boolean;
+}

package/dist/_shared/chartProps.d.ts

@@ -0,0 +1,67 @@
+import { ChartAnnotation } from './annotations.js';
+import { ChartPadding } from './useChartPadding.js';
+/**
+ * Props common to every cartesian chart component. Anything specific to
+ * the chart type (series shape, layout, value-axis details) lives on the
+ * component itself.
+ */
+export interface ChartCommonProps {
+    width?: number;
+    height?: number;
+    title?: string;
+    xLabel?: string;
+    yLabel?: string;
+    debounce?: number;
+    menu?: boolean | string;
+    /**
+     * Custom per-index data forwarded to the `tooltip` slot. Accepts a
+     * plain array or any `ArrayLike` (e.g. a typed-array column).
+     */
+    tooltipData?: ArrayLike<unknown>;
+    /** Tooltip activation mode. */
+    tooltipTrigger?: "hover" | "click";
+    /** Boundary for tooltip flip/clamp. Default: `"chart"`. */
+    tooltipClamp?: "none" | "chart" | "window";
+    /**
+     * Formatter for numeric values shown in the default tooltip. Receives
+     * the raw value. When omitted, the chart falls back to its value-axis
+     * tick formatter, then `formatTick`.
+     */
+    tooltipValueFormat?: (value: number) => string;
+    /**
+     * Custom CSV content (string or function) for the Download CSV menu
+     * item. When omitted, CSV is generated from the chart's series.
+     */
+    csv?: string | (() => string);
+    /** Filename (without extension) for SVG, PNG, and CSV downloads. */
+    filename?: string;
+    /**
+     * Show a plain text link below the chart to download CSV. Pass `true`
+     * for the default label or a string to customize.
+     */
+    downloadLink?: boolean | string;
+    /** Annotations rendered as the top layer of the chart. */
+    annotations?: readonly ChartAnnotation[];
+    /**
+     * Extra padding (pixels) added around the plot. Number = same on all
+     * sides; object = per-side. Useful for giving annotations or other
+     * overlays room to extend past the data area without clipping.
+     */
+    chartPadding?: ChartPadding;
+}
+/** Payload emitted on `hover` from a cartesian chart. */
+export type ChartHoverPayload = {
+    index: number;
+} | null;
+/** One per-series value passed to the tooltip slot. */
+export interface ChartTooltipValue {
+    value: number;
+    color: string;
+    seriesIndex: number;
+}
+/** Properties common to every chart's tooltip slot. */
+export interface ChartTooltipBaseProps {
+    index: number;
+    values: ChartTooltipValue[];
+    data: unknown;
+}

package/dist/_shared/index.d.ts

@@ -1,7 +1,11 @@
 export { snap, niceStep, intervalValues, formatTick, type ChartData, } from './axes.js';
 export { computeTickValues, type TickValueOptions } from './computeTicks.js';
 export { useChartSize, type ChartSizeOptions } from './useChartSize.js';
-export { useChartPadding, INLINE_LEGEND_HEIGHT, type ChartPaddingOptions, } from './useChartPadding.js';
+export { useChartPadding, INLINE_LEGEND_HEIGHT, type ChartPaddingOptions, type ChartPadding, type ChartBounds, } from './useChartPadding.js';
 export { useChartTooltip, type ChartTooltipOptions, } from './useChartTooltip.js';
 export { useChartMenu, type ChartMenuOptions } from './useChartMenu.js';
 export { seriesToCsv, categoricalToCsv, type CsvSeries } from './seriesCsv.js';
+export { default as ChartAnnotations } from './ChartAnnotations';
+export type { ChartAnnotation } from './annotations.js';
+export { useChartFoundation, makeTooltipValueFormatter, type ChartFoundationOptions, } from './useChartFoundation.js';
+export type { ChartCommonProps, ChartHoverPayload, ChartTooltipValue, ChartTooltipBaseProps, } from './chartProps.js';

package/dist/_shared/useChartFoundation.d.ts

@@ -0,0 +1,82 @@
+import { ChartPadding } from './useChartPadding.js';
+import { TooltipClamp } from '../tooltip-position.js';
+export interface ChartFoundationOptions {
+    width: () => number | undefined;
+    height: () => number | undefined;
+    title: () => string | undefined;
+    xLabel: () => string | undefined;
+    yLabel: () => string | undefined;
+    debounce: () => number | undefined;
+    menu: () => boolean | string | undefined;
+    tooltipTrigger: () => "hover" | "click" | undefined;
+    tooltipClamp: () => TooltipClamp | undefined;
+    filename: () => string | undefined;
+    downloadLink: () => boolean | string | undefined;
+    chartPadding: () => ChartPadding | undefined;
+    hasInlineLegend: () => boolean;
+    hasTooltipSlot: () => boolean;
+    getCsv: () => string;
+    pointerToIndex: (clientX: number, clientY: number) => number | null;
+    onHover: (payload: {
+        index: number;
+    } | null) => void;
+}
+/**
+ * Wires up the shared chart plumbing — size measurement, padding, tooltip
+ * interaction, and the menu/download wiring — that every cartesian chart
+ * needs. Returns the reactive values and refs each chart's template
+ * consumes.
+ */
+export declare function useChartFoundation(opts: ChartFoundationOptions): {
+    containerRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    svgRef: import('vue').Ref<SVGSVGElement | null, SVGSVGElement | null>;
+    width: import('vue').ComputedRef<number>;
+    height: import('vue').ComputedRef<number>;
+    padding: import('vue').ComputedRef<{
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }>;
+    legendY: import('vue').ComputedRef<number>;
+    innerW: import('vue').ComputedRef<number>;
+    innerH: import('vue').ComputedRef<number>;
+    bounds: import('vue').ComputedRef<{
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    }>;
+    hoverIndex: import('vue').Ref<number | null, number | null>;
+    tooltipRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    tooltipPos: import('vue').Ref<{
+        left: number;
+        top: number;
+    } | null, {
+        left: number;
+        top: number;
+    } | {
+        left: number;
+        top: number;
+    } | null>;
+    tooltipHandlers: {
+        mousemove: (event: MouseEvent) => void;
+        mouseleave: () => void;
+        click: (event: MouseEvent) => void;
+        touchstart: (event: TouchEvent) => void;
+        touchmove: (event: TouchEvent) => void;
+        touchend: () => void;
+    };
+    menuItems: import('vue').ComputedRef<import('../ChartMenu/ChartMenu').ChartMenuItem[]>;
+    downloadLinkText: import('vue').ComputedRef<string | null>;
+    csvHref: import('vue').ComputedRef<string | null>;
+    menuFilename: () => string;
+};
+/**
+ * Build a tooltip value formatter that prefers `tooltipValueFormat`,
+ * falls back to the chart's axis tick formatter, and finally to
+ * `formatTick`. Both chart components use the same precedence order.
+ */
+export declare function makeTooltipValueFormatter(tooltipFormat: () => ((v: number) => string) | undefined, axisFormat: () => ((v: number) => string) | undefined): (v: number) => string;

package/dist/_shared/useChartPadding.d.ts

@@ -1,5 +1,17 @@
 /** Vertical space reserved at the top of the chart for inline legend swatches. */
 export declare const INLINE_LEGEND_HEIGHT = 20;
+/**
+ * Extra space added around the chart's standard layout. A number applies
+ * the same amount to all four sides; an object lets you pad sides
+ * independently (e.g. `{ top: 24 }` to make room for annotations above
+ * the plot). Named to match Altair's `padding` (outer view padding).
+ */
+export type ChartPadding = number | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
 export interface ChartPaddingOptions {
     title: () => string | undefined;
     xLabel: () => string | undefined;
@@ -7,12 +19,16 @@ export interface ChartPaddingOptions {
     hasInlineLegend: () => boolean;
     width: () => number;
     height: () => number;
+    /** Extra pixels added on top of the standard axis spacing. */
+    extraPadding?: () => ChartPadding | undefined;
 }
 /**
  * Computes the standard chart padding (top/right/bottom/left) and the
  * derived inner plotting region (innerW, innerH). Shared by LineChart
  * and BarChart so the axis label spacing and inline legend strip stay
- * consistent.
+ * consistent. `extraPadding` adds extra space outside the plot — useful
+ * for annotations that need to extend past the data area without
+ * clipping.
  */
 export declare function useChartPadding(opts: ChartPaddingOptions): {
     padding: import('vue').ComputedRef<{
@@ -21,6 +37,23 @@ export declare function useChartPadding(opts: ChartPaddingOptions): {
         bottom: number;
         left: number;
     }>;
+    legendY: import('vue').ComputedRef<number>;
     innerW: import('vue').ComputedRef<number>;
     innerH: import('vue').ComputedRef<number>;
+    bounds: import('vue').ComputedRef<{
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    }>;
+};
+export type ChartBounds = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
 };

package/dist/index.css

@@ -1,2 +1,2 @@
-.chart-menu-trigger-area[data-v-b3c563e8]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-b3c563e8]{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;opacity:0;border-radius:.25em;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.chart-menu-button[data-state=open][data-v-b3c563e8]{opacity:1}.chart-menu-button[data-v-b3c563e8]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.chart-menu-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);border-radius:.25em;min-width:140px;padding:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.chart-menu-item{font-size:var(--font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.25em;outline:none;align-items:center;padding:.375em .5em;display:flex}.chart-menu-item[data-highlighted]{background:var(--color-primary);color:#fff}.line-chart-wrapper[data-v-083d1c2f]{width:100%;position:relative}.line-chart-wrapper[data-v-083d1c2f]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-083d1c2f]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-083d1c2f]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-083d1c2f]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-083d1c2f]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-wrapper[data-v-4f604d9f]{width:100%;position:relative}.bar-chart-wrapper[data-v-4f604d9f]:hover .chart-menu-button{opacity:1}.bar-chart-tooltip-label[data-v-4f604d9f]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-4f604d9f]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-4f604d9f]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-4f604d9f]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-f0f75b22]{--choropleth-legend-bg:var(--color-bg-0,#fff);width:100%;position:relative}.choropleth-wrapper svg[data-v-f0f75b22]{width:100%;height:auto;display:block}.choropleth-wrapper.pannable svg[data-v-f0f75b22]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-f0f75b22]:active{cursor:grabbing}.choropleth-wrapper[data-v-f0f75b22]:hover .chart-menu-button{opacity:1}.state-path[data-v-f0f75b22]{cursor:pointer}.choropleth-reset[data-v-f0f75b22]{font:inherit;color:var(--color-text-secondary,#555);background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);cursor:pointer;border-radius:4px;padding:4px 10px;font-size:12px;position:absolute;bottom:8px;left:8px;box-shadow:0 1px 2px #0000000d}.choropleth-reset[data-v-f0f75b22]:hover{background:var(--color-bg-1,#f8f9fa);color:var(--color-text,#212529)}.choropleth-header[data-v-f0f75b22]{background:var(--choropleth-legend-bg);color:currentColor;border-radius:4px;flex-direction:column;align-items:center;gap:10px;width:fit-content;margin:0 auto;padding:8px 14px;display:flex}.choropleth-title[data-v-f0f75b22]{font-size:14px;font-weight:600;line-height:1.2}.choropleth-legend[data-v-f0f75b22]{align-items:center;gap:14px;font-size:13px;line-height:1.2;display:flex}.choropleth-legend-title[data-v-f0f75b22]{font-weight:600}.choropleth-legend-item[data-v-f0f75b22]{align-items:center;gap:6px;display:inline-flex}.choropleth-legend-swatch[data-v-f0f75b22]{border-radius:3px;width:12px;height:12px;display:inline-block}.choropleth-legend-continuous[data-v-f0f75b22]{flex-direction:column;width:160px;display:flex}.choropleth-legend-gradient[data-v-f0f75b22]{border-radius:2px;height:12px}.choropleth-legend-ticks[data-v-f0f75b22]{opacity:.7;height:14px;margin-top:4px;font-size:11px;position:relative}.choropleth-legend-ticks>span[data-v-f0f75b22]{position:absolute;transform:translate(-50%)}.chart-tooltip-anchor[data-v-44377f70]{pointer-events:none;width:1px;height:1px;position:absolute}.chart-tooltip-content{z-index:100;background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);font-size:var(--font-size-sm,.875rem);pointer-events:none;border-radius:.375em;padding:.5em .75em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.TableOuter[data-v-d5c290dc]{display:inline-block;position:relative}.TableOuter.full-width[data-v-d5c290dc]{display:block}.TableWrapper[data-v-d5c290dc]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-d5c290dc]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border);table-layout:fixed;margin:0;display:table}.Table.full-width[data-v-d5c290dc]{width:100%}.Table tr[data-v-d5c290dc],.Table th[data-v-d5c290dc],.Table td[data-v-d5c290dc]{background:0 0;border:none}.Table th[data-v-d5c290dc],.Table td[data-v-d5c290dc]{white-space:nowrap;text-align:left;padding:.75em 1.25em}.Table th[data-v-d5c290dc]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-d5c290dc]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-d5c290dc]{border-bottom:none}.TableOuter[data-v-d5c290dc] .chart-menu-trigger-area{top:4px;right:4px}.TableOuter[data-v-d5c290dc] .chart-menu-button{opacity:1}.TableOuter.has-menu .Table thead th[data-v-d5c290dc]:last-child{padding-right:2.5em}
+.chart-menu-trigger-area[data-v-b3c563e8]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-b3c563e8]{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;opacity:0;border-radius:.25em;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.chart-menu-button[data-state=open][data-v-b3c563e8]{opacity:1}.chart-menu-button[data-v-b3c563e8]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.chart-menu-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);border-radius:.25em;min-width:140px;padding:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.chart-menu-item{font-size:var(--font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.25em;outline:none;align-items:center;padding:.375em .5em;display:flex}.chart-menu-item[data-highlighted]{background:var(--color-primary);color:#fff}.line-chart-wrapper[data-v-ebe2731e]{width:100%;position:relative}.line-chart-wrapper[data-v-ebe2731e]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-ebe2731e]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-ebe2731e]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-ebe2731e]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-ebe2731e]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-wrapper[data-v-690ebb3c]{width:100%;position:relative}.bar-chart-wrapper[data-v-690ebb3c]:hover .chart-menu-button{opacity:1}.bar-chart-tooltip-label[data-v-690ebb3c]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-690ebb3c]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-690ebb3c]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-690ebb3c]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-f0f75b22]{--choropleth-legend-bg:var(--color-bg-0,#fff);width:100%;position:relative}.choropleth-wrapper svg[data-v-f0f75b22]{width:100%;height:auto;display:block}.choropleth-wrapper.pannable svg[data-v-f0f75b22]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-f0f75b22]:active{cursor:grabbing}.choropleth-wrapper[data-v-f0f75b22]:hover .chart-menu-button{opacity:1}.state-path[data-v-f0f75b22]{cursor:pointer}.choropleth-reset[data-v-f0f75b22]{font:inherit;color:var(--color-text-secondary,#555);background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);cursor:pointer;border-radius:4px;padding:4px 10px;font-size:12px;position:absolute;bottom:8px;left:8px;box-shadow:0 1px 2px #0000000d}.choropleth-reset[data-v-f0f75b22]:hover{background:var(--color-bg-1,#f8f9fa);color:var(--color-text,#212529)}.choropleth-header[data-v-f0f75b22]{background:var(--choropleth-legend-bg);color:currentColor;border-radius:4px;flex-direction:column;align-items:center;gap:10px;width:fit-content;margin:0 auto;padding:8px 14px;display:flex}.choropleth-title[data-v-f0f75b22]{font-size:14px;font-weight:600;line-height:1.2}.choropleth-legend[data-v-f0f75b22]{align-items:center;gap:14px;font-size:13px;line-height:1.2;display:flex}.choropleth-legend-title[data-v-f0f75b22]{font-weight:600}.choropleth-legend-item[data-v-f0f75b22]{align-items:center;gap:6px;display:inline-flex}.choropleth-legend-swatch[data-v-f0f75b22]{border-radius:3px;width:12px;height:12px;display:inline-block}.choropleth-legend-continuous[data-v-f0f75b22]{flex-direction:column;width:160px;display:flex}.choropleth-legend-gradient[data-v-f0f75b22]{border-radius:2px;height:12px}.choropleth-legend-ticks[data-v-f0f75b22]{opacity:.7;height:14px;margin-top:4px;font-size:11px;position:relative}.choropleth-legend-ticks>span[data-v-f0f75b22]{position:absolute;transform:translate(-50%)}.chart-tooltip-anchor[data-v-44377f70]{pointer-events:none;width:1px;height:1px;position:absolute}.chart-tooltip-content{z-index:100;background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);font-size:var(--font-size-sm,.875rem);pointer-events:none;border-radius:.375em;padding:.5em .75em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.TableOuter[data-v-d5c290dc]{display:inline-block;position:relative}.TableOuter.full-width[data-v-d5c290dc]{display:block}.TableWrapper[data-v-d5c290dc]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-d5c290dc]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border);table-layout:fixed;margin:0;display:table}.Table.full-width[data-v-d5c290dc]{width:100%}.Table tr[data-v-d5c290dc],.Table th[data-v-d5c290dc],.Table td[data-v-d5c290dc]{background:0 0;border:none}.Table th[data-v-d5c290dc],.Table td[data-v-d5c290dc]{white-space:nowrap;text-align:left;padding:.75em 1.25em}.Table th[data-v-d5c290dc]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-d5c290dc]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-d5c290dc]{border-bottom:none}.TableOuter[data-v-d5c290dc] .chart-menu-trigger-area{top:4px;right:4px}.TableOuter[data-v-d5c290dc] .chart-menu-button{opacity:1}.TableOuter.has-menu .Table thead th[data-v-d5c290dc]:last-child{padding-right:2.5em}
 /*$vite$:1*/

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export { default as ChoroplethMap, type GeoType, type StateData, type Choropleth
 export { fipsToHsa, hsaNames } from './ChoroplethMap/hsaMapping.js';
 export { default as ChartTooltip } from './ChartTooltip/ChartTooltip';
 export { default as DataTable, type TableData, type TableRecord, type ColumnAlign, type ColumnConfig, type ColumnWidth, } from './DataTable/DataTable';
+export type { ChartAnnotation } from './_shared/annotations.js';