@tremolo-ui/svelte 0.7.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/FileInput/context.ts"],"names":[],"mappings":"AAEA,6DAA6D;AAC7D,MAAM,WAAW,qBAAqB;IACpC,yDAAyD;IACzD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;CAC3B;AAID,6EAA6E;AAC7E,eAAO,MAAM,mBAAmB,6BAAM,CAAA;AACtC,eAAO,MAAM,mBAAmB,2DAAM,CAAA"}

package/dist/components/FileInput/context.js

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

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

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

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

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

package/dist/components/FileInput/index.js

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

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+export interface FileInputProps {
+    /**
+     * Which files to take, written the way the HTML attribute is: extensions
+     * (`.wav`), MIME types (`audio/wav`) and type groups (`audio/*`). It is
+     * checked again when the files arrive, since the picker only takes it as a
+     * hint.
+     */
+    accept?: string;
+    /**
+     * Let several files be picked at once.
+     * @default false
+     */
+    multiple?: boolean;
+    /** Make the input unusable. The parts carry `data-disabled`. */
+    disabled?: boolean;
+    /** Called with the picked files that satisfy `accept`. */
+    onChange?: (files: File[]) => void;
+    /**
+     * Called with the picked files that do not satisfy `accept`, after
+     * `onChange` for the same selection.
+     */
+    onReject?: (files: File[]) => void;
+    /** The root element, bound with `bind:ref`. */
+    ref?: HTMLDivElement | null;
+    children: Snippet;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/FileInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAClC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,OAAO,CAAA;CAClB"}

package/dist/components/FileInput/types.js

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

package/dist/components/Knob/ActiveLine.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { knobArcPath, knobArcRadius } from '@tremolo-ui/dom'
+
+  import { checkPlacement } from '../_util/placement.js'
+
+  import { useKnobContext } from './context.js'
+
+  import type { SVGAttributes } from 'svelte/elements'
+
+  type Props = Omit<SVGAttributes<SVGPathElement>, 'd'>
+
+  let {
+    stroke = 'currentColor',
+    'stroke-width': strokeWidth = 6,
+    ...rest
+  }: Props = $props()
+
+  checkPlacement('Knob.ActiveLine', 'Knob.SVGRoot')
+  const knob = useKnobContext()
+  const radius = $derived(knobArcRadius(strokeWidth ?? undefined))
+</script>
+
+<path
+  d={knobArcPath(knob.angles.r2, knob.angles.r3, radius)}
+  fill="none"
+  {stroke}
+  stroke-width={strokeWidth}
+  {...rest}
+/>

package/dist/components/Knob/ActiveLine.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { SVGAttributes } from 'svelte/elements';
+type Props = Omit<SVGAttributes<SVGPathElement>, 'd'>;
+declare const ActiveLine: import("svelte").Component<Props, {}, "">;
+type ActiveLine = ReturnType<typeof ActiveLine>;
+export default ActiveLine;
+//# sourceMappingURL=ActiveLine.svelte.d.ts.map

package/dist/components/Knob/ActiveLine.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveLine.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Knob/ActiveLine.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGnD,KAAK,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,GAAG,CAAC,CAAC;AA0BxD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/Knob/InactiveLine.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { knobArcPath, knobArcRadius } from '@tremolo-ui/dom'
+
+  import { checkPlacement } from '../_util/placement.js'
+
+  import { useKnobContext } from './context.js'
+
+  import type { SVGAttributes } from 'svelte/elements'
+
+  type Props = Omit<SVGAttributes<SVGPathElement>, 'd'>
+
+  let {
+    stroke = 'currentColor',
+    'stroke-width': strokeWidth = 6,
+    ...rest
+  }: Props = $props()
+
+  checkPlacement('Knob.InactiveLine', 'Knob.SVGRoot')
+  const knob = useKnobContext()
+  const radius = $derived(knobArcRadius(strokeWidth ?? undefined))
+</script>
+
+<!-- The travel on either side of the active arc. -->
+{#if knob.startValue > knob.min}
+  <path
+    d={knobArcPath(knob.angles.r1, knob.angles.r2, radius)}
+    fill="none"
+    {stroke}
+    stroke-width={strokeWidth}
+    {...rest}
+  />
+{/if}
+{#if knob.startValue < knob.max}
+  <path
+    d={knobArcPath(knob.angles.r3, knob.angles.r4, radius)}
+    fill="none"
+    {stroke}
+    stroke-width={strokeWidth}
+    {...rest}
+  />
+{/if}

package/dist/components/Knob/InactiveLine.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { SVGAttributes } from 'svelte/elements';
+type Props = Omit<SVGAttributes<SVGPathElement>, 'd'>;
+declare const InactiveLine: import("svelte").Component<Props, {}, "">;
+type InactiveLine = ReturnType<typeof InactiveLine>;
+export default InactiveLine;
+//# sourceMappingURL=InactiveLine.svelte.d.ts.map

package/dist/components/Knob/InactiveLine.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InactiveLine.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Knob/InactiveLine.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGnD,KAAK,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,GAAG,CAAC,CAAC;AAgCxD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/Knob/Root.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import {
+    applyDelta,
+    arrowKeyDirection,
+    cssLength,
+    DEFAULT_DRAG_SENSITIVITY,
+    DEFAULT_KEYBOARD_OPTIONS,
+    DEFAULT_WHEEL_OPTIONS,
+    knobAngles,
+    relativeMapping,
+    selectModifier,
+    wheelDirection,
+    type AxisOptions,
+    type XY,
+  } from '@tremolo-ui/dom'
+  import { linearScale, type ValueRange } from '@tremolo-ui/functions'
+
+  import { dragValue } from '../../actions/drag-value.js'
+  import { wheel as wheelAction } from '../../actions/wheel.js'
+  import { useCheckSteps } from '../_util/check-steps.svelte.js'
+
+  import { setKnobContext } from './context.js'
+  import type { KnobProps } from './types.js'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type Props = KnobProps & Omit<HTMLAttributes<HTMLDivElement>, keyof KnobProps>
+
+  let {
+    value = $bindable(),
+    min,
+    max,
+    step = 1,
+    scale = linearScale,
+    defaultValue,
+    startValue,
+    size,
+    externalStyles,
+    wheel = DEFAULT_WHEEL_OPTIONS,
+    keyboard = DEFAULT_KEYBOARD_OPTIONS,
+    dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
+    pointerLock = false,
+    enableDoubleClickDefault = true,
+    disabled = false,
+    readonly = false,
+    angleRange = 270,
+    onChange,
+    ref = $bindable(null),
+    children,
+    style,
+    onkeydown,
+    ondblclick,
+    ...rest
+  }: Props = $props()
+
+  const inactive = $derived(disabled || readonly)
+  const range: ValueRange = $derived({ min, max, step, scale })
+  const angles = $derived(
+    knobAngles({
+      value,
+      min,
+      max,
+      scale,
+      startValue: startValue ?? min,
+      angleRange,
+    }),
+  )
+  let dragging = $state(false)
+
+  useCheckSteps(() => ({ component: 'Knob', range, keyboard, wheel }))
+
+  setKnobContext({
+    get value() {
+      return value
+    },
+    get min() {
+      return min
+    },
+    get max() {
+      return max
+    },
+    get step() {
+      return step
+    },
+    get scale() {
+      return scale
+    },
+    get startValue() {
+      return startValue ?? min
+    },
+    get angleRange() {
+      return angleRange
+    },
+    get angles() {
+      return angles
+    },
+  })
+
+  function change(next: number) {
+    value = next
+    onChange?.(next)
+  }
+
+  // The knob has no travel of its own: the value moves away from where it
+  // stood when the drag started, 100px of movement spanning the whole range.
+  // Only the vertical axis carries a value, reversed so that dragging up
+  // raises it. `mapping` is read once, when the action starts; the rest is
+  // handed over as it changes.
+  const dragOptions = $derived({
+    axis: [range, { ...range, reverse: true }] as XY<AxisOptions>,
+    mapping: relativeMapping({
+      pixelRange: 100,
+      sensitivity: (state) =>
+        selectModifier(dragSensitivity, state.event).value,
+    }),
+    getValue: (): XY<number> => [value, value],
+    threshold: 1,
+    cursor: inactive ? undefined : (externalStyles?.cursor ?? 'grabbing'),
+    pointerLock: inactive ? false : pointerLock,
+    shouldStart: () => !inactive,
+    onChange: (v: XY<number>) => {
+      if (!inactive) change(v[1])
+    },
+    onDragStart: () => {
+      dragging = true
+    },
+    onDragEnd: () => {
+      dragging = false
+    },
+  })
+
+  const wheelOptions = $derived({
+    requireFocus: true,
+    onWheel: (event: WheelEvent) => {
+      if (!wheel || inactive) return
+      // A notch the knob does not read — a sideways scroll — is left to the
+      // page rather than swallowed.
+      const direction = wheelDirection(event)
+      if (direction === null) return
+      event.preventDefault()
+      change(applyDelta(value, direction, wheel, range, event))
+    },
+  })
+
+  /** Move the focus to the knob. */
+  export function focus() {
+    if (!disabled) ref?.focus()
+  }
+
+  /** Take the focus away from the knob. */
+  export function blur() {
+    ref?.blur()
+  }
+</script>
+
+<div
+  bind:this={ref}
+  role="slider"
+  tabindex={disabled ? -1 : 0}
+  aria-valuenow={value}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  aria-disabled={disabled}
+  aria-readonly={readonly}
+  data-disabled={disabled ? '' : undefined}
+  data-readonly={readonly ? '' : undefined}
+  data-dragging={dragging ? '' : undefined}
+  {style}
+  style:--knob-size={cssLength(size)}
+  use:dragValue={dragOptions}
+  use:wheelAction={wheelOptions}
+  onkeydown={(event) => {
+    if (keyboard && !inactive) {
+      const direction = arrowKeyDirection(event.key)
+      if (direction !== null) {
+        event.preventDefault()
+        change(applyDelta(value, direction, keyboard, range, event))
+      }
+    }
+    onkeydown?.(event)
+  }}
+  ondblclick={(event) => {
+    if (!inactive && enableDoubleClickDefault) change(defaultValue ?? min)
+    ondblclick?.(event)
+  }}
+  {...rest}
+>
+  {@render children()}
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Knob/Root.svelte.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,SAAS,CAAC,CAAC;AAgKjF,QAAA,MAAM,IAAI;;;mBAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/Knob/SVGRoot.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { KNOB_VIEWBOX_SIZE } from '@tremolo-ui/dom'
+
+  import { setPlacement } from '../_util/placement.js'
+
+  import type { Snippet } from 'svelte'
+  import type { SVGAttributes } from 'svelte/elements'
+
+  type Props = SVGAttributes<SVGSVGElement> & {
+    /**
+     * `Knob.InactiveLine`, `Knob.ActiveLine` and `Knob.Thumb` go here, in the
+     * order you want them painted.
+     */
+    children: Snippet
+  }
+
+  let { children, style, ...rest }: Props = $props()
+
+  setPlacement('Knob.SVGRoot')
+</script>
+
+<svg
+  viewBox="0 0 {KNOB_VIEWBOX_SIZE} {KNOB_VIEWBOX_SIZE}"
+  style="display: block; {style ?? ''}"
+  {...rest}
+>
+  {@render children()}
+</svg>

package/dist/components/Knob/SVGRoot.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+type Props = SVGAttributes<SVGSVGElement> & {
+    /**
+     * `Knob.InactiveLine`, `Knob.ActiveLine` and `Knob.Thumb` go here, in the
+     * order you want them painted.
+     */
+    children: Snippet;
+};
+declare const SVGRoot: import("svelte").Component<Props, {}, "">;
+type SVGRoot = ReturnType<typeof SVGRoot>;
+export default SVGRoot;
+//# sourceMappingURL=SVGRoot.svelte.d.ts.map

package/dist/components/Knob/SVGRoot.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Knob/SVGRoot.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGnD,KAAK,KAAK,GAAG,aAAa,CAAC,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAC;AAqBJ,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Knob/Thumb.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { KNOB_VIEWBOX_SIZE } from '@tremolo-ui/dom'
+  import { clamp } from '@tremolo-ui/functions'
+
+  import { checkPlacement } from '../_util/placement.js'
+
+  import { useKnobContext } from './context.js'
+  import type { KnobThumbProps } from './types.js'
+
+  import type { SVGAttributes } from 'svelte/elements'
+
+  type Props = KnobThumbProps &
+    Omit<SVGAttributes<SVGSVGElement>, keyof KnobThumbProps>
+
+  let {
+    thumb = 'currentColor',
+    thumbLine = 'currentColor',
+    thumbSize = 84,
+    thumbLineWeight = 6,
+    thumbLineLength = 35,
+    classes,
+    ...rest
+  }: Props = $props()
+
+  checkPlacement('Knob.Thumb', 'Knob.SVGRoot')
+  const knob = useKnobContext()
+  const angle = $derived(knob.angles.r1 + knob.angles.p * knob.angleRange)
+</script>
+
+<svg {...rest}>
+  <circle cx="50%" cy="50%" r="{thumbSize / 2}%" fill={thumb} />
+  <line
+    class={classes?.thumbLine}
+    x1="50%"
+    y1="{(KNOB_VIEWBOX_SIZE - clamp(thumbSize, 0, 100)) / 2}%"
+    x2="50%"
+    y2="{thumbLineLength}%"
+    stroke={thumbLine}
+    stroke-width="{thumbLineWeight}%"
+    style:transform="rotate({angle}deg)"
+    style:transform-origin="50% 50%"
+  />
+</svg>

package/dist/components/Knob/Thumb.svelte.d.ts

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

package/dist/components/Knob/Thumb.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Knob/Thumb.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGnD,KAAK,KAAK,GAAG,cAAc,GACzB,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC;AAmC7D,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,22 @@
+import type { KnobAngles } from '@tremolo-ui/dom';
+import type { Scale } from '@tremolo-ui/functions';
+/**
+ * What `Knob.Root` shares with its parts. Every field is a getter, so reading
+ * one inside markup or `$derived` follows the value as it changes.
+ */
+export interface KnobContextValue {
+    readonly value: number;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly scale: Scale;
+    readonly startValue: number;
+    /** How far the knob turns from `min` to `max`, in degrees. */
+    readonly angleRange: number;
+    /** The angles the parts are drawn with. See `knobAngles` in `@tremolo-ui/dom`. */
+    readonly angles: KnobAngles;
+}
+/** The context of the enclosing `Knob.Root`, for a part of your own. */
+export declare const useKnobContext: () => KnobContextValue;
+export declare const setKnobContext: (context: KnobContextValue) => KnobContextValue;
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Knob/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAElD;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAA;IACrB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,8DAA8D;IAC9D,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAA;CAC5B;AAID,wEAAwE;AACxE,eAAO,MAAM,cAAc,wBAAM,CAAA;AACjC,eAAO,MAAM,cAAc,iDAAM,CAAA"}

package/dist/components/Knob/context.js

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

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

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

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

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

package/dist/components/Knob/index.js

@@ -0,0 +1,5 @@
+export { default as ActiveLine } from './ActiveLine.svelte';
+export { default as InactiveLine } from './InactiveLine.svelte';
+export { default as Root } from './Root.svelte';
+export { default as SVGRoot } from './SVGRoot.svelte';
+export { default as Thumb } from './Thumb.svelte';

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

@@ -0,0 +1,139 @@
+import type { InputEventOption, ModifierValue } from '@tremolo-ui/dom';
+import type { Scale } from '@tremolo-ui/functions';
+import type { Snippet } from 'svelte';
+export interface KnobProps {
+    /**
+     * The current value. Bind it (`bind:value`) or update it from `onChange`.
+     */
+    value: number;
+    /** The value with the knob turned all the way down. */
+    min: number;
+    /** The value with the knob turned all the way up. */
+    max: number;
+    /**
+     * Granularity of the value. A drag, the wheel and the arrow keys snap it to
+     * multiples of `step`.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * How the value is distributed across the travel. Pick one of the scales
+     * from `@tremolo-ui/functions`.
+     *
+     * @default linearScale
+     */
+    scale?: Scale;
+    /**
+     * The value a double click restores, while `enableDoubleClickDefault` is on.
+     * @default min
+     */
+    defaultValue?: number;
+    /**
+     * Where the active arc starts. Put it at the centre of a bipolar control,
+     * such as a pan knob, so that the arc grows from there either way.
+     * @default min
+     */
+    startValue?: number;
+    /**
+     * Width and height of the knob. Sets `--knob-size`; the size the theme
+     * gives it stands when this is omitted.
+     */
+    size?: number | string;
+    /**
+     * The cursor to show while dragging.
+     * @default { cursor: 'grabbing' }
+     */
+    externalStyles?: {
+        cursor?: string;
+    };
+    /**
+     * 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 a drag moves the value, per modifier key. `1` is 100px for the
+     * whole range.
+     * @default { default: 1, shift: 0.1 }
+     */
+    dragSensitivity?: ModifierValue<number>;
+    /**
+     * Hide the cursor while dragging and read the pointer movement directly,
+     * so the drag does not stop at the edge of the screen.
+     * @default false
+     */
+    pointerLock?: boolean;
+    /**
+     * 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;
+    /**
+     * Restore `defaultValue` on a double click.
+     * @default true
+     */
+    enableDoubleClickDefault?: boolean;
+    /**
+     * Make the knob unchangeable and remove it from the tab order.
+     * The parts carry `data-disabled` while it is set.
+     */
+    disabled?: boolean;
+    /**
+     * Make the knob unchangeable while leaving it focusable.
+     * The parts carry `data-readonly` while it is set.
+     */
+    readonly?: boolean;
+    /**
+     * How far the knob turns from `min` to `max`, in degrees, centred on the
+     * top.
+     * @default 270
+     */
+    angleRange?: number;
+    /**
+     * Called with the new value when a drag, the wheel, an arrow key or a
+     * double click moves it.
+     */
+    onChange?: (value: number) => void;
+    /** The root element, bound with `bind:ref`. */
+    ref?: HTMLDivElement | null;
+    /**
+     * The knob renders exactly what you compose here; there is no default
+     * markup to fall back to.
+     */
+    children: Snippet;
+}
+export interface KnobThumbProps {
+    /**
+     * Fill colour of the circle.
+     * @default 'currentColor'
+     */
+    thumb?: string;
+    /**
+     * Colour of the line that points at the value.
+     * @default 'currentColor'
+     */
+    thumbLine?: string;
+    /**
+     * Diameter of the circle, as a percentage of the knob.
+     * @default 84
+     */
+    thumbSize?: number;
+    /**
+     * Thickness of the line, as a percentage of the knob.
+     * @default 6
+     */
+    thumbLineWeight?: number;
+    /**
+     * How far down the line reaches, as a percentage of the knob from its top.
+     * @default 35
+     */
+    thumbLineLength?: number;
+    /** Classes for the line that points at the value. */
+    classes?: {
+        thumbLine?: string;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Knob/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,SAAS;IACxB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,GAAG,EAAE,MAAM,CAAA;IACX,qDAAqD;IACrD,GAAG,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB;;;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;;;;OAIG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACvC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;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;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,qDAAqD;IACrD,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACjC"}

package/dist/components/Knob/types.js

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