@sentropic/design-system-svelte 0.34.0 → 0.34.21

package/dist/OHLCChart.svelte

@@ -0,0 +1,343 @@
+<script lang="ts" module>
+  /**
+   * OHLCChart - barres open/high/low/close (bâtons financiers).
+   * Variante du CandlestickChart : barre verticale du low au high,
+   * tick gauche au niveau open, tick droite au niveau close.
+   * API canonique (référence Svelte, React/Vue doivent s'aligner)
+   *
+   * Props obligatoires :
+   *   data   OHLCChartDatum[]  - tableau {label, open, high, low, close}
+   *   label  string
+   *
+   * Props optionnelles :
+   *   width   number  (défaut 480)
+   *   height  number  (défaut 240)
+   *   class   string
+   */
+  export type OHLCChartDatum = {
+    label: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type OHLCChartProps = {
+    data: OHLCChartDatum[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  let {
+    data = [],
+    label,
+    width = 480,
+    height = 240,
+    class: className
+  }: OHLCChartProps = $props();
+
+  const MARGIN = { top: 12, right: 16, bottom: 32, left: 52 };
+
+  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 niceTicks(min: number, max: number, target = 5): number[] {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
+      const base = Number.isFinite(max) ? max : 0;
+      return [base];
+    }
+    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 = 1 * 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 formatTick(v: number): string {
+    if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k`;
+    if (Number.isInteger(v)) return String(v);
+    return v.toFixed(1);
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  const plotWidth = $derived(Math.max(width - MARGIN.left - MARGIN.right, 1));
+  const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
+
+  // Filtrer les barres invalides AVANT le domaine
+  const validData = $derived(
+    data.filter((d) =>
+      Number.isFinite(d.open) &&
+      Number.isFinite(d.high) &&
+      Number.isFinite(d.low) &&
+      Number.isFinite(d.close)
+    )
+  );
+
+  const domainBounds = $derived.by(() => {
+    const allVals: number[] = [];
+    for (const d of validData) {
+      // Domaine inclut open/high/low/close (pas seulement high/low)
+      allVals.push(d.open, d.high, d.low, d.close);
+    }
+    if (allVals.length === 0) return { rawMin: 0, rawMax: 1 };
+    const rawMin = Math.min(...allVals);
+    const rawMax = Math.max(...allVals);
+    // Domaine plat → fallback range 1 pour éviter division par 0
+    return { rawMin, rawMax: rawMax === rawMin ? rawMin + 1 : rawMax };
+  });
+
+  const ticks = $derived(niceTicks(domainBounds.rawMin, domainBounds.rawMax, 5));
+  const domainMin = $derived(ticks[0]);
+  const domainMax = $derived(ticks[ticks.length - 1]);
+
+  const bars = $derived.by(() => {
+    if (validData.length === 0) return [];
+    const band = plotWidth / validData.length;
+    // longueur du tick open/close (de chaque côté de la barre)
+    const tickW = Math.min(band * 0.3, 12);
+
+    return validData.map((d, i) => {
+      // clamp high/low pour garantir high≥max(O,C) et low≤min(O,C)
+      const clampedHigh = Math.max(d.high, d.open, d.close);
+      const clampedLow = Math.min(d.low, d.open, d.close);
+
+      const bullish = d.close >= d.open;
+      const centerX = MARGIN.left + band * i + band / 2;
+
+      const highY = MARGIN.top + scaleLinear(clampedHigh, domainMin, domainMax, plotHeight, 0);
+      const lowY = MARGIN.top + scaleLinear(clampedLow, domainMin, domainMax, plotHeight, 0);
+      const openY = MARGIN.top + scaleLinear(d.open, domainMin, domainMax, plotHeight, 0);
+      const closeY = MARGIN.top + scaleLinear(d.close, domainMin, domainMax, plotHeight, 0);
+
+      return {
+        datum: d,
+        index: i,
+        bullish,
+        centerX,
+        barHighY: highY,
+        barLowY: lowY,
+        openY,
+        closeY,
+        openX: centerX - tickW,
+        closeX: centerX + tickW,
+        tooltipY: Math.min(highY, openY, closeY)
+      };
+    });
+  });
+
+  const dataValueItems = $derived(
+    validData.map((d) => `${d.label}: O ${d.open} H ${d.high} L ${d.low} C ${d.close}`)
+  );
+
+  function handlePointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) { hoveredIndex = null; return; }
+    const idx = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(idx) ? idx : null;
+  }
+
+  const classes = () => ["st-ohlcChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-ohlcChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handlePointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <!-- gridlines + tick labels -->
+      {#each ticks as tick (tick)}
+        {@const ty = MARGIN.top + scaleLinear(tick, domainMin, domainMax, plotHeight, 0)}
+        <line class="st-ohlcChart__grid" x1={MARGIN.left} x2={width - MARGIN.right} y1={ty} y2={ty} />
+        <text class="st-ohlcChart__tickLabel" x={MARGIN.left - 6} y={ty} text-anchor="end" dominant-baseline="middle">
+          {formatTick(tick)}
+        </text>
+      {/each}
+
+      <!-- axes -->
+      <line class="st-ohlcChart__axis" x1={MARGIN.left} x2={MARGIN.left} y1={MARGIN.top} y2={height - MARGIN.bottom} />
+      <line class="st-ohlcChart__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
+
+      <!-- clé composite pour éviter les doublons -->
+      {#each bars as b, i (`${i}-${b.datum.label}`)}
+        <g
+          class="st-ohlcChart__bar st-ohlcChart__bar--{b.bullish ? 'up' : 'down'}"
+          class:st-ohlcChart__bar--dim={hoveredIndex !== null && hoveredIndex !== i}
+        >
+          <!-- barre verticale low → high -->
+          <line
+            class="st-ohlcChart__range"
+            x1={b.centerX}
+            x2={b.centerX}
+            y1={b.barHighY}
+            y2={b.barLowY}
+            data-chart-index={i}
+          />
+          <!-- tick open (gauche) -->
+          <line
+            class="st-ohlcChart__open"
+            x1={b.openX}
+            x2={b.centerX}
+            y1={b.openY}
+            y2={b.openY}
+            data-chart-index={i}
+          />
+          <!-- tick close (droite) -->
+          <line
+            class="st-ohlcChart__close"
+            x1={b.centerX}
+            x2={b.closeX}
+            y1={b.closeY}
+            y2={b.closeY}
+            data-chart-index={i}
+          />
+        </g>
+        <!-- category label -->
+        <text
+          class="st-ohlcChart__categoryLabel"
+          x={b.centerX}
+          y={height - MARGIN.bottom + 16}
+          text-anchor="middle"
+        >
+          {b.datum.label}
+        </text>
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if hoveredIndex !== null && bars[hoveredIndex]}
+    {@const b = bars[hoveredIndex]}
+    <div
+      class="st-ohlcChart__tooltip"
+      role="presentation"
+      style="left: {(b.centerX / width) * 100}%; top: {(b.tooltipY / height) * 100}%"
+    >
+      <span class="st-ohlcChart__tooltipLabel">{b.datum.label}</span>
+      <span class="st-ohlcChart__tooltipValue">O {b.datum.open} H {b.datum.high} L {b.datum.low} C {b.datum.close}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-ohlcChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-ohlcChart svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-ohlcChart__visual {
+    display: block;
+  }
+
+  .st-ohlcChart__axis {
+    stroke: var(--st-semantic-border-subtle);
+    stroke-width: 1;
+  }
+
+  .st-ohlcChart__grid {
+    stroke: var(--st-semantic-border-subtle);
+    stroke-dasharray: 2 3;
+    stroke-width: 1;
+    opacity: 0.7;
+  }
+
+  .st-ohlcChart__bar {
+    cursor: pointer;
+    transition: opacity 120ms ease;
+  }
+
+  .st-ohlcChart__bar--dim {
+    opacity: 0.4;
+  }
+
+  .st-ohlcChart__range,
+  .st-ohlcChart__open,
+  .st-ohlcChart__close {
+    stroke-width: 1.75;
+    stroke-linecap: round;
+  }
+
+  .st-ohlcChart__bar--up :is(.st-ohlcChart__range, .st-ohlcChart__open, .st-ohlcChart__close) {
+    stroke: var(--st-semantic-feedback-success);
+  }
+
+  .st-ohlcChart__bar--down :is(.st-ohlcChart__range, .st-ohlcChart__open, .st-ohlcChart__close) {
+    stroke: var(--st-semantic-feedback-error);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-ohlcChart__bar {
+      transition: none;
+    }
+  }
+
+  .st-ohlcChart__tickLabel,
+  .st-ohlcChart__categoryLabel {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.6875rem;
+  }
+
+  .st-ohlcChart__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-ohlcChart__tooltipLabel {
+    font-weight: 600;
+  }
+
+  .st-ohlcChart__tooltipValue {
+    opacity: 0.85;
+  }
+</style>

package/dist/OHLCChart.svelte.d.ts

@@ -0,0 +1,33 @@
+/**
+ * OHLCChart - barres open/high/low/close (bâtons financiers).
+ * Variante du CandlestickChart : barre verticale du low au high,
+ * tick gauche au niveau open, tick droite au niveau close.
+ * API canonique (référence Svelte, React/Vue doivent s'aligner)
+ *
+ * Props obligatoires :
+ *   data   OHLCChartDatum[]  - tableau {label, open, high, low, close}
+ *   label  string
+ *
+ * Props optionnelles :
+ *   width   number  (défaut 480)
+ *   height  number  (défaut 240)
+ *   class   string
+ */
+export type OHLCChartDatum = {
+    label: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+};
+type OHLCChartProps = {
+    data: OHLCChartDatum[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const OHLCChart: import("svelte").Component<OHLCChartProps, {}, "">;
+type OHLCChart = ReturnType<typeof OHLCChart>;
+export default OHLCChart;
+//# sourceMappingURL=OHLCChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OHLCChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OHLCChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqLJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/OrganizationChart.svelte

@@ -0,0 +1,284 @@
+<script lang="ts" module>
+  export type OrganizationChartTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  export type OrganizationChartNode = {
+    id: string;
+    parentId?: string | null;
+    label: string;
+    tone?: OrganizationChartTone;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type OrganizationChartProps = {
+    /** Nœuds plats : `parentId` null/absent = racine. Plusieurs racines acceptées. */
+    data: OrganizationChartNode[];
+    width?: number;
+    height?: number;
+    label: string;
+    class?: string;
+  };
+
+  let {
+    data,
+    width = 640,
+    height = 320,
+    label,
+    class: className
+  }: OrganizationChartProps = $props();
+
+  const TONES = [
+    "category1", "category2", "category3", "category4",
+    "category5", "category6", "category7", "category8"
+  ] as const;
+
+  type Box = {
+    id: string;
+    label: string;
+    tone: OrganizationChartTone;
+    depth: number;
+    x: number; // centre X
+    y: number; // haut de la boîte
+    parentId: string | null;
+  };
+
+  type Link = { id: string; x1: number; y1: number; x2: number; y2: number };
+
+  const BOX_H = 36;
+  const GAP_X = 16; // espace horizontal entre frères (feuilles)
+  const PAD_X = 8; // marge latérale
+
+  type Layout = { boxes: Box[]; links: Link[]; boxW: number };
+
+  const layout = $derived.by<Layout>(() => {
+    if (!data || data.length === 0) return { boxes: [], links: [], boxW: 0 };
+
+    // Index + détection des racines (parentId invalide/cyclique → traité comme racine).
+    const byId = new Map<string, OrganizationChartNode>();
+    for (const n of data) if (n.id != null && !byId.has(n.id)) byId.set(n.id, n);
+
+    const validParent = (n: OrganizationChartNode): string | null => {
+      const p = n.parentId;
+      if (p == null) return null;
+      if (!byId.has(p) || p === n.id) return null;
+      // Évite les cycles : remonte la chaîne, si on revient sur n.id → racine.
+      let cursor: string | null = p;
+      const seen = new Set<string>([n.id]);
+      while (cursor != null) {
+        if (seen.has(cursor)) return null;
+        seen.add(cursor);
+        const parent: OrganizationChartNode | undefined = byId.get(cursor);
+        cursor = parent ? (parent.parentId ?? null) : null;
+      }
+      return p;
+    };
+
+    const childrenOf = new Map<string, string[]>();
+    const roots: string[] = [];
+    for (const n of byId.values()) {
+      const p = validParent(n);
+      if (p == null) {
+        roots.push(n.id);
+      } else {
+        const list = childrenOf.get(p) ?? [];
+        list.push(n.id);
+        childrenOf.set(p, list);
+      }
+    }
+
+    // Profondeur par nœud + position des feuilles (parcours en profondeur, ordre stable).
+    const depthOf = new Map<string, number>();
+    const leafOrder = new Map<string, number>();
+    let leafCounter = 0;
+    let maxDepth = 0;
+
+    const visit = (id: string, depth: number) => {
+      depthOf.set(id, depth);
+      if (depth > maxDepth) maxDepth = depth;
+      const kids = childrenOf.get(id) ?? [];
+      if (kids.length === 0) {
+        leafOrder.set(id, leafCounter);
+        leafCounter += 1;
+        return;
+      }
+      for (const k of kids) visit(k, depth + 1);
+    };
+    for (const r of roots) visit(r, 0);
+
+    const leafCount = Math.max(leafCounter, 1);
+
+    // Largeur de boîte : on répartit `leafCount` colonnes sur la largeur utile.
+    const usable = Math.max(width - PAD_X * 2, 1);
+    const colW = usable / leafCount;
+    const boxW = Math.max(colW - GAP_X, 24);
+
+    // X (centre) : feuille = sa colonne ; parent = moyenne des enfants.
+    const centerX = new Map<string, number>();
+    const computeX = (id: string): number => {
+      const cached = centerX.get(id);
+      if (cached != null) return cached;
+      const kids = childrenOf.get(id) ?? [];
+      let cx: number;
+      if (kids.length === 0) {
+        const col = leafOrder.get(id) ?? 0;
+        cx = PAD_X + col * colW + colW / 2;
+      } else {
+        const xs = kids.map((k) => computeX(k));
+        cx = xs.reduce((s, v) => s + v, 0) / xs.length;
+      }
+      centerX.set(id, cx);
+      return cx;
+    };
+    for (const r of roots) computeX(r);
+
+    // Y : une rangée par niveau, répartie verticalement.
+    const levels = maxDepth + 1;
+    const usableY = Math.max(height - BOX_H, 1);
+    const rowGap = levels > 1 ? usableY / (levels - 1) : 0;
+    const yForDepth = (d: number) => (levels > 1 ? d * rowGap : (height - BOX_H) / 2);
+
+    const boxes: Box[] = [];
+    let toneIdx = 0;
+    // Ordre : profondeur croissante puis ordre d'insertion → rendu stable.
+    const ordered = [...byId.values()].filter((n) => depthOf.has(n.id));
+    for (const n of ordered) {
+      const depth = depthOf.get(n.id) ?? 0;
+      const tone = n.tone ?? TONES[toneIdx % TONES.length];
+      if (!n.tone) toneIdx += 1;
+      boxes.push({
+        id: n.id,
+        label: n.label,
+        tone,
+        depth,
+        x: centerX.get(n.id) ?? width / 2,
+        y: yForDepth(depth),
+        parentId: validParent(n)
+      });
+    }
+
+    const boxById = new Map(boxes.map((b) => [b.id, b]));
+    const links: Link[] = [];
+    for (const b of boxes) {
+      if (b.parentId == null) continue;
+      const parent = boxById.get(b.parentId);
+      if (!parent) continue;
+      links.push({
+        id: b.id,
+        x1: parent.x,
+        y1: parent.y + BOX_H,
+        x2: b.x,
+        y2: b.y
+      });
+    }
+
+    return { boxes, links, boxW };
+  });
+
+  // Police adaptée à la largeur de boîte (plus petite si étroite).
+  const fontSize = $derived(layout.boxW < 56 ? 9 : layout.boxW < 88 ? 10 : 12);
+  // Nombre de caractères affichables avant ellipsis (approx. largeur de glyphe).
+  const maxChars = $derived(Math.max(2, Math.floor((layout.boxW - 10) / (fontSize * 0.58))));
+
+  const clip = (s: string, n: number) => (s.length > n ? `${s.slice(0, Math.max(1, n - 1))}…` : s);
+
+  const dataValueItems = $derived(
+    layout.boxes.map((b) => {
+      const parent = b.parentId != null ? layout.boxes.find((p) => p.id === b.parentId) : undefined;
+      return parent ? `${b.label} (${b.id}) → ${parent.label}` : `${b.label} (${b.id})`;
+    })
+  );
+
+  const classes = () => ["st-organizationChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div class="st-organizationChart__visual" role="img" aria-label={label}>
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      {#each layout.links as link (link.id)}
+        {@const midY = (link.y1 + link.y2) / 2}
+        <path
+          class="st-organizationChart__link"
+          d="M {link.x1} {link.y1} V {midY} H {link.x2} V {link.y2}"
+          fill="none"
+        />
+      {/each}
+
+      {#each layout.boxes as box (box.id)}
+        <g class="st-organizationChart__node">
+          <rect
+            class="st-organizationChart__box st-organizationChart__box--{box.tone}"
+            x={box.x - layout.boxW / 2}
+            y={box.y}
+            width={layout.boxW}
+            height={BOX_H}
+            rx="6"
+          />
+          <text
+            class="st-organizationChart__label"
+            x={box.x}
+            y={box.y + BOX_H / 2}
+            text-anchor="middle"
+            dominant-baseline="central"
+            style="font-size: {fontSize}px"
+          >
+            {clip(box.label, maxChars)}
+          </text>
+        </g>
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+</div>
+
+<style>
+  .st-organizationChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-organizationChart svg,
+  .st-organizationChart__visual {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-organizationChart__link {
+    stroke: var(--st-semantic-border-default, #cbd5e1);
+    stroke-width: 1.5;
+  }
+
+  .st-organizationChart__box {
+    stroke: var(--st-semantic-surface-default, #fff);
+    stroke-width: 1.5;
+  }
+
+  .st-organizationChart__box--category1 { fill: var(--st-semantic-data-category1); }
+  .st-organizationChart__box--category2 { fill: var(--st-semantic-data-category2); }
+  .st-organizationChart__box--category3 { fill: var(--st-semantic-data-category3); }
+  .st-organizationChart__box--category4 { fill: var(--st-semantic-data-category4); }
+  .st-organizationChart__box--category5 { fill: var(--st-semantic-data-category5); }
+  .st-organizationChart__box--category6 { fill: var(--st-semantic-data-category6); }
+  .st-organizationChart__box--category7 { fill: var(--st-semantic-data-category7); }
+  .st-organizationChart__box--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-organizationChart__label {
+    fill: var(--st-semantic-text-inverse, #fff);
+    font-weight: 600;
+    pointer-events: none;
+  }
+</style>

package/dist/OrganizationChart.svelte.d.ts

@@ -0,0 +1,19 @@
+export type OrganizationChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type OrganizationChartNode = {
+    id: string;
+    parentId?: string | null;
+    label: string;
+    tone?: OrganizationChartTone;
+};
+type OrganizationChartProps = {
+    /** Nœuds plats : `parentId` null/absent = racine. Plusieurs racines acceptées. */
+    data: OrganizationChartNode[];
+    width?: number;
+    height?: number;
+    label: string;
+    class?: string;
+};
+declare const OrganizationChart: import("svelte").Component<OrganizationChartProps, {}, "">;
+type OrganizationChart = ReturnType<typeof OrganizationChart>;
+export default OrganizationChart;
+//# sourceMappingURL=OrganizationChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OrganizationChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,qBAAqB,GAC7B,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAMF,KAAK,sBAAsB,GAAG;IAC5B,kFAAkF;IAClF,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgNJ,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/PasswordInput.svelte

@@ -130,14 +130,17 @@
 
   .st-passwordInput--sm {
     min-height: var(--st-component-control-smHeight, 2rem);
+    font-size: 0.8125rem;
   }
 
   .st-passwordInput--md {
     min-height: var(--st-component-control-mdHeight, 2.5rem);
+    font-size: 0.875rem;
   }
 
   .st-passwordInput--lg {
     min-height: var(--st-component-control-lgHeight, 3rem);
+    font-size: 1rem;
   }
 
   .st-passwordInput:hover:not(:has(input:disabled)) {