@tremolo-ui/svelte 0.7.0

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

@@ -0,0 +1,104 @@
+import type { InputEventOption, ModifierValue } from '@tremolo-ui/dom';
+import type { Scale } from '@tremolo-ui/functions';
+import type { Snippet } from 'svelte';
+export interface NumberInputProps {
+    /** The current value. Bind it (`bind:value`) or update it from `onChange`. */
+    value: number;
+    /** The lowest value. Leave it out for no lower end. */
+    min?: number;
+    /** The highest value. Leave it out for no upper end. */
+    max?: number;
+    /**
+     * Granularity of the value. The wheel, the arrow keys and the steppers
+     * snap it to multiples of `step`.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * How the value is distributed between `min` and `max`, for a
+     * `normalized` amount.
+     * @default linearScale
+     */
+    scale?: Scale;
+    /**
+     * The text shown for a value.
+     * @default String
+     */
+    format?: (value: number) => string;
+    /**
+     * Read a value back out of the text. Has to undo `format`. Text with no
+     * number in it reads as `NaN`, which leaves the value alone.
+     * @default parseNumberText
+     */
+    parse?: (text: string) => number;
+    /**
+     * Keep the value within `min` and `max` when it is committed or stepped.
+     * Typing is never clamped.
+     * @default true
+     */
+    clampValue?: boolean;
+    /**
+     * How much one notch of the wheel moves the value, while the focus is
+     * inside. `null` turns the wheel off.
+     * @default ['raw', 1]
+     */
+    wheel?: ModifierValue<InputEventOption> | null;
+    /**
+     * How much one arrow key press moves the value. `null` turns the arrow
+     * keys off.
+     * @default { default: ['raw', 1], shift: ['raw', 0.1] }
+     */
+    keyboard?: ModifierValue<InputEventOption> | null;
+    /**
+     * Pixels of vertical drag on `Stepper` that move the value by one `step`.
+     * `null` turns the drag off.
+     * @default 1
+     */
+    drag?: number | null;
+    /**
+     * How much a `Stepper` drag counts, per modifier key.
+     * @default { default: 1, shift: 0.1 }
+     */
+    dragSensitivity?: ModifierValue<number>;
+    /**
+     * Hide the cursor while dragging a `Stepper`.
+     * @default false
+     */
+    pointerLock?: boolean;
+    /**
+     * Select the text when `InputField` takes focus: all of it, only the
+     * number without its unit, or nothing.
+     * @default 'none'
+     */
+    selectOnFocus?: 'all' | 'number' | 'none';
+    /**
+     * Show the plain value while `InputField` has focus, dropping whatever
+     * `format` put around it.
+     * @default false
+     */
+    unformatOnFocus?: boolean;
+    /**
+     * Put the caret back at the same digit after an arrow key steps the value.
+     * @default false
+     */
+    keepCaretOnStep?: boolean;
+    /**
+     * Commit and leave the field on Enter.
+     * @default true
+     */
+    blurOnEnter?: boolean;
+    /** Make the input unchangeable and remove it from the tab order. */
+    disabled?: boolean;
+    /** Make the value unchangeable while leaving the field focusable. */
+    readonly?: boolean;
+    /**
+     * Called with the new value: as it is typed (unclamped), and when it is
+     * committed or stepped.
+     */
+    onChange?: (value: number) => void;
+    /** The root element, bound with `bind:ref`. */
+    ref?: HTMLDivElement | null;
+    /** The input renders exactly what you compose here. */
+    children: Snippet;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/NumberInput/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAElD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,gBAAgB;IAC/B,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wDAAwD;IACxD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACvC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,uDAAuD;IACvD,QAAQ,EAAE,OAAO,CAAA;CAClB"}

package/dist/components/NumberInput/types.js

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

package/dist/components/Piano/Root.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+  import {
+    blackKeyWidth,
+    createPianoInput,
+    fitWhiteKeyWidth,
+    getNoteRangeArray,
+    notePosition,
+    pianoWidth,
+    type PianoInputInstance,
+    type PianoLayout,
+  } from '@tremolo-ui/dom'
+  import { isWhiteKey, noteKey } from '@tremolo-ui/functions'
+  import { untrack } from 'svelte'
+
+  import type { KeyState, PianoProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = PianoProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof PianoProps>
+
+  let {
+    noteRange,
+    glissando = true,
+    midiMax = 127,
+    keyboardShortcuts,
+    keyboardShortcutsScope = 'root',
+    resizable = false,
+    whiteKeyWidth = 40,
+    keyGap = 1,
+    blackKeyWidthRatio = 0.65,
+    blackKeyHeightRatio = 0.6,
+    classes,
+    label,
+    keyProps,
+    onPlayNote,
+    onStopNote,
+    ref = $bindable(null),
+    style,
+    ...rest
+  }: Props = $props()
+
+  let activeNotes: number[] = $state([])
+  /** Set while `resizable` is on, measured from the parent. */
+  let resizedKeyWidth: number | null = $state(null)
+
+  const notes = $derived(getNoteRangeArray(noteRange))
+  const layout: PianoLayout = $derived({
+    noteRange,
+    whiteKeyWidth: resizable
+      ? (resizedKeyWidth ?? whiteKeyWidth)
+      : whiteKeyWidth,
+    keyGap,
+    blackKeyWidthRatio,
+    blackKeyHeightRatio,
+  })
+
+  let instance: PianoInputInstance | null = null
+
+  // Only the element decides how the instance is wired. Everything else is
+  // pushed with update() below, so that changing the layout mid-drag — the
+  // parent being resized under `resizable`, say — does not abort the drag.
+  $effect(() => {
+    if (!ref) return
+    const current = createPianoInput(
+      ref,
+      untrack(() => ({
+        layout,
+        glissando,
+        midiMax,
+        keyboardShortcuts,
+        keyboardShortcutsScope,
+        onPlayNote: (note, velocity) => onPlayNote?.(note, velocity),
+        onStopNote: (note) => onStopNote?.(note),
+        onActiveNotesChange: (next) => {
+          activeNotes = next
+        },
+      })),
+    )
+    instance = current
+    return () => {
+      instance = null
+      current.destroy()
+    }
+  })
+
+  $effect(() => {
+    instance?.update({
+      layout,
+      glissando,
+      midiMax,
+      keyboardShortcuts,
+      keyboardShortcutsScope,
+    })
+  })
+
+  $effect(() => {
+    if (!resizable || !ref) return
+    const node = ref
+    const parent = node.parentElement
+    if (!parent) throw new Error("doesn't have a parent element.")
+    const fit = {
+      noteRange: { first: noteRange.first, last: noteRange.last },
+      keyGap,
+      blackKeyWidthRatio,
+    }
+    const observer = new ResizeObserver(() => {
+      resizedKeyWidth = fitWhiteKeyWidth(node.clientWidth, fit)
+    })
+    observer.observe(parent)
+    return () => observer.disconnect()
+  })
+
+  /** Start a note, as a key would. */
+  export function playNote(note: number, velocity?: number) {
+    instance?.noteOn(note, { source: 'api', velocity })
+  }
+
+  /** Release a note started with `playNote`. */
+  export function stopNote(note: number) {
+    instance?.noteOff(note, { source: 'api' })
+  }
+
+  function keyState(note: number, index: number): KeyState {
+    return {
+      index,
+      keyType: isWhiteKey(note) ? 'white' : 'black',
+      active: activeNotes.includes(note),
+      disabled: note > midiMax,
+    }
+  }
+</script>
+
+<!-- The group can own keyboard shortcuts and must receive focus. The width
+  is computed from the layout rather than chosen, so it stays inline. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  bind:this={ref}
+  role="group"
+  tabindex="0"
+  data-resizable={resizable ? '' : undefined}
+  style="position: relative; width: {resizable
+    ? '100%'
+    : `${pianoWidth(layout)}px`}; {style ?? ''}"
+  {...rest}
+>
+  {#each notes as note, index (note)}
+    {@const state = keyState(note, index)}
+    {@const { style: keyStyle, ...attributes } = keyProps?.(note, state) ?? {}}
+    <!-- Placed and sized from the layout, which needs it out of flow; the
+      black keys sit over the white ones whichever order they are drawn in.
+      The geometry comes after the caller's style. -->
+    <div
+      data-note={note}
+      data-note-key={noteKey(note)}
+      data-active={state.active ? '' : undefined}
+      data-disabled={state.disabled ? '' : undefined}
+      {...attributes}
+      style="position: absolute; z-index: {state.keyType === 'white'
+        ? 1
+        : 2}; {keyStyle ?? ''}"
+      style:left="{notePosition(note, layout)}px"
+      style:width="{state.keyType === 'white'
+        ? layout.whiteKeyWidth
+        : blackKeyWidth(layout)}px"
+      style:height={state.keyType === 'white'
+        ? '100%'
+        : `${blackKeyHeightRatio * 100}%`}
+    >
+      {#if label}
+        <div class={classes?.keyLabelWrapper}>
+          <div class={classes?.keyLabel}>{@render label(note, state)}</div>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>

package/dist/components/Piano/Root.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { PianoProps } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = PianoProps & Omit<HTMLAttributes<HTMLDivElement>, keyof PianoProps>;
+declare const Root: import("svelte").Component<Props, {
+    playNote: (note: number, velocity?: number) => void;
+    stopNote: (note: number) => void;
+}, "ref">;
+type Root = ReturnType<typeof Root>;
+export default Root;
+//# sourceMappingURL=Root.svelte.d.ts.map

package/dist/components/Piano/Root.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Piano/Root.svelte.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAY,UAAU,EAAE,MAAM,YAAY,CAAA;AAEtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,UAAU,GACrB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,UAAU,CAAC,CAAC;AAsJ3D,QAAA,MAAM,IAAI;qBA9CiB,MAAM,aAAa,MAAM;qBAKzB,MAAM;SAyCiB,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as Root } from './Root.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Piano/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Piano/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/Piano/index.js

@@ -0,0 +1 @@
+export { default as Root } from './Root.svelte';

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

@@ -0,0 +1,90 @@
+import type { KeyboardShortcuts, KeyboardShortcutsScope, NoteRange } from '@tremolo-ui/dom';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** What a key is, when `label` or `keyProps` is asked about it. */
+export interface KeyState {
+    /** Position in the note range, counting from `noteRange.first`. */
+    index: number;
+    keyType: 'white' | 'black';
+    /** Whether the note is currently sounding. */
+    active: boolean;
+    /** Whether the note is above `midiMax` and cannot sound. */
+    disabled: boolean;
+}
+/** What `keyProps` may return for one key. */
+export type KeyAttributes = HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string | number | boolean | undefined>;
+export interface PianoProps {
+    /** Classes for the label inside each key. */
+    classes?: {
+        keyLabelWrapper?: string;
+        keyLabel?: string;
+    };
+    /** The notes drawn, from `first` to `last`. */
+    noteRange: NoteRange;
+    /**
+     * Let a pointer slide from one key to the next while it is down.
+     * @default true
+     */
+    glissando?: boolean;
+    /**
+     * Highest note that can sound. Keys above it carry `data-disabled`.
+     * @default 127
+     */
+    midiMax?: number;
+    /**
+     * Play notes from the computer keyboard: `keys[i]` plays
+     * `noteRange.first + i`. `SHORTCUTS` from `@tremolo-ui/dom` has
+     * ready-made layouts.
+     */
+    keyboardShortcuts?: KeyboardShortcuts;
+    /**
+     * Where keyboard shortcuts listen: while the piano has focus (`root`), or
+     * anywhere on the page except in editable elements (`window`).
+     * @default 'root'
+     */
+    keyboardShortcutsScope?: KeyboardShortcutsScope;
+    /**
+     * Follow the width of the parent element, deriving the width of a white
+     * key from it. `whiteKeyWidth` is ignored.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Width of a white key in pixels, not counting `keyGap`.
+     * @default 40
+     */
+    whiteKeyWidth?: number;
+    /**
+     * Space between two white keys, in pixels.
+     * @default 1
+     */
+    keyGap?: number;
+    /**
+     * Width of a black key, as a fraction of `whiteKeyWidth`.
+     * @default 0.65
+     */
+    blackKeyWidthRatio?: number;
+    /**
+     * Height of a black key, as a fraction of the height of the keyboard.
+     * @default 0.6
+     */
+    blackKeyHeightRatio?: number;
+    /**
+     * What to draw inside a key, as a snippet taking the note and its state.
+     * Draw nothing to leave the key bare.
+     */
+    label?: Snippet<[number, KeyState]>;
+    /**
+     * Extra attributes for one key, by note: a class, a style, a `data-*`
+     * attribute to select on. The geometry of the key is applied after the
+     * returned style and cannot be overridden.
+     */
+    keyProps?: (note: number, state: KeyState) => KeyAttributes;
+    /** Called when a note starts sounding. */
+    onPlayNote?: (note: number, velocity?: number) => void;
+    /** Called once everything holding a note has let go of it. */
+    onStopNote?: (note: number) => void;
+    /** The root element, bound with `bind:ref`. */
+    ref?: HTMLDivElement | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Piano/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Piano/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACtB,SAAS,EACV,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,mEAAmE;AACnE,MAAM,WAAW,QAAQ;IACvB,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,GAAG,OAAO,CAAA;IAC1B,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAA;IACf,4DAA4D;IAC5D,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,8CAA8C;AAC9C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GACxD,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;AAEjE,MAAM,WAAW,UAAU;IACzB,6CAA6C;IAC7C,OAAO,CAAC,EAAE;QAAE,eAAe,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACzD,+CAA+C;IAC/C,SAAS,EAAE,SAAS,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAA;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAA;IACnC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,KAAK,aAAa,CAAA;IAC3D,0CAA0C;IAC1C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,8DAA8D;IAC9D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;CAC5B"}

package/dist/components/Piano/types.js

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

package/dist/components/PointsEditor/Background.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = HTMLAttributes<HTMLDivElement> & { children?: Snippet }
+
+  let { children, style, ...rest }: Props = $props()
+</script>
+
+<!-- Behind the points, filling the editor. The order of the layers holds
+  whichever way they are written, so the z-index is part of the mechanics. -->
+<div style="position: absolute; inset: 0; z-index: 0; {style ?? ''}" {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/PointsEditor/Background.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const Background: import("svelte").Component<Props, {}, "">;
+type Background = ReturnType<typeof Background>;
+export default Background;
+//# sourceMappingURL=Background.svelte.d.ts.map

package/dist/components/PointsEditor/Background.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Background.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/Background.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAgBvE,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/PointsEditor/Container.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import {
+    createDragValue,
+    elementMapping,
+    POINT_AXIS,
+    wheelMove,
+  } from '@tremolo-ui/dom'
+
+  import { wheel as wheelAction } from '../../actions/wheel.js'
+  import { setPlacement } from '../_util/placement.js'
+
+  import { usePointsEditorContext } from './context.js'
+
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null
+    children?: Snippet
+  }
+
+  let { ref = $bindable(null), children, style, ...rest }: Props = $props()
+
+  const points = usePointsEditorContext()
+  setPlacement('PointsEditor.Container')
+
+  // The container is what the pointer position is normalized against.
+  $effect(() => {
+    points.setContainer(ref)
+    return () => points.setContainer(null)
+  })
+
+  // A drag on empty space draws a selection box. It is only attached while
+  // there is a selection to draw: `createDrag` puts `touch-action: none` on
+  // what it holds, and an editor that cannot select should not stop the page
+  // scrolling under a finger.
+  const selecting = $derived(points.selectable && !points.disabled)
+
+  $effect(() => {
+    const element = ref
+    if (!element || !selecting) return
+    const drag = createDragValue(element, {
+      axis: POINT_AXIS,
+      mapping: elementMapping(() => element),
+      // A press that landed on a point belongs to that point. Declining here
+      // rather than later matters: by then the container would already have
+      // taken the pointer capture away from the point.
+      shouldStart: (event) =>
+        !points.editor.isPointElement(event.target as Element | null),
+      onDragStart: ([x, y], state) =>
+        points.editor.beginSelectionBox({ x, y }, state.event),
+      onChange: ([x, y]) => points.editor.moveSelectionBox({ x, y }),
+      onDragEnd: () => points.editor.endSelectionBox(),
+    })
+    return () => drag.destroy()
+  })
+
+  // One listener for the whole editor rather than one per point: a wheel
+  // event only reaches what the cursor is over, and a point is a small target.
+  const wheelOptions = {
+    onWheel: (event: WheelEvent) => {
+      // Scrolling up moves the point towards y = 0; shift switches to x.
+      const move = wheelMove(event)
+      if (!move) return
+      const axis = move.axis === 0 ? 'x' : 'y'
+      if (points.editor.nudgeFocusedPoint(axis, move.direction, event)) {
+        event.preventDefault()
+      }
+    },
+  }
+</script>
+
+<!-- The points inside are placed against this box, over the background and
+  under the selection box. -->
+<div
+  bind:this={ref}
+  style="position: absolute; inset: 0; z-index: 10; {style ?? ''}"
+  use:wheelAction={wheelOptions}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/PointsEditor/Container.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    children?: Snippet;
+};
+declare const Container: import("svelte").Component<Props, {}, "ref">;
+type Container = ReturnType<typeof Container>;
+export default Container;
+//# sourceMappingURL=Container.svelte.d.ts.map

package/dist/components/PointsEditor/Container.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/Container.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAuEJ,QAAA,MAAM,SAAS,8CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}