@mcp-b/viz-components 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MCP-B contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/chart-B-xXO_Qw.js

@@ -0,0 +1,293 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { bin, extent } from "d3-array";
+import { scaleBand, scaleLinear } from "d3-scale";
+import { arc, area, line, pie } from "d3-shape";
+import { css, html, nothing, svg } from "lit";
+import { property } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+//#region src/components/chart/chart.styles.ts
+var chart_styles_default = css`
+  :host {
+    display: block;
+    min-inline-size: 0;
+    color: var(--sigvelo-color-text);
+  }
+  svg {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    min-block-size: 13rem;
+    overflow: visible;
+  }
+  .axis {
+    stroke: var(--sigvelo-color-neutral-border);
+    stroke-width: 1;
+  }
+  .grid {
+    stroke: var(--sigvelo-color-neutral-border-muted);
+    stroke-width: 1;
+  }
+  .tick-label,
+  .muted {
+    fill: var(--sigvelo-color-text-muted);
+    font: var(--sigvelo-text-xs) / var(--sigvelo-text-xs-leading) var(--sigvelo-font-sans);
+  }
+  .mark,
+  .line,
+  .area {
+    --sigvelo-viz-mark-color: var(--sigvelo-color-viz-series-1);
+  }
+  .mark {
+    fill: var(--sigvelo-viz-mark-color);
+    stroke: var(--sigvelo-color-surface);
+    stroke-width: 2;
+  }
+  .series-2 {
+    --sigvelo-viz-mark-color: var(--sigvelo-color-viz-series-2);
+  }
+  .series-3 {
+    --sigvelo-viz-mark-color: var(--sigvelo-color-viz-series-3);
+  }
+  .series-4 {
+    --sigvelo-viz-mark-color: var(--sigvelo-color-viz-series-4);
+  }
+  .series-5 {
+    --sigvelo-viz-mark-color: var(--sigvelo-color-viz-series-5);
+  }
+  .series-6 {
+    --sigvelo-viz-mark-color: var(--sigvelo-color-viz-series-6);
+  }
+  .line {
+    fill: none;
+    stroke: var(--sigvelo-viz-mark-color);
+    stroke-width: 3;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .area {
+    fill: color-mix(in srgb, var(--sigvelo-viz-mark-color) 20%, transparent);
+    stroke: var(--sigvelo-viz-mark-color);
+    stroke-width: 2;
+  }
+  .empty {
+    color: var(--sigvelo-color-text-muted);
+    padding: var(--sigvelo-spacing-4);
+  }
+  @media (forced-colors: active) {
+    .axis,
+    .grid,
+    .mark,
+    .line,
+    .area {
+      stroke: CanvasText;
+    }
+    .mark,
+    .area {
+      fill: Canvas;
+    }
+    .tick-label,
+    .muted {
+      fill: CanvasText;
+    }
+  }
+`;
+//#endregion
+//#region src/components/chart/chart.ts
+const WIDTH = 640;
+const HEIGHT = 300;
+const PADDING = {
+	top: 20,
+	right: 24,
+	bottom: 44,
+	left: 48
+};
+function numberAt(row, key) {
+	const value = row[key];
+	if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+	if (typeof value !== "string" || value.trim() === "") return void 0;
+	const parsed = Number(value);
+	return Number.isFinite(parsed) ? parsed : void 0;
+}
+function labelAt(row, key, index) {
+	const value = row[key];
+	return value === null || value === void 0 ? String(index + 1) : String(value);
+}
+function paddedExtent(values, includeZero) {
+	const [low = 0, high = 1] = extent(values);
+	const span = high - low;
+	const padding = span === 0 ? Math.max(1, Math.abs(low) * .1) : span * .1;
+	const lower = low - padding;
+	const upper = high + padding;
+	return includeZero ? [Math.min(0, lower), Math.max(0, upper)] : [lower, upper];
+}
+/**
+* <sigvelo-chart>
+*
+* @summary Renders a bounded set of data-driven SVG chart types using D3 scales and shapes.
+* @tag sigvelo-chart
+* @status stable
+* @since 1.0
+*/
+var SigveloChart = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "bar";
+		this.data = [];
+		this.xField = "label";
+		this.yField = "value";
+		this.labelField = "label";
+		this.label = "Chart";
+	}
+	static {
+		this.styles = [hostStyles, chart_styles_default];
+	}
+	#plot() {
+		const innerWidth = WIDTH - PADDING.left - PADDING.right;
+		const innerHeight = HEIGHT - PADDING.top - PADDING.bottom;
+		const numeric = this.data.map((row, index) => ({
+			row,
+			index,
+			value: numberAt(row, this.yField)
+		})).filter((entry) => entry.value !== void 0);
+		if (numeric.length === 0) return nothing;
+		const includeZero = this.type === "bar";
+		const y = scaleLinear().domain(paddedExtent(numeric.map((entry) => entry.value), includeZero)).nice().range([innerHeight, 0]);
+		const labels = numeric.map((entry) => labelAt(entry.row, this.xField, entry.index));
+		const xBand = scaleBand().domain(numeric.map((_, index) => index)).range([0, innerWidth]).padding(.2);
+		const baseline = includeZero ? y(0) : innerHeight;
+		const yTicks = y.ticks(4);
+		const labelStride = Math.max(1, Math.ceil(labels.length / 8));
+		const axes = svg`
+      ${yTicks.map((tick) => {
+			const tickY = PADDING.top + y(tick);
+			return svg`<line
+            class="grid"
+            x1=${PADDING.left}
+            y1=${tickY}
+            x2=${PADDING.left + innerWidth}
+            y2=${tickY}
+          ></line>
+          <text class="tick-label" x=${PADDING.left - 8} y=${tickY + 4} text-anchor="end"
+            >${tick}</text
+          >`;
+		})}
+      <line
+        class="axis"
+        x1=${PADDING.left}
+        y1=${PADDING.top + innerHeight}
+        x2=${PADDING.left + innerWidth}
+        y2=${PADDING.top + innerHeight}
+      ></line>
+      <line
+        class="axis"
+        x1=${PADDING.left}
+        y1=${PADDING.top}
+        x2=${PADDING.left}
+        y2=${PADDING.top + innerHeight}
+      ></line>
+    `;
+		const categoryTicks = svg`${labels.map((label, index) => {
+			if (index % labelStride !== 0 && index !== labels.length - 1) return nothing;
+			return svg`<text
+        class="tick-label"
+        x=${PADDING.left + (xBand(index) ?? 0) + xBand.bandwidth() / 2}
+        y=${PADDING.top + innerHeight + 22}
+        text-anchor="middle"
+        >${label}</text
+      >`;
+		})}`;
+		if (this.type === "donut") {
+			if (numeric.reduce((sum, entry) => sum + Math.max(0, entry.value), 0) <= 0) return nothing;
+			const shape = arc().innerRadius(64).outerRadius(112);
+			return svg`<g transform="translate(${WIDTH / 2}, ${HEIGHT / 2})">
+        ${pie().value((entry) => Math.max(0, entry.value))(numeric).map((slice, index) => svg`<path
+                class="mark series-${index % 6 + 1}"
+                d=${shape(slice) ?? ""}
+                ><title>
+                  ${labelAt(slice.data.row, this.labelField, slice.data.index)}: ${slice.data.value}
+                </title></path
+              >`)}
+      </g>`;
+		}
+		if (this.type === "histogram") {
+			const values = numeric.map((entry) => entry.value);
+			const bins = bin().thresholds(Math.min(12, Math.max(1, Math.ceil(Math.sqrt(values.length)))))(values);
+			const countScale = scaleLinear().domain([0, Math.max(1, ...bins.map((bucket) => bucket.length))]).range([innerHeight, 0]);
+			const bucketWidth = innerWidth / Math.max(1, bins.length);
+			return svg`${axes}<g transform="translate(${PADDING.left}, ${PADDING.top})"
+          >${bins.map((bucket, index) => svg`<rect
+                class="mark"
+                x=${index * bucketWidth + 1}
+                y=${countScale(bucket.length)}
+                width=${Math.max(1, bucketWidth - 2)}
+                height=${innerHeight - countScale(bucket.length)}
+                ><title>${bucket.x0 ?? 0}–${bucket.x1 ?? 0}: ${bucket.length}</title></rect
+              >`)}</g
+        >`;
+		}
+		if (this.type === "bar") return svg`${axes}${categoryTicks}<g transform="translate(${PADDING.left}, ${PADDING.top})"
+          >${numeric.map((entry, index) => {
+			const x = xBand(index) ?? 0;
+			const yValue = y(entry.value);
+			return svg`<rect
+              class="mark"
+              x=${x}
+              y=${Math.min(yValue, baseline)}
+              width=${xBand.bandwidth()}
+              height=${Math.abs(baseline - yValue)}
+              ><title>
+                ${labelAt(entry.row, this.labelField, entry.index)}: ${entry.value}
+              </title></rect
+            >`;
+		})}</g
+        >`;
+		const points = numeric.map((entry, index) => ({
+			...entry,
+			x: (xBand(index) ?? 0) + xBand.bandwidth() / 2
+		}));
+		if (this.type === "scatter") return svg`${axes}${categoryTicks}<g transform="translate(${PADDING.left}, ${PADDING.top})"
+          >${points.map((point) => svg`<circle
+                class="mark"
+                cx=${point.x}
+                cy=${y(point.value)}
+                r="5"
+                ><title>
+                  ${labelAt(point.row, this.labelField, point.index)}: ${point.value}
+                </title></circle
+              >`)}</g
+        >`;
+		const path = line().x((point) => point.x).y((point) => y(point.value))(points) ?? "";
+		if (this.type === "area") {
+			const areaPath = area().x((point) => point.x).y0(baseline).y1((point) => y(point.value))(points) ?? "";
+			return svg`${axes}${categoryTicks}<g transform="translate(${PADDING.left}, ${PADDING.top})"
+          ><path class="area" d=${areaPath}></path></g>`;
+		}
+		return svg`${axes}${categoryTicks}<g transform="translate(${PADDING.left}, ${PADDING.top})"
+        ><path class="line" d=${path}></path>${points.map((point) => svg`<circle
+              class="mark"
+              cx=${point.x}
+              cy=${y(point.value)}
+              r="5"
+              ><title>
+                ${labelAt(point.row, this.labelField, point.index)}: ${point.value}
+              </title></circle
+            >`)}</g
+      >`;
+	}
+	render() {
+		const plot = this.#plot();
+		return plot === nothing ? html`<p class="empty" part="empty">No numeric data available.</p>` : html`<svg viewBox="0 0 ${WIDTH} ${HEIGHT}" role="img" aria-label=${this.label} part="chart">
+          ${plot}
+        </svg>`;
+	}
+};
+__decorate([property({ reflect: true })], SigveloChart.prototype, "type", void 0);
+__decorate([property({ attribute: false })], SigveloChart.prototype, "data", void 0);
+__decorate([property({ attribute: "x-field" })], SigveloChart.prototype, "xField", void 0);
+__decorate([property({ attribute: "y-field" })], SigveloChart.prototype, "yField", void 0);
+__decorate([property({ attribute: "label-field" })], SigveloChart.prototype, "labelField", void 0);
+__decorate([property()], SigveloChart.prototype, "label", void 0);
+customElements.define("sigvelo-chart", SigveloChart);
+//#endregion
+export { SigveloChart as t };

package/dist/components/chart/chart.d.ts

@@ -0,0 +1,32 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/chart/chart.d.ts
+type ChartType = "bar" | "line" | "area" | "scatter" | "donut" | "histogram";
+type ChartDatum = Readonly<Record<string, string | number | boolean | null>>;
+/**
+ * <sigvelo-chart>
+ *
+ * @summary Renders a bounded set of data-driven SVG chart types using D3 scales and shapes.
+ * @tag sigvelo-chart
+ * @status stable
+ * @since 1.0
+ */
+declare class SigveloChart extends SigveloElement {
+  #private;
+  static styles: CSSResultGroup;
+  type: ChartType;
+  data: readonly ChartDatum[];
+  xField: string;
+  yField: string;
+  labelField: string;
+  label: string;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-chart": SigveloChart;
+  }
+}
+//#endregion
+export { ChartDatum, ChartType, SigveloChart };

package/dist/components/chart/chart.js

@@ -0,0 +1,2 @@
+import { t as SigveloChart } from "../../chart-B-xXO_Qw.js";
+export { SigveloChart };

package/dist/components/chart-card/chart-card.d.ts

@@ -0,0 +1,22 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/chart-card/chart-card.d.ts
+/**
+ * @tag sigvelo-chart-card
+ * @summary A titled card composition for a chart or thematic map.
+ * @slot - A chart or distribution component.
+ */
+declare class SigveloChartCard extends SigveloElement {
+  static styles: CSSResultGroup;
+  heading: string;
+  description: string;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-chart-card": SigveloChartCard;
+  }
+}
+//#endregion
+export { SigveloChartCard };

package/dist/components/chart-card/chart-card.js

@@ -0,0 +1,49 @@
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+//#region src/components/chart-card/chart-card.ts
+const styles = css`
+  :host {
+    display: block;
+    border: 1px solid var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-md);
+    padding: var(--sigvelo-spacing-4);
+  }
+  h3 {
+    margin: 0 0 var(--sigvelo-spacing-1);
+    font: var(--sigvelo-font-weight-semibold)
+      var(--sigvelo-text-base) / var(--sigvelo-text-base-leading) var(--sigvelo-font-heading);
+  }
+  p {
+    margin: 0 0 var(--sigvelo-spacing-4);
+    color: var(--sigvelo-color-text-muted);
+  }
+`;
+/**
+* @tag sigvelo-chart-card
+* @summary A titled card composition for a chart or thematic map.
+* @slot - A chart or distribution component.
+*/
+var SigveloChartCard = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.heading = "";
+		this.description = "";
+	}
+	static {
+		this.styles = [hostStyles, styles];
+	}
+	render() {
+		return html`<section part="card">
+      <h3 part="heading">${this.heading}</h3>
+      ${this.description ? html`<p part="description">${this.description}</p>` : ""}<slot></slot>
+    </section>`;
+	}
+};
+__decorate([property()], SigveloChartCard.prototype, "heading", void 0);
+__decorate([property()], SigveloChartCard.prototype, "description", void 0);
+customElements.define("sigvelo-chart-card", SigveloChartCard);
+//#endregion
+export { SigveloChartCard };

package/dist/components/distribution/distribution.d.ts

@@ -0,0 +1,18 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/distribution/distribution.d.ts
+/** @tag sigvelo-distribution @summary Renders a numeric distribution as a bounded histogram. */
+declare class SigveloDistribution extends SigveloElement {
+  static styles: CSSResultGroup;
+  values: readonly (number | null)[];
+  label: string;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-distribution": SigveloDistribution;
+  }
+}
+//#endregion
+export { SigveloDistribution };

package/dist/components/distribution/distribution.js

@@ -0,0 +1,31 @@
+import "../../chart-B-xXO_Qw.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+//#region src/components/distribution/distribution.ts
+/** @tag sigvelo-distribution @summary Renders a numeric distribution as a bounded histogram. */
+var SigveloDistribution = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.values = [];
+		this.label = "Distribution";
+	}
+	static {
+		this.styles = [hostStyles];
+	}
+	render() {
+		return html`<sigvelo-chart
+      type="histogram"
+      label=${this.label}
+      y-field="value"
+      .data=${this.values.map((value) => ({ value }))}
+    ></sigvelo-chart>`;
+	}
+};
+__decorate([property({ attribute: false })], SigveloDistribution.prototype, "values", void 0);
+__decorate([property()], SigveloDistribution.prototype, "label", void 0);
+customElements.define("sigvelo-distribution", SigveloDistribution);
+//#endregion
+export { SigveloDistribution };

package/dist/components/legend/legend.d.ts

@@ -0,0 +1,22 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/legend/legend.d.ts
+interface LegendItem {
+  label: string;
+  color: string;
+}
+/** @tag sigvelo-viz-legend @summary Displays a compact color legend for charts and thematic maps. */
+declare class SigveloVizLegend extends SigveloElement {
+  static styles: CSSResultGroup;
+  title: string;
+  items: readonly LegendItem[];
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-viz-legend": SigveloVizLegend;
+  }
+}
+//#endregion
+export { LegendItem, SigveloVizLegend };

package/dist/components/legend/legend.js

@@ -0,0 +1,54 @@
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+//#region src/components/legend/legend.ts
+const styles = css`
+  :host {
+    display: block;
+  }
+  .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sigvelo-spacing-2);
+  }
+  .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .swatch {
+    inline-size: 12px;
+    block-size: 12px;
+    border-radius: 2px;
+    border: 1px solid var(--sigvelo-color-neutral-border-muted);
+  }
+`;
+/** @tag sigvelo-viz-legend @summary Displays a compact color legend for charts and thematic maps. */
+var SigveloVizLegend = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.title = "Legend";
+		this.items = [];
+	}
+	static {
+		this.styles = [hostStyles, styles];
+	}
+	render() {
+		return html`<section aria-label=${this.title} part="legend">
+      <strong part="title">${this.title}</strong>
+      <div class="items">
+        ${this.items.map((item) => html`<span class="item" part="item"
+              ><span class="swatch" style=${`background:${item.color}`} part="swatch"></span
+              >${item.label}</span
+            >`)}
+      </div>
+    </section>`;
+	}
+};
+__decorate([property()], SigveloVizLegend.prototype, "title", void 0);
+__decorate([property({ attribute: false })], SigveloVizLegend.prototype, "items", void 0);
+customElements.define("sigvelo-viz-legend", SigveloVizLegend);
+//#endregion
+export { SigveloVizLegend };

package/dist/components/metric-card/metric-card.d.ts

@@ -0,0 +1,19 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/metric-card/metric-card.d.ts
+/** @tag sigvelo-metric-card @summary A labeled key-metric card composition. */
+declare class SigveloMetricCard extends SigveloElement {
+  static styles: CSSResultGroup;
+  label: string;
+  value: string;
+  detail: string;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-metric-card": SigveloMetricCard;
+  }
+}
+//#endregion
+export { SigveloMetricCard };

package/dist/components/metric-card/metric-card.js

@@ -0,0 +1,48 @@
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+//#region src/components/metric-card/metric-card.ts
+const styles = css`
+  :host {
+    display: block;
+    border: 1px solid var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-md);
+    padding: var(--sigvelo-spacing-4);
+  }
+  p {
+    margin: 0;
+    color: var(--sigvelo-color-text-muted);
+  }
+  strong {
+    display: block;
+    margin-top: var(--sigvelo-spacing-1);
+    font: var(--sigvelo-font-weight-semibold)
+      var(--sigvelo-text-2xl) / var(--sigvelo-text-2xl-leading) var(--sigvelo-font-heading);
+  }
+`;
+/** @tag sigvelo-metric-card @summary A labeled key-metric card composition. */
+var SigveloMetricCard = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.value = "";
+		this.detail = "";
+	}
+	static {
+		this.styles = [hostStyles, styles];
+	}
+	render() {
+		return html`<section part="card">
+      <p part="label">${this.label}</p>
+      <strong part="value">${this.value}</strong>${this.detail ? html`<p part="detail">${this.detail}</p>` : ""}
+    </section>`;
+	}
+};
+__decorate([property()], SigveloMetricCard.prototype, "label", void 0);
+__decorate([property()], SigveloMetricCard.prototype, "value", void 0);
+__decorate([property()], SigveloMetricCard.prototype, "detail", void 0);
+customElements.define("sigvelo-metric-card", SigveloMetricCard);
+//#endregion
+export { SigveloMetricCard };

package/dist/decorate-DcF3lt7P.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+export { __decorate as t };

package/dist/docs/custom-elements.json

@@ -0,0 +1,444 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/chart/chart.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/chart-card/chart-card.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/distribution/distribution.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/legend/legend.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/metric-card/metric-card.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/chart/chart.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "<sigvelo-chart>",
+          "name": "SigveloChart",
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "CSSResultGroup"
+              },
+              "static": true,
+              "default": "[hostStyles, styles]"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "ChartType"
+              },
+              "default": "\"bar\""
+            },
+            {
+              "kind": "field",
+              "name": "data",
+              "type": {
+                "text": "readonly ChartDatum[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "xField",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"label\""
+            },
+            {
+              "kind": "field",
+              "name": "yField",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"value\""
+            },
+            {
+              "kind": "field",
+              "name": "labelField",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"label\""
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Chart\""
+            },
+            {
+              "kind": "method",
+              "name": "#plot",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "unknown"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "SigveloElement",
+            "package": "@mcp-b/wc-support/base/sigvelo-element"
+          },
+          "tagName": "sigvelo-chart",
+          "customElement": true,
+          "summary": "Renders a bounded set of data-driven SVG chart types using D3 scales and shapes."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SigveloChart",
+          "declaration": {
+            "name": "SigveloChart",
+            "module": "src/components/chart/chart.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sigvelo-chart",
+          "declaration": {
+            "name": "SigveloChart",
+            "module": "src/components/chart/chart.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/distribution/distribution.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SigveloDistribution",
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "CSSResultGroup"
+              },
+              "static": true,
+              "default": "[hostStyles]"
+            },
+            {
+              "kind": "field",
+              "name": "values",
+              "type": {
+                "text": "readonly (number | null)[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Distribution\""
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "SigveloElement",
+            "package": "@mcp-b/wc-support/base/sigvelo-element"
+          },
+          "tagName": "sigvelo-distribution",
+          "customElement": true,
+          "summary": "Renders a numeric distribution as a bounded histogram."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SigveloDistribution",
+          "declaration": {
+            "name": "SigveloDistribution",
+            "module": "src/components/distribution/distribution.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sigvelo-distribution",
+          "declaration": {
+            "name": "SigveloDistribution",
+            "module": "src/components/distribution/distribution.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/chart-card/chart-card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SigveloChartCard",
+          "slots": [
+            {
+              "description": "A chart or distribution component.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "CSSResultGroup"
+              },
+              "static": true,
+              "default": "[hostStyles, styles]"
+            },
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "SigveloElement",
+            "package": "@mcp-b/wc-support/base/sigvelo-element"
+          },
+          "tagName": "sigvelo-chart-card",
+          "customElement": true,
+          "summary": "A titled card composition for a chart or thematic map."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SigveloChartCard",
+          "declaration": {
+            "name": "SigveloChartCard",
+            "module": "src/components/chart-card/chart-card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sigvelo-chart-card",
+          "declaration": {
+            "name": "SigveloChartCard",
+            "module": "src/components/chart-card/chart-card.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/metric-card/metric-card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SigveloMetricCard",
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "CSSResultGroup"
+              },
+              "static": true,
+              "default": "[hostStyles, styles]"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "detail",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "SigveloElement",
+            "package": "@mcp-b/wc-support/base/sigvelo-element"
+          },
+          "tagName": "sigvelo-metric-card",
+          "customElement": true,
+          "summary": "A labeled key-metric card composition."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SigveloMetricCard",
+          "declaration": {
+            "name": "SigveloMetricCard",
+            "module": "src/components/metric-card/metric-card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sigvelo-metric-card",
+          "declaration": {
+            "name": "SigveloMetricCard",
+            "module": "src/components/metric-card/metric-card.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/legend/legend.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SigveloVizLegend",
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "CSSResultGroup"
+              },
+              "static": true,
+              "default": "[hostStyles, styles]"
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Legend\""
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "readonly LegendItem[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "SigveloElement",
+            "package": "@mcp-b/wc-support/base/sigvelo-element"
+          },
+          "tagName": "sigvelo-viz-legend",
+          "customElement": true,
+          "summary": "Displays a compact color legend for charts and thematic maps."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SigveloVizLegend",
+          "declaration": {
+            "name": "SigveloVizLegend",
+            "module": "src/components/legend/legend.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sigvelo-viz-legend",
+          "declaration": {
+            "name": "SigveloVizLegend",
+            "module": "src/components/legend/legend.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { SigveloChartCard } from "./components/chart-card/chart-card.js";
+import { ChartDatum, ChartType, SigveloChart } from "./components/chart/chart.js";
+import { SigveloDistribution } from "./components/distribution/distribution.js";
+import { LegendItem, SigveloVizLegend } from "./components/legend/legend.js";
+import { SigveloMetricCard } from "./components/metric-card/metric-card.js";
+export { ChartDatum, ChartType, LegendItem, SigveloChart, SigveloChartCard, SigveloDistribution, SigveloMetricCard, SigveloVizLegend };

package/dist/index.js

@@ -0,0 +1,6 @@
+import { t as SigveloChart } from "./chart-B-xXO_Qw.js";
+import { SigveloChartCard } from "./components/chart-card/chart-card.js";
+import { SigveloDistribution } from "./components/distribution/distribution.js";
+import { SigveloVizLegend } from "./components/legend/legend.js";
+import { SigveloMetricCard } from "./components/metric-card/metric-card.js";
+export { SigveloChart, SigveloChartCard, SigveloDistribution, SigveloMetricCard, SigveloVizLegend };

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@mcp-b/viz-components",
+  "version": "0.2.0",
+  "description": "D3-backed, framework-agnostic Sigvelo visualization web components.",
+  "keywords": [
+    "charts",
+    "d3",
+    "lit",
+    "visualization",
+    "web-components"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/*": "./dist/components/*",
+    "./custom-elements.json": "./dist/docs/custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@mcp-b/wc-support": "0.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@storybook/addon-a11y": "^10.5.2",
+    "@storybook/addon-docs": "^10.5.2",
+    "@storybook/addon-vitest": "^10.5.2",
+    "@storybook/web-components-vite": "10.5.2",
+    "@types/d3-array": "^3.2.2",
+    "@types/d3-format": "^3.0.4",
+    "@types/d3-geo": "^3.1.0",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.7",
+    "d3-array": "^3.2.4",
+    "d3-format": "^3.1.0",
+    "d3-geo": "^3.1.1",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "lit": "^3.3.2",
+    "playwright": "~1.61.0",
+    "storybook": "^10.5.2",
+    "tinyglobby": "^0.2.15",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "d3-array": "^3.2.4",
+    "d3-format": "^3.1.0",
+    "d3-geo": "^3.1.1",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "lit": "^3.0.0",
+    "lit-html": "^3.0.0"
+  },
+  "customElements": "dist/docs/custom-elements.json",
+  "scripts": {
+    "analyze": "cem analyze --globs \"src/**/*.ts\" --exclude \"**/*.stories.ts\" --exclude \"**/*.test.ts\" --exclude \"**/*.styles.ts\" --outdir \"dist/docs\"",
+    "build": "tsc -p tsconfig.prod.json && vp run build:lib && vp run analyze",
+    "build:lib": "vp pack",
+    "storybook": "vp run @mcp-b/web-components#storybook",
+    "test": "vp run @mcp-b/web-components#test",
+    "typecheck": "tsc --noEmit"
+  }
+}