@tremolo-ui/svelte 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 mimoz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# @tremolo-ui/svelte
+
+## Install
+
+```bash
+npm i @tremolo-ui/svelte
+```
+
+Requires Svelte 5.
+
+## Note
+
+See https://github.com/m1m0zzz/tremolo-ui

package/dist/actions/drag-value.d.ts

@@ -0,0 +1,22 @@
+import { type DragValueOptions } from '@tremolo-ui/dom';
+import type { Action } from 'svelte/action';
+/**
+ * Drive a value with a pointer drag. See `createDragValue` in
+ * `@tremolo-ui/dom` for the options; `elementMapping` and `relativeMapping`
+ * from there choose how the pointer becomes a value.
+ *
+ * `mapping` is fixed when the action starts. Everything else is handed to the
+ * drag in place, so changing it does not end a drag in progress.
+ *
+ * @example
+ * <div
+ *   use:dragValue={{
+ *     axis: { min: 0, max: 100 },
+ *     mapping: relativeMapping({ pixelRange: 200 }),
+ *     getValue: () => [value, value],
+ *     onChange: ([, y]) => (value = y),
+ *   }}
+ * ></div>
+ */
+export declare const dragValue: Action<Element, DragValueOptions>;
+//# sourceMappingURL=drag-value.d.ts.map

package/dist/actions/drag-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-value.d.ts","sourceRoot":"","sources":["../../src/actions/drag-value.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAUvD,CAAA"}

package/dist/actions/drag-value.js

@@ -0,0 +1,30 @@
+import { createDragValue, replaceOptions, } from '@tremolo-ui/dom';
+/**
+ * Drive a value with a pointer drag. See `createDragValue` in
+ * `@tremolo-ui/dom` for the options; `elementMapping` and `relativeMapping`
+ * from there choose how the pointer becomes a value.
+ *
+ * `mapping` is fixed when the action starts. Everything else is handed to the
+ * drag in place, so changing it does not end a drag in progress.
+ *
+ * @example
+ * <div
+ *   use:dragValue={{
+ *     axis: { min: 0, max: 100 },
+ *     mapping: relativeMapping({ pixelRange: 200 }),
+ *     getValue: () => [value, value],
+ *     onChange: ([, y]) => (value = y),
+ *   }}
+ * ></div>
+ */
+export const dragValue = (node, options) => {
+    const instance = createDragValue(node, options);
+    let current = options;
+    return {
+        update: (next) => {
+            instance.update(replaceOptions(current, next));
+            current = next;
+        },
+        destroy: () => instance.destroy(),
+    };
+};

package/dist/actions/drag.d.ts

@@ -0,0 +1,14 @@
+import { type DragOptions } from '@tremolo-ui/dom';
+import type { Action } from 'svelte/action';
+/**
+ * Track a pointer drag on the element. See `createDrag` in `@tremolo-ui/dom`
+ * for the options.
+ *
+ * New options are handed to the drag in place, so changing them — a handler
+ * that closes over state, say — does not end a drag in progress.
+ *
+ * @example
+ * <div use:drag={{ onDrag: (state) => (x += state.deltaX) }}></div>
+ */
+export declare const drag: Action<Element, DragOptions | undefined>;
+//# sourceMappingURL=drag.d.ts.map

package/dist/actions/drag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag.d.ts","sourceRoot":"","sources":["../../src/actions/drag.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE9E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI,EAAE,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,CAazD,CAAA"}

package/dist/actions/drag.js

@@ -0,0 +1,22 @@
+import { createDrag, replaceOptions } from '@tremolo-ui/dom';
+/**
+ * Track a pointer drag on the element. See `createDrag` in `@tremolo-ui/dom`
+ * for the options.
+ *
+ * New options are handed to the drag in place, so changing them — a handler
+ * that closes over state, say — does not end a drag in progress.
+ *
+ * @example
+ * <div use:drag={{ onDrag: (state) => (x += state.deltaX) }}></div>
+ */
+export const drag = (node, options) => {
+    const instance = createDrag(node, options);
+    let current = options;
+    return {
+        update: (next) => {
+            instance.update(replaceOptions(current, next));
+            current = next;
+        },
+        destroy: () => instance.destroy(),
+    };
+};

package/dist/actions/drop-zone.d.ts

@@ -0,0 +1,12 @@
+import { type DropZoneOptions } from '@tremolo-ui/dom';
+import type { Action } from 'svelte/action';
+/**
+ * Take files dropped on the element. See `createDropZone` in
+ * `@tremolo-ui/dom` for the options; `onStateChange` reports whether files
+ * are over it, for styling the element while they are.
+ *
+ * @example
+ * <div use:dropZone={{ accept: 'audio/*', onDrop: (files) => load(files) }}></div>
+ */
+export declare const dropZone: Action<Element, DropZoneOptions | undefined>;
+//# sourceMappingURL=drop-zone.d.ts.map

package/dist/actions/drop-zone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-zone.d.ts","sourceRoot":"","sources":["../../src/actions/drop-zone.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,OAAO,EAAE,eAAe,GAAG,SAAS,CAajE,CAAA"}

package/dist/actions/drop-zone.js

@@ -0,0 +1,20 @@
+import { createDropZone, replaceOptions, } from '@tremolo-ui/dom';
+/**
+ * Take files dropped on the element. See `createDropZone` in
+ * `@tremolo-ui/dom` for the options; `onStateChange` reports whether files
+ * are over it, for styling the element while they are.
+ *
+ * @example
+ * <div use:dropZone={{ accept: 'audio/*', onDrop: (files) => load(files) }}></div>
+ */
+export const dropZone = (node, options) => {
+    const instance = createDropZone(node, options);
+    let current = options;
+    return {
+        update: (next) => {
+            instance.update(replaceOptions(current, next));
+            current = next;
+        },
+        destroy: () => instance.destroy(),
+    };
+};

package/dist/actions/long-press.d.ts

@@ -0,0 +1,11 @@
+import { type LongPressOptions } from '@tremolo-ui/dom';
+import type { Action } from 'svelte/action';
+/**
+ * Repeat `onPress` while the element is held down: once on the press, then
+ * every `interval` after `delay`. See `createLongPress` in `@tremolo-ui/dom`.
+ *
+ * @example
+ * <button use:longPress={{ onPress: () => value++ }}>+</button>
+ */
+export declare const longPress: Action<HTMLElement, LongPressOptions>;
+//# sourceMappingURL=long-press.d.ts.map

package/dist/actions/long-press.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"long-press.d.ts","sourceRoot":"","sources":["../../src/actions/long-press.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAkB3D,CAAA"}

package/dist/actions/long-press.js

@@ -0,0 +1,24 @@
+import { createLongPress, replaceOptions, } from '@tremolo-ui/dom';
+/**
+ * Repeat `onPress` while the element is held down: once on the press, then
+ * every `interval` after `delay`. See `createLongPress` in `@tremolo-ui/dom`.
+ *
+ * @example
+ * <button use:longPress={{ onPress: () => value++ }}>+</button>
+ */
+export const longPress = (node, options) => {
+    const instance = createLongPress(options);
+    const onPointerDown = (event) => instance.start(event);
+    node.addEventListener('pointerdown', onPointerDown);
+    let current = options;
+    return {
+        update: (next) => {
+            instance.update(replaceOptions(current, next));
+            current = next;
+        },
+        destroy: () => {
+            node.removeEventListener('pointerdown', onPointerDown);
+            instance.destroy();
+        },
+    };
+};

package/dist/actions/wheel.d.ts

@@ -0,0 +1,15 @@
+import { type WheelOptions } from '@tremolo-ui/dom';
+import type { Action } from 'svelte/action';
+export interface WheelActionOptions extends WheelOptions {
+    onWheel: (event: WheelEvent) => void;
+}
+/**
+ * Listen to the wheel on the element, as a non-passive listener so that
+ * `preventDefault()` can keep the page from scrolling. See `createWheel` in
+ * `@tremolo-ui/dom`.
+ *
+ * @example
+ * <div use:wheel={{ onWheel: (e) => { e.preventDefault(); … }, requireFocus: true }}></div>
+ */
+export declare const wheel: Action<Element, WheelActionOptions>;
+//# sourceMappingURL=wheel.d.ts.map

package/dist/actions/wheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheel.d.ts","sourceRoot":"","sources":["../../src/actions/wheel.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAEhF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAWrD,CAAA"}

package/dist/actions/wheel.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createWheel, replaceOptions } from '@tremolo-ui/dom';
+/**
+ * Listen to the wheel on the element, as a non-passive listener so that
+ * `preventDefault()` can keep the page from scrolling. See `createWheel` in
+ * `@tremolo-ui/dom`.
+ *
+ * @example
+ * <div use:wheel={{ onWheel: (e) => { e.preventDefault(); … }, requireFocus: true }}></div>
+ */
+export const wheel = (node, options) => {
+    const { onWheel } = options, rest = __rest(options, ["onWheel"]);
+    const instance = createWheel(node, onWheel, rest);
+    let current = options;
+    return {
+        update: (next) => {
+            instance.update(replaceOptions(current, next));
+            current = next;
+        },
+        destroy: () => instance.destroy(),
+    };
+};

package/dist/components/AnimationCanvas/AnimationCanvas.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import {
+    createAnimationCanvas,
+    type AnimationCanvasInstance,
+  } from '@tremolo-ui/dom'
+  import { untrack } from 'svelte'
+
+  import type { AnimationCanvasProps } from './types.js'
+
+  import type { HTMLCanvasAttributes } from 'svelte/elements'
+
+  type Props = AnimationCanvasProps &
+    Omit<HTMLCanvasAttributes, keyof AnimationCanvasProps>
+
+  let {
+    draw,
+    init,
+    animate = true,
+    options,
+    reduceFlickering = true,
+    resizable = false,
+    width = 100,
+    height = 100,
+    ref = $bindable(null),
+    oncontextmenu = (event: MouseEvent) => event.preventDefault(),
+    ...rest
+  }: Props = $props()
+
+  let instance: AnimationCanvasInstance | null = null
+
+  // Only `resizable` decides how the instance is wired, so it is the one
+  // setting that rebuilds it. Everything else is pushed with update() below,
+  // and the handlers are read at call time.
+  $effect(() => {
+    const canvas = ref
+    const wired = resizable
+    if (!canvas) return
+    // All of it untracked, the call included: without animating, the core
+    // draws the first frame right here, and reading `draw` would make every
+    // state it reads tear the canvas down.
+    const current = untrack(() =>
+      createAnimationCanvas(canvas, {
+        draw: (context, frame) => draw(context, frame),
+        init: (context, size) => init?.(context, size),
+        animate,
+        size: { width, height },
+        reduceFlickering,
+        resizable: wired,
+        contextAttributes: options,
+      }),
+    )
+    instance = current
+    return () => {
+      instance = null
+      current.destroy()
+    }
+  })
+
+  // Also run when `draw` or `init` change: without a loop running, update()
+  // is what paints a new handler's frame, so a canvas driven by state rather
+  // than by time shows the change.
+  $effect(() => {
+    void draw
+    void init
+    instance?.update({ animate, size: { width, height }, reduceFlickering })
+  })
+</script>
+
+<canvas bind:this={ref} {oncontextmenu} {...rest}></canvas>

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

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

package/dist/components/AnimationCanvas/AnimationCanvas.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationCanvas.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/AnimationCanvas/AnimationCanvas.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAEtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,KAAK,KAAK,GAAG,oBAAoB,GAC/B,IAAI,CAAC,oBAAoB,EAAE,MAAM,oBAAoB,CAAC,CAAC;AAoE3D,QAAA,MAAM,eAAe,8CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,46 @@
+import type { AnimationFrame } from '@tremolo-ui/dom';
+/** Called once the canvas is ready, and again whenever it is resized. */
+export type InitFunction = (context: CanvasRenderingContext2D, size: {
+    width: number;
+    height: number;
+}) => void;
+/** Called on every frame while `animate` is on, and once otherwise. */
+export type DrawFunction = (context: CanvasRenderingContext2D, frame: AnimationFrame) => void;
+export interface AnimationCanvasProps {
+    /** Draws a frame. */
+    draw: DrawFunction;
+    /** Sets the canvas up before the first frame and after a resize. */
+    init?: InitFunction;
+    /**
+     * Draw on every animation frame. Off, `draw` runs once and again after a
+     * resize.
+     * @default true
+     */
+    animate?: boolean;
+    /** Settings for the 2D context. Read once, when the canvas is created. */
+    options?: CanvasRenderingContext2DSettings;
+    /**
+     * Keep the drawing while the canvas is resized, rather than letting it
+     * flash blank until the next frame.
+     * @default true
+     */
+    reduceFlickering?: boolean;
+    /**
+     * Follow the size of the parent element. `width` and `height` are ignored.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Width in CSS pixels, while not `resizable`.
+     * @default 100
+     */
+    width?: number;
+    /**
+     * Height in CSS pixels, while not `resizable`.
+     * @default 100
+     */
+    height?: number;
+    /** The canvas, bound with `bind:ref`. */
+    ref?: HTMLCanvasElement | null;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/AnimationCanvas/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,yEAAyE;AACzE,MAAM,MAAM,YAAY,GAAG,CACzB,OAAO,EAAE,wBAAwB,EACjC,IAAI,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,KACpC,IAAI,CAAA;AAET,uEAAuE;AACvE,MAAM,MAAM,YAAY,GAAG,CACzB,OAAO,EAAE,wBAAwB,EACjC,KAAK,EAAE,cAAc,KAClB,IAAI,CAAA;AAET,MAAM,WAAW,oBAAoB;IACnC,qBAAqB;IACrB,IAAI,EAAE,YAAY,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,gCAAgC,CAAA;IAC1C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,GAAG,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;CAC/B"}

package/dist/components/AnimationCanvas/types.js

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

package/dist/components/DropZone/Root.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { dropZone } from '../../actions/drop-zone.js'
+
+  import type { DropZoneProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = DropZoneProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof DropZoneProps>
+
+  let {
+    accept,
+    multiple = false,
+    disabled = false,
+    onDrop,
+    onReject,
+    ref = $bindable(null),
+    children,
+    ...rest
+  }: Props = $props()
+
+  let over = $state(false)
+  let invalid = $state(false)
+
+  const options = $derived({
+    accept,
+    multiple,
+    disabled,
+    onDrop: (files: File[], event: DragEvent) => onDrop?.(files, event),
+    onReject: (files: File[], event: DragEvent) => onReject?.(files, event),
+    onStateChange: (state: { over: boolean; invalid: boolean }) => {
+      over = state.over
+      invalid = state.invalid
+    },
+  })
+</script>
+
+<div
+  bind:this={ref}
+  data-dragover={over ? '' : undefined}
+  data-invalid={invalid ? '' : undefined}
+  data-disabled={disabled ? '' : undefined}
+  use:dropZone={options}
+  {...rest}
+>
+  {@render children()}
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/DropZone/Root.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,aAAa,GACxB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,aAAa,CAAC,CAAC;AA0C9D,QAAA,MAAM,IAAI,8CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

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

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

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

package/dist/components/DropZone/index.js

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

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+export interface DropZoneProps {
+    /**
+     * Which files to take, written the way the `accept` attribute of a file
+     * input is.
+     */
+    accept?: string;
+    /**
+     * Take every file dropped, rather than the first.
+     * @default false
+     */
+    multiple?: boolean;
+    /** Ignore drops. The zone carries `data-disabled`. */
+    disabled?: boolean;
+    /** Called with the dropped files that satisfy `accept`. */
+    onDrop?: (files: File[], event: DragEvent) => void;
+    /**
+     * Called with the dropped files that do not satisfy `accept`, after `onDrop`
+     * for the same drop.
+     */
+    onReject?: (files: File[], event: DragEvent) => void;
+    /** The root element, bound with `bind:ref`. */
+    ref?: HTMLDivElement | null;
+    children: Snippet;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DropZone/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IAClD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IACpD,+CAA+C;IAC/C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,OAAO,CAAA;CAClB"}

package/dist/components/DropZone/types.js

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

package/dist/components/FileInput/Root.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { partitionByAccept } from '@tremolo-ui/dom'
+
+  import { visuallyHidden } from '../_util/style.js'
+
+  import { setFileInputContext } from './context.js'
+  import type { FileInputProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = FileInputProps &
+    Omit<HTMLAttributes<HTMLDivElement>, keyof FileInputProps>
+
+  let {
+    accept,
+    multiple = false,
+    disabled = false,
+    onChange,
+    onReject,
+    ref = $bindable(null),
+    children,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    ...rest
+  }: Props = $props()
+
+  const inputId = $props.id()
+
+  setFileInputContext({
+    inputId,
+    get disabled() {
+      return disabled
+    },
+  })
+
+  function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+    const input = event.currentTarget
+    const { accepted, rejected } = partitionByAccept(
+      Array.from(input.files ?? []),
+      accept,
+    )
+    // Picking the same file twice fires no second change while the value is
+    // still on the input, so it is cleared as soon as it is read.
+    input.value = ''
+    if (accepted.length > 0) onChange?.(accepted)
+    if (rejected.length > 0) onReject?.(rejected)
+  }
+</script>
+
+<!-- The control is the native file input: out of sight but in the tab order,
+  with `Trigger` as its label, so the click reaching the picker and the name
+  are the browser's job. -->
+<div bind:this={ref} data-disabled={disabled ? '' : undefined} {...rest}>
+  <input
+    id={inputId}
+    type="file"
+    {accept}
+    {multiple}
+    {disabled}
+    style={visuallyHidden}
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledby}
+    aria-describedby={ariaDescribedby}
+    onchange={handleChange}
+  />
+  {@render children()}
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/FileInput/Root.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,GACzB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC;AAyD/D,QAAA,MAAM,IAAI,8CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/FileInput/Trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { useFileInputContext } from './context.js'
+
+  import type { Snippet } from 'svelte'
+  import type { HTMLLabelAttributes } from 'svelte/elements'
+
+  type Props = Omit<HTMLLabelAttributes, 'for'> & {
+    ref?: HTMLLabelElement | null
+    /** What the trigger reads. It is the accessible name of the file input. */
+    children: Snippet
+  }
+
+  let { ref = $bindable(null), children, ...rest }: Props = $props()
+
+  const fileInput = useFileInputContext()
+</script>
+
+<!-- A label rather than a button: the browser forwards the click to the
+  input, the input stays the one thing in the tab order, and its name comes
+  from this text. -->
+<label
+  bind:this={ref}
+  for={fileInput.inputId}
+  data-disabled={fileInput.disabled ? '' : undefined}
+  {...rest}
+>
+  {@render children()}
+</label>

package/dist/components/FileInput/Trigger.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+type Props = Omit<HTMLLabelAttributes, 'for'> & {
+    ref?: HTMLLabelElement | null;
+    /** What the trigger reads. It is the accessible name of the file input. */
+    children: Snippet;
+};
+declare const Trigger: import("svelte").Component<Props, {}, "ref">;
+type Trigger = ReturnType<typeof Trigger>;
+export default Trigger;
+//# sourceMappingURL=Trigger.svelte.d.ts.map

package/dist/components/FileInput/Trigger.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/FileInput/Trigger.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,GAAG;IAC9C,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC7B,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAC;AAoBJ,QAAA,MAAM,OAAO,8CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,10 @@
+/** What `FileInput.Root` shares with `FileInput.Trigger`. */
+export interface FileInputContextValue {
+    /** The id of the file input, for the trigger's `for`. */
+    readonly inputId: string;
+    readonly disabled: boolean;
+}
+/** The context of the enclosing `FileInput.Root`, for a part of your own. */
+export declare const useFileInputContext: () => FileInputContextValue;
+export declare const setFileInputContext: (context: FileInputContextValue) => FileInputContextValue;
+//# sourceMappingURL=context.d.ts.map