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

package/dist/components/Rect/Rect.html.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+  export type {
+    RectProps,
+    RectPropsWithoutHTML,
+  } from './Rect.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cls } from '@layerstack/tailwind';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { RectState, rectMarkInfo, type RectProps } from './Rect.shared.svelte.js';
+
+  let {
+    children,
+    ...rest
+  }: RectProps = $props();
+
+  const c = new RectState(() => rest as RectProps);
+
+  const htmlRest = $derived(rest as unknown as HTMLAttributes<HTMLDivElement>);
+
+  c.chartCtx.registerComponent({
+    name: 'Rect',
+    kind: 'mark',
+    markInfo: () => rectMarkInfo(rest as RectProps, c.dataMode),
+  });
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedItems as item (item.key)}
+    {@const resolvedFill = resolveColorProp(rest.fill, item.d, c.chartCtx.cScale)}
+    {@const resolvedStroke = resolveColorProp(rest.stroke, item.d, c.chartCtx.cScale)}
+    {@const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d)}
+    {@const resolvedOpacity = resolveStyleProp(rest.opacity, item.d)}
+    {@const resolvedClass = resolveStyleProp(rest.class, item.d)}
+    {@const resolvedBorderWidth =
+      resolvedStrokeWidth != null
+        ? `${resolvedStrokeWidth}px`
+        : resolvedStroke != null
+          ? '1px'
+          : undefined}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      {...htmlRest}
+      style:position="absolute"
+      style:left="{item.x}px"
+      style:top="{item.y}px"
+      style:width="{item.width}px"
+      style:height="{item.height}px"
+      style:background={resolvedFill}
+      style:background-origin="border-box"
+      style:opacity={resolvedOpacity}
+      style:border-width={resolvedBorderWidth}
+      style:border-style={c.dashArrayResolved ? 'dashed' : 'solid'}
+      style:border-color={resolvedStroke}
+      style:border-radius="{c.rx}px"
+      class={cls('lc-rect', resolvedClass)}
+    ></div>
+  {/each}
+{:else}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    {...htmlRest}
+    style:position="absolute"
+    style:left="{c.motionX}px"
+    style:top="{c.motionY}px"
+    style:width="{c.motionWidth}px"
+    style:height="{c.motionHeight}px"
+    style:background={c.staticFill}
+    style:background-origin="border-box"
+    style:opacity={c.staticOpacity}
+    style:border-width={c.staticBorderWidth}
+    style:border-style={c.dashArrayResolved ? 'dashed' : 'solid'}
+    style:border-color={c.staticStroke}
+    style:border-radius={c.borderRadiusStyle ?? `${c.rx}px`}
+    class={cls('lc-rect', c.staticClassName)}
+  >
+    {@render children?.()}
+  </div>
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-rect)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-rect)) {
+      box-sizing: border-box;
+    }
+    :global(:where(.lc-layout-html .lc-rect):not([background])) {
+      background: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-rect):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/Rect/Rect.html.svelte.d.ts

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

package/dist/components/{Rect.svelte.d.ts → Rect/Rect.shared.svelte.d.ts}

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
-import type { CommonEvents, Without } from '../utils/types.js';
-import { type MotionProp } from '../utils/motion.svelte.js';
-import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
-import { type Corners, type Insets } from '../utils/rect.svelte.js';
+import type { CommonEvents, Without } from '../../utils/types.js';
+import type { DataProp, DataDrivenStyleProps } from '../../utils/dataProp.js';
+import { type Corners, type Insets } from '../../utils/rect.svelte.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { GeoState } from '../../states/geo.svelte.js';
 export type RectPropsWithoutHTML = {
     /**
      * The x position of the rectangle.
@@ -117,6 +119,55 @@ export type RectPropsWithoutHTML = {
     children?: Snippet;
 } & DataDrivenStyleProps;
 export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML> & CommonEvents;
-declare const Rect: import("svelte").Component<RectProps, {}, "ref">;
-type Rect = ReturnType<typeof Rect>;
-export default Rect;
+/** Build the standard `markInfo` payload used by every Rect variant. */
+export declare function rectMarkInfo(props: RectProps, dataMode: boolean): {
+    data?: undefined;
+    x?: undefined;
+    y?: undefined;
+    color?: undefined;
+} | {
+    data: any[] | undefined;
+    x: string | undefined;
+    y: string | undefined;
+    color: string | undefined;
+};
+/**
+ * Reactive state shared by every per-layer Rect variant.
+ */
+export declare class RectState {
+    #private;
+    chartCtx: ChartState;
+    geo: GeoState;
+    hasEdgeProps: boolean;
+    dataMode: boolean;
+    resolvedItems: {
+        d: any;
+        key: any;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }[];
+    dashArrayResolved: number[] | null;
+    dashArrayAttr: string | undefined;
+    cornersUniformValue: number | undefined;
+    cornersNonUniform: boolean;
+    rx: number;
+    ry: number;
+    get motionX(): any;
+    get motionY(): any;
+    get motionWidth(): any;
+    get motionHeight(): any;
+    resolvedCorners: import("../../utils/rect.svelte.js").CornerRadii | undefined;
+    borderRadiusStyle: string | undefined;
+    pixelPathData: string | undefined;
+    staticFill: string | undefined;
+    staticFillOpacity: number | undefined;
+    staticStroke: string | undefined;
+    staticStrokeOpacity: number | undefined;
+    staticStrokeWidth: number | undefined;
+    staticOpacity: number | undefined;
+    staticClassName: string | undefined;
+    staticBorderWidth: string | undefined;
+    constructor(getProps: () => RectProps);
+}

package/dist/components/Rect/Rect.shared.svelte.js

@@ -0,0 +1,206 @@
+import { untrack } from 'svelte';
+import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair, } from '../../utils/dataProp.js';
+import { chartDataArray } from '../../utils/common.js';
+import { resolveCorners, cornersUniform, resolveInsets, } from '../../utils/rect.svelte.js';
+import { roundedRectPath, parseDashArray } from '../../utils/path.js';
+import { createMotion, createDataMotionMap, parseMotionProp, } from '../../utils/motion.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { getGeoContext } from '../../contexts/geo.js';
+const defaultKey = (_, i) => i;
+/** Build the standard `markInfo` payload used by every Rect variant. */
+export function rectMarkInfo(props, dataMode) {
+    if (!dataMode)
+        return {};
+    return {
+        data: props.data,
+        x: typeof props.x === 'string' ? props.x : undefined,
+        y: typeof props.y === 'string' ? props.y : undefined,
+        color: typeof props.fill === 'string'
+            ? props.fill
+            : typeof props.stroke === 'string'
+                ? props.stroke
+                : undefined,
+    };
+}
+/**
+ * Reactive state shared by every per-layer Rect variant.
+ */
+export class RectState {
+    #getProps = () => ({});
+    // Contexts
+    chartCtx = getChartContext();
+    geo = getGeoContext();
+    // Data mode detection
+    hasEdgeProps = $derived(hasAnyDataProp(this.#getProps().x0, this.#getProps().y0, this.#getProps().x1, this.#getProps().y1));
+    dataMode = $derived(hasAnyDataProp(this.#getProps().x, this.#getProps().y) || this.hasEdgeProps);
+    // Data resolution
+    #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
+    resolvedItems = $derived.by(() => {
+        if (!this.dataMode)
+            return [];
+        const props = this.#getProps();
+        const keyFn = props.key ?? defaultKey;
+        return this.#resolvedData.map((d, i) => {
+            const key = keyFn(d, i);
+            const resolved = this.#resolveRect(d);
+            const animated = this.#dataMotionMap?.get(key);
+            return {
+                d,
+                key,
+                x: animated?.x ?? resolved.x,
+                y: animated?.y ?? resolved.y,
+                width: animated?.width ?? resolved.width,
+                height: animated?.height ?? resolved.height,
+            };
+        });
+    });
+    #resolveRect(d) {
+        const props = this.#getProps();
+        const resolvedInsets = resolveInsets(props.insets);
+        if (this.hasEdgeProps) {
+            let rx0, rx1p, ry0, ry1p;
+            if (this.geo.projection) {
+                [rx0, ry0] = resolveGeoDataPair(props.x0, props.y0, d, this.geo.projection);
+                [rx1p, ry1p] = resolveGeoDataPair(props.x1, props.y1, d, this.geo.projection);
+            }
+            else {
+                rx0 = resolveDataProp(props.x0, d, this.chartCtx.xScale, 0);
+                rx1p = resolveDataProp(props.x1, d, this.chartCtx.xScale, 0);
+                ry0 = resolveDataProp(props.y0, d, this.chartCtx.yScale, 0);
+                ry1p = resolveDataProp(props.y1, d, this.chartCtx.yScale, 0);
+            }
+            const left = Math.min(rx0, rx1p) + resolvedInsets.left;
+            const right = Math.max(rx0, rx1p) - resolvedInsets.right;
+            const top = Math.min(ry0, ry1p) + resolvedInsets.top;
+            const bottom = Math.max(ry0, ry1p) - resolvedInsets.bottom;
+            return {
+                x: left,
+                y: top,
+                width: Math.max(0, right - left),
+                height: Math.max(0, bottom - top),
+            };
+        }
+        else {
+            let resolvedX, resolvedY;
+            if (this.geo.projection) {
+                [resolvedX, resolvedY] = resolveGeoDataPair(props.x, props.y, d, this.geo.projection);
+            }
+            else {
+                resolvedX = resolveDataProp(props.x, d, this.chartCtx.xScale, 0);
+                resolvedY = resolveDataProp(props.y, d, this.chartCtx.yScale, 0);
+            }
+            return {
+                x: resolvedX + resolvedInsets.left,
+                y: resolvedY + resolvedInsets.top,
+                width: Math.max(0, (props.width ?? 0) - resolvedInsets.left - resolvedInsets.right),
+                height: Math.max(0, (props.height ?? 0) - resolvedInsets.top - resolvedInsets.bottom),
+            };
+        }
+    }
+    // Dash array
+    dashArrayResolved = $derived(parseDashArray(this.#getProps().dashArray));
+    dashArrayAttr = $derived(this.dashArrayResolved ? this.dashArrayResolved.join(' ') : undefined);
+    // Corners
+    cornersUniformValue = $derived.by(() => {
+        const corners = this.#getProps().corners;
+        if (corners === undefined)
+            return undefined;
+        if (typeof corners === 'number')
+            return corners;
+        const resolved = resolveCorners(corners, Infinity, Infinity);
+        return cornersUniform(resolved) ? resolved[0] : undefined;
+    });
+    cornersNonUniform = $derived(this.#getProps().corners !== undefined && this.cornersUniformValue === undefined);
+    // Normalize rx/ry: if only one provided, use for both (SVG behavior)
+    rx = $derived(Number(this.#getProps().rx ?? this.#getProps().ry ?? this.cornersUniformValue) || 0);
+    ry = $derived(Number(this.#getProps().ry ?? this.#getProps().rx ?? this.cornersUniformValue) || 0);
+    // Pixel-mode motion sources
+    #dataMotionMap = null;
+    #motionX;
+    #motionY;
+    #motionWidth;
+    #motionHeight;
+    get motionX() {
+        return this.#motionX.current;
+    }
+    get motionY() {
+        return this.#motionY.current;
+    }
+    get motionWidth() {
+        return this.#motionWidth.current;
+    }
+    get motionHeight() {
+        return this.#motionHeight.current;
+    }
+    // Resolved per-corner radii (clamped to current bounds)
+    resolvedCorners = $derived.by(() => {
+        const corners = this.#getProps().corners;
+        if (corners === undefined)
+            return undefined;
+        return resolveCorners(corners, this.motionWidth, this.motionHeight);
+    });
+    borderRadiusStyle = $derived(this.resolvedCorners ? this.resolvedCorners.map((c) => `${c}px`).join(' ') : undefined);
+    pixelPathData = $derived.by(() => {
+        if (this.resolvedCorners && this.cornersNonUniform) {
+            return roundedRectPath(this.motionX, this.motionY, this.motionWidth, this.motionHeight, this.resolvedCorners);
+        }
+        return undefined;
+    });
+    // Static (non-data-driven) values for SVG/HTML pixel mode
+    staticFill = $derived(typeof this.#getProps().fill === 'string' ? this.#getProps().fill : undefined);
+    staticFillOpacity = $derived(typeof this.#getProps().fillOpacity === 'number'
+        ? this.#getProps().fillOpacity
+        : undefined);
+    staticStroke = $derived(typeof this.#getProps().stroke === 'string' ? this.#getProps().stroke : undefined);
+    staticStrokeOpacity = $derived(typeof this.#getProps().strokeOpacity === 'number'
+        ? this.#getProps().strokeOpacity
+        : undefined);
+    staticStrokeWidth = $derived(typeof this.#getProps().strokeWidth === 'number'
+        ? this.#getProps().strokeWidth
+        : undefined);
+    staticOpacity = $derived(typeof this.#getProps().opacity === 'number'
+        ? this.#getProps().opacity
+        : undefined);
+    staticClassName = $derived(typeof this.#getProps().class === 'string' ? this.#getProps().class : undefined);
+    // Match SVG's implicit `stroke-width: 1` default
+    staticBorderWidth = $derived.by(() => {
+        const props = this.#getProps();
+        if (typeof props.strokeWidth === 'number')
+            return `${props.strokeWidth}px`;
+        if (typeof props.stroke === 'string')
+            return '1px';
+        return undefined;
+    });
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        const initialX = initial.initialX ?? (typeof initial.x === 'number' ? initial.x : 0);
+        const initialY = initial.initialY ?? (typeof initial.y === 'number' ? initial.y : 0);
+        const initialWidth = initial.initialWidth ?? initial.width ?? 0;
+        const initialHeight = initial.initialHeight ?? initial.height ?? 0;
+        const motion = initial.motion;
+        this.#motionX = createMotion(initialX, () => (typeof getProps().x === 'number' ? getProps().x : 0), motion === undefined ? undefined : parseMotionProp(motion, 'x'));
+        this.#motionY = createMotion(initialY, () => (typeof getProps().y === 'number' ? getProps().y : 0), motion === undefined ? undefined : parseMotionProp(motion, 'y'));
+        this.#motionWidth = createMotion(initialWidth, () => getProps().width ?? 0, motion === undefined ? undefined : parseMotionProp(motion, 'width'));
+        this.#motionHeight = createMotion(initialHeight, () => getProps().height ?? 0, motion === undefined ? undefined : parseMotionProp(motion, 'height'));
+        this.#dataMotionMap = createDataMotionMap(motion);
+        if (this.#dataMotionMap) {
+            const motionMap = this.#dataMotionMap;
+            $effect(() => {
+                if (!this.dataMode)
+                    return;
+                const props = getProps();
+                const keyFn = props.key ?? defaultKey;
+                const activeKeys = new Set();
+                for (let i = 0; i < this.#resolvedData.length; i++) {
+                    const d = this.#resolvedData[i];
+                    const key = keyFn(d, i);
+                    activeKeys.add(key);
+                    const resolved = this.#resolveRect(d);
+                    untrack(() => motionMap.update(key, resolved));
+                }
+                untrack(() => motionMap.cleanup(activeKeys));
+            });
+        }
+    }
+}

package/dist/components/Rect/Rect.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  // Re-export so existing `import type { RectProps } from '../../index.js'` keeps working.
+  export type {
+    RectProps,
+    RectPropsWithoutHTML,
+  } from './Rect.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import RectSvg from './Rect.svg.svelte';
+  import RectCanvas from './Rect.canvas.svelte';
+  import RectHtml from './Rect.html.svelte';
+  import type { RectProps } from './Rect.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let { ref = $bindable(), ...rest }: RectProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <RectSvg bind:ref {...rest} />
+{:else if layerCtx === 'canvas'}
+  <RectCanvas {...rest} />
+{:else if layerCtx === 'html'}
+  <RectHtml {...rest} />
+{/if}

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

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

package/dist/components/Rect/Rect.svelte.test.d.ts

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

package/dist/components/{Rect.svelte.test.js → Rect/Rect.svelte.test.js}

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
-import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import TestHarness, { componentTestId } from '../tests/TestHarness.svelte';
 import Rect from './Rect.svelte';
 describe('Rect', () => {
     describe('pixel mode', () => {

package/dist/components/Rect/Rect.svg.svelte

@@ -0,0 +1,136 @@
+<script lang="ts" module>
+  export type {
+    RectProps,
+    RectPropsWithoutHTML,
+  } from './Rect.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
+  import { cls } from '@layerstack/tailwind';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { RectState, rectMarkInfo, type RectProps } from './Rect.shared.svelte.js';
+
+  let {
+    ref: refProp = $bindable(),
+    // Pull out props that collide with `<rect>` SVG attribute names so
+    // `{...rest}` spread doesn't override our explicit values.
+    x,
+    y,
+    width,
+    height,
+    rx: rxProp,
+    ry: ryProp,
+    children,
+    ...rest
+  }: RectProps = $props();
+
+  const c = new RectState(
+    () =>
+      ({
+        x,
+        y,
+        width,
+        height,
+        rx: rxProp,
+        ry: ryProp,
+        ...rest,
+      }) as RectProps
+  );
+
+  let ref = $state<SVGRectElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  c.chartCtx.registerComponent({
+    name: 'Rect',
+    kind: 'mark',
+    markInfo: () =>
+      rectMarkInfo(
+        { x, y, width, height, rx: rxProp, ry: ryProp, ...rest } as RectProps,
+        c.dataMode
+      ),
+  });
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedItems as item (item.key)}
+    {@const resolvedFill = resolveColorProp(rest.fill, item.d, c.chartCtx.cScale)}
+    {@const resolvedStroke = resolveColorProp(rest.stroke, item.d, c.chartCtx.cScale)}
+    {@const resolvedFillOpacity = resolveStyleProp(rest.fillOpacity, item.d)}
+    {@const resolvedStrokeOpacity = resolveStyleProp(rest.strokeOpacity, item.d)}
+    {@const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d)}
+    {@const resolvedOpacity = resolveStyleProp(rest.opacity, item.d)}
+    {@const resolvedClass = resolveStyleProp(rest.class, item.d)}
+    <rect
+      {...rest as any}
+      x={item.x}
+      y={item.y}
+      width={item.width}
+      height={item.height}
+      fill={resolvedFill}
+      fill-opacity={resolvedFillOpacity}
+      stroke={resolvedStroke}
+      stroke-opacity={resolvedStrokeOpacity}
+      stroke-width={resolvedStrokeWidth}
+      opacity={resolvedOpacity}
+      rx={c.rx}
+      ry={c.ry}
+      stroke-dasharray={c.dashArrayAttr}
+      class={cls('lc-rect', resolvedClass)}
+    />
+  {/each}
+{:else if c.pixelPathData}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <path
+    {...rest as unknown as SVGAttributes<SVGPathElement>}
+    d={c.pixelPathData}
+    fill={c.staticFill}
+    fill-opacity={c.staticFillOpacity}
+    stroke={c.staticStroke}
+    stroke-opacity={c.staticStrokeOpacity}
+    stroke-width={c.staticStrokeWidth}
+    opacity={c.staticOpacity}
+    stroke-dasharray={c.dashArrayAttr}
+    class={cls('lc-rect', c.staticClassName)}
+  />
+{:else}
+  <rect
+    {...rest as any}
+    x={c.motionX}
+    y={c.motionY}
+    width={c.motionWidth}
+    height={c.motionHeight}
+    fill={c.staticFill}
+    fill-opacity={c.staticFillOpacity}
+    stroke={c.staticStroke}
+    stroke-opacity={c.staticStrokeOpacity}
+    stroke-width={c.staticStrokeWidth}
+    opacity={c.staticOpacity}
+    rx={c.rx}
+    ry={c.ry}
+    stroke-dasharray={c.dashArrayAttr}
+    class={cls('lc-rect', c.staticClassName)}
+    bind:this={ref}
+  />
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-rect)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-rect, svg.lc-rect):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-rect, svg.lc-rect):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/Rect/Rect.svg.svelte.d.ts

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

package/dist/components/RectClipPath/RectClipPath.base.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { RectClipPathProps } from './RectClipPath.shared.svelte.js';
+
+  export type RectClipPathBaseLayerComponents = {
+    ClipPath: Component<any>;
+  };
+
+  export type RectClipPathBaseProps = RectClipPathProps & RectClipPathBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import { createMotion, parseMotionProp } from '../../utils/motion.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    ClipPath,
+    id = createId('clipPath-', uid),
+    x = 0,
+    y = 0,
+    initialX,
+    initialY,
+    width,
+    height,
+    initialWidth,
+    initialHeight,
+    disabled = false,
+    invert = false,
+    motion,
+    children: childrenProp,
+  }: RectClipPathBaseProps = $props();
+
+  // When `motion` is undefined `createMotion` returns a passthrough that just
+  // reads the getter, so we can call it unconditionally and let the fast path
+  // handle the no-motion case.
+  const motionX = createMotion(initialX ?? x, () => x, motion && parseMotionProp(motion, 'x'));
+  const motionY = createMotion(initialY ?? y, () => y, motion && parseMotionProp(motion, 'y'));
+  const motionWidth = createMotion(
+    initialWidth ?? width,
+    () => width,
+    motion && parseMotionProp(motion, 'width')
+  );
+  const motionHeight = createMotion(
+    initialHeight ?? height,
+    () => height,
+    motion && parseMotionProp(motion, 'height')
+  );
+
+  const path = $derived(
+    `M${motionX.current},${motionY.current} h${motionWidth.current} v${motionHeight.current} h${-motionWidth.current} Z`
+  );
+</script>
+
+<ClipPath {id} {disabled} {invert} {path}>
+  {#snippet children({ url }: { url: string })}
+    {@render childrenProp?.({ id, url })}
+  {/snippet}
+</ClipPath>

package/dist/components/RectClipPath/RectClipPath.base.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { RectClipPathProps } from './RectClipPath.shared.svelte.js';
+export type RectClipPathBaseLayerComponents = {
+    ClipPath: Component<any>;
+};
+export type RectClipPathBaseProps = RectClipPathProps & RectClipPathBaseLayerComponents;
+declare const RectClipPath: Component<RectClipPathBaseProps, {}, "">;
+type RectClipPath = ReturnType<typeof RectClipPath>;
+export default RectClipPath;

package/dist/components/RectClipPath/RectClipPath.canvas.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { RectClipPathProps, RectClipPathPropsWithoutHTML } from './RectClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RectClipPathBase from './RectClipPath.base.svelte';
+  import ClipPath from '../ClipPath/ClipPath.canvas.svelte';
+
+  import type { RectClipPathProps } from './RectClipPath.shared.svelte.js';
+
+  let props: RectClipPathProps = $props();
+</script>
+
+<RectClipPathBase {ClipPath} {...props} />

package/dist/components/RectClipPath/RectClipPath.canvas.svelte.d.ts

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