Refactor application

- Use contexts for large-scope states - Use OffscreenCanvas for rendering instead of hidden canvas element
2025-04-02 12:46:40 -04:00
parent cccf761a34
commit 407ef956d4
45 changed files with 1835 additions and 1324 deletions
@@ -2,12 +2,15 @@
  import IconInfo from '~icons/material-symbols/info'

  import * as Popover from '$lib/components/ui/popover'
+  import { Label } from '$lib/components/ui/label'
 </script>

 <Popover.Root>
-  <Popover.Trigger>
-    <IconInfo class="text-muted-foreground text-sm" />
-  </Popover.Trigger>
+  <Label>
+    <Popover.Trigger>
+      <IconInfo class="text-muted-foreground inline" />
+    </Popover.Trigger>
+  </Label>

  <Popover.Content class="text-sm">
    <slot />
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui'
+  import { cn } from '$lib/utils.js'

-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		orientation = "horizontal",
-		class: className,
-		...restProps
-	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    orientation = 'horizontal',
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props()
 </script>

 <!--
@@ -16,29 +16,29 @@ Discriminated Unions + Destructing (required for bindable) do not
 get along, so we shut typescript up by casting `value` to `never`.
 -->
 <SliderPrimitive.Root
-	bind:ref
-	bind:value={value as never}
-	{orientation}
-	class={cn(
-		"relative flex touch-none select-none items-center data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
-		className
-	)}
-	{...restProps}
+  bind:ref
+  bind:value={value as never}
+  {orientation}
+  class={cn(
+    "relative flex touch-none select-none items-center data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
+    className,
+  )}
+  {...restProps}
 >
-	{#snippet children({ thumbs })}
-		<span
-			data-orientation={orientation}
-			class="bg-secondary relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-2"
-		>
-			<SliderPrimitive.Range
-				class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
-			/>
-		</span>
-		{#each thumbs as thumb (thumb)}
-			<SliderPrimitive.Thumb
-				index={thumb}
-				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-			/>
-		{/each}
-	{/snippet}
+  {#snippet children({ thumbs })}
+    <span
+      data-orientation={orientation}
+      class="bg-secondary relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-2"
+    >
+      <SliderPrimitive.Range
+        class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+      />
+    </span>
+    {#each thumbs as thumb (thumb)}
+      <SliderPrimitive.Thumb
+        index={thumb}
+        class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+      />
+    {/each}
+  {/snippet}
 </SliderPrimitive.Root>
@@ -0,0 +1,63 @@
+import { getContext, setContext } from 'svelte'
+import type { ConversionConfig } from './config.svelte'
+import { Quantizer } from '$lib/image/quantizer'
+import { withTransform } from '$lib/image/transform'
+import { Scaler } from '$lib/image/scaler'
+
+const scaler = new Scaler(200, 200)
+
+export interface BitmapContext {
+  image: ImageBitmap | null
+  rendered: number[] | null
+}
+
+export const BitmapContextToken = Symbol('bitmap')
+
+export function getBitmapContext(): BitmapContext {
+  return getContext(BitmapContextToken)
+}
+
+export function createBitmapContext(config: ConversionConfig): BitmapContext {
+  const ctx: BitmapContext = $state({
+    image: null,
+    rendered: null,
+  })
+
+  const canvas = new OffscreenCanvas(200, 200)
+
+  const quantizer = $derived(
+    new Quantizer({
+      ditheringKernel: config.ditheringKernel,
+      contrast: config.contrast,
+      bias: config.bias,
+    })
+  )
+
+  $effect(() => {
+    const bitmap = ctx.image
+
+    if (bitmap === null) {
+      ctx.rendered = null
+      return
+    }
+
+    const canvasCtx = canvas.getContext('2d', {
+      willReadFrequently: true,
+    })!
+
+    withTransform(canvasCtx, config.transform, () => {
+      const nonNullBitmap = bitmap
+
+      const bg = config.backgroundColor
+      canvasCtx.fillStyle = `rgb(${bg} ${bg} ${bg})`
+      canvasCtx.fillRect(0, 0, 200, 200)
+      const { dx, dy, dWidth, dHeight } = scaler[config.scaleMode](nonNullBitmap)
+      canvasCtx.drawImage(nonNullBitmap, dx, dy, dWidth, dHeight)
+    })
+
+    const quantizedData = quantizer.reduce(canvasCtx)
+    ctx.rendered = quantizedData
+  })
+
+  return setContext(BitmapContextToken, ctx)
+}
@@ -0,0 +1,32 @@
+import { DEFAULT_DITHERING_KERNEL, type DitheringKernel } from '$lib/image/quantizer'
+import type { ScaleMode } from '$lib/image/scaler'
+import { Transform } from '$lib/image/transform'
+import { getContext, setContext } from 'svelte'
+
+export interface ConversionConfig {
+  scaleMode: ScaleMode
+  transform: Transform
+  backgroundColor: number
+  ditheringKernel: DitheringKernel | null
+  contrast: number
+  bias: number
+}
+
+const ConversionConfigToken = Symbol('conversion-config')
+
+export function getConversionConfig(): ConversionConfig {
+  return getContext(ConversionConfigToken)
+}
+
+export function createConversionConfig() {
+  const config = $state<ConversionConfig>({
+    scaleMode: 'fit',
+    transform: new Transform(),
+    backgroundColor: 255,
+    ditheringKernel: DEFAULT_DITHERING_KERNEL,
+    contrast: 0,
+    bias: 0,
+  })
+
+  return setContext(ConversionConfigToken, config)
+}
@@ -0,0 +1,41 @@
+import { getContext, setContext } from 'svelte'
+import { toast } from 'svelte-sonner'
+
+function isInkclip(dev: HIDDevice) {
+  return dev.vendorId == 0xc0de && dev.productId == 0xcafe
+}
+
+export interface DeviceContext {
+  device: HIDDevice | null
+}
+
+const DeviceContextToken = Symbol('device')
+
+export function getDeviceContext(): DeviceContext {
+  return getContext(DeviceContextToken)
+}
+
+export function createDeviceContext(): DeviceContext {
+  const ctx: DeviceContext = $state({ device: null })
+
+  navigator.hid.getDevices().then(devices => {
+    const dev = devices.find(isInkclip)
+    if (dev !== undefined) ctx.device = dev
+  })
+
+  navigator.hid.addEventListener('connect', e => {
+    if (isInkclip(e.device) && ctx.device === null) {
+      toast.info('Device connected')
+      ctx.device = e.device
+    }
+  })
+
+  navigator.hid.addEventListener('disconnect', e => {
+    if (ctx.device === e.device) {
+      toast.info('Device disconnected')
+      ctx.device = null
+    }
+  })
+
+  return setContext(DeviceContextToken, ctx)
+}
@@ -1,22 +1,10 @@
-import RgbQuant from 'rgbquant'
-import type { DitheringKernel, RgbQuantImage } from 'rgbquant'
+import RgbQuant from '$lib/vendor/rgbquant'
+import type { DitheringKernel, RgbQuantImage } from '$lib/vendor/rgbquant'

-export type { DitheringKernel, RgbQuantImage } from 'rgbquant'
+export type { DitheringKernel, RgbQuantImage } from '$lib/vendor/rgbquant'

 export const DEFAULT_DITHERING_KERNEL: DitheringKernel = 'FloydSteinberg'

-export const ditheringKernels: Record<DitheringKernel, string> = {
-  FloydSteinberg: 'Floyd-Steinberg',
-  FalseFloydSteinberg: 'False Floyd-Steinberg',
-  Stucki: 'Stucki',
-  Atkinson: 'Atkinson',
-  Jarvis: 'Jarvis',
-  Burkes: 'Burkes',
-  Sierra: 'Sierra',
-  TwoSierra: '2-Row Sierra',
-  SierraLite: 'Sierra Lite',
-}
-
 export type QuantizerOptions = {
  ditheringKernel: DitheringKernel | null
  contrast: number
@@ -1,51 +0,0 @@
-declare module 'rgbquant' {
-  type DitheringKernel =
-    | 'FloydSteinberg'
-    | 'FalseFloydSteinberg'
-    | 'Stucki'
-    | 'Atkinson'
-    | 'Jarvis'
-    | 'Burkes'
-    | 'Sierra'
-    | 'TwoSierra'
-    | 'SierraLite'
-
-  type Rgb = [number, number, number]
-
-  type RgbQuantOptions = {
-    colors?: number
-    method?: 1 | 2
-    boxSize?: [number, number]
-    boxPxls?: number
-    initColors?: number
-    minHueCols?: number
-    dithKern?: DitheringKernel | null
-    dithDelta?: number
-    dithSerp?: boolean
-    palette?: Rgb[]
-    reIndex?: boolean
-    useCache?: boolean
-    cacheFreq?: number
-    colorDist?: 'euclidean' | 'manhattan'
-  }
-
-  type RgbQuantImage =
-    | HTMLImageElement
-    | HTMLCanvasElement
-    | CanvasRenderingContext2D
-    | ImageData
-    | Uint8Array
-    | Uint8ClampedArray
-    | Uint32Array
-    | number[]
-
-  export default class RgbQuant {
-    constructor(opts?: RgbQuantOptions)
-    sample(image: RgbQuantImage, width?: number): void
-    palette(tuples: true, noSort?: boolean = false): Rgb[]
-    palette(tuples: false, noSort?: boolean = false): Uint8Array
-    palette(): Uint8Array
-    reduce(image: RgbQuantImage, retType: 1, dithKern?: DitheringKernel | null, dithSerp?: boolean): Uint8Array
-    reduce(image: RgbQuantImage, retType: 2, dithKern?: DitheringKernel | null, dithSerp?: boolean): number[]
-  }
-}
@@ -14,7 +14,7 @@ export class Scaler {
    this.canvasAspectRatio = canvasWidth / canvasHeight
  }

-  fitScale(image: ImageBitmap): DrawParameters {
+  fit(image: ImageBitmap): DrawParameters {
    const { width, height } = image
    const aspectRatio = width / height

@@ -39,7 +39,7 @@ export class Scaler {
    }
  }

-  cropScale(image: ImageBitmap): DrawParameters {
+  crop(image: ImageBitmap): DrawParameters {
    const { width, height } = image
    const aspectRatio = width / height

@@ -64,7 +64,7 @@ export class Scaler {
    }
  }

-  distortScale(): DrawParameters {
+  distort(): DrawParameters {
    return {
      dx: 0,
      dy: 0,
@@ -72,15 +72,4 @@ export class Scaler {
      dHeight: this.canvasHeight,
    }
  }
-
-  scale(image: ImageBitmap, mode: ScaleMode) {
-    switch (mode) {
-      case 'crop':
-        return this.cropScale(image)
-      case 'fit':
-        return this.fitScale(image)
-      case 'distort':
-        return this.distortScale()
-    }
-  }
 }
@@ -34,7 +34,9 @@ export class Transform {
  }
 }

-export function withCtx<T>(ctx: CanvasRenderingContext2D, pre: () => void, action: () => T): T {
+export type Context2D = CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
+
+export function withCtx<T>(ctx: Context2D, pre: () => void, action: () => T): T {
  ctx.save()
  try {
    pre()
@@ -44,7 +46,7 @@ export function withCtx<T>(ctx: CanvasRenderingContext2D, pre: () => void, actio
  }
 }

-export function withTransform<T>(ctx: CanvasRenderingContext2D, transform: Transform, action: () => T): T {
+export function withTransform<T>(ctx: Context2D, transform: Transform, action: () => T): T {
  return withCtx(
    ctx,
    () => {
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { mode, toggleMode } from 'mode-watcher'
+  import { Button } from '$lib/components/ui/button'
+
+  import IconLightMode from '~icons/material-symbols/light-mode'
+  import IconDarkMode from '~icons/material-symbols/dark-mode'
+</script>
+
+<footer class="flex items-center text-sm text-muted-foreground">
+  <div class="grow">
+    2025 &copy; <a class="hover:underline" href="https://dayli.ly">daylily</a>
+  </div>
+  <Button size="icon" variant="ghost" onclick={toggleMode}>
+    {#if $mode === 'dark'}
+      <IconDarkMode />
+    {:else}
+      <IconLightMode />
+    {/if}
+  </Button>
+</footer>
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn } from '$lib/utils'
+
+  import { Separator } from '$lib/components/ui/separator'
+
+  import ConnectSection from '$lib/layouts/connect/ConnectSection.svelte'
+  import EditSection from '$lib/layouts/edit/EditSection.svelte'
+  import WriteSection from '$lib/layouts/write/WriteSection.svelte'
+  import { createDeviceContext } from '$lib/contexts/device.svelte'
+  import { createConversionConfig } from '$lib/contexts/config.svelte'
+  import { createBitmapContext } from '$lib/contexts/bitmap.svelte'
+
+  interface Props extends HTMLAttributes<HTMLElement> {}
+
+  const { class: classNames, ...restProps }: Props = $props()
+
+  createDeviceContext()
+  const config = createConversionConfig()
+  createBitmapContext(config)
+</script>
+
+<main class={cn('w-full flex flex-col gap-4', classNames)} {...restProps}>
+  <ConnectSection />
+
+  <Separator />
+
+  <EditSection class="grow" />
+
+  <Separator />
+
+  <WriteSection />
+</main>
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import IconDisabledByDefault from '~icons/material-symbols/disabled-by-default'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn } from '$lib/utils'
+
+  import * as AlertDialog from '$lib/components/ui/alert-dialog'
+
+  interface Props extends HTMLAttributes<HTMLElement> {}
+
+  const { class: classNames, ...restProps }: Props = $props()
+</script>
+
+<main
+  class={cn('flex items-center justify-center gap-2 font-medium text-xl text-muted-foreground', classNames)}
+  {...restProps}
+>
+  <IconDisabledByDefault />
+  <div>Not Supported</div>
+</main>
+
+<AlertDialog.Root open>
+  <AlertDialog.Portal>
+    <AlertDialog.Overlay />
+    <AlertDialog.Content>
+      <AlertDialog.Title>Browser not supported</AlertDialog.Title>
+
+      <AlertDialog.Description>
+        <p class="mb-2">Write to Inkclip uses the WebHID API, which is not supported by your browser.</p>
+        <p>
+          We recommend using a Chromium-based browser, such as a recent version of Google Chrome, Microsoft Edge, Opera,
+          or Arc.
+        </p>
+      </AlertDialog.Description>
+    </AlertDialog.Content>
+  </AlertDialog.Portal>
+</AlertDialog.Root>
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button'
+  import { getDeviceContext } from '$lib/contexts/device.svelte'
+
+  const deviceCtx = getDeviceContext()
+
+  async function requestDevice() {
+    const devs = await navigator.hid.requestDevice({
+      filters: [
+        {
+          vendorId: 0xc0de,
+          productId: 0xcafe,
+        },
+      ],
+    })
+
+    if (devs == undefined || devs[0] == undefined) {
+      return
+    }
+
+    deviceCtx.device = devs[0]
+  }
+</script>
+
+<Button variant={deviceCtx.device === null ? 'default' : 'secondary'} onclick={requestDevice}>
+  {#if deviceCtx.device === null}
+    Select device
+  {:else}
+    Connect to another device
+  {/if}
+</Button>
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import IconPending from '~icons/material-symbols/pending'
+  import IconCheckCircle from '~icons/material-symbols/check-circle'
+
+  import ConnectButton from './ConnectButton.svelte'
+  import { getDeviceContext } from '$lib/contexts/device.svelte'
+
+  const deviceCtx = getDeviceContext()
+</script>
+
+<section class="flex items-center gap-2 max-lg:flex-col max-lg:items-stretch">
+  <div class="grow">
+    <h1 class="font-semibold text-xl/8">Connect to a device</h1>
+
+    <div class="text-sm">
+      {#if deviceCtx.device === null}
+        <IconPending class="inline" /> Not connected to any device yet. Plug in your device, and click on the button to select
+        it.
+      {:else}
+        <IconCheckCircle class="inline" /> Successfully conected to device. If you want to, you can connect to another device
+        instead.
+      {/if}
+    </div>
+  </div>
+
+  <ConnectButton />
+</section>
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn } from '$lib/utils'
+
+  import { Separator } from '$lib/components/ui/separator'
+
+  import PreviewSection from './preview/PreviewSection.svelte'
+  import ControlsSection from './controls/ControlsSection.svelte'
+  import { createMediaQuery } from '$lib/utils/media.svelte'
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+  const { class: classNames, ...restProps }: Props = $props()
+
+  const mobileMediaQuery = createMediaQuery('(max-width: 1024px)')
+  const separatorOrientation = $derived(mobileMediaQuery.matches ? 'horizontal' : 'vertical')
+</script>
+
+<div class={cn('flex max-lg:flex-col gap-4', classNames)} {...restProps}>
+  <PreviewSection />
+
+  <Separator orientation={separatorOrientation} />
+
+  <ControlsSection class="grow" />
+</div>
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Label } from '$lib/components/ui/label'
+  import { Slider } from '$lib/components/ui/slider'
+  import Infotip from '$lib/components/Infotip.svelte'
+  import { getConversionConfig } from '$lib/contexts/config.svelte'
+
+  const config = getConversionConfig()
+</script>
+
+<div class="flex flex-col gap-4">
+  <Label id="background-color-input-label" class="multimodal">
+    Background Color
+    <span class="font-normal text-muted-foreground"> = {config.backgroundColor} </span>
+    <Infotip>The color used for transparent pixels.</Infotip>
+  </Label>
+
+  <Slider
+    type="single"
+    value={config.backgroundColor}
+    onValueCommit={v => {
+      config.backgroundColor = v
+    }}
+    min={0}
+    max={255}
+    step={1}
+    aria-labelledby="background-color-input-label"
+  />
+</div>
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import IconEditOff from '~icons/material-symbols/edit-off'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn } from '$lib/utils'
+
+  import { DEFAULT_DITHERING_KERNEL } from '$lib/image/quantizer'
+  import { Transform } from '$lib/image/transform'
+
+  import { Button } from '$lib/components/ui/button'
+  import Separator from '$lib/components/ui/separator/separator.svelte'
+
+  import AspectRatioAlert from './dimensions/AspectRatioAlert.svelte'
+  import ScaleModeToggleGroup from './dimensions/ScaleModeToggleGroup.svelte'
+  import TransformControls from './dimensions/TransformControls.svelte'
+  import BackgroundColorSlider from './BackgroundColorSlider.svelte'
+  import DitherControls from './conversion/dither/DitherControls.svelte'
+  import ContrastSlider from './conversion/ContrastSlider.svelte'
+  import BiasSlider from './conversion/BiasSlider.svelte'
+  import { getBitmapContext } from '$lib/contexts/bitmap.svelte'
+  import { getConversionConfig } from '$lib/contexts/config.svelte'
+
+  interface Props extends HTMLAttributes<HTMLElement> {}
+
+  const { class: className, ...restProps }: Props = $props()
+
+  const bitmapCtx = getBitmapContext()
+  const config = getConversionConfig()
+
+  const transformDisabled = $derived(bitmapCtx.image === null)
+
+  function imageNonSquare() {
+    if (bitmapCtx.image === null) return false
+    return bitmapCtx.image.height !== bitmapCtx.image.width
+  }
+
+  function restoreDefaultImageSettings() {
+    config.scaleMode = 'fit'
+    config.transform = new Transform()
+    config.backgroundColor = 255
+    config.ditheringKernel = DEFAULT_DITHERING_KERNEL
+    config.contrast = 0
+    config.bias = 0
+  }
+</script>
+
+<section class={cn('flex flex-col gap-4', className)} {...restProps}>
+  <h1 class="font-semibold text-xl/6">Edit image</h1>
+
+  {#if imageNonSquare()}
+    <AspectRatioAlert />
+  {/if}
+
+  <div class="flex gap-4">
+    {#if imageNonSquare()}
+      <ScaleModeToggleGroup />
+    {/if}
+
+    <TransformControls disabled={transformDisabled} />
+  </div>
+
+  <Separator />
+
+  <BackgroundColorSlider />
+
+  <Separator />
+
+  <DitherControls />
+
+  {#if config.ditheringKernel !== null}
+    <ContrastSlider />
+  {/if}
+
+  {#if config.ditheringKernel === null || config.contrast !== 0}
+    <BiasSlider />
+  {/if}
+
+  <Separator />
+
+  <Button variant="secondary" class="w-full" onclick={restoreDefaultImageSettings}>
+    <IconEditOff />
+    Reset All
+  </Button>
+</section>
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Label } from '$lib/components/ui/label'
+  import { Slider } from '$lib/components/ui/slider'
+  import Infotip from '$lib/components/Infotip.svelte'
+  import { getConversionConfig } from '$lib/contexts/config.svelte'
+
+  const config = getConversionConfig()
+</script>
+
+<div class="flex flex-col gap-4">
+  <Label for="bias-input" class="multimodal">
+    <div>
+      Bias
+      <span class="font-normal text-muted-foreground"> = {Math.floor(config.bias * 100)}% </span>
+    </div>
+
+    <Infotip>
+      How eager the conversion algorithm should push colors towards the two ends (black and white) of the grayscale.
+    </Infotip>
+  </Label>
+
+  <Slider
+    type="single"
+    value={config.bias}
+    onValueCommit={v => {
+      config.bias = v
+    }}
+    min={-1}
+    max={1}
+    step={0.01}
+    id="bias-input"
+  />
+</div>
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Label } from '$lib/components/ui/label'
+  import { Slider } from '$lib/components/ui/slider'
+  import Infotip from '$lib/components/Infotip.svelte'
+  import { getConversionConfig } from '$lib/contexts/config.svelte'
+
+  const config = getConversionConfig()
+</script>
+
+<div class="flex flex-col gap-4">
+  <Label for="contrast-input" class="multimodal">
+    <div>
+      Contrast
+      <span class="font-normal text-muted-foreground"> = {Math.floor(config.contrast * 100)}% </span>
+    </div>
+
+    <Infotip>
+      How eager the conversion algorithm should push colors towards the two ends (black and white) of the grayscale.
+    </Infotip>
+  </Label>
+
+  <Slider
+    type="single"
+    value={config.contrast}
+    onValueCommit={v => {
+      config.contrast = v
+    }}
+    min={0}
+    max={1}
+    step={0.01}
+    id="contrast-input"
+  />
+</div>
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { DEFAULT_DITHERING_KERNEL, type DitheringKernel } from '$lib/image/quantizer'
+  import { getConversionConfig } from '$lib/contexts/config.svelte'
+  import DitheringKernelDropdown from './DitheringKernelDropdown.svelte'
+  import DitherSwitch from './DitherSwitch.svelte'
+
+  const config = getConversionConfig()
+
+  let lastDitheringKernel: DitheringKernel = $state(DEFAULT_DITHERING_KERNEL)
+
+  $effect(() => {
+    if (config.ditheringKernel === null) return
+    lastDitheringKernel = config.ditheringKernel
+  })
+</script>
+
+<div class="flex gap-4">
+  <DitherSwitch
+    checked={config.ditheringKernel !== null}
+    onCheckedChange={c => {
+      if (c) {
+        config.ditheringKernel = lastDitheringKernel
+      } else {
+        config.ditheringKernel = null
+      }
+    }}
+  />
+
+  <DitheringKernelDropdown
+    class={config.ditheringKernel !== null ? [] : ['invisible']}
+    value={lastDitheringKernel}
+    onchange={v => {
+      config.ditheringKernel = v
+    }}
+  />
+</div>
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Switch } from '$lib/components/ui/switch'
+  import { Label } from '$lib/components/ui/label'
+  import Infotip from '$lib/components/Infotip.svelte'
+
+  interface Props {
+    checked: boolean
+    onCheckedChange: (checked: boolean) => void
+  }
+
+  let { checked, onCheckedChange }: Props = $props()
+</script>
+
+<div class="flex flex-col gap-2">
+  <div>
+    <Label for="dither-switch" class="multimodal">
+      <div>Dither</div>
+      <Infotip>Dithering uses different dot densities to simulate shades of gray.</Infotip>
+    </Label>
+  </div>
+
+  <div class="grow flex items-center">
+    <Switch id="dither-switch" {checked} {onCheckedChange} />
+  </div>
+</div>
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn } from '$lib/utils'
+
+  import { type DitheringKernel } from '$lib/image/quantizer'
+
+  import { Label } from '$lib/components/ui/label'
+  import * as Select from '$lib/components/ui/select'
+  import Infotip from '$lib/components/Infotip.svelte'
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+    value: DitheringKernel
+    onchange: (v: DitheringKernel) => void
+  }
+
+  let { value, onchange, class: classNames, ...restProps }: Props = $props()
+
+  const ditheringKernels: Record<DitheringKernel, string> = {
+    FloydSteinberg: 'Floyd-Steinberg',
+    FalseFloydSteinberg: 'False Floyd-Steinberg',
+    Stucki: 'Stucki',
+    Atkinson: 'Atkinson',
+    Jarvis: 'Jarvis',
+    Burkes: 'Burkes',
+    Sierra: 'Sierra',
+    TwoSierra: '2-Row Sierra',
+    SierraLite: 'Sierra Lite',
+  }
+</script>
+
+<div class={cn('grow flex flex-col gap-2', classNames)} {...restProps}>
+  <Label class="multimodal">
+    <div>Dithering Kernel</div>
+
+    <Infotip>
+      Algorithm used for dithering. <br />
+      Switch around to see which one works best for your image.
+    </Infotip>
+  </Label>
+
+  <Select.Root type="single" {value} onValueChange={v => onchange(v as DitheringKernel)}>
+    <Select.Trigger>{ditheringKernels[value]}</Select.Trigger>
+    <Select.Content>
+      {#each Object.entries(ditheringKernels) as [kernel, name]}
+        <Select.Item value={kernel}>{name}</Select.Item>
+      {/each}
+    </Select.Content>
+  </Select.Root>
+</div>
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import * as Alert from '$lib/components/ui/alert'
+  import IconAspectRatio from '~icons/material-symbols/aspect-ratio-outline'
+</script>
+
+<Alert.Root>
+  <IconAspectRatio />
+  <Alert.Title>Image is not 1:1 ratio</Alert.Title>
+  <Alert.Description>You need to choose how to scale your image.</Alert.Description>
+</Alert.Root>
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { ScaleMode } from '$lib/image/scaler'
+
+  import { Label } from '$lib/components/ui/label'
+  import * as ToggleGroup from '$lib/components/ui/toggle-group'
+  import * as Tooltip from '$lib/components/ui/tooltip'
+  import { getConversionConfig } from '$lib/contexts/config.svelte'
+
+  const config = getConversionConfig()
+
+  const scaleModes: Record<ScaleMode, { name: string; description: string }> = {
+    fit: {
+      name: 'Fit',
+      description: 'Fit the entire image onto the display. May introduce letterboxing.',
+    },
+    crop: {
+      name: 'Crop',
+      description: 'Fill the display and crop out-of-frame parts of the image.',
+    },
+    distort: {
+      name: 'Distort',
+      description: 'Stretch the image to fill the display. Distorts the aspect ratio.',
+    },
+  }
+</script>
+
+<div class="flex flex-col gap-2">
+  <Label for="scale-mode-input">Scaling method</Label>
+  <Tooltip.Provider delayDuration={0} disableHoverableContent>
+    <ToggleGroup.Root
+      id="scale-mode-input"
+      type="single"
+      bind:value={
+        () => config.scaleMode,
+        v => {
+          if (v.length !== 0) config.scaleMode = v as ScaleMode
+        }
+      }
+    >
+      {#each Object.entries(scaleModes) as [mode, { name, description }]}
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            <ToggleGroup.Item value={mode}>{name}</ToggleGroup.Item>
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            {description}
+          </Tooltip.Content>
+        </Tooltip.Root>
+      {/each}
+    </ToggleGroup.Root>
+  </Tooltip.Provider>
+</div>
@@ -0,0 +1,95 @@
+<script lang="ts">
+  import IconRotate90DegreesCw from '~icons/material-symbols/rotate-90-degrees-cw'
+  import IconRotate90DegreesCcw from '~icons/material-symbols/rotate-90-degrees-ccw'
+  import IconFlipHorizontal from '~icons/mdi/flip-horizontal'
+  import IconFlipVertical from '~icons/mdi/flip-Vertical'
+
+  import { Button } from '$lib/components/ui/button'
+  import { Label } from '$lib/components/ui/label'
+  import * as Tooltip from '$lib/components/ui/tooltip'
+  import { getConversionConfig } from '$lib/contexts/config.svelte'
+
+  interface Props {
+    disabled?: boolean
+  }
+
+  const { disabled = false }: Props = $props()
+
+  const config = getConversionConfig()
+</script>
+
+<div class="flex flex-col gap-2">
+  <Label for="transform-controls">Transform</Label>
+
+  <div id="transform-controls">
+    <Tooltip.Provider delayDuration={0} disableHoverableContent>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <Button
+            {disabled}
+            size="icon"
+            variant="outline"
+            onclick={() => {
+              config.transform = config.transform.cw()
+            }}
+          >
+            <IconRotate90DegreesCw />
+          </Button>
+        </Tooltip.Trigger>
+
+        <Tooltip.Content>Rotate 90&deg; clockwise</Tooltip.Content>
+      </Tooltip.Root>
+
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <Button
+            {disabled}
+            size="icon"
+            variant="outline"
+            onclick={() => {
+              config.transform = config.transform.ccw()
+            }}
+          >
+            <IconRotate90DegreesCcw />
+          </Button>
+        </Tooltip.Trigger>
+
+        <Tooltip.Content>Rotate 90&deg; counter-clockwise</Tooltip.Content>
+      </Tooltip.Root>
+
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <Button
+            {disabled}
+            size="icon"
+            variant="outline"
+            onclick={() => {
+              config.transform = config.transform.h()
+            }}
+          >
+            <IconFlipHorizontal />
+          </Button>
+        </Tooltip.Trigger>
+
+        <Tooltip.Content>Flip horizontally</Tooltip.Content>
+      </Tooltip.Root>
+
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <Button
+            {disabled}
+            size="icon"
+            variant="outline"
+            onclick={() => {
+              config.transform = config.transform.v()
+            }}
+          >
+            <IconFlipVertical />
+          </Button>
+        </Tooltip.Trigger>
+
+        <Tooltip.Content>Flip vertically</Tooltip.Content>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  </div>
+</div>
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Input } from '$lib/components/ui/input'
+  import { getBitmapContext } from '$lib/contexts/bitmap.svelte'
+  import { toast } from 'svelte-sonner'
+
+  const bitmapCtx = getBitmapContext()
+
+  async function updateImageBitmap(fileList: FileList | null) {
+    if (fileList === null || fileList.length < 1) {
+      bitmapCtx.image = null
+      return
+    }
+
+    const imageFile = fileList[0]
+    try {
+      bitmapCtx.image = await createImageBitmap(imageFile)
+    } catch (e) {
+      toast.error(`Error loading image file: ${e}`)
+      bitmapCtx.image = null
+    }
+  }
+</script>
+
+<Input type="file" id="image-file" accept="image/*" onchange={e => updateImageBitmap(e.currentTarget.files)} />
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { Label } from '$lib/components/ui/label'
+  import { withCtx } from '$lib/image/transform'
+  import { getBitmapContext } from '$lib/contexts/bitmap.svelte'
+
+  let canvas2xEl: HTMLCanvasElement
+  let canvas1xEl: HTMLCanvasElement
+
+  const bitmapCtx = getBitmapContext()
+
+  function freshContext(el: HTMLCanvasElement) {
+    const ctx = el.getContext('2d')!
+    ctx.clearRect(0, 0, 200, 200)
+    return ctx
+  }
+
+  function drawQuantizedData(ctx: CanvasRenderingContext2D, data: number[]) {
+    withCtx(
+      ctx,
+      () => {
+        ctx.imageSmoothingEnabled = false
+      },
+      () => {
+        for (let y = 0; y < 200; y++) {
+          for (let x = 0; x < 200; x++) {
+            const color = data.at(y * 200 + x)
+            ctx.fillStyle = color === 0 ? '#ccc' : '#111'
+            ctx.fillRect(x, y, 1, 1)
+          }
+        }
+      },
+    )
+  }
+
+  $effect(() => {
+    const context2x = freshContext(canvas2xEl)
+    const context1x = freshContext(canvas1xEl)
+
+    if (bitmapCtx.rendered === null) return
+
+    drawQuantizedData(context2x, bitmapCtx.rendered)
+    drawQuantizedData(context1x, bitmapCtx.rendered)
+  })
+</script>
+
+<div class="flex gap-4 max-md:flex-col">
+  <div>
+    <div id="canvas-2x" class="bg-[#ccc] shadow-md rounded-2xl p-4 w-fit">
+      <canvas
+        class="border-[1px] p-[6px] border-[#888] w-[414px] h-[414px]"
+        style="image-rendering: pixelated"
+        bind:this={canvas2xEl}
+        height={200}
+        width={200}
+      ></canvas>
+    </div>
+    <Label for="canvas-2x">2x Preview</Label>
+  </div>
+
+  <div>
+    <div id="preview-1x" class="bg-[#ccc] shadow-md rounded-lg p-2 w-fit">
+      <canvas
+        class="border-[1px] p-[3px] border-[#888] w-[208px] h-[208px]"
+        style="image-rendering: pixelated"
+        bind:this={canvas1xEl}
+        height={200}
+        width={200}
+      ></canvas>
+    </div>
+    <Label for="canvas-1x">1x Preview</Label>
+  </div>
+</div>
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import PreviewCanvases from './PreviewCanvases.svelte'
+  import FileSelect from './FileSelect.svelte'
+</script>
+
+<section class="flex flex-col gap-4">
+  <h1 class="font-semibold text-xl/6">Choose an image</h1>
+  <FileSelect />
+  <PreviewCanvases />
+</section>
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button'
+  import { getBitmapContext } from '$lib/contexts/bitmap.svelte'
+  import { getDeviceContext } from '$lib/contexts/device.svelte'
+  import { toast } from 'svelte-sonner'
+
+  interface Props {
+    onprogress: (inPropgress: boolean) => void
+  }
+
+  const { onprogress }: Props = $props()
+
+  let inProgress = $state(false)
+
+  const deviceCtx = getDeviceContext()
+  const bitmapCtx = getBitmapContext()
+
+  let disabled = $derived(deviceCtx.device === null || bitmapCtx.rendered === null || inProgress)
+  let secondary = $derived(deviceCtx.device === null)
+
+  async function connectAndWrite() {
+    if (deviceCtx.device === null || bitmapCtx.rendered === null) return
+
+    if (!deviceCtx.device.opened) {
+      try {
+        await deviceCtx.device.open()
+      } catch (e) {
+        toast.error(`Unable to open device: ${e}`)
+        return
+      }
+    }
+
+    const buffer = new Uint8Array(5000)
+    for (let y = 0; y < 200; y++) {
+      for (let xStride = 0; xStride < 25; xStride++) {
+        let cell = 0x0
+        for (let xStroll = 0; xStroll < 8; xStroll++) {
+          const index = y * 200 + xStride * 8 + xStroll
+          cell |= bitmapCtx.rendered[index] << xStroll
+        }
+        buffer[y * 25 + xStride] = cell
+      }
+    }
+
+    inProgress = true
+
+    try {
+      await deviceCtx.device.sendReport(0, buffer)
+    } catch (e) {
+      toast.error(`Error writing to device: ${e}`)
+      return
+    } finally {
+      setTimeout(() => {
+        inProgress = false
+      }, 2000)
+    }
+
+    toast.success('Wrote pattern to device')
+  }
+
+  $effect(() => {
+    onprogress(inProgress)
+  })
+</script>
+
+<Button onclick={connectAndWrite} variant={secondary ? 'secondary' : 'default'} {disabled}>
+  Write pattern to device
+</Button>
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import IconHelp from '~icons/material-symbols/help'
+  import IconPending from '~icons/material-symbols/pending'
+  import IconArrowUploadProgress from '~icons/material-symbols/arrow-upload-progress'
+  import IconWarning from '~icons/material-symbols/warning'
+
+  import WriteButton from './WriteButton.svelte'
+  import { getDeviceContext } from '$lib/contexts/device.svelte'
+  import { getBitmapContext } from '$lib/contexts/bitmap.svelte'
+
+  const deviceCtx = getDeviceContext()
+  const bitmapCtx = getBitmapContext()
+
+  let inProgress = $state(false)
+</script>
+
+<section class="flex items-center gap-2 max-lg:flex-col max-lg:items-stretch">
+  <div class="grow">
+    <h1 class="font-semibold text-xl/8">Write pattern to device</h1>
+
+    <div class="text-sm">
+      {#if deviceCtx.device === null}
+        <IconHelp class="inline" /> To start writing patterns to your device, connect it first.
+      {:else if bitmapCtx.image === null}
+        <IconPending class="inline" /> Select an image file in order to write it onto your device.
+      {:else if !inProgress}
+        <IconArrowUploadProgress class="inline" /> Write the pattern onto your device if you have finished editing the image.
+      {:else}
+        <IconWarning class="inline" /> Refresh in progress. Do not disconnect device.
+      {/if}
+    </div>
+  </div>
+
+  <WriteButton
+    onprogress={v => {
+      inProgress = v
+    }}
+  />
+</section>
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'

 export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }
@@ -0,0 +1,15 @@
+export interface ReactiveMediaQuery {
+  readonly matches: boolean
+}
+
+export function createMediaQuery(query: string): ReactiveMediaQuery {
+  const queryList = matchMedia(query)
+
+  const queryState = $state({ matches: queryList.matches })
+
+  queryList.addEventListener('change', self => {
+    queryState.matches = self.matches
+  })
+
+  return queryState
+}
@@ -0,0 +1,50 @@
+export type DitheringKernel =
+  | 'FloydSteinberg'
+  | 'FalseFloydSteinberg'
+  | 'Stucki'
+  | 'Atkinson'
+  | 'Jarvis'
+  | 'Burkes'
+  | 'Sierra'
+  | 'TwoSierra'
+  | 'SierraLite'
+
+export type Rgb = [number, number, number]
+
+export type RgbQuantOptions = {
+  colors?: number
+  method?: 1 | 2
+  boxSize?: [number, number]
+  boxPxls?: number
+  initColors?: number
+  minHueCols?: number
+  dithKern?: DitheringKernel | null
+  dithDelta?: number
+  dithSerp?: boolean
+  palette?: Rgb[]
+  reIndex?: boolean
+  useCache?: boolean
+  cacheFreq?: number
+  colorDist?: 'euclidean' | 'manhattan'
+}
+
+export type RgbQuantImage =
+  | HTMLImageElement
+  | HTMLCanvasElement
+  | CanvasRenderingContext2D
+  | OffscreenCanvasRenderingContext2D
+  | ImageData
+  | Uint8Array
+  | Uint8ClampedArray
+  | Uint32Array
+  | number[]
+
+export default class RgbQuant {
+  constructor(opts?: RgbQuantOptions)
+  sample(image: RgbQuantImage, width?: number): void
+  palette(tuples: true, noSort?: boolean = false): Rgb[]
+  palette(tuples: false, noSort?: boolean = false): Uint8Array
+  palette(): Uint8Array
+  reduce(image: RgbQuantImage, retType: 1, dithKern?: DitheringKernel | null, dithSerp?: boolean): Uint8Array
+  reduce(image: RgbQuantImage, retType: 2, dithKern?: DitheringKernel | null, dithSerp?: boolean): number[]
+}
@@ -0,0 +1,918 @@
+/*
+ * Copyright (c) 2015, Leon Sorokin
+ * All rights reserved. (MIT Licensed)
+ *
+ * RgbQuant.js - an image quantization lib
+ */
+
+function RgbQuant(opts) {
+  opts = opts || {}
+
+  // 1 = by global population, 2 = subregion population threshold
+  this.method = opts.method || 2
+  // desired final palette size
+  this.colors = opts.colors || 256
+  // # of highest-frequency colors to start with for palette reduction
+  this.initColors = opts.initColors || 4096
+  // color-distance threshold for initial reduction pass
+  this.initDist = opts.initDist || 0.01
+  // subsequent passes threshold
+  this.distIncr = opts.distIncr || 0.005
+  // palette grouping
+  this.hueGroups = opts.hueGroups || 10
+  this.satGroups = opts.satGroups || 10
+  this.lumGroups = opts.lumGroups || 10
+  // if > 0, enables hues stats and min-color retention per group
+  this.minHueCols = opts.minHueCols || 0
+  // HueStats instance
+  this.hueStats = this.minHueCols ? new HueStats(this.hueGroups, this.minHueCols) : null
+
+  // subregion partitioning box size
+  this.boxSize = opts.boxSize || [64, 64]
+  // number of same pixels required within box for histogram inclusion
+  this.boxPxls = opts.boxPxls || 2
+  // palette locked indicator
+  this.palLocked = false
+  // palette sort order
+  //		this.sortPal = ['hue-','lum-','sat-'];
+
+  // dithering/error diffusion kernel name
+  this.dithKern = opts.dithKern || null
+  // dither serpentine pattern
+  this.dithSerp = opts.dithSerp || false
+  // minimum color difference (0-1) needed to dither
+  this.dithDelta = opts.dithDelta || 0
+
+  // accumulated histogram
+  this.histogram = {}
+  // palette - rgb triplets
+  this.idxrgb = opts.palette ? opts.palette.slice(0) : []
+  // palette - int32 vals
+  this.idxi32 = []
+  // reverse lookup {i32:idx}
+  this.i32idx = {}
+  // {i32:rgb}
+  this.i32rgb = {}
+  // enable color caching (also incurs overhead of cache misses and cache building)
+  this.useCache = opts.useCache !== false
+  // min color occurance count needed to qualify for caching
+  this.cacheFreq = opts.cacheFreq || 10
+  // allows pre-defined palettes to be re-indexed (enabling palette compacting and sorting)
+  this.reIndex = opts.reIndex || this.idxrgb.length == 0
+  // selection of color-distance equation
+  this.colorDist = opts.colorDist == 'manhattan' ? distManhattan : distEuclidean
+
+  // if pre-defined palette, build lookups
+  if (this.idxrgb.length > 0) {
+    var self = this
+    this.idxrgb.forEach(function (rgb, i) {
+      var i32 =
+        ((255 << 24) | // alpha
+          (rgb[2] << 16) | // blue
+          (rgb[1] << 8) | // green
+          rgb[0]) >>> // red
+        0
+
+      self.idxi32[i] = i32
+      self.i32idx[i32] = i
+      self.i32rgb[i32] = rgb
+    })
+  }
+}
+
+// gathers histogram info
+RgbQuant.prototype.sample = function sample(img, width) {
+  if (this.palLocked) throw 'Cannot sample additional images, palette already assembled.'
+
+  var data = getImageData(img, width)
+
+  switch (this.method) {
+    case 1:
+      this.colorStats1D(data.buf32)
+      break
+    case 2:
+      this.colorStats2D(data.buf32, data.width)
+      break
+  }
+}
+
+// image quantizer
+// todo: memoize colors here also
+// @retType: 1 - Uint8Array (default), 2 - Indexed array, 3 - Match @img type (unimplemented, todo)
+RgbQuant.prototype.reduce = function reduce(img, retType, dithKern, dithSerp) {
+  if (!this.palLocked) this.buildPal()
+
+  dithKern = dithKern || this.dithKern
+  dithSerp = typeof dithSerp != 'undefined' ? dithSerp : this.dithSerp
+
+  retType = retType || 1
+
+  // reduce w/dither
+  if (dithKern) var out32 = this.dither(img, dithKern, dithSerp)
+  else {
+    var data = getImageData(img),
+      buf32 = data.buf32,
+      len = buf32.length,
+      out32 = new Uint32Array(len)
+
+    for (var i = 0; i < len; i++) {
+      var i32 = buf32[i]
+      out32[i] = this.nearestColor(i32)
+    }
+  }
+
+  if (retType == 1) return new Uint8Array(out32.buffer)
+
+  if (retType == 2) {
+    var out = [],
+      len = out32.length
+
+    for (var i = 0; i < len; i++) {
+      var i32 = out32[i]
+      out[i] = this.i32idx[i32]
+    }
+
+    return out
+  }
+}
+
+// adapted from http://jsbin.com/iXofIji/2/edit by PAEz
+RgbQuant.prototype.dither = function (img, kernel, serpentine) {
+  // http://www.tannerhelland.com/4660/dithering-eleven-algorithms-source-code/
+  var kernels = {
+    FloydSteinberg: [
+      [7 / 16, 1, 0],
+      [3 / 16, -1, 1],
+      [5 / 16, 0, 1],
+      [1 / 16, 1, 1],
+    ],
+    FalseFloydSteinberg: [
+      [3 / 8, 1, 0],
+      [3 / 8, 0, 1],
+      [2 / 8, 1, 1],
+    ],
+    Stucki: [
+      [8 / 42, 1, 0],
+      [4 / 42, 2, 0],
+      [2 / 42, -2, 1],
+      [4 / 42, -1, 1],
+      [8 / 42, 0, 1],
+      [4 / 42, 1, 1],
+      [2 / 42, 2, 1],
+      [1 / 42, -2, 2],
+      [2 / 42, -1, 2],
+      [4 / 42, 0, 2],
+      [2 / 42, 1, 2],
+      [1 / 42, 2, 2],
+    ],
+    Atkinson: [
+      [1 / 8, 1, 0],
+      [1 / 8, 2, 0],
+      [1 / 8, -1, 1],
+      [1 / 8, 0, 1],
+      [1 / 8, 1, 1],
+      [1 / 8, 0, 2],
+    ],
+    Jarvis: [
+      // Jarvis, Judice, and Ninke / JJN?
+      [7 / 48, 1, 0],
+      [5 / 48, 2, 0],
+      [3 / 48, -2, 1],
+      [5 / 48, -1, 1],
+      [7 / 48, 0, 1],
+      [5 / 48, 1, 1],
+      [3 / 48, 2, 1],
+      [1 / 48, -2, 2],
+      [3 / 48, -1, 2],
+      [5 / 48, 0, 2],
+      [3 / 48, 1, 2],
+      [1 / 48, 2, 2],
+    ],
+    Burkes: [
+      [8 / 32, 1, 0],
+      [4 / 32, 2, 0],
+      [2 / 32, -2, 1],
+      [4 / 32, -1, 1],
+      [8 / 32, 0, 1],
+      [4 / 32, 1, 1],
+      [2 / 32, 2, 1],
+    ],
+    Sierra: [
+      [5 / 32, 1, 0],
+      [3 / 32, 2, 0],
+      [2 / 32, -2, 1],
+      [4 / 32, -1, 1],
+      [5 / 32, 0, 1],
+      [4 / 32, 1, 1],
+      [2 / 32, 2, 1],
+      [2 / 32, -1, 2],
+      [3 / 32, 0, 2],
+      [2 / 32, 1, 2],
+    ],
+    TwoSierra: [
+      [4 / 16, 1, 0],
+      [3 / 16, 2, 0],
+      [1 / 16, -2, 1],
+      [2 / 16, -1, 1],
+      [3 / 16, 0, 1],
+      [2 / 16, 1, 1],
+      [1 / 16, 2, 1],
+    ],
+    SierraLite: [
+      [2 / 4, 1, 0],
+      [1 / 4, -1, 1],
+      [1 / 4, 0, 1],
+    ],
+  }
+
+  if (!kernel || !kernels[kernel]) {
+    throw 'Unknown dithering kernel: ' + kernel
+  }
+
+  var ds = kernels[kernel]
+
+  var data = getImageData(img),
+    //			buf8 = data.buf8,
+    buf32 = data.buf32,
+    width = data.width,
+    height = data.height,
+    len = buf32.length
+
+  var dir = serpentine ? -1 : 1
+
+  for (var y = 0; y < height; y++) {
+    if (serpentine) dir = dir * -1
+
+    var lni = y * width
+
+    for (var x = dir == 1 ? 0 : width - 1, xend = dir == 1 ? width : 0; x !== xend; x += dir) {
+      // Image pixel
+      var idx = lni + x,
+        i32 = buf32[idx],
+        r1 = i32 & 0xff,
+        g1 = (i32 & 0xff00) >> 8,
+        b1 = (i32 & 0xff0000) >> 16
+
+      // Reduced pixel
+      var i32x = this.nearestColor(i32),
+        r2 = i32x & 0xff,
+        g2 = (i32x & 0xff00) >> 8,
+        b2 = (i32x & 0xff0000) >> 16
+
+      buf32[idx] =
+        (255 << 24) | // alpha
+        (b2 << 16) | // blue
+        (g2 << 8) | // green
+        r2
+
+      // dithering strength
+      if (this.dithDelta) {
+        var dist = this.colorDist([r1, g1, b1], [r2, g2, b2])
+        if (dist < this.dithDelta) continue
+      }
+
+      // Component distance
+      var er = r1 - r2,
+        eg = g1 - g2,
+        eb = b1 - b2
+
+      for (var i = dir == 1 ? 0 : ds.length - 1, end = dir == 1 ? ds.length : 0; i !== end; i += dir) {
+        var x1 = ds[i][1] * dir,
+          y1 = ds[i][2]
+
+        var lni2 = y1 * width
+
+        if (x1 + x >= 0 && x1 + x < width && y1 + y >= 0 && y1 + y < height) {
+          var d = ds[i][0]
+          var idx2 = idx + (lni2 + x1)
+
+          var r3 = buf32[idx2] & 0xff,
+            g3 = (buf32[idx2] & 0xff00) >> 8,
+            b3 = (buf32[idx2] & 0xff0000) >> 16
+
+          var r4 = Math.max(0, Math.min(255, r3 + er * d)),
+            g4 = Math.max(0, Math.min(255, g3 + eg * d)),
+            b4 = Math.max(0, Math.min(255, b3 + eb * d))
+
+          buf32[idx2] =
+            (255 << 24) | // alpha
+            (b4 << 16) | // blue
+            (g4 << 8) | // green
+            r4 // red
+        }
+      }
+    }
+  }
+
+  return buf32
+}
+
+// reduces histogram to palette, remaps & memoizes reduced colors
+RgbQuant.prototype.buildPal = function buildPal(noSort) {
+  if (this.palLocked || (this.idxrgb.length > 0 && this.idxrgb.length <= this.colors)) return
+
+  var histG = this.histogram,
+    sorted = sortedHashKeys(histG, true)
+
+  if (sorted.length == 0) throw 'Nothing has been sampled, palette cannot be built.'
+
+  switch (this.method) {
+    case 1:
+      var cols = this.initColors,
+        last = sorted[cols - 1],
+        freq = histG[last]
+
+      var idxi32 = sorted.slice(0, cols)
+
+      // add any cut off colors with same freq as last
+      var pos = cols,
+        len = sorted.length
+      while (pos < len && histG[sorted[pos]] == freq) idxi32.push(sorted[pos++])
+
+      // inject min huegroup colors
+      if (this.hueStats) this.hueStats.inject(idxi32)
+
+      break
+    case 2:
+      var idxi32 = sorted
+      break
+  }
+
+  // int32-ify values
+  idxi32 = idxi32.map(function (v) {
+    return +v
+  })
+
+  this.reducePal(idxi32)
+
+  if (!noSort && this.reIndex) this.sortPal()
+
+  // build cache of top histogram colors
+  if (this.useCache) this.cacheHistogram(idxi32)
+
+  this.palLocked = true
+}
+
+RgbQuant.prototype.palette = function palette(tuples, noSort) {
+  this.buildPal(noSort)
+  return tuples ? this.idxrgb : new Uint8Array(new Uint32Array(this.idxi32).buffer)
+}
+
+RgbQuant.prototype.prunePal = function prunePal(keep) {
+  var i32
+
+  for (var j = 0; j < this.idxrgb.length; j++) {
+    if (!keep[j]) {
+      i32 = this.idxi32[j]
+      this.idxrgb[j] = null
+      this.idxi32[j] = null
+      delete this.i32idx[i32]
+    }
+  }
+
+  // compact
+  if (this.reIndex) {
+    var idxrgb = [],
+      idxi32 = [],
+      i32idx = {}
+
+    for (var j = 0, i = 0; j < this.idxrgb.length; j++) {
+      if (this.idxrgb[j]) {
+        i32 = this.idxi32[j]
+        idxrgb[i] = this.idxrgb[j]
+        i32idx[i32] = i
+        idxi32[i] = i32
+        i++
+      }
+    }
+
+    this.idxrgb = idxrgb
+    this.idxi32 = idxi32
+    this.i32idx = i32idx
+  }
+}
+
+// reduces similar colors from an importance-sorted Uint32 rgba array
+RgbQuant.prototype.reducePal = function reducePal(idxi32) {
+  // if pre-defined palette's length exceeds target
+  if (this.idxrgb.length > this.colors) {
+    // quantize histogram to existing palette
+    var len = idxi32.length,
+      keep = {},
+      uniques = 0,
+      idx,
+      pruned = false
+
+    for (var i = 0; i < len; i++) {
+      // palette length reached, unset all remaining colors (sparse palette)
+      if (uniques == this.colors && !pruned) {
+        this.prunePal(keep)
+        pruned = true
+      }
+
+      idx = this.nearestIndex(idxi32[i])
+
+      if (uniques < this.colors && !keep[idx]) {
+        keep[idx] = true
+        uniques++
+      }
+    }
+
+    if (!pruned) {
+      this.prunePal(keep)
+      pruned = true
+    }
+  }
+  // reduce histogram to create initial palette
+  else {
+    // build full rgb palette
+    var idxrgb = idxi32.map(function (i32) {
+      return [i32 & 0xff, (i32 & 0xff00) >> 8, (i32 & 0xff0000) >> 16]
+    })
+
+    var len = idxrgb.length,
+      palLen = len,
+      thold = this.initDist
+
+    // palette already at or below desired length
+    if (palLen > this.colors) {
+      while (palLen > this.colors) {
+        var memDist = []
+
+        // iterate palette
+        for (var i = 0; i < len; i++) {
+          var pxi = idxrgb[i],
+            i32i = idxi32[i]
+          if (!pxi) continue
+
+          for (var j = i + 1; j < len; j++) {
+            var pxj = idxrgb[j],
+              i32j = idxi32[j]
+            if (!pxj) continue
+
+            var dist = this.colorDist(pxi, pxj)
+
+            if (dist < thold) {
+              // store index,rgb,dist
+              memDist.push([j, pxj, i32j, dist])
+
+              // kill squashed value
+              delete idxrgb[j]
+              palLen--
+            }
+          }
+        }
+
+        // palette reduction pass
+        // console.log("palette length: " + palLen);
+
+        // if palette is still much larger than target, increment by larger initDist
+        thold += palLen > this.colors * 3 ? this.initDist : this.distIncr
+      }
+
+      // if palette is over-reduced, re-add removed colors with largest distances from last round
+      if (palLen < this.colors) {
+        // sort descending
+        sort.call(memDist, function (a, b) {
+          return b[3] - a[3]
+        })
+
+        var k = 0
+        while (palLen < this.colors) {
+          // re-inject rgb into final palette
+          idxrgb[memDist[k][0]] = memDist[k][1]
+
+          palLen++
+          k++
+        }
+      }
+    }
+
+    var len = idxrgb.length
+    for (var i = 0; i < len; i++) {
+      if (!idxrgb[i]) continue
+
+      this.idxrgb.push(idxrgb[i])
+      this.idxi32.push(idxi32[i])
+
+      this.i32idx[idxi32[i]] = this.idxi32.length - 1
+      this.i32rgb[idxi32[i]] = idxrgb[i]
+    }
+  }
+}
+
+// global top-population
+RgbQuant.prototype.colorStats1D = function colorStats1D(buf32) {
+  var histG = this.histogram,
+    num = 0,
+    col,
+    len = buf32.length
+
+  for (var i = 0; i < len; i++) {
+    col = buf32[i]
+
+    // skip transparent
+    if ((col & 0xff000000) >> 24 == 0) continue
+
+    // collect hue stats
+    if (this.hueStats) this.hueStats.check(col)
+
+    if (col in histG) histG[col]++
+    else histG[col] = 1
+  }
+}
+
+// population threshold within subregions
+// FIXME: this can over-reduce (few/no colors same?), need a way to keep
+// important colors that dont ever reach local thresholds (gradients?)
+RgbQuant.prototype.colorStats2D = function colorStats2D(buf32, width) {
+  var boxW = this.boxSize[0],
+    boxH = this.boxSize[1],
+    area = boxW * boxH,
+    boxes = makeBoxes(width, buf32.length / width, boxW, boxH),
+    histG = this.histogram,
+    self = this
+
+  boxes.forEach(function (box) {
+    var effc = Math.max(Math.round((box.w * box.h) / area) * self.boxPxls, 2),
+      histL = {},
+      col
+
+    iterBox(box, width, function (i) {
+      col = buf32[i]
+
+      // skip transparent
+      if ((col & 0xff000000) >> 24 == 0) return
+
+      // collect hue stats
+      if (self.hueStats) self.hueStats.check(col)
+
+      if (col in histG) histG[col]++
+      else if (col in histL) {
+        if (++histL[col] >= effc) histG[col] = histL[col]
+      } else histL[col] = 1
+    })
+  })
+
+  if (this.hueStats) this.hueStats.inject(histG)
+}
+
+// TODO: group very low lum and very high lum colors
+// TODO: pass custom sort order
+RgbQuant.prototype.sortPal = function sortPal() {
+  var self = this
+
+  this.idxi32.sort(function (a, b) {
+    var idxA = self.i32idx[a],
+      idxB = self.i32idx[b],
+      rgbA = self.idxrgb[idxA],
+      rgbB = self.idxrgb[idxB]
+
+    var hslA = rgb2hsl(rgbA[0], rgbA[1], rgbA[2]),
+      hslB = rgb2hsl(rgbB[0], rgbB[1], rgbB[2])
+
+    // sort all grays + whites together
+    var hueA = rgbA[0] == rgbA[1] && rgbA[1] == rgbA[2] ? -1 : hueGroup(hslA.h, self.hueGroups)
+    var hueB = rgbB[0] == rgbB[1] && rgbB[1] == rgbB[2] ? -1 : hueGroup(hslB.h, self.hueGroups)
+
+    var hueDiff = hueB - hueA
+    if (hueDiff) return -hueDiff
+
+    var lumDiff = lumGroup(+hslB.l.toFixed(2)) - lumGroup(+hslA.l.toFixed(2))
+    if (lumDiff) return -lumDiff
+
+    var satDiff = satGroup(+hslB.s.toFixed(2)) - satGroup(+hslA.s.toFixed(2))
+    if (satDiff) return -satDiff
+  })
+
+  // sync idxrgb & i32idx
+  this.idxi32.forEach(function (i32, i) {
+    self.idxrgb[i] = self.i32rgb[i32]
+    self.i32idx[i32] = i
+  })
+}
+
+// TOTRY: use HUSL - http://boronine.com/husl/
+RgbQuant.prototype.nearestColor = function nearestColor(i32) {
+  var idx = this.nearestIndex(i32)
+  return idx === null ? 0 : this.idxi32[idx]
+}
+
+// TOTRY: use HUSL - http://boronine.com/husl/
+RgbQuant.prototype.nearestIndex = function nearestIndex(i32) {
+  // alpha 0 returns null index
+  if ((i32 & 0xff000000) >> 24 == 0) return null
+
+  if (this.useCache && '' + i32 in this.i32idx) return this.i32idx[i32]
+
+  var min = 1000,
+    idx,
+    rgb = [i32 & 0xff, (i32 & 0xff00) >> 8, (i32 & 0xff0000) >> 16],
+    len = this.idxrgb.length
+
+  for (var i = 0; i < len; i++) {
+    if (!this.idxrgb[i]) continue // sparse palettes
+
+    var dist = this.colorDist(rgb, this.idxrgb[i])
+
+    if (dist < min) {
+      min = dist
+      idx = i
+    }
+  }
+
+  return idx
+}
+
+RgbQuant.prototype.cacheHistogram = function cacheHistogram(idxi32) {
+  for (var i = 0, i32 = idxi32[i]; i < idxi32.length && this.histogram[i32] >= this.cacheFreq; i32 = idxi32[i++])
+    this.i32idx[i32] = this.nearestIndex(i32)
+}
+
+function HueStats(numGroups, minCols) {
+  this.numGroups = numGroups
+  this.minCols = minCols
+  this.stats = {}
+
+  for (var i = -1; i < numGroups; i++) this.stats[i] = { num: 0, cols: [] }
+
+  this.groupsFull = 0
+}
+
+HueStats.prototype.check = function checkHue(i32) {
+  if (this.groupsFull == this.numGroups + 1)
+    this.check = function () {
+      return
+    }
+
+  var r = i32 & 0xff,
+    g = (i32 & 0xff00) >> 8,
+    b = (i32 & 0xff0000) >> 16,
+    hg = r == g && g == b ? -1 : hueGroup(rgb2hsl(r, g, b).h, this.numGroups),
+    gr = this.stats[hg],
+    min = this.minCols
+
+  gr.num++
+
+  if (gr.num > min) return
+  if (gr.num == min) this.groupsFull++
+
+  if (gr.num <= min) this.stats[hg].cols.push(i32)
+}
+
+HueStats.prototype.inject = function injectHues(histG) {
+  for (var i = -1; i < this.numGroups; i++) {
+    if (this.stats[i].num <= this.minCols) {
+      switch (typeOf(histG)) {
+        case 'Array':
+          this.stats[i].cols.forEach(function (col) {
+            if (histG.indexOf(col) == -1) histG.push(col)
+          })
+          break
+        case 'Object':
+          this.stats[i].cols.forEach(function (col) {
+            if (!histG[col]) histG[col] = 1
+            else histG[col]++
+          })
+          break
+      }
+    }
+  }
+}
+
+// Rec. 709 (sRGB) luma coef
+var Pr = 0.2126,
+  Pg = 0.7152,
+  Pb = 0.0722
+
+// http://alienryderflex.com/hsp.html
+function rgb2lum(r, g, b) {
+  return Math.sqrt(Pr * r * r + Pg * g * g + Pb * b * b)
+}
+
+var rd = 255,
+  gd = 255,
+  bd = 255
+
+var euclMax = Math.sqrt(Pr * rd * rd + Pg * gd * gd + Pb * bd * bd)
+// perceptual Euclidean color distance
+function distEuclidean(rgb0, rgb1) {
+  var rd = rgb1[0] - rgb0[0],
+    gd = rgb1[1] - rgb0[1],
+    bd = rgb1[2] - rgb0[2]
+
+  return Math.sqrt(Pr * rd * rd + Pg * gd * gd + Pb * bd * bd) / euclMax
+}
+
+var manhMax = Pr * rd + Pg * gd + Pb * bd
+// perceptual Manhattan color distance
+function distManhattan(rgb0, rgb1) {
+  var rd = Math.abs(rgb1[0] - rgb0[0]),
+    gd = Math.abs(rgb1[1] - rgb0[1]),
+    bd = Math.abs(rgb1[2] - rgb0[2])
+
+  return (Pr * rd + Pg * gd + Pb * bd) / manhMax
+}
+
+// http://rgb2hsl.nichabi.com/javascript-function.php
+function rgb2hsl(r, g, b) {
+  var max, min, h, s, l, d
+  r /= 255
+  g /= 255
+  b /= 255
+  max = Math.max(r, g, b)
+  min = Math.min(r, g, b)
+  l = (max + min) / 2
+  if (max == min) {
+    h = s = 0
+  } else {
+    d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0)
+        break
+      case g:
+        h = (b - r) / d + 2
+        break
+      case b:
+        h = (r - g) / d + 4
+        break
+    }
+    h /= 6
+  }
+  //		h = Math.floor(h * 360)
+  //		s = Math.floor(s * 100)
+  //		l = Math.floor(l * 100)
+  return {
+    h: h,
+    s: s,
+    l: rgb2lum(r, g, b),
+  }
+}
+
+function hueGroup(hue, segs) {
+  var seg = 1 / segs,
+    haf = seg / 2
+
+  if (hue >= 1 - haf || hue <= haf) return 0
+
+  for (var i = 1; i < segs; i++) {
+    var mid = i * seg
+    if (hue >= mid - haf && hue <= mid + haf) return i
+  }
+}
+
+function satGroup(sat) {
+  return sat
+}
+
+function lumGroup(lum) {
+  return lum
+}
+
+function typeOf(val) {
+  return Object.prototype.toString.call(val).slice(8, -1)
+}
+
+var sort = isArrSortStable() ? Array.prototype.sort : stableSort
+
+// must be used via stableSort.call(arr, fn)
+function stableSort(fn) {
+  var type = typeOf(this[0])
+
+  if (type == 'Number' || type == 'String') {
+    var ord = {},
+      len = this.length,
+      val
+
+    for (var i = 0; i < len; i++) {
+      val = this[i]
+      if (ord[val] || ord[val] === 0) continue
+      ord[val] = i
+    }
+
+    return this.sort(function (a, b) {
+      return fn(a, b) || ord[a] - ord[b]
+    })
+  } else {
+    var ord = this.map(function (v) {
+      return v
+    })
+
+    return this.sort(function (a, b) {
+      return fn(a, b) || ord.indexOf(a) - ord.indexOf(b)
+    })
+  }
+}
+
+// test if js engine's Array#sort implementation is stable
+function isArrSortStable() {
+  var str = 'abcdefghijklmnopqrstuvwxyz'
+
+  return (
+    'xyzvwtursopqmnklhijfgdeabc' ==
+    str
+      .split('')
+      .sort(function (a, b) {
+        return ~~(str.indexOf(b) / 2.3) - ~~(str.indexOf(a) / 2.3)
+      })
+      .join('')
+  )
+}
+
+// returns uniform pixel data from various img
+// TODO?: if array is passed, createimagedata, createlement canvas? take a pxlen?
+function getImageData(img, width) {
+  var can, ctx, imgd, buf8, buf32, height
+
+  switch (typeOf(img)) {
+    case 'HTMLImageElement':
+      can = document.createElement('canvas')
+      can.width = img.naturalWidth
+      can.height = img.naturalHeight
+      ctx = can.getContext('2d')
+      ctx.drawImage(img, 0, 0)
+    case 'Canvas':
+    case 'HTMLCanvasElement':
+      can = can || img
+      ctx = ctx || can.getContext('2d')
+    case 'CanvasRenderingContext2D':
+    case 'OffscreenCanvasRenderingContext2D':
+      ctx = ctx || img
+      can = can || ctx.canvas
+      imgd = ctx.getImageData(0, 0, can.width, can.height)
+    case 'ImageData':
+      imgd = imgd || img
+      width = imgd.width
+      if (typeOf(imgd.data) == 'CanvasPixelArray') buf8 = new Uint8Array(imgd.data)
+      else buf8 = imgd.data
+    case 'Array':
+    case 'CanvasPixelArray':
+      buf8 = buf8 || new Uint8Array(img)
+    case 'Uint8Array':
+    case 'Uint8ClampedArray':
+      buf8 = buf8 || img
+      buf32 = new Uint32Array(buf8.buffer)
+    case 'Uint32Array':
+      buf32 = buf32 || img
+      buf8 = buf8 || new Uint8Array(buf32.buffer)
+      width = width || buf32.length
+      height = buf32.length / width
+  }
+
+  return {
+    can: can,
+    ctx: ctx,
+    imgd: imgd,
+    buf8: buf8,
+    buf32: buf32,
+    width: width,
+    height: height,
+  }
+}
+
+// partitions a rect of wid x hgt into
+// array of bboxes of w0 x h0 (or less)
+function makeBoxes(wid, hgt, w0, h0) {
+  var wnum = ~~(wid / w0),
+    wrem = wid % w0,
+    hnum = ~~(hgt / h0),
+    hrem = hgt % h0,
+    xend = wid - wrem,
+    yend = hgt - hrem
+
+  var bxs = []
+  for (var y = 0; y < hgt; y += h0)
+    for (var x = 0; x < wid; x += w0) bxs.push({ x: x, y: y, w: x == xend ? wrem : w0, h: y == yend ? hrem : h0 })
+
+  return bxs
+}
+
+// iterates @bbox within a parent rect of width @wid; calls @fn, passing index within parent
+function iterBox(bbox, wid, fn) {
+  var b = bbox,
+    i0 = b.y * wid + b.x,
+    i1 = (b.y + b.h - 1) * wid + (b.x + b.w - 1),
+    cnt = 0,
+    incr = wid - b.w + 1,
+    i = i0
+
+  do {
+    fn.call(this, i)
+    i += ++cnt % b.w == 0 ? incr : 1
+  } while (i <= i1)
+}
+
+// returns array of hash keys sorted by their values
+function sortedHashKeys(obj, desc) {
+  var keys = []
+
+  for (var key in obj) keys.push(key)
+
+  return sort.call(keys, function (a, b) {
+    return desc ? obj[b] - obj[a] : obj[a] - obj[b]
+  })
+}
+
+export default RgbQuant