@sentropic/design-system-svelte 0.11.0 → 0.13.0

package/dist/Collapsible.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { ChevronDown } from "@lucide/svelte";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type CollapsibleProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "title"> & {
+    /** État ouvert (bindable). */
+    open?: boolean;
+    title: string;
+    disabled?: boolean;
+    onToggle?: (open: boolean) => void;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    open = $bindable(false),
+    title,
+    disabled = false,
+    onToggle,
+    class: className,
+    children,
+    ...rest
+  }: CollapsibleProps = $props();
+
+  const uid = `st-collapsible-${Math.random().toString(36).slice(2, 9)}`;
+
+  const classes = $derived(
+    ["st-collapsible", open ? "st-collapsible--open" : null, className].filter(Boolean).join(" ")
+  );
+
+  function toggle() {
+    if (disabled) return;
+    open = !open;
+    onToggle?.(open);
+  }
+</script>
+
+<div {...rest} class={classes}>
+  <button
+    type="button"
+    class="st-collapsible__trigger"
+    aria-expanded={open ? "true" : "false"}
+    aria-controls={`${uid}-region`}
+    id={`${uid}-trigger`}
+    {disabled}
+    onclick={toggle}
+  >
+    <span class="st-collapsible__title">{title}</span>
+    <span class="st-collapsible__icon" aria-hidden="true">
+      <ChevronDown size={18} strokeWidth={2.25} />
+    </span>
+  </button>
+  {#if open}
+    <div
+      class="st-collapsible__region"
+      role="region"
+      id={`${uid}-region`}
+      aria-labelledby={`${uid}-trigger`}
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-collapsible {
+    color: var(--st-semantic-text-primary);
+    width: 100%;
+  }
+
+  .st-collapsible__trigger {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: var(--st-component-accordion-text, inherit);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    font-size: var(--st-component-accordion-fontSize, 0.9375rem);
+    font-weight: var(--st-component-accordion-fontWeight, 650);
+    gap: 0.75rem;
+    justify-content: space-between;
+    line-height: var(--st-component-accordion-lineHeight, 1.3);
+    padding: var(--st-component-accordion-paddingBlock, 0.625rem)
+      var(--st-component-accordion-paddingInline, 0.25rem);
+    text-align: start;
+    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 100%;
+  }
+
+  .st-collapsible__trigger:hover:not(:disabled) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+  }
+
+  .st-collapsible__trigger:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: -2px;
+  }
+
+  .st-collapsible__trigger:disabled {
+    color: var(--st-semantic-text-muted);
+    cursor: not-allowed;
+  }
+
+  .st-collapsible__title {
+    flex: 1 1 auto;
+  }
+
+  .st-collapsible__icon {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: 1.25rem;
+    justify-content: center;
+    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 1.25rem;
+  }
+
+  .st-collapsible--open .st-collapsible__icon {
+    transform: rotate(180deg);
+  }
+
+  .st-collapsible__region {
+    color: var(--st-semantic-text-secondary);
+    line-height: 1.5;
+    padding: 0 0.25rem 0.625rem;
+  }
+</style>

package/dist/Collapsible.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type CollapsibleProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "title"> & {
+    /** État ouvert (bindable). */
+    open?: boolean;
+    title: string;
+    disabled?: boolean;
+    onToggle?: (open: boolean) => void;
+    class?: string;
+    children?: Snippet;
+};
+declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;
+//# sourceMappingURL=Collapsible.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Collapsible.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG;IAChF,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAgDJ,QAAA,MAAM,WAAW,0DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/ForceGraph.svelte

@@ -237,6 +237,18 @@
      * by `edgeCurve * dist * factor`. Defaults to a light 0.15.
      */
     edgeCurve?: number;
+    /**
+     * Repulsion multiplier controlling how spread out the layout is.
+     * >1 = graphe plus aéré, <1 = plus compact ; multiplie la force de
+     * répulsion sans toucher au fit-to-content. Defaults to 1. Clamped to
+     * [0.1, 10] internally to avoid layout explosions/collapses.
+     */
+    repulsion?: number;
+    /**
+     * Called when the user hovers (or keyboard-focuses) a node, and again with
+     * null when the hover/focus ends. Intended for syncing an external panel.
+     */
+    onNodeHover?: (node: ForceGraphNode | null) => void;
     class?: string;
   };
 
@@ -256,6 +268,8 @@
     onEdgeHover,
     legend,
     edgeCurve = 0.15,
+    repulsion = 1,
+    onNodeHover,
     class: className
   }: ForceGraphProps = $props();
 
@@ -311,7 +325,8 @@
     es: ForceGraphEdge[],
     w: number,
     h: number,
-    ticks: number
+    ticks: number,
+    repulsionFactor: number
   ): Map<string, { x: number; y: number }> {
     const cx = w / 2;
     const cy = h / 2;
@@ -339,7 +354,11 @@
 
     const area = w * h;
     const k = Math.sqrt(area / Math.max(ns.length, 1)); // ideal node distance
-    const repulsion = k * k * 0.9;
+    // Clamp the caller-supplied factor so extreme values can't explode or
+    // collapse the layout. >1 spreads nodes out, <1 packs them tighter; the
+    // fit-to-content viewBox is recomputed afterwards so spacing just fills space.
+    const clampedRepulsion = Math.min(Math.max(repulsionFactor, 0.1), 10);
+    const repulsion = k * k * 0.9 * clampedRepulsion;
     const restLength = k * 0.8;
     const springK = 0.04;
     const gravity = 0.012;
@@ -426,7 +445,7 @@
   // honouring the motion preference (no rAF loop, no jitter).
   const layout = $derived.by(() => {
     const ticks = Math.max(1, Math.round(iterations));
-    return runSimulation(nodes, edges, width, height, ticks);
+    return runSimulation(nodes, edges, width, height, ticks, repulsion);
   });
 
   const positionedNodes = $derived.by(() =>
@@ -584,6 +603,38 @@
     return !(srcActive || tgtActive);
   }
 
+  // ---------------------------------------------------------------------------
+  // Hover-connexe (demand 7): hovering a node fades the rest of the graph the
+  // same way selection does — the hovered node and its direct neighbours stay
+  // full, every other node dims, and only edges incident to the hovered node
+  // keep their opacity. Composes with selection (predicates OR'd together).
+  // ---------------------------------------------------------------------------
+  const hoveredNodeId = $derived(
+    hoveredNodeIndex != null ? (positionedNodes[hoveredNodeIndex]?.node.id ?? null) : null
+  );
+  const hoverActiveSet = $derived.by(() => {
+    const set = new Set<string>();
+    if (hoveredNodeId == null) return set;
+    set.add(hoveredNodeId);
+    const nb = adjacency.get(hoveredNodeId);
+    if (nb) for (const n of nb) set.add(n);
+    return set;
+  });
+
+  // A node is dimmed by hover when a node is hovered and this one is neither
+  // the hovered node nor one of its direct neighbours.
+  function isHoverDimmedNode(id: string): boolean {
+    if (hoveredNodeId == null) return false;
+    return !hoverActiveSet.has(id);
+  }
+
+  // An edge is dimmed by hover when a node is hovered and the edge is not
+  // incident to it (keep only the hovered node's own edges full).
+  function isHoverDimmedEdge(e: ForceGraphEdge): boolean {
+    if (hoveredNodeId == null) return false;
+    return e.source !== hoveredNodeId && e.target !== hoveredNodeId;
+  }
+
   // Keyboard handler for a node circle: Space/Enter → onSelect, Enter → onOpenEntity.
   function handleNodeKeydown(id: string, e: KeyboardEvent) {
     if (e.key === "Enter" || e.key === " ") {
@@ -734,7 +785,7 @@
             class:st-forceGraph__edge--weak={e.edge.weak}
             class:st-forceGraph__edge--emphasis={e.edge.emphasis}
             class:st-forceGraph__edge--hovered={hoveredEdgeIndex === e.i}
-            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge)}
+            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge) || isHoverDimmedEdge(e.edge)}
             d={e.path}
             fill="none"
             stroke-dasharray={e.dashArray}
@@ -747,7 +798,7 @@
             class:st-forceGraph__edge--weak={e.edge.weak}
             class:st-forceGraph__edge--emphasis={e.edge.emphasis}
             class:st-forceGraph__edge--hovered={hoveredEdgeIndex === e.i}
-            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge)}
+            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge) || isHoverDimmedEdge(e.edge)}
             x1={e.x1}
             y1={e.y1}
             x2={e.x2}
@@ -764,7 +815,7 @@
       {#each positionedNodes as p (p.node.id)}
         <g
           class="st-forceGraph__node st-forceGraph__node--{p.tone}"
-          class:st-forceGraph__node--dim={(hoveredNodeIndex !== null && hoveredNodeIndex !== p.i) || isSelectionDimmed(p.node.id)}
+          class:st-forceGraph__node--dim={isHoverDimmedNode(p.node.id) || isSelectionDimmed(p.node.id)}
           class:st-forceGraph__node--selected={selectedSet.has(p.node.id)}
           class:st-forceGraph__node--focus={focusId === p.node.id}
           transform="translate({p.x} {p.y})"
@@ -777,10 +828,10 @@
               role="button"
               aria-label="{p.title}{p.node.group !== undefined ? `: ${p.node.group}` : ''}"
               aria-pressed={selectedSet.has(p.node.id)}
-              onmouseenter={() => (hoveredNodeIndex = p.i)}
-              onmouseleave={() => (hoveredNodeIndex = null)}
-              onfocus={() => (hoveredNodeIndex = p.i)}
-              onblur={() => (hoveredNodeIndex = null)}
+              onmouseenter={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onmouseleave={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
+              onfocus={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onblur={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
               onclick={() => onSelect?.(p.node.id)}
               ondblclick={() => onOpenEntity?.(p.node.id)}
               onkeydown={(e) => handleNodeKeydown(p.node.id, e)}
@@ -793,10 +844,10 @@
               role="button"
               aria-label="{p.title}{p.node.group !== undefined ? `: ${p.node.group}` : ''}"
               aria-pressed={selectedSet.has(p.node.id)}
-              onmouseenter={() => (hoveredNodeIndex = p.i)}
-              onmouseleave={() => (hoveredNodeIndex = null)}
-              onfocus={() => (hoveredNodeIndex = p.i)}
-              onblur={() => (hoveredNodeIndex = null)}
+              onmouseenter={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onmouseleave={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
+              onfocus={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onblur={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
               onclick={() => onSelect?.(p.node.id)}
               ondblclick={() => onOpenEntity?.(p.node.id)}
               onkeydown={(e) => handleNodeKeydown(p.node.id, e)}

package/dist/ForceGraph.svelte.d.ts

@@ -126,6 +126,18 @@ type ForceGraphProps = {
      * by `edgeCurve * dist * factor`. Defaults to a light 0.15.
      */
     edgeCurve?: number;
+    /**
+     * Repulsion multiplier controlling how spread out the layout is.
+     * >1 = graphe plus aéré, <1 = plus compact ; multiplie la force de
+     * répulsion sans toucher au fit-to-content. Defaults to 1. Clamped to
+     * [0.1, 10] internally to avoid layout explosions/collapses.
+     */
+    repulsion?: number;
+    /**
+     * Called when the user hovers (or keyboard-focuses) a node, and again with
+     * null when the hover/focus ends. Intended for syncing an external panel.
+     */
+    onNodeHover?: (node: ForceGraphNode | null) => void;
     class?: string;
 };
 declare const ForceGraph: import("svelte").Component<ForceGraphProps, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.svelte.ts"],"names":[],"mappings":"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"}

package/dist/RadioGroup.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+  export interface RadioGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    helperText?: string;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import Radio from "./Radio.svelte";
+
+  type RadioGroupProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "class" | "onchange"> & {
+    legend: string;
+    /** Valeur sélectionnée (contrôlée). */
+    value?: string;
+    onchange?: (value: string) => void;
+    orientation?: "vertical" | "horizontal";
+    /** Nom partagé garantissant l'exclusivité radio. Requis. */
+    name: string;
+    options?: RadioGroupOption[];
+    helperText?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    legend,
+    value,
+    onchange,
+    orientation = "vertical",
+    name,
+    options = [],
+    helperText,
+    disabled = false,
+    class: className,
+    children,
+    ...rest
+  }: RadioGroupProps = $props();
+
+  const classes = $derived(
+    ["st-radioGroup", `st-radioGroup--${orientation}`, className].filter(Boolean).join(" ")
+  );
+
+  function select(optionValue: string) {
+    if (optionValue === value) return;
+    onchange?.(optionValue);
+  }
+</script>
+
+<fieldset {...rest} class={classes} {disabled}>
+  <legend class="st-radioGroup__legend">{legend}</legend>
+  {#if helperText}
+    <p class="st-radioGroup__help">{helperText}</p>
+  {/if}
+  <div class="st-radioGroup__options">
+    {#each options as option (option.value)}
+      <Radio
+        label={option.label}
+        helperText={option.helperText}
+        {name}
+        value={option.value}
+        checked={value === option.value}
+        disabled={option.disabled}
+        onchange={() => select(option.value)}
+      />
+    {/each}
+    {@render children?.()}
+  </div>
+</fieldset>
+
+<style>
+  .st-radioGroup {
+    border: 0;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .st-radioGroup__legend {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    font-size: 0.9375rem;
+    font-weight: 650;
+    line-height: 1.3;
+    padding: 0;
+  }
+
+  .st-radioGroup__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+    margin: 0.25rem 0 0;
+  }
+
+  .st-radioGroup__options {
+    display: flex;
+    gap: var(--st-spacing-3, 0.75rem);
+    margin-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-radioGroup--vertical .st-radioGroup__options {
+    flex-direction: column;
+  }
+
+  .st-radioGroup--horizontal .st-radioGroup__options {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+</style>

package/dist/RadioGroup.svelte.d.ts

@@ -0,0 +1,26 @@
+export interface RadioGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    helperText?: string;
+}
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type RadioGroupProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "class" | "onchange"> & {
+    legend: string;
+    /** Valeur sélectionnée (contrôlée). */
+    value?: string;
+    onchange?: (value: string) => void;
+    orientation?: "vertical" | "horizontal";
+    /** Nom partagé garantissant l'exclusivité radio. Requis. */
+    name: string;
+    options?: RadioGroupOption[];
+    helperText?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+};
+declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACvF,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkDJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}