layerchart 0.54.0 → 0.55.0

package/dist/components/Line.svelte

@@ -1,26 +1,52 @@
-<script>import { tick } from 'svelte';
-import { cls } from '@layerstack/tailwind';
-import { motionStore } from '../stores/motionStore.js';
-export let x1;
-export let initialX1 = x1;
-export let y1;
-export let initialY1 = y1;
-export let x2;
-export let initialX2 = x2;
-export let y2;
-export let initialY2 = y2;
-export let spring = undefined;
-export let tweened = undefined;
-let tweened_x1 = motionStore(initialX1, { spring, tweened });
-let tweened_y1 = motionStore(initialY1, { spring, tweened });
-let tweened_x2 = motionStore(initialX2, { spring, tweened });
-let tweened_y2 = motionStore(initialY2, { spring, tweened });
-$: tick().then(() => {
+<script lang="ts">
+  import { tick, type ComponentProps } from 'svelte';
+  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+  import { cls } from '@layerstack/tailwind';
+
+  import { motionStore } from '../stores/motionStore.js';
+  import { uniqueId } from '@layerstack/utils';
+
+  import Marker from './Marker.svelte';
+
+  export let x1: number;
+  export let initialX1 = x1;
+
+  export let y1: number;
+  export let initialY1 = y1;
+
+  export let x2: number;
+  export let initialX2 = x2;
+
+  export let y2: number;
+  export let initialY2 = y2;
+
+  /** Marker to attach to start and end points of path */
+  export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    undefined;
+  /** Marker to attach to start point of path */
+  export let markerStart: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+  /** Marker to attach to end point of path */
+  export let markerEnd: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+
+  $: markerStartId = markerStart || $$slots['markerStart'] ? uniqueId('marker-') : '';
+  $: markerEndId = markerEnd || $$slots['markerEnd'] ? uniqueId('marker-') : '';
+
+  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+
+  let tweened_x1 = motionStore(initialX1, { spring, tweened });
+  let tweened_y1 = motionStore(initialY1, { spring, tweened });
+  let tweened_x2 = motionStore(initialX2, { spring, tweened });
+  let tweened_y2 = motionStore(initialY2, { spring, tweened });
+
+  $: tick().then(() => {
     tweened_x1.set(x1);
     tweened_y1.set(y1);
     tweened_x2.set(x2);
     tweened_y2.set(y2);
-});
+  });
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -29,9 +55,29 @@ $: tick().then(() => {
   y1={$tweened_y1}
   x2={$tweened_x2}
   y2={$tweened_y2}
+  marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+  marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
   class={cls($$props.stroke === undefined && 'stroke-surface-content')}
   {...$$restProps}
   on:click
   on:pointermove
   on:pointerleave
 />
+
+<slot name="markerStart" id={markerStartId}>
+  {#if markerStart}
+    <Marker
+      id={markerStartId}
+      type={typeof markerStart === 'string' ? markerStart : undefined}
+      {...typeof markerStart === 'object' ? markerStart : null}
+    />
+  {/if}
+</slot>
+
+<slot name="markerEnd" id={markerEndId}>
+  <Marker
+    id={markerEndId}
+    type={typeof markerEnd === 'string' ? markerEnd : undefined}
+    {...typeof markerEnd === 'object' ? markerEnd : null}
+  />
+</slot>

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

@@ -1,5 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
 import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+import Marker from './Marker.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -11,6 +13,9 @@ declare const __propDef: {
         initialX2?: number | undefined;
         y2: number;
         initialY2?: number | undefined;
+        marker?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerStart?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerEnd?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
@@ -21,7 +26,14 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        markerStart: {
+            id: string;
+        };
+        markerEnd: {
+            id: string;
+        };
+    };
 };
 export type LineProps = typeof __propDef.props;
 export type LineEvents = typeof __propDef.events;

package/dist/components/LinearGradient.svelte

@@ -1,20 +1,26 @@
-<script>import { uniqueId } from '@layerstack/utils';
-/** Unique id for linearGradient */
-export let id = uniqueId('linearGradient-');
-/** Array array of strings (colors), will equally distributed from 0-100%.  If array of tuples, will use first value as the offset, and second as color */
-export let stops = [
+<script lang="ts">
+  import { uniqueId } from '@layerstack/utils';
+
+  /** Unique id for linearGradient */
+  export let id: string = uniqueId('linearGradient-');
+
+  /** Array array of strings (colors), will equally distributed from 0-100%.  If array of tuples, will use first value as the offset, and second as color */
+  export let stops: string[] | [string | number, string][] = [
     'var(--tw-gradient-from)',
     'var(--tw-gradient-to)',
-];
-/** Apply color stops top-to-bottom (true) or left-to-right (false) */
-export let vertical = false;
-export let x1 = '0%';
-export let y1 = '0%';
-export let x2 = vertical ? '0%' : '100%';
-export let y2 = vertical ? '100%' : '0%';
-export let rotate = undefined;
-/** Define the coordinate system for attributes (i.e. gradientUnits) */
-export let units = 'objectBoundingBox';
+  ];
+
+  /** Apply color stops top-to-bottom (true) or left-to-right (false) */
+  export let vertical = false;
+  export let x1 = '0%';
+  export let y1 = '0%';
+  export let x2 = vertical ? '0%' : '100%';
+  export let y2 = vertical ? '100%' : '0%';
+
+  export let rotate: number | undefined = undefined;
+
+  /** Define the coordinate system for attributes (i.e. gradientUnits) */
+  export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
 </script>
 
 <defs>

package/dist/components/Link.svelte

@@ -1,29 +1,72 @@
-<script>import { link as d3Link, curveBumpX, curveBumpY } from 'd3-shape';
-import { interpolatePath } from 'd3-interpolate-path';
-import { motionStore } from '../stores/motionStore.js';
-// Override what is used from context
-export let data = undefined; // TODO: Update Type
-/**
- * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
- */
-export let sankey = false;
-export let source = sankey ? (d) => [d.source.x1, d.y0] : (d) => d.source;
-export let target = sankey ? (d) => [d.target.x0, d.y1] : (d) => d.target;
-/** Convenient property to swap x/y accessor logic */
-export let orientation = sankey ? 'horizontal' : 'vertical';
-export let x = (d) => (sankey ? d[0] : orientation === 'horizontal' ? d.y : d.x);
-export let y = (d) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
-export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
-export let tweened = undefined;
-// @ts-expect-error
-$: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
-$: tweened_d = motionStore('', { tweened: tweenedOptions });
-$: {
+<script lang="ts">
+  /*
+		TODO:
+		- [ ] Show path progressively show / animated in on load.  Also fix sliding in from left side (at last in from bottom)
+    - [ ] Support link types
+      - [ ] https://airbnb.io/visx/linktypes
+        - [ ] https://github.com/airbnb/visx/tree/master/packages/visx-shape/src/shapes/link
+      - [ ] https://observablehq.com/@nitaku/corner-connectors
+      - [ ] Straight
+      - [ ] Square
+      - [ ] Beveled
+      - [ ] Rounded
+    - [ ] Investigate: https://observablehq.com/@fil/sankey-link-paths
+    - [ ] Use for annotations - https://github.com/techniq/layerchart/issues/11
+	*/
+  import type { ComponentProps } from 'svelte';
+  import type { tweened as tweenedStore } from 'svelte/motion';
+  import { link as d3Link, curveBumpX, curveBumpY } from 'd3-shape';
+  import { interpolatePath } from 'd3-interpolate-path';
+
+  import { motionStore } from '../stores/motionStore.js';
+  import { uniqueId } from '@layerstack/utils';
+
+  import Marker from './Marker.svelte';
+
+  // Override what is used from context
+  export let data: any = undefined; // TODO: Update Type
+
+  /**
+   * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
+   */
+  export let sankey = false;
+  export let source = sankey ? (d: any) => [d.source.x1, d.y0] : (d: any) => d.source;
+  export let target = sankey ? (d: any) => [d.target.x0, d.y1] : (d: any) => d.target;
+
+  /** Convenient property to swap x/y accessor logic */
+  export let orientation: 'vertical' | 'horizontal' = sankey ? 'horizontal' : 'vertical';
+  export let x = (d: any) => (sankey ? d[0] : orientation === 'horizontal' ? d.y : d.x);
+  export let y = (d: any) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
+  export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
+
+  /** Marker to attach to start, mid, and end points of path */
+  export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    undefined;
+  /** Marker to attach to start point of path */
+  export let markerStart: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+  /** Marker to attach to all mid points of path */
+  export let markerMid: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+  /** Marker to attach to end point of path */
+  export let markerEnd: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+
+  $: markerStartId = markerStart || $$slots['markerStart'] ? uniqueId('marker-') : '';
+  $: markerMidId = markerMid || $$slots['markerMid'] ? uniqueId('marker-') : '';
+  $: markerEndId = markerEnd || $$slots['markerEnd'] ? uniqueId('marker-') : '';
+
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+  // @ts-expect-error
+  $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+  $: tweened_d = motionStore('', { tweened: tweenedOptions });
+
+  $: {
     orientation; // subscribe to orientation changes to update link
     const link = d3Link(curve).source(source).target(target).x(x).y(y);
     const d = link(data) ?? '';
     tweened_d.set(d);
-}
+  }
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -32,6 +75,9 @@ $: {
   class="path-link"
   d={$tweened_d}
   fill="none"
+  marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+  marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
+  marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
   on:click
   on:pointerover
   on:pointermove
@@ -39,3 +85,29 @@ $: {
   on:pointerleave
   {...$$restProps}
 />
+
+<slot name="markerStart" id={markerStartId}>
+  {#if markerStart}
+    <Marker
+      id={markerStartId}
+      type={typeof markerStart === 'string' ? markerStart : undefined}
+      {...typeof markerStart === 'object' ? markerStart : null}
+    />
+  {/if}
+</slot>
+
+<slot name="markerMid" id={markerMidId}>
+  <Marker
+    id={markerMidId}
+    type={typeof markerMid === 'string' ? markerMid : undefined}
+    {...typeof markerMid === 'object' ? markerMid : null}
+  />
+</slot>
+
+<slot name="markerEnd" id={markerEndId}>
+  <Marker
+    id={markerEndId}
+    type={typeof markerEnd === 'string' ? markerEnd : undefined}
+    {...typeof markerEnd === 'object' ? markerEnd : null}
+  />
+</slot>

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

@@ -1,5 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ComponentProps } from 'svelte';
 import type { tweened as tweenedStore } from 'svelte/motion';
+import Marker from './Marker.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -11,6 +13,10 @@ declare const __propDef: {
         x?: ((d: any) => any) | undefined;
         y?: ((d: any) => any) | undefined;
         curve?: import("d3-shape").CurveFactory | undefined;
+        marker?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerStart?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerMid?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerEnd?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
@@ -22,7 +28,17 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        markerStart: {
+            id: string;
+        };
+        markerMid: {
+            id: string;
+        };
+        markerEnd: {
+            id: string;
+        };
+    };
 };
 export type LinkProps = typeof __propDef.props;
 export type LinkEvents = typeof __propDef.events;

package/dist/components/Marker.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { uniqueId } from '@layerstack/utils';
+
+  /** Defined the type of a default marker, or define your own in the slot */
+  export let type: 'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot' | undefined =
+    undefined;
+
+  /** Unique id for marker */
+  export let id: string = uniqueId('marker-');
+
+  /** A number used to determine the size of the bounding box the marker content. */
+  export let size = 10;
+
+  /** The width of the marker viewport */
+  export let markerWidth: string | number = size;
+
+  /** The height of the marker viewport */
+  export let markerHeight: string | number = size;
+
+  /** Set the coordinate system for the markerWidth, markerHeight, and `<marker>` contents  */
+  export let markerUnits: 'userSpaceOnUse' | 'strokeWidth' = 'userSpaceOnUse';
+
+  /** The orientation of the marker relative to the shape it is attached to */
+  export let orient: 'auto' | 'auto-start-reverse' | number = 'auto-start-reverse';
+
+  /** The x coordinate for the reference point of the marker */
+  export let refX: string | number = ['arrow', 'triangle'].includes(type ?? '') ? 9 : 5;
+
+  /** The y coordinate for the reference point of the maker */
+  export let refY: string | number = 5;
+
+  /** The bound of the SVG viewport for the current SVG fragment */
+  export let viewBox = '0 0 10 10';
+</script>
+
+<defs>
+  <marker
+    {id}
+    {markerWidth}
+    {markerHeight}
+    {markerUnits}
+    {orient}
+    {refX}
+    {refY}
+    {viewBox}
+    {...$$restProps}
+    class={cls(
+      'overflow-visible',
+      // stroke
+      $$props.stroke == null &&
+        (['arrow', 'circle-stroke', 'line'].includes(type ?? '')
+          ? 'stroke-[context-stroke]'
+          : type === 'circle'
+            ? 'stroke-surface-100'
+            : 'stroke-none'),
+      // extra stroke attrs
+      '[stroke-linecap:round] [stroke-linejoin:round]',
+      //fill
+      $$props.fill == null &&
+        (['triangle', 'dot', 'circle'].includes(type ?? '')
+          ? 'fill-[context-stroke]'
+          : type === 'circle-stroke'
+            ? 'fill-surface-100'
+            : 'fill-none'),
+      $$props.class
+    )}
+  >
+    <slot>
+      {#if type === 'triangle'}
+        <path d="M 0 0 L 10 5 L 0 10 z" />
+      {:else if type === 'arrow'}
+        <polyline points="0 0, 10 5, 0 10" />
+      {:else if type === 'circle' || type === 'circle-stroke' || type === 'dot'}
+        <circle cx={5} cy={5} r={5} />
+      {:else if type === 'line'}
+        <polyline points="5 0, 5 10" />
+      {/if}
+    </slot>
+  </marker>
+</defs>

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        type?: "arrow" | "triangle" | "line" | "circle" | "circle-stroke" | "dot" | undefined;
+        id?: string | undefined;
+        size?: number | undefined;
+        markerWidth?: (string | number) | undefined;
+        markerHeight?: (string | number) | undefined;
+        markerUnits?: ("userSpaceOnUse" | "strokeWidth") | undefined;
+        orient?: ("auto" | "auto-start-reverse" | number) | undefined;
+        refX?: (string | number) | undefined;
+        refY?: (string | number) | undefined;
+        viewBox?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MarkerProps = typeof __propDef.props;
+export type MarkerEvents = typeof __propDef.events;
+export type MarkerSlots = typeof __propDef.slots;
+export default class Marker extends SvelteComponentTyped<MarkerProps, MarkerEvents, MarkerSlots> {
+}
+export {};

package/dist/components/MonthPath.svelte

@@ -1,19 +1,26 @@
-<script>import { timeWeek, timeYear } from 'd3-time';
-import { endOfMonth } from 'date-fns';
-export let date;
-/**
- * Size of cell.  If `number`, sets width/height as same.  If array, sets [width,height].  If undefined, is based on Chart width/height
- */
-export let cellSize;
-$: [cellWidth, cellHeight] = Array.isArray(cellSize) ? cellSize : [cellSize, cellSize];
-// start of month
-$: startDayOfWeek = date.getDay();
-$: startWeek = timeWeek.count(timeYear(date), date);
-// end of month
-$: monthEnd = endOfMonth(date);
-$: endDayOfWeek = monthEnd.getDay();
-$: endWeek = timeWeek.count(timeYear(monthEnd), monthEnd);
-$: pathData = `
+<script lang="ts">
+  import { timeWeek, timeYear } from 'd3-time';
+  import { endOfMonth } from 'date-fns';
+
+  export let date: Date;
+
+  /**
+   * Size of cell.  If `number`, sets width/height as same.  If array, sets [width,height].  If undefined, is based on Chart width/height
+   */
+  export let cellSize: number | [number, number];
+
+  $: [cellWidth, cellHeight] = Array.isArray(cellSize) ? cellSize : [cellSize, cellSize];
+
+  // start of month
+  $: startDayOfWeek = date.getDay();
+  $: startWeek = timeWeek.count(timeYear(date), date);
+
+  // end of month
+  $: monthEnd = endOfMonth(date);
+  $: endDayOfWeek = monthEnd.getDay();
+  $: endWeek = timeWeek.count(timeYear(monthEnd), monthEnd);
+
+  $: pathData = `
     M${(startWeek + 1) * cellWidth},${startDayOfWeek * cellHeight}
     H${startWeek * cellWidth} V${cellHeight * 7}
     H${endWeek * cellWidth} V${(endDayOfWeek + 1) * cellHeight}

package/dist/components/MotionPath.svelte

@@ -1,29 +1,38 @@
-<script>import { onMount } from 'svelte';
-import { uniqueId } from '@layerstack/utils';
-/** Id of path to move object along */
-export let pathId = uniqueId('motionPathId-');
-/** Id of object to move along path */
-export let objectId = uniqueId('motionObjectId-');
-/** Duration of the animation */
-export let duration;
-/** Number of times the animation will occur */
-export let repeatCount = undefined;
-/** Final state of the animation.  Freeze (last frame) or remove (first frame)
- * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#animate
- * */
-export let fill = 'freeze';
-/** Rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation */
-export let rotate = undefined;
-// TODO: Investigate `calcMode:spline`, `keyTimes`, and `keySplines` to work with `svelte/easing`
-// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/calcMode
-// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keyTimes
-// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keySplines
-// https://medium.com/javarevisited/animate-your-scalable-vector-graphics-svg-56f5800cd34b
-// Restart animation anytime the component is remounted (otherwise it only ever plays once)
-let animateEl;
-onMount(() => {
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { uniqueId } from '@layerstack/utils';
+
+  /** Id of path to move object along */
+  export let pathId: string = uniqueId('motionPathId-');
+
+  /** Id of object to move along path */
+  export let objectId: string = uniqueId('motionObjectId-');
+
+  /** Duration of the animation */
+  export let duration: string;
+
+  /** Number of times the animation will occur */
+  export let repeatCount: number | 'indefinite' | undefined = undefined;
+
+  /** Final state of the animation.  Freeze (last frame) or remove (first frame)
+   * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#animate
+   * */
+  export let fill: 'freeze' | 'remove' = 'freeze';
+
+  /** Rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation */
+  export let rotate: number | 'auto' | 'auto-reverse' | undefined = undefined;
+
+  // TODO: Investigate `calcMode:spline`, `keyTimes`, and `keySplines` to work with `svelte/easing`
+  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/calcMode
+  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keyTimes
+  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keySplines
+  // https://medium.com/javarevisited/animate-your-scalable-vector-graphics-svg-56f5800cd34b
+
+  // Restart animation anytime the component is remounted (otherwise it only ever plays once)
+  let animateEl: SVGAnimateMotionElement;
+  onMount(() => {
     animateEl.beginElement();
-});
+  });
 </script>
 
 <defs>

package/dist/components/Pack.svelte

@@ -1,20 +1,27 @@
-<script>import { pack as d3Pack } from 'd3-hierarchy';
-import { chartContext } from './ChartContext.svelte';
-const { data, width, height } = chartContext();
-export let size = undefined;
-/**
- * see: https://github.com/d3/d3-hierarchy#pack_padding
- */
-export let padding = undefined;
-let pack;
-$: {
+<script lang="ts">
+  import { pack as d3Pack } from 'd3-hierarchy';
+  import { chartContext } from './ChartContext.svelte';
+
+  const { data, width, height } = chartContext();
+
+  export let size: [number, number] | undefined = undefined;
+
+  /**
+   * see: https://github.com/d3/d3-hierarchy#pack_padding
+   */
+  export let padding: number | undefined = undefined;
+
+  let pack: ReturnType<typeof d3Pack>;
+  $: {
     pack = d3Pack().size(size ?? [$width, $height]);
+
     if (padding) {
-        pack.padding(padding);
+      pack.padding(padding);
     }
-}
-// @ts-expect-error
-$: packData = pack($data);
+  }
+
+  // @ts-expect-error
+  $: packData = pack($data);
 </script>
 
 <slot nodes={packData.descendants()} />