@studiotoolkit/color-from-image 1.0.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,112 @@
+# Color From Image
+
+React component for extracting dominant colors from images using advanced color analysis algorithms.
+
+**Play around and Generate component code here:**  
+https://studiotoolkit.github.io/build-color-from-image
+
+**Complete Demo:**  
+https://studiotoolkit.github.io/demo-all
+
+**Complete functionality:**  
+https://studiotoolkit.github.io/color-from-image-help
+
+## Features
+
+<table>
+<tr>
+<td align="center"><img src="assets/Empty-Canvas.png" width="200"/><br/>Empty Canvas</td>
+</tr>
+<tr>
+<td align="center"><img src="assets/Image-Pasted.png" width="200"/><br/>Image Pasted</td>
+</tr>
+<tr>
+<td align="center"><img src="assets/Settings.png" width="200"/><br/>Parameters</td>
+</tr>
+</table>
+
+- Extract dominant colors from any image using OKLab color space and K-Means++ clustering
+- Drag and drop or paste image support (Ctrl+V)
+- Customizable canvas dimensions (`width`, `height`)
+- Border styling options (`borderColor`, `borderThickness`)
+- Load from URL (`imageUrl`) or file object (`imageFile`)
+- Programmatic clear with `clearTrigger`
+- CORS-aware image loading with fallback
+- Color extraction callback (`onColorsExtracted`)
+
+## Installation
+
+```bash
+# Using pnpm
+pnpm add @studiotoolkit/color-from-image
+
+# Using npm
+npm install @studiotoolkit/color-from-image
+
+# Using yarn
+yarn add @studiotoolkit/color-from-image
+```
+
+**React Version:** `^18.0.0` or higher
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { ColorFromImage } from '@studiotoolkit/color-from-image';
+import '@studiotoolkit/color-from-image/style.css';
+
+function App() {
+  const handleColorsExtracted = (colors) => {
+    console.log('Extracted colors:', colors);
+  };
+
+  return <ColorFromImage onColorsExtracted={handleColorsExtracted} />;
+}
+```
+
+**Sample Output:**
+
+```json
+{
+  "palette": [
+    "#627bb8",
+    "#53689e",
+    "#4c597d",
+    "#6c6d67",
+    "#6b3d18",
+    "#657092",
+    "#43311b",
+    "#494b4e",
+    "#81889e",
+    "#965528",
+    "#bc773f",
+    "#221b15",
+    "#808748",
+    "#615d2a",
+    "#cdab71",
+    "#f1d85d"
+  ]
+}
+```
+
+### Steps to Use
+
+1. Import the component and its styles
+2. Add the `ColorFromImage` component to your app
+3. Paste an image or drag and drop onto the canvas
+4. The component will automatically extract dominant colors
+5. Use the `onColorsExtracted` callback to receive the color palette
+
+## Contributors
+
+[StudioToolkit](https://github.com/studiotoolkit)
+
+## License
+
+Licensed under the MIT License.
+
+## Keywords
+
+color-extraction, image-colors, dominant-colors, color-analysis, image-processing, color-palette, react-component, design-tools

package/dist/ColorFromImage.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './ColorFromImage.css';
+export interface ColorEntry {
+    palette: string[];
+}
+interface ColorFromImageProps {
+    width?: number;
+    height?: number;
+    borderColor?: string;
+    borderThickness?: number;
+    onColorsExtracted?: (colors: ColorEntry) => void;
+    imageUrl?: string;
+    imageFile?: File | null;
+    clearTrigger?: number;
+}
+declare const ColorFromImage: React.FC<ColorFromImageProps>;
+export default ColorFromImage;
+//# sourceMappingURL=ColorFromImage.d.ts.map

package/dist/ColorFromImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorFromImage.d.ts","sourceRoot":"","sources":["../src/ColorFromImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAoOD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgKjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ColorFromImage } from "./ColorFromImage";
+export type { ColorEntry } from "./ColorFromImage";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react/jsx-runtime"),v=require("react"),I=t=>t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4),j=t=>t<=.0031308?12.92*t:1.055*Math.pow(t,1/2.4)-.055,R=t=>Math.max(0,Math.min(1,t)),$=({r:t,g:r,b:p})=>{const s=I(t),m=I(r),c=I(p),u=Math.cbrt(.4122214708*s+.5363325363*m+.0514459929*c),h=Math.cbrt(.2119034982*s+.6806995451*m+.1073969566*c),b=Math.cbrt(.0883024619*s+.2817188376*m+.6299787005*c);return{L:.2104542553*u+.793617785*h-.0040720468*b,a:1.9779984951*u-2.428592205*h+.4505937099*b,b:.0259040371*u+.7827717662*h-.808675766*b}},k=({L:t,a:r,b:p})=>{const s=t+.3963377774*r+.2158037573*p,m=t-.1055613458*r-.0638541728*p,c=t-.0894841775*r-1.291485548*p,u=s*s*s,h=m*m*m,b=c*c*c;return{r:R(j(4.0767416621*u-3.3077115913*h+.2309699292*b)),g:R(j(-1.2684380046*u+2.6097574011*h-.3413193965*b)),b:R(j(-.0041960863*u-.7034186147*h+1.707614701*b))}},C=(t,r)=>(t.L-r.L)**2+(t.a-r.a)**2+(t.b-r.b)**2,O=t=>Math.sqrt(t.a*t.a+t.b*t.b),A=({r:t,g:r,b:p})=>{const s=m=>Math.round(m*255).toString(16).padStart(2,"0");return`#${s(t)}${s(r)}${s(p)}`},F=(t,r,p=20)=>{const s=[],m=Math.max(1,Math.floor(t.length/4/4e3));for(let n=0;n<t.length;n+=4*m){if(t[n+3]<128)continue;const l=$({r:t[n]/255,g:t[n+1]/255,b:t[n+2]/255}),f=O(l),e=f<.05?.2:f<.15?.6:1;Math.random()>e||s.push(l)}if(s.length===0)return[];const c=s.length,u=[];u.push(s[Math.floor(Math.random()*c)]);for(let n=1;n<r;n++){const l=s.map(d=>Math.min(...u.map(M=>C(d,M)))),f=l.reduce((d,M)=>d+M,0);let e=Math.random()*f,g=0;for(let d=0;d<c;d++)if(e-=l[d],e<=0){g=d;break}u.push({...s[g]})}const h=new Int32Array(c);for(let n=0;n<p;n++){let l=!1;for(let e=0;e<c;e++){let g=0,d=1/0;for(let M=0;M<r;M++){const D=C(s[e],u[M]);D<d&&(d=D,g=M)}h[e]!==g&&(h[e]=g,l=!0)}if(!l)break;const f=Array.from({length:r},()=>({L:0,a:0,b:0,count:0}));for(let e=0;e<c;e++){const g=h[e];f[g].L+=s[e].L,f[g].a+=s[e].a,f[g].b+=s[e].b,f[g].count++}for(let e=0;e<r;e++)f[e].count>0&&(u[e]={L:f[e].L/f[e].count,a:f[e].a/f[e].count,b:f[e].b/f[e].count})}const b=new Array(r).fill(0);for(let n=0;n<c;n++)b[h[n]]++;return u.map((n,l)=>({hex:A(k(n)),count:b[l],total:c,score:b[l]*(1+3*O(n))})).filter(n=>n.count>0).sort((n,l)=>l.score-n.score)},S=(t,r=16)=>{const p=t.naturalWidth,s=t.naturalHeight;if(!p||!s)return{palette:[]};const m=document.createElement("canvas");m.width=p,m.height=s;const c=m.getContext("2d");if(!c)return{palette:[]};c.drawImage(t,0,0);let u;try{u=c.getImageData(0,0,p,s).data}catch{return{palette:[]}}return{palette:F(u,r).map(({hex:h})=>h)}},N=({width:t=200,height:r=200,borderColor:p="#cccccc",borderThickness:s=1,onColorsExtracted:m,imageUrl:c,imageFile:u,clearTrigger:h})=>{const b=v.useRef(null),n=v.useRef(()=>{}),l=v.useRef(m),[f,e]=v.useState(null),[g,d]=v.useState(""),M=o=>{const a=b.current;if(!a)return;const i=a.getContext("2d");if(!i)return;i.clearRect(0,0,t,r);const x=Math.min(t/o.width,r/o.height),y=o.width*x,L=o.height*x;i.drawImage(o,(t-y)/2,(r-L)/2,y,L)};v.useLayoutEffect(()=>{n.current=M}),v.useLayoutEffect(()=>{l.current=m}),v.useEffect(()=>{f&&n.current(f)},[t,r,f]);const D=o=>{const a=new FileReader;a.onload=()=>{const i=new Image;i.onload=()=>{var y;e(i),d(""),n.current(i);const x=S(i);x.palette.length>0&&((y=l.current)==null||y.call(l,x))},i.src=a.result},a.readAsDataURL(o)};v.useEffect(()=>{if(!c)return;d("");const o=new Image;o.crossOrigin="anonymous",o.src=c,o.onload=()=>{var i;e(o),n.current(o);const a=S(o);a.palette.length>0?(i=l.current)==null||i.call(l,a):d("Image loaded but color extraction failed.")},o.onerror=()=>{const a=new Image;a.src=c,a.onload=()=>{e(a),n.current(a),d("Displayed but CORS blocked color extraction. Upload the file directly.")},a.onerror=()=>d("Failed to load image. Check the URL and try again.")}},[c]),v.useEffect(()=>{u&&(d(""),D(u))},[u]),v.useEffect(()=>{var a,i;if(!h)return;const o=(a=b.current)==null?void 0:a.getContext("2d");o==null||o.clearRect(0,0,t,r),e(null),d(""),(i=l.current)==null||i.call(l,{palette:[]})},[h,t,r]),v.useEffect(()=>{const o=a=>{var x;const i=(x=a.clipboardData)==null?void 0:x.items;if(i){for(let y=0;y<i.length;y++)if(i[y].type.startsWith("image")){const L=i[y].getAsFile();if(L){D(L);return}}}};return window.addEventListener("paste",o),()=>window.removeEventListener("paste",o)},[]);const E=o=>o.preventDefault(),T=o=>{var i;o.preventDefault();const a=(i=o.dataTransfer.files)==null?void 0:i[0];a!=null&&a.type.startsWith("image/")&&D(a)};return w.jsxs("div",{className:"cfi-container",children:[w.jsxs("div",{className:"cfi-canvas-wrapper",style:{borderColor:p,borderWidth:`${s}px`},onDragOver:E,onDrop:T,children:[w.jsx("canvas",{ref:b,width:t,height:r,className:"cfi-canvas",style:{width:`${t}px`,height:`${r}px`}}),!f&&w.jsxs("div",{className:"cfi-canvas-overlay",children:[w.jsx("span",{children:"Drag & Drop"}),w.jsx("span",{children:"or Ctrl+V / Paste"})]})]}),g&&w.jsx("p",{className:"cfi-url-error",children:g})]})};exports.ColorFromImage=N;

package/dist/index.mjs

@@ -0,0 +1,215 @@
+import { jsxs as I, jsx as L } from "react/jsx-runtime";
+import { useRef as C, useState as A, useLayoutEffect as N, useEffect as x } from "react";
+const O = (t) => t <= 0.04045 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4), $ = (t) => t <= 31308e-7 ? 12.92 * t : 1.055 * Math.pow(t, 1 / 2.4) - 0.055, k = (t) => Math.max(0, Math.min(1, t)), j = ({ r: t, g: r, b: p }) => {
+  const o = O(t), m = O(r), c = O(p), u = Math.cbrt(0.4122214708 * o + 0.5363325363 * m + 0.0514459929 * c), h = Math.cbrt(0.2119034982 * o + 0.6806995451 * m + 0.1073969566 * c), b = Math.cbrt(0.0883024619 * o + 0.2817188376 * m + 0.6299787005 * c);
+  return {
+    L: 0.2104542553 * u + 0.793617785 * h - 0.0040720468 * b,
+    a: 1.9779984951 * u - 2.428592205 * h + 0.4505937099 * b,
+    b: 0.0259040371 * u + 0.7827717662 * h - 0.808675766 * b
+  };
+}, z = ({ L: t, a: r, b: p }) => {
+  const o = t + 0.3963377774 * r + 0.2158037573 * p, m = t - 0.1055613458 * r - 0.0638541728 * p, c = t - 0.0894841775 * r - 1.291485548 * p, u = o * o * o, h = m * m * m, b = c * c * c;
+  return {
+    r: k($(4.0767416621 * u - 3.3077115913 * h + 0.2309699292 * b)),
+    g: k($(-1.2684380046 * u + 2.6097574011 * h - 0.3413193965 * b)),
+    b: k($(-0.0041960863 * u - 0.7034186147 * h + 1.707614701 * b))
+  };
+}, R = (t, r) => (t.L - r.L) ** 2 + (t.a - r.a) ** 2 + (t.b - r.b) ** 2, T = (t) => Math.sqrt(t.a * t.a + t.b * t.b), G = ({ r: t, g: r, b: p }) => {
+  const o = (m) => Math.round(m * 255).toString(16).padStart(2, "0");
+  return `#${o(t)}${o(r)}${o(p)}`;
+}, H = (t, r, p = 20) => {
+  const o = [], m = Math.max(1, Math.floor(t.length / 4 / 4e3));
+  for (let n = 0; n < t.length; n += 4 * m) {
+    if (t[n + 3] < 128) continue;
+    const l = j({
+      r: t[n] / 255,
+      g: t[n + 1] / 255,
+      b: t[n + 2] / 255
+    }), f = T(l), e = f < 0.05 ? 0.2 : f < 0.15 ? 0.6 : 1;
+    Math.random() > e || o.push(l);
+  }
+  if (o.length === 0) return [];
+  const c = o.length, u = [];
+  u.push(o[Math.floor(Math.random() * c)]);
+  for (let n = 1; n < r; n++) {
+    const l = o.map((d) => Math.min(...u.map((v) => R(d, v)))), f = l.reduce((d, v) => d + v, 0);
+    let e = Math.random() * f, g = 0;
+    for (let d = 0; d < c; d++)
+      if (e -= l[d], e <= 0) {
+        g = d;
+        break;
+      }
+    u.push({ ...o[g] });
+  }
+  const h = new Int32Array(c);
+  for (let n = 0; n < p; n++) {
+    let l = !1;
+    for (let e = 0; e < c; e++) {
+      let g = 0, d = 1 / 0;
+      for (let v = 0; v < r; v++) {
+        const y = R(o[e], u[v]);
+        y < d && (d = y, g = v);
+      }
+      h[e] !== g && (h[e] = g, l = !0);
+    }
+    if (!l) break;
+    const f = Array.from({ length: r }, () => ({
+      L: 0,
+      a: 0,
+      b: 0,
+      count: 0
+    }));
+    for (let e = 0; e < c; e++) {
+      const g = h[e];
+      f[g].L += o[e].L, f[g].a += o[e].a, f[g].b += o[e].b, f[g].count++;
+    }
+    for (let e = 0; e < r; e++)
+      f[e].count > 0 && (u[e] = {
+        L: f[e].L / f[e].count,
+        a: f[e].a / f[e].count,
+        b: f[e].b / f[e].count
+      });
+  }
+  const b = new Array(r).fill(0);
+  for (let n = 0; n < c; n++) b[h[n]]++;
+  return u.map((n, l) => ({
+    hex: G(z(n)),
+    count: b[l],
+    total: c,
+    // Vivid centroids score higher than their raw pixel count alone
+    score: b[l] * (1 + 3 * T(n))
+  })).filter((n) => n.count > 0).sort((n, l) => l.score - n.score);
+}, F = (t, r = 16) => {
+  const p = t.naturalWidth, o = t.naturalHeight;
+  if (!p || !o) return { palette: [] };
+  const m = document.createElement("canvas");
+  m.width = p, m.height = o;
+  const c = m.getContext("2d");
+  if (!c) return { palette: [] };
+  c.drawImage(t, 0, 0);
+  let u;
+  try {
+    u = c.getImageData(0, 0, p, o).data;
+  } catch {
+    return { palette: [] };
+  }
+  return { palette: H(u, r).map(({ hex: h }) => h) };
+}, B = ({
+  width: t = 200,
+  height: r = 200,
+  borderColor: p = "#cccccc",
+  borderThickness: o = 1,
+  onColorsExtracted: m,
+  imageUrl: c,
+  imageFile: u,
+  clearTrigger: h
+}) => {
+  const b = C(null), n = C(() => {
+  }), l = C(m), [f, e] = A(null), [g, d] = A(""), v = (a) => {
+    const s = b.current;
+    if (!s) return;
+    const i = s.getContext("2d");
+    if (!i) return;
+    i.clearRect(0, 0, t, r);
+    const w = Math.min(t / a.width, r / a.height), M = a.width * w, D = a.height * w;
+    i.drawImage(a, (t - M) / 2, (r - D) / 2, M, D);
+  };
+  N(() => {
+    n.current = v;
+  }), N(() => {
+    l.current = m;
+  }), x(() => {
+    f && n.current(f);
+  }, [t, r, f]);
+  const y = (a) => {
+    const s = new FileReader();
+    s.onload = () => {
+      const i = new Image();
+      i.onload = () => {
+        var M;
+        e(i), d(""), n.current(i);
+        const w = F(i);
+        w.palette.length > 0 && ((M = l.current) == null || M.call(l, w));
+      }, i.src = s.result;
+    }, s.readAsDataURL(a);
+  };
+  x(() => {
+    if (!c) return;
+    d("");
+    const a = new Image();
+    a.crossOrigin = "anonymous", a.src = c, a.onload = () => {
+      var i;
+      e(a), n.current(a);
+      const s = F(a);
+      s.palette.length > 0 ? (i = l.current) == null || i.call(l, s) : d("Image loaded but color extraction failed.");
+    }, a.onerror = () => {
+      const s = new Image();
+      s.src = c, s.onload = () => {
+        e(s), n.current(s), d("Displayed but CORS blocked color extraction. Upload the file directly.");
+      }, s.onerror = () => d("Failed to load image. Check the URL and try again.");
+    };
+  }, [c]), x(() => {
+    u && (d(""), y(u));
+  }, [u]), x(() => {
+    var s, i;
+    if (!h) return;
+    const a = (s = b.current) == null ? void 0 : s.getContext("2d");
+    a == null || a.clearRect(0, 0, t, r), e(null), d(""), (i = l.current) == null || i.call(l, { palette: [] });
+  }, [h, t, r]), x(() => {
+    const a = (s) => {
+      var w;
+      const i = (w = s.clipboardData) == null ? void 0 : w.items;
+      if (i) {
+        for (let M = 0; M < i.length; M++)
+          if (i[M].type.startsWith("image")) {
+            const D = i[M].getAsFile();
+            if (D) {
+              y(D);
+              return;
+            }
+          }
+      }
+    };
+    return window.addEventListener("paste", a), () => window.removeEventListener("paste", a);
+  }, []);
+  const S = (a) => a.preventDefault(), W = (a) => {
+    var i;
+    a.preventDefault();
+    const s = (i = a.dataTransfer.files) == null ? void 0 : i[0];
+    s != null && s.type.startsWith("image/") && y(s);
+  };
+  return /* @__PURE__ */ I("div", { className: "cfi-container", children: [
+    /* @__PURE__ */ I(
+      "div",
+      {
+        className: "cfi-canvas-wrapper",
+        style: {
+          borderColor: p,
+          borderWidth: `${o}px`
+        },
+        onDragOver: S,
+        onDrop: W,
+        children: [
+          /* @__PURE__ */ L(
+            "canvas",
+            {
+              ref: b,
+              width: t,
+              height: r,
+              className: "cfi-canvas",
+              style: { width: `${t}px`, height: `${r}px` }
+            }
+          ),
+          !f && /* @__PURE__ */ I("div", { className: "cfi-canvas-overlay", children: [
+            /* @__PURE__ */ L("span", { children: "Drag & Drop" }),
+            /* @__PURE__ */ L("span", { children: "or Ctrl+V / Paste" })
+          ] })
+        ]
+      }
+    ),
+    g && /* @__PURE__ */ L("p", { className: "cfi-url-error", children: g })
+  ] });
+};
+export {
+  B as ColorFromImage
+};

package/dist/style.css

@@ -0,0 +1 @@
+.cfi-container{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background-color:#fff}[data-theme=dark] .cfi-container{background-color:#1a1a1a!important}.cfi-canvas-wrapper{position:relative;display:inline-block;line-height:0;border-style:solid;box-sizing:border-box}[data-theme=dark] .cfi-canvas-wrapper{border-color:#444}.cfi-canvas{display:block}.cfi-canvas-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none;background:#f8f8f8d9;line-height:normal}[data-theme=dark] .cfi-canvas-overlay{background:#1a1a1ad9}.cfi-canvas-overlay span{font-size:14px;color:#888;font-family:inherit}[data-theme=dark] .cfi-canvas-overlay span{color:#aaa}.cfi-canvas-overlay span:first-child{font-size:16px;font-weight:600;color:#555}[data-theme=dark] .cfi-canvas-overlay span:first-child{color:#ccc}.cfi-actions-row{display:flex;align-items:center;gap:8px}.cfi-file-input{font-family:inherit;font-size:13px;flex:1}.cfi-clear-button{padding:5px 12px;background:#e74c3c;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-family:inherit;white-space:nowrap}.cfi-clear-button:hover{background:#c0392b}.cfi-paste-button{padding:5px 12px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-family:inherit;white-space:nowrap}.cfi-paste-button:hover{background:#1976d2}.cfi-url-row{display:flex;align-items:center;gap:6px}.cfi-url-input{padding:5px 8px;border:1px solid #ccc;border-radius:4px;font-size:13px;font-family:inherit}.cfi-load-button{padding:5px 12px;background:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-family:inherit}.cfi-load-button:hover{background:#217dbb}.cfi-url-error{margin:0;font-size:12px;color:#c0392b}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@studiotoolkit/color-from-image",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "React component for extracting dominant colors from images using advanced color analysis algorithms",
+  "author": "StudioToolkit",
+  "homepage": "https://studiotoolkit.github.io/build-color-from-image",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/studiotoolkit/studiotoolkit",
+    "directory": "packages/color-from-image"
+  },
+  "bugs": {
+    "url": "https://github.com/studiotoolkit/studiotoolkit/issues"
+  },
+  "keywords": [
+    "color-extraction",
+    "image-colors",
+    "dominant-colors",
+    "color-analysis",
+    "image-processing",
+    "color-palette",
+    "react-component",
+    "design-tools",
+    "oklab",
+    "kmeans",
+    "color-quantization"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/ColorFromImage.css",
+    "./src/ColorFromImage.css": "./src/ColorFromImage.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.0"
+  },
+  "scripts": {
+    "build": "npx tsc --project tsconfig.json && vite build",
+    "dev": "vite build --watch",
+    "clean": "rm -rf dist",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui"
+  }
+}