@m3e/web 2.5.2 → 2.5.3

package/dist/theme.js

@@ -78,6 +78,19 @@ function clampDouble(min, max, input) {
   }
   return input;
 }
+/**
+ * Sanitizes a degree measure as an integer.
+ *
+ * @return a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+function sanitizeDegreesInt(degrees) {
+  degrees = degrees % 360;
+  if (degrees < 0) {
+    degrees = degrees + 360;
+  }
+  return degrees;
+}
 /**
  * Sanitizes a degree measure as a floating-point number.
  *
@@ -91,6 +104,12 @@ function sanitizeDegreesDouble(degrees) {
   }
   return degrees;
 }
+/**
+ * Distance of two points on a circle, represented using degrees.
+ */
+function differenceDegrees(a, b) {
+  return 180.0 - Math.abs(Math.abs(a - b) - 180.0);
+}
 /**
  * Multiplies a 1x3 row vector with a 3x3 matrix.
  */
@@ -142,6 +161,12 @@ function argbFromLinrgb(linrgb) {
   const b = delinearized(linrgb[2]);
   return argbFromRgb(r, g, b);
 }
+/**
+ * Returns the alpha component of a color in ARGB format.
+ */
+function alphaFromArgb(argb) {
+  return argb >> 24 & 255;
+}
 /**
  * Returns the red component of a color in ARGB format.
  */
@@ -182,6 +207,50 @@ function xyzFromArgb(argb) {
   const b = linearized(blueFromArgb(argb));
   return matrixMultiply([r, g, b], SRGB_TO_XYZ);
 }
+/**
+ * Converts a color represented in Lab color space into an ARGB
+ * integer.
+ */
+function argbFromLab(l, a, b) {
+  const whitePoint = WHITE_POINT_D65;
+  const fy = (l + 16.0) / 116.0;
+  const fx = a / 500.0 + fy;
+  const fz = fy - b / 200.0;
+  const xNormalized = labInvf(fx);
+  const yNormalized = labInvf(fy);
+  const zNormalized = labInvf(fz);
+  const x = xNormalized * whitePoint[0];
+  const y = yNormalized * whitePoint[1];
+  const z = zNormalized * whitePoint[2];
+  return argbFromXyz(x, y, z);
+}
+/**
+ * Converts a color from ARGB representation to L*a*b*
+ * representation.
+ *
+ * @param argb the ARGB representation of a color
+ * @return a Lab object representing the color
+ */
+function labFromArgb(argb) {
+  const linearR = linearized(redFromArgb(argb));
+  const linearG = linearized(greenFromArgb(argb));
+  const linearB = linearized(blueFromArgb(argb));
+  const matrix = SRGB_TO_XYZ;
+  const x = matrix[0][0] * linearR + matrix[0][1] * linearG + matrix[0][2] * linearB;
+  const y = matrix[1][0] * linearR + matrix[1][1] * linearG + matrix[1][2] * linearB;
+  const z = matrix[2][0] * linearR + matrix[2][1] * linearG + matrix[2][2] * linearB;
+  const whitePoint = WHITE_POINT_D65;
+  const xNormalized = x / whitePoint[0];
+  const yNormalized = y / whitePoint[1];
+  const zNormalized = z / whitePoint[2];
+  const fx = labF(xNormalized);
+  const fy = labF(yNormalized);
+  const fz = labF(zNormalized);
+  const l = 116.0 * fy - 16;
+  const a = 500.0 * (fx - fy);
+  const b = 200.0 * (fy - fz);
+  return [l, a, b];
+}
 /**
  * Converts an L* value to an ARGB representation.
  *
@@ -2889,6 +2958,712 @@ class CorePalette {
   }
 }
 
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Provides conversions needed for K-Means quantization. Converting input to
+ * points, and converting the final state of the K-Means algorithm to colors.
+ */
+class LabPointProvider {
+  /**
+   * Convert a color represented in ARGB to a 3-element array of L*a*b*
+   * coordinates of the color.
+   */
+  fromInt(argb) {
+    return labFromArgb(argb);
+  }
+  /**
+   * Convert a 3-element array to a color represented in ARGB.
+   */
+  toInt(point) {
+    return argbFromLab(point[0], point[1], point[2]);
+  }
+  /**
+   * Standard CIE 1976 delta E formula also takes the square root, unneeded
+   * here. This method is used by quantization algorithms to compare distance,
+   * and the relative ordering is the same, with or without a square root.
+   *
+   * This relatively minor optimization is helpful because this method is
+   * called at least once for each pixel in an image.
+   */
+  distance(from, to) {
+    const dL = from[0] - to[0];
+    const dA = from[1] - to[1];
+    const dB = from[2] - to[2];
+    return dL * dL + dA * dA + dB * dB;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const MAX_ITERATIONS = 10;
+const MIN_MOVEMENT_DISTANCE = 3.0;
+/**
+ * An image quantizer that improves on the speed of a standard K-Means algorithm
+ * by implementing several optimizations, including deduping identical pixels
+ * and a triangle inequality rule that reduces the number of comparisons needed
+ * to identify which cluster a point should be moved to.
+ *
+ * Wsmeans stands for Weighted Square Means.
+ *
+ * This algorithm was designed by M. Emre Celebi, and was found in their 2011
+ * paper, Improving the Performance of K-Means for Color Quantization.
+ * https://arxiv.org/abs/1101.0395
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable-next-line:class-as-namespace
+class QuantizerWsmeans {
+  /**
+   * @param inputPixels Colors in ARGB format.
+   * @param startingClusters Defines the initial state of the quantizer. Passing
+   *     an empty array is fine, the implementation will create its own initial
+   *     state that leads to reproducible results for the same inputs.
+   *     Passing an array that is the result of Wu quantization leads to higher
+   *     quality results.
+   * @param maxColors The number of colors to divide the image into. A lower
+   *     number of colors may be returned.
+   * @return Colors in ARGB format.
+   */
+  static quantize(inputPixels, startingClusters, maxColors) {
+    const pixelToCount = new Map();
+    const points = new Array();
+    const pixels = new Array();
+    const pointProvider = new LabPointProvider();
+    let pointCount = 0;
+    for (let i = 0; i < inputPixels.length; i++) {
+      const inputPixel = inputPixels[i];
+      const pixelCount = pixelToCount.get(inputPixel);
+      if (pixelCount === undefined) {
+        pointCount++;
+        points.push(pointProvider.fromInt(inputPixel));
+        pixels.push(inputPixel);
+        pixelToCount.set(inputPixel, 1);
+      } else {
+        pixelToCount.set(inputPixel, pixelCount + 1);
+      }
+    }
+    const counts = new Array();
+    for (let i = 0; i < pointCount; i++) {
+      const pixel = pixels[i];
+      const count = pixelToCount.get(pixel);
+      if (count !== undefined) {
+        counts[i] = count;
+      }
+    }
+    let clusterCount = Math.min(maxColors, pointCount);
+    if (startingClusters.length > 0) {
+      clusterCount = Math.min(clusterCount, startingClusters.length);
+    }
+    const clusters = new Array();
+    for (let i = 0; i < startingClusters.length; i++) {
+      clusters.push(pointProvider.fromInt(startingClusters[i]));
+    }
+    const additionalClustersNeeded = clusterCount - clusters.length;
+    if (startingClusters.length === 0 && additionalClustersNeeded > 0) {
+      for (let i = 0; i < additionalClustersNeeded; i++) {
+        const l = Math.random() * 100.0;
+        const a = Math.random() * (100.0 - -100 + 1) + -100;
+        const b = Math.random() * (100.0 - -100 + 1) + -100;
+        clusters.push(new Array(l, a, b));
+      }
+    }
+    const clusterIndices = new Array();
+    for (let i = 0; i < pointCount; i++) {
+      clusterIndices.push(Math.floor(Math.random() * clusterCount));
+    }
+    const indexMatrix = new Array();
+    for (let i = 0; i < clusterCount; i++) {
+      indexMatrix.push(new Array());
+      for (let j = 0; j < clusterCount; j++) {
+        indexMatrix[i].push(0);
+      }
+    }
+    const distanceToIndexMatrix = new Array();
+    for (let i = 0; i < clusterCount; i++) {
+      distanceToIndexMatrix.push(new Array());
+      for (let j = 0; j < clusterCount; j++) {
+        distanceToIndexMatrix[i].push(new DistanceAndIndex());
+      }
+    }
+    const pixelCountSums = new Array();
+    for (let i = 0; i < clusterCount; i++) {
+      pixelCountSums.push(0);
+    }
+    for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
+      for (let i = 0; i < clusterCount; i++) {
+        for (let j = i + 1; j < clusterCount; j++) {
+          const distance = pointProvider.distance(clusters[i], clusters[j]);
+          distanceToIndexMatrix[j][i].distance = distance;
+          distanceToIndexMatrix[j][i].index = i;
+          distanceToIndexMatrix[i][j].distance = distance;
+          distanceToIndexMatrix[i][j].index = j;
+        }
+        distanceToIndexMatrix[i].sort();
+        for (let j = 0; j < clusterCount; j++) {
+          indexMatrix[i][j] = distanceToIndexMatrix[i][j].index;
+        }
+      }
+      let pointsMoved = 0;
+      for (let i = 0; i < pointCount; i++) {
+        const point = points[i];
+        const previousClusterIndex = clusterIndices[i];
+        const previousCluster = clusters[previousClusterIndex];
+        const previousDistance = pointProvider.distance(point, previousCluster);
+        let minimumDistance = previousDistance;
+        let newClusterIndex = -1;
+        for (let j = 0; j < clusterCount; j++) {
+          if (distanceToIndexMatrix[previousClusterIndex][j].distance >= 4 * previousDistance) {
+            continue;
+          }
+          const distance = pointProvider.distance(point, clusters[j]);
+          if (distance < minimumDistance) {
+            minimumDistance = distance;
+            newClusterIndex = j;
+          }
+        }
+        if (newClusterIndex !== -1) {
+          const distanceChange = Math.abs(Math.sqrt(minimumDistance) - Math.sqrt(previousDistance));
+          if (distanceChange > MIN_MOVEMENT_DISTANCE) {
+            pointsMoved++;
+            clusterIndices[i] = newClusterIndex;
+          }
+        }
+      }
+      if (pointsMoved === 0 && iteration !== 0) {
+        break;
+      }
+      const componentASums = new Array(clusterCount).fill(0);
+      const componentBSums = new Array(clusterCount).fill(0);
+      const componentCSums = new Array(clusterCount).fill(0);
+      for (let i = 0; i < clusterCount; i++) {
+        pixelCountSums[i] = 0;
+      }
+      for (let i = 0; i < pointCount; i++) {
+        const clusterIndex = clusterIndices[i];
+        const point = points[i];
+        const count = counts[i];
+        pixelCountSums[clusterIndex] += count;
+        componentASums[clusterIndex] += point[0] * count;
+        componentBSums[clusterIndex] += point[1] * count;
+        componentCSums[clusterIndex] += point[2] * count;
+      }
+      for (let i = 0; i < clusterCount; i++) {
+        const count = pixelCountSums[i];
+        if (count === 0) {
+          clusters[i] = [0.0, 0.0, 0.0];
+          continue;
+        }
+        const a = componentASums[i] / count;
+        const b = componentBSums[i] / count;
+        const c = componentCSums[i] / count;
+        clusters[i] = [a, b, c];
+      }
+    }
+    const argbToPopulation = new Map();
+    for (let i = 0; i < clusterCount; i++) {
+      const count = pixelCountSums[i];
+      if (count === 0) {
+        continue;
+      }
+      const possibleNewCluster = pointProvider.toInt(clusters[i]);
+      if (argbToPopulation.has(possibleNewCluster)) {
+        continue;
+      }
+      argbToPopulation.set(possibleNewCluster, count);
+    }
+    return argbToPopulation;
+  }
+}
+/**
+ *  A wrapper for maintaining a table of distances between K-Means clusters.
+ */
+class DistanceAndIndex {
+  constructor() {
+    this.distance = -1;
+    this.index = -1;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Quantizes an image into a map, with keys of ARGB colors, and values of the
+ * number of times that color appears in the image.
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable-next-line:class-as-namespace
+class QuantizerMap {
+  /**
+   * @param pixels Colors in ARGB format.
+   * @return A Map with keys of ARGB colors, and values of the number of times
+   *     the color appears in the image.
+   */
+  static quantize(pixels) {
+    const countByColor = new Map();
+    for (let i = 0; i < pixels.length; i++) {
+      const pixel = pixels[i];
+      const alpha = alphaFromArgb(pixel);
+      if (alpha < 255) {
+        continue;
+      }
+      countByColor.set(pixel, (countByColor.get(pixel) ?? 0) + 1);
+    }
+    return countByColor;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const INDEX_BITS = 5;
+const SIDE_LENGTH = 33; // ((1 << INDEX_INDEX_BITS) + 1)
+const TOTAL_SIZE = 35937; // SIDE_LENGTH * SIDE_LENGTH * SIDE_LENGTH
+const directions = {
+  RED: 'red',
+  GREEN: 'green',
+  BLUE: 'blue'
+};
+/**
+ * An image quantizer that divides the image's pixels into clusters by
+ * recursively cutting an RGB cube, based on the weight of pixels in each area
+ * of the cube.
+ *
+ * The algorithm was described by Xiaolin Wu in Graphic Gems II, published in
+ * 1991.
+ */
+class QuantizerWu {
+  constructor(weights = [], momentsR = [], momentsG = [], momentsB = [], moments = [], cubes = []) {
+    this.weights = weights;
+    this.momentsR = momentsR;
+    this.momentsG = momentsG;
+    this.momentsB = momentsB;
+    this.moments = moments;
+    this.cubes = cubes;
+  }
+  /**
+   * @param pixels Colors in ARGB format.
+   * @param maxColors The number of colors to divide the image into. A lower
+   *     number of colors may be returned.
+   * @return Colors in ARGB format.
+   */
+  quantize(pixels, maxColors) {
+    this.constructHistogram(pixels);
+    this.computeMoments();
+    const createBoxesResult = this.createBoxes(maxColors);
+    const results = this.createResult(createBoxesResult.resultCount);
+    return results;
+  }
+  constructHistogram(pixels) {
+    this.weights = Array.from({
+      length: TOTAL_SIZE
+    }).fill(0);
+    this.momentsR = Array.from({
+      length: TOTAL_SIZE
+    }).fill(0);
+    this.momentsG = Array.from({
+      length: TOTAL_SIZE
+    }).fill(0);
+    this.momentsB = Array.from({
+      length: TOTAL_SIZE
+    }).fill(0);
+    this.moments = Array.from({
+      length: TOTAL_SIZE
+    }).fill(0);
+    const countByColor = QuantizerMap.quantize(pixels);
+    for (const [pixel, count] of countByColor.entries()) {
+      const red = redFromArgb(pixel);
+      const green = greenFromArgb(pixel);
+      const blue = blueFromArgb(pixel);
+      const bitsToRemove = 8 - INDEX_BITS;
+      const iR = (red >> bitsToRemove) + 1;
+      const iG = (green >> bitsToRemove) + 1;
+      const iB = (blue >> bitsToRemove) + 1;
+      const index = this.getIndex(iR, iG, iB);
+      this.weights[index] = (this.weights[index] ?? 0) + count;
+      this.momentsR[index] += count * red;
+      this.momentsG[index] += count * green;
+      this.momentsB[index] += count * blue;
+      this.moments[index] += count * (red * red + green * green + blue * blue);
+    }
+  }
+  computeMoments() {
+    for (let r = 1; r < SIDE_LENGTH; r++) {
+      const area = Array.from({
+        length: SIDE_LENGTH
+      }).fill(0);
+      const areaR = Array.from({
+        length: SIDE_LENGTH
+      }).fill(0);
+      const areaG = Array.from({
+        length: SIDE_LENGTH
+      }).fill(0);
+      const areaB = Array.from({
+        length: SIDE_LENGTH
+      }).fill(0);
+      const area2 = Array.from({
+        length: SIDE_LENGTH
+      }).fill(0.0);
+      for (let g = 1; g < SIDE_LENGTH; g++) {
+        let line = 0;
+        let lineR = 0;
+        let lineG = 0;
+        let lineB = 0;
+        let line2 = 0.0;
+        for (let b = 1; b < SIDE_LENGTH; b++) {
+          const index = this.getIndex(r, g, b);
+          line += this.weights[index];
+          lineR += this.momentsR[index];
+          lineG += this.momentsG[index];
+          lineB += this.momentsB[index];
+          line2 += this.moments[index];
+          area[b] += line;
+          areaR[b] += lineR;
+          areaG[b] += lineG;
+          areaB[b] += lineB;
+          area2[b] += line2;
+          const previousIndex = this.getIndex(r - 1, g, b);
+          this.weights[index] = this.weights[previousIndex] + area[b];
+          this.momentsR[index] = this.momentsR[previousIndex] + areaR[b];
+          this.momentsG[index] = this.momentsG[previousIndex] + areaG[b];
+          this.momentsB[index] = this.momentsB[previousIndex] + areaB[b];
+          this.moments[index] = this.moments[previousIndex] + area2[b];
+        }
+      }
+    }
+  }
+  createBoxes(maxColors) {
+    this.cubes = Array.from({
+      length: maxColors
+    }).fill(0).map(() => new Box());
+    const volumeVariance = Array.from({
+      length: maxColors
+    }).fill(0.0);
+    this.cubes[0].r0 = 0;
+    this.cubes[0].g0 = 0;
+    this.cubes[0].b0 = 0;
+    this.cubes[0].r1 = SIDE_LENGTH - 1;
+    this.cubes[0].g1 = SIDE_LENGTH - 1;
+    this.cubes[0].b1 = SIDE_LENGTH - 1;
+    let generatedColorCount = maxColors;
+    let next = 0;
+    for (let i = 1; i < maxColors; i++) {
+      if (this.cut(this.cubes[next], this.cubes[i])) {
+        volumeVariance[next] = this.cubes[next].vol > 1 ? this.variance(this.cubes[next]) : 0.0;
+        volumeVariance[i] = this.cubes[i].vol > 1 ? this.variance(this.cubes[i]) : 0.0;
+      } else {
+        volumeVariance[next] = 0.0;
+        i--;
+      }
+      next = 0;
+      let temp = volumeVariance[0];
+      for (let j = 1; j <= i; j++) {
+        if (volumeVariance[j] > temp) {
+          temp = volumeVariance[j];
+          next = j;
+        }
+      }
+      if (temp <= 0.0) {
+        generatedColorCount = i + 1;
+        break;
+      }
+    }
+    return new CreateBoxesResult(maxColors, generatedColorCount);
+  }
+  createResult(colorCount) {
+    const colors = [];
+    for (let i = 0; i < colorCount; ++i) {
+      const cube = this.cubes[i];
+      const weight = this.volume(cube, this.weights);
+      if (weight > 0) {
+        const r = Math.round(this.volume(cube, this.momentsR) / weight);
+        const g = Math.round(this.volume(cube, this.momentsG) / weight);
+        const b = Math.round(this.volume(cube, this.momentsB) / weight);
+        const color = 255 << 24 | (r & 0x0ff) << 16 | (g & 0x0ff) << 8 | b & 0x0ff;
+        colors.push(color);
+      }
+    }
+    return colors;
+  }
+  variance(cube) {
+    const dr = this.volume(cube, this.momentsR);
+    const dg = this.volume(cube, this.momentsG);
+    const db = this.volume(cube, this.momentsB);
+    const xx = this.moments[this.getIndex(cube.r1, cube.g1, cube.b1)] - this.moments[this.getIndex(cube.r1, cube.g1, cube.b0)] - this.moments[this.getIndex(cube.r1, cube.g0, cube.b1)] + this.moments[this.getIndex(cube.r1, cube.g0, cube.b0)] - this.moments[this.getIndex(cube.r0, cube.g1, cube.b1)] + this.moments[this.getIndex(cube.r0, cube.g1, cube.b0)] + this.moments[this.getIndex(cube.r0, cube.g0, cube.b1)] - this.moments[this.getIndex(cube.r0, cube.g0, cube.b0)];
+    const hypotenuse = dr * dr + dg * dg + db * db;
+    const volume = this.volume(cube, this.weights);
+    return xx - hypotenuse / volume;
+  }
+  cut(one, two) {
+    const wholeR = this.volume(one, this.momentsR);
+    const wholeG = this.volume(one, this.momentsG);
+    const wholeB = this.volume(one, this.momentsB);
+    const wholeW = this.volume(one, this.weights);
+    const maxRResult = this.maximize(one, directions.RED, one.r0 + 1, one.r1, wholeR, wholeG, wholeB, wholeW);
+    const maxGResult = this.maximize(one, directions.GREEN, one.g0 + 1, one.g1, wholeR, wholeG, wholeB, wholeW);
+    const maxBResult = this.maximize(one, directions.BLUE, one.b0 + 1, one.b1, wholeR, wholeG, wholeB, wholeW);
+    let direction;
+    const maxR = maxRResult.maximum;
+    const maxG = maxGResult.maximum;
+    const maxB = maxBResult.maximum;
+    if (maxR >= maxG && maxR >= maxB) {
+      if (maxRResult.cutLocation < 0) {
+        return false;
+      }
+      direction = directions.RED;
+    } else if (maxG >= maxR && maxG >= maxB) {
+      direction = directions.GREEN;
+    } else {
+      direction = directions.BLUE;
+    }
+    two.r1 = one.r1;
+    two.g1 = one.g1;
+    two.b1 = one.b1;
+    switch (direction) {
+      case directions.RED:
+        one.r1 = maxRResult.cutLocation;
+        two.r0 = one.r1;
+        two.g0 = one.g0;
+        two.b0 = one.b0;
+        break;
+      case directions.GREEN:
+        one.g1 = maxGResult.cutLocation;
+        two.r0 = one.r0;
+        two.g0 = one.g1;
+        two.b0 = one.b0;
+        break;
+      case directions.BLUE:
+        one.b1 = maxBResult.cutLocation;
+        two.r0 = one.r0;
+        two.g0 = one.g0;
+        two.b0 = one.b1;
+        break;
+      default:
+        throw new Error('unexpected direction ' + direction);
+    }
+    one.vol = (one.r1 - one.r0) * (one.g1 - one.g0) * (one.b1 - one.b0);
+    two.vol = (two.r1 - two.r0) * (two.g1 - two.g0) * (two.b1 - two.b0);
+    return true;
+  }
+  maximize(cube, direction, first, last, wholeR, wholeG, wholeB, wholeW) {
+    const bottomR = this.bottom(cube, direction, this.momentsR);
+    const bottomG = this.bottom(cube, direction, this.momentsG);
+    const bottomB = this.bottom(cube, direction, this.momentsB);
+    const bottomW = this.bottom(cube, direction, this.weights);
+    let max = 0.0;
+    let cut = -1;
+    let halfR = 0;
+    let halfG = 0;
+    let halfB = 0;
+    let halfW = 0;
+    for (let i = first; i < last; i++) {
+      halfR = bottomR + this.top(cube, direction, i, this.momentsR);
+      halfG = bottomG + this.top(cube, direction, i, this.momentsG);
+      halfB = bottomB + this.top(cube, direction, i, this.momentsB);
+      halfW = bottomW + this.top(cube, direction, i, this.weights);
+      if (halfW === 0) {
+        continue;
+      }
+      let tempNumerator = (halfR * halfR + halfG * halfG + halfB * halfB) * 1.0;
+      let tempDenominator = halfW * 1.0;
+      let temp = tempNumerator / tempDenominator;
+      halfR = wholeR - halfR;
+      halfG = wholeG - halfG;
+      halfB = wholeB - halfB;
+      halfW = wholeW - halfW;
+      if (halfW === 0) {
+        continue;
+      }
+      tempNumerator = (halfR * halfR + halfG * halfG + halfB * halfB) * 1.0;
+      tempDenominator = halfW * 1.0;
+      temp += tempNumerator / tempDenominator;
+      if (temp > max) {
+        max = temp;
+        cut = i;
+      }
+    }
+    return new MaximizeResult(cut, max);
+  }
+  volume(cube, moment) {
+    return moment[this.getIndex(cube.r1, cube.g1, cube.b1)] - moment[this.getIndex(cube.r1, cube.g1, cube.b0)] - moment[this.getIndex(cube.r1, cube.g0, cube.b1)] + moment[this.getIndex(cube.r1, cube.g0, cube.b0)] - moment[this.getIndex(cube.r0, cube.g1, cube.b1)] + moment[this.getIndex(cube.r0, cube.g1, cube.b0)] + moment[this.getIndex(cube.r0, cube.g0, cube.b1)] - moment[this.getIndex(cube.r0, cube.g0, cube.b0)];
+  }
+  bottom(cube, direction, moment) {
+    switch (direction) {
+      case directions.RED:
+        return -moment[this.getIndex(cube.r0, cube.g1, cube.b1)] + moment[this.getIndex(cube.r0, cube.g1, cube.b0)] + moment[this.getIndex(cube.r0, cube.g0, cube.b1)] - moment[this.getIndex(cube.r0, cube.g0, cube.b0)];
+      case directions.GREEN:
+        return -moment[this.getIndex(cube.r1, cube.g0, cube.b1)] + moment[this.getIndex(cube.r1, cube.g0, cube.b0)] + moment[this.getIndex(cube.r0, cube.g0, cube.b1)] - moment[this.getIndex(cube.r0, cube.g0, cube.b0)];
+      case directions.BLUE:
+        return -moment[this.getIndex(cube.r1, cube.g1, cube.b0)] + moment[this.getIndex(cube.r1, cube.g0, cube.b0)] + moment[this.getIndex(cube.r0, cube.g1, cube.b0)] - moment[this.getIndex(cube.r0, cube.g0, cube.b0)];
+      default:
+        throw new Error('unexpected direction $direction');
+    }
+  }
+  top(cube, direction, position, moment) {
+    switch (direction) {
+      case directions.RED:
+        return moment[this.getIndex(position, cube.g1, cube.b1)] - moment[this.getIndex(position, cube.g1, cube.b0)] - moment[this.getIndex(position, cube.g0, cube.b1)] + moment[this.getIndex(position, cube.g0, cube.b0)];
+      case directions.GREEN:
+        return moment[this.getIndex(cube.r1, position, cube.b1)] - moment[this.getIndex(cube.r1, position, cube.b0)] - moment[this.getIndex(cube.r0, position, cube.b1)] + moment[this.getIndex(cube.r0, position, cube.b0)];
+      case directions.BLUE:
+        return moment[this.getIndex(cube.r1, cube.g1, position)] - moment[this.getIndex(cube.r1, cube.g0, position)] - moment[this.getIndex(cube.r0, cube.g1, position)] + moment[this.getIndex(cube.r0, cube.g0, position)];
+      default:
+        throw new Error('unexpected direction $direction');
+    }
+  }
+  getIndex(r, g, b) {
+    return (r << INDEX_BITS * 2) + (r << INDEX_BITS + 1) + r + (g << INDEX_BITS) + g + b;
+  }
+}
+/**
+ * Keeps track of the state of each box created as the Wu  quantization
+ * algorithm progresses through dividing the image's pixels as plotted in RGB.
+ */
+class Box {
+  constructor(r0 = 0, r1 = 0, g0 = 0, g1 = 0, b0 = 0, b1 = 0, vol = 0) {
+    this.r0 = r0;
+    this.r1 = r1;
+    this.g0 = g0;
+    this.g1 = g1;
+    this.b0 = b0;
+    this.b1 = b1;
+    this.vol = vol;
+  }
+}
+/**
+ * Represents final result of Wu algorithm.
+ */
+class CreateBoxesResult {
+  /**
+   * @param requestedCount how many colors the caller asked to be returned from
+   *     quantization.
+   * @param resultCount the actual number of colors achieved from quantization.
+   *     May be lower than the requested count.
+   */
+  constructor(requestedCount, resultCount) {
+    this.requestedCount = requestedCount;
+    this.resultCount = resultCount;
+  }
+}
+/**
+ * Represents the result of calculating where to cut an existing box in such
+ * a way to maximize variance between the two new boxes created by a cut.
+ */
+class MaximizeResult {
+  constructor(cutLocation, maximum) {
+    this.cutLocation = cutLocation;
+    this.maximum = maximum;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * An image quantizer that improves on the quality of a standard K-Means
+ * algorithm by setting the K-Means initial state to the output of a Wu
+ * quantizer, instead of random centroids. Improves on speed by several
+ * optimizations, as implemented in Wsmeans, or Weighted Square Means, K-Means
+ * with those optimizations.
+ *
+ * This algorithm was designed by M. Emre Celebi, and was found in their 2011
+ * paper, Improving the Performance of K-Means for Color Quantization.
+ * https://arxiv.org/abs/1101.0395
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable-next-line:class-as-namespace
+class QuantizerCelebi {
+  /**
+   * @param pixels Colors in ARGB format.
+   * @param maxColors The number of colors to divide the image into. A lower
+   *     number of colors may be returned.
+   * @return Map with keys of colors in ARGB format, and values of number of
+   *     pixels in the original image that correspond to the color in the
+   *     quantized image.
+   */
+  static quantize(pixels, maxColors) {
+    const wu = new QuantizerWu();
+    const wuResult = wu.quantize(pixels, maxColors);
+    return QuantizerWsmeans.quantize(pixels, wuResult, maxColors);
+  }
+}
+
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -2990,6 +3765,145 @@ SchemeVibrant.secondaryRotations = [18.0, 15.0, 10.0, 12.0, 15.0, 18.0, 15.0, 12
  */
 SchemeVibrant.tertiaryRotations = [35.0, 30.0, 20.0, 25.0, 30.0, 35.0, 30.0, 25.0, 25.0];
 
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const SCORE_OPTION_DEFAULTS = {
+  desired: 4,
+  fallbackColorARGB: 0xff4285f4,
+  filter: true // Avoid unsuitable colors.
+};
+function compare(a, b) {
+  if (a.score > b.score) {
+    return -1;
+  } else if (a.score < b.score) {
+    return 1;
+  }
+  return 0;
+}
+/**
+ *  Given a large set of colors, remove colors that are unsuitable for a UI
+ *  theme, and rank the rest based on suitability.
+ *
+ *  Enables use of a high cluster count for image quantization, thus ensuring
+ *  colors aren't muddied, while curating the high cluster count to a much
+ *  smaller number of appropriate choices.
+ */
+class Score {
+  constructor() {}
+  /**
+   * Given a map with keys of colors and values of how often the color appears,
+   * rank the colors based on suitability for being used for a UI theme.
+   *
+   * @param colorsToPopulation map with keys of colors and values of how often
+   *     the color appears, usually from a source image.
+   * @param {ScoreOptions} options optional parameters.
+   * @return Colors sorted by suitability for a UI theme. The most suitable
+   *     color is the first item, the least suitable is the last. There will
+   *     always be at least one color returned. If all the input colors
+   *     were not suitable for a theme, a default fallback color will be
+   *     provided, Google Blue.
+   */
+  static score(colorsToPopulation, options) {
+    const {
+      desired,
+      fallbackColorARGB,
+      filter
+    } = {
+      ...SCORE_OPTION_DEFAULTS,
+      ...options
+    };
+    // Get the HCT color for each Argb value, while finding the per hue count and
+    // total count.
+    const colorsHct = [];
+    const huePopulation = new Array(360).fill(0);
+    let populationSum = 0;
+    for (const [argb, population] of colorsToPopulation.entries()) {
+      const hct = Hct.fromInt(argb);
+      colorsHct.push(hct);
+      const hue = Math.floor(hct.hue);
+      huePopulation[hue] += population;
+      populationSum += population;
+    }
+    // Hues with more usage in neighboring 30 degree slice get a larger number.
+    const hueExcitedProportions = new Array(360).fill(0.0);
+    for (let hue = 0; hue < 360; hue++) {
+      const proportion = huePopulation[hue] / populationSum;
+      for (let i = hue - 14; i < hue + 16; i++) {
+        const neighborHue = sanitizeDegreesInt(i);
+        hueExcitedProportions[neighborHue] += proportion;
+      }
+    }
+    // Scores each HCT color based on usage and chroma, while optionally
+    // filtering out values that do not have enough chroma or usage.
+    const scoredHct = new Array();
+    for (const hct of colorsHct) {
+      const hue = sanitizeDegreesInt(Math.round(hct.hue));
+      const proportion = hueExcitedProportions[hue];
+      if (filter && (hct.chroma < Score.CUTOFF_CHROMA || proportion <= Score.CUTOFF_EXCITED_PROPORTION)) {
+        continue;
+      }
+      const proportionScore = proportion * 100.0 * Score.WEIGHT_PROPORTION;
+      const chromaWeight = hct.chroma < Score.TARGET_CHROMA ? Score.WEIGHT_CHROMA_BELOW : Score.WEIGHT_CHROMA_ABOVE;
+      const chromaScore = (hct.chroma - Score.TARGET_CHROMA) * chromaWeight;
+      const score = proportionScore + chromaScore;
+      scoredHct.push({
+        hct,
+        score
+      });
+    }
+    // Sorted so that colors with higher scores come first.
+    scoredHct.sort(compare);
+    // Iterates through potential hue differences in degrees in order to select
+    // the colors with the largest distribution of hues possible. Starting at
+    // 90 degrees(maximum difference for 4 colors) then decreasing down to a
+    // 15 degree minimum.
+    const chosenColors = [];
+    for (let differenceDegrees$1 = 90; differenceDegrees$1 >= 15; differenceDegrees$1--) {
+      chosenColors.length = 0;
+      for (const {
+        hct
+      } of scoredHct) {
+        const duplicateHue = chosenColors.find(chosenHct => {
+          return differenceDegrees(hct.hue, chosenHct.hue) < differenceDegrees$1;
+        });
+        if (!duplicateHue) {
+          chosenColors.push(hct);
+        }
+        if (chosenColors.length >= desired) break;
+      }
+      if (chosenColors.length >= desired) break;
+    }
+    const colors = [];
+    if (chosenColors.length === 0) {
+      colors.push(fallbackColorARGB);
+    }
+    for (const chosenHct of chosenColors) {
+      colors.push(chosenHct.toInt());
+    }
+    return colors;
+  }
+}
+Score.TARGET_CHROMA = 48.0; // A1 Chroma
+Score.WEIGHT_PROPORTION = 0.7;
+Score.WEIGHT_CHROMA_ABOVE = 0.3;
+Score.WEIGHT_CHROMA_BELOW = 0.1;
+Score.CUTOFF_CHROMA = 5.0;
+Score.CUTOFF_EXCITED_PROPORTION = 0.01;
+
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -3063,6 +3977,96 @@ function parseIntHex(value) {
   return parseInt(value, 16);
 }
 
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Get the source color from an image.
+ *
+ * @param image The image element
+ * @return Source color - the color most suitable for creating a UI theme
+ */
+async function sourceColorFromImage(image) {
+  // Convert Image data to Pixel Array
+  const imageBytes = await new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context) {
+      reject(new Error('Could not get canvas context'));
+      return;
+    }
+    const loadCallback = () => {
+      canvas.width = image.width;
+      canvas.height = image.height;
+      context.drawImage(image, 0, 0);
+      let rect = [0, 0, image.width, image.height];
+      const area = image.dataset['area'];
+      if (area && /^\d+(\s*,\s*\d+){3}$/.test(area)) {
+        rect = area.split(/\s*,\s*/).map(s => {
+          // tslint:disable-next-line:ban
+          return parseInt(s, 10);
+        });
+      }
+      const [sx, sy, sw, sh] = rect;
+      resolve(context.getImageData(sx, sy, sw, sh).data);
+    };
+    const errorCallback = () => {
+      reject(new Error('Image load failed'));
+    };
+    if (image.complete) {
+      loadCallback();
+    } else {
+      image.onload = loadCallback;
+      image.onerror = errorCallback;
+    }
+  });
+  // Convert Image data to Pixel Array
+  const pixels = [];
+  for (let i = 0; i < imageBytes.length; i += 4) {
+    const r = imageBytes[i];
+    const g = imageBytes[i + 1];
+    const b = imageBytes[i + 2];
+    const a = imageBytes[i + 3];
+    if (a < 255) {
+      continue;
+    }
+    const argb = argbFromRgb(r, g, b);
+    pixels.push(argb);
+  }
+  // Convert Pixels to Material Colors
+  const result = QuantizerCelebi.quantize(pixels, 128);
+  const ranked = Score.score(result);
+  const top = ranked[0];
+  return top;
+}
+
+/**
+ * Extracts the Material source color from an image and returns it as a hex string.
+ * @param {HTMLImageElement} image - A fully loaded image element. Pixel data is sampled to derive the source color.
+ * @returns {Promise<string>} A hex color string (`#RRGGBB`) representing the extracted source color.
+ *
+ * @example
+ * const img = document.querySelector("img");
+ * const color = await getColorFromImage(img);
+ * // "#6750A4"
+ */
+async function getColorFromImage(image) {
+  return hexFromArgb(await sourceColorFromImage(image));
+}
+
 var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_apply, _M3eThemeElement_getContrastLevel;
 /**
  * A non-visual element responsible for application-level theming.
@@ -3301,5 +4305,5 @@ __decorate([property({
 __decorate([property()], M3eThemeElement.prototype, "motion", void 0);
 M3eThemeElement = __decorate([customElement("m3e-theme")], M3eThemeElement);
 
-export { M3eThemeElement };
+export { M3eThemeElement, getColorFromImage };
 //# sourceMappingURL=theme.js.map