layerchart 2.0.0-next.44 → 2.0.0-next.46

package/dist/components/charts/PieChart.svelte

@@ -24,13 +24,15 @@
     | 'marks'
     | 'onTooltipClick'
     | 'profile'
-    | 'renderContext'
+    | 'layer'
     | 'series'
     | 'tooltip'
     | 'tooltipContext'
     | 'cRange'
     | 'padding'
     | 'context'
+    | 'width'
+    | 'height'
   > & {
     /**
      * Key accessor
@@ -181,7 +183,7 @@
   import Arc from '../Arc.svelte';
   import Chart from '../Chart.svelte';
   import Group from '../Group.svelte';
-  import Layer from '../layout/Layer.svelte';
+  import Layer from '../layers/Layer.svelte';
   import Legend from '../Legend.svelte';
   import Pie from '../Pie.svelte';
   import * as Tooltip from '../tooltip/index.js';
@@ -197,6 +199,9 @@
   import { SeriesState } from '../../states/series.svelte.js';
   import { createLegendProps } from './utils.svelte.js';
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
+  import { getSettings } from '../../contexts/settings.js';
+
+  const settings = getSettings();
 
   let {
     data = [],
@@ -219,9 +224,9 @@
     /** Event dispatched with current tooltip data */
     onTooltipClick = () => {},
     props = {},
-    renderContext = 'svg',
+    layer: layerProp,
     profile = false,
-    debug = false,
+    debug: debugProp,
     tooltip = true,
     children: childrenProp,
     aboveContext,
@@ -235,6 +240,9 @@
     ...restProps
   }: PieChartProps<TData> = $props();
 
+  const layer = $derived(layerProp ?? settings.layer);
+  const debug = $derived(debugProp ?? settings.debug);
+
   const series = $derived(
     seriesProp === undefined ? [{ key: 'default', value: value }] : seriesProp
   );
@@ -404,8 +412,8 @@
       {@render belowContext?.(snippetProps)}
 
       <Layer
-        type={renderContext}
-        {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+        type={layer}
+        {...asAny(layer === 'canvas' ? props.canvas : props.svg)}
         {center}
         {debug}
       >

package/dist/components/charts/PieChart.svelte.d.ts

@@ -6,7 +6,7 @@ export type PieChartExtraSnippetProps<TData> = {
     getGroupProps: () => ComponentProps<typeof Group>;
 };
 export type PieChartPropsObjProp = Pick<SimplifiedChartPropsObject, 'pie' | 'group' | 'arc' | 'legend' | 'canvas' | 'svg' | 'tooltip'>;
-export type PieChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc, PieChartExtraSnippetProps<TData>>, 'aboveContext' | 'aboveMarks' | 'belowContext' | 'belowMarks' | 'children' | 'data' | 'debug' | 'legend' | 'marks' | 'onTooltipClick' | 'profile' | 'renderContext' | 'series' | 'tooltip' | 'tooltipContext' | 'cRange' | 'padding' | 'context'> & {
+export type PieChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc, PieChartExtraSnippetProps<TData>>, 'aboveContext' | 'aboveMarks' | 'belowContext' | 'belowMarks' | 'children' | 'data' | 'debug' | 'legend' | 'marks' | 'onTooltipClick' | 'profile' | 'layer' | 'series' | 'tooltip' | 'tooltipContext' | 'cRange' | 'padding' | 'context' | 'width' | 'height'> & {
     /**
      * Key accessor
      *

package/dist/components/charts/ScatterChart.svelte

@@ -55,7 +55,7 @@
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
-  import Layer from '../layout/Layer.svelte';
+  import Layer from '../layers/Layer.svelte';
   import Legend from '../Legend.svelte';
   import Points from '../Points.svelte';
   import Rule from '../Rule.svelte';
@@ -65,6 +65,9 @@
   import { asAny } from '../../utils/types.js';
   import { SeriesState } from '../../states/series.svelte.js';
   import { createLegendProps } from './utils.svelte.js';
+  import { getSettings } from '../../contexts/settings.js';
+
+  const settings = getSettings();
 
   let {
     data = [],
@@ -85,9 +88,9 @@
     context = $bindable(),
     onTooltipClick = () => {},
     props = {},
-    renderContext = 'svg',
+    layer: layerProp,
     profile = false,
-    debug = false,
+    debug: debugProp,
     children: childrenProp,
     aboveContext,
     belowContext,
@@ -99,6 +102,9 @@
     ...restProps
   }: ScatterChartProps<TData> = $props();
 
+  const layer = $derived(layerProp ?? settings.layer);
+  const debug = $derived(debugProp ?? settings.debug);
+
   const series: SeriesData<TData, typeof Points>[] = $derived(
     seriesProp === undefined ? [{ key: 'default', data: chartDataArray(data) }] : seriesProp
   );
@@ -220,7 +226,7 @@
   yNice
   c={yProp}
   cRange={['var(--color-primary, currentColor)']}
-  padding={defaultChartPadding(axis, legend)}
+  padding={defaultChartPadding({ axis, legend })}
   {...restProps}
   tooltip={tooltip === false
     ? false
@@ -265,11 +271,7 @@
       {@render childrenProp(snippetProps)}
     {:else}
       {@render belowContext?.(snippetProps)}
-      <Layer
-        type={renderContext}
-        {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
-        {debug}
-      >
+      <Layer type={layer} {...asAny(layer === 'canvas' ? props.canvas : props.svg)} {debug}>
         {#if typeof grid === 'function'}
           {@render grid(snippetProps)}
         {:else if grid}

package/dist/components/charts/types.d.ts

@@ -4,21 +4,22 @@ import type BrushContext from '../BrushContext.svelte';
 import type { AnyScale } from '../../utils/scales.svelte.js';
 import type { AnnotationPoint, AnnotationLine, AnnotationRange, Area, Axis, Group, Labels, Legend, Points, Rule, Spline } from '../index.js';
 import type TooltipContext from '../tooltip/TooltipContext.svelte';
-import type { TooltipContextValue } from '../tooltip/TooltipContext.svelte';
+import type { TooltipContextValue } from '../../contexts/tooltip.js';
 import type Highlight from '../Highlight.svelte';
 import type Line from '../Line.svelte';
-import type Svg from '../layout/Svg.svelte';
+import type Svg from '../layers/Svg.svelte';
 import type Tooltip from '../tooltip/Tooltip.svelte';
 import type TooltipHeader from '../tooltip/TooltipHeader.svelte';
 import type TooltipList from '../tooltip/TooltipList.svelte';
 import type TooltipItem from '../tooltip/TooltipItem.svelte';
 import type TooltipSeparator from '../tooltip/TooltipSeparator.svelte';
-import type { ChartContextValue, ChartPropsWithoutHTML } from '../Chart.svelte';
+import type { ChartProps } from '../Chart.svelte';
+import type { ChartContextValue } from '../../contexts/chart.js';
 import type Grid from '../Grid.svelte';
 import type Bars from '../Bars.svelte';
 import type Pie from '../Pie.svelte';
 import type Arc from '../Arc.svelte';
-import type Canvas from '../layout/Canvas.svelte';
+import type Canvas from '../layers/Canvas.svelte';
 import type { Without } from '../../utils/types.js';
 export type SeriesData<TData, TComponent extends Component> = {
     key: string;
@@ -198,7 +199,7 @@ export type BaseChartProps<TData, TComponent extends Component, TSnippetProps =
      *
      * @default 'svg'
      */
-    renderContext?: 'svg' | 'canvas';
+    layer?: 'svg' | 'canvas';
     /**
      * Whether to log the initial render performance using `console.time`.
      *
@@ -222,7 +223,7 @@ export type BaseChartProps<TData, TComponent extends Component, TSnippetProps =
     aboveMarks?: ChartSnippet;
     marks?: ChartSnippet;
 };
-export type SimplifiedChartProps<TData, TComponent extends Component, TSnippetProps = {}, ChartSnippet = SimplifiedChartSnippet<TData, TComponent, TSnippetProps>> = BaseChartProps<TData, TComponent, TSnippetProps, ChartSnippet> & Without<ChartPropsWithoutHTML<TData>, BaseChartProps<TData, TComponent, TSnippetProps, ChartSnippet>>;
+export type SimplifiedChartProps<TData, TComponent extends Component, TSnippetProps = {}, ChartSnippet = SimplifiedChartSnippet<TData, TComponent, TSnippetProps>> = BaseChartProps<TData, TComponent, TSnippetProps, ChartSnippet> & Without<ChartProps<TData>, BaseChartProps<TData, TComponent, TSnippetProps, ChartSnippet>>;
 export type ChartAnnotations = Array<({
     /** Create AnnotationPoint */
     type: 'point';

package/dist/components/index.d.ts

@@ -24,9 +24,9 @@ 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 Canvas } from './layout/Canvas.svelte';
-export * from './layout/Canvas.svelte';
-export { default as Chart, getChartContext, getRenderContext } from './Chart.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';
@@ -50,7 +50,7 @@ export { default as ForceSimulation } from './ForceSimulation.svelte';
 export * from './ForceSimulation.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export * from './GeoCircle.svelte';
-export { default as GeoContext, getGeoContext } from './GeoContext.svelte';
+export { default as GeoContext } from './GeoContext.svelte';
 export * from './GeoContext.svelte';
 export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export * from './GeoEdgeFade.svelte';
@@ -72,14 +72,14 @@ 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 Html } from './layout/Html.svelte';
-export * from './layout/Html.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 Labels } from './Labels.svelte';
 export * from './Labels.svelte';
-export { default as Layer } from './layout/Layer.svelte';
-export * from './layout/Layer.svelte';
+export { default as Layer } from './layers/Layer.svelte';
+export * from './layers/Layer.svelte';
 export { default as Legend } from './Legend.svelte';
 export * from './Legend.svelte';
 export { default as Line } from './Line.svelte';
@@ -96,6 +96,8 @@ export { default as Pack } from './Pack.svelte';
 export * from './Pack.svelte';
 export { default as Partition } from './Partition.svelte';
 export * from './Partition.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';
@@ -116,8 +118,8 @@ export { default as Rule } from './Rule.svelte';
 export * from './Rule.svelte';
 export { default as Sankey } from './Sankey.svelte';
 export * from './Sankey.svelte';
-export { default as Svg } from './layout/Svg.svelte';
-export * from './layout/Svg.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 Threshold } from './Threshold.svelte';
@@ -134,5 +136,5 @@ export { default as Treemap } from './Treemap.svelte';
 export * from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';
 export * from './Voronoi.svelte';
-export { default as WebGL } from './layout/WebGL.svelte';
-export * from './layout/WebGL.svelte';
+export { default as WebGL } from './layers/WebGL.svelte';
+export * from './layers/WebGL.svelte';

package/dist/components/index.js

@@ -24,9 +24,9 @@ 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 Canvas } from './layout/Canvas.svelte';
-export * from './layout/Canvas.svelte';
-export { default as Chart, getChartContext, getRenderContext } from './Chart.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';
@@ -50,7 +50,7 @@ export { default as ForceSimulation } from './ForceSimulation.svelte';
 export * from './ForceSimulation.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export * from './GeoCircle.svelte';
-export { default as GeoContext, getGeoContext } from './GeoContext.svelte';
+export { default as GeoContext } from './GeoContext.svelte';
 export * from './GeoContext.svelte';
 export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export * from './GeoEdgeFade.svelte';
@@ -72,14 +72,14 @@ 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 Html } from './layout/Html.svelte';
-export * from './layout/Html.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 Labels } from './Labels.svelte';
 export * from './Labels.svelte';
-export { default as Layer } from './layout/Layer.svelte';
-export * from './layout/Layer.svelte';
+export { default as Layer } from './layers/Layer.svelte';
+export * from './layers/Layer.svelte';
 export { default as Legend } from './Legend.svelte';
 export * from './Legend.svelte';
 export { default as Line } from './Line.svelte';
@@ -96,6 +96,8 @@ export { default as Pack } from './Pack.svelte';
 export * from './Pack.svelte';
 export { default as Partition } from './Partition.svelte';
 export * from './Partition.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';
@@ -116,8 +118,8 @@ export { default as Rule } from './Rule.svelte';
 export * from './Rule.svelte';
 export { default as Sankey } from './Sankey.svelte';
 export * from './Sankey.svelte';
-export { default as Svg } from './layout/Svg.svelte';
-export * from './layout/Svg.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 Threshold } from './Threshold.svelte';
@@ -135,5 +137,5 @@ export { default as Treemap } from './Treemap.svelte';
 export * from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';
 export * from './Voronoi.svelte';
-export { default as WebGL } from './layout/WebGL.svelte';
-export * from './layout/WebGL.svelte';
+export { default as WebGL } from './layers/WebGL.svelte';
+export * from './layers/WebGL.svelte';

package/dist/components/{layout → layers}/Canvas.svelte

@@ -86,54 +86,6 @@
   export type CanvasProps = CanvasPropsWithoutHTML &
     Without<HTMLCanvasAttributes, CanvasPropsWithoutHTML>;
 
-  type ComponentRender<T extends Element = Element> = {
-    name: string;
-    render: (ctx: CanvasRenderingContext2D, styleOverrides?: ComputedStylesOptions) => any;
-    retainState?: boolean;
-    events?: {
-      click?: MouseEventHandler<T> | null;
-      dblclick?: MouseEventHandler<T> | null;
-      pointerenter?: PointerEventHandler<T> | null;
-      pointerover?: PointerEventHandler<T> | null;
-      pointermove?: PointerEventHandler<T> | null;
-      pointerleave?: PointerEventHandler<T> | null;
-      pointerout?: PointerEventHandler<T> | null;
-      pointerdown?: PointerEventHandler<T> | null;
-      touchmove?: TouchEventHandler<T> | null;
-    };
-    /**
-     * Optional dependencies to track and invalidate the canvas context when they change.
-     */
-    deps?: () => any[];
-  };
-
-  export type CanvasContextValue = {
-    /**
-     * Register component to render.
-     *
-     * Returns method to unregister on component destroy
-     */
-    register<T extends Element>(component: ComponentRender<T>): () => void;
-    invalidate(): void;
-  };
-
-  const CanvasContext = new Context<CanvasContextValue>('CanvasContext');
-
-  const defaultCanvasContext: CanvasContextValue = {
-    register: <T extends Element>(_: ComponentRender<T>) => {
-      return () => {};
-    },
-    invalidate: () => {},
-  };
-
-  export function getCanvasContext() {
-    return CanvasContext.getOr(defaultCanvasContext);
-  }
-
-  function setCanvasContext(context: CanvasContextValue) {
-    return CanvasContext.set(context);
-  }
-
   /**
    * Handles the automatic registration of the component to the canvas context,
    * with dependency tracking and cleanup on destroy.
@@ -152,19 +104,20 @@
   import { Logger, localPoint } from '@layerstack/utils';
   import { MediaQueryPresets } from '@layerstack/svelte-state';
 
-  import { setRenderContext } from '../Chart.svelte';
-  import { getTransformContext } from '../TransformContext.svelte';
-  import { getPixelColor, scaleCanvas, type ComputedStylesOptions } from '../../utils/canvas.js';
+  import { setLayerContext } from '../../contexts/layer.js';
+  import { getTransformContext } from '../../contexts/transform.js';
+  import { getPixelColor, scaleCanvas } from '../../utils/canvas.js';
   import { getColorStr, rgbColorGenerator } from '../../utils/color.js';
-  import { Context, useMutationObserver, watch } from 'runed';
-  import type {
-    HTMLCanvasAttributes,
-    MouseEventHandler,
-    PointerEventHandler,
-    TouchEventHandler,
-  } from 'svelte/elements';
+  import { useMutationObserver, watch } from 'runed';
+  import type { HTMLCanvasAttributes, PointerEventHandler } from 'svelte/elements';
   import type { Without } from '../../utils/types.js';
-  import { getChartContext } from '../Chart.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
+  import {
+    getCanvasContext,
+    setCanvasContext,
+    type CanvasContextValue,
+    type ComponentRender,
+  } from '../../contexts/canvas.js';
 
   let {
     ref: refProp = $bindable(),
@@ -445,7 +398,7 @@
   });
 
   setCanvasContext(canvasContext);
-  setRenderContext('canvas');
+  setLayerContext('canvas');
 </script>
 
 <canvas

package/dist/components/{layout → layers}/Canvas.svelte.d.ts

@@ -75,45 +75,15 @@ export type CanvasPropsWithoutHTML = {
     ]>;
 };
 export type CanvasProps = CanvasPropsWithoutHTML & Without<HTMLCanvasAttributes, CanvasPropsWithoutHTML>;
-type ComponentRender<T extends Element = Element> = {
-    name: string;
-    render: (ctx: CanvasRenderingContext2D, styleOverrides?: ComputedStylesOptions) => any;
-    retainState?: boolean;
-    events?: {
-        click?: MouseEventHandler<T> | null;
-        dblclick?: MouseEventHandler<T> | null;
-        pointerenter?: PointerEventHandler<T> | null;
-        pointerover?: PointerEventHandler<T> | null;
-        pointermove?: PointerEventHandler<T> | null;
-        pointerleave?: PointerEventHandler<T> | null;
-        pointerout?: PointerEventHandler<T> | null;
-        pointerdown?: PointerEventHandler<T> | null;
-        touchmove?: TouchEventHandler<T> | null;
-    };
-    /**
-     * Optional dependencies to track and invalidate the canvas context when they change.
-     */
-    deps?: () => any[];
-};
-export type CanvasContextValue = {
-    /**
-     * Register component to render.
-     *
-     * Returns method to unregister on component destroy
-     */
-    register<T extends Element>(component: ComponentRender<T>): () => void;
-    invalidate(): void;
-};
-export declare function getCanvasContext(): CanvasContextValue;
 /**
  * Handles the automatic registration of the component to the canvas context,
  * with dependency tracking and cleanup on destroy.
  */
 export declare function registerCanvasComponent<T extends Element>(component: ComponentRender<T>): void;
 import { type Snippet } from 'svelte';
-import { type ComputedStylesOptions } from '../../utils/canvas.js';
-import type { HTMLCanvasAttributes, MouseEventHandler, PointerEventHandler, TouchEventHandler } from 'svelte/elements';
+import type { HTMLCanvasAttributes } from 'svelte/elements';
 import type { Without } from '../../utils/types.js';
+import { type ComponentRender } from '../../contexts/canvas.js';
 declare const Canvas: import("svelte").Component<CanvasProps, {}, "ref" | "canvasContext">;
 type Canvas = ReturnType<typeof Canvas>;
 export default Canvas;

package/dist/components/{layout → layers}/Html.svelte

@@ -38,6 +38,14 @@
      */
     ignoreTransform?: boolean;
 
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the layer.
+     *
+     * @default false
+     */
+    clip?: boolean;
+
     children?: Snippet<[{ ref: HTMLElement }]>;
   };
 
@@ -46,9 +54,10 @@
 </script>
 
 <script lang="ts">
-  import { getTransformContext } from '../TransformContext.svelte';
+  import { getTransformContext } from '../../contexts/transform.js';
 
-  import { getChartContext, setRenderContext } from '../Chart.svelte';
+  import { setLayerContext } from '../../contexts/layer.js';
+  import { getChartContext } from '../../contexts/chart.js';
 
   let {
     ref: refProp = $bindable(),
@@ -60,6 +69,7 @@
     'aria-describedby': describedBy,
     center = false,
     ignoreTransform = false,
+    clip = false,
     class: className,
     children,
     ...restProps
@@ -83,13 +93,14 @@
     }
   });
 
-  setRenderContext('html');
+  setLayerContext('html');
 </script>
 
 <div
   bind:this={ref}
   class={['lc-layout-html', className]}
   class:disablePointerEvents={pointerEvents === false}
+  class:clip
   style:transform
   style:transform-origin="top left"
   style:z-index={zIndex}
@@ -115,6 +126,10 @@
       &.disablePointerEvents {
         pointer-events: none;
       }
+
+      &.clip {
+        overflow: hidden;
+      }
     }
   }
 </style>

package/dist/components/{layout → layers}/Html.svelte.d.ts

@@ -30,6 +30,13 @@ type HTMLPropsWithoutHTML = {
      * Ignore TransformContext.  Useful to add static elements such as legends.
      */
     ignoreTransform?: boolean;
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the layer.
+     *
+     * @default false
+     */
+    clip?: boolean;
     children?: Snippet<[{
         ref: HTMLElement;
     }]>;

package/dist/components/layers/Layer.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>
+  import type { ComponentProps, Snippet } from 'svelte';
+
+  export type CanvasLayerProps = {
+    type: 'canvas';
+  } & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
+
+  export type HtmlLayerProps = {
+    type: 'html';
+  } & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
+
+  export type SvgLayerProps = {
+    type: 'svg';
+  } & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
+
+  export type DefaultLayerProps = {
+    type?: undefined;
+    children: Snippet;
+  };
+
+  export type LayerProps = (
+    | CanvasLayerProps
+    | HtmlLayerProps
+    | SvgLayerProps
+    | DefaultLayerProps
+  ) & {
+    onpointermove?: (e: PointerEvent) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Canvas, { type CanvasProps } from './Canvas.svelte';
+  import Svg, { type SVGProps } from './Svg.svelte';
+  import Html, { type HTMLProps } from './Html.svelte';
+  import Frame from '../Frame.svelte';
+  import { getSettings } from '../../contexts/settings.js';
+
+  let { type, children, ...restProps }: LayerProps = $props();
+
+  let settings = getSettings();
+  let layer = $derived(type ?? settings.layer);
+</script>
+
+{#if layer === 'canvas'}
+  <Canvas {...restProps as CanvasProps}>
+    {#snippet children(props)}
+      {#if settings.debug}
+        <Frame class="lc-debug-frame" />
+        <Frame class="lc-debug-frame" full />
+      {/if}
+
+      {@render children?.(props)}
+    {/snippet}
+  </Canvas>
+{:else if layer === 'svg'}
+  <Svg {...restProps as SVGProps}>
+    {#snippet children(props)}
+      {#if settings.debug}
+        <Frame class="lc-debug-frame" />
+        <Frame class="lc-debug-frame" full />
+      {/if}
+
+      {@render children?.(props)}
+    {/snippet}
+  </Svg>
+{:else if layer === 'html'}
+  <Html {...restProps as HTMLProps}>
+    {#snippet children(props)}
+      {#if settings.debug}
+        <Frame class="lc-debug-frame" />
+        <Frame class="lc-debug-frame" full />
+      {/if}
+
+      {@render children?.(props)}
+    {/snippet}
+  </Html>
+{/if}
+
+<style>
+  @layer component {
+    :global(:where(.lc-debug-frame)) {
+      --fill-color: color-mix(in oklab, var(--color-danger) 10%, transparent);
+    }
+  }
+</style>

package/dist/components/{layout → layers}/Layer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'svelte';
+import type { ComponentProps, Snippet } from 'svelte';
 export type CanvasLayerProps = {
     type: 'canvas';
 } & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
@@ -8,12 +8,16 @@ export type HtmlLayerProps = {
 export type SvgLayerProps = {
     type: 'svg';
 } & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
-export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps) & {
+export type DefaultLayerProps = {
+    type?: undefined;
+    children: Snippet;
+};
+export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps | DefaultLayerProps) & {
     onpointermove?: (e: PointerEvent) => void;
 };
 import Canvas from './Canvas.svelte';
-import Html from './Html.svelte';
 import Svg from './Svg.svelte';
+import Html from './Html.svelte';
 declare const Layer: import("svelte").Component<LayerProps, {}, "">;
 type Layer = ReturnType<typeof Layer>;
 export default Layer;