@tremolo-ui/svelte 0.7.0

package/dist/components/PointsEditor/Point.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+  import {
+    arrowKeyMove,
+    clampPoint,
+    createDragValue,
+    elementMapping,
+    POINT_AXIS,
+    selectModifier,
+    type PointPosition,
+    type PointsEditorPoint,
+  } from '@tremolo-ui/dom'
+  import { untrack } from 'svelte'
+
+  import { checkPlacement } from '../_util/placement.js'
+  import VisuallyHiddenRangeInput from '../_util/VisuallyHiddenRangeInput.svelte'
+
+  import { usePointsEditorContext } from './context.js'
+  import type { PointsEditorPointProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = PointsEditorPointProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof PointsEditorPointProps>
+
+  let {
+    value,
+    id: idProp,
+    min,
+    max,
+    color,
+    disabled: disabledProp,
+    readonly: readonlyProp,
+    wheel: wheelProp,
+    keyboard: keyboardProp,
+    'aria-label': ariaLabel,
+    'aria-valuetext': ariaValuetext,
+    onChange,
+    onDragStart,
+    onDragEnd,
+    children,
+    style,
+    onfocus,
+    onkeydown,
+    ...rest
+  }: Props = $props()
+
+  const points = usePointsEditorContext()
+  checkPlacement('PointsEditor.Point', 'PointsEditor.Container')
+
+  const generatedId = $props.id()
+  const id = $derived(idProp ?? generatedId)
+  const disabled = $derived(disabledProp ?? points.disabled)
+  const readonly = $derived(readonlyProp ?? points.readonly)
+  const inactive = $derived(disabled || readonly)
+  // `null` means "no event" and has to survive the fallback, so `??` is not
+  // enough: only an omitted prop inherits from the root.
+  const wheel = $derived(wheelProp === undefined ? points.wheel : wheelProp)
+  const keyboard = $derived(
+    keyboardProp === undefined ? points.keyboard : keyboardProp,
+  )
+  const selected = $derived(points.selection.includes(id))
+  const current = $derived(clampPoint(value, min, max))
+
+  let element: HTMLDivElement | null = $state(null)
+  let xInput: HTMLInputElement | null = $state(null)
+  let dragging = $state(false)
+
+  // Read by the editor whenever it moves the selection, so the value can
+  // change on every frame of a drag without registering again.
+  const read = (): PointsEditorPoint => ({
+    value,
+    min,
+    max,
+    readonly: inactive,
+    onChange,
+    element,
+    wheel,
+  })
+
+  $effect(() => points.editor.registerPoint(id, read))
+
+  /** Where the pointer was when the drag started, to measure the move from. */
+  let origin: PointPosition | null = null
+
+  $effect(() => {
+    const node = element
+    if (!node) return
+    // The value is the position itself: no scaling, and no rounding to a step.
+    const drag = createDragValue(node, {
+      axis: POINT_AXIS,
+      mapping: elementMapping(() => points.container, {
+        sensitivity: (state) =>
+          selectModifier(points.dragSensitivity, state.event).value,
+      }),
+      cursor: untrack(() => (inactive ? undefined : points.cursor)),
+      shouldStart: () => !disabled,
+      // The value is a move rather than a position: the point keeps the
+      // offset it was grabbed at, and everything else selected moves with it.
+      onChange: ([x, y]) => {
+        if (origin)
+          points.editor.movePointDrag({ x: x - origin.x, y: y - origin.y })
+      },
+      onDragStart: ([x, y], state) => {
+        points.editor.beginPointDrag(id, state.event)
+        origin = { x, y }
+        dragging = true
+        xInput?.focus()
+        if (!inactive) onDragStart?.(clampPoint(value, min, max))
+      },
+      onDragEnd: () => {
+        origin = null
+        dragging = false
+        if (!inactive) onDragEnd?.(clampPoint(value, min, max))
+      },
+    })
+    $effect(() => {
+      drag.update({ cursor: inactive ? undefined : points.cursor })
+    })
+    return () => drag.destroy()
+  })
+
+  function perAxis(
+    setting: string | Partial<Record<'x' | 'y', string>> | undefined,
+    axis: 'x' | 'y',
+  ) {
+    return typeof setting === 'string' ? setting : setting?.[axis]
+  }
+
+  function onInput(axis: 'x' | 'y', target: HTMLInputElement) {
+    if (readonly) {
+      target.value = String(current[axis])
+      return
+    }
+    const delta = target.valueAsNumber - value[axis]
+    points.editor.nudgeSelection(id, {
+      x: axis === 'x' ? delta : 0,
+      y: axis === 'y' ? delta : 0,
+    })
+  }
+</script>
+
+<!-- The visual point has two values, so its semantics live on the two range
+  inputs nested inside it rather than on this drag handle. A press lands on
+  the point, which cannot hold focus, and the browser answers that by
+  clearing the focus — tabindex -1 keeps it inside. -->
+<div
+  bind:this={element}
+  tabindex="-1"
+  role="presentation"
+  data-disabled={disabled ? '' : undefined}
+  data-readonly={readonly ? '' : undefined}
+  data-dragging={dragging ? '' : undefined}
+  data-selected={selected ? '' : undefined}
+  {...rest}
+  style="position: absolute; translate: var(--translate, -50% -50%); {style ??
+    ''}"
+  style:--color={color}
+  style:left="{value.x * 100}%"
+  style:top="{value.y * 100}%"
+  onfocus={(event) => {
+    // The point itself is not the control: whatever reaches it is handed to
+    // the first input.
+    if (!disabled && event.target === event.currentTarget) xInput?.focus()
+    onfocus?.(event)
+  }}
+  onkeydown={(event) => {
+    // The key picks the axis, whichever of the two inputs holds the focus.
+    // y grows downwards, so ArrowUp moves the point towards 0.
+    const move = arrowKeyMove(event.key)
+    if (move) {
+      event.preventDefault()
+      if (onChange && !inactive && keyboard) {
+        points.editor.nudgePoint(
+          id,
+          move.axis === 0 ? 'x' : 'y',
+          move.direction,
+          keyboard,
+          event,
+        )
+      }
+    }
+    onkeydown?.(event)
+  }}
+>
+  <VisuallyHiddenRangeInput
+    bind:ref={xInput}
+    data-axis="x"
+    value={current.x}
+    min={min?.x ?? 0}
+    max={max?.x ?? 1}
+    step="any"
+    {disabled}
+    aria-readonly={readonly}
+    aria-orientation="horizontal"
+    aria-label={perAxis(ariaLabel, 'x') ?? 'x'}
+    aria-valuetext={perAxis(ariaValuetext, 'x')}
+    oninput={(event) => onInput('x', event.currentTarget)}
+  />
+  <VisuallyHiddenRangeInput
+    data-axis="y"
+    value={current.y}
+    min={min?.y ?? 0}
+    max={max?.y ?? 1}
+    step="any"
+    {disabled}
+    aria-readonly={readonly}
+    aria-orientation="vertical"
+    aria-label={perAxis(ariaLabel, 'y') ?? 'y'}
+    aria-valuetext={perAxis(ariaValuetext, 'y')}
+    oninput={(event) => onInput('y', event.currentTarget)}
+  />
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,7 @@
+import type { PointsEditorPointProps } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = PointsEditorPointProps & Omit<HTMLAttributes<HTMLDivElement>, keyof PointsEditorPointProps>;
+declare const Point: import("svelte").Component<Props, {}, "">;
+type Point = ReturnType<typeof Point>;
+export default Point;
+//# sourceMappingURL=Point.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Point.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/Point.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,sBAAsB,GACjC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC,CAAC;AAmKvE,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/PointsEditor/Root.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import {
+    createPointsEditor,
+    DEFAULT_DRAG_SENSITIVITY,
+    POINTS_EDITOR_DEFAULT_KEYBOARD,
+    POINTS_EDITOR_DEFAULT_WHEEL,
+    type SelectionBoxRect,
+  } from '@tremolo-ui/dom'
+
+  import { setPointsEditorContext } from './context.js'
+  import type { PointsEditorProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = PointsEditorProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof PointsEditorProps>
+
+  let {
+    disabled = false,
+    readonly = false,
+    externalStyles,
+    wheel = POINTS_EDITOR_DEFAULT_WHEEL,
+    keyboard = POINTS_EDITOR_DEFAULT_KEYBOARD,
+    dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
+    selectable = false,
+    selection = $bindable([]),
+    onSelectionChange,
+    ref = $bindable(null),
+    children,
+    style,
+    ...rest
+  }: Props = $props()
+
+  let selectionBox: SelectionBoxRect | null = $state(null)
+  let container: HTMLElement | null = $state(null)
+
+  // Nothing is selected while selection is off, so a drag picks up only the
+  // point it started on and `data-selected` never turns on.
+  const current = $derived(selectable ? selection : [])
+
+  // The selection lives here, where Svelte state can hold it; which points a
+  // press or a box selects, and how a selection moves, is the core's.
+  const editor = createPointsEditor({
+    onSelectionBoxChange: (rect) => {
+      selectionBox = rect
+    },
+    onSelectionChange: (next) => {
+      selection = next
+      onSelectionChange?.(next)
+    },
+  })
+
+  // Pushed before the DOM updates, so that the next press already sees it.
+  $effect.pre(() => {
+    editor.update({ selectable, selection: current })
+  })
+
+  $effect(() => () => editor.destroy())
+
+  setPointsEditorContext({
+    get disabled() {
+      return disabled
+    },
+    get readonly() {
+      return readonly
+    },
+    get wheel() {
+      return wheel
+    },
+    get keyboard() {
+      return keyboard
+    },
+    get dragSensitivity() {
+      return dragSensitivity
+    },
+    get cursor() {
+      return externalStyles?.cursor ?? 'grabbing'
+    },
+    get selectable() {
+      return selectable
+    },
+    get selection() {
+      return current
+    },
+    get selectionBox() {
+      return selectionBox
+    },
+    get container() {
+      return container
+    },
+    editor,
+    setContainer: (element) => {
+      container = element
+    },
+  })
+</script>
+
+<!-- The layers inside are placed against this box. -->
+<div
+  bind:this={ref}
+  data-disabled={disabled ? '' : undefined}
+  data-readonly={readonly ? '' : undefined}
+  style="position: relative; {style ?? ''}"
+  {...rest}
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,7 @@
+import type { PointsEditorProps } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = PointsEditorProps & Omit<HTMLAttributes<HTMLDivElement>, keyof PointsEditorProps>;
+declare const Root: import("svelte").Component<Props, {}, "ref" | "selection">;
+type Root = ReturnType<typeof Root>;
+export default Root;
+//# sourceMappingURL=Root.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/Root.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,iBAAiB,GAC5B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC,CAAC;AAiGlE,QAAA,MAAM,IAAI,4DAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/PointsEditor/SelectionBox.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { checkPlacement } from '../_util/placement.js'
+
+  import { usePointsEditorContext } from './context.js'
+
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = HTMLAttributes<HTMLDivElement> & { children?: Snippet }
+
+  let { children, style, ...rest }: Props = $props()
+
+  const points = usePointsEditorContext()
+  checkPlacement('PointsEditor.SelectionBox', 'PointsEditor.Container')
+</script>
+
+<!-- Drawn over the points while a drag runs, and taking none of the pointer:
+  the drag underneath is what it is reporting on. Nothing is rendered while no
+  drag is running. -->
+{#if points.selectionBox}
+  {@const box = points.selectionBox}
+  <div
+    {...rest}
+    style="position: absolute; z-index: 20; pointer-events: none; {style ?? ''}"
+    style:left="{box.x * 100}%"
+    style:top="{box.y * 100}%"
+    style:width="{box.width * 100}%"
+    style:height="{box.height * 100}%"
+  >
+    {@render children?.()}
+  </div>
+{/if}

package/dist/components/PointsEditor/SelectionBox.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 SelectionBox: import("svelte").Component<Props, {}, "">;
+type SelectionBox = ReturnType<typeof SelectionBox>;
+export default SelectionBox;
+//# sourceMappingURL=SelectionBox.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionBox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/SelectionBox.svelte.ts"],"names":[],"mappings":"AAOA,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;AA0BvE,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/PointsEditor/context.d.ts

@@ -0,0 +1,28 @@
+import type { InputEventOption, ModifierValue, PointsEditorInstance, SelectionBoxRect } from '@tremolo-ui/dom';
+/** What `PointsEditor.Root` shares with its parts. Every field is a getter. */
+export interface PointsEditorContextValue {
+    readonly disabled: boolean;
+    readonly readonly: boolean;
+    readonly wheel: ModifierValue<InputEventOption> | null;
+    readonly keyboard: ModifierValue<InputEventOption> | null;
+    readonly dragSensitivity: ModifierValue<number>;
+    readonly cursor: string;
+    readonly selectable: boolean;
+    /** Ids of the selected points. Always empty while `selectable` is off. */
+    readonly selection: readonly string[];
+    /** The selection box, while one is being dragged. */
+    readonly selectionBox: SelectionBoxRect | null;
+    /** The element points are placed in and measured against. */
+    readonly container: HTMLElement | null;
+    /**
+     * The selection and the moves, from `createPointsEditor` in
+     * `@tremolo-ui/dom`: every `Point` registers with it.
+     */
+    readonly editor: PointsEditorInstance;
+    /** @internal `Container` registers its element. */
+    setContainer: (element: HTMLElement | null) => void;
+}
+/** The context of the enclosing `PointsEditor.Root`, for a part of your own. */
+export declare const usePointsEditorContext: () => PointsEditorContextValue;
+export declare const setPointsEditorContext: (context: PointsEditorContextValue) => PointsEditorContextValue;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/PointsEditor/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EACjB,MAAM,iBAAiB,CAAA;AAExB,+EAA+E;AAC/E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACtD,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACzD,QAAQ,CAAC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC/C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,0EAA0E;IAC1E,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IACrC,qDAAqD;IACrD,QAAQ,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC9C,6DAA6D;IAC7D,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,oBAAoB,CAAA;IACrC,mDAAmD;IACnD,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CACpD;AAID,gFAAgF;AAChF,eAAO,MAAM,sBAAsB,gCAAM,CAAA;AACzC,eAAO,MAAM,sBAAsB,iEAAM,CAAA"}

package/dist/components/PointsEditor/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'svelte';
+const [get, set] = createContext();
+/** The context of the enclosing `PointsEditor.Root`, for a part of your own. */
+export const usePointsEditorContext = get;
+export const setPointsEditorContext = set;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/components/PointsEditor/index.js

@@ -0,0 +1,5 @@
+export { default as Background } from './Background.svelte';
+export { default as Container } from './Container.svelte';
+export { default as Point } from './Point.svelte';
+export { default as Root } from './Root.svelte';
+export { default as SelectionBox } from './SelectionBox.svelte';

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

@@ -0,0 +1,84 @@
+import type { InputEventOption, ModifierValue, PointPosition } from '@tremolo-ui/dom';
+import type { Snippet } from 'svelte';
+export interface PointsEditorProps {
+    /** Make the points unchangeable and remove them from the tab order. */
+    disabled?: boolean;
+    /** Make the points unmovable. */
+    readonly?: boolean;
+    /**
+     * The cursor to show while dragging a point.
+     * @default { cursor: 'grabbing' }
+     */
+    externalStyles?: {
+        cursor?: string;
+    };
+    /**
+     * How much one notch of the wheel moves the focused `Point`. Scrolling
+     * sideways, or with shift held, moves x. A `Point` can override it.
+     * @default ['normalized', 0.01]
+     */
+    wheel?: ModifierValue<InputEventOption> | null;
+    /**
+     * How much one arrow key press moves a `Point`. A `Point` can override it.
+     * @default { default: ['normalized', 0.01], shift: ['normalized', 0.001] }
+     */
+    keyboard?: ModifierValue<InputEventOption> | null;
+    /**
+     * How much a drag moves a `Point`, per modifier key.
+     * @default { default: 1, shift: 0.1 }
+     */
+    dragSensitivity?: ModifierValue<number>;
+    /**
+     * Let points be selected, and a selection be moved as one. A selection
+     * calls `onChange` on several points in the same tick.
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Ids of the selected points. Bind it (`bind:selection`) to hold the
+     * selection yourself.
+     */
+    selection?: string[];
+    /** Called whenever the selection changes. */
+    onSelectionChange?: (selection: string[]) => void;
+    /** The root element, bound with `bind:ref`. */
+    ref?: HTMLDivElement | null;
+    /** The editor renders exactly what you compose here. */
+    children: Snippet;
+}
+export interface PointsEditorPointProps {
+    /** Where the point is, as `{ x, y }` from 0 to 1, with `y` growing downwards. */
+    value: PointPosition;
+    /**
+     * How the selection refers to this point. One is generated when it is left
+     * out, which lasts as long as the point is mounted.
+     */
+    id?: string;
+    /** The lowest position the point can take, per axis. */
+    min?: Partial<PointPosition>;
+    /** The highest position the point can take, per axis. */
+    max?: Partial<PointPosition>;
+    /** Sets `--color`, for the theme to colour the point with. */
+    color?: string;
+    /** Overrides the `disabled` of `PointsEditor.Root`. */
+    disabled?: boolean;
+    /** Overrides the `readonly` of `PointsEditor.Root`. */
+    readonly?: boolean;
+    /** Overrides the `wheel` of `PointsEditor.Root`. */
+    wheel?: ModifierValue<InputEventOption> | null;
+    /** Overrides the `keyboard` of `PointsEditor.Root`. */
+    keyboard?: ModifierValue<InputEventOption> | null;
+    /** The accessible name of each axis, or one for both. */
+    'aria-label'?: string | Partial<Record<'x' | 'y', string>>;
+    /** What the value of each axis means, or one for both. */
+    'aria-valuetext'?: string | Partial<Record<'x' | 'y', string>>;
+    /**
+     * Called with the new position when the point is moved, including when it
+     * moves along with a selection.
+     */
+    onChange?: (value: PointPosition) => void;
+    onDragStart?: (value: PointPosition) => void;
+    onDragEnd?: (value: PointPosition) => void;
+    children?: Snippet;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACpC;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACjD,+CAA+C;IAC/C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,wDAAwD;IACxD,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,iFAAiF;IACjF,KAAK,EAAE,aAAa,CAAA;IACpB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,wDAAwD;IACxD,GAAG,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAC5B,yDAAyD;IACzD,GAAG,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAC5B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C,uDAAuD;IACvD,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,MAAM,CAAC,CAAC,CAAA;IAC1D,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,MAAM,CAAC,CAAC,CAAA;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/components/PointsEditor/types.js

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

package/dist/components/Slider/Marks.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { cssLength, sliderMarks } from '@tremolo-ui/dom'
+
+  import { setPlacement } from '../_util/placement.js'
+
+  import { useSliderContext } from './context.js'
+  import MarksOption from './MarksOption.svelte'
+  import type { SliderMarksProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = SliderMarksProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof SliderMarksProps>
+
+  let { gap, options, children, style, ...rest }: Props = $props()
+
+  const slider = useSliderContext()
+  setPlacement('Slider.Marks')
+
+  const marks = $derived.by(() => {
+    if (!options) return []
+    const list = sliderMarks(options, slider.min, slider.max, slider.step)
+    // In the order they are on screen.
+    return slider.vertical !== slider.reverse ? list.reverse() : list
+  })
+</script>
+
+<!-- Each option inside is placed against this box. -->
+<div
+  data-orientation={slider.vertical ? 'vertical' : 'horizontal'}
+  style="position: relative; {style ?? ''}"
+  style:--gap={cssLength(gap)}
+  {...rest}
+>
+  {#if options}
+    {#each marks as { value, mark, label } (value)}
+      <MarksOption {value} {mark} label={label ? undefined : null} />
+    {/each}
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>

package/dist/components/Slider/Marks.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SliderMarksProps } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = SliderMarksProps & Omit<HTMLAttributes<HTMLDivElement>, keyof SliderMarksProps>;
+declare const Marks: import("svelte").Component<Props, {}, "">;
+type Marks = ReturnType<typeof Marks>;
+export default Marks;
+//# sourceMappingURL=Marks.svelte.d.ts.map

package/dist/components/Slider/Marks.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marks.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Marks.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,gBAAgB,GAC3B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC;AAuCjE,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/Slider/MarksOption.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { cssLength, valuePercent } from '@tremolo-ui/dom'
+
+  import { checkPlacement } from '../_util/placement.js'
+
+  import { useSliderContext } from './context.js'
+  import type { SliderMarksOptionProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = SliderMarksOptionProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof SliderMarksOptionProps>
+
+  let {
+    value,
+    mark = true,
+    label,
+    thickness,
+    length,
+    gap,
+    classes,
+    styles,
+    style,
+    ...rest
+  }: Props = $props()
+
+  const slider = useSliderContext()
+  checkPlacement('Slider.MarksOption', 'Slider.Marks')
+
+  // The marks sit on the same curve the thumb runs along.
+  const percent = $derived(
+    valuePercent(
+      value,
+      { min: slider.min, max: slider.max, scale: slider.scale },
+      slider.vertical !== slider.reverse,
+    ),
+  )
+  const orientation = $derived(slider.vertical ? 'vertical' : 'horizontal')
+</script>
+
+<div
+  data-orientation={orientation}
+  {...rest}
+  style="position: absolute; translate: {slider.vertical
+    ? 'var(--translate, 0 -50%)'
+    : 'var(--translate, -50% 0)'}; z-index: 10; {style ?? ''}"
+  style:--thickness={cssLength(thickness)}
+  style:--length={cssLength(length)}
+  style:--gap={cssLength(gap)}
+  style:left={slider.vertical ? undefined : `${percent}%`}
+  style:top={slider.vertical ? `${percent}%` : undefined}
+>
+  {#if mark}
+    <div
+      class={classes?.mark}
+      style={styles?.mark}
+      data-orientation={orientation}
+    ></div>
+  {/if}
+  {#if label !== null}
+    <div class={classes?.label} style={styles?.label}>{label ?? value}</div>
+  {/if}
+</div>

package/dist/components/Slider/MarksOption.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SliderMarksOptionProps } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = SliderMarksOptionProps & Omit<HTMLAttributes<HTMLDivElement>, keyof SliderMarksOptionProps>;
+declare const MarksOption: import("svelte").Component<Props, {}, "">;
+type MarksOption = ReturnType<typeof MarksOption>;
+export default MarksOption;
+//# sourceMappingURL=MarksOption.svelte.d.ts.map