@sentropic/design-system-svelte 0.34.0 → 0.34.20

package/dist/TimelineChart.svelte

@@ -0,0 +1,362 @@
+<script lang="ts" module>
+  export type TimelineChartTone =
+    | "category1"
+    | "category2"
+    | "category3"
+    | "category4"
+    | "category5"
+    | "category6"
+    | "category7"
+    | "category8";
+
+  export type TimelineChartEvent = {
+    /** Point on the axis (year, day index, ordinal step…). */
+    position: number;
+    /** Required short label, shown above/below the marker (alternated). */
+    label: string;
+    /** Optional longer description, surfaced in the accessible list + tooltip. */
+    description?: string;
+    /** Optional explicit categorical tone; otherwise cycles category1..8. */
+    tone?: TimelineChartTone;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type TimelineChartProps = {
+    data: TimelineChartEvent[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  let { data, label, width = 640, height = 240, class: className }: TimelineChartProps = $props();
+
+  const MARGIN = { top: 12, right: 24, bottom: 32, left: 24 };
+  const CATEGORY_COUNT = 8;
+  // Max characters before the label is ellipsised (keeps connectors readable).
+  const LABEL_MAX = 18;
+
+  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 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 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);
+  }
+
+  function toneClass(tone: TimelineChartTone | undefined, index: number): TimelineChartTone {
+    if (tone) return tone;
+    return `category${(index % CATEGORY_COUNT) + 1}` as TimelineChartTone;
+  }
+
+  function truncate(text: string): string {
+    return text.length > LABEL_MAX ? `${text.slice(0, LABEL_MAX - 1)}…` : text;
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  const plotWidth = $derived(Math.max(width - MARGIN.left - MARGIN.right, 1));
+  const axisY = $derived(MARGIN.top + Math.max(height - MARGIN.top - MARGIN.bottom, 1) / 2);
+
+  // Sorted, finite-position events. `label` is required so missing labels drop.
+  const events = $derived(
+    data
+      .filter((e) => Number.isFinite(e.position) && typeof e.label === "string")
+      .slice()
+      .sort((a, b) => a.position - b.position)
+  );
+
+  const positionDomain = $derived.by(() => {
+    if (events.length === 0) return { min: 0, max: 1 };
+    const xs = events.map((e) => e.position);
+    const min = Math.min(...xs);
+    const max = Math.max(...xs);
+    return min === max ? { min: min - 1, max: max + 1 } : { min, max };
+  });
+
+  const ticks = $derived(niceTicks(positionDomain.min, positionDomain.max, 5));
+
+  // Domain extended to the tick range so markers + axis share a frame.
+  const frame = $derived({
+    min: Math.min(positionDomain.min, ticks[0]),
+    max: Math.max(positionDomain.max, ticks[ticks.length - 1])
+  });
+
+  const markers = $derived(
+    events.map((e, i) => {
+      const x = MARGIN.left + scaleLinear(e.position, frame.min, frame.max, 0, plotWidth);
+      const above = i % 2 === 0;
+      return {
+        index: i,
+        x,
+        above,
+        tone: toneClass(e.tone, i),
+        label: truncate(e.label),
+        fullLabel: e.label,
+        description: e.description,
+        position: e.position
+      };
+    })
+  );
+
+  const tickEntries = $derived(
+    ticks.map((tick) => ({
+      value: tick,
+      x: MARGIN.left + scaleLinear(tick, frame.min, frame.max, 0, plotWidth)
+    }))
+  );
+
+  const dataValueItems = $derived(
+    events.map((e) =>
+      e.description ? `${e.position}: ${e.label} — ${e.description}` : `${e.position}: ${e.label}`
+    )
+  );
+
+  function handleLeave() {
+    hoveredIndex = null;
+  }
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hoveredIndex = null;
+      return;
+    }
+    const index = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(index) ? index : null;
+  }
+
+  const classes = () => ["st-timelineChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-timelineChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={handleLeave}
+  >
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <!-- central timeline -->
+      <line
+        class="st-timelineChart__axis"
+        x1={MARGIN.left}
+        x2={width - MARGIN.right}
+        y1={axisY}
+        y2={axisY}
+      />
+
+      <!-- graduated ticks -->
+      {#each tickEntries as tick (tick.value)}
+        <line
+          class="st-timelineChart__tick"
+          x1={tick.x}
+          x2={tick.x}
+          y1={axisY}
+          y2={axisY + 5}
+        />
+        <text
+          class="st-timelineChart__tickLabel"
+          x={tick.x}
+          y={height - MARGIN.bottom + 18}
+          text-anchor="middle"
+        >
+          {formatTick(tick.value)}
+        </text>
+      {/each}
+
+      <!-- events: connector + marker + alternated label -->
+      {#each markers as m (m.index)}
+        {@const labelY = m.above ? axisY - 26 : axisY + 26}
+        {@const connectorY = m.above ? axisY - 12 : axisY + 12}
+        <line
+          class={`st-timelineChart__connector st-timelineChart__connector--${m.tone}`}
+          x1={m.x}
+          x2={m.x}
+          y1={axisY}
+          y2={connectorY}
+        />
+        <text
+          class="st-timelineChart__eventLabel"
+          x={m.x}
+          y={labelY}
+          text-anchor="middle"
+          dominant-baseline={m.above ? "auto" : "hanging"}
+        >
+          {m.label}
+        </text>
+        <circle
+          class={`st-timelineChart__marker st-timelineChart__marker--${m.tone}`}
+          cx={m.x}
+          cy={axisY}
+          r="6"
+          data-chart-index={m.index}
+        />
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if hoveredIndex !== null && markers[hoveredIndex]}
+    {@const m = markers[hoveredIndex]}
+    <div
+      class="st-timelineChart__tooltip"
+      role="presentation"
+      style="left: {(m.x / width) * 100}%; top: {(axisY / height) * 100}%"
+    >
+      <span class="st-timelineChart__tooltipLabel">{m.fullLabel}</span>
+      <span class="st-timelineChart__tooltipValue">{m.position}</span>
+      {#if m.description}
+        <span class="st-timelineChart__tooltipDesc">{m.description}</span>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-timelineChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-timelineChart svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-timelineChart__visual {
+    display: block;
+  }
+
+  .st-timelineChart__axis {
+    stroke: var(--st-semantic-border-strong);
+    stroke-width: 2;
+  }
+
+  .st-timelineChart__tick {
+    stroke: var(--st-semantic-border-subtle);
+    stroke-width: 1;
+  }
+
+  .st-timelineChart__tickLabel {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.6875rem;
+  }
+
+  .st-timelineChart__connector {
+    stroke: currentColor;
+    stroke-width: 1.5;
+    opacity: 0.6;
+  }
+
+  .st-timelineChart__eventLabel {
+    fill: var(--st-semantic-text-primary);
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .st-timelineChart__marker {
+    fill: currentColor;
+    stroke: var(--st-semantic-surface-default);
+    stroke-width: 2;
+    cursor: pointer;
+    transition: r 120ms ease;
+  }
+
+  .st-timelineChart__marker:hover {
+    r: 7.5;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-timelineChart__marker {
+      transition: none;
+    }
+  }
+
+  .st-timelineChart__connector--category1,
+  .st-timelineChart__marker--category1 { color: var(--st-semantic-data-category1); }
+  .st-timelineChart__connector--category2,
+  .st-timelineChart__marker--category2 { color: var(--st-semantic-data-category2); }
+  .st-timelineChart__connector--category3,
+  .st-timelineChart__marker--category3 { color: var(--st-semantic-data-category3); }
+  .st-timelineChart__connector--category4,
+  .st-timelineChart__marker--category4 { color: var(--st-semantic-data-category4); }
+  .st-timelineChart__connector--category5,
+  .st-timelineChart__marker--category5 { color: var(--st-semantic-data-category5); }
+  .st-timelineChart__connector--category6,
+  .st-timelineChart__marker--category6 { color: var(--st-semantic-data-category6); }
+  .st-timelineChart__connector--category7,
+  .st-timelineChart__marker--category7 { color: var(--st-semantic-data-category7); }
+  .st-timelineChart__connector--category8,
+  .st-timelineChart__marker--category8 { color: var(--st-semantic-data-category8); }
+
+  .st-timelineChart__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;
+    max-width: 16rem;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    transform: translate(-50%, calc(-100% - 10px));
+    white-space: normal;
+    z-index: 1;
+  }
+
+  .st-timelineChart__tooltipLabel {
+    font-weight: 600;
+  }
+
+  .st-timelineChart__tooltipValue {
+    opacity: 0.85;
+  }
+
+  .st-timelineChart__tooltipDesc {
+    opacity: 0.85;
+  }
+</style>

package/dist/TimelineChart.svelte.d.ts

@@ -0,0 +1,22 @@
+export type TimelineChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type TimelineChartEvent = {
+    /** Point on the axis (year, day index, ordinal step…). */
+    position: number;
+    /** Required short label, shown above/below the marker (alternated). */
+    label: string;
+    /** Optional longer description, surfaced in the accessible list + tooltip. */
+    description?: string;
+    /** Optional explicit categorical tone; otherwise cycles category1..8. */
+    tone?: TimelineChartTone;
+};
+type TimelineChartProps = {
+    data: TimelineChartEvent[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const TimelineChart: import("svelte").Component<TimelineChartProps, {}, "">;
+type TimelineChart = ReturnType<typeof TimelineChart>;
+export default TimelineChart;
+//# sourceMappingURL=TimelineChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TimelineChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAMF,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiLJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/TreegraphChart.svelte

@@ -0,0 +1,281 @@
+<script lang="ts" module>
+  export type TreegraphChartTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  export type TreegraphChartNode = {
+    id: string;
+    parentId?: string | null;
+    label: string;
+    tone?: TreegraphChartTone;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type TreegraphChartProps = {
+    /** Nœuds plats : `parentId` null/absent = racine. Plusieurs racines acceptées. */
+    data: TreegraphChartNode[];
+    width?: number;
+    height?: number;
+    label: string;
+    class?: string;
+  };
+
+  let {
+    data,
+    width = 640,
+    height = 360,
+    label,
+    class: className
+  }: TreegraphChartProps = $props();
+
+  const TONES = [
+    "category1", "category2", "category3", "category4",
+    "category5", "category6", "category7", "category8"
+  ] as const;
+
+  type Node = {
+    id: string;
+    label: string;
+    tone: TreegraphChartTone;
+    depth: number;
+    x: number; // centre X (profondeur → horizontal)
+    y: number; // centre Y
+    parentId: string | null;
+  };
+
+  type Link = { id: string; x1: number; y1: number; x2: number; y2: number };
+
+  const R = 7; // rayon du cercle
+  const PAD_X = 80; // marge latérale (place pour les labels)
+  const PAD_Y = 12; // marge verticale
+
+  type Layout = { nodes: Node[]; links: Link[]; rowH: number };
+
+  const layout = $derived.by<Layout>(() => {
+    if (!data || data.length === 0) return { nodes: [], links: [], rowH: 0 };
+
+    // Index + détection des racines (parentId invalide/cyclique → traité comme racine).
+    const byId = new Map<string, TreegraphChartNode>();
+    for (const n of data) if (n.id != null && !byId.has(n.id)) byId.set(n.id, n);
+
+    const validParent = (n: TreegraphChartNode): 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: TreegraphChartNode | 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);
+
+    // Y (centre) : feuille = sa rangée ; parent = moyenne des enfants.
+    const usableY = Math.max(height - PAD_Y * 2, 1);
+    const rowH = usableY / leafCount;
+
+    const centerY = new Map<string, number>();
+    const computeY = (id: string): number => {
+      const cached = centerY.get(id);
+      if (cached != null) return cached;
+      const kids = childrenOf.get(id) ?? [];
+      let cy: number;
+      if (kids.length === 0) {
+        const row = leafOrder.get(id) ?? 0;
+        cy = PAD_Y + row * rowH + rowH / 2;
+      } else {
+        const ys = kids.map((k) => computeY(k));
+        cy = ys.reduce((s, v) => s + v, 0) / ys.length;
+      }
+      centerY.set(id, cy);
+      return cy;
+    };
+    for (const r of roots) computeY(r);
+
+    // X : une colonne par niveau, répartie horizontalement.
+    const levels = maxDepth + 1;
+    const usableX = Math.max(width - PAD_X * 2, 1);
+    const colGap = levels > 1 ? usableX / (levels - 1) : 0;
+    const xForDepth = (d: number) => (levels > 1 ? PAD_X + d * colGap : width / 2);
+
+    const nodes: Node[] = [];
+    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;
+      nodes.push({
+        id: n.id,
+        label: n.label,
+        tone,
+        depth,
+        x: xForDepth(depth),
+        y: centerY.get(n.id) ?? height / 2,
+        parentId: validParent(n)
+      });
+    }
+
+    const nodeById = new Map(nodes.map((b) => [b.id, b]));
+    const links: Link[] = [];
+    for (const b of nodes) {
+      if (b.parentId == null) continue;
+      const parent = nodeById.get(b.parentId);
+      if (!parent) continue;
+      links.push({
+        id: b.id,
+        x1: parent.x + R,
+        y1: parent.y,
+        x2: b.x - R,
+        y2: b.y
+      });
+    }
+
+    return { nodes, links, rowH };
+  });
+
+  // Police adaptée à la hauteur de rangée (plus petite si serré).
+  const fontSize = $derived(layout.rowH < 18 ? 9 : layout.rowH < 26 ? 10 : 11);
+  // Nombre de caractères affichables avant ellipsis (approx. largeur de glyphe).
+  const maxChars = $derived(Math.max(2, Math.floor((PAD_X - R - 6) / (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.nodes.map((b) => {
+      const parent = b.parentId != null ? layout.nodes.find((p) => p.id === b.parentId) : undefined;
+      return parent ? `${b.label} (${b.id}) → ${parent.label}` : `${b.label} (${b.id})`;
+    })
+  );
+
+  const classes = () => ["st-treegraphChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div class="st-treegraphChart__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 cx = (link.x1 + link.x2) / 2}
+        <path
+          class="st-treegraphChart__link"
+          d="M {link.x1} {link.y1} C {cx} {link.y1} {cx} {link.y2} {link.x2} {link.y2}"
+          fill="none"
+        />
+      {/each}
+
+      {#each layout.nodes as node (node.id)}
+        {@const isLeaf = !layout.nodes.some((c) => c.parentId === node.id)}
+        <g class="st-treegraphChart__node">
+          <circle
+            class="st-treegraphChart__dot st-treegraphChart__dot--{node.tone}"
+            cx={node.x}
+            cy={node.y}
+            r={R}
+          />
+          <text
+            class="st-treegraphChart__label"
+            x={isLeaf ? node.x + R + 4 : node.x - R - 4}
+            y={node.y}
+            text-anchor={isLeaf ? "start" : "end"}
+            dominant-baseline="central"
+            style="font-size: {fontSize}px"
+          >
+            {clip(node.label, maxChars)}
+          </text>
+        </g>
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+</div>
+
+<style>
+  .st-treegraphChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-treegraphChart svg,
+  .st-treegraphChart__visual {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-treegraphChart__link {
+    stroke: var(--st-semantic-border-default);
+    stroke-width: 1.5;
+  }
+
+  .st-treegraphChart__dot {
+    stroke: var(--st-semantic-surface-default);
+    stroke-width: 1.5;
+  }
+
+  .st-treegraphChart__dot--category1 { fill: var(--st-semantic-data-category1); }
+  .st-treegraphChart__dot--category2 { fill: var(--st-semantic-data-category2); }
+  .st-treegraphChart__dot--category3 { fill: var(--st-semantic-data-category3); }
+  .st-treegraphChart__dot--category4 { fill: var(--st-semantic-data-category4); }
+  .st-treegraphChart__dot--category5 { fill: var(--st-semantic-data-category5); }
+  .st-treegraphChart__dot--category6 { fill: var(--st-semantic-data-category6); }
+  .st-treegraphChart__dot--category7 { fill: var(--st-semantic-data-category7); }
+  .st-treegraphChart__dot--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-treegraphChart__label {
+    fill: var(--st-semantic-text-primary);
+    font-weight: 600;
+    pointer-events: none;
+  }
+</style>

package/dist/TreegraphChart.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreegraphChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TreegraphChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,kBAAkB,GAC1B,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAMF,KAAK,mBAAmB,GAAG;IACzB,kFAAkF;IAClF,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+MJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}