@sentropic/design-system-svelte 0.34.37 → 0.34.39

package/dist/EventFeedPanel.svelte.d.ts

@@ -0,0 +1,45 @@
+/**
+ * EventFeedPanel — flux d'événements datés, scrollable (façon New Relic /
+ * observabilité). PANNEAU (liste), pas un graphe SVG : une liste verticale
+ * scrollable d'événements horodatés, chacun teinté/iconé par sa SÉVÉRITÉ
+ * (tons sémantiques --st-semantic-feedback-*). Distinct de TimelineChart
+ * (axe temporel SVG) : ici la temporalité est un simple tri décroissant, le
+ * rendu est du DOM (rôle `feed` / `list`) défilable.
+ * API canonique (référence Svelte, React/Vue/Angular doivent s'aligner).
+ *
+ * Modèle : items triés par `at` DÉCROISSANT (le plus récent en tête), badge
+ * de sévérité (pastille + libellé), horodatage formaté (heure locale) et
+ * message. Défilement vertical borné par `maxHeight`/`height`. a11y :
+ * `role="feed"` sur la liste, `role="article"` par item.
+ *
+ * Props obligatoires :
+ *   data   EventFeedPanelEvent[]  - tableau d'événements
+ *
+ * Props optionnelles :
+ *   label      string  - libellé accessible du flux
+ *   maxHeight  number  - hauteur max en px (déclenche le scroll)
+ *   height     number  - alias de maxHeight (hauteur fixe)
+ *   class      string
+ */
+export type EventFeedPanelSeverity = "info" | "success" | "warning" | "error" | (string & {});
+export type EventFeedPanelEvent = {
+    /** Horodatage en millisecondes epoch (ou tout nombre croissant). */
+    at: number;
+    /** Catégorie libre de l'événement (« deploy », « alert »…). */
+    type: string;
+    /** Sévérité : pilote la couleur/pastille (sémantique feedback). */
+    severity: EventFeedPanelSeverity;
+    /** Message principal affiché. */
+    message: string;
+};
+type EventFeedPanelProps = {
+    data: EventFeedPanelEvent[];
+    label?: string;
+    maxHeight?: number;
+    height?: number;
+    class?: string;
+};
+declare const EventFeedPanel: import("svelte").Component<EventFeedPanelProps, {}, "">;
+type EventFeedPanel = ReturnType<typeof EventFeedPanel>;
+export default EventFeedPanel;
+//# sourceMappingURL=EventFeedPanel.svelte.d.ts.map

package/dist/EventFeedPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventFeedPanel.svelte.d.ts","sourceRoot":"","sources":["../src/lib/EventFeedPanel.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAElB,MAAM,MAAM,mBAAmB,GAAG;IAChC,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,QAAQ,EAAE,sBAAsB,CAAC;IACjC,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+EJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/EventFeedPanel.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=EventFeedPanel.test.d.ts.map

package/dist/EventFeedPanel.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventFeedPanel.test.d.ts","sourceRoot":"","sources":["../src/lib/EventFeedPanel.test.ts"],"names":[],"mappings":""}

package/dist/EventFeedPanel.test.js

@@ -0,0 +1,66 @@
+import { render } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import EventFeedPanel from "./EventFeedPanel.svelte";
+const events = [
+    { at: 1_700_000_000_000, type: "deploy", severity: "info", message: "Deployed v1.2.0" },
+    { at: 1_700_000_300_000, type: "alert", severity: "error", message: "5xx spike" },
+    { at: 1_700_000_100_000, type: "scale", severity: "success", message: "Scaled up" },
+    { at: 1_700_000_200_000, type: "warn", severity: "warning", message: "High latency" }
+];
+const items = (container) => Array.from(container.querySelectorAll(".st-eventFeedPanel__item"));
+const structuralClass = (el) => el.className.split(/\s+/)[0];
+describe("EventFeedPanel", () => {
+    it("renders a feed with one article per event", () => {
+        const { container } = render(EventFeedPanel, { props: { data: events, label: "Activité" } });
+        expect(container.querySelector('[role="feed"]')).toBeTruthy();
+        expect(items(container).length).toBe(4);
+        expect(container.querySelectorAll('[role="article"]').length).toBe(4);
+    });
+    it("sorts events by timestamp descending (newest first)", () => {
+        const { container } = render(EventFeedPanel, { props: { data: events, label: "A" } });
+        const messages = items(container).map((li) => li.querySelector(".st-eventFeedPanel__message")?.textContent);
+        expect(messages).toEqual(["5xx spike", "High latency", "Scaled up", "Deployed v1.2.0"]);
+    });
+    it("applies a severity tone class per item", () => {
+        const { container } = render(EventFeedPanel, { props: { data: events, label: "A" } });
+        expect(container.querySelector(".st-eventFeedPanel__item--info")).toBeTruthy();
+        expect(container.querySelector(".st-eventFeedPanel__item--success")).toBeTruthy();
+        expect(container.querySelector(".st-eventFeedPanel__item--warning")).toBeTruthy();
+        expect(container.querySelector(".st-eventFeedPanel__item--error")).toBeTruthy();
+    });
+    it("falls back to the neutral tone for unknown severities", () => {
+        const { container } = render(EventFeedPanel, {
+            props: { data: [{ at: 1, type: "x", severity: "debug", message: "noise" }], label: "A" }
+        });
+        expect(container.querySelector(".st-eventFeedPanel__item--neutral")).toBeTruthy();
+    });
+    it("drops non-finite timestamps before rendering", () => {
+        const { container } = render(EventFeedPanel, {
+            props: {
+                data: [
+                    { at: Number.NaN, type: "x", severity: "info", message: "bad" },
+                    { at: 2, type: "y", severity: "info", message: "good" }
+                ],
+                label: "A"
+            }
+        });
+        expect(items(container).length).toBe(1);
+        expect(container.querySelector(".st-eventFeedPanel__message")?.textContent).toBe("good");
+    });
+    it("constrains the scroll height when maxHeight is set", () => {
+        const { container } = render(EventFeedPanel, { props: { data: events, maxHeight: 180 } });
+        const list = container.querySelector(".st-eventFeedPanel__list");
+        expect(list.getAttribute("style")).toContain("max-height: 180px");
+    });
+    it("accepts height as an alias of maxHeight", () => {
+        const { container } = render(EventFeedPanel, { props: { data: events, height: 120 } });
+        const list = container.querySelector(".st-eventFeedPanel__list");
+        expect(list.getAttribute("style")).toContain("max-height: 120px");
+    });
+    it("merges a custom class onto the root", () => {
+        const { container } = render(EventFeedPanel, { props: { data: events, class: "mine" } });
+        const root = container.querySelector(".st-eventFeedPanel");
+        expect(structuralClass(root)).toBe("st-eventFeedPanel");
+        expect(root.classList.contains("mine")).toBe(true);
+    });
+});

package/dist/VectorFieldChart.svelte

@@ -0,0 +1,347 @@
+<script lang="ts" module>
+  /**
+   * VectorFieldChart — champ de vecteurs (façon Highcharts « vector »). Grille
+   * de flèches dont la LONGUEUR est proportionnelle à la magnitude (`length`) et
+   * l'ORIENTATION suit la direction (`direction`, en degrés). Axes X/Y gradués
+   * (mêmes « niceTicks » que les autres charts). La couleur encode la magnitude
+   * (échelle category1..8). a11y : `role="img"` + liste accessible des points.
+   * API canonique (référence Svelte, React/Vue/Angular doivent s'aligner).
+   *
+   * Convention de direction : 0° pointe vers la droite (axe +X), l'angle
+   * augmente dans le sens trigonométrique (90° = vers le haut). Les longueurs
+   * sont normalisées sur la plus grande magnitude pour rester dans la cellule.
+   *
+   * Props obligatoires :
+   *   data   VectorFieldChartDatum[]  - {x, y, length, direction}
+   *
+   * Props optionnelles :
+   *   label   string
+   *   width   number  (défaut 640)
+   *   height  number  (défaut 320)
+   *   size    number  (longueur max d'une flèche en px ; défaut 26)
+   *   class   string
+   */
+  export type VectorFieldChartTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  export type VectorFieldChartDatum = {
+    x: number;
+    y: number;
+    /** Magnitude (≥ 0) : pilote la longueur normalisée et la couleur. */
+    length: number;
+    /** Direction en DEGRÉS (0° = +X, sens trigonométrique). */
+    direction: number;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type VectorFieldChartProps = {
+    data: VectorFieldChartDatum[];
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    class?: string;
+  };
+
+  let {
+    data = [],
+    label,
+    width = 640,
+    height = 320,
+    size = 26,
+    class: className
+  }: VectorFieldChartProps = $props();
+
+  const MARGIN = { top: 16, right: 18, bottom: 36, left: 48 };
+
+  const TONES = [
+    "category1","category2","category3","category4",
+    "category5","category6","category7","category8"
+  ] as const;
+
+  function niceTicks(min: number, max: number, target = 5): number[] {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
+      return [Number.isFinite(max) ? max : 0];
+    }
+    const range = max - min;
+    const rough = range / Math.max(target - 1, 1);
+    const pow = Math.pow(10, Math.floor(Math.log10(rough)));
+    const norm = rough / pow;
+    let step: number;
+    if (norm < 1.5) step = pow;
+    else if (norm < 3) step = 2 * pow;
+    else if (norm < 7) step = 5 * pow;
+    else step = 10 * pow;
+    const start = Math.floor(min / step) * step;
+    const end = Math.ceil(max / step) * step;
+    const ticks: number[] = [];
+    for (let v = start; v <= end + step / 2; v += step) ticks.push(Number(v.toFixed(10)));
+    return ticks;
+  }
+
+  function scaleLinear(v: number, d0: number, d1: number, r0: number, r1: number) {
+    if (d1 === d0) return r0;
+    return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+  }
+
+  function fmt(v: number): string {
+    if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k`;
+    return Number.isInteger(v) ? String(v) : v.toFixed(1);
+  }
+
+  let hoveredKey: string | null = $state(null);
+
+  // Points valides : coordonnées finies, magnitude finie ≥ 0.
+  const validData = $derived(
+    data.filter(
+      (d) =>
+        d &&
+        Number.isFinite(d.x) &&
+        Number.isFinite(d.y) &&
+        Number.isFinite(d.length) &&
+        d.length >= 0 &&
+        Number.isFinite(d.direction)
+    )
+  );
+
+  const scales = $derived.by(() => {
+    const xs = validData.map((d) => d.x);
+    const ys = validData.map((d) => d.y);
+    const xTicks = niceTicks(Math.min(...xs), Math.max(...xs));
+    const yTicks = niceTicks(Math.min(...ys), Math.max(...ys));
+    const plotW = Math.max(width - MARGIN.left - MARGIN.right, 1);
+    const plotH = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+    return {
+      xTicks, yTicks,
+      xMin: xTicks[0], xMax: xTicks[xTicks.length - 1],
+      yMin: yTicks[0], yMax: yTicks[yTicks.length - 1],
+      plotW, plotH
+    };
+  });
+
+  const maxLength = $derived(
+    validData.reduce((max, d) => (d.length > max ? d.length : max), 0)
+  );
+
+  // Une flèche par point : segment (base → pointe) + 2 traits de pointe.
+  const arrows = $derived.by(() => {
+    const { xMin, xMax, yMin, yMax, plotW, plotH } = scales;
+    const max = maxLength > 0 ? maxLength : 1;
+    return validData.map((d, i) => {
+      const cx = MARGIN.left + scaleLinear(d.x, xMin, xMax, 0, plotW);
+      const cy = MARGIN.top + scaleLinear(d.y, yMin, yMax, plotH, 0);
+      // Longueur normalisée (la plus grande magnitude = `size`).
+      const len = (d.length / max) * size;
+      // Direction trigonométrique : +X à droite, +Y vers le haut (donc -sin en
+      // espace écran où l'axe Y descend).
+      const rad = (d.direction * Math.PI) / 180;
+      const dx = Math.cos(rad) * len;
+      const dy = -Math.sin(rad) * len;
+      // Flèche centrée sur le point : moitié de chaque côté.
+      const x1 = cx - dx / 2;
+      const y1 = cy - dy / 2;
+      const x2 = cx + dx / 2;
+      const y2 = cy + dy / 2;
+      // Pointe : deux petits traits en arrière de la tête.
+      const head = Math.min(Math.max(len * 0.28, 3), 8);
+      const headAngle = (28 * Math.PI) / 180;
+      const baseAngle = Math.atan2(y2 - y1, x2 - x1);
+      const hx1 = x2 - head * Math.cos(baseAngle - headAngle);
+      const hy1 = y2 - head * Math.sin(baseAngle - headAngle);
+      const hx2 = x2 - head * Math.cos(baseAngle + headAngle);
+      const hy2 = y2 - head * Math.sin(baseAngle + headAngle);
+      // Ton catégoriel par bin de magnitude (max → category8).
+      const bin = Math.min(Math.floor((d.length / max) * TONES.length), TONES.length - 1);
+      return {
+        key: `${i}`,
+        datum: d,
+        cx, cy, x1, y1, x2, y2, hx1, hy1, hx2, hy2,
+        tone: TONES[Math.max(0, bin)]
+      };
+    });
+  });
+
+  const dataValueItems = $derived(
+    validData.map(
+      (d) => `x ${d.x}, y ${d.y} · |v| ${fmt(d.length)} @ ${fmt(d.direction)}°`
+    )
+  );
+
+  function handlePointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hoveredKey = null;
+      return;
+    }
+    hoveredKey = target.getAttribute("data-chart-key");
+  }
+
+  const hoveredArrow = $derived.by(() => {
+    if (hoveredKey === null) return null;
+    return arrows.find((a) => a.key === hoveredKey) ?? null;
+  });
+
+  const classes = () => ["st-vectorFieldChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-vectorFieldChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handlePointerMove}
+    onpointerleave={() => (hoveredKey = null)}
+  >
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <!-- gridlines + ticks Y -->
+      {#each scales.yTicks as t (t)}
+        {@const y = MARGIN.top + scaleLinear(t, scales.yMin, scales.yMax, scales.plotH, 0)}
+        <line class="st-vectorFieldChart__grid" x1={MARGIN.left} x2={width - MARGIN.right} y1={y} y2={y} />
+        <text class="st-vectorFieldChart__tick" x={MARGIN.left - 6} y={y} text-anchor="end" dominant-baseline="middle">{fmt(t)}</text>
+      {/each}
+      <!-- ticks X -->
+      {#each scales.xTicks as t (t)}
+        {@const x = MARGIN.left + scaleLinear(t, scales.xMin, scales.xMax, 0, scales.plotW)}
+        <text class="st-vectorFieldChart__tick" x={x} y={height - MARGIN.bottom + 16} text-anchor="middle">{fmt(t)}</text>
+      {/each}
+
+      <!-- axes -->
+      <line class="st-vectorFieldChart__axis" x1={MARGIN.left} x2={MARGIN.left} y1={MARGIN.top} y2={height - MARGIN.bottom} />
+      <line class="st-vectorFieldChart__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
+
+      <!-- une flèche par point : segment + pointe -->
+      {#each arrows as a (a.key)}
+        <g
+          class="st-vectorFieldChart__arrow st-vectorFieldChart__arrow--{a.tone}"
+          class:st-vectorFieldChart__arrow--dim={hoveredKey !== null && hoveredKey !== a.key}
+        >
+          <line class="st-vectorFieldChart__shaft" x1={a.x1} y1={a.y1} x2={a.x2} y2={a.y2} data-chart-key={a.key} />
+          <line class="st-vectorFieldChart__head" x1={a.x2} y1={a.y2} x2={a.hx1} y2={a.hy1} />
+          <line class="st-vectorFieldChart__head" x1={a.x2} y1={a.y2} x2={a.hx2} y2={a.hy2} />
+        </g>
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList label={label ?? "vector field"} items={dataValueItems} />
+
+  {#if hoveredArrow}
+    {@const a = hoveredArrow}
+    <div
+      class="st-vectorFieldChart__tooltip"
+      role="presentation"
+      style="left: {(a.cx / width) * 100}%; top: {(a.cy / height) * 100}%"
+    >
+      <span class="st-vectorFieldChart__tooltipLabel">x {a.datum.x} · y {a.datum.y}</span>
+      <span class="st-vectorFieldChart__tooltipValue">|v| {fmt(a.datum.length)} @ {fmt(a.datum.direction)}°</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-vectorFieldChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-vectorFieldChart svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-vectorFieldChart__visual {
+    display: block;
+  }
+
+  .st-vectorFieldChart__grid {
+    opacity: 0.7;
+    stroke: var(--st-semantic-border-subtle);
+    stroke-dasharray: 2 3;
+    stroke-width: 1;
+  }
+
+  .st-vectorFieldChart__axis {
+    stroke: var(--st-semantic-border-subtle);
+    stroke-width: 1;
+  }
+
+  .st-vectorFieldChart__tick {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.6875rem;
+  }
+
+  .st-vectorFieldChart__arrow {
+    transition: opacity 120ms ease;
+  }
+
+  .st-vectorFieldChart__arrow--dim {
+    opacity: 0.35;
+  }
+
+  .st-vectorFieldChart__shaft {
+    cursor: pointer;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-width: 2;
+  }
+
+  .st-vectorFieldChart__head {
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-width: 2;
+  }
+
+  .st-vectorFieldChart__arrow--category1 { color: var(--st-semantic-data-category1); }
+  .st-vectorFieldChart__arrow--category2 { color: var(--st-semantic-data-category2); }
+  .st-vectorFieldChart__arrow--category3 { color: var(--st-semantic-data-category3); }
+  .st-vectorFieldChart__arrow--category4 { color: var(--st-semantic-data-category4); }
+  .st-vectorFieldChart__arrow--category5 { color: var(--st-semantic-data-category5); }
+  .st-vectorFieldChart__arrow--category6 { color: var(--st-semantic-data-category6); }
+  .st-vectorFieldChart__arrow--category7 { color: var(--st-semantic-data-category7); }
+  .st-vectorFieldChart__arrow--category8 { color: var(--st-semantic-data-category8); }
+
+  .st-vectorFieldChart__tooltip {
+    background: var(--st-semantic-surface-inverse);
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse);
+    display: inline-flex;
+    flex-direction: column;
+    font-size: 0.75rem;
+    gap: 0.125rem;
+    line-height: 1.2;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    transform: translate(-50%, calc(-100% - 8px));
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .st-vectorFieldChart__tooltipLabel {
+    font-weight: 600;
+  }
+
+  .st-vectorFieldChart__tooltipValue {
+    opacity: 0.85;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-vectorFieldChart__arrow {
+      transition: none;
+    }
+  }
+</style>

package/dist/VectorFieldChart.svelte.d.ts

@@ -0,0 +1,43 @@
+/**
+ * VectorFieldChart — champ de vecteurs (façon Highcharts « vector »). Grille
+ * de flèches dont la LONGUEUR est proportionnelle à la magnitude (`length`) et
+ * l'ORIENTATION suit la direction (`direction`, en degrés). Axes X/Y gradués
+ * (mêmes « niceTicks » que les autres charts). La couleur encode la magnitude
+ * (échelle category1..8). a11y : `role="img"` + liste accessible des points.
+ * API canonique (référence Svelte, React/Vue/Angular doivent s'aligner).
+ *
+ * Convention de direction : 0° pointe vers la droite (axe +X), l'angle
+ * augmente dans le sens trigonométrique (90° = vers le haut). Les longueurs
+ * sont normalisées sur la plus grande magnitude pour rester dans la cellule.
+ *
+ * Props obligatoires :
+ *   data   VectorFieldChartDatum[]  - {x, y, length, direction}
+ *
+ * Props optionnelles :
+ *   label   string
+ *   width   number  (défaut 640)
+ *   height  number  (défaut 320)
+ *   size    number  (longueur max d'une flèche en px ; défaut 26)
+ *   class   string
+ */
+export type VectorFieldChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type VectorFieldChartDatum = {
+    x: number;
+    y: number;
+    /** Magnitude (≥ 0) : pilote la longueur normalisée et la couleur. */
+    length: number;
+    /** Direction en DEGRÉS (0° = +X, sens trigonométrique). */
+    direction: number;
+};
+type VectorFieldChartProps = {
+    data: VectorFieldChartDatum[];
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    class?: string;
+};
+declare const VectorFieldChart: import("svelte").Component<VectorFieldChartProps, {}, "">;
+type VectorFieldChart = ReturnType<typeof VectorFieldChart>;
+export default VectorFieldChart;
+//# sourceMappingURL=VectorFieldChart.svelte.d.ts.map

package/dist/VectorFieldChart.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorFieldChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/VectorFieldChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,oBAAoB,GAC5B,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAMF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiMJ,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/VectorFieldChart.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=VectorFieldChart.test.d.ts.map

package/dist/VectorFieldChart.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorFieldChart.test.d.ts","sourceRoot":"","sources":["../src/lib/VectorFieldChart.test.ts"],"names":[],"mappings":""}

package/dist/VectorFieldChart.test.js

@@ -0,0 +1,59 @@
+import { render } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import VectorFieldChart from "./VectorFieldChart.svelte";
+const field = [
+    { x: 0, y: 0, length: 1, direction: 0 },
+    { x: 1, y: 0, length: 2, direction: 90 },
+    { x: 0, y: 1, length: 3, direction: 180 },
+    { x: 1, y: 1, length: 4, direction: 270 }
+];
+const arrows = (container) => Array.from(container.querySelectorAll(".st-vectorFieldChart__arrow"));
+const listItems = (container) => Array.from(container.querySelectorAll(".st-chartDataList li")).map((n) => n.textContent?.trim());
+const structuralClass = (el) => el.className.split(/\s+/)[0];
+describe("VectorFieldChart", () => {
+    it("renders an img role and one arrow per datum", () => {
+        const { container } = render(VectorFieldChart, { props: { data: field, label: "Vent" } });
+        expect(container.querySelector('[role="img"]')).toBeTruthy();
+        expect(arrows(container).length).toBe(4);
+    });
+    it("draws a shaft and two head segments per arrow", () => {
+        const { container } = render(VectorFieldChart, { props: { data: field, label: "V" } });
+        expect(container.querySelectorAll(".st-vectorFieldChart__shaft").length).toBe(4);
+        expect(container.querySelectorAll(".st-vectorFieldChart__head").length).toBe(8);
+    });
+    it("colours arrows by magnitude bin (largest magnitude → category8)", () => {
+        const { container } = render(VectorFieldChart, { props: { data: field, label: "V" } });
+        const last = arrows(container).at(-1);
+        expect(last.classList.contains("st-vectorFieldChart__arrow--category8")).toBe(true);
+    });
+    it("renders graduated X/Y axes with nice ticks", () => {
+        const { container } = render(VectorFieldChart, { props: { data: field, label: "V" } });
+        expect(container.querySelectorAll(".st-vectorFieldChart__axis").length).toBe(2);
+        expect(container.querySelectorAll(".st-vectorFieldChart__tick").length).toBeGreaterThan(0);
+    });
+    it("lists every datum in the accessible data list", () => {
+        const { container } = render(VectorFieldChart, {
+            props: { data: [{ x: 2, y: 3, length: 5, direction: 45 }], label: "V" }
+        });
+        expect(listItems(container)[0]).toBe("x 2, y 3 · |v| 5 @ 45°");
+    });
+    it("drops non-finite or negative-magnitude points before rendering", () => {
+        const { container } = render(VectorFieldChart, {
+            props: {
+                data: [
+                    { x: Number.NaN, y: 0, length: 1, direction: 0 },
+                    { x: 0, y: 0, length: -1, direction: 0 },
+                    { x: 1, y: 1, length: 2, direction: 0 }
+                ],
+                label: "V"
+            }
+        });
+        expect(arrows(container).length).toBe(1);
+    });
+    it("merges a custom class onto the root", () => {
+        const { container } = render(VectorFieldChart, { props: { data: field, class: "mine" } });
+        const root = container.querySelector(".st-vectorFieldChart");
+        expect(structuralClass(root)).toBe("st-vectorFieldChart");
+        expect(root.classList.contains("mine")).toBe(true);
+    });
+});

package/dist/index.d.ts

@@ -99,11 +99,15 @@ export { default as GaugeChart } from "./GaugeChart.svelte";
 export { default as SolidGaugeChart } from "./SolidGaugeChart.svelte";
 export { default as StateTimelineChart } from "./StateTimelineChart.svelte";
 export { default as StatusHistoryChart } from "./StatusHistoryChart.svelte";
+export { default as EventFeedPanel } from "./EventFeedPanel.svelte";
+export { default as VectorFieldChart } from "./VectorFieldChart.svelte";
 export { default as WaffleChart } from "./WaffleChart.svelte";
 export { default as RibbonChart } from "./RibbonChart.svelte";
 export { default as AnomalySwimLaneChart } from "./AnomalySwimLaneChart.svelte";
 export { default as FlamegraphChart } from "./FlamegraphChart.svelte";
 export { default as TraceWaterfallChart } from "./TraceWaterfallChart.svelte";
+export { default as DecompositionTreeChart } from "./DecompositionTreeChart.svelte";
+export { default as Density2DChart } from "./Density2DChart.svelte";
 export { default as GeoMap } from "./GeoMap.svelte";
 export { default as Header } from "./Header.svelte";
 export { default as HeatmapChart } from "./HeatmapChart.svelte";
@@ -229,11 +233,15 @@ export type { GaugeChartTone, GaugeChartThreshold, GaugeChartFormat } from "./Ga
 export type { SolidGaugeTone, SolidGaugeThreshold, SolidGaugeFormat } from "./SolidGaugeChart.svelte";
 export type { StateTimelineTone, StateTimelineSegment, StateTimelineSeries } from "./StateTimelineChart.svelte";
 export type { StatusHistoryTone, StatusHistoryBucket, StatusHistorySeries } from "./StatusHistoryChart.svelte";
+export type { EventFeedPanelSeverity, EventFeedPanelEvent } from "./EventFeedPanel.svelte";
+export type { VectorFieldChartTone, VectorFieldChartDatum } from "./VectorFieldChart.svelte";
 export type { WaffleTone, WaffleChartDatum } from "./WaffleChart.svelte";
 export type { RibbonChartTone, RibbonChartDatum } from "./RibbonChart.svelte";
 export type { AnomalySwimLaneTone, AnomalySwimLaneBucket, AnomalySwimLaneSeries } from "./AnomalySwimLaneChart.svelte";
 export type { FlamegraphNode } from "./FlamegraphChart.svelte";
 export type { TraceSpan } from "./TraceWaterfallChart.svelte";
+export type { DecompositionTreeNode, DecompositionTreeLevel, DecompositionTreeData } from "./DecompositionTreeChart.svelte";
+export type { Density2DTone, Density2DPoint } from "./Density2DChart.svelte";
 export type { FunnelChartTone, FunnelChartDatum } from "./FunnelChart.svelte";
 export type { ViolinChartDatum, ViolinChartTone } from "./ViolinChart.svelte";
 export type { WaterfallType, WaterfallChartDatum } from "./WaterfallChart.svelte";