@sentropic/design-system-vue 0.1.0 → 0.3.0

package/dist/BackToTop.d.ts

@@ -0,0 +1,79 @@
+export type BackToTopProps = {
+    label?: string;
+    disabled?: boolean;
+    targetId?: string;
+    threshold?: number;
+    autoHide?: boolean;
+    smooth?: boolean;
+    class?: string;
+};
+export declare const BackToTop: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    targetId: {
+        type: StringConstructor;
+        default: string;
+    };
+    threshold: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoHide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    smooth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    targetId: {
+        type: StringConstructor;
+        default: string;
+    };
+    threshold: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoHide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    smooth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    label: string;
+    disabled: boolean;
+    targetId: string;
+    threshold: number;
+    autoHide: boolean;
+    smooth: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=BackToTop.d.ts.map

package/dist/BackToTop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackToTop.d.ts","sourceRoot":"","sources":["../src/BackToTop.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAqFpB,CAAC"}

package/dist/BackToTop.js

@@ -0,0 +1,72 @@
+import { defineComponent, h, onMounted, onUnmounted, ref } from "vue";
+import { classNames } from "./classNames.js";
+export const BackToTop = defineComponent({
+    name: "BackToTop",
+    props: {
+        label: { type: String, default: "Retour en haut" },
+        disabled: { type: Boolean, default: false },
+        targetId: { type: String, default: "top" },
+        threshold: { type: Number, default: 240 },
+        autoHide: { type: Boolean, default: true },
+        smooth: { type: Boolean, default: true },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        const visible = ref(!props.autoHide);
+        const updateVisibility = () => {
+            visible.value = window.scrollY > props.threshold;
+        };
+        onMounted(() => {
+            if (!props.autoHide || typeof window === "undefined") {
+                visible.value = true;
+                return;
+            }
+            updateVisibility();
+            window.addEventListener("scroll", updateVisibility, { passive: true });
+        });
+        onUnmounted(() => {
+            if (typeof window !== "undefined") {
+                window.removeEventListener("scroll", updateVisibility);
+            }
+        });
+        const goTop = () => {
+            const target = props.targetId ? `#${props.targetId.replace(/^#/, "")}` : "#top";
+            const anchor = target.startsWith("#") ? target.slice(1) : target;
+            const element = anchor ? document.getElementById(anchor) : null;
+            if (element) {
+                element.scrollIntoView({ behavior: props.smooth ? "smooth" : "auto", block: "start" });
+                return;
+            }
+            window.scrollTo({ top: 0, behavior: props.smooth ? "smooth" : "auto" });
+        };
+        return () => {
+            const hidden = props.autoHide && !visible.value;
+            return h("button", {
+                ...attrs,
+                type: "button",
+                class: classNames("st-backToTop", props.class),
+                onClick: goTop,
+                "aria-label": props.label,
+                "aria-hidden": hidden ? "true" : undefined,
+                "aria-live": hidden ? "polite" : undefined,
+                tabindex: hidden ? -1 : undefined,
+                disabled: props.disabled,
+            }, [
+                h("span", { class: "st-backToTop__icon", "aria-hidden": "true" }, h("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: 16,
+                    height: 16,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": 2,
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "aria-hidden": "true",
+                }, [h("path", { d: "m5 12 7-7 7 7" }), h("path", { d: "M12 19V5" })])),
+                h("span", { class: "st-backToTop__label" }, props.label),
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=BackToTop.js.map

package/dist/BackToTop.js.map

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

package/dist/DisplaySettings.d.ts

@@ -0,0 +1,90 @@
+export type DisplayFontScale = "normal" | "large" | "extra-large";
+export type DisplayContrast = "default" | "high";
+export type DisplayLineSpacing = "normal" | "comfortable";
+export interface DisplaySettingsState {
+    fontScale: DisplayFontScale;
+    contrast: DisplayContrast;
+    lineSpacing: DisplayLineSpacing;
+    reducedMotion: boolean;
+}
+export type DisplaySettingsProps = {
+    title?: string;
+    values?: Partial<DisplaySettingsState>;
+    showFontScale?: boolean;
+    showContrast?: boolean;
+    showLineSpacing?: boolean;
+    showReducedMotion?: boolean;
+    class?: string;
+};
+export declare const DisplaySettings: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    values: {
+        type: () => Partial<DisplaySettingsState>;
+        default: undefined;
+    };
+    showFontScale: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showContrast: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLineSpacing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showReducedMotion: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    values: {
+        type: () => Partial<DisplaySettingsState>;
+        default: undefined;
+    };
+    showFontScale: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showContrast: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLineSpacing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showReducedMotion: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    class: string;
+    values: Partial<DisplaySettingsState>;
+    title: string;
+    showFontScale: boolean;
+    showContrast: boolean;
+    showLineSpacing: boolean;
+    showReducedMotion: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=DisplaySettings.d.ts.map

package/dist/DisplaySettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplaySettings.d.ts","sourceRoot":"","sources":["../src/DisplaySettings.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AAClE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,CAAC;AACjD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AASF,eAAO,MAAM,eAAe;;;;;;cAIE,MAAM,OAAO,CAAC,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAnC,MAAM,OAAO,CAAC,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAsG/D,CAAC"}

package/dist/DisplaySettings.js

@@ -0,0 +1,91 @@
+import { defineComponent, h, ref, watch } from "vue";
+import { classNames } from "./classNames.js";
+const DEFAULT_SETTINGS = {
+    fontScale: "normal",
+    contrast: "default",
+    lineSpacing: "normal",
+    reducedMotion: false,
+};
+export const DisplaySettings = defineComponent({
+    name: "DisplaySettings",
+    props: {
+        title: { type: String, default: "Paramètres d’affichage" },
+        values: { type: Object, default: undefined },
+        showFontScale: { type: Boolean, default: true },
+        showContrast: { type: Boolean, default: true },
+        showLineSpacing: { type: Boolean, default: true },
+        showReducedMotion: { type: Boolean, default: true },
+        class: { type: String, default: undefined },
+    },
+    emits: ["change"],
+    setup(props, { emit, attrs }) {
+        const resolve = () => ({
+            fontScale: props.values?.fontScale ?? DEFAULT_SETTINGS.fontScale,
+            contrast: props.values?.contrast ?? DEFAULT_SETTINGS.contrast,
+            lineSpacing: props.values?.lineSpacing ?? DEFAULT_SETTINGS.lineSpacing,
+            reducedMotion: props.values?.reducedMotion ?? DEFAULT_SETTINGS.reducedMotion,
+        });
+        const state = ref(resolve());
+        watch(() => props.values, () => {
+            state.value = { ...state.value, ...resolve() };
+        }, { deep: true });
+        const update = (next) => {
+            state.value = { ...state.value, ...next };
+            emit("change", { ...state.value });
+        };
+        return () => h("div", { ...attrs, class: classNames("st-displaySettings", props.class) }, [
+            h("p", { class: "st-displaySettings__title" }, props.title),
+            h("div", { class: "st-displaySettings__grid" }, [
+                props.showFontScale
+                    ? h("label", { class: "st-displaySettings__field" }, [
+                        h("span", { class: "st-displaySettings__label" }, "Taille de texte"),
+                        h("select", {
+                            value: state.value.fontScale,
+                            onChange: (event) => update({ fontScale: event.target.value }),
+                        }, [
+                            h("option", { value: "normal" }, "Normale"),
+                            h("option", { value: "large" }, "Grande"),
+                            h("option", { value: "extra-large" }, "Très grande"),
+                        ]),
+                    ])
+                    : null,
+                props.showContrast
+                    ? h("label", { class: "st-displaySettings__field" }, [
+                        h("span", { class: "st-displaySettings__label" }, "Contraste"),
+                        h("select", {
+                            value: state.value.contrast,
+                            onChange: (event) => update({ contrast: event.target.value }),
+                        }, [
+                            h("option", { value: "default" }, "Standard"),
+                            h("option", { value: "high" }, "Élevé"),
+                        ]),
+                    ])
+                    : null,
+                props.showLineSpacing
+                    ? h("label", { class: "st-displaySettings__field" }, [
+                        h("span", { class: "st-displaySettings__label" }, "Interligne"),
+                        h("select", {
+                            value: state.value.lineSpacing,
+                            onChange: (event) => update({ lineSpacing: event.target.value }),
+                        }, [
+                            h("option", { value: "normal" }, "Normal"),
+                            h("option", { value: "comfortable" }, "Confortable"),
+                        ]),
+                    ])
+                    : null,
+                props.showReducedMotion
+                    ? h("label", { class: "st-displaySettings__field st-displaySettings__field--switch" }, [
+                        h("span", { class: "st-displaySettings__label" }, "Animations (réduction)"),
+                        h("input", {
+                            type: "checkbox",
+                            role: "switch",
+                            checked: state.value.reducedMotion,
+                            onChange: (event) => update({ reducedMotion: event.target.checked }),
+                        }),
+                    ])
+                    : null,
+            ]),
+        ]);
+    },
+});
+//# sourceMappingURL=DisplaySettings.js.map

package/dist/DisplaySettings.js.map

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

package/dist/ForceGraph.d.ts

@@ -1,86 +1,215 @@
-export type ForceGraphTone = string;
+import { type PropType, type VNode } from "vue";
+export type ForceGraphTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type ForceGraphNodeShape = "dot" | "circle" | "diamond" | "star" | "hexagon" | "box" | "square" | "triangle";
 export type ForceGraphNode = {
+    /** Stable identifier; referenced by edges. */
     id: string;
+    /** Visible label (falls back to id). */
     label?: string;
+    /**
+     * Grouping key (e.g. node type or community). Nodes sharing a group get
+     * the same tone when `tone` is not set explicitly.
+     */
     group?: string | number;
+    /** Explicit data-vis tone; overrides the group-derived tone. */
     tone?: ForceGraphTone;
+    /** Relative node radius weight (defaults to 1). */
     weight?: number;
+    /** Pin the node to a fixed position (ignored by the simulation). */
     fx?: number;
     fy?: number;
+    /**
+     * Visual shape for the node. Defaults to 'dot' (circle).
+     * Supported: 'dot'|'circle', 'diamond', 'star', 'hexagon', 'box'|'square', 'triangle'.
+     */
+    shape?: ForceGraphNodeShape;
 };
 export type ForceGraphEdge = {
+    /** Source node id. */
     source: string;
+    /** Target node id. */
     target: string;
+    /** Optional relation label, surfaced in the tooltip on hover/focus. */
     relation?: string;
+    /**
+     * When true the link renders as a dashed/faded "weak" link. Lets callers
+     * map a confidence dimension onto link strength without extra props.
+     */
+    weak?: boolean;
+};
+export type ForceGraphLegendEntry = {
+    /** Label shown in the legend. */
+    label: string;
+    /** Shape for this entry (node legend). Absent = line-style legend entry. */
+    shape?: ForceGraphNodeShape;
+    /** Tone for this entry. Defaults to category1. */
+    tone?: ForceGraphTone;
+    /** When true, renders as a dashed line (edge legend). */
     weak?: boolean;
 };
 export type ForceGraphProps = {
     nodes: ForceGraphNode[];
     edges: ForceGraphEdge[];
     label?: string;
+    width?: number;
+    height?: number;
+    nodeRadius?: number;
+    showLabels?: boolean;
+    iterations?: number;
     selectedIds?: string[];
     focusId?: string | null;
+    legend?: ForceGraphLegendEntry[];
+    onSelect?: (id: string) => void;
+    onOpenEntity?: (id: string) => void;
+    onEdgeHover?: (edge: ForceGraphEdge) => void;
     class?: string;
 };
+export declare function nodeShapePath(shape: ForceGraphNodeShape | undefined, r: number): string | null;
 export declare const ForceGraph: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     nodes: {
-        type: () => ForceGraphNode[];
+        type: PropType<ForceGraphNode[]>;
         required: true;
     };
     edges: {
-        type: () => ForceGraphEdge[];
+        type: PropType<ForceGraphEdge[]>;
         required: true;
     };
     label: {
         type: StringConstructor;
         default: string;
     };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    nodeRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showLabels: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iterations: {
+        type: NumberConstructor;
+        default: number;
+    };
     selectedIds: {
-        type: () => string[];
+        type: PropType<string[]>;
         default: () => never[];
     };
     focusId: {
-        type: () => string | null;
+        type: PropType<string | null>;
         default: null;
     };
+    legend: {
+        type: PropType<ForceGraphLegendEntry[]>;
+        default: undefined;
+    };
+    onSelect: {
+        type: PropType<(id: string) => void>;
+        default: undefined;
+    };
+    onOpenEntity: {
+        type: PropType<(id: string) => void>;
+        default: undefined;
+    };
+    onEdgeHover: {
+        type: PropType<(edge: ForceGraphEdge) => void>;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
     };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "openEntity")[], "select" | "openEntity", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (_id: string) => true;
+    openEntity: (_id: string) => true;
+    edgeHover: (_edge: ForceGraphEdge) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     nodes: {
-        type: () => ForceGraphNode[];
+        type: PropType<ForceGraphNode[]>;
         required: true;
     };
     edges: {
-        type: () => ForceGraphEdge[];
+        type: PropType<ForceGraphEdge[]>;
         required: true;
     };
     label: {
         type: StringConstructor;
         default: string;
     };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    nodeRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showLabels: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iterations: {
+        type: NumberConstructor;
+        default: number;
+    };
     selectedIds: {
-        type: () => string[];
+        type: PropType<string[]>;
         default: () => never[];
     };
     focusId: {
-        type: () => string | null;
+        type: PropType<string | null>;
         default: null;
     };
+    legend: {
+        type: PropType<ForceGraphLegendEntry[]>;
+        default: undefined;
+    };
+    onSelect: {
+        type: PropType<(id: string) => void>;
+        default: undefined;
+    };
+    onOpenEntity: {
+        type: PropType<(id: string) => void>;
+        default: undefined;
+    };
+    onEdgeHover: {
+        type: PropType<(edge: ForceGraphEdge) => void>;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
     };
 }>> & Readonly<{
-    onSelect?: ((...args: any[]) => any) | undefined;
-    onOpenEntity?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((_id: string) => any) | undefined;
+    onOpenEntity?: ((_id: string) => any) | undefined;
+    onEdgeHover?: ((_edge: ForceGraphEdge) => any) | undefined;
 }>, {
     class: string;
     label: string;
+    legend: ForceGraphLegendEntry[];
+    onSelect: (id: string) => void;
+    width: number;
+    height: number;
+    nodeRadius: number;
+    showLabels: boolean;
+    iterations: number;
     selectedIds: string[];
     focusId: string | null;
+    onOpenEntity: (id: string) => void;
+    onEdgeHover: (edge: ForceGraphEdge) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=ForceGraph.d.ts.map

package/dist/ForceGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ForceGraph.d.ts","sourceRoot":"","sources":["../src/ForceGraph.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC;AACpC,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEnG,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,eAAO,MAAM,UAAU;;cAGK,MAAM,cAAc,EAAE;;;;cACtB,MAAM,cAAc,EAAE;;;;;;;;cAEhB,MAAM,MAAM,EAAE;;;;cACjB,MAAM,MAAM,GAAG,IAAI;;;;;;;;;;;cAJtB,MAAM,cAAc,EAAE;;;;cACtB,MAAM,cAAc,EAAE;;;;;;;;cAEhB,MAAM,MAAM,EAAE;;;;cACjB,MAAM,MAAM,GAAG,IAAI;;;;;;;;;;;;;;;4EAyEhD,CAAC"}
+{"version":3,"file":"ForceGraph.d.ts","sourceRoot":"","sources":["../src/ForceGraph.ts"],"names":[],"mappings":"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"}