layerchart 2.0.0-next.60 → 2.0.0-next.62

package/dist/components/geo/index.js

@@ -1,26 +1,26 @@
-export { default as GeoCircle } from './GeoCircle.svelte';
-export * from './GeoCircle.svelte';
-export { default as GeoClipPath } from './GeoClipPath.svelte';
-export * from './GeoClipPath.svelte';
-export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
-export * from './GeoEdgeFade.svelte';
-export { default as GeoLegend } from './GeoLegend.svelte';
-export * from './GeoLegend.svelte';
-export { default as GeoPath } from './GeoPath.svelte';
-export * from './GeoPath.svelte';
-export { default as GeoPoint } from './GeoPoint.svelte';
-export * from './GeoPoint.svelte';
-export { default as GeoProjection } from './GeoProjection.svelte';
-export * from './GeoProjection.svelte';
-export { default as GeoRaster } from './GeoRaster.svelte';
-export * from './GeoRaster.svelte';
-export { default as GeoSpline } from './GeoSpline.svelte';
-export * from './GeoSpline.svelte';
-export { default as GeoTile } from './GeoTile.svelte';
-export * from './GeoTile.svelte';
-export { default as GeoVisible } from './GeoVisible.svelte';
-export * from './GeoVisible.svelte';
-export { default as Graticule } from './Graticule.svelte';
-export * from './Graticule.svelte';
-export { default as TileImage } from './TileImage.svelte';
-export * from './TileImage.svelte';
+export { default as GeoCircle } from './GeoCircle/GeoCircle.svelte';
+export * from './GeoCircle/GeoCircle.svelte';
+export { default as GeoClipPath } from './GeoClipPath/GeoClipPath.svelte';
+export * from './GeoClipPath/GeoClipPath.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade/GeoEdgeFade.svelte';
+export * from './GeoEdgeFade/GeoEdgeFade.svelte';
+export { default as GeoLegend } from './GeoLegend/GeoLegend.svelte';
+export * from './GeoLegend/GeoLegend.svelte';
+export { default as GeoPath } from './GeoPath/GeoPath.svelte';
+export * from './GeoPath/GeoPath.svelte';
+export { default as GeoPoint } from './GeoPoint/GeoPoint.svelte';
+export * from './GeoPoint/GeoPoint.svelte';
+export { default as GeoProjection } from './GeoProjection/GeoProjection.svelte';
+export * from './GeoProjection/GeoProjection.svelte';
+export { default as GeoRaster } from './GeoRaster/GeoRaster.svelte';
+export * from './GeoRaster/GeoRaster.svelte';
+export { default as GeoSpline } from './GeoSpline/GeoSpline.svelte';
+export * from './GeoSpline/GeoSpline.svelte';
+export { default as GeoTile } from './GeoTile/GeoTile.svelte';
+export * from './GeoTile/GeoTile.svelte';
+export { default as GeoVisible } from './GeoVisible/GeoVisible.svelte';
+export * from './GeoVisible/GeoVisible.svelte';
+export { default as Graticule } from './Graticule/Graticule.svelte';
+export * from './Graticule/Graticule.svelte';
+export { default as TileImage } from './TileImage/TileImage.svelte';
+export * from './TileImage/TileImage.svelte';

package/dist/components/graph/Ribbon/Ribbon.base.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { RibbonProps } from './Ribbon.shared.svelte.js';
+
+  export type RibbonBaseLayerComponents = {
+    Path: Component<any>;
+  };
+
+  export type RibbonBaseProps = RibbonProps & RibbonBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import type { PointerEventHandler } from 'svelte/elements';
+  import { ribbon as d3ribbon, ribbonArrow as d3ribbonArrow } from 'd3-chord';
+
+  import { getChartContext } from '../../../contexts/chart.js';
+  import { cls } from '@layerstack/tailwind';
+
+  let {
+    Path,
+    chord,
+    radius,
+    directed = false,
+    headRadius,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    data,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    ontouchmove,
+    tooltip,
+    motion,
+    class: className,
+    ...restProps
+  }: RibbonBaseProps = $props();
+
+  const ctx = getChartContext();
+
+  const ribbonGenerator = $derived.by(() => {
+    if (directed) {
+      const gen = d3ribbonArrow();
+      if (radius != null) gen.radius(radius);
+      if (headRadius != null) gen.headRadius(headRadius);
+      return gen;
+    } else {
+      const gen = d3ribbon();
+      if (radius != null) gen.radius(radius);
+      return gen;
+    }
+  });
+
+  // @ts-expect-error - Chord type is compatible with Ribbon at runtime; radius is set on the generator
+  const pathData = $derived(ribbonGenerator(chord) ?? undefined);
+
+  const onPointerEnter: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointerenter?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+
+  const onPointerMove: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointermove?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+
+  const onPointerLeave: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointerleave?.(e);
+    if (tooltip) ctx.tooltip.hide();
+  };
+</script>
+
+<Path
+  {pathData}
+  {fill}
+  {fillOpacity}
+  {stroke}
+  {strokeWidth}
+  {opacity}
+  {motion}
+  {...restProps}
+  class={cls('lc-ribbon', className)}
+  onpointerenter={onPointerEnter}
+  onpointermove={onPointerMove}
+  onpointerleave={onPointerLeave}
+  ontouchmove={(e: TouchEvent & { currentTarget: SVGPathElement }) => {
+    ontouchmove?.(e);
+    if (tooltip) {
+      e.preventDefault();
+    }
+  }}
+/>

package/dist/components/graph/Ribbon/Ribbon.base.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { RibbonProps } from './Ribbon.shared.svelte.js';
+export type RibbonBaseLayerComponents = {
+    Path: Component<any>;
+};
+export type RibbonBaseProps = RibbonProps & RibbonBaseLayerComponents;
+declare const Ribbon: Component<RibbonBaseProps, {}, "">;
+type Ribbon = ReturnType<typeof Ribbon>;
+export default Ribbon;

package/dist/components/graph/Ribbon/Ribbon.canvas.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { RibbonProps, RibbonPropsWithoutHTML } from './Ribbon.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RibbonBase from './Ribbon.base.svelte';
+  import Path from '../../Path/Path.canvas.svelte';
+  import type { RibbonProps } from './Ribbon.shared.svelte.js';
+
+  let props: RibbonProps = $props();
+</script>
+
+<RibbonBase {Path} {...props} />

package/dist/components/graph/Ribbon/Ribbon.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RibbonProps, RibbonPropsWithoutHTML } from './Ribbon.shared.svelte.js';
+import type { RibbonProps } from './Ribbon.shared.svelte.js';
+declare const Ribbon: import("svelte").Component<RibbonProps, {}, "">;
+type Ribbon = ReturnType<typeof Ribbon>;
+export default Ribbon;

package/dist/components/graph/Ribbon/Ribbon.shared.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { PointerEventHandler, SVGAttributes } from 'svelte/elements';
+import type { PathPropsWithoutHTML } from '../../Path/Path.shared.svelte.js';
+import type { MotionProp } from '../../../utils/motion.svelte.js';
+import type { CommonStyleProps, Without } from '../../../utils/types.js';
+export type RibbonPropsWithoutHTML = {
+    chord: import('d3-chord').Chord;
+    radius?: number;
+    /** @default false */
+    directed?: boolean;
+    headRadius?: number;
+    tooltip?: boolean;
+    data?: any;
+    motion?: MotionProp;
+    onpointerenter?: PointerEventHandler<SVGPathElement>;
+    onpointermove?: PointerEventHandler<SVGPathElement>;
+    onpointerleave?: PointerEventHandler<SVGPathElement>;
+    ontouchmove?: (e: TouchEvent & {
+        currentTarget: SVGPathElement;
+    }) => void;
+} & CommonStyleProps;
+export type RibbonProps = RibbonPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, RibbonPropsWithoutHTML & PathPropsWithoutHTML>;

package/dist/components/graph/Ribbon/Ribbon.shared.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/components/graph/Ribbon/Ribbon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { RibbonProps, RibbonPropsWithoutHTML } from './Ribbon.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../../contexts/layer.js';
+  import RibbonSvg from './Ribbon.svg.svelte';
+  import RibbonCanvas from './Ribbon.canvas.svelte';
+  import type { RibbonProps } from './Ribbon.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: RibbonProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <RibbonSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <RibbonCanvas {...props} />
+{/if}

package/dist/components/graph/Ribbon/Ribbon.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RibbonProps, RibbonPropsWithoutHTML } from './Ribbon.shared.svelte.js';
+import type { RibbonProps } from './Ribbon.shared.svelte.js';
+declare const Ribbon: import("svelte").Component<RibbonProps, {}, "">;
+type Ribbon = ReturnType<typeof Ribbon>;
+export default Ribbon;

package/dist/components/graph/Ribbon/Ribbon.svg.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { RibbonProps, RibbonPropsWithoutHTML } from './Ribbon.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RibbonBase from './Ribbon.base.svelte';
+  import Path from '../../Path/Path.svg.svelte';
+  import type { RibbonProps } from './Ribbon.shared.svelte.js';
+
+  let props: RibbonProps = $props();
+</script>
+
+<RibbonBase {Path} {...props} />

package/dist/components/graph/Ribbon/Ribbon.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RibbonProps, RibbonPropsWithoutHTML } from './Ribbon.shared.svelte.js';
+import type { RibbonProps } from './Ribbon.shared.svelte.js';
+declare const Ribbon: import("svelte").Component<RibbonProps, {}, "">;
+type Ribbon = ReturnType<typeof Ribbon>;
+export default Ribbon;

package/dist/components/graph/index.d.ts

@@ -2,7 +2,7 @@ export { default as Chord } from './Chord.svelte';
 export * from './Chord.svelte';
 export { default as Dagre } from './Dagre.svelte';
 export * from './Dagre.svelte';
-export { default as Ribbon } from './Ribbon.svelte';
-export * from './Ribbon.svelte';
+export { default as Ribbon } from './Ribbon/Ribbon.svelte';
+export * from './Ribbon/Ribbon.svelte';
 export { default as Sankey } from './Sankey.svelte';
 export * from './Sankey.svelte';

package/dist/components/graph/index.js

@@ -2,7 +2,7 @@ export { default as Chord } from './Chord.svelte';
 export * from './Chord.svelte';
 export { default as Dagre } from './Dagre.svelte';
 export * from './Dagre.svelte';
-export { default as Ribbon } from './Ribbon.svelte';
-export * from './Ribbon.svelte';
+export { default as Ribbon } from './Ribbon/Ribbon.svelte';
+export * from './Ribbon/Ribbon.svelte';
 export { default as Sankey } from './Sankey.svelte';
 export * from './Sankey.svelte';

package/dist/components/index.d.ts

@@ -1,128 +1,129 @@
 export * from './charts/index.js';
 export * from './types.js';
-export { default as AnnotationLine } from './AnnotationLine.svelte';
-export * from './AnnotationLine.svelte';
-export { default as AnnotationPoint } from './AnnotationPoint.svelte';
-export * from './AnnotationPoint.svelte';
-export { default as AnnotationRange } from './AnnotationRange.svelte';
-export * from './AnnotationRange.svelte';
-export { default as Arc } from './Arc.svelte';
-export * from './Arc.svelte';
-export { default as ArcLabel } from './ArcLabel.svelte';
-export * from './ArcLabel.svelte';
-export { default as Area } from './Area.svelte';
-export * from './Area.svelte';
-export { default as Axis } from './Axis.svelte';
-export * from './Axis.svelte';
-export { default as Bar } from './Bar.svelte';
-export * from './Bar.svelte';
-export { default as Bars } from './Bars.svelte';
-export * from './Bars.svelte';
-export { default as Blur } from './Blur.svelte';
-export * from './Blur.svelte';
-export { default as BoxPlot } from './BoxPlot.svelte';
-export * from './BoxPlot.svelte';
+export { default as AnnotationLine } from './AnnotationLine/AnnotationLine.svelte';
+export * from './AnnotationLine/AnnotationLine.svelte';
+export { default as AnnotationPoint } from './AnnotationPoint/AnnotationPoint.svelte';
+export * from './AnnotationPoint/AnnotationPoint.svelte';
+export { default as AnnotationRange } from './AnnotationRange/AnnotationRange.svelte';
+export * from './AnnotationRange/AnnotationRange.svelte';
+export { default as Arc } from './Arc/Arc.svelte';
+export * from './Arc/Arc.svelte';
+export { default as ArcLabel } from './ArcLabel/ArcLabel.svelte';
+export * from './ArcLabel/ArcLabel.svelte';
+export { default as Area } from './Area/Area.svelte';
+export * from './Area/Area.svelte';
+export { default as Axis } from './Axis/Axis.svelte';
+export * from './Axis/Axis.svelte';
+export { default as Bar } from './Bar/Bar.svelte';
+export * from './Bar/Bar.svelte';
+export { default as Bars } from './Bars/Bars.svelte';
+export * from './Bars/Bars.svelte';
+export { default as Blur } from './Blur/Blur.svelte';
+export * from './Blur/Blur.svelte';
+export { default as BoxPlot } from './BoxPlot/BoxPlot.svelte';
+export * from './BoxPlot/BoxPlot.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export * from './Bounds.svelte';
 export { default as BrushContext } from './BrushContext.svelte';
 export * from './BrushContext.svelte';
-export { default as Calendar } from './Calendar.svelte';
-export * from './Calendar.svelte';
-export { default as Cell } from './Cell.svelte';
-export * from './Cell.svelte';
+export { default as Calendar } from './Calendar/Calendar.svelte';
+export * from './Calendar/Calendar.svelte';
+export { default as Cell } from './Cell/Cell.svelte';
+export * from './Cell/Cell.svelte';
 export { default as Canvas } from './layers/Canvas.svelte';
 export * from './layers/Canvas.svelte';
-export { default as Chart } from './Chart.svelte';
-export * from './Chart.svelte';
-export { default as ChartClipPath } from './ChartClipPath.svelte';
-export * from './ChartClipPath.svelte';
-export { default as Circle } from './Circle.svelte';
-export * from './Circle.svelte';
-export { default as CircleClipPath } from './CircleClipPath.svelte';
-export * from './CircleClipPath.svelte';
-export { default as ClipPath } from './ClipPath.svelte';
-export * from './ClipPath.svelte';
+export { default as Chart } from "./Chart/Chart.svelte";
+export * from "./Chart/Chart.svelte";
+export { default as ChartCore } from './Chart/ChartCore.svelte';
+export { default as ChartClipPath } from './ChartClipPath/ChartClipPath.svelte';
+export * from './ChartClipPath/ChartClipPath.svelte';
+export { default as Circle } from './Circle/Circle.svelte';
+export * from './Circle/Circle.svelte';
+export { default as CircleClipPath } from './CircleClipPath/CircleClipPath.svelte';
+export * from './CircleClipPath/CircleClipPath.svelte';
+export { default as ClipPath } from './ClipPath/ClipPath.svelte';
+export * from './ClipPath/ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export * from './ColorRamp.svelte';
-export { default as Contour } from './Contour.svelte';
-export * from './Contour.svelte';
-export { default as Density } from './Density.svelte';
-export * from './Density.svelte';
-export { default as Ellipse } from './Ellipse.svelte';
-export * from './Ellipse.svelte';
-export { default as Frame } from './Frame.svelte';
-export * from './Frame.svelte';
-export { default as Grid } from './Grid.svelte';
-export * from './Grid.svelte';
-export { default as Group } from './Group.svelte';
-export * from './Group.svelte';
-export { default as Highlight } from './Highlight.svelte';
-export * from './Highlight.svelte';
+export { default as Contour } from './Contour/Contour.svelte';
+export * from './Contour/Contour.svelte';
+export { default as Density } from './Density/Density.svelte';
+export * from './Density/Density.svelte';
+export { default as Ellipse } from './Ellipse/Ellipse.svelte';
+export * from './Ellipse/Ellipse.svelte';
+export { default as Frame } from './Frame/Frame.svelte';
+export * from './Frame/Frame.svelte';
+export { default as Grid } from './Grid/Grid.svelte';
+export * from './Grid/Grid.svelte';
+export { default as Group } from './Group/Group.svelte';
+export * from './Group/Group.svelte';
+export { default as Highlight } from './Highlight/Highlight.svelte';
+export * from './Highlight/Highlight.svelte';
 export { default as Html } from './layers/Html.svelte';
 export * from './layers/Html.svelte';
-export { default as Hull } from './Hull.svelte';
-export * from './Hull.svelte';
-export { default as Image } from './Image.svelte';
-export * from './Image.svelte';
-export { default as Labels } from './Labels.svelte';
-export * from './Labels.svelte';
+export { default as Hull } from './Hull/Hull.svelte';
+export * from './Hull/Hull.svelte';
+export { default as Image } from './Image/Image.svelte';
+export * from './Image/Image.svelte';
+export { default as Labels } from './Labels/Labels.svelte';
+export * from './Labels/Labels.svelte';
 export { default as Layer } from './layers/Layer.svelte';
 export * from './layers/Layer.svelte';
 export { default as CircleLegend } from './CircleLegend.svelte';
 export * from './CircleLegend.svelte';
 export { default as Legend } from './Legend.svelte';
 export * from './Legend.svelte';
-export { default as Line } from './Line.svelte';
-export * from './Line.svelte';
-export { default as Spline } from './Spline.svelte';
-export * from './Spline.svelte';
-export { default as LinearGradient } from './LinearGradient.svelte';
-export * from './LinearGradient.svelte';
-export { default as Link } from './Link.svelte';
-export * from './Link.svelte';
+export { default as Line } from './Line/Line.svelte';
+export * from './Line/Line.svelte';
+export { default as Spline } from './Spline/Spline.svelte';
+export * from './Spline/Spline.svelte';
+export { default as LinearGradient } from './LinearGradient/LinearGradient.svelte';
+export * from './LinearGradient/LinearGradient.svelte';
+export { default as Link } from './Link/Link.svelte';
+export * from './Link/Link.svelte';
 export { default as MotionPath } from './MotionPath.svelte';
 export * from './MotionPath.svelte';
-export { default as Month } from './Month.svelte';
-export * from './Month.svelte';
-export { default as Path } from './Path.svelte';
-export * from './Path.svelte';
-export { default as Pattern } from './Pattern.svelte';
-export * from './Pattern.svelte';
-export { default as Pie } from './Pie.svelte';
-export * from './Pie.svelte';
+export { default as Month } from './Month/Month.svelte';
+export * from './Month/Month.svelte';
+export { default as Path } from './Path/Path.svelte';
+export * from './Path/Path.svelte';
+export { default as Pattern } from './Pattern/Pattern.svelte';
+export * from './Pattern/Pattern.svelte';
+export { default as Pie } from './Pie/Pie.svelte';
+export * from './Pie/Pie.svelte';
 export { default as Point } from './Point.svelte';
 export * from './Point.svelte';
-export { default as Points } from './Points.svelte';
-export * from './Points.svelte';
-export { default as Polygon } from './Polygon.svelte';
-export * from './Polygon.svelte';
-export { default as RadialGradient } from './RadialGradient.svelte';
-export * from './RadialGradient.svelte';
-export { default as Raster } from './Raster.svelte';
-export * from './Raster.svelte';
-export { default as Rect } from './Rect.svelte';
-export * from './Rect.svelte';
-export { default as RectClipPath } from './RectClipPath.svelte';
-export * from './RectClipPath.svelte';
-export { default as Rule } from './Rule.svelte';
-export * from './Rule.svelte';
+export { default as Points } from './Points/Points.svelte';
+export * from './Points/Points.svelte';
+export { default as Polygon } from './Polygon/Polygon.svelte';
+export * from './Polygon/Polygon.svelte';
+export { default as RadialGradient } from './RadialGradient/RadialGradient.svelte';
+export * from './RadialGradient/RadialGradient.svelte';
+export { default as Raster } from './Raster/Raster.svelte';
+export * from './Raster/Raster.svelte';
+export { default as Rect } from './Rect/Rect.svelte';
+export * from './Rect/Rect.svelte';
+export { default as RectClipPath } from './RectClipPath/RectClipPath.svelte';
+export * from './RectClipPath/RectClipPath.svelte';
+export { default as Rule } from './Rule/Rule.svelte';
+export * from './Rule/Rule.svelte';
 export { default as Svg } from './layers/Svg.svelte';
 export * from './layers/Svg.svelte';
-export { default as Text } from './Text.svelte';
-export * from './Text.svelte';
-export { default as Trail } from './Trail.svelte';
-export * from './Trail.svelte';
-export { default as Threshold } from './Threshold.svelte';
-export * from './Threshold.svelte';
+export { default as Text } from './Text/Text.svelte';
+export * from './Text/Text.svelte';
+export { default as Trail } from './Trail/Trail.svelte';
+export * from './Trail/Trail.svelte';
+export { default as Threshold } from './Threshold/Threshold.svelte';
+export * from './Threshold/Threshold.svelte';
 export * as Tooltip from './tooltip/index.js';
 export * from './tooltip/TooltipContext.svelte';
 export { default as TransformContext } from './TransformContext.svelte';
 export * from './TransformContext.svelte';
-export { default as Vector } from './Vector.svelte';
-export * from './Vector.svelte';
-export { default as Violin } from './Violin.svelte';
-export * from './Violin.svelte';
-export { default as Voronoi } from './Voronoi.svelte';
-export * from './Voronoi.svelte';
+export { default as Vector } from './Vector/Vector.svelte';
+export * from './Vector/Vector.svelte';
+export { default as Violin } from './Violin/Violin.svelte';
+export * from './Violin/Violin.svelte';
+export { default as Voronoi } from './Voronoi/Voronoi.svelte';
+export * from './Voronoi/Voronoi.svelte';
 export { default as WebGL } from './layers/WebGL.svelte';
 export * from './layers/WebGL.svelte';