palette-shader 0.4.0 → 0.6.0

package/README.md

@@ -69,6 +69,7 @@ All options are optional. The palette defaults to a random 20-colour set.
 | `position`       | `number`            | `0`                | 0–1 position along the chosen axis                                                        |
 | `invertZ`        | `boolean`           | `false`            | Flip the lightness/value axis                                                             |
 | `showRaw`        | `boolean`           | `false`            | Bypass nearest-colour matching (shows the raw colour space)                               |
+| `outlineWidth`   | `number`            | `0`                | Draw a transparent outline where palette regions meet. Width in physical pixels. `0` disables (no overhead). |
 
 ---
 
@@ -83,6 +84,7 @@ viz.colorModel = 'okhslPolar';
 viz.distanceMetric = 'deltaE2000';
 viz.invertZ = true;
 viz.showRaw = true;
+viz.outlineWidth = 2; // transparent border between regions, in physical pixels
 ```
 
 Additional read-only properties:
@@ -133,7 +135,7 @@ viz.removeColor('#a8dadc');
 
 ### `destroy()`
 
-Cancel the animation frame, release all WebGL resources (program, texture, buffer, VAO), and remove the canvas from the DOM.
+Cancel the animation frame, release all WebGL resources (programs, textures, framebuffer, buffer, VAO), and remove the canvas from the DOM.
 
 ---
 
@@ -217,6 +219,28 @@ document.querySelector('#slider').addEventListener('input', (e) => {
 });
 ```
 
+### Transparent outlines between regions
+
+`outlineWidth` draws a transparent gap where one palette colour's region meets another, revealing whatever is behind the canvas. Width is in physical pixels (i.e. it already accounts for `pixelRatio`).
+
+```js
+const viz = new PaletteViz({
+  palette,
+  outlineWidth: 2,
+  container: document.querySelector('#app'),
+});
+
+// change at runtime — no shader recompile while the value stays > 0
+viz.outlineWidth = 4;
+
+// set back to 0 to disable entirely (zero GPU overhead)
+viz.outlineWidth = 0;
+```
+
+Implemented as a two-pass render: pass 1 draws the colour regions into an offscreen framebuffer at the same cost as without outlines; pass 2 runs a tiny edge-detection shader that checks four neighbours via texture reads (no colour-space math). The result is that enabling outlines adds negligible overhead compared to the single-pass approach.
+
+When `outlineWidth` is `0` (the default) the framebuffer and outline program are never allocated.
+
 ### Utility exports
 
 ```js

package/dist/palette-shader.d.ts

@@ -14,7 +14,7 @@ export declare const paletteToTexture: (palette: ColorList) => Uint8Array;
 
 export declare class PaletteViz {
     #private;
-    constructor({ palette, width, height, pixelRatio, container, colorModel, distanceMetric, axis, position, invertZ, showRaw, }?: PaletteVizOptions);
+    constructor({ palette, width, height, pixelRatio, container, colorModel, distanceMetric, axis, position, invertZ, showRaw, outlineWidth, }?: PaletteVizOptions);
     get canvas(): HTMLCanvasElement;
     get width(): number;
     get height(): number;
@@ -38,6 +38,8 @@ export declare class PaletteViz {
     get invertZ(): boolean;
     set showRaw(value: boolean);
     get showRaw(): boolean;
+    set outlineWidth(value: number);
+    get outlineWidth(): number;
     static paletteToRGBA: (palette: ColorList) => Uint8Array;
     /** @deprecated use PaletteViz.paletteToRGBA */
     static paletteToTexture: (palette: ColorList) => Uint8Array;
@@ -55,6 +57,7 @@ declare type PaletteVizOptions = {
     position?: number;
     invertZ?: boolean;
     showRaw?: boolean;
+    outlineWidth?: number;
 };
 
 export declare const randomPalette: (size?: number) => ColorList;

package/dist/palette-shader.js

@@ -1,8 +1,8 @@
-const g = `// https://lygia.xyz/
+const v = `// https://lygia.xyz/
 float srgb2rgb(const in float v) {   return (v < 0.04045) ? v * 0.0773993808 : pow((v + 0.055) * 0.947867298578199, 2.4); }
 vec3 srgb2rgb(const in vec3 srgb) {  return vec3(srgb2rgb(srgb.r), srgb2rgb(srgb.g), srgb2rgb(srgb.b)); }
 vec4 srgb2rgb(const in vec4 srgb) {  return vec4(srgb2rgb(srgb.rgb), srgb.a); }
-`, C = `// Copyright(c) 2021 Björn Ottosson
+`, L = `// Copyright(c) 2021 Björn Ottosson
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy of
 // this softwareand associated documentation files(the "Software"), to deal in
@@ -654,14 +654,14 @@ vec3 srgb_to_okhsv(vec3 rgb)
 	float s = (S_0 + T_max) * C_v / ((T_max * S_0) + T_max * k * C_v);
 
 	return vec3 (h, s, v );
-}`, u = `vec3 hsl2rgb( in vec3 c ) {
+}`, T = `vec3 hsl2rgb( in vec3 c ) {
   vec3 rgb = clamp( abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 );
   return c.z + c.y * (rgb-0.5)*(1.0-abs(2.0*c.z-1.0));
-}`, v = `vec3 hsv2rgb(vec3 c) {
+}`, E = `vec3 hsv2rgb(vec3 c) {
   vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
   vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
   return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
-}`, L = `// slightly rearranged vector components so it matches with LCH
+}`, x = `// slightly rearranged vector components so it matches with LCH
 // M_PI and srgb_transfer_function are provided by oklab.frag.glsl (included before this file)
 vec3 lch2rgb(vec3 lch) {
     lch.y *= 0.34;
@@ -692,7 +692,7 @@ vec3 lch2rgb(vec3 lch) {
         srgb_transfer_function(rgb.b)
     );
 }
-`, x = `// Kotsarenko/Ramos weighted RGB distance.
+`, R = `// Kotsarenko/Ramos weighted RGB distance.
 // Operates on sRGB values directly (no linearisation needed).
 // Weights red and blue channels by the mean red value, which improves
 // perceptual uniformity compared to plain Euclidean RGB at minimal cost.
@@ -838,7 +838,7 @@ float deltaE2000(vec3 lab1, vec3 lab2) {
 
     return sqrt(dLn*dLn + dCn*dCn + dHn*dHn + RT * dCn * dHn);
 }
-`, T = `// DISTANCE_METRIC define: 0=rgb, 1=oklab, 2=deltaE76, 3=deltaE2000, 4=kotsarenkoRamos, 5=deltaE94
+`, S = `// DISTANCE_METRIC define: 0=rgb, 1=oklab, 2=deltaE76, 3=deltaE2000, 4=kotsarenkoRamos, 5=deltaE94
 vec3 closestColor(vec3 color, sampler2D paletteTexture) {
   int paletteSize = textureSize(paletteTexture, 0).x;
   float minDist = 1000000.0;
@@ -879,14 +879,14 @@ vec3 closestColor(vec3 color, sampler2D paletteTexture) {
 
   return closest;
 }
-`, k = `
+`, u = `
 precision highp float;
 layout(location = 0) in vec2 a_position;
 out vec2 vUv;
 void main() {
   vUv = a_position * 0.5 + 0.5;
   gl_Position = vec4(a_position, 0.0, 1.0);
-}`, S = `
+}`, k = `
 precision highp float;
 #define TWO_PI 6.28318530718
 in vec2 vUv;
@@ -894,13 +894,13 @@ out vec4 fragColor;
 uniform float progress;
 uniform sampler2D paletteTexture;
 
-${g}
-${C}
-${u}
 ${v}
 ${L}
-${x}
 ${T}
+${E}
+${x}
+${R}
+${S}
 
 // COLOR_MODEL: 0=rgb, 1=oklab, 2=okhsv, 3=okhsvPolar, 4=okhsl, 5=okhslPolar,
 //              6=oklch, 7=oklchPolar, 8=hsv, 9=hsvPolar, 10=hsl, 11=hslPolar
@@ -960,14 +960,38 @@ void main(){
   #else
     fragColor = vec4(closestColor(rgb, paletteTexture), 1.);
   #endif
+}`, y = `
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D colorMap;
+uniform float outlineWidth;
+uniform vec2 resolution;
+
+void main() {
+  vec4 center = texture(colorMap, vUv);
+  if (center.a == 0.0) { fragColor = vec4(0.0); return; }
+  vec2 px = outlineWidth / resolution;
+  vec4 n0 = texture(colorMap, vUv + vec2( px.x, 0.0));
+  vec4 n1 = texture(colorMap, vUv + vec2(-px.x, 0.0));
+  vec4 n2 = texture(colorMap, vUv + vec2(0.0,  px.y));
+  vec4 n3 = texture(colorMap, vUv + vec2(0.0, -px.y));
+  if ((n0.a > 0.0 && any(notEqual(n0.rgb, center.rgb))) ||
+      (n1.a > 0.0 && any(notEqual(n1.rgb, center.rgb))) ||
+      (n2.a > 0.0 && any(notEqual(n2.rgb, center.rgb))) ||
+      (n3.a > 0.0 && any(notEqual(n3.rgb, center.rgb)))) {
+    fragColor = vec4(0.0);
+    return;
+  }
+  fragColor = center;
 }`;
 let _ = null;
-function E(n) {
+function I(e) {
   if (!_) {
-    const a = document.createElement("canvas");
-    a.width = a.height = 1, _ = a.getContext("2d");
+    const n = document.createElement("canvas");
+    n.width = n.height = 1, _ = n.getContext("2d");
   }
-  _.fillStyle = "#000000", _.fillStyle = n;
+  _.fillStyle = "#000000", _.fillStyle = e;
   const t = _.fillStyle;
   if (t[0] === "#")
     return [
@@ -975,72 +999,73 @@ function E(n) {
       parseInt(t.slice(3, 5), 16) / 255,
       parseInt(t.slice(5, 7), 16) / 255
     ];
-  const e = t.match(/[\d.]+/g);
-  return [+e[0] / 255, +e[1] / 255, +e[2] / 255];
+  const a = t.match(/[\d.]+/g);
+  return [+a[0] / 255, +a[1] / 255, +a[2] / 255];
 }
-const d = (n) => {
-  const t = new Uint8Array(n.length * 4);
-  return n.forEach((e, a) => {
+const h = (e) => {
+  const t = new Uint8Array(e.length * 4);
+  return e.forEach((a, n) => {
     try {
-      const [r, f, i] = E(e);
-      t[a * 4 + 0] = Math.round(r * 255), t[a * 4 + 1] = Math.round(f * 255), t[a * 4 + 2] = Math.round(i * 255), t[a * 4 + 3] = 255;
+      const [r, f, i] = I(a);
+      t[n * 4 + 0] = Math.round(r * 255), t[n * 4 + 1] = Math.round(f * 255), t[n * 4 + 2] = Math.round(i * 255), t[n * 4 + 3] = 255;
     } catch {
-      console.error(`Invalid color: ${e}`);
+      console.error(`Invalid color: ${a}`);
     }
   }), t;
-}, I = d, R = (n = 20) => Array.from(
-  { length: n },
+}, A = h, O = (e = 20) => Array.from(
+  { length: e },
   () => `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
 );
-function p(n, t, e) {
-  const a = n.createShader(t);
-  if (n.shaderSource(a, e), n.compileShader(a), !n.getShaderParameter(a, n.COMPILE_STATUS)) {
-    const r = n.getShaderInfoLog(a);
-    throw n.deleteShader(a), new Error(`Shader compile error:
+function p(e, t, a) {
+  const n = e.createShader(t);
+  if (e.shaderSource(n, a), e.compileShader(n), !e.getShaderParameter(n, e.COMPILE_STATUS)) {
+    const r = e.getShaderInfoLog(n);
+    throw e.deleteShader(n), new Error(`Shader compile error:
 ${r}`);
   }
-  return a;
+  return n;
 }
-function y(n, t, e, a) {
+function m(e, t, a, n) {
   const f = `#version 300 es
-` + (Object.entries(t).filter(([, s]) => s !== !1).map(([s, h]) => `#define ${s} ${h}`).join(`
+` + (Object.entries(t).filter(([, s]) => s !== !1).map(([s, d]) => `#define ${s} ${d}`).join(`
 `) + `
-`), i = p(n, n.VERTEX_SHADER, f + a), b = p(n, n.FRAGMENT_SHADER, f + e), l = n.createProgram();
-  if (n.attachShader(l, i), n.attachShader(l, b), n.linkProgram(l), n.deleteShader(i), n.deleteShader(b), !n.getProgramParameter(l, n.LINK_STATUS)) {
-    const s = n.getProgramInfoLog(l);
-    throw n.deleteProgram(l), new Error(`Program link error:
+`), i = p(e, e.VERTEX_SHADER, f + n), b = p(e, e.FRAGMENT_SHADER, f + a), l = e.createProgram();
+  if (e.attachShader(l, i), e.attachShader(l, b), e.linkProgram(l), e.deleteShader(i), e.deleteShader(b), !e.getProgramParameter(l, e.LINK_STATUS)) {
+    const s = e.getProgramInfoLog(l);
+    throw e.deleteProgram(l), new Error(`Program link error:
 ${s}`);
   }
   return l;
 }
-function c(n, t, e) {
-  n.bindTexture(n.TEXTURE_2D, t), n.texImage2D(
-    n.TEXTURE_2D,
+function c(e, t, a) {
+  e.bindTexture(e.TEXTURE_2D, t), e.texImage2D(
+    e.TEXTURE_2D,
     0,
-    n.RGBA8,
-    e.length,
+    e.RGBA8,
+    a.length,
     1,
     0,
-    n.RGBA,
-    n.UNSIGNED_BYTE,
-    d(e)
-  ), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.NEAREST), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MAG_FILTER, n.NEAREST), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.CLAMP_TO_EDGE);
+    e.RGBA,
+    e.UNSIGNED_BYTE,
+    h(a)
+  ), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE);
 }
-class O {
+class w {
   #t = [];
-  #f = 512;
-  #i = 512;
-  #g = 1;
+  #b = 512;
+  #h = 512;
+  #L = 1;
   // shader state
-  #_ = 0;
-  #c = "y";
-  #b = "okhsv";
-  #d = "oklab";
-  #h = !1;
-  #p = !1;
+  #d = 0;
+  #u = "y";
+  #p = "okhsv";
+  #m = "oklab";
+  #g = !1;
+  #C = !1;
+  #i = 0;
   // uniform value maps
-  #u = { x: 0, y: 1, z: 2 };
-  #v = {
+  #E = { x: 0, y: 1, z: 2 };
+  #x = {
     rgb: 0,
     oklab: 1,
     okhsv: 2,
@@ -1054,7 +1079,7 @@ class O {
     hsl: 10,
     hslPolar: 11
   };
-  #L = {
+  #R = {
     rgb: 0,
     oklab: 1,
     deltaE76: 2,
@@ -1063,149 +1088,180 @@ class O {
     deltaE94: 5
   };
   // WebGL
-  #e;
+  #n;
   #a;
-  #r = null;
+  #f = null;
   #o = null;
-  #C = null;
-  #m = null;
-  #l = null;
-  // cached uniform locations (re-queried after each program rebuild)
-  #x = null;
   #T = null;
+  #v = null;
+  #_ = null;
+  // cached uniform locations (re-queried after each program rebuild)
+  #S = null;
+  #k = null;
+  // outline pass (created/destroyed when outlineWidth toggles between 0 and >0)
+  #r = null;
+  #l = null;
+  #s = null;
+  #y = null;
+  #I = null;
+  #O = null;
   // dom
-  #k;
+  #A;
   constructor({
-    palette: t = R(),
-    width: e = 512,
-    height: a = 512,
+    palette: t = O(),
+    width: a = 512,
+    height: n = 512,
     pixelRatio: r = window.devicePixelRatio,
     container: f,
     colorModel: i = "okhsv",
     distanceMetric: b = "oklab",
     axis: l = "y",
     position: s = 0,
-    invertZ: h = !1,
-    showRaw: m = !1
+    invertZ: d = !1,
+    showRaw: g = !1,
+    outlineWidth: C = 0
   } = {}) {
-    this.#t = t, this.#f = e, this.#i = a, this.#g = r, this.#b = i, this.#d = b, this.#c = l, this.#_ = s, this.#h = h, this.#p = m, this.#k = f, this.#e = document.createElement("canvas"), this.#e.classList.add("palette-viz");
-    const o = this.#e.getContext("webgl2");
+    this.#t = t, this.#b = a, this.#h = n, this.#L = r, this.#p = i, this.#m = b, this.#u = l, this.#d = s, this.#g = d, this.#C = g, this.#i = C, this.#A = f, this.#n = document.createElement("canvas"), this.#n.classList.add("palette-viz");
+    const o = this.#n.getContext("webgl2");
     if (!o) throw new Error("WebGL2 not supported");
-    this.#a = o, this.#C = o.createBuffer(), o.bindBuffer(o.ARRAY_BUFFER, this.#C), o.bufferData(o.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), o.STATIC_DRAW), this.#m = o.createVertexArray(), o.bindVertexArray(this.#m), o.enableVertexAttribArray(0), o.vertexAttribPointer(0, 2, o.FLOAT, !1, 0, 0), o.bindVertexArray(null), this.#o = o.createTexture(), c(o, this.#o, this.#t), this.#s(), this.#S(this.#f, this.#i), this.#k?.appendChild(this.#e), this.#n();
+    this.#a = o, this.#T = o.createBuffer(), o.bindBuffer(o.ARRAY_BUFFER, this.#T), o.bufferData(o.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), o.STATIC_DRAW), this.#v = o.createVertexArray(), o.bindVertexArray(this.#v), o.enableVertexAttribArray(0), o.vertexAttribPointer(0, 2, o.FLOAT, !1, 0, 0), o.bindVertexArray(null), this.#o = o.createTexture(), c(o, this.#o, this.#t), this.#c(), this.#D(this.#b, this.#h), this.#i > 0 && this.#w(), this.#A?.appendChild(this.#n), this.#e();
   }
-  #E() {
+  #z() {
     return {
-      DISTANCE_METRIC: this.#L[this.#d],
-      COLOR_MODEL: this.#v[this.#b],
-      PROGRESS_AXIS: this.#u[this.#c],
-      INVERT_Z: this.#h ? 1 : !1,
-      SHOW_RAW: this.#p ? 1 : !1
+      DISTANCE_METRIC: this.#R[this.#m],
+      COLOR_MODEL: this.#x[this.#p],
+      PROGRESS_AXIS: this.#E[this.#u],
+      INVERT_Z: this.#g ? 1 : !1,
+      SHOW_RAW: this.#C ? 1 : !1
     };
   }
-  #s() {
+  #c() {
     const t = this.#a;
-    this.#r && t.deleteProgram(this.#r), this.#r = y(t, this.#E(), S, k), this.#x = t.getUniformLocation(this.#r, "progress"), this.#T = t.getUniformLocation(this.#r, "paletteTexture");
+    this.#f && t.deleteProgram(this.#f), this.#f = m(t, this.#z(), k, u), this.#S = t.getUniformLocation(this.#f, "progress"), this.#k = t.getUniformLocation(this.#f, "paletteTexture");
   }
-  #S(t, e) {
-    const a = Math.round(t * this.#g), r = Math.round(e * this.#g);
-    this.#e.width = a, this.#e.height = r, this.#e.style.width = `${t}px`, this.#e.style.height = `${e}px`, this.#a.viewport(0, 0, a, r);
+  #w() {
+    const t = this.#a;
+    this.#s = m(t, {}, y, u), this.#y = t.getUniformLocation(this.#s, "colorMap"), this.#I = t.getUniformLocation(this.#s, "outlineWidth"), this.#O = t.getUniformLocation(this.#s, "resolution"), this.#l = t.createTexture(), this.#r = t.createFramebuffer(), this.#P(this.#n.width, this.#n.height);
   }
-  #n() {
-    this.#l !== null && cancelAnimationFrame(this.#l), this.#l = requestAnimationFrame(() => {
+  #M() {
+    const t = this.#a;
+    this.#s && (t.deleteProgram(this.#s), this.#s = null), this.#l && (t.deleteTexture(this.#l), this.#l = null), this.#r && (t.deleteFramebuffer(this.#r), this.#r = null);
+  }
+  #P(t, a) {
+    const n = this.#a;
+    n.bindTexture(n.TEXTURE_2D, this.#l), n.texImage2D(n.TEXTURE_2D, 0, n.RGBA8, t, a, 0, n.RGBA, n.UNSIGNED_BYTE, null), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.NEAREST), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MAG_FILTER, n.NEAREST), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.CLAMP_TO_EDGE), n.bindTexture(n.TEXTURE_2D, null), n.bindFramebuffer(n.FRAMEBUFFER, this.#r), n.framebufferTexture2D(n.FRAMEBUFFER, n.COLOR_ATTACHMENT0, n.TEXTURE_2D, this.#l, 0), n.bindFramebuffer(n.FRAMEBUFFER, null);
+  }
+  #D(t, a) {
+    const n = Math.round(t * this.#L), r = Math.round(a * this.#L);
+    this.#n.width = n, this.#n.height = r, this.#n.style.width = `${t}px`, this.#n.style.height = `${a}px`, this.#a.viewport(0, 0, n, r), this.#l && this.#P(n, r);
+  }
+  #e() {
+    this.#_ !== null && cancelAnimationFrame(this.#_), this.#_ = requestAnimationFrame(() => {
       const t = this.#a;
-      t.useProgram(this.#r), t.uniform1f(this.#x, this.#_), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.#o), t.uniform1i(this.#T, 0), t.bindVertexArray(this.#m), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.bindVertexArray(null);
+      if (this.#r && t.bindFramebuffer(t.FRAMEBUFFER, this.#r), t.useProgram(this.#f), t.uniform1f(this.#S, this.#d), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.#o), t.uniform1i(this.#k, 0), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.bindVertexArray(this.#v), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), !this.#r) {
+        t.bindVertexArray(null);
+        return;
+      }
+      t.bindFramebuffer(t.FRAMEBUFFER, null), t.useProgram(this.#s), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.#l), t.uniform1i(this.#y, 0), t.uniform1f(this.#I, this.#i), t.uniform2f(this.#O, this.#n.width, this.#n.height), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.bindVertexArray(null);
     });
   }
   // ── Public API ──────────────────────────────────────────────────────────────
   get canvas() {
-    return this.#e;
+    return this.#n;
   }
   get width() {
-    return this.#f;
+    return this.#b;
   }
   get height() {
-    return this.#i;
+    return this.#h;
   }
-  resize(t, e = null) {
-    this.#f = t, this.#i = e ?? t, this.#S(this.#f, this.#i), this.#n();
+  resize(t, a = null) {
+    this.#b = t, this.#h = a ?? t, this.#D(this.#b, this.#h), this.#e();
   }
   destroy() {
-    this.#l !== null && (cancelAnimationFrame(this.#l), this.#l = null);
+    this.#_ !== null && (cancelAnimationFrame(this.#_), this.#_ = null);
     const t = this.#a;
-    t.deleteProgram(this.#r), t.deleteTexture(this.#o), t.deleteBuffer(this.#C), t.deleteVertexArray(this.#m), this.#e.remove(), t.getExtension("WEBGL_lose_context")?.loseContext();
+    this.#M(), t.deleteProgram(this.#f), t.deleteTexture(this.#o), t.deleteBuffer(this.#T), t.deleteVertexArray(this.#v), this.#n.remove(), t.getExtension("WEBGL_lose_context")?.loseContext();
   }
   // ── Palette ─────────────────────────────────────────────────────────────────
   set palette(t) {
-    this.#t = t, c(this.#a, this.#o, t), this.#n();
+    this.#t = t, c(this.#a, this.#o, t), this.#e();
   }
   get palette() {
     return this.#t;
   }
-  setColor(t, e) {
-    if (e < 0 || e >= this.#t.length) throw new Error(`Index ${e} out of range`);
-    this.#t[e] = t, c(this.#a, this.#o, this.#t), this.#n();
+  setColor(t, a) {
+    if (a < 0 || a >= this.#t.length) throw new Error(`Index ${a} out of range`);
+    this.#t[a] = t, c(this.#a, this.#o, this.#t), this.#e();
   }
-  addColor(t, e) {
-    this.#t.splice(e ?? this.#t.length, 0, t), c(this.#a, this.#o, this.#t), this.#n();
+  addColor(t, a) {
+    this.#t.splice(a ?? this.#t.length, 0, t), c(this.#a, this.#o, this.#t), this.#e();
   }
   removeColor(t) {
-    const e = typeof t == "number" ? t : this.#t.indexOf(t);
-    if (e === -1) throw new Error("Color not found in palette");
-    if (e < 0 || e >= this.#t.length) throw new Error(`Index ${e} out of range`);
-    this.#t.splice(e, 1), c(this.#a, this.#o, this.#t), this.#n();
+    const a = typeof t == "number" ? t : this.#t.indexOf(t);
+    if (a === -1) throw new Error("Color not found in palette");
+    if (a < 0 || a >= this.#t.length) throw new Error(`Index ${a} out of range`);
+    this.#t.splice(a, 1), c(this.#a, this.#o, this.#t), this.#e();
   }
   // ── Shader properties ────────────────────────────────────────────────────────
   set position(t) {
-    this.#_ = t, this.#n();
+    this.#d = t, this.#e();
   }
   get position() {
-    return this.#_;
+    return this.#d;
   }
   set axis(t) {
-    if (!(t in this.#u)) throw new Error("axis must be 'x', 'y', or 'z'");
-    this.#c = t, this.#s(), this.#n();
+    if (!(t in this.#E)) throw new Error("axis must be 'x', 'y', or 'z'");
+    this.#u = t, this.#c(), this.#e();
   }
   get axis() {
-    return this.#c;
+    return this.#u;
   }
   set colorModel(t) {
-    if (!(t in this.#v)) throw new Error(`colorModel '${t}' is not supported`);
-    this.#b = t, this.#s(), this.#n();
+    if (!(t in this.#x)) throw new Error(`colorModel '${t}' is not supported`);
+    this.#p = t, this.#c(), this.#e();
   }
   get colorModel() {
-    return this.#b;
+    return this.#p;
   }
   set distanceMetric(t) {
-    if (!(t in this.#L))
+    if (!(t in this.#R))
       throw new Error(
         "distanceMetric must be 'rgb', 'oklab', 'deltaE76', 'deltaE94', 'deltaE2000', or 'kotsarenkoRamos'"
       );
-    this.#d = t, this.#s(), this.#n();
+    this.#m = t, this.#c(), this.#e();
   }
   get distanceMetric() {
-    return this.#d;
+    return this.#m;
   }
   set invertZ(t) {
-    this.#h = t, this.#s(), this.#n();
+    this.#g = t, this.#c(), this.#e();
   }
   get invertZ() {
-    return this.#h;
+    return this.#g;
   }
   set showRaw(t) {
-    this.#p = t, this.#s(), this.#n();
+    this.#C = t, this.#c(), this.#e();
   }
   get showRaw() {
-    return this.#p;
+    return this.#C;
+  }
+  set outlineWidth(t) {
+    const a = this.#i > 0;
+    this.#i = t, t > 0 !== a && (t > 0 ? this.#w() : this.#M()), this.#e();
+  }
+  get outlineWidth() {
+    return this.#i;
   }
-  static paletteToRGBA = d;
+  static paletteToRGBA = h;
   /** @deprecated use PaletteViz.paletteToRGBA */
-  static paletteToTexture = d;
+  static paletteToTexture = h;
 }
 export {
-  O as PaletteViz,
-  S as fragmentShader,
-  d as paletteToRGBA,
-  I as paletteToTexture,
-  R as randomPalette
+  w as PaletteViz,
+  k as fragmentShader,
+  h as paletteToRGBA,
+  A as paletteToTexture,
+  O as randomPalette
 };
 //# sourceMappingURL=palette-shader.js.map