layerchart 0.41.6 → 0.43.0

package/dist/components/ForceSimulation.svelte

@@ -1,49 +1,206 @@
-<script>import { getContext } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { forceSimulation } from 'd3-force';
-const { data } = getContext('LayerCake');
+import { chartContext } from './ChartContext.svelte';
+const { data } = chartContext();
+const dispatch = createEventDispatcher();
 export let forces;
 export let alpha = 1;
 export let alphaTarget = 0;
 export let alphaDecay = 1 - Math.pow(0.001, 1 / 300);
 export let alphaMin = 0.001;
 export let velocityDecay = 0.4;
-/** Clone data since simulation mutates original */
-export let cloneData = false;
+/** Stop simulation */
+export let stopped = false;
 let _static = false;
 /** If true, will only update nodes after simulation has completed */
 export { _static as static };
-let simulation = forceSimulation(cloneData ? structuredClone($data) : $data);
+/** Clone data since simulation mutates original */
+export const cloneData = false;
+// MARK: Private Props
+let nodes = [];
+const simulation = forceSimulation().stop();
+// d3.Simulation does not provide a `.forces()` getter, so we need to
+// keep track of previous forces ourselves, for diffing against `forces`.
+let previousForces = {};
+let paused = true;
+// MARK: Reactivity Effects
+$: {
+    // Any time the `stopped` prop gets toggled we
+    // update the running state of the simulation:
+    if (stopped) {
+        pauseDynamicSimulation();
+    }
+    else {
+        runOrResumeSimulation();
+    }
+}
+$: {
+    // Any time the `static` prop gets toggled we
+    // either attach or detach our internal event listeners:
+    if (_static) {
+        simulation.on('tick', null).on('end', null);
+    }
+    else {
+        simulation.on('tick', onTick).on('end', onEnd);
+    }
+    runOrResumeSimulation();
+}
+$: {
+    // Any time the `$data` store gets changed we
+    // pass them to the internal d3 simulation object:
+    pushNodesToSimulation($data);
+    runOrResumeSimulation();
+}
 $: {
+    // Any time the `forces` prop gets changed we
+    // pass them to the internal d3 simulation object:
+    pushForcesToSimulation(forces);
+    runOrResumeSimulation();
+}
+$: {
+    // Any time the `alpha` prop gets changed we
+    // pass it to the internal d3 simulation object:
+    pushAlphaToSimulation(alpha);
+    // Only resume the simulation as long as `alpha`
+    // is above the cut-off threshold of `alphaMin`,
+    // otherwise our simulation will never terminate:
+    if (simulation.alpha() >= simulation.alphaMin()) {
+        runOrResumeSimulation();
+    }
+}
+$: {
+    // Any time any of the the alpha props get changed we
+    // pass them all to the internal d3 simulation object
+    // (they are cheap, so passing them as a batch is fine!):
+    // We read `simulation.alpha()` instead of `alpha` here, so
+    // Svelte does not trigger this block on any change to `alpha`:
+    let alphaValue = simulation.alpha();
+    if (alphaTarget > alphaValue && alphaValue < alphaMin) {
+        // Lift `alpha` from below `alphaMin` in order to give the simulation
+        // a chance to get revived if an `alphaTarget > alpha` is provided:
+        alphaValue = alphaMin;
+    }
     simulation
-        .alpha(alpha)
+        .alpha(alphaValue)
         .alphaTarget(alphaTarget)
         .alphaMin(alphaMin)
         .alphaDecay(alphaDecay)
-        .velocityDecay(velocityDecay)
-        .restart();
-    if (_static) {
-        // TODO: Not sure why it needs to be recreated when static
-        simulation = forceSimulation(cloneData ? structuredClone($data) : $data);
-        simulation.stop();
-        Object.entries(forces).forEach(([name, force]) => {
+        .velocityDecay(velocityDecay);
+    runOrResumeSimulation();
+}
+// MARK: Push State
+function pushAlphaToSimulation(alpha) {
+    simulation.alpha(alpha);
+}
+function pushNodesToSimulation(nodes) {
+    simulation.nodes(cloneData ? structuredClone(nodes) : nodes);
+}
+function pushForcesToSimulation(forces) {
+    // Evict obsolete forces:
+    Object.keys(previousForces).forEach((name) => {
+        if (!(name in forces)) {
+            simulation.force(name, null);
+        }
+    });
+    // Add new or overwrite existing forces:
+    Object.entries(forces).forEach(([name, force]) => {
+        if (!(name in previousForces) || force !== previousForces[name]) {
             simulation.force(name, force);
-        });
-        for (let i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
-            simulation.tick();
         }
-        nodes = simulation.nodes();
+    });
+    previousForces = forces;
+}
+// MARK: Pull State
+function pullNodesFromSimulation() {
+    nodes = simulation.nodes();
+}
+function pullAlphaFromSimulation() {
+    alpha = simulation.alpha();
+}
+// MARK: Resume / Pause
+function runOrResumeSimulation() {
+    if (_static) {
+        runStaticSimulationToCompletion();
     }
     else {
-        // When variables change, set forces and restart the simulation
-        Object.entries(forces).forEach(([name, force]) => {
-            simulation.force(name, force);
-        });
+        resumeDynamicSimulation();
     }
 }
-let nodes = [];
-simulation.on('tick', () => {
-    nodes = simulation.nodes();
-});
+function runStaticSimulationToCompletion() {
+    if (stopped) {
+        // If a simulation is marked as stopped, then it should not get started.
+        return;
+    }
+    if (!_static) {
+        // Only static simulations are run to completion.
+        return;
+    }
+    if (!paused) {
+        // Pause any possibly still running dynamic simulation:
+        pauseDynamicSimulation();
+    }
+    const ticks = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
+    pushAlphaToSimulation(1.0);
+    onStart();
+    for (let i = 0; i < ticks; ++i) {
+        simulation.tick();
+    }
+    pullNodesFromSimulation();
+    pullAlphaFromSimulation();
+    onEnd();
+}
+function resumeDynamicSimulation() {
+    if (!paused) {
+        // No need to restart an already running simulation.
+        return;
+    }
+    if (stopped) {
+        // If a simulation is marked as stopped, then it should not get resumed.
+        return;
+    }
+    if (_static) {
+        // Only dynamic simulations can be resumed.
+        return;
+    }
+    onStart();
+    simulation.restart();
+    // No need to call `onEnd();` for dynamic simulations
+    // as the simulation itself takes care of firing `on:end`,
+    // which then gets calls `onEnd();` for us.
+}
+function pauseDynamicSimulation() {
+    if (paused) {
+        // No need to pause an already paused simulation.
+        return;
+    }
+    simulation.stop();
+    onEnd();
+}
+// MARK: Event Listeners
+function onStart() {
+    if (!paused) {
+        // Avoid double-emissions of `start` event due to race conditions.
+        return;
+    }
+    paused = false;
+    dispatch('start');
+}
+function onTick() {
+    pullNodesFromSimulation();
+    pullAlphaFromSimulation();
+    dispatch('tick', {
+        alpha,
+        alphaTarget,
+    });
+}
+function onEnd() {
+    if (paused) {
+        // Avoid double-emissions of `end` event due to race conditions.
+        return;
+    }
+    paused = true;
+    dispatch('end');
+}
 </script>
 
 <slot {nodes} {simulation} />

package/dist/components/ForceSimulation.svelte.d.ts

@@ -8,10 +8,19 @@ declare const __propDef: {
         alphaDecay?: number;
         alphaMin?: number;
         velocityDecay?: number;
-        /** Clone data since simulation mutates original */ cloneData?: boolean;
+        /** Stop simulation */ stopped?: boolean;
         /** If true, will only update nodes after simulation has completed */ static?: boolean;
+        /** Clone data since simulation mutates original */ cloneData?: boolean;
     };
     events: {
+        start: CustomEvent<null>;
+        tick: CustomEvent<{
+            alpha: number;
+            alphaTarget: number;
+        }>;
+        change: CustomEvent<null>;
+        end: CustomEvent<null>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
@@ -25,5 +34,6 @@ export type ForceSimulationProps = typeof __propDef.props;
 export type ForceSimulationEvents = typeof __propDef.events;
 export type ForceSimulationSlots = typeof __propDef.slots;
 export default class ForceSimulation extends SvelteComponentTyped<ForceSimulationProps, ForceSimulationEvents, ForceSimulationSlots> {
+    get cloneData(): NonNullable<boolean | undefined>;
 }
 export {};

package/dist/components/Frame.svelte

@@ -1,16 +1,17 @@
-<script>import { getContext } from 'svelte';
-const { width, height, padding } = getContext('LayerCake');
+<script>import { chartContext } from './ChartContext.svelte';
+const { width, height, padding } = chartContext();
 /** Include padding area */
 export let full = false;
 /** Access underlying `<rect>` element */
-export let rectEl;
+export let rectEl = undefined;
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <rect
-  x={full ? -$padding.left : 0}
-  y={full ? -$padding.top : 0}
-  width={$width + (full ? $padding.left + $padding.right : 0)}
-  height={$height + (full ? $padding.top + $padding.bottom : 0)}
+  x={full && $padding?.left ? -$padding.left : 0}
+  y={full && $padding?.top ? -$padding.top : 0}
+  width={$width + (full ? ($padding?.left ?? 0) + ($padding?.right ?? 0) : 0)}
+  height={$height + (full ? ($padding?.top ?? 0) + ($padding?.bottom ?? 0) : 0)}
   on:click
   on:pointerdown
   on:dblclick

package/dist/components/Frame.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         full?: boolean;
-        rectEl: SVGRectElement;
+        rectEl?: SVGRectElement | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/GeoCircle.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import GeoPath from './GeoPath.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -11,7 +10,7 @@ declare const __propDef: {
         pointermove: PointerEvent;
         pointerleave: PointerEvent;
         click: CustomEvent<{
-            geoPath: GeoPath;
+            geoPath: ReturnType<typeof import("..").geoCurvePath>;
             event: MouseEvent;
         }>;
     } & {

package/dist/components/GeoContext.svelte

@@ -1,6 +1,7 @@
 <script context="module">import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import {} from 'd3-geo';
+import { chartContext } from './ChartContext.svelte';
 import { transformContext } from './TransformContext.svelte';
 export const geoContextKey = Symbol();
 export function geoContext() {
@@ -11,7 +12,7 @@ function setGeoContext(geo) {
 }
 </script>
 
-<script>const { width, height } = getContext('LayerCake');
+<script>const { width, height } = chartContext();
 /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
 export let projection = undefined;
 export let fitGeojson = undefined;

package/dist/components/GeoContext.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import { type Writable } from 'svelte/store';
-import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
+import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
 export declare const geoContextKey: unique symbol;
-export type GeoContext = Writable<GeoProjection | GeoIdentityTransform>;
+export type GeoContext = Writable<GeoProjection>;
 export declare function geoContext(): GeoContext;
 declare const __propDef: {
     props: {
-        /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */ projection?: (() => GeoProjection | GeoIdentityTransform) | undefined;
+        /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */ projection?: (() => GeoProjection) | undefined;
         fitGeojson?: GeoPermissibleObjects | undefined;
         /** By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */ fixedAspectRatio?: number | undefined;
         clipAngle?: number | undefined;
@@ -25,14 +25,14 @@ declare const __propDef: {
         /** Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are mutually selected  */ applyTransform?: ("scale" | "translate" | "rotate")[];
         reflectX?: boolean | undefined;
         reflectY?: boolean | undefined;
-        /** Exposed to allow binding in Chart */ geo?: Writable<GeoProjection | GeoIdentityTransform>;
+        /** Exposed to allow binding in Chart */ geo?: Writable<GeoProjection>;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
-            projection: GeoProjection | GeoIdentityTransform;
+            projection: GeoProjection;
         };
     };
 };

package/dist/components/GeoEdgeFade.svelte

@@ -1,14 +1,11 @@
-<script>import { getContext } from 'svelte';
-import { scaleLinear } from 'd3-scale';
+<script>import { scaleLinear } from 'd3-scale';
 import { geoDistance } from 'd3-geo';
 import { geoContext } from './GeoContext.svelte';
 export let link;
-const { width, height } = getContext('LayerCake');
 const geo = geoContext();
 const fade = scaleLinear().domain([-0.1, 0]).range([0, 0.1]);
 const clamper = scaleLinear().domain([0, 1]).range([0, 1]).clamp(true);
-// $: center = $geo.invert([$width / 2, $height / 2]);
-$: center = $geo.invert($geo.translate());
+$: center = $geo.invert?.($geo.translate()) ?? [0, 0];
 $: source = link.source;
 $: target = link.target;
 $: startDistance = 1.57 - geoDistance(source, center);

package/dist/components/GeoPath.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
 import { geoTransform as d3geoTransform, } from 'd3-geo';
 import { cls } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import { geoContext } from './GeoContext.svelte';
 import { curveLinearClosed } from 'd3-shape';
 import { geoCurvePath } from '../utils/geo.js';
@@ -27,7 +28,7 @@ export let curve = curveLinearClosed;
 let className = undefined;
 export { className as class };
 const dispatch = createEventDispatcher();
-const { containerWidth, containerHeight, padding } = getContext('LayerCake');
+const { containerWidth, containerHeight, padding } = chartContext();
 const canvas = getContext('canvas');
 const geo = geoContext();
 /**
@@ -58,25 +59,28 @@ $: if (renderContext === 'canvas' && $ctx) {
         $ctx.beginPath();
         // Set the context here since setting it in `$: geoPath` is a circular reference
         geoPath = geoCurvePath(_projection, curve, $ctx);
-        geoPath(geojson);
+        if (geojson) {
+            geoPath(geojson);
+        }
         $ctx.fillStyle =
             fill ??
                 (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
                 'transparent';
         $ctx.fill();
-        $ctx.lineWidth = strokeWidth;
+        $ctx.lineWidth = Number(strokeWidth ?? 0);
         $ctx.strokeStyle =
-            stroke ?? computedStyles.stroke === 'none' ? 'transparent' : computedStyles.stroke;
+            stroke ?? computedStyles.stroke === 'none' ? 'transparent' : computedStyles.stroke ?? '';
         $ctx.stroke();
     }
 }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 {#if renderContext === 'svg'}
   <slot {geoPath}>
     <path
       {...$$restProps}
-      d={geoPath(geojson)}
+      d={geojson ? geoPath(geojson) : ''}
       {fill}
       {stroke}
       stroke-width={strokeWidth}

package/dist/components/GeoPath.svelte.d.ts

@@ -2,11 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection, type GeoTransformPrototype } from 'd3-geo';
 import type { TooltipContextValue } from './TooltipContext.svelte';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+import { geoCurvePath } from '../utils/geo.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        geojson?: GeoPermissibleObjects;
-        render?: ((ctx: CanvasRenderingContext2D, { geoPath: GeoPath }: any) => any) | undefined;
+        geojson?: GeoPermissibleObjects | null | undefined;
+        render?: ((ctx: CanvasRenderingContext2D, options: {
+            geoPath: ReturnType<typeof geoCurvePath>;
+        }) => any) | undefined;
         fill?: string | undefined;
         stroke?: string | undefined;
         strokeWidth?: number | string | undefined;
@@ -21,7 +24,7 @@ declare const __propDef: {
         pointerleave: PointerEvent;
         pointerdown: PointerEvent;
         click: CustomEvent<{
-            geoPath: GeoPath;
+            geoPath: ReturnType<typeof geoCurvePath>;
             event: MouseEvent;
         }>;
     } & {
@@ -29,7 +32,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            geoPath: (object: GeoPermissibleObjects) => string | undefined;
+            geoPath: import("d3-geo").GeoPath<unknown, GeoPermissibleObjects>;
         };
     };
 };

package/dist/components/GeoPoint.svelte

@@ -8,7 +8,6 @@ export let lat;
 export let long;
 /** Render to canvas */
 export let render = () => { };
-const { width, height } = getContext('LayerCake');
 const canvas = getContext('canvas');
 const geo = geoContext();
 $: [x, y] = $geo([long, lat]) ?? [0, 0];

package/dist/components/GeoSpline.svelte

@@ -1,5 +1,4 @@
-<script>import { getContext } from 'svelte';
-import { curveNatural } from 'd3-shape';
+<script>import { curveNatural } from 'd3-shape';
 import { geoOrthographic, geoInterpolate } from 'd3-geo';
 import { geoContext } from './GeoContext.svelte';
 import Spline from './Spline.svelte';
@@ -16,7 +15,6 @@ export let loft = 1.0;
  * @type {CurveFactory | CurveFactoryLineOnly | undefined}
  */
 export let curve = curveNatural;
-const { width, height } = getContext('LayerCake');
 const geo = geoContext();
 $: loftedProjection = geoOrthographic()
     .translate($geo.translate())
@@ -27,11 +25,4 @@ $: target = $geo(link.target);
 $: middle = loftedProjection(geoInterpolate(link.source, link.target)(0.5));
 </script>
 
-<Spline
-  data={[source, middle, target]}
-  x={(d) => d[0]}
-  y={(d) => d[1]}
-  defined={(d) => $geo.invert(d)}
-  {curve}
-  {...$$restProps}
-/>
+<Spline data={[source, middle, target]} x={(d) => d[0]} y={(d) => d[1]} {curve} {...$$restProps} />

package/dist/components/GeoTile.svelte

@@ -1,5 +1,7 @@
 <script>import { getContext } from 'svelte';
+// @ts-expect-error
 import { tile as d3Tile } from 'd3-tile';
+import { chartContext } from './ChartContext.svelte';
 import { geoContext } from './GeoContext.svelte';
 import Group from './Group.svelte';
 import TileImage from './TileImage.svelte';
@@ -8,7 +10,7 @@ export let zoomDelta = 0;
 export let tileSize = 256;
 export let disableCache = false;
 export let debug = false;
-const { containerWidth, containerHeight, padding } = getContext('LayerCake');
+const { containerWidth, containerHeight, padding } = chartContext();
 const canvas = getContext('canvas');
 const geo = geoContext();
 $: center = $geo([0, 0]) ?? [0, 0];

package/dist/components/Group.svelte

@@ -1,6 +1,7 @@
-<script>import { getContext, tick } from 'svelte';
+<script>import { tick } from 'svelte';
+import { chartContext } from './ChartContext.svelte';
 import { motionStore } from '../stores/motionStore.js';
-const { width, height } = getContext('LayerCake');
+const { width, height } = chartContext();
 /**
  * Translate x
  */
@@ -33,6 +34,7 @@ $: if (center || x != null || y != null) {
 }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <g
   {transform}
   {...$$restProps}

package/dist/components/Highlight.svelte

@@ -1,13 +1,14 @@
-<script>import { getContext } from 'svelte';
+<script>import {} from 'svelte';
 import { max, min } from 'd3-array';
 import { cls, notNull } from 'svelte-ux';
-import { isScaleBand } from '../utils/scales.js';
+import { chartContext } from './ChartContext.svelte';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
 import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
-const { flatData, x, xDomain, xScale, xRange, xGet, y, yDomain, yScale, yRange, yGet, rGet, config, } = getContext('LayerCake');
+import { isScaleBand } from '../utils/scales.js';
+const { flatData, x, xDomain, xScale, xRange, xGet, y, yDomain, yScale, yRange, yGet, rGet, config, } = chartContext();
 const tooltip = tooltipContext();
 /** Highlight specific data (annotate), espect uses tooltip data */
 export let data = undefined;
@@ -173,6 +174,7 @@ $: if (highlightData) {
         {..._area}
         {...typeof area === 'object' ? area : null}
         class={cls(
+          // @ts-expect-error
           !area.fill && 'fill-surface-content/5',
           typeof area === 'object' ? area.class : null
         )}
@@ -185,14 +187,18 @@ $: if (highlightData) {
     <slot name="bar" {bar}>
       <Bar
         spring={motion}
-        x={typeof bar === 'object' ? bar.x : null}
-        y={typeof bar === 'object' ? bar.y : null}
-        inset={typeof bar === 'object' ? bar.inset : null}
-        stroke={typeof bar === 'object' ? bar.stroke : null}
-        strokeWidth={typeof bar === 'object' ? bar.strokeWidth : null}
-        radius={typeof bar === 'object' ? bar.radius : null}
+        x={typeof bar === 'object' ? bar.x : undefined}
+        y={typeof bar === 'object' ? bar.y : undefined}
+        inset={typeof bar === 'object' ? bar.inset : undefined}
+        stroke={typeof bar === 'object' ? bar.stroke : undefined}
+        strokeWidth={typeof bar === 'object' ? bar.strokeWidth : undefined}
+        radius={typeof bar === 'object' ? bar.radius : undefined}
         bar={highlightData}
-        class={cls(!bar.fill && 'fill-primary', typeof bar === 'object' ? bar.class : null)}
+        class={cls(
+          // @ts-expect-error
+          !bar.fill && 'fill-primary',
+          typeof bar === 'object' ? bar.class : null
+        )}
         on:click
       />
     </slot>

package/dist/components/Highlight.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
+import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
 declare const __propDef: {
     props: {
@@ -10,7 +11,7 @@ declare const __propDef: {
         /** Show points and pass props to Circles */ points?: boolean | Partial<ComponentProps<Circle>>;
         /** Show lines and pass props to Lines */ lines?: boolean | Partial<ComponentProps<Line>>;
         /** Show area and pass props to Rect */ area?: boolean | Partial<ComponentProps<Rect>>;
-        /** Show bar and pass props to Rect */ bar?: boolean | Partial<ComponentProps<Rect>>;
+        /** Show bar and pass props to Rect */ bar?: boolean | Partial<ComponentProps<Bar>>;
         /** Set to false to disable spring transitions */ motion?: boolean;
     };
     events: {
@@ -30,20 +31,20 @@ declare const __propDef: {
         bar: {
             bar: boolean | Partial<{
                 [x: string]: any;
-                x?: number;
-                initialX?: number;
-                y?: number;
-                initialY?: number;
-                width: number;
-                initialWidth?: number;
-                height: number;
-                initialHeight?: number;
-                spring?: boolean | import("../stores/motionStore").SpringOptions | {
-                    [prop: string]: import("../stores/motionStore").SpringOptions;
-                };
-                tweened?: boolean | import("../stores/motionStore").TweenedOptions | {
-                    [prop: string]: import("../stores/motionStore").TweenedOptions;
-                };
+                bar: Object;
+                x?: import("../utils/common").Accessor;
+                y?: import("../utils/common").Accessor;
+                fill?: string | undefined;
+                stroke?: string;
+                strokeWidth?: number;
+                radius?: number;
+                rounded?: "all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+                inset?: number;
+                groupBy?: string | undefined;
+                groupPaddingInner?: number;
+                groupPaddingOuter?: number;
+                spring?: ComponentProps<Rect>["spring"];
+                tweened?: ComponentProps<Rect>["tweened"];
             }>;
         };
         lines: {